From b7fa73a0698e8dba6db200008e28d4738c276ca2 Mon Sep 17 00:00:00 2001
From: Bastien DUMONT <bdumont@grandlyon.com>
Date: Mon, 20 Nov 2023 16:11:29 +0000
Subject: [PATCH] test(rtl): ecogesture form
---
.../EcogestureFormEquipment.spec.tsx | 17 +++---
.../EcogestureFormSingleChoice.spec.tsx | 38 ++++++------
.../EcogestureFormView.spec.tsx | 59 +++++++++----------
.../EcogestureLaunchFormModal.spec.tsx | 9 ++-
.../EquipmentIcon/EquipmentIcon.spec.tsx | 8 +--
5 files changed, 62 insertions(+), 69 deletions(-)
diff --git a/src/components/EcogestureForm/EcogestureFormEquipment/EcogestureFormEquipment.spec.tsx b/src/components/EcogestureForm/EcogestureFormEquipment/EcogestureFormEquipment.spec.tsx
index 3d073c2f2..70789a031 100644
--- a/src/components/EcogestureForm/EcogestureFormEquipment/EcogestureFormEquipment.spec.tsx
+++ b/src/components/EcogestureForm/EcogestureFormEquipment/EcogestureFormEquipment.spec.tsx
@@ -1,12 +1,9 @@
-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()
})
})
diff --git a/src/components/EcogestureForm/EcogestureFormSingleChoice/EcogestureFormSingleChoice.spec.tsx b/src/components/EcogestureForm/EcogestureFormSingleChoice/EcogestureFormSingleChoice.spec.tsx
index 618a3ee2b..57f1f6692 100644
--- a/src/components/EcogestureForm/EcogestureFormSingleChoice/EcogestureFormSingleChoice.spec.tsx
+++ b/src/components/EcogestureForm/EcogestureFormSingleChoice/EcogestureFormSingleChoice.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 {
@@ -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()
})
})
diff --git a/src/components/EcogestureForm/EcogestureFormView.spec.tsx b/src/components/EcogestureForm/EcogestureFormView.spec.tsx
index dd3ed4485..a654c4bfe 100644
--- a/src/components/EcogestureForm/EcogestureFormView.spec.tsx
+++ b/src/components/EcogestureForm/EcogestureFormView.spec.tsx
@@ -1,22 +1,21 @@
-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)
})
})
diff --git a/src/components/EcogestureForm/EcogestureLaunchFormModal/EcogestureLaunchFormModal.spec.tsx b/src/components/EcogestureForm/EcogestureLaunchFormModal/EcogestureLaunchFormModal.spec.tsx
index c52279528..be8c6d25e 100644
--- a/src/components/EcogestureForm/EcogestureLaunchFormModal/EcogestureLaunchFormModal.spec.tsx
+++ b/src/components/EcogestureForm/EcogestureLaunchFormModal/EcogestureLaunchFormModal.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 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)
})
})
diff --git a/src/components/EcogestureForm/EquipmentIcon/EquipmentIcon.spec.tsx b/src/components/EcogestureForm/EquipmentIcon/EquipmentIcon.spec.tsx
index f4eae1aac..424c8de45 100644
--- a/src/components/EcogestureForm/EquipmentIcon/EquipmentIcon.spec.tsx
+++ b/src/components/EcogestureForm/EquipmentIcon/EquipmentIcon.spec.tsx
@@ -1,8 +1,6 @@
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()
})
})
--
GitLab