From ee9183a59554f19ca8acdf69cdee0e2a8485d291 Mon Sep 17 00:00:00 2001
From: Bastien DUMONT <bdumont@grandlyon.com>
Date: Thu, 16 Nov 2023 14:20:23 +0000
Subject: [PATCH] test(rtl): options
---
.../Modals/exportDoneModal.spec.tsx | 11 ++-
.../Modals/exportLoadingModal.spec.tsx | 11 ++-
.../Modals/exportStartModal.spec.tsx | 11 ++-
.../ProfileTypeOptions.spec.tsx | 45 ++++++----
.../ProfileTypeOptions/ProfileTypeOptions.tsx | 16 ++--
.../ReportOptions/ReportOptions.spec.tsx | 89 ++++++++++---------
.../Unsubscribe/UnSubscribeView.spec.tsx | 11 ++-
7 files changed, 104 insertions(+), 90 deletions(-)
diff --git a/src/components/Options/ExportData/Modals/exportDoneModal.spec.tsx b/src/components/Options/ExportData/Modals/exportDoneModal.spec.tsx
index 900cf07ee..dc0bd5588 100644
--- a/src/components/Options/ExportData/Modals/exportDoneModal.spec.tsx
+++ b/src/components/Options/ExportData/Modals/exportDoneModal.spec.tsx
@@ -1,6 +1,5 @@
-import { Button } from '@material-ui/core'
-import { render } from '@testing-library/react'
-import { mount } from 'enzyme'
+import { render, screen } from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
import React from 'react'
import ExportDoneModal from './exportDoneModal'
@@ -19,16 +18,16 @@ describe('exportDoneModal component', () => {
expect(baseElement).toMatchSnapshot()
})
- it('should close modal', () => {
+ it('should close modal', async () => {
const mockHandleClose = jest.fn()
- const wrapper = mount(
+ render(
<ExportDoneModal
open={true}
error={false}
handleCloseClick={mockHandleClose}
/>
)
- wrapper.find(Button).first().simulate('click')
+ await userEvent.click(screen.getAllByRole('button')[0])
expect(mockHandleClose).toHaveBeenCalledTimes(1)
})
})
diff --git a/src/components/Options/ExportData/Modals/exportLoadingModal.spec.tsx b/src/components/Options/ExportData/Modals/exportLoadingModal.spec.tsx
index 7825cae49..06371f31a 100644
--- a/src/components/Options/ExportData/Modals/exportLoadingModal.spec.tsx
+++ b/src/components/Options/ExportData/Modals/exportLoadingModal.spec.tsx
@@ -1,6 +1,5 @@
-import { Button } from '@material-ui/core'
-import { render } from '@testing-library/react'
-import { mount } from 'enzyme'
+import { render, screen } from '@testing-library/react'
+import { userEvent } from '@testing-library/user-event'
import React from 'react'
import { allFluids } from 'utils/utils'
import ExportLoadingModal from './exportLoadingModal'
@@ -18,9 +17,9 @@ describe('ExportLoadingModal component', () => {
expect(baseElement).toMatchSnapshot()
})
- it('should cancel download', () => {
+ it('should cancel download', async () => {
const mockHandleClose = jest.fn()
- const wrapper = mount(
+ render(
<ExportLoadingModal
open={true}
handleCloseClick={mockHandleClose}
@@ -28,7 +27,7 @@ describe('ExportLoadingModal component', () => {
selectedFluids={allFluids}
/>
)
- wrapper.find(Button).first().simulate('click')
+ await userEvent.click(screen.getAllByRole('button')[0])
expect(mockHandleClose).toHaveBeenCalledTimes(1)
})
})
diff --git a/src/components/Options/ExportData/Modals/exportStartModal.spec.tsx b/src/components/Options/ExportData/Modals/exportStartModal.spec.tsx
index 90c9fd18b..36a16b1b1 100644
--- a/src/components/Options/ExportData/Modals/exportStartModal.spec.tsx
+++ b/src/components/Options/ExportData/Modals/exportStartModal.spec.tsx
@@ -1,6 +1,5 @@
-import { Button } from '@material-ui/core'
-import { render } from '@testing-library/react'
-import { mount } from 'enzyme'
+import { render, screen } from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
import React from 'react'
import ExportStartModal from './exportStartModal'
@@ -16,16 +15,16 @@ describe('exportStartModal component', () => {
expect(baseElement).toMatchSnapshot()
})
- it('should close modal', () => {
+ it('should close modal', async () => {
const mockHandleClose = jest.fn()
- const wrapper = mount(
+ render(
<ExportStartModal
open={true}
handleCloseClick={mockHandleClose}
handleDownloadClick={jest.fn()}
/>
)
- wrapper.find(Button).first().simulate('click')
+ await userEvent.click(screen.getAllByRole('button')[0])
expect(mockHandleClose).toHaveBeenCalledTimes(1)
})
})
diff --git a/src/components/Options/ProfileTypeOptions/ProfileTypeOptions.spec.tsx b/src/components/Options/ProfileTypeOptions/ProfileTypeOptions.spec.tsx
index 6bbdb5dc3..e5c67e980 100644
--- a/src/components/Options/ProfileTypeOptions/ProfileTypeOptions.spec.tsx
+++ b/src/components/Options/ProfileTypeOptions/ProfileTypeOptions.spec.tsx
@@ -1,6 +1,5 @@
-import profileIcon from 'assets/icons/ico/profile.svg'
-import StyledCard from 'components/CommonKit/Card/StyledCard'
-import StyledIcon from 'components/CommonKit/Icon/StyledIcon'
+import { render, screen } from '@testing-library/react'
+import { userEvent } from '@testing-library/user-event'
import ProfileTypeOptions from 'components/Options/ProfileTypeOptions/ProfileTypeOptions'
import {
HousingType,
@@ -8,7 +7,6 @@ import {
IndividualOrCollective,
ThreeChoicesAnswer,
} from 'enums'
-import { mount } from 'enzyme'
import React from 'react'
import { Provider } from 'react-redux'
import { mockProfileType } from 'tests/__mocks__/profileType.mock'
@@ -18,18 +16,23 @@ import {
mockProfileState,
} from 'tests/__mocks__/store'
+const mockedNavigate = jest.fn()
+jest.mock('react-router-dom', () => ({
+ ...jest.requireActual('react-router-dom'),
+ useNavigate: () => mockedNavigate,
+}))
+
describe('ProfileTypeOptions component', () => {
const store = createMockEcolyoStore()
- it('should be rendered correctly', () => {
- const wrapper = mount(
+ it('should be rendered correctly with profile NOT completed', async () => {
+ const { container } = render(
<Provider store={store}>
<ProfileTypeOptions />
</Provider>
)
- expect(wrapper.find(StyledCard).exists()).toBeTruthy()
- expect(wrapper.find(StyledIcon).exists()).toBeTruthy()
- expect(wrapper.find(profileIcon)).toBeTruthy()
- wrapper.find('.profile-link').first().simulate('click')
+ expect(container.getElementsByClassName('profile-icon').length).toBeTruthy()
+ await userEvent.click(screen.getByRole('button'))
+ expect(mockedNavigate).toHaveBeenCalled()
})
it('should be rendered when user complete profile type form', () => {
const store = createMockEcolyoStore({
@@ -37,12 +40,14 @@ describe('ProfileTypeOptions component', () => {
profileType: mockProfileType,
challenge: mockChallengeState,
})
- const wrapper = mount(
+ const { container } = render(
<Provider store={store}>
<ProfileTypeOptions />
</Provider>
)
- expect(wrapper.find('.profile-container').exists()).toBeTruthy()
+ expect(
+ container.getElementsByClassName('profile-container')[0]
+ ).toBeInTheDocument()
})
it('should be rendered when housing_type = apartment', () => {
const store = createMockEcolyoStore({
@@ -50,12 +55,12 @@ describe('ProfileTypeOptions component', () => {
profileType: { ...mockProfileType, housingType: HousingType.APARTMENT },
challenge: mockChallengeState,
})
- const wrapper = mount(
+ const { container } = render(
<Provider store={store}>
<ProfileTypeOptions />
</Provider>
)
- expect(wrapper.find('.floor').exists()).toBeTruthy()
+ expect(container.getElementsByClassName('floor')[0]).toBeInTheDocument()
})
it('should display heating with equipments', () => {
const store = createMockEcolyoStore({
@@ -69,12 +74,14 @@ describe('ProfileTypeOptions component', () => {
},
challenge: mockChallengeState,
})
- const wrapper = mount(
+ const { container } = render(
<Provider store={store}>
<ProfileTypeOptions />
</Provider>
)
- expect(wrapper.find('.equipments').exists()).toBeTruthy()
+ expect(
+ container.getElementsByClassName('equipments')[0]
+ ).toBeInTheDocument()
})
it('should display insulation work', () => {
const store = createMockEcolyoStore({
@@ -92,11 +99,13 @@ describe('ProfileTypeOptions component', () => {
},
challenge: mockChallengeState,
})
- const wrapper = mount(
+ const { container } = render(
<Provider store={store}>
<ProfileTypeOptions />
</Provider>
)
- expect(wrapper.find('.insulation').exists()).toBeTruthy()
+ expect(
+ container.getElementsByClassName('insulation')[0]
+ ).toBeInTheDocument()
})
})
diff --git a/src/components/Options/ProfileTypeOptions/ProfileTypeOptions.tsx b/src/components/Options/ProfileTypeOptions/ProfileTypeOptions.tsx
index 4610845f0..d106bf4d1 100644
--- a/src/components/Options/ProfileTypeOptions/ProfileTypeOptions.tsx
+++ b/src/components/Options/ProfileTypeOptions/ProfileTypeOptions.tsx
@@ -48,6 +48,14 @@ const ProfileTypeOptions = () => {
<div className="head text-16-normal-uppercase">
{t('profile_type.title_profile')}
</div>
+ {!profile.isProfileTypeCompleted && (
+ <StyledCard onClick={goToForm} className="profile-link">
+ <StyledIcon className="profile-icon" icon={profileIcon} size={42} />
+ <span className="link-label text-16-normal">
+ {t('profile_type.read_profile')}
+ </span>
+ </StyledCard>
+ )}
{profile.isProfileTypeCompleted && (
<Accordion
expanded={active}
@@ -225,14 +233,6 @@ const ProfileTypeOptions = () => {
</AccordionDetails>
</Accordion>
)}
- {!profile.isProfileTypeCompleted && (
- <StyledCard onClick={goToForm} className="profile-link">
- <StyledIcon className="profile-icon" icon={profileIcon} size={42} />
- <span className="link-label text-16-normal">
- {t('profile_type.read_profile')}
- </span>
- </StyledCard>
- )}
</div>
</div>
)
diff --git a/src/components/Options/ReportOptions/ReportOptions.spec.tsx b/src/components/Options/ReportOptions/ReportOptions.spec.tsx
index 8794bd7e8..711a1ce72 100644
--- a/src/components/Options/ReportOptions/ReportOptions.spec.tsx
+++ b/src/components/Options/ReportOptions/ReportOptions.spec.tsx
@@ -1,14 +1,14 @@
-import { Button } from '@material-ui/core'
-import StyledSwitch from 'components/CommonKit/Switch/StyledSwitch'
+import { render, screen } from '@testing-library/react'
+import { userEvent } from '@testing-library/user-event'
import ReportOptions from 'components/Options/ReportOptions/ReportOptions'
-import { FluidState, FluidType } from 'enums'
-import { mount } from 'enzyme'
import React from 'react'
import { Provider } from 'react-redux'
import * as profileActions from 'store/profile/profile.slice'
+import { fluidStatusConnectedData } from 'tests/__mocks__/fluidStatusData.mock'
import {
createMockEcolyoStore,
- mockInitialEcolyoState,
+ mockGlobalState,
+ mockProfileState,
} from 'tests/__mocks__/store'
const mockUpdateProfile = jest.fn()
@@ -27,67 +27,76 @@ describe('ReportOptions component', () => {
})
it('should be rendered with sendAnalysisNotification to true', () => {
- const wrapper = mount(
+ render(
<Provider store={store}>
<ReportOptions />
</Provider>
)
- expect(wrapper.find(Button).text()).toBe('profile.report.deactivate')
+ expect(screen.getByText('profile.report.deactivate')).toBeInTheDocument()
})
- it('should update the profile with sendAnalysisNotification to false', () => {
- const wrapper = mount(
+ it('should update the profile with sendAnalysisNotification to false', async () => {
+ render(
<Provider store={store}>
<ReportOptions />
</Provider>
)
- wrapper.find(Button).first().simulate('click')
+ await userEvent.click(screen.getAllByRole('button')[0])
expect(updateProfileSpy).toHaveBeenCalledTimes(1)
expect(updateProfileSpy).toHaveBeenCalledWith({
sendAnalysisNotification: false,
})
})
- it('should be rendered with sendAnalysisNotification false and toggle it to true', () => {
- mockInitialEcolyoState.profile.sendAnalysisNotification = false
-
- const wrapper = mount(
+ it('should be rendered with sendAnalysisNotification false and toggle it to true', async () => {
+ const store = createMockEcolyoStore({
+ global: mockGlobalState,
+ profile: { ...mockProfileState, sendAnalysisNotification: false },
+ })
+ render(
<Provider store={store}>
<ReportOptions />
</Provider>
)
- wrapper.find(Button).first().simulate('click')
+ await userEvent.click(screen.getAllByRole('button')[0])
expect(updateProfileSpy).toHaveBeenCalledTimes(1)
expect(updateProfileSpy).toHaveBeenCalledWith({
sendAnalysisNotification: true,
})
})
- it('should be rendered with sendConsumptionAlert to false', () => {
- mockInitialEcolyoState.profile.sendAnalysisNotification = false
- mockInitialEcolyoState.global.fluidStatus[FluidType.WATER].status =
- FluidState.DONE
- const wrapper = mount(
- <Provider store={store}>
- <ReportOptions />
- </Provider>
- )
- expect(wrapper.find(StyledSwitch)).toHaveLength(1)
- expect(wrapper.find(StyledSwitch).first().props().checked).toBeFalsy()
- })
+ describe('should test water alert', () => {
+ const storeWaterDone = createMockEcolyoStore({
+ global: { ...mockGlobalState, fluidStatus: fluidStatusConnectedData },
+ profile: { sendAnalysisNotification: false },
+ })
+ it('should be rendered with sendConsumptionAlert to false and enable it', async () => {
+ render(
+ <Provider store={storeWaterDone}>
+ <ReportOptions />
+ </Provider>
+ )
+ expect(screen.getByRole('checkbox')).not.toBeChecked()
+ await userEvent.click(screen.getByRole('checkbox'))
+ expect(updateProfileSpy).toHaveBeenCalledTimes(1)
+ expect(updateProfileSpy).toHaveBeenCalledWith({
+ sendConsumptionAlert: true,
+ })
+ })
- it('should update the profile with sendConsumptionAlert to true', () => {
- const wrapper = mount(
- <Provider store={store}>
- <ReportOptions />
- </Provider>
- )
- wrapper
- .find('input')
- .first()
- .simulate('change', { target: { checked: 'true' } })
- expect(updateProfileSpy).toHaveBeenCalledTimes(1)
- expect(updateProfileSpy).toHaveBeenCalledWith({
- sendConsumptionAlert: true,
+ it('should render waterLimit to 100', async () => {
+ const storeWaterAlert = createMockEcolyoStore({
+ global: { ...mockGlobalState, fluidStatus: fluidStatusConnectedData },
+ profile: {
+ sendConsumptionAlert: true,
+ waterDailyConsumptionLimit: 100,
+ },
+ })
+ render(
+ <Provider store={storeWaterAlert}>
+ <ReportOptions />
+ </Provider>
+ )
+ expect(screen.getByRole('spinbutton')).toHaveValue(100)
})
})
})
diff --git a/src/components/Options/Unsubscribe/UnSubscribeView.spec.tsx b/src/components/Options/Unsubscribe/UnSubscribeView.spec.tsx
index 55ca9b331..790c171bb 100644
--- a/src/components/Options/Unsubscribe/UnSubscribeView.spec.tsx
+++ b/src/components/Options/Unsubscribe/UnSubscribeView.spec.tsx
@@ -1,6 +1,5 @@
-import { Button } from '@material-ui/core'
-import { render } from '@testing-library/react'
-import { mount } from 'enzyme'
+import { render, screen } from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
import React from 'react'
import { Provider } from 'react-redux'
import * as profileActions from 'store/profile/profile.slice'
@@ -39,13 +38,13 @@ describe('UnSubscribe component', () => {
expect(container).toMatchSnapshot()
})
- it('should click on button and deactivate report', () => {
- const wrapper = mount(
+ it('should click on button and deactivate report', async () => {
+ render(
<Provider store={store}>
<UnSubscribeView />
</Provider>
)
- wrapper.find(Button).simulate('click')
+ await userEvent.click(screen.getByRole('button'))
expect(updateProfileSpy).toHaveBeenCalledWith({
sendAnalysisNotification: false,
})
--
GitLab