Merge branch 'rtl/profile-type' into 'dev'

test(rtl): profile type

See merge request !1055

src/components/ProfileType/ProfileTypeFinished/ProfileTypeFinished.spec.tsx

-import { Button } from '@material-ui/core'
-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 UsageEventService from 'services/usageEvent.service'
@@ -16,40 +16,36 @@ jest.mock('react-router-dom', () => ({
   useNavigate: () => mockedNavigate,
 }))
 
-const mockAddEvent = jest.fn()
 jest.mock('services/usageEvent.service')
-UsageEventService.addEvent = mockAddEvent
+UsageEventService.addEvent = jest.fn()
 
-const mockGetAllProfileTypes = jest.fn()
-const mockDeleteProfileTypes = jest.fn()
 jest.mock('services/profileTypeEntity.service', () => {
   return jest.fn(() => ({
-    getAllProfileTypes: mockGetAllProfileTypes,
-    deleteProfileTypes: mockDeleteProfileTypes,
+    getAllProfileTypes: jest.fn(),
+    deleteProfileTypes: jest.fn(),
   }))
 })
 
 describe('ProfileTypeFinished component', () => {
   const store = createMockEcolyoStore()
-  beforeEach(() => {
-    jest.clearAllMocks()
-  })
 
   it('should be rendered correctly', async () => {
-    const wrapper = mount(
+    const { container } = render(
       <Provider store={store}>
         <ProfileTypeFinished profileType={mockProfileType} />
       </Provider>
     )
-    expect(wrapper.find('profile-type-finished-card')).toBeTruthy()
+    expect(
+      container.getElementsByClassName('profile-type-finished-card')[0]
+    ).toBeInTheDocument()
   })
-  it('should go to ecogesture selection', () => {
-    const wrapper = mount(
+  it('should go to ecogesture selection', async () => {
+    render(
       <Provider store={store}>
         <ProfileTypeFinished profileType={mockProfileType} />
       </Provider>
     )
-    wrapper.find(Button).first().simulate('click')
+    await userEvent.click(screen.getAllByRole('button')[0])
     expect(mockedNavigate).toHaveBeenCalledWith('/ecogesture-selection')
   })
 })

src/components/ProfileType/ProfileTypeFormMultiChoice/ProfileTypeFormMultiChoice.spec.tsx

+import { render, screen } from '@testing-library/react'
 import { ProfileTypeStepForm } from 'enums'
-import { mount } from 'enzyme'
 import React from 'react'
 import { Provider } from 'react-redux'
 import {
@@ -9,25 +9,22 @@ import {
 import { createMockEcolyoStore } from 'tests/__mocks__/store'
 import ProfileTypeFormMultiChoice from './ProfileTypeFormMultiChoice'
 
-const mockHandlePrevious = jest.fn()
-const mockHandleNext = jest.fn()
-
 describe('ProfileTypeFormMultiChoice component', () => {
   const store = createMockEcolyoStore()
 
   it('should be rendered correctly', () => {
-    const wrapper = mount(
+    render(
       <Provider store={store}>
         <ProfileTypeFormMultiChoice
           step={ProfileTypeStepForm.COOKING_FLUID}
           viewedStep={ProfileTypeStepForm.AREA}
           currentProfileType={mockProfileType}
-          answerType={mockProfileTypeAnswers[1]}
-          setNextStep={mockHandlePrevious}
-          setPreviousStep={mockHandleNext}
+          answerType={mockProfileTypeAnswers[8]}
+          setNextStep={jest.fn()}
+          setPreviousStep={jest.fn()}
         />
       </Provider>
     )
-    expect(wrapper.find('input')).toBeTruthy()
+    expect(screen.getAllByRole('checkbox').length).toBeTruthy()
   })
 })

src/components/ProfileType/ProfileTypeFormNumber/ProfileTypeFormNumber.spec.tsx

+import { render, screen } from '@testing-library/react'
 import { ProfileTypeStepForm } from 'enums'
-import { mount } from 'enzyme'
 import React from 'react'
 import { Provider } from 'react-redux'
 import {
@@ -9,25 +9,22 @@ import {
 import { createMockEcolyoStore } from 'tests/__mocks__/store'
 import ProfileTypeFormNumber from './ProfileTypeFormNumber'
 
-const mockHandlePrevious = jest.fn()
-const mockHandleNext = jest.fn()
-
 describe('ProfileTypeFormNumber component', () => {
   const store = createMockEcolyoStore()
 
   it('should be rendered correctly', () => {
-    const wrapper = mount(
+    render(
       <Provider store={store}>
         <ProfileTypeFormNumber
           step={ProfileTypeStepForm.COOKING_FLUID}
           viewedStep={ProfileTypeStepForm.AREA}
           currentProfileType={mockProfileType}
           answerType={mockProfileTypeAnswers[1]}
-          setNextStep={mockHandlePrevious}
-          setPreviousStep={mockHandleNext}
+          setNextStep={jest.fn()}
+          setPreviousStep={jest.fn()}
         />
       </Provider>
     )
-    expect(wrapper.find('input')).toBeTruthy()
+    expect(screen.getByRole('spinbutton')).toBeInTheDocument()
   })
 })

src/components/ProfileType/ProfileTypeFormNumberSelection/ProfileTypeFormNumberSelection.spec.tsx

+import { render } from '@testing-library/react'
 import { ProfileTypeStepForm } from 'enums'
-import { mount } from 'enzyme'
 import React from 'react'
 import { Provider } from 'react-redux'
 import {
@@ -9,25 +9,22 @@ import {
 import { createMockEcolyoStore } from 'tests/__mocks__/store'
 import ProfileTypeFormNumberSelection from './ProfileTypeFormNumberSelection'
 
-const mockHandlePrevious = jest.fn()
-const mockHandleNext = jest.fn()
-
 describe('ProfileTypeFormNumberSelection component', () => {
   const store = createMockEcolyoStore()
 
-  it('should be rendered correctly', () => {
-    const wrapper = mount(
+  it('should be rendered correctly', async () => {
+    const { container } = render(
       <Provider store={store}>
         <ProfileTypeFormNumberSelection
           step={ProfileTypeStepForm.COOKING_FLUID}
           viewedStep={ProfileTypeStepForm.AREA}
           currentProfileType={mockProfileType}
           answerType={mockProfileTypeAnswers[3]}
-          setNextStep={mockHandleNext}
-          setPreviousStep={mockHandlePrevious}
+          setNextStep={jest.fn()}
+          setPreviousStep={jest.fn()}
         />
       </Provider>
     )
-    expect(wrapper.find('input')).toBeTruthy()
+    expect(container.getElementsByTagName('input')[0]).toBeInTheDocument()
   })
 })

src/components/ProfileType/ProfileTypeFormSingleChoice/ProfileTypeFormSingleChoice.spec.tsx

+import { render, screen } from '@testing-library/react'
 import { ProfileTypeStepForm } from 'enums'
-import { mount } from 'enzyme'
 import React from 'react'
 import { Provider } from 'react-redux'
 import {
@@ -9,25 +9,22 @@ import {
 import { createMockEcolyoStore } from 'tests/__mocks__/store'
 import ProfileTypeFormSingleChoice from './ProfileTypeFormSingleChoice'
 
-const mockHandlePrevious = jest.fn()
-const mockHandleNext = jest.fn()
-
 describe('ProfileTypeFormSingleChoice component', () => {
   const store = createMockEcolyoStore()
 
   it('should be rendered correctly', () => {
-    const wrapper = mount(
+    render(
       <Provider store={store}>
         <ProfileTypeFormSingleChoice
           step={ProfileTypeStepForm.COOKING_FLUID}
           viewedStep={ProfileTypeStepForm.AREA}
           currentProfileType={mockProfileType}
-          answerType={mockProfileTypeAnswers[1]}
-          setNextStep={mockHandleNext}
-          setPreviousStep={mockHandlePrevious}
+          answerType={mockProfileTypeAnswers[3]}
+          setNextStep={jest.fn()}
+          setPreviousStep={jest.fn()}
         />
       </Provider>
     )
-    expect(wrapper.find('input')).toBeTruthy()
+    expect(screen.getAllByRole('radio').length).toBeTruthy()
   })
 })

src/components/ProfileType/ProfileTypeView.spec.tsx

+import { render } from '@testing-library/react'
 import ProfileTypeView from 'components/ProfileType/ProfileTypeView'
-import { mount } from 'enzyme'
 import React from 'react'
 import { Provider } from 'react-redux'
 import { createMockEcolyoStore } from 'tests/__mocks__/store'
@@ -12,14 +12,20 @@ describe('ProfileTypeView component', () => {
   const store = createMockEcolyoStore()
 
   it('should be rendered correctly', () => {
-    const wrapper = mount(
+    const { container } = render(
       <Provider store={store}>
         <ProfileTypeView />
       </Provider>
     )
-    expect(wrapper.find('mock-cozybar').exists()).toBeTruthy()
-    expect(wrapper.find('mock-header').exists()).toBeTruthy()
-    expect(wrapper.find('mock-content').exists()).toBeTruthy()
-    expect(wrapper.find('.profile-type-container').exists()).toBeTruthy()
+    expect(
+      container.getElementsByTagName('mock-cozybar')[0]
+    ).toBeInTheDocument()
+    expect(container.getElementsByTagName('mock-header')[0]).toBeInTheDocument()
+    expect(
+      container.getElementsByTagName('mock-content')[0]
+    ).toBeInTheDocument()
+    expect(
+      container.getElementsByClassName('profile-type-container')[0]
+    ).toBeInTheDocument()
   })
 })