Merge branch 'rtl/options' into 'dev'

test(rtl): options

See merge request !1053

src/components/Options/ExportData/Modals/exportDoneModal.spec.tsx

-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)
   })
 })

src/components/Options/ExportData/Modals/exportLoadingModal.spec.tsx

-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)
   })
 })

src/components/Options/ExportData/Modals/exportStartModal.spec.tsx

-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)
   })
 })

src/components/Options/ProfileTypeOptions/ProfileTypeOptions.spec.tsx

-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()
   })
 })

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>
   )

src/components/Options/ReportOptions/ReportOptions.spec.tsx

-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)
     })
   })
 })

src/components/Options/Unsubscribe/UnSubscribeView.spec.tsx

-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,
     })