diff --git a/src/components/Duel/DuelOngoing/DuelOngoing.spec.tsx b/src/components/Duel/DuelOngoing/DuelOngoing.spec.tsx
index 2f9eb9c8db8afaa204d5f76f903226a6592ed7e4..caadee189cd8e0b9668787c3b9b32c6a82407cc5 100644
--- a/src/components/Duel/DuelOngoing/DuelOngoing.spec.tsx
+++ b/src/components/Duel/DuelOngoing/DuelOngoing.spec.tsx
@@ -1,13 +1,11 @@
+import { render, screen, waitFor } from '@testing-library/react'
import { UserChallengeState } from 'enums'
-import { mount } from 'enzyme'
import { DateTime } from 'luxon'
import { UserChallenge } from 'models'
import React from 'react'
import { Provider } from 'react-redux'
import { createMockEcolyoStore } from 'tests/__mocks__/store'
-import { waitForComponentToPaint } from 'tests/__mocks__/testUtils'
import { userChallengeData } from 'tests/__mocks__/userChallengeData.mock'
-import DuelResultModal from '../DuelResultModal/DuelResultModal'
import DuelOngoing from './DuelOngoing'
const mockUserChallengeUpdateFlag = jest.fn()
@@ -20,10 +18,6 @@ jest.mock('services/challenge.service', () => {
})
jest.mock('components/Duel/DuelChart/DuelChart', () => 'mock-duelchart')
-jest.mock(
- 'components/Duel/DuelResultModal/DuelResultModal',
- () => 'mock-duelModal'
-)
describe('DuelOngoing component', () => {
const store = createMockEcolyoStore()
@@ -33,19 +27,15 @@ describe('DuelOngoing component', () => {
isWin: false,
isEmpty: false,
})
- const wrapper = mount(
+ const { container } = render(
<Provider store={store}>
<DuelOngoing userChallenge={userChallengeData[0]} />
</Provider>
)
- await waitForComponentToPaint(wrapper)
- expect(wrapper.find('.duel-title').text()).toEqual(
- userChallengeData[1].duel.title
- )
- expect(wrapper.find('.duel-goal').exists()).toBeTruthy()
- expect(wrapper.find('.duel-consumption').exists()).toBeTruthy()
- expect(wrapper.find('.duel-chart').exists()).toBeTruthy()
- expect(wrapper.find('.caption-icon').exists()).toBeTruthy()
+ expect(container).toMatchSnapshot()
+ expect(
+ screen.getByText(userChallengeData[1].duel.title)
+ ).toBeInTheDocument()
})
it('should display the result Modal when duel is done', async () => {
@@ -59,12 +49,12 @@ describe('DuelOngoing component', () => {
isWin: true,
})
mockUserChallengeUpdateFlag.mockResolvedValue(updatedUserChallenge)
- const wrapper = mount(
+ const { container } = render(
<Provider store={store}>
<DuelOngoing userChallenge={updatedUserChallenge} />
</Provider>
)
- await waitForComponentToPaint(wrapper)
- expect(wrapper.find(DuelResultModal).exists()).toBeTruthy()
+ await waitFor(() => null, { container })
+ expect(screen.getByRole('dialog')).toBeInTheDocument()
})
})
diff --git a/src/components/Duel/DuelOngoing/__snapshots__/DuelOngoing.spec.tsx.snap b/src/components/Duel/DuelOngoing/__snapshots__/DuelOngoing.spec.tsx.snap
new file mode 100644
index 0000000000000000000000000000000000000000..f04488e4ae9cba174bae61d3bdba4812ef221d0d
--- /dev/null
+++ b/src/components/Duel/DuelOngoing/__snapshots__/DuelOngoing.spec.tsx.snap
@@ -0,0 +1,104 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`DuelOngoing component should be rendered correctly 1`] = `
+<div>
+ <div
+ class="duel-ongoing-container"
+ >
+ <div
+ class="duel-title text-16-normal"
+ >
+ Title DUEL001
+ </div>
+ <div
+ class="duel-goal text-18-normal"
+ >
+ duel.goal1
+ <span>
+
+ </span>
+ duel.goal2
+ </div>
+ <div
+ class="duel-consumption text-28-normal"
+ >
+ <span
+ class="consumption"
+ >
+ 0,00
+ </span>
+ / 0,00 €
+ </div>
+ <div
+ class="duel-chart fs-root"
+ >
+ <mock-duelchart
+ height="300"
+ userchallenge="[object Object]"
+ width="940"
+ />
+ </div>
+ <div
+ class="duel-chart-caption text-15-normal"
+ >
+ <div
+ class="duel-caption"
+ >
+ <svg
+ aria-hidden="true"
+ class="caption-icon styles__icon___23x3R"
+ height="25"
+ width="25"
+ >
+ <use
+ xlink:href="#test-file-stub"
+ />
+ </svg>
+ <div
+ class="caption-label"
+ >
+ duel.caption_average
+ </div>
+ </div>
+ <div
+ class="duel-caption"
+ >
+ <svg
+ aria-hidden="true"
+ class="caption-icon styles__icon___23x3R"
+ height="25"
+ width="25"
+ >
+ <use
+ xlink:href="#test-file-stub"
+ />
+ </svg>
+ <div
+ class="caption-label"
+ >
+ duel.caption_consumption
+ </div>
+ </div>
+ <div
+ class="duel-caption"
+ >
+ <svg
+ aria-hidden="true"
+ class="caption-icon styles__icon___23x3R"
+ height="25"
+ width="25"
+ >
+ <use
+ xlink:href="#test-file-stub"
+ />
+ </svg>
+ <div
+ class="caption-label"
+ >
+ duel.caption_incoming
+ </div>
+ </div>
+ </div>
+ </div>
+</div>
+`;
diff --git a/src/components/Duel/DuelResultModal/DuelResultModal.spec.tsx b/src/components/Duel/DuelResultModal/DuelResultModal.spec.tsx
index e107a11882ffe40520dafa7e02130f7cf1a23952..199878a12050aecaccad580936213290144de33a 100644
--- a/src/components/Duel/DuelResultModal/DuelResultModal.spec.tsx
+++ b/src/components/Duel/DuelResultModal/DuelResultModal.spec.tsx
@@ -1,7 +1,5 @@
-import { render } from '@testing-library/react'
-import { mount } from 'enzyme'
+import { render, screen } from '@testing-library/react'
import React from 'react'
-import { waitForComponentToPaint } from 'tests/__mocks__/testUtils'
import { userChallengeData } from 'tests/__mocks__/userChallengeData.mock'
import DuelResultModal from './DuelResultModal'
@@ -18,7 +16,7 @@ describe('DuelResultModal component', () => {
expect(baseElement).toMatchSnapshot()
})
it('should render a loss modal', async () => {
- const wrapper = mount(
+ render(
<DuelResultModal
open={true}
handleCloseClick={jest.fn()}
@@ -26,7 +24,6 @@ describe('DuelResultModal component', () => {
win={false}
/>
)
- await waitForComponentToPaint(wrapper)
- expect(wrapper.find('.title').text()).toBe('duel_result_modal.lost.title')
+ expect(screen.getByText('duel_result_modal.lost.title')).toBeInTheDocument()
})
})
diff --git a/src/components/Duel/DuelUnlocked/DuelUnlocked.spec.tsx b/src/components/Duel/DuelUnlocked/DuelUnlocked.spec.tsx
index 822eff26b405e9e7c99bc755697de2a10d4f7583..d1835e74fdd1ee74d2612e44db56a6e8bfa932e7 100644
--- a/src/components/Duel/DuelUnlocked/DuelUnlocked.spec.tsx
+++ b/src/components/Duel/DuelUnlocked/DuelUnlocked.spec.tsx
@@ -1,7 +1,6 @@
-import Button from '@material-ui/core/Button'
-import StyledIcon from 'components/CommonKit/Icon/StyledIcon'
+import { render, screen } from '@testing-library/react'
+import { userEvent } from '@testing-library/user-event'
import { FluidType, UserChallengeUpdateFlag } from 'enums'
-import { mount } from 'enzyme'
import React from 'react'
import { Provider } from 'react-redux'
import { createMockEcolyoStore, mockGlobalState } from 'tests/__mocks__/store'
@@ -24,40 +23,39 @@ describe('DuelUnlocked component', () => {
const store = createMockEcolyoStore()
it('should be rendered correctly', () => {
- const average: string = formatNumberValues(
+ const average = formatNumberValues(
userChallengeData[1].duel.threshold
).toString()
- const description: string =
+ const description =
'"' +
userChallengeData[1].duel.description.replace('#CONSUMPTION', average) +
'"'
- const wrapper = mount(
+ const { container } = render(
<Provider store={store}>
<DuelUnlocked userChallenge={userChallengeData[0]} />
</Provider>
)
- expect(wrapper.find('.duel-title').text()).toEqual(
- userChallengeData[1].duel.title
- )
- expect(wrapper.find(StyledIcon).exists()).toBeTruthy()
- expect(wrapper.find('.duel-description').text()).toEqual(description)
- expect(wrapper.find('.duel-average-info').exists()).toBeTruthy()
- expect(wrapper.find('.button-start').exists()).toBeTruthy()
+ expect(container).toMatchSnapshot()
+ expect(
+ screen.getByText(userChallengeData[1].duel.title)
+ ).toBeInTheDocument()
+ expect(screen.getByText(description)).toBeInTheDocument()
+ expect(screen.getByRole('button')).toBeInTheDocument()
})
- it('should update userChallenge when launching duel with configured fluid', () => {
+ it('should update userChallenge when launching duel with configured fluid', async () => {
const store = createMockEcolyoStore({
global: {
...mockGlobalState,
fluidTypes: [FluidType.ELECTRICITY],
},
})
- const wrapper = mount(
+ render(
<Provider store={store}>
<DuelUnlocked userChallenge={userChallengeData[0]} />
</Provider>
)
- wrapper.find('.button-start').find(Button).simulate('click')
+ await userEvent.click(screen.getByRole('button'))
expect(mockUserChallengeUpdateFlag).toHaveBeenCalledWith(
userChallengeData[0],
UserChallengeUpdateFlag.DUEL_START
diff --git a/src/components/Duel/DuelUnlocked/__snapshots__/DuelUnlocked.spec.tsx.snap b/src/components/Duel/DuelUnlocked/__snapshots__/DuelUnlocked.spec.tsx.snap
new file mode 100644
index 0000000000000000000000000000000000000000..3713f41953be338f9a5890b7717f731e2670516e
--- /dev/null
+++ b/src/components/Duel/DuelUnlocked/__snapshots__/DuelUnlocked.spec.tsx.snap
@@ -0,0 +1,54 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`DuelUnlocked component should be rendered correctly 1`] = `
+<div>
+ <div
+ class="duel-unlocked-container"
+ >
+ <svg
+ aria-hidden="true"
+ class="duel-icon styles__icon___23x3R"
+ height="219"
+ width="219"
+ >
+ <use
+ xlink:href="#test-file-stub"
+ />
+ </svg>
+ <div
+ class="duel-description text-20-italic"
+ >
+ "Je parie un ours polaire que vous ne pouvez pas consommer moins que 0,00 € en 1 semaine"
+ </div>
+ <div
+ class="duel-title text-16-normal"
+ >
+ Title DUEL001
+ </div>
+ <div
+ class="duel-average-info text-18-normal"
+ >
+ duel.average_info
+ </div>
+ <div
+ class="button-start"
+ >
+ <button
+ aria-label="duel.accessibility.button_start_duel"
+ class="MuiButtonBase-root MuiButton-root MuiButton-text btnSecondary"
+ tabindex="0"
+ type="button"
+ >
+ <span
+ class="MuiButton-label"
+ >
+ duel.button_start
+ </span>
+ <span
+ class="MuiTouchRipple-root"
+ />
+ </button>
+ </div>
+ </div>
+</div>
+`;
diff --git a/src/components/Duel/DuelView.spec.tsx b/src/components/Duel/DuelView.spec.tsx
index 9908eb501c43b047fdac9f60389f55d9c344847e..65d11f79f881276aba6fb8bd843f170cb11f2faa 100644
--- a/src/components/Duel/DuelView.spec.tsx
+++ b/src/components/Duel/DuelView.spec.tsx
@@ -1,14 +1,11 @@
+import { render, waitFor } from '@testing-library/react'
import DuelView from 'components/Duel/DuelView'
import { UserChallengeState, UserDuelState } from 'enums'
-import { mount } from 'enzyme'
import React from 'react'
import { Provider } from 'react-redux'
import { challengeStateData } from 'tests/__mocks__/challengeStateData.mock'
import { createMockEcolyoStore, mockChartState } from 'tests/__mocks__/store'
import { userChallengeData } from 'tests/__mocks__/userChallengeData.mock'
-import DuelError from './DuelError/DuelError'
-import DuelOngoing from './DuelOngoing/DuelOngoing'
-import DuelUnlocked from './DuelUnlocked/DuelUnlocked'
jest.mock('components/Header/CozyBar', () => 'mock-cozybar')
jest.mock('components/Header/Header', () => 'mock-header')
@@ -22,17 +19,19 @@ jest.mock('react-router-dom', () => ({
}))
describe('DuelView component', () => {
- it('should be rendered with DuelError component when no current challenge', () => {
+ it('should be rendered with DuelError component with no current challenge', () => {
const store = createMockEcolyoStore({ challenge: challengeStateData })
- const wrapper = mount(
+ const { container } = render(
<Provider store={store}>
<DuelView />
</Provider>
)
- expect(wrapper.find(DuelError).exists()).toBeTruthy()
+ expect(
+ container.getElementsByClassName('duel-error-container').length
+ ).toBeTruthy()
})
- it('should be rendered with DuelOngoing component when current challenge with state = duel and duel state = done', () => {
+ it('should be rendered with DuelOngoing component when current challenge with state = duel and duel state = done', async () => {
const updatedUserChallenge = {
...userChallengeData[1],
state: UserChallengeState.DUEL,
@@ -48,12 +47,15 @@ describe('DuelView component', () => {
challenge: updatedChallengeState,
chart: mockChartState,
})
- const wrapper = mount(
+ const { container } = render(
<Provider store={store}>
<DuelView />
</Provider>
)
- expect(wrapper.find(DuelOngoing).exists()).toBeTruthy()
+ await waitFor(() => null, { container })
+ expect(
+ container.getElementsByClassName('duel-ongoing-container').length
+ ).toBeTruthy()
})
it('should be rendered with DuelError component when current challenge with state = duel and duel state = locked', () => {
@@ -69,12 +71,14 @@ describe('DuelView component', () => {
}
updatedChallengeState.userChallengeList[1] = updatedUserChallenge
const store = createMockEcolyoStore({ challenge: updatedChallengeState })
- const wrapper = mount(
+ const { container } = render(
<Provider store={store}>
<DuelView />
</Provider>
)
- expect(wrapper.find(DuelError).exists()).toBeTruthy()
+ expect(
+ container.getElementsByClassName('duel-error-container').length
+ ).toBeTruthy()
})
it('should be rendered with DuelError component when current challenge with state != duel', () => {
@@ -89,12 +93,14 @@ describe('DuelView component', () => {
}
updatedChallengeState.userChallengeList[1] = updatedUserChallenge
const store = createMockEcolyoStore({ challenge: updatedChallengeState })
- const wrapper = mount(
+ const { container } = render(
<Provider store={store}>
<DuelView />
</Provider>
)
- expect(wrapper.find(DuelError).exists()).toBeTruthy()
+ expect(
+ container.getElementsByClassName('duel-error-container').length
+ ).toBeTruthy()
})
it('should be rendered with DuelUnlocked component when current challenge with state = duel and duel state = unlocked', () => {
@@ -110,12 +116,14 @@ describe('DuelView component', () => {
}
updatedChallengeState.userChallengeList[1] = updatedUserChallenge
const store = createMockEcolyoStore({ challenge: updatedChallengeState })
- const wrapper = mount(
+ const { container } = render(
<Provider store={store}>
<DuelView />
</Provider>
)
- expect(wrapper.find(DuelUnlocked).exists()).toBeTruthy()
+ expect(
+ container.getElementsByClassName('duel-unlocked-container').length
+ ).toBeTruthy()
})
it('should be rendered with DuelOngoing component when current challenge with state = duel and duel state = ongoing', () => {
@@ -134,11 +142,13 @@ describe('DuelView component', () => {
challenge: updatedChallengeState,
chart: mockChartState,
})
- const wrapper = mount(
+ const { container } = render(
<Provider store={store}>
<DuelView />
</Provider>
)
- expect(wrapper.find(DuelOngoing).exists()).toBeTruthy()
+ expect(
+ container.getElementsByClassName('duel-ongoing-container').length
+ ).toBeTruthy()
})
})
diff --git a/src/components/Ecogesture/EcogestureTabsView.spec.tsx b/src/components/Ecogesture/EcogestureTabsView.spec.tsx
index 4f90bd9c3dc01bab95999eebcce39cf63909699a..e0b184d524c1f7ee70872291c75a57b33f828434 100644
--- a/src/components/Ecogesture/EcogestureTabsView.spec.tsx
+++ b/src/components/Ecogesture/EcogestureTabsView.spec.tsx
@@ -12,21 +12,17 @@ import EcogestureEmptyList from './EcogestureEmptyList/EcogestureEmptyList'
import EcogestureInitModal from './EcogestureInitModal/EcogestureInitModal'
const mockGetAllEcogestures = jest.fn()
-const mockGetEcogestureListByProfile = jest.fn().mockResolvedValue([])
-const mockInitEcogesture = jest.fn().mockResolvedValue(mockedEcogesturesData)
jest.mock('services/ecogesture.service', () => {
return jest.fn(() => ({
getAllEcogestures: mockGetAllEcogestures,
- getEcogestureListByProfile: mockGetEcogestureListByProfile,
- initEcogesture: mockInitEcogesture,
+ getEcogestureListByProfile: jest.fn().mockResolvedValue([]),
+ initEcogesture: jest.fn().mockResolvedValue(mockedEcogesturesData),
}))
})
-const mockGetProfile = jest.fn()
-const mockUpdateProfile = jest.fn()
jest.mock('services/profile.service', () => {
return jest.fn(() => ({
- getProfile: mockGetProfile,
- updateProfile: mockUpdateProfile,
+ getProfile: jest.fn(),
+ updateProfile: jest.fn(),
}))
})
diff --git a/src/components/EcogestureSelection/EcogestureSelectionDetail/EcogestureSelectionDetail.spec.tsx b/src/components/EcogestureSelection/EcogestureSelectionDetail/EcogestureSelectionDetail.spec.tsx
index 98fd1a4772a1e78c1d384f53d8ec9f24bc1f8da8..5b2b12e46d94f301c01a33087a0e0826b4fcbe0a 100644
--- a/src/components/EcogestureSelection/EcogestureSelectionDetail/EcogestureSelectionDetail.spec.tsx
+++ b/src/components/EcogestureSelection/EcogestureSelectionDetail/EcogestureSelectionDetail.spec.tsx
@@ -17,7 +17,6 @@ describe('EcogestureSelectionDetail component', () => {
/>
)
await waitFor(() => null, { container })
- // await waitForComponentToPaint(wrapper)
expect(container).toMatchSnapshot()
})