test(rtl): konnector

src/components/Konnector/ConnectionNotFound/ConnectionNotFound.spec.tsx

-import Button from '@material-ui/core/Button'
-import { mount, shallow } from 'enzyme'
+import { render, screen } from '@testing-library/react'
+import { userEvent } from '@testing-library/user-event'
+import { shallow } from 'enzyme'
 import React from 'react'
 import ConnectionNotFound from './ConnectionNotFound'
 
@@ -13,12 +14,10 @@ describe('ConnectionNotFound component test', () => {
     expect(result).toMatchSnapshot()
   })
 
-  it('should open konnector url when button is clicked', () => {
+  it('should open konnector url when button is clicked', async () => {
     global.open = jest.fn()
-
-    const wrapper = mount(<ConnectionNotFound konnectorSlug={konnectorSlug} />)
-    const submitStyledButton = wrapper.find(Button)
-    submitStyledButton.simulate('click')
+    render(<ConnectionNotFound konnectorSlug={konnectorSlug} />)
+    await userEvent.click(screen.getByRole('button'))
 
     expect(global.open).toHaveBeenCalledWith(
       'http://localhost/#/discover/enedissgegrandlyon',

src/components/Konnector/KonnectorModal.spec.tsx

-import { Button } from '@material-ui/core'
+import { render, screen } from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
 import { FluidType, KonnectorError } from 'enums'
 import { mount } from 'enzyme'
 import toJson from 'enzyme-to-json'
 import React from 'react'
 import { Provider } from 'react-redux'
 import { createMockEcolyoStore } from 'tests/__mocks__/store'
-import { waitForComponentToPaint } from 'tests/__mocks__/testUtils'
 import KonnectorModal from './KonnectorModal'
 
 const mockHandleCloseClick = jest.fn()
@@ -34,7 +34,7 @@ describe('KonnectorModal component', () => {
     expect(toJson(wrapper)).toMatchSnapshot()
   })
   it('should be with updating text', () => {
-    const wrapper = mount(
+    const { baseElement } = render(
       <Provider store={store}>
         <KonnectorModal
           open={true}
@@ -49,10 +49,12 @@ describe('KonnectorModal component', () => {
         />
       </Provider>
     )
-    expect(wrapper.find('.kmodal-waiting-text').exists()).toBeTruthy()
+    expect(
+      baseElement.getElementsByClassName('kmodal-waiting-text')[0]
+    ).toBeTruthy()
   })
   it('should be correctly closed', async () => {
-    const wrapper = mount(
+    render(
       <Provider store={store}>
         <KonnectorModal
           open={true}
@@ -67,11 +69,11 @@ describe('KonnectorModal component', () => {
         />
       </Provider>
     )
-    wrapper.find(Button).simulate('click')
+    await userEvent.click(screen.getByRole('button'))
     expect(mockHandleCloseClick).toHaveBeenCalled()
   })
   it('should render login error', async () => {
-    const wrapper = mount(
+    const { baseElement } = render(
       <Provider store={store}>
         <KonnectorModal
           open={true}
@@ -86,10 +88,12 @@ describe('KonnectorModal component', () => {
         />
       </Provider>
     )
-    expect(wrapper.find('.kce-picto-txt').exists()).toBeTruthy()
+    expect(
+      baseElement.getElementsByClassName('kce-picto-txt')[0]
+    ).toBeInTheDocument()
   })
   it('should render unknown error', async () => {
-    const wrapper = mount(
+    const { baseElement } = render(
       <Provider store={store}>
         <KonnectorModal
           open={true}
@@ -104,10 +108,12 @@ describe('KonnectorModal component', () => {
         />
       </Provider>
     )
-    expect(wrapper.find('.err-data-2').exists()).toBeTruthy()
+    expect(
+      baseElement.getElementsByClassName('err-data-2')[0]
+    ).toBeInTheDocument()
   })
   it('should render update error', async () => {
-    const wrapper = mount(
+    const { baseElement } = render(
       <Provider store={store}>
         <KonnectorModal
           open={true}
@@ -122,7 +128,8 @@ describe('KonnectorModal component', () => {
         />
       </Provider>
     )
-    await waitForComponentToPaint(wrapper)
-    expect(wrapper.find('.waiting-text').exists()).toBeTruthy()
+    expect(
+      baseElement.getElementsByClassName('waiting-text')[0]
+    ).toBeInTheDocument()
   })
 })

src/components/Konnector/KonnectorModal.tsx

@@ -266,7 +266,6 @@ const KonnectorModal = ({
                     error !== KonnectorError.CHALLENGE_ASKED && (
                       // DEFAULT CASE
                       <div className="konnector-config">
-                        {console.log('errortype', error)}
                         <Icon icon={errorIcon} size={48} />
                         <div className="kce-picto-txt text-20-bold">
                           {t('konnector_modal.error_txt')}

src/components/Konnector/KonnectorModalFooter.spec.tsx

-import { Button } from '@material-ui/core'
+import { render, screen } from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
 import { ERROR_EVENT } from 'cozy-harvest-lib/dist/models/flowEvents'
 import { KonnectorError } from 'enums'
 import { mount } from 'enzyme'
@@ -7,7 +8,6 @@ import React from 'react'
 import { Provider } from 'react-redux'
 import { accountsData } from 'tests/__mocks__/accountsData.mock'
 import { createMockEcolyoStore } from 'tests/__mocks__/store'
-import { waitForComponentToPaint } from 'tests/__mocks__/testUtils'
 import KonnectorModalFooter from './KonnectorModalFooter'
 
 const mockedNavigate = jest.fn()
@@ -40,7 +40,7 @@ describe('KonnectorModalFooter component', () => {
   })
 
   it('should render "understood" for enedis sge when postal code not supported (USER_ACTION_NEEDED)', () => {
-    const wrapper = mount(
+    render(
       <Provider store={store}>
         <KonnectorModalFooter
           state={ERROR_EVENT}
@@ -52,13 +52,13 @@ describe('KonnectorModalFooter component', () => {
         />
       </Provider>
     )
-    expect(wrapper.find(Button).text()).toBe(
-      'konnector_modal.button_understood'
-    )
+    expect(
+      screen.getByText('konnector_modal.button_understood')
+    ).toBeInTheDocument()
   })
 
   it('should render "try again" for enedis sge when address / name / pdl are not matching (LOGIN_FAILED)', () => {
-    const wrapper = mount(
+    render(
       <Provider store={store}>
         <KonnectorModalFooter
           state={ERROR_EVENT}
@@ -70,11 +70,13 @@ describe('KonnectorModalFooter component', () => {
         />
       </Provider>
     )
-    expect(wrapper.find(Button).text()).toBe('konnector_modal.button_try_again')
+    expect(
+      screen.getByText('konnector_modal.button_try_again')
+    ).toBeInTheDocument()
   })
 
   it('should render "later" and "Verify infos" for enedis sge encountering an error on contract (TERMS_VERSION_MISMATCH)', () => {
-    const wrapper = mount(
+    render(
       <Provider store={store}>
         <KonnectorModalFooter
           state={ERROR_EVENT}
@@ -86,12 +88,12 @@ describe('KonnectorModalFooter component', () => {
         />
       </Provider>
     )
-    expect(wrapper.find(Button).at(0).text()).toBe('Plus tard')
-    expect(wrapper.find(Button).at(1).text()).toBe('Vérifier les infos')
+    expect(screen.getByText('Plus tard')).toBeInTheDocument()
+    expect(screen.getByText('Vérifier les infos')).toBeInTheDocument()
   })
 
-  it('should close the modal', () => {
-    const wrapper = mount(
+  it('should close the modal', async () => {
+    render(
       <Provider store={store}>
         <KonnectorModalFooter
           state={ERROR_EVENT}
@@ -103,11 +105,11 @@ describe('KonnectorModalFooter component', () => {
         />
       </Provider>
     )
-    wrapper.find(Button).first().simulate('click')
+    await userEvent.click(screen.getByRole('button'))
     expect(mockClose).toHaveBeenCalled()
   })
   it('should go back to login', async () => {
-    const wrapper = mount(
+    render(
       <Provider store={store}>
         <KonnectorModalFooter
           state={ERROR_EVENT}
@@ -119,13 +121,12 @@ describe('KonnectorModalFooter component', () => {
         />
       </Provider>
     )
-    wrapper.find(Button).at(1).simulate('click')
-    await waitForComponentToPaint(wrapper)
+    await userEvent.click(screen.getAllByRole('button')[1])
     expect(mockDelete).toHaveBeenCalled()
     expect(mockedNavigate).toHaveBeenCalledTimes(1)
   })
   it('should reset sge account and go back to login', async () => {
-    const wrapper = mount(
+    render(
       <Provider store={store}>
         <KonnectorModalFooter
           state={ERROR_EVENT}
@@ -137,13 +138,12 @@ describe('KonnectorModalFooter component', () => {
         />
       </Provider>
     )
-    wrapper.find(Button).at(1).simulate('click')
-    await waitForComponentToPaint(wrapper)
+    await userEvent.click(screen.getAllByRole('button')[1])
     expect(mockDelete).toHaveBeenCalled()
     expect(mockedNavigate).toHaveBeenCalledTimes(1)
   })
-  it('should not reset account if no account', () => {
-    const wrapper = mount(
+  it('should not reset account if no account', async () => {
+    render(
       <Provider store={store}>
         <KonnectorModalFooter
           state={ERROR_EVENT}
@@ -155,7 +155,7 @@ describe('KonnectorModalFooter component', () => {
         />
       </Provider>
     )
-    wrapper.find(Button).at(1).simulate('click')
+    await userEvent.click(screen.getAllByRole('button')[1])
     expect(mockedNavigate).toHaveBeenCalledTimes(1)
     expect(mockDelete).toHaveBeenCalledTimes(0)
   })

src/components/Konnector/KonnectorViewerList.spec.tsx

+import { render, screen } from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
 import { mount } from 'enzyme'
 import toJson from 'enzyme-to-json'
 import React from 'react'
@@ -25,12 +27,12 @@ describe('KonnectorViewerList component', () => {
     expect(toJson(wrapper)).toMatchSnapshot()
   })
   it('should click on card and nav to fluid', async () => {
-    const wrapper = mount(
+    render(
       <Provider store={store}>
         <KonnectorViewerList />
       </Provider>
     )
-    wrapper.find('.connection-card').first().simulate('click')
+    await userEvent.click(screen.getAllByRole('button')[0])
     expect(mockedNavigate).toHaveBeenCalled()
   })
 })