diff --git a/src/components/Connection/SGEConnect/__snapshots__/SgeConnectView.spec.tsx.snap b/src/components/Connection/SGEConnect/__snapshots__/SgeConnectView.spec.tsx.snap
index eb140eabe34b85276bf8f402c4a3114b07fb7b51..921a6dd18d944d8834f8cd247257329dd02687d4 100644
--- a/src/components/Connection/SGEConnect/__snapshots__/SgeConnectView.spec.tsx.snap
+++ b/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"
>
diff --git a/src/components/Header/Header.spec.tsx b/src/components/Header/Header.spec.tsx
index 939b20f152bcd3ed27a467a879807c668428796e..d76305f56773119682e4e2174a3952d2363e121e 100644
--- a/src/components/Header/Header.spec.tsx
+++ b/src/components/Header/Header.spec.tsx
@@ -1,6 +1,6 @@
-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)
})
})
diff --git a/src/components/Header/Header.tsx b/src/components/Header/Header.tsx
index db54fd2971edb157b4fc87cfa9f831477a09ef20..9eba353d66a8156dd0a837e4a749c8b2271de4c3 100644
--- a/src/components/Header/Header.tsx
+++ b/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>
)
}
diff --git a/src/components/Header/__snapshots__/Header.spec.tsx.snap b/src/components/Header/__snapshots__/Header.spec.tsx.snap
new file mode 100644
index 0000000000000000000000000000000000000000..3bd7905849ab67ceeb3159018c8bfc69fbecec99
--- /dev/null
+++ b/src/components/Header/__snapshots__/Header.spec.tsx.snap
@@ -0,0 +1,53 @@
+// 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>
+`;
diff --git a/src/components/Header/header.scss b/src/components/Header/header.scss
index 755efde668cf828c91db1a5f96cfc3e8ae0eeb7f..2817543e8f42e3858b513f7c97993c650d0304b1 100644
--- a/src/components/Header/header.scss
+++ b/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;