Merge branch 'rtl-ec-form' into 'dev'

test(rtl): ecogesture form

See merge request !1045

src/components/EcogestureForm/EcogestureFormEquipment/EcogestureFormEquipment.spec.tsx

-import { Button } from '@material-ui/core'
 import { render, screen, waitFor } from '@testing-library/react'
 import { EquipmentType } from 'enums'
-import { mount } from 'enzyme'
 import React from 'react'
 import { Provider } from 'react-redux'
 import { mockProfileEcogesture } from 'tests/__mocks__/profileEcogesture.mock'
 import { createMockEcolyoStore } from 'tests/__mocks__/store'
-import { waitForComponentToPaint } from 'tests/__mocks__/testUtils'
 import EcogestureFormEquipment from './EcogestureFormEquipment'
 
 const mockSetPreviousStep = jest.fn()
@@ -50,7 +47,7 @@ describe('EcogestureFormEquipment component', () => {
   })
 
   it('should click on disabled back button', async () => {
-    const wrapper = mount(
+    const { container } = render(
       <Provider store={store}>
         <EcogestureFormEquipment
           currentProfileEcogesture={mockProfileEcogesture}
@@ -60,10 +57,14 @@ describe('EcogestureFormEquipment component', () => {
         />
       </Provider>
     )
-    await waitForComponentToPaint(wrapper)
-    wrapper.find(Button).first().simulate('click')
-    await waitForComponentToPaint(wrapper)
 
-    expect(wrapper.find('.icons-container').exists()).toBeTruthy()
+    expect(
+      container.getElementsByClassName('icons-container').length
+    ).toBeTruthy()
+    expect(
+      screen.getByRole('button', {
+        name: 'profile_type.accessibility.button_next',
+      })
+    ).toBeDisabled()
   })
 })

src/components/EcogestureForm/EcogestureFormSingleChoice/EcogestureFormSingleChoice.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 {
@@ -8,7 +7,6 @@ import {
   mockProfileEcogesture,
 } from 'tests/__mocks__/profileEcogesture.mock'
 import { createMockEcolyoStore } from 'tests/__mocks__/store'
-import { waitForComponentToPaint } from 'tests/__mocks__/testUtils'
 import EcogestureFormSingleChoice from './EcogestureFormSingleChoice'
 
 jest.mock(
@@ -36,8 +34,8 @@ describe('EcogestureFormSingleChoice component', () => {
     )
     expect(container).toMatchSnapshot()
   })
-  it('should click on disabled button', async () => {
-    const wrapper = mount(
+  it('should render disabled prev button', async () => {
+    render(
       <Provider store={store}>
         <EcogestureFormSingleChoice
           step={0}
@@ -49,13 +47,12 @@ describe('EcogestureFormSingleChoice component', () => {
         />
       </Provider>
     )
-    await waitForComponentToPaint(wrapper)
-    wrapper.find(Button).first().simulate('click')
-    expect(mockHandlePreviousStep).toHaveBeenCalledTimes(0)
+    const [prev] = screen.getAllByRole('button')
+    expect(prev).toBeDisabled()
   })
 
   it('should pick a choice and go next', async () => {
-    const wrapper = mount(
+    render(
       <Provider store={store}>
         <EcogestureFormSingleChoice
           step={0}
@@ -67,15 +64,13 @@ describe('EcogestureFormSingleChoice component', () => {
         />
       </Provider>
     )
-    await waitForComponentToPaint(wrapper)
-    wrapper.find('input').first().simulate('change')
-    await waitForComponentToPaint(wrapper)
-    wrapper.find(Button).at(1).simulate('click')
-
+    await userEvent.click(screen.getAllByRole('radio')[0])
+    const [, next] = screen.getAllByRole('button')
+    await userEvent.click(next)
     expect(mockHandleNextStep).toHaveBeenCalledTimes(1)
   })
   it('should go back', async () => {
-    const wrapper = mount(
+    render(
       <Provider store={store}>
         <EcogestureFormSingleChoice
           step={1}
@@ -87,12 +82,12 @@ describe('EcogestureFormSingleChoice component', () => {
         />
       </Provider>
     )
-    await waitForComponentToPaint(wrapper)
-    wrapper.find(Button).first().simulate('click')
+    const [prev] = screen.getAllByRole('button')
+    await userEvent.click(prev)
     expect(mockHandlePreviousStep).toHaveBeenCalledTimes(1)
   })
   it('should keep previous answer', async () => {
-    const wrapper = mount(
+    render(
       <Provider store={store}>
         <EcogestureFormSingleChoice
           step={0}
@@ -104,7 +99,8 @@ describe('EcogestureFormSingleChoice component', () => {
         />
       </Provider>
     )
-    await waitForComponentToPaint(wrapper)
-    expect(wrapper.find('input').first().hasClass('checked-input')).toBe(true)
+
+    const radio = screen.getByRole('radio', { checked: true })
+    expect(radio).toBeInTheDocument()
   })
 })

src/components/EcogestureForm/EcogestureFormView.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 storeHooks from 'store/hooks'
 import { mockProfileEcogesture } from 'tests/__mocks__/profileEcogesture.mock'
 import { createMockEcolyoStore } from 'tests/__mocks__/store'
-import { waitForComponentToPaint } from 'tests/__mocks__/testUtils'
 import EcogestureFormView from './EcogestureFormView'
 
 jest.mock('components/Header/CozyBar', () => 'mock-cozybar')
 jest.mock('components/Header/Header', () => 'mock-header')
+jest.mock('components/Content/Content', () => 'mock-content')
 jest.mock(
   'components/EcogestureForm/EcogestureLaunchFormModal/EcogestureLaunchFormModal',
   () => 'mock-ecogesturelaunchmodal'
 )
+
 const mockAppDispatch = jest.spyOn(storeHooks, 'useAppDispatch')
-jest.mock('components/Content/Content', () => 'mock-content')
 const mockedNavigate = jest.fn()
 jest.mock('react-router-dom', () => ({
   ...jest.requireActual('react-router-dom'),
@@ -41,55 +40,56 @@ describe('EcogestureFormView component', () => {
     expect(container).toMatchSnapshot()
   })
   it('should render singleChoice', async () => {
-    const wrapper = mount(
+    const { container } = render(
       <Provider store={store}>
         <EcogestureFormView />
       </Provider>
     )
-    await waitForComponentToPaint(wrapper)
-    expect(wrapper.find('.ecogesture-form-single').exists()).toBeTruthy()
+    expect(
+      container.getElementsByClassName('ecogesture-form-single').length
+    ).toBeTruthy()
   })
   it('should render profiletype form step because profiletype is completed', async () => {
     const store = createMockEcolyoStore({
       profile: { isProfileTypeCompleted: true },
       profileEcogesture: mockProfileEcogesture,
     })
-    const wrapper = mount(
+    const { container } = render(
       <Provider store={store}>
         <EcogestureFormView />
       </Provider>
     )
-    await waitForComponentToPaint(wrapper)
-    expect(wrapper.find('.profile-type-container').exists()).toBeTruthy()
+    expect(
+      container.getElementsByClassName('profile-type-container').length
+    ).toBeTruthy()
   })
   it('should go to next step', async () => {
-    const wrapper = mount(
+    const { container } = render(
       <Provider store={store}>
         <EcogestureFormView />
       </Provider>
     )
-    await waitForComponentToPaint(wrapper)
-    wrapper.find('input').first().simulate('change')
-    await waitForComponentToPaint(wrapper)
-    wrapper.find(Button).at(1).simulate('click')
-    await waitForComponentToPaint(wrapper)
-    expect(wrapper.find('.ecogesture-form-single').exists()).toBeTruthy()
+    // await waitFor(() => null, { container })
+    await userEvent.click(screen.getAllByRole('radio')[0])
+    await userEvent.click(screen.getAllByRole('button')[1])
+    expect(
+      container.getElementsByClassName('ecogesture-form-single').length
+    ).toBeTruthy()
   })
   it('should go to previous step', async () => {
-    const wrapper = mount(
+    const { container } = render(
       <Provider store={store}>
         <EcogestureFormView />
       </Provider>
     )
-    // go first to next step
-    await waitForComponentToPaint(wrapper)
-    wrapper.find('input').first().simulate('change')
-    await waitForComponentToPaint(wrapper)
-    wrapper.find(Button).at(1).simulate('click')
-    await waitForComponentToPaint(wrapper)
-    // then go back
-    wrapper.find(Button).first().simulate('click')
-    expect(wrapper.find('.ecogesture-form-single').exists()).toBeTruthy()
+
+    const [, next] = screen.getAllByRole('button')
+    await userEvent.click(screen.getAllByRole('radio')[0])
+    await userEvent.click(next)
+
+    expect(
+      container.getElementsByClassName('ecogesture-form-single').length
+    ).toBeTruthy()
   })
 
   it('should handle form end', async () => {
@@ -98,12 +98,11 @@ describe('EcogestureFormView component', () => {
       .spyOn(React, 'useState')
       .mockImplementationOnce(() => [0, () => null])
       .mockImplementationOnce(() => [4, () => null])
-    const wrapper = mount(
+    render(
       <Provider store={store}>
         <EcogestureFormView />
       </Provider>
     )
-    await waitForComponentToPaint(wrapper)
     expect(mockAppDispatch).toHaveBeenCalledTimes(2)
   })
 })

src/components/EcogestureForm/EcogestureLaunchFormModal/EcogestureLaunchFormModal.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 EcogestureLaunchFormModal from './EcogestureLaunchFormModal'
 
@@ -16,13 +15,13 @@ describe('EcogestureLaunchFormModal component', () => {
     expect(baseElement).toMatchSnapshot()
   })
   it('should close modal', async () => {
-    const wrapper = mount(
+    render(
       <EcogestureLaunchFormModal
         open={true}
         handleCloseClick={mockHandleClose}
       />
     )
-    wrapper.find(Button).first().simulate('click')
+    await userEvent.click(screen.getAllByRole('button')[0])
     expect(mockHandleClose).toHaveBeenCalledTimes(1)
   })
 })

src/components/EcogestureForm/EquipmentIcon/EquipmentIcon.spec.tsx

 import { render, waitFor } from '@testing-library/react'
 import { EquipmentType } from 'enums'
-import { mount } from 'enzyme'
 import React from 'react'
-import { waitForComponentToPaint } from 'tests/__mocks__/testUtils'
 import EquipmentIcon from './EquipmentIcon'
 
 describe('EcogestureFormSingleChoice component', () => {
@@ -14,10 +12,10 @@ describe('EcogestureFormSingleChoice component', () => {
     expect(container).toMatchSnapshot()
   })
   it('should render checked icon', async () => {
-    const wrapper = mount(
+    const { container } = render(
       <EquipmentIcon equipment={EquipmentType.BOILER} isChecked={true} />
     )
-    await waitForComponentToPaint(wrapper)
-    expect(wrapper.find('.checked').first().exists()).toBeTruthy()
+    await waitFor(() => null, { container })
+    expect(container.getElementsByClassName('checked').length).toBeTruthy()
   })
 })