test(rtl): header

src/components/Connection/SGEConnect/__snapshots__/SgeConnectView.spec.tsx.snap

@@ -6,9 +6,7 @@ exports[`SgeConnectView component should be rendered correctly 1`] = `
     displaybackarrow="true"
     titlekey="common.title_sge_connect"
   />
-  <div
-    class="header"
-  >
+  <header>
     <div
       class="header-top"
     >
@@ -77,7 +75,7 @@ exports[`SgeConnectView component should be rendered correctly 1`] = `
     <div
       class="header-bar"
     />
-  </div>
+  </header>
   <mock-content
     heightoffset="-48"
   >

src/components/Header/Header.spec.tsx

-import IconButton from '@material-ui/core/IconButton'
+import { render, screen } from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
 import Header from 'components/Header/Header'
-import { mount } from 'enzyme'
 import React from 'react'
 import { Provider } from 'react-redux'
 import * as ModalAction from 'store/modal/modal.slice'
@@ -12,71 +12,90 @@ jest.mock('react-router-dom', () => ({
   useNavigate: () => mockedNavigate,
 }))
 
-const mockSetHeaderHeight = jest.fn()
-
 describe('Header component', () => {
   const store = createMockEcolyoStore()
   it('should be rendered correctly', () => {
-    const wrapper = mount(
+    const { container } = render(
       <Provider store={store}>
-        <Header
-          setHeaderHeight={mockSetHeaderHeight}
-          desktopTitleKey="mockKey"
-        />
+        <Header setHeaderHeight={jest.fn()} desktopTitleKey="mockKey" />
       </Provider>
     )
-    expect(wrapper.find('.header')).toHaveLength(1)
+    expect(container).toMatchSnapshot()
+    expect(container.getElementsByTagName('header')[0]).toBeInTheDocument()
   })
 
   it('should display title and back button when desktopTitle key provided and displayBackArrow is true', () => {
-    const wrapper = mount(
+    const key = 'titleKey'
+    render(
       <Provider store={store}>
         <Header
-          desktopTitleKey="KEY"
+          desktopTitleKey={key}
           displayBackArrow={true}
-          setHeaderHeight={mockSetHeaderHeight}
+          setHeaderHeight={jest.fn()}
         />
       </Provider>
     )
-    expect(wrapper.find('.header-text-desktop').first().text()).toEqual('KEY')
+    expect(screen.getByText(key)).toBeInTheDocument()
     expect(
-      wrapper.find(IconButton).find('.header-back-button').first()
-    ).toHaveLength(1)
+      screen.getByRole('button', { name: 'header.accessibility.button_back' })
+    ).toBeInTheDocument()
   })
-
-  it('should call handleClickBack when back button is clicked', () => {
-    const wrapper = mount(
+  it('should NOT display back button when displayBackArrow is false', async () => {
+    render(
       <Provider store={store}>
         <Header
-          desktopTitleKey="KEY"
-          displayBackArrow={true}
-          setHeaderHeight={mockSetHeaderHeight}
+          desktopTitleKey="test"
+          displayBackArrow={false}
+          setHeaderHeight={jest.fn()}
         />
       </Provider>
     )
-    wrapper
-      .find(IconButton)
-      .find('.header-back-button')
-      .first()
-      .simulate('click')
-    expect(mockedNavigate).toHaveBeenCalled()
+    expect(
+      screen.queryByRole('button', {
+        name: 'header.accessibility.button_back',
+      })
+    ).not.toBeInTheDocument()
+  })
+
+  describe('back functions', () => {
+    it('should call navigate -1 when back button is clicked with NO back fn', async () => {
+      render(
+        <Provider store={store}>
+          <Header
+            desktopTitleKey="KEY"
+            displayBackArrow={true}
+            setHeaderHeight={jest.fn()}
+          />
+        </Provider>
+      )
+      await userEvent.click(screen.getAllByRole('button')[0])
+      expect(mockedNavigate).toHaveBeenCalled()
+    })
+    it('should call custom back fn when back button is clicked', async () => {
+      const mockBack = jest.fn()
+      render(
+        <Provider store={store}>
+          <Header
+            desktopTitleKey="KEY"
+            displayBackArrow={true}
+            setHeaderHeight={jest.fn()}
+            backFunction={mockBack}
+          />
+        </Provider>
+      )
+      await userEvent.click(screen.getAllByRole('button')[0])
+      expect(mockBack).toHaveBeenCalled()
+    })
   })
 
-  it('should call handleClickFeedbacks when feedback button is clicked', () => {
-    const wrapper = mount(
+  it('should call handleClickFeedbacks when feedback button is clicked', async () => {
+    render(
       <Provider store={store}>
-        <Header
-          setHeaderHeight={mockSetHeaderHeight}
-          desktopTitleKey="mockKey"
-        />
+        <Header setHeaderHeight={jest.fn()} desktopTitleKey="mockKey" />
       </Provider>
     )
     const updateModalSpy = jest.spyOn(ModalAction, 'openFeedbackModal')
-    wrapper
-      .find(IconButton)
-      .find('.header-feedbacks-button')
-      .first()
-      .simulate('click')
+    await userEvent.click(screen.getAllByRole('button')[0])
     expect(updateModalSpy).toHaveBeenCalledWith(true)
   })
 })

src/components/Header/Header.tsx

@@ -54,7 +54,7 @@ const Header = ({
   }, [screenType, children, setHeaderHeight])
 
   return (
-    <div className="header" ref={header}>
+    <header ref={header}>
       <div className="header-top">
         <div className="header-content">
           <div
@@ -100,7 +100,7 @@ const Header = ({
         </div>
       </div>
       <div className="header-bar" />
-    </div>
+    </header>
   )
 }
 

src/components/Header/__snapshots__/Header.spec.tsx.snap

+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Header component should be rendered correctly 1`] = `
+<div>
+  <header>
+    <div
+      class="header-top"
+    >
+      <div
+        class="header-content"
+      >
+        <div
+          class="header-content-top"
+        >
+          <div
+            class="header-text-desktop text-14-normal-uppercase"
+          >
+            <span>
+              mockKey
+            </span>
+          </div>
+          <button
+            aria-label="header.accessibility.button_open_feedbacks"
+            class="MuiButtonBase-root MuiIconButton-root header-feedbacks-button"
+            tabindex="0"
+            type="button"
+          >
+            <span
+              class="MuiIconButton-label"
+            >
+              <svg
+                class="styles__icon___23x3R"
+                height="40"
+                width="40"
+              >
+                <use
+                  xlink:href="#test-file-stub"
+                />
+              </svg>
+            </span>
+            <span
+              class="MuiTouchRipple-root"
+            />
+          </button>
+        </div>
+      </div>
+    </div>
+    <div
+      class="header-bar"
+    />
+  </header>
+</div>
+`;

src/components/Header/header.scss

@@ -2,7 +2,7 @@
 @import 'src/styles/base/color';
 @import 'src/styles/base/z-index';
 
-.header {
+header {
   display: flex;
   align-items: center;
   flex-direction: column;