From b3ed1ad89bc664aa84e6d98f3a985f2394c211a4 Mon Sep 17 00:00:00 2001
From: Bastien DUMONT <bdumont@grandlyon.com>
Date: Thu, 26 Oct 2023 12:37:44 +0000
Subject: [PATCH] test(rtl): challenge
---
.../ChallengeCard/ChallengeCard.spec.tsx | 99 +-
.../__snapshots__/ChallengeCard.spec.tsx.snap | 242 ++-
.../ChallengeCardDone.spec.tsx | 46 +-
.../ChallengeCardDone.spec.tsx.snap | 540 +------
.../ChallengeCardLast.spec.tsx | 14 +-
.../ChallengeCardLast.spec.tsx.snap | 185 +--
.../ChallengeCardLocked.spec.tsx | 8 +-
.../ChallengeCardLocked.spec.tsx.snap | 40 +-
.../ChallengeCardUnlocked.spec.tsx | 45 +-
.../ChallengeNoFluidModal.spec.tsx | 12 +-
.../ChallengeNoFluidModal.spec.tsx.snap | 94 +-
.../Challenge/ChallengeView.spec.tsx | 8 +-
.../__snapshots__/ChallengeView.spec.tsx.snap | 1349 ++---------------
yarn.lock | 12 +-
14 files changed, 490 insertions(+), 2204 deletions(-)
diff --git a/src/components/Challenge/ChallengeCard/ChallengeCard.spec.tsx b/src/components/Challenge/ChallengeCard/ChallengeCard.spec.tsx
index 9c4a0a2f2..ea845feaa 100644
--- a/src/components/Challenge/ChallengeCard/ChallengeCard.spec.tsx
+++ b/src/components/Challenge/ChallengeCard/ChallengeCard.spec.tsx
@@ -1,64 +1,71 @@
-import { shallow } from 'enzyme'
+import { render } from '@testing-library/react'
import React from 'react'
+import { Provider } from 'react-redux'
+import { createMockEcolyoStore } from 'tests/__mocks__/store'
import { userChallengeData } from 'tests/__mocks__/userChallengeData.mock'
-import ChallengeCardLocked from '../ChallengeCardLocked/ChallengeCardLocked'
-import ChallengeCardOnGoing from '../ChallengeCardOnGoing/ChallengeCardOnGoing'
-import ChallengeCardUnlocked from '../ChallengeCardUnlocked/ChallengeCardUnlocked'
import ChallengeCard from './ChallengeCard'
-const mockMoveToSlide = jest.fn()
+const store = createMockEcolyoStore()
describe('ChallengeCard component', () => {
it('should be rendered correctly', () => {
- const component = shallow(
- <ChallengeCard
- userChallenge={userChallengeData[1]}
- indexSlider={0}
- index={0}
- cardWidth={200}
- cardHeight={400}
- moveToSlide={mockMoveToSlide}
- />
- ).getElement()
- expect(component).toMatchSnapshot()
+ const { container } = render(
+ <Provider store={store}>
+ <ChallengeCard
+ userChallenge={userChallengeData[1]}
+ indexSlider={0}
+ index={0}
+ cardWidth={200}
+ cardHeight={400}
+ moveToSlide={jest.fn()}
+ />
+ </Provider>
+ )
+ expect(container).toMatchSnapshot()
})
it('should render locked Card', () => {
- const wrapper = shallow(
- <ChallengeCard
- userChallenge={userChallengeData[4]}
- indexSlider={0}
- index={0}
- cardWidth={200}
- cardHeight={400}
- moveToSlide={mockMoveToSlide}
- />
+ const { container } = render(
+ <Provider store={store}>
+ <ChallengeCard
+ userChallenge={userChallengeData[4]}
+ indexSlider={0}
+ index={0}
+ cardWidth={200}
+ cardHeight={400}
+ moveToSlide={jest.fn()}
+ />
+ </Provider>
)
- expect(wrapper.find(ChallengeCardLocked).exists()).toBeTruthy()
+ expect(container.getElementsByClassName('cardLocked').length).toBeTruthy()
})
it('should render unlocked Card', () => {
- const wrapper = shallow(
- <ChallengeCard
- userChallenge={userChallengeData[3]}
- indexSlider={0}
- index={0}
- cardWidth={200}
- cardHeight={400}
- moveToSlide={mockMoveToSlide}
- />
+ const { container } = render(
+ <Provider store={store}>
+ <ChallengeCard
+ userChallenge={userChallengeData[3]}
+ indexSlider={0}
+ index={0}
+ cardWidth={200}
+ cardHeight={400}
+ moveToSlide={jest.fn()}
+ />
+ </Provider>
)
- expect(wrapper.find(ChallengeCardUnlocked).exists()).toBeTruthy()
+ expect(container.getElementsByClassName('cardUnlocked').length).toBeTruthy()
})
it('should render ongoing Card', () => {
- const wrapper = shallow(
- <ChallengeCard
- userChallenge={userChallengeData[2]}
- indexSlider={0}
- index={0}
- cardWidth={200}
- cardHeight={400}
- moveToSlide={mockMoveToSlide}
- />
+ const { container } = render(
+ <Provider store={store}>
+ <ChallengeCard
+ userChallenge={userChallengeData[2]}
+ indexSlider={0}
+ index={0}
+ cardWidth={200}
+ cardHeight={400}
+ moveToSlide={jest.fn()}
+ />
+ </Provider>
)
- expect(wrapper.find(ChallengeCardOnGoing).exists()).toBeTruthy()
+ expect(container.getElementsByClassName('onGoing').length).toBeTruthy()
})
})
diff --git a/src/components/Challenge/ChallengeCard/__snapshots__/ChallengeCard.spec.tsx.snap b/src/components/Challenge/ChallengeCard/__snapshots__/ChallengeCard.spec.tsx.snap
index 146757e10..457e83187 100644
--- a/src/components/Challenge/ChallengeCard/__snapshots__/ChallengeCard.spec.tsx.snap
+++ b/src/components/Challenge/ChallengeCard/__snapshots__/ChallengeCard.spec.tsx.snap
@@ -1,161 +1,91 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`ChallengeCard component should be rendered correctly 1`] = `
-<div
- className="slide active"
- onClick={[Function]}
- style={
- Object {
- "height": "400px",
- "maxWidth": "200px",
- "minWidth": "200px",
- }
- }
->
- <ChallengeCardDone
- userChallenge={
- Object {
- "action": Object {
- "ecogesture": null,
- "startDate": null,
- "state": 0,
- },
- "description": "Description challenge 2",
- "duel": Object {
- "description": "Je parie un ours polaire que vous ne pouvez pas consommer moins que #CONSUMPTION € en 1 semaine",
- "duration": "P30D",
- "fluidTypes": Array [],
- "id": "DUEL001",
- "startDate": null,
- "state": 0,
- "threshold": 0,
- "title": "Title DUEL001",
- "userConsumption": 0,
- },
- "endingDate": null,
- "exploration": Object {
- "complementary_description": "Refaire un tour dans son profil si déjà fait",
- "date": null,
- "description": "Avoir complété son profil",
- "ecogesture_id": "",
- "fluid_condition": Array [],
- "id": "EXPLORATION001",
- "message_success": "Vous avez complété votre profil ou refait un tour dans votre profil",
- "progress": 0,
- "state": 0,
- "target": 1,
- "type": 1,
- },
- "id": "CHALLENGE0002",
- "progress": Object {
- "actionProgress": 0,
- "explorationProgress": 0,
- "quizProgress": 0,
- },
- "quiz": Object {
- "customQuestion": Object {
- "interval": 20,
- "period": Object {},
- "questionLabel": "Custom1",
- "result": 0,
- "singleFluid": false,
- "timeStep": 20,
- "type": 0,
- },
- "id": "QUIZ001",
- "questions": Array [
- Object {
- "answers": Array [
- Object {
- "answerLabel": "86 km",
- "isTrue": true,
- },
- Object {
- "answerLabel": "78 km",
- "isTrue": false,
- },
- Object {
- "answerLabel": "56 km",
- "isTrue": false,
- },
- ],
- "explanation": "L’aqueduc du Gier est un des aqueducs antiques de Lyon desservant la ville antique de Lugdunum. Avec ses 86 km il est le plus long des quatre aqueducs ayant alimenté la ville en eau, et celui dont les structures sont le mieux conservées. Il doit son nom au fait qu'il puise aux sources du Gier, affluent du Rhône",
- "questionLabel": "Quelle longueur faisait l’aqueduc du Gier pour acheminer l’eau sur Lyon à l’époque romaine ?",
- "result": 0,
- "source": "string",
- },
- Object {
- "answers": Array [
- Object {
- "answerLabel": "1 point d’eau public pour 800 habitants.",
- "isTrue": true,
- },
- Object {
- "answerLabel": "1 point d’eau public pour 400 habitants.",
- "isTrue": false,
- },
- Object {
- "answerLabel": "1 point d’eau public pour 200 habitants.",
- "isTrue": false,
- },
- ],
- "explanation": "string",
- "questionLabel": "En 1800 à Lyon, combien de points d'eau y avait-il par habitants ?",
- "result": 0,
- "source": "string",
- },
- Object {
- "answers": Array [
- Object {
- "answerLabel": "François Mitterrand",
- "isTrue": false,
- },
- Object {
- "answerLabel": "Napoléon Ier",
- "isTrue": true,
- },
- Object {
- "answerLabel": "Napoléon III",
- "isTrue": false,
- },
- ],
- "explanation": "string",
- "questionLabel": "Qui officialise la création de la Compagnie Générale des eaux ?",
- "result": 0,
- "source": "string",
- },
- Object {
- "answers": Array [
- Object {
- "answerLabel": "string",
- "isTrue": false,
- },
- Object {
- "answerLabel": "string",
- "isTrue": false,
- },
- Object {
- "answerLabel": "Aristide Dumont",
- "isTrue": true,
- },
- ],
- "explanation": "string",
- "questionLabel": "Quel ingénieur est à l’origine du projet d’alimentation en eau en 1856 ?",
- "result": 0,
- "source": "string",
- },
- ],
- "result": 0,
- "startDate": null,
- "state": 0,
- },
- "startDate": null,
- "state": 4,
- "success": 1,
- "target": 15,
- "title": "Challenge 2",
- }
- }
- />
+<div>
+ <div
+ class="slide active"
+ style="min-width: 200px; max-width: 200px; height: 400px;"
+ >
+ <div
+ class="cardContent cardDone"
+ >
+ <div
+ class="challengeName text-22-bold"
+ >
+ Jean-Jacques
+RUISSEAU
+ </div>
+ <div
+ class="iconResult"
+ >
+ <svg
+ aria-hidden="true"
+ class="imgResult styles__icon___23x3R"
+ height="180"
+ width="180"
+ >
+ <use
+ xlink:href="#test-file-stub"
+ />
+ </svg>
+ </div>
+ <div
+ class="statsResult"
+ >
+ <div
+ class="labelResult lost"
+ >
+ challenge.card_done.lost
+ </div>
+ <span
+ class="text-18"
+ >
+ challenge.card_done.depense
+ <span
+ class="text-18-bold"
+ >
+ 0,00
+ €
+ </span>
+ <br />
+ challenge.card_done.final_defi
+ </span>
+ </div>
+ <div
+ class="buttons"
+ >
+ <button
+ aria-label="challenge.card_done.final_defi_view"
+ class="MuiButtonBase-root MuiButton-root MuiButton-text btnSecondary"
+ tabindex="0"
+ type="button"
+ >
+ <span
+ class="MuiButton-label"
+ >
+ challenge.card_done.final_defi_view
+ </span>
+ <span
+ class="MuiTouchRipple-root"
+ />
+ </button>
+ <button
+ aria-label="challenge.card_done.reset_defi"
+ class="MuiButtonBase-root MuiButton-root MuiButton-text btnPrimaryNegative"
+ tabindex="0"
+ type="button"
+ >
+ <span
+ class="MuiButton-label"
+ >
+ challenge.card_done.reset_defi
+ </span>
+ <span
+ class="MuiTouchRipple-root"
+ />
+ </button>
+ </div>
+ </div>
+ </div>
</div>
`;
diff --git a/src/components/Challenge/ChallengeCardDone/ChallengeCardDone.spec.tsx b/src/components/Challenge/ChallengeCardDone/ChallengeCardDone.spec.tsx
index 99f3ed4c3..56ef37bff 100644
--- a/src/components/Challenge/ChallengeCardDone/ChallengeCardDone.spec.tsx
+++ b/src/components/Challenge/ChallengeCardDone/ChallengeCardDone.spec.tsx
@@ -1,12 +1,10 @@
-import { Button } from '@material-ui/core'
+import { render, screen } from '@testing-library/react'
+import { userEvent } from '@testing-library/user-event'
import ChallengeCardDone from 'components/Challenge/ChallengeCardDone/ChallengeCardDone'
-import { mount } from 'enzyme'
-import toJson from 'enzyme-to-json'
import React from 'react'
import { Provider } from 'react-redux'
import configureStore from 'redux-mock-store'
import * as storeHooks from 'store/hooks'
-import { waitForComponentToPaint } from 'tests/__mocks__/testUtils'
import { userChallengeData } from 'tests/__mocks__/userChallengeData.mock'
const mockUpdateUserChallenge = jest.fn()
@@ -27,13 +25,12 @@ describe('ChallengeCardDone component', () => {
},
})
it('should be rendered correctly', async () => {
- const wrapper = mount(
+ const { container } = render(
<Provider store={storeNoCurrentChallenge}>
<ChallengeCardDone userChallenge={userChallengeData[0]} />
</Provider>
)
- await waitForComponentToPaint(wrapper)
- expect(toJson(wrapper)).toMatchSnapshot()
+ expect(container).toMatchSnapshot()
})
describe('Reset final challenge', () => {
@@ -42,14 +39,15 @@ describe('ChallengeCardDone component', () => {
})
it('should reset challenge if no other challenge is on going', async () => {
mockAppDispatch.mockImplementationOnce(() => mockDispatch)
- const wrapper = mount(
+ render(
<Provider store={storeNoCurrentChallenge}>
<ChallengeCardDone userChallenge={userChallengeData[0]} />
</Provider>
)
- wrapper.find(Button).last().simulate('click')
- await waitForComponentToPaint(wrapper)
- expect(mockDispatch).toHaveBeenCalledTimes(1)
+ const resetButton = screen.getByRole('button', {
+ name: 'challenge.card_done.reset_defi',
+ })
+ await userEvent.click(resetButton)
expect(mockDispatch).toHaveBeenCalledWith({
type: 'challenge/updateUserChallengeList',
})
@@ -62,35 +60,39 @@ describe('ChallengeCardDone component', () => {
challenge: { currentChallenge: userChallengeData[1] },
},
})
- const wrapper = mount(
+ render(
<Provider store={store}>
<ChallengeCardDone userChallenge={userChallengeData[0]} />
</Provider>
)
- wrapper.find(Button).last().simulate('click')
- await waitForComponentToPaint(wrapper)
+ const resetButton = screen.getByRole('button', {
+ name: 'challenge.card_done.reset_defi',
+ })
+ expect(resetButton).toHaveProperty('disabled')
expect(mockDispatch).toHaveBeenCalledTimes(0)
expect(mockUpdateUserChallenge).toHaveBeenCalledTimes(0)
})
it('should be primary button is challenge is lost', async () => {
- const wrapper = mount(
+ render(
<Provider store={storeNoCurrentChallenge}>
<ChallengeCardDone userChallenge={userChallengeData[1]} />
</Provider>
)
- await waitForComponentToPaint(wrapper)
- const resetButton = wrapper.find('button').last()
- expect(resetButton.hasClass('btnPrimaryNegative')).toBe(true)
+ const resetButton = screen.getByRole('button', {
+ name: 'challenge.card_done.reset_defi',
+ })
+ expect(resetButton).toHaveClass('btnPrimaryNegative')
})
it('should be secondary button is challenge is won', async () => {
- const wrapper = mount(
+ render(
<Provider store={storeNoCurrentChallenge}>
<ChallengeCardDone userChallenge={userChallengeData[0]} />
</Provider>
)
- await waitForComponentToPaint(wrapper)
- const resetButton = wrapper.find('button').last()
- expect(resetButton.hasClass('btnSecondary')).toBe(true)
+ const resetButton = screen.getByRole('button', {
+ name: 'challenge.card_done.reset_defi',
+ })
+ expect(resetButton).toHaveClass('btnSecondary')
})
})
})
diff --git a/src/components/Challenge/ChallengeCardDone/__snapshots__/ChallengeCardDone.spec.tsx.snap b/src/components/Challenge/ChallengeCardDone/__snapshots__/ChallengeCardDone.spec.tsx.snap
index 8f627a3f5..7df066b7f 100644
--- a/src/components/Challenge/ChallengeCardDone/__snapshots__/ChallengeCardDone.spec.tsx.snap
+++ b/src/components/Challenge/ChallengeCardDone/__snapshots__/ChallengeCardDone.spec.tsx.snap
@@ -1,492 +1,86 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`ChallengeCardDone component should be rendered correctly 1`] = `
-<Provider
- store={
- Object {
- "clearActions": [Function],
- "dispatch": [Function],
- "getActions": [Function],
- "getState": [Function],
- "replaceReducer": [Function],
- "subscribe": [Function],
- }
- }
->
- <ChallengeCardDone
- userChallenge={
- Object {
- "action": Object {
- "ecogesture": null,
- "startDate": null,
- "state": 0,
- },
- "description": "Description challenge 1",
- "duel": Object {
- "description": "Je parie un ours polaire que vous ne pouvez pas consommer moins que #CONSUMPTION € en 1 semaine",
- "duration": "P30D",
- "fluidTypes": Array [],
- "id": "DUEL001",
- "startDate": null,
- "state": 0,
- "threshold": 0,
- "title": "Title DUEL001",
- "userConsumption": 0,
- },
- "endingDate": null,
- "exploration": Object {
- "complementary_description": "Refaire un tour dans son profil si déjà fait",
- "date": null,
- "description": "Avoir complété son profil",
- "ecogesture_id": "",
- "fluid_condition": Array [],
- "id": "EXPLORATION001",
- "message_success": "Vous avez complété votre profil ou refait un tour dans votre profil",
- "progress": 0,
- "state": 0,
- "target": 1,
- "type": 1,
- },
- "id": "CHALLENGE0001",
- "progress": Object {
- "actionProgress": 0,
- "explorationProgress": 0,
- "quizProgress": 0,
- },
- "quiz": Object {
- "customQuestion": Object {
- "interval": 20,
- "period": Object {},
- "questionLabel": "Custom1",
- "result": 0,
- "singleFluid": false,
- "timeStep": 20,
- "type": 0,
- },
- "id": "QUIZ001",
- "questions": Array [
- Object {
- "answers": Array [
- Object {
- "answerLabel": "86 km",
- "isTrue": true,
- },
- Object {
- "answerLabel": "78 km",
- "isTrue": false,
- },
- Object {
- "answerLabel": "56 km",
- "isTrue": false,
- },
- ],
- "explanation": "L’aqueduc du Gier est un des aqueducs antiques de Lyon desservant la ville antique de Lugdunum. Avec ses 86 km il est le plus long des quatre aqueducs ayant alimenté la ville en eau, et celui dont les structures sont le mieux conservées. Il doit son nom au fait qu'il puise aux sources du Gier, affluent du Rhône",
- "questionLabel": "Quelle longueur faisait l’aqueduc du Gier pour acheminer l’eau sur Lyon à l’époque romaine ?",
- "result": 0,
- "source": "string",
- },
- Object {
- "answers": Array [
- Object {
- "answerLabel": "1 point d’eau public pour 800 habitants.",
- "isTrue": true,
- },
- Object {
- "answerLabel": "1 point d’eau public pour 400 habitants.",
- "isTrue": false,
- },
- Object {
- "answerLabel": "1 point d’eau public pour 200 habitants.",
- "isTrue": false,
- },
- ],
- "explanation": "string",
- "questionLabel": "En 1800 à Lyon, combien de points d'eau y avait-il par habitants ?",
- "result": 0,
- "source": "string",
- },
- Object {
- "answers": Array [
- Object {
- "answerLabel": "François Mitterrand",
- "isTrue": false,
- },
- Object {
- "answerLabel": "Napoléon Ier",
- "isTrue": true,
- },
- Object {
- "answerLabel": "Napoléon III",
- "isTrue": false,
- },
- ],
- "explanation": "string",
- "questionLabel": "Qui officialise la création de la Compagnie Générale des eaux ?",
- "result": 0,
- "source": "string",
- },
- Object {
- "answers": Array [
- Object {
- "answerLabel": "string",
- "isTrue": false,
- },
- Object {
- "answerLabel": "string",
- "isTrue": false,
- },
- Object {
- "answerLabel": "Aristide Dumont",
- "isTrue": true,
- },
- ],
- "explanation": "string",
- "questionLabel": "Quel ingénieur est à l’origine du projet d’alimentation en eau en 1856 ?",
- "result": 0,
- "source": "string",
- },
- ],
- "result": 0,
- "startDate": null,
- "state": 0,
- },
- "startDate": null,
- "state": 4,
- "success": 2,
- "target": 15,
- "title": "Challenge 1",
- }
- }
+<div>
+ <div
+ class="cardContent cardDone"
>
<div
- className="cardContent cardDone"
+ class="challengeName text-22-bold"
>
- <div
- className="challengeName text-22-bold"
- >
- Simone
+ Simone
VEILLE
- </div>
+ </div>
+ <div
+ class="iconResult"
+ >
+ <svg
+ aria-hidden="true"
+ class="imgResult styles__icon___23x3R"
+ height="180"
+ width="180"
+ >
+ <use
+ xlink:href="#test-file-stub"
+ />
+ </svg>
+ </div>
+ <div
+ class="statsResult"
+ >
<div
- className="iconResult"
+ class="labelResult win"
>
- <StyledIcon
- className="imgResult"
- icon="test-file-stub"
- size={180}
- >
- <Icon
- aria-hidden={true}
- className="imgResult"
- icon="test-file-stub"
- size={180}
- spin={false}
- >
- <Component
- aria-hidden={true}
- className="imgResult styles__icon___23x3R"
- height={180}
- style={Object {}}
- width={180}
- >
- <svg
- aria-hidden={true}
- className="imgResult styles__icon___23x3R"
- height={180}
- style={Object {}}
- width={180}
- >
- <use
- xlinkHref="#test-file-stub"
- />
- </svg>
- </Component>
- </Icon>
- </StyledIcon>
+ challenge.card_done.win
</div>
- <div
- className="statsResult"
+ <span
+ class="text-18"
>
- <div
- className="labelResult win"
- >
- challenge.card_done.win
- </div>
+ challenge.card_done.saving
<span
- className="text-18"
+ class="text-18-bold"
>
- challenge.card_done.saving
- <span
- className="text-18-bold"
- >
- 0,00
- €
- </span>
- <br />
- challenge.card_done.final_defi
+ 0,00
+ €
</span>
- </div>
- <div
- className="buttons"
+ <br />
+ challenge.card_done.final_defi
+ </span>
+ </div>
+ <div
+ class="buttons"
+ >
+ <button
+ aria-label="challenge.card_done.final_defi_view"
+ class="MuiButtonBase-root MuiButton-root MuiButton-text btnSecondary"
+ tabindex="0"
+ type="button"
>
- <WithStyles(ForwardRef(Button))
- aria-label="challenge.card_done.final_defi_view"
- className="btnSecondary"
- onClick={[Function]}
+ <span
+ class="MuiButton-label"
>
- <ForwardRef(Button)
- aria-label="challenge.card_done.final_defi_view"
- className="btnSecondary"
- classes={
- Object {
- "colorInherit": "MuiButton-colorInherit",
- "contained": "MuiButton-contained",
- "containedPrimary": "MuiButton-containedPrimary",
- "containedSecondary": "MuiButton-containedSecondary",
- "containedSizeLarge": "MuiButton-containedSizeLarge",
- "containedSizeSmall": "MuiButton-containedSizeSmall",
- "disableElevation": "MuiButton-disableElevation",
- "disabled": "Mui-disabled",
- "endIcon": "MuiButton-endIcon",
- "focusVisible": "Mui-focusVisible",
- "fullWidth": "MuiButton-fullWidth",
- "iconSizeLarge": "MuiButton-iconSizeLarge",
- "iconSizeMedium": "MuiButton-iconSizeMedium",
- "iconSizeSmall": "MuiButton-iconSizeSmall",
- "label": "MuiButton-label",
- "outlined": "MuiButton-outlined",
- "outlinedPrimary": "MuiButton-outlinedPrimary",
- "outlinedSecondary": "MuiButton-outlinedSecondary",
- "outlinedSizeLarge": "MuiButton-outlinedSizeLarge",
- "outlinedSizeSmall": "MuiButton-outlinedSizeSmall",
- "root": "MuiButton-root",
- "sizeLarge": "MuiButton-sizeLarge",
- "sizeSmall": "MuiButton-sizeSmall",
- "startIcon": "MuiButton-startIcon",
- "text": "MuiButton-text",
- "textPrimary": "MuiButton-textPrimary",
- "textSecondary": "MuiButton-textSecondary",
- "textSizeLarge": "MuiButton-textSizeLarge",
- "textSizeSmall": "MuiButton-textSizeSmall",
- }
- }
- onClick={[Function]}
- >
- <WithStyles(ForwardRef(ButtonBase))
- aria-label="challenge.card_done.final_defi_view"
- className="MuiButton-root MuiButton-text btnSecondary"
- component="button"
- disabled={false}
- focusRipple={true}
- focusVisibleClassName="Mui-focusVisible"
- onClick={[Function]}
- type="button"
- >
- <ForwardRef(ButtonBase)
- aria-label="challenge.card_done.final_defi_view"
- className="MuiButton-root MuiButton-text btnSecondary"
- classes={
- Object {
- "disabled": "Mui-disabled",
- "focusVisible": "Mui-focusVisible",
- "root": "MuiButtonBase-root",
- }
- }
- component="button"
- disabled={false}
- focusRipple={true}
- focusVisibleClassName="Mui-focusVisible"
- onClick={[Function]}
- type="button"
- >
- <button
- aria-label="challenge.card_done.final_defi_view"
- className="MuiButtonBase-root MuiButton-root MuiButton-text btnSecondary"
- disabled={false}
- onBlur={[Function]}
- onClick={[Function]}
- onDragLeave={[Function]}
- onFocus={[Function]}
- onKeyDown={[Function]}
- onKeyUp={[Function]}
- onMouseDown={[Function]}
- onMouseLeave={[Function]}
- onMouseUp={[Function]}
- onTouchEnd={[Function]}
- onTouchMove={[Function]}
- onTouchStart={[Function]}
- tabIndex={0}
- type="button"
- >
- <span
- className="MuiButton-label"
- >
- challenge.card_done.final_defi_view
- </span>
- <WithStyles(memo)
- center={false}
- >
- <ForwardRef(TouchRipple)
- center={false}
- classes={
- Object {
- "child": "MuiTouchRipple-child",
- "childLeaving": "MuiTouchRipple-childLeaving",
- "childPulsate": "MuiTouchRipple-childPulsate",
- "ripple": "MuiTouchRipple-ripple",
- "ripplePulsate": "MuiTouchRipple-ripplePulsate",
- "rippleVisible": "MuiTouchRipple-rippleVisible",
- "root": "MuiTouchRipple-root",
- }
- }
- >
- <span
- className="MuiTouchRipple-root"
- >
- <TransitionGroup
- childFactory={[Function]}
- component={null}
- exit={true}
- />
- </span>
- </ForwardRef(TouchRipple)>
- </WithStyles(memo)>
- </button>
- </ForwardRef(ButtonBase)>
- </WithStyles(ForwardRef(ButtonBase))>
- </ForwardRef(Button)>
- </WithStyles(ForwardRef(Button))>
- <WithStyles(ForwardRef(Button))
- aria-label="challenge.card_done.reset_defi"
- className="btnSecondary"
- disabled={false}
- onClick={[Function]}
+ challenge.card_done.final_defi_view
+ </span>
+ <span
+ class="MuiTouchRipple-root"
+ />
+ </button>
+ <button
+ aria-label="challenge.card_done.reset_defi"
+ class="MuiButtonBase-root MuiButton-root MuiButton-text btnSecondary"
+ tabindex="0"
+ type="button"
+ >
+ <span
+ class="MuiButton-label"
>
- <ForwardRef(Button)
- aria-label="challenge.card_done.reset_defi"
- className="btnSecondary"
- classes={
- Object {
- "colorInherit": "MuiButton-colorInherit",
- "contained": "MuiButton-contained",
- "containedPrimary": "MuiButton-containedPrimary",
- "containedSecondary": "MuiButton-containedSecondary",
- "containedSizeLarge": "MuiButton-containedSizeLarge",
- "containedSizeSmall": "MuiButton-containedSizeSmall",
- "disableElevation": "MuiButton-disableElevation",
- "disabled": "Mui-disabled",
- "endIcon": "MuiButton-endIcon",
- "focusVisible": "Mui-focusVisible",
- "fullWidth": "MuiButton-fullWidth",
- "iconSizeLarge": "MuiButton-iconSizeLarge",
- "iconSizeMedium": "MuiButton-iconSizeMedium",
- "iconSizeSmall": "MuiButton-iconSizeSmall",
- "label": "MuiButton-label",
- "outlined": "MuiButton-outlined",
- "outlinedPrimary": "MuiButton-outlinedPrimary",
- "outlinedSecondary": "MuiButton-outlinedSecondary",
- "outlinedSizeLarge": "MuiButton-outlinedSizeLarge",
- "outlinedSizeSmall": "MuiButton-outlinedSizeSmall",
- "root": "MuiButton-root",
- "sizeLarge": "MuiButton-sizeLarge",
- "sizeSmall": "MuiButton-sizeSmall",
- "startIcon": "MuiButton-startIcon",
- "text": "MuiButton-text",
- "textPrimary": "MuiButton-textPrimary",
- "textSecondary": "MuiButton-textSecondary",
- "textSizeLarge": "MuiButton-textSizeLarge",
- "textSizeSmall": "MuiButton-textSizeSmall",
- }
- }
- disabled={false}
- onClick={[Function]}
- >
- <WithStyles(ForwardRef(ButtonBase))
- aria-label="challenge.card_done.reset_defi"
- className="MuiButton-root MuiButton-text btnSecondary"
- component="button"
- disabled={false}
- focusRipple={true}
- focusVisibleClassName="Mui-focusVisible"
- onClick={[Function]}
- type="button"
- >
- <ForwardRef(ButtonBase)
- aria-label="challenge.card_done.reset_defi"
- className="MuiButton-root MuiButton-text btnSecondary"
- classes={
- Object {
- "disabled": "Mui-disabled",
- "focusVisible": "Mui-focusVisible",
- "root": "MuiButtonBase-root",
- }
- }
- component="button"
- disabled={false}
- focusRipple={true}
- focusVisibleClassName="Mui-focusVisible"
- onClick={[Function]}
- type="button"
- >
- <button
- aria-label="challenge.card_done.reset_defi"
- className="MuiButtonBase-root MuiButton-root MuiButton-text btnSecondary"
- disabled={false}
- onBlur={[Function]}
- onClick={[Function]}
- onDragLeave={[Function]}
- onFocus={[Function]}
- onKeyDown={[Function]}
- onKeyUp={[Function]}
- onMouseDown={[Function]}
- onMouseLeave={[Function]}
- onMouseUp={[Function]}
- onTouchEnd={[Function]}
- onTouchMove={[Function]}
- onTouchStart={[Function]}
- tabIndex={0}
- type="button"
- >
- <span
- className="MuiButton-label"
- >
- challenge.card_done.reset_defi
- </span>
- <WithStyles(memo)
- center={false}
- >
- <ForwardRef(TouchRipple)
- center={false}
- classes={
- Object {
- "child": "MuiTouchRipple-child",
- "childLeaving": "MuiTouchRipple-childLeaving",
- "childPulsate": "MuiTouchRipple-childPulsate",
- "ripple": "MuiTouchRipple-ripple",
- "ripplePulsate": "MuiTouchRipple-ripplePulsate",
- "rippleVisible": "MuiTouchRipple-rippleVisible",
- "root": "MuiTouchRipple-root",
- }
- }
- >
- <span
- className="MuiTouchRipple-root"
- >
- <TransitionGroup
- childFactory={[Function]}
- component={null}
- exit={true}
- />
- </span>
- </ForwardRef(TouchRipple)>
- </WithStyles(memo)>
- </button>
- </ForwardRef(ButtonBase)>
- </WithStyles(ForwardRef(ButtonBase))>
- </ForwardRef(Button)>
- </WithStyles(ForwardRef(Button))>
- </div>
+ challenge.card_done.reset_defi
+ </span>
+ <span
+ class="MuiTouchRipple-root"
+ />
+ </button>
</div>
- </ChallengeCardDone>
-</Provider>
+ </div>
+</div>
`;
diff --git a/src/components/Challenge/ChallengeCardLast/ChallengeCardLast.spec.tsx b/src/components/Challenge/ChallengeCardLast/ChallengeCardLast.spec.tsx
index 06e3e7584..17fb028e9 100644
--- a/src/components/Challenge/ChallengeCardLast/ChallengeCardLast.spec.tsx
+++ b/src/components/Challenge/ChallengeCardLast/ChallengeCardLast.spec.tsx
@@ -1,5 +1,5 @@
-import { mount } from 'enzyme'
-import toJson from 'enzyme-to-json'
+import { render, screen } from '@testing-library/react'
+import { userEvent } from '@testing-library/user-event'
import React from 'react'
import ChallengeCardLast from './ChallengeCardLast'
@@ -8,15 +8,15 @@ declare let __SAU_IDEA_DIRECT_LINK__: string
describe('ChallengeCardLast component', () => {
it('should be rendered correctly', async () => {
- const wrapper = mount(<ChallengeCardLast />)
- expect(toJson(wrapper)).toMatchSnapshot()
+ const { container } = render(<ChallengeCardLast />)
+ expect(container).toMatchSnapshot()
})
- it('should open SAU new idea link', () => {
+ it('should open SAU new idea link', async () => {
global.open = jest.fn()
- const wrapper = mount(<ChallengeCardLast />)
- wrapper.find('.btnSecondary').first().simulate('click')
+ render(<ChallengeCardLast />)
+ await userEvent.click(screen.getByRole('button'))
expect(window.open).toHaveBeenCalledTimes(1)
expect(global.open).toHaveBeenCalledWith(
`${__SAU_IDEA_DIRECT_LINK__}?version=0.0.0`
diff --git a/src/components/Challenge/ChallengeCardLast/__snapshots__/ChallengeCardLast.spec.tsx.snap b/src/components/Challenge/ChallengeCardLast/__snapshots__/ChallengeCardLast.spec.tsx.snap
index 1f2d1bd33..7d3662420 100644
--- a/src/components/Challenge/ChallengeCardLast/__snapshots__/ChallengeCardLast.spec.tsx.snap
+++ b/src/components/Challenge/ChallengeCardLast/__snapshots__/ChallengeCardLast.spec.tsx.snap
@@ -1,178 +1,45 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`ChallengeCardLast component should be rendered correctly 1`] = `
-<ChallengeCardLast>
+<div>
<div
- className="cardLast"
+ class="cardLast"
>
- <StyledIcon
- icon="test-file-stub"
- size={62}
+ <svg
+ aria-hidden="true"
+ class="styles__icon___23x3R"
+ height="62"
+ width="62"
>
- <Icon
- aria-hidden={true}
- icon="test-file-stub"
- size={62}
- spin={false}
- >
- <Component
- aria-hidden={true}
- className="styles__icon___23x3R"
- height={62}
- style={Object {}}
- width={62}
- >
- <svg
- aria-hidden={true}
- className="styles__icon___23x3R"
- height={62}
- style={Object {}}
- width={62}
- >
- <use
- xlinkHref="#test-file-stub"
- />
- </svg>
- </Component>
- </Icon>
- </StyledIcon>
+ <use
+ xlink:href="#test-file-stub"
+ />
+ </svg>
<div
- className="text-22-bold"
+ class="text-22-bold"
>
challenge.card_last.title
</div>
<div
- className="text-18-normal"
+ class="text-18-normal"
>
challenge.card_last.message1
</div>
- <WithStyles(ForwardRef(Button))
+ <button
aria-label="challenge.card_last.button"
- className="btnSecondary"
- onClick={[Function]}
+ class="MuiButtonBase-root MuiButton-root MuiButton-text btnSecondary"
+ tabindex="0"
+ type="button"
>
- <ForwardRef(Button)
- aria-label="challenge.card_last.button"
- className="btnSecondary"
- classes={
- Object {
- "colorInherit": "MuiButton-colorInherit",
- "contained": "MuiButton-contained",
- "containedPrimary": "MuiButton-containedPrimary",
- "containedSecondary": "MuiButton-containedSecondary",
- "containedSizeLarge": "MuiButton-containedSizeLarge",
- "containedSizeSmall": "MuiButton-containedSizeSmall",
- "disableElevation": "MuiButton-disableElevation",
- "disabled": "Mui-disabled",
- "endIcon": "MuiButton-endIcon",
- "focusVisible": "Mui-focusVisible",
- "fullWidth": "MuiButton-fullWidth",
- "iconSizeLarge": "MuiButton-iconSizeLarge",
- "iconSizeMedium": "MuiButton-iconSizeMedium",
- "iconSizeSmall": "MuiButton-iconSizeSmall",
- "label": "MuiButton-label",
- "outlined": "MuiButton-outlined",
- "outlinedPrimary": "MuiButton-outlinedPrimary",
- "outlinedSecondary": "MuiButton-outlinedSecondary",
- "outlinedSizeLarge": "MuiButton-outlinedSizeLarge",
- "outlinedSizeSmall": "MuiButton-outlinedSizeSmall",
- "root": "MuiButton-root",
- "sizeLarge": "MuiButton-sizeLarge",
- "sizeSmall": "MuiButton-sizeSmall",
- "startIcon": "MuiButton-startIcon",
- "text": "MuiButton-text",
- "textPrimary": "MuiButton-textPrimary",
- "textSecondary": "MuiButton-textSecondary",
- "textSizeLarge": "MuiButton-textSizeLarge",
- "textSizeSmall": "MuiButton-textSizeSmall",
- }
- }
- onClick={[Function]}
+ <span
+ class="MuiButton-label"
>
- <WithStyles(ForwardRef(ButtonBase))
- aria-label="challenge.card_last.button"
- className="MuiButton-root MuiButton-text btnSecondary"
- component="button"
- disabled={false}
- focusRipple={true}
- focusVisibleClassName="Mui-focusVisible"
- onClick={[Function]}
- type="button"
- >
- <ForwardRef(ButtonBase)
- aria-label="challenge.card_last.button"
- className="MuiButton-root MuiButton-text btnSecondary"
- classes={
- Object {
- "disabled": "Mui-disabled",
- "focusVisible": "Mui-focusVisible",
- "root": "MuiButtonBase-root",
- }
- }
- component="button"
- disabled={false}
- focusRipple={true}
- focusVisibleClassName="Mui-focusVisible"
- onClick={[Function]}
- type="button"
- >
- <button
- aria-label="challenge.card_last.button"
- className="MuiButtonBase-root MuiButton-root MuiButton-text btnSecondary"
- disabled={false}
- onBlur={[Function]}
- onClick={[Function]}
- onDragLeave={[Function]}
- onFocus={[Function]}
- onKeyDown={[Function]}
- onKeyUp={[Function]}
- onMouseDown={[Function]}
- onMouseLeave={[Function]}
- onMouseUp={[Function]}
- onTouchEnd={[Function]}
- onTouchMove={[Function]}
- onTouchStart={[Function]}
- tabIndex={0}
- type="button"
- >
- <span
- className="MuiButton-label"
- >
- challenge.card_last.button
- </span>
- <WithStyles(memo)
- center={false}
- >
- <ForwardRef(TouchRipple)
- center={false}
- classes={
- Object {
- "child": "MuiTouchRipple-child",
- "childLeaving": "MuiTouchRipple-childLeaving",
- "childPulsate": "MuiTouchRipple-childPulsate",
- "ripple": "MuiTouchRipple-ripple",
- "ripplePulsate": "MuiTouchRipple-ripplePulsate",
- "rippleVisible": "MuiTouchRipple-rippleVisible",
- "root": "MuiTouchRipple-root",
- }
- }
- >
- <span
- className="MuiTouchRipple-root"
- >
- <TransitionGroup
- childFactory={[Function]}
- component={null}
- exit={true}
- />
- </span>
- </ForwardRef(TouchRipple)>
- </WithStyles(memo)>
- </button>
- </ForwardRef(ButtonBase)>
- </WithStyles(ForwardRef(ButtonBase))>
- </ForwardRef(Button)>
- </WithStyles(ForwardRef(Button))>
+ challenge.card_last.button
+ </span>
+ <span
+ class="MuiTouchRipple-root"
+ />
+ </button>
</div>
-</ChallengeCardLast>
+</div>
`;
diff --git a/src/components/Challenge/ChallengeCardLocked/ChallengeCardLocked.spec.tsx b/src/components/Challenge/ChallengeCardLocked/ChallengeCardLocked.spec.tsx
index 0cf83e9a1..21d15c0f4 100644
--- a/src/components/Challenge/ChallengeCardLocked/ChallengeCardLocked.spec.tsx
+++ b/src/components/Challenge/ChallengeCardLocked/ChallengeCardLocked.spec.tsx
@@ -1,13 +1,13 @@
-import { shallow } from 'enzyme'
+import { render } from '@testing-library/react'
import React from 'react'
import { userChallengeData } from 'tests/__mocks__/userChallengeData.mock'
import ChallengeCardLocked from './ChallengeCardLocked'
describe('ChallengeCardLocked component', () => {
it('should be rendered correctly', () => {
- const component = shallow(
+ const { container } = render(
<ChallengeCardLocked userChallenge={userChallengeData[3]} />
- ).getElement()
- expect(component).toMatchSnapshot()
+ )
+ expect(container).toMatchSnapshot()
})
})
diff --git a/src/components/Challenge/ChallengeCardLocked/__snapshots__/ChallengeCardLocked.spec.tsx.snap b/src/components/Challenge/ChallengeCardLocked/__snapshots__/ChallengeCardLocked.spec.tsx.snap
index fda39f814..8ca50446c 100644
--- a/src/components/Challenge/ChallengeCardLocked/__snapshots__/ChallengeCardLocked.spec.tsx.snap
+++ b/src/components/Challenge/ChallengeCardLocked/__snapshots__/ChallengeCardLocked.spec.tsx.snap
@@ -1,23 +1,31 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`ChallengeCardLocked component should be rendered correctly 1`] = `
-<div
- className="cardContent cardLocked"
->
- <span
- className="challengeTitle"
+<div>
+ <div
+ class="cardContent cardLocked"
>
- Bernard
+ <span
+ class="challengeTitle"
+ >
+ Bernard
PIV'EAU
- </span>
- <StyledIcon
- className="challengeIcon"
- icon="test-file-stub"
- />
- <p
- className="toUnlock text-16-normal-150"
- >
- challenge.card.locked.desc
- </p>
+ </span>
+ <svg
+ aria-hidden="true"
+ class="challengeIcon styles__icon___23x3R"
+ height="16"
+ width="16"
+ >
+ <use
+ xlink:href="#test-file-stub"
+ />
+ </svg>
+ <p
+ class="toUnlock text-16-normal-150"
+ >
+ challenge.card.locked.desc
+ </p>
+ </div>
</div>
`;
diff --git a/src/components/Challenge/ChallengeCardUnlocked/ChallengeCardUnlocked.spec.tsx b/src/components/Challenge/ChallengeCardUnlocked/ChallengeCardUnlocked.spec.tsx
index 1d6e580a7..7ac922efb 100644
--- a/src/components/Challenge/ChallengeCardUnlocked/ChallengeCardUnlocked.spec.tsx
+++ b/src/components/Challenge/ChallengeCardUnlocked/ChallengeCardUnlocked.spec.tsx
@@ -1,6 +1,6 @@
-import { Button } from '@material-ui/core'
+import { render, screen } from '@testing-library/react'
+import { userEvent } from '@testing-library/user-event'
import { FluidType } from 'enums'
-import { mount } from 'enzyme'
import React from 'react'
import { Provider } from 'react-redux'
import UsageEventService from 'services/usageEvent.service'
@@ -9,9 +9,7 @@ import {
mockChallengeState,
mockGlobalState,
} from 'tests/__mocks__/store'
-import { waitForComponentToPaint } from 'tests/__mocks__/testUtils'
import { userChallengeData } from 'tests/__mocks__/userChallengeData.mock'
-import ChallengeNoFluidModal from '../ChallengeNoFluidModal/ChallengeNoFluidModal'
import ChallengeCardUnlocked from './ChallengeCardUnlocked'
const mockStartUserChallenge = jest.fn()
@@ -22,35 +20,32 @@ jest.mock('services/challenge.service', () => {
})
jest.mock('services/usageEvent.service')
-const mockAddEvent = jest.fn()
-UsageEventService.addEvent = mockAddEvent
+UsageEventService.addEvent = jest.fn()
describe('ChallengeCardUnlocked component', () => {
const store = createMockEcolyoStore()
it('should be rendered correctly', () => {
- const wrapper = mount(
+ render(
<Provider store={store}>
<ChallengeCardUnlocked userChallenge={userChallengeData[0]} />
</Provider>
)
- expect(wrapper.find('.challengeTitle').text()).toEqual('Simone\nVEILLE')
- expect(wrapper.find('.btnPrimaryNegative').exists()).toBeTruthy()
- expect(wrapper.find(ChallengeNoFluidModal).exists()).toBeTruthy()
- expect(wrapper.find(ChallengeNoFluidModal).prop('open')).toBeFalsy()
+ expect(screen.getByText('Simone VEILLE')).toBeInTheDocument()
+ expect(screen.getByRole('button')).toBeInTheDocument()
+ expect(screen.queryAllByRole('dialog').length).toBeFalsy()
})
- it('should display ChallengeNoFluidModal when launching challenge without configured fluid', () => {
- const wrapper = mount(
+ it('should display ChallengeNoFluidModal when launching challenge without configured fluid', async () => {
+ render(
<Provider store={store}>
<ChallengeCardUnlocked userChallenge={userChallengeData[0]} />
</Provider>
)
- wrapper.find('.btnPrimaryNegative').first().simulate('click')
- expect(wrapper.find(ChallengeNoFluidModal).exists()).toBeTruthy()
- expect(wrapper.find(ChallengeNoFluidModal).prop('open')).toBeTruthy()
+ await userEvent.click(screen.getByRole('button'))
+ expect(screen.queryAllByRole('dialog').length).toBeTruthy()
})
- it('should not display ChallengeNoFluidModal and update userChallenge when launching challenge with configured fluid', () => {
+ it('should not display ChallengeNoFluidModal and update userChallenge when launching challenge with configured fluid', async () => {
const store = createMockEcolyoStore({
global: {
fluidTypes: [FluidType.ELECTRICITY],
@@ -58,18 +53,17 @@ describe('ChallengeCardUnlocked component', () => {
},
challenge: mockChallengeState,
})
- const wrapper = mount(
+ render(
<Provider store={store}>
<ChallengeCardUnlocked userChallenge={userChallengeData[0]} />
</Provider>
)
- wrapper.find('.btnPrimaryNegative').first().simulate('click')
- expect(wrapper.find(ChallengeNoFluidModal).exists()).toBeTruthy()
- expect(wrapper.find(ChallengeNoFluidModal).prop('open')).toBeFalsy()
+ await userEvent.click(screen.getByRole('button'))
+ expect(screen.queryAllByRole('dialog').length).toBeFalsy()
expect(mockStartUserChallenge).toHaveBeenCalledWith(userChallengeData[0])
})
- it('should not be able to launch challenge if another one is active', () => {
+ it('should not be able to launch challenge if another one is active', async () => {
const store = createMockEcolyoStore({
global: mockGlobalState,
challenge: {
@@ -77,13 +71,12 @@ describe('ChallengeCardUnlocked component', () => {
currentChallenge: userChallengeData[1],
},
})
- const wrapper = mount(
+ render(
<Provider store={store}>
<ChallengeCardUnlocked userChallenge={userChallengeData[0]} />
</Provider>
)
- waitForComponentToPaint(wrapper)
- const resetButton = wrapper.find(Button).last()
- expect(resetButton.prop('disabled')).toBe(true)
+ const resetButton = screen.getByRole('button')
+ expect(resetButton).toHaveAttribute('disabled')
})
})
diff --git a/src/components/Challenge/ChallengeNoFluidModal/ChallengeNoFluidModal.spec.tsx b/src/components/Challenge/ChallengeNoFluidModal/ChallengeNoFluidModal.spec.tsx
index 310572994..a31250957 100644
--- a/src/components/Challenge/ChallengeNoFluidModal/ChallengeNoFluidModal.spec.tsx
+++ b/src/components/Challenge/ChallengeNoFluidModal/ChallengeNoFluidModal.spec.tsx
@@ -1,13 +1,13 @@
-import { shallow } from 'enzyme'
+import { render, screen } from '@testing-library/react'
import React from 'react'
import ChallengeNoFluidModal from './ChallengeNoFluidModal'
describe('ChallengeNoFluidModal component', () => {
it('should be rendered correctly opened', () => {
- const handleClose = jest.fn()
- const component = shallow(
- <ChallengeNoFluidModal open={true} handleCloseClick={handleClose} />
- ).getElement()
- expect(component).toMatchSnapshot()
+ const { baseElement } = render(
+ <ChallengeNoFluidModal open={true} handleCloseClick={jest.fn()} />
+ )
+ expect(baseElement).toMatchSnapshot()
+ expect(screen.getByRole('dialog')).toBeInTheDocument()
})
})
diff --git a/src/components/Challenge/ChallengeNoFluidModal/__snapshots__/ChallengeNoFluidModal.spec.tsx.snap b/src/components/Challenge/ChallengeNoFluidModal/__snapshots__/ChallengeNoFluidModal.spec.tsx.snap
index ea6611f7d..7c16ed69c 100644
--- a/src/components/Challenge/ChallengeNoFluidModal/__snapshots__/ChallengeNoFluidModal.spec.tsx.snap
+++ b/src/components/Challenge/ChallengeNoFluidModal/__snapshots__/ChallengeNoFluidModal.spec.tsx.snap
@@ -1,43 +1,77 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`ChallengeNoFluidModal component should be rendered correctly opened 1`] = `
-<WithStyles(ForwardRef(Dialog))
- aria-labelledby="accessibility-title"
- classes={
- Object {
- "paper": "modal-paper",
- "root": "modal-root",
- }
- }
- disableEscapeKeyDown={true}
- onClose={[Function]}
- open={true}
+<body
+ style="padding-right: 0px; overflow: hidden;"
>
<div
- id="accessibility-title"
- >
- challenge_no_fluid_modal.accessibility.window_title
- </div>
+ aria-hidden="true"
+ />
<div
- className="noFluidModal"
+ class="MuiDialog-root modal-root"
+ role="presentation"
+ style="position: fixed; z-index: 1300; right: 0px; bottom: 0px; top: 0px; left: 0px;"
>
<div
- className="no-fluid-title"
- >
- challenge_no_fluid_modal.title
- </div>
+ aria-hidden="true"
+ class="MuiBackdrop-root"
+ style="opacity: 1; webkit-transition: opacity 225ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; transition: opacity 225ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;"
+ />
<div
- className="no-fluid-content"
+ data-test="sentinelStart"
+ tabindex="0"
+ />
+ <div
+ class="MuiDialog-container MuiDialog-scrollPaper"
+ role="none presentation"
+ style="opacity: 1; webkit-transition: opacity 225ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; transition: opacity 225ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;"
+ tabindex="-1"
>
- challenge_no_fluid_modal.content
+ <div
+ aria-labelledby="accessibility-title"
+ class="MuiPaper-root MuiDialog-paper modal-paper MuiDialog-paperScrollPaper MuiDialog-paperWidthSm MuiPaper-elevation24 MuiPaper-rounded"
+ role="dialog"
+ >
+ <div
+ id="accessibility-title"
+ >
+ challenge_no_fluid_modal.accessibility.window_title
+ </div>
+ <div
+ class="noFluidModal"
+ >
+ <div
+ class="no-fluid-title"
+ >
+ challenge_no_fluid_modal.title
+ </div>
+ <div
+ class="no-fluid-content"
+ >
+ challenge_no_fluid_modal.content
+ </div>
+ <button
+ aria-label="challenge_no_fluid_modal.accessibility.button_validate"
+ class="MuiButtonBase-root MuiButton-root MuiButton-text btnSecondary"
+ tabindex="0"
+ type="button"
+ >
+ <span
+ class="MuiButton-label"
+ >
+ challenge_no_fluid_modal.button_validate
+ </span>
+ <span
+ class="MuiTouchRipple-root"
+ />
+ </button>
+ </div>
+ </div>
</div>
- <WithStyles(ForwardRef(Button))
- aria-label="challenge_no_fluid_modal.accessibility.button_validate"
- className="btnSecondary"
- onClick={[MockFunction]}
- >
- challenge_no_fluid_modal.button_validate
- </WithStyles(ForwardRef(Button))>
+ <div
+ data-test="sentinelEnd"
+ tabindex="0"
+ />
</div>
-</WithStyles(ForwardRef(Dialog))>
+</body>
`;
diff --git a/src/components/Challenge/ChallengeView.spec.tsx b/src/components/Challenge/ChallengeView.spec.tsx
index 1d8f8cb1a..91d1abd66 100644
--- a/src/components/Challenge/ChallengeView.spec.tsx
+++ b/src/components/Challenge/ChallengeView.spec.tsx
@@ -1,6 +1,5 @@
+import { render } from '@testing-library/react'
import ChallengeView from 'components/Challenge/ChallengeView'
-import { mount } from 'enzyme'
-import toJson from 'enzyme-to-json'
import React from 'react'
import { Provider } from 'react-redux'
import { challengeStateDataFull } from 'tests/__mocks__/challengeStateData.mock'
@@ -24,12 +23,11 @@ describe('ChallengeView component', () => {
})
it('should be rendered correctly', () => {
- const wrapper = mount(
+ const { container } = render(
<Provider store={store}>
<ChallengeView />
</Provider>
)
-
- expect(toJson(wrapper)).toMatchSnapshot()
+ expect(container).toMatchSnapshot()
})
})
diff --git a/src/components/Challenge/__snapshots__/ChallengeView.spec.tsx.snap b/src/components/Challenge/__snapshots__/ChallengeView.spec.tsx.snap
index 7736d9c4a..3f3366ca5 100644
--- a/src/components/Challenge/__snapshots__/ChallengeView.spec.tsx.snap
+++ b/src/components/Challenge/__snapshots__/ChallengeView.spec.tsx.snap
@@ -1,1256 +1,119 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`ChallengeView component should be rendered correctly 1`] = `
-<Provider
- store={
- Object {
- "clearActions": [Function],
- "dispatch": [Function],
- "getActions": [Function],
- "getState": [Function],
- "replaceReducer": [Function],
- "subscribe": [Function],
- }
- }
->
- <ChallengeView>
- <mock-cozybar
- titleKey="common.title_challenge"
- />
- <mock-header
- desktopTitleKey="common.title_challenge"
- setHeaderHeight={[Function]}
- />
- <mock-content
- heightOffset={0}
+<div>
+ <mock-cozybar
+ titlekey="common.title_challenge"
+ />
+ <mock-header
+ desktoptitlekey="common.title_challenge"
+ />
+ <mock-content
+ heightoffset="0"
+ >
+ <div
+ class="challengeSlider"
>
<div
- className="challengeSlider"
- onClick={[Function]}
- onMouseDown={[Function]}
- onMouseMove={[Function]}
- onMouseUp={[Function]}
- onTouchEnd={[Function]}
- onTouchMove={[Function]}
- onTouchStart={[Function]}
+ class="challenge-container"
+ style="transform: translateX(-586px);"
>
- <div
- className="challenge-container"
- style={
- Object {
- "transform": "translateX(-586px)",
- }
- }
- >
- <mock-challengecard
- cardHeight={499.20000000000005}
- cardWidth={285}
- index={0}
- indexSlider={2}
- key="CHALLENGE0001"
- moveToSlide={[Function]}
- userChallenge={
- Object {
- "action": Object {
- "ecogesture": null,
- "startDate": null,
- "state": 0,
- },
- "description": "Description challenge 1",
- "duel": Object {
- "description": "Je parie un ours polaire que vous ne pouvez pas consommer moins que #CONSUMPTION € en 1 semaine",
- "duration": "P30D",
- "fluidTypes": Array [],
- "id": "DUEL001",
- "startDate": null,
- "state": 0,
- "threshold": 0,
- "title": "Title DUEL001",
- "userConsumption": 0,
- },
- "endingDate": null,
- "exploration": Object {
- "complementary_description": "Refaire un tour dans son profil si déjà fait",
- "date": null,
- "description": "Avoir complété son profil",
- "ecogesture_id": "",
- "fluid_condition": Array [],
- "id": "EXPLORATION001",
- "message_success": "Vous avez complété votre profil ou refait un tour dans votre profil",
- "progress": 0,
- "state": 0,
- "target": 1,
- "type": 1,
- },
- "id": "CHALLENGE0001",
- "progress": Object {
- "actionProgress": 0,
- "explorationProgress": 0,
- "quizProgress": 0,
- },
- "quiz": Object {
- "customQuestion": Object {
- "interval": 20,
- "period": Object {},
- "questionLabel": "Custom1",
- "result": 0,
- "singleFluid": false,
- "timeStep": 20,
- "type": 0,
- },
- "id": "QUIZ001",
- "questions": Array [
- Object {
- "answers": Array [
- Object {
- "answerLabel": "86 km",
- "isTrue": true,
- },
- Object {
- "answerLabel": "78 km",
- "isTrue": false,
- },
- Object {
- "answerLabel": "56 km",
- "isTrue": false,
- },
- ],
- "explanation": "L’aqueduc du Gier est un des aqueducs antiques de Lyon desservant la ville antique de Lugdunum. Avec ses 86 km il est le plus long des quatre aqueducs ayant alimenté la ville en eau, et celui dont les structures sont le mieux conservées. Il doit son nom au fait qu'il puise aux sources du Gier, affluent du Rhône",
- "questionLabel": "Quelle longueur faisait l’aqueduc du Gier pour acheminer l’eau sur Lyon à l’époque romaine ?",
- "result": 0,
- "source": "string",
- },
- Object {
- "answers": Array [
- Object {
- "answerLabel": "1 point d’eau public pour 800 habitants.",
- "isTrue": true,
- },
- Object {
- "answerLabel": "1 point d’eau public pour 400 habitants.",
- "isTrue": false,
- },
- Object {
- "answerLabel": "1 point d’eau public pour 200 habitants.",
- "isTrue": false,
- },
- ],
- "explanation": "string",
- "questionLabel": "En 1800 à Lyon, combien de points d'eau y avait-il par habitants ?",
- "result": 0,
- "source": "string",
- },
- Object {
- "answers": Array [
- Object {
- "answerLabel": "François Mitterrand",
- "isTrue": false,
- },
- Object {
- "answerLabel": "Napoléon Ier",
- "isTrue": true,
- },
- Object {
- "answerLabel": "Napoléon III",
- "isTrue": false,
- },
- ],
- "explanation": "string",
- "questionLabel": "Qui officialise la création de la Compagnie Générale des eaux ?",
- "result": 0,
- "source": "string",
- },
- Object {
- "answers": Array [
- Object {
- "answerLabel": "string",
- "isTrue": false,
- },
- Object {
- "answerLabel": "string",
- "isTrue": false,
- },
- Object {
- "answerLabel": "Aristide Dumont",
- "isTrue": true,
- },
- ],
- "explanation": "string",
- "questionLabel": "Quel ingénieur est à l’origine du projet d’alimentation en eau en 1856 ?",
- "result": 0,
- "source": "string",
- },
- ],
- "result": 0,
- "startDate": null,
- "state": 0,
- },
- "startDate": null,
- "state": 4,
- "success": 2,
- "target": 15,
- "title": "Challenge 1",
- }
- }
- />
- <mock-challengecard
- cardHeight={499.20000000000005}
- cardWidth={285}
- index={1}
- indexSlider={2}
- key="CHALLENGE0002"
- moveToSlide={[Function]}
- userChallenge={
- Object {
- "action": Object {
- "ecogesture": null,
- "startDate": null,
- "state": 0,
- },
- "description": "Description challenge 2",
- "duel": Object {
- "description": "Je parie un ours polaire que vous ne pouvez pas consommer moins que #CONSUMPTION € en 1 semaine",
- "duration": "P30D",
- "fluidTypes": Array [],
- "id": "DUEL001",
- "startDate": null,
- "state": 0,
- "threshold": 0,
- "title": "Title DUEL001",
- "userConsumption": 0,
- },
- "endingDate": null,
- "exploration": Object {
- "complementary_description": "Refaire un tour dans son profil si déjà fait",
- "date": null,
- "description": "Avoir complété son profil",
- "ecogesture_id": "",
- "fluid_condition": Array [],
- "id": "EXPLORATION001",
- "message_success": "Vous avez complété votre profil ou refait un tour dans votre profil",
- "progress": 0,
- "state": 0,
- "target": 1,
- "type": 1,
- },
- "id": "CHALLENGE0002",
- "progress": Object {
- "actionProgress": 0,
- "explorationProgress": 0,
- "quizProgress": 0,
- },
- "quiz": Object {
- "customQuestion": Object {
- "interval": 20,
- "period": Object {},
- "questionLabel": "Custom1",
- "result": 0,
- "singleFluid": false,
- "timeStep": 20,
- "type": 0,
- },
- "id": "QUIZ001",
- "questions": Array [
- Object {
- "answers": Array [
- Object {
- "answerLabel": "86 km",
- "isTrue": true,
- },
- Object {
- "answerLabel": "78 km",
- "isTrue": false,
- },
- Object {
- "answerLabel": "56 km",
- "isTrue": false,
- },
- ],
- "explanation": "L’aqueduc du Gier est un des aqueducs antiques de Lyon desservant la ville antique de Lugdunum. Avec ses 86 km il est le plus long des quatre aqueducs ayant alimenté la ville en eau, et celui dont les structures sont le mieux conservées. Il doit son nom au fait qu'il puise aux sources du Gier, affluent du Rhône",
- "questionLabel": "Quelle longueur faisait l’aqueduc du Gier pour acheminer l’eau sur Lyon à l’époque romaine ?",
- "result": 0,
- "source": "string",
- },
- Object {
- "answers": Array [
- Object {
- "answerLabel": "1 point d’eau public pour 800 habitants.",
- "isTrue": true,
- },
- Object {
- "answerLabel": "1 point d’eau public pour 400 habitants.",
- "isTrue": false,
- },
- Object {
- "answerLabel": "1 point d’eau public pour 200 habitants.",
- "isTrue": false,
- },
- ],
- "explanation": "string",
- "questionLabel": "En 1800 à Lyon, combien de points d'eau y avait-il par habitants ?",
- "result": 0,
- "source": "string",
- },
- Object {
- "answers": Array [
- Object {
- "answerLabel": "François Mitterrand",
- "isTrue": false,
- },
- Object {
- "answerLabel": "Napoléon Ier",
- "isTrue": true,
- },
- Object {
- "answerLabel": "Napoléon III",
- "isTrue": false,
- },
- ],
- "explanation": "string",
- "questionLabel": "Qui officialise la création de la Compagnie Générale des eaux ?",
- "result": 0,
- "source": "string",
- },
- Object {
- "answers": Array [
- Object {
- "answerLabel": "string",
- "isTrue": false,
- },
- Object {
- "answerLabel": "string",
- "isTrue": false,
- },
- Object {
- "answerLabel": "Aristide Dumont",
- "isTrue": true,
- },
- ],
- "explanation": "string",
- "questionLabel": "Quel ingénieur est à l’origine du projet d’alimentation en eau en 1856 ?",
- "result": 0,
- "source": "string",
- },
- ],
- "result": 0,
- "startDate": null,
- "state": 0,
- },
- "startDate": null,
- "state": 4,
- "success": 1,
- "target": 15,
- "title": "Challenge 2",
- }
- }
- />
- <mock-challengecard
- cardHeight={499.20000000000005}
- cardWidth={285}
- index={2}
- indexSlider={2}
- key="CHALLENGE0003"
- moveToSlide={[Function]}
- userChallenge={
- Object {
- "action": Object {
- "ecogesture": null,
- "startDate": null,
- "state": 0,
- },
- "description": "Description challenge 3",
- "duel": Object {
- "description": "Je parie un ours polaire que vous ne pouvez pas consommer moins que #CONSUMPTION € en 1 semaine",
- "duration": "P30D",
- "fluidTypes": Array [],
- "id": "DUEL001",
- "startDate": null,
- "state": 0,
- "threshold": 0,
- "title": "Title DUEL001",
- "userConsumption": 0,
- },
- "endingDate": null,
- "exploration": Object {
- "complementary_description": "Refaire un tour dans son profil si déjà fait",
- "date": null,
- "description": "Avoir complété son profil",
- "ecogesture_id": "",
- "fluid_condition": Array [],
- "id": "EXPLORATION001",
- "message_success": "Vous avez complété votre profil ou refait un tour dans votre profil",
- "progress": 0,
- "state": 0,
- "target": 1,
- "type": 1,
- },
- "id": "CHALLENGE0003",
- "progress": Object {
- "actionProgress": 0,
- "explorationProgress": 0,
- "quizProgress": 0,
- },
- "quiz": Object {
- "customQuestion": Object {
- "interval": 20,
- "period": Object {},
- "questionLabel": "Custom1",
- "result": 0,
- "singleFluid": false,
- "timeStep": 20,
- "type": 0,
- },
- "id": "QUIZ001",
- "questions": Array [
- Object {
- "answers": Array [
- Object {
- "answerLabel": "86 km",
- "isTrue": true,
- },
- Object {
- "answerLabel": "78 km",
- "isTrue": false,
- },
- Object {
- "answerLabel": "56 km",
- "isTrue": false,
- },
- ],
- "explanation": "L’aqueduc du Gier est un des aqueducs antiques de Lyon desservant la ville antique de Lugdunum. Avec ses 86 km il est le plus long des quatre aqueducs ayant alimenté la ville en eau, et celui dont les structures sont le mieux conservées. Il doit son nom au fait qu'il puise aux sources du Gier, affluent du Rhône",
- "questionLabel": "Quelle longueur faisait l’aqueduc du Gier pour acheminer l’eau sur Lyon à l’époque romaine ?",
- "result": 0,
- "source": "string",
- },
- Object {
- "answers": Array [
- Object {
- "answerLabel": "1 point d’eau public pour 800 habitants.",
- "isTrue": true,
- },
- Object {
- "answerLabel": "1 point d’eau public pour 400 habitants.",
- "isTrue": false,
- },
- Object {
- "answerLabel": "1 point d’eau public pour 200 habitants.",
- "isTrue": false,
- },
- ],
- "explanation": "string",
- "questionLabel": "En 1800 à Lyon, combien de points d'eau y avait-il par habitants ?",
- "result": 0,
- "source": "string",
- },
- Object {
- "answers": Array [
- Object {
- "answerLabel": "François Mitterrand",
- "isTrue": false,
- },
- Object {
- "answerLabel": "Napoléon Ier",
- "isTrue": true,
- },
- Object {
- "answerLabel": "Napoléon III",
- "isTrue": false,
- },
- ],
- "explanation": "string",
- "questionLabel": "Qui officialise la création de la Compagnie Générale des eaux ?",
- "result": 0,
- "source": "string",
- },
- Object {
- "answers": Array [
- Object {
- "answerLabel": "string",
- "isTrue": false,
- },
- Object {
- "answerLabel": "string",
- "isTrue": false,
- },
- Object {
- "answerLabel": "Aristide Dumont",
- "isTrue": true,
- },
- ],
- "explanation": "string",
- "questionLabel": "Quel ingénieur est à l’origine du projet d’alimentation en eau en 1856 ?",
- "result": 0,
- "source": "string",
- },
- ],
- "result": 0,
- "startDate": null,
- "state": 0,
- },
- "startDate": null,
- "state": 2,
- "success": 0,
- "target": 15,
- "title": "Challenge 3",
- }
- }
- />
- <mock-challengecard
- cardHeight={499.20000000000005}
- cardWidth={285}
- index={3}
- indexSlider={2}
- key="CHALLENGE0004"
- moveToSlide={[Function]}
- userChallenge={
- Object {
- "action": Object {
- "ecogesture": null,
- "startDate": null,
- "state": 0,
- },
- "description": "Description challenge 4",
- "duel": Object {
- "description": "Je parie un ours polaire que vous ne pouvez pas consommer moins que #CONSUMPTION € en 1 semaine",
- "duration": "P30D",
- "fluidTypes": Array [],
- "id": "DUEL001",
- "startDate": null,
- "state": 0,
- "threshold": 0,
- "title": "Title DUEL001",
- "userConsumption": 0,
- },
- "endingDate": null,
- "exploration": Object {
- "complementary_description": "Refaire un tour dans son profil si déjà fait",
- "date": null,
- "description": "Avoir complété son profil",
- "ecogesture_id": "",
- "fluid_condition": Array [],
- "id": "EXPLORATION001",
- "message_success": "Vous avez complété votre profil ou refait un tour dans votre profil",
- "progress": 0,
- "state": 0,
- "target": 1,
- "type": 1,
- },
- "id": "CHALLENGE0004",
- "progress": Object {
- "actionProgress": 0,
- "explorationProgress": 0,
- "quizProgress": 0,
- },
- "quiz": Object {
- "customQuestion": Object {
- "interval": 20,
- "period": Object {},
- "questionLabel": "Custom1",
- "result": 0,
- "singleFluid": false,
- "timeStep": 20,
- "type": 0,
- },
- "id": "QUIZ001",
- "questions": Array [
- Object {
- "answers": Array [
- Object {
- "answerLabel": "86 km",
- "isTrue": true,
- },
- Object {
- "answerLabel": "78 km",
- "isTrue": false,
- },
- Object {
- "answerLabel": "56 km",
- "isTrue": false,
- },
- ],
- "explanation": "L’aqueduc du Gier est un des aqueducs antiques de Lyon desservant la ville antique de Lugdunum. Avec ses 86 km il est le plus long des quatre aqueducs ayant alimenté la ville en eau, et celui dont les structures sont le mieux conservées. Il doit son nom au fait qu'il puise aux sources du Gier, affluent du Rhône",
- "questionLabel": "Quelle longueur faisait l’aqueduc du Gier pour acheminer l’eau sur Lyon à l’époque romaine ?",
- "result": 0,
- "source": "string",
- },
- Object {
- "answers": Array [
- Object {
- "answerLabel": "1 point d’eau public pour 800 habitants.",
- "isTrue": true,
- },
- Object {
- "answerLabel": "1 point d’eau public pour 400 habitants.",
- "isTrue": false,
- },
- Object {
- "answerLabel": "1 point d’eau public pour 200 habitants.",
- "isTrue": false,
- },
- ],
- "explanation": "string",
- "questionLabel": "En 1800 à Lyon, combien de points d'eau y avait-il par habitants ?",
- "result": 0,
- "source": "string",
- },
- Object {
- "answers": Array [
- Object {
- "answerLabel": "François Mitterrand",
- "isTrue": false,
- },
- Object {
- "answerLabel": "Napoléon Ier",
- "isTrue": true,
- },
- Object {
- "answerLabel": "Napoléon III",
- "isTrue": false,
- },
- ],
- "explanation": "string",
- "questionLabel": "Qui officialise la création de la Compagnie Générale des eaux ?",
- "result": 0,
- "source": "string",
- },
- Object {
- "answers": Array [
- Object {
- "answerLabel": "string",
- "isTrue": false,
- },
- Object {
- "answerLabel": "string",
- "isTrue": false,
- },
- Object {
- "answerLabel": "Aristide Dumont",
- "isTrue": true,
- },
- ],
- "explanation": "string",
- "questionLabel": "Quel ingénieur est à l’origine du projet d’alimentation en eau en 1856 ?",
- "result": 0,
- "source": "string",
- },
- ],
- "result": 0,
- "startDate": null,
- "state": 0,
- },
- "startDate": null,
- "state": 1,
- "success": 0,
- "target": 15,
- "title": "Challenge 4",
- }
- }
- />
- <mock-challengecard
- cardHeight={499.20000000000005}
- cardWidth={285}
- index={4}
- indexSlider={2}
- key="CHALLENGE0005"
- moveToSlide={[Function]}
- userChallenge={
- Object {
- "action": Object {
- "ecogesture": null,
- "startDate": null,
- "state": 0,
- },
- "description": "Description challenge 5",
- "duel": Object {
- "description": "Je parie un ours polaire que vous ne pouvez pas consommer moins que #CONSUMPTION € en 1 semaine",
- "duration": "P30D",
- "fluidTypes": Array [],
- "id": "DUEL001",
- "startDate": null,
- "state": 0,
- "threshold": 0,
- "title": "Title DUEL001",
- "userConsumption": 0,
- },
- "endingDate": null,
- "exploration": Object {
- "complementary_description": "Refaire un tour dans son profil si déjà fait",
- "date": null,
- "description": "Avoir complété son profil",
- "ecogesture_id": "",
- "fluid_condition": Array [],
- "id": "EXPLORATION001",
- "message_success": "Vous avez complété votre profil ou refait un tour dans votre profil",
- "progress": 0,
- "state": 0,
- "target": 1,
- "type": 1,
- },
- "id": "CHALLENGE0005",
- "progress": Object {
- "actionProgress": 0,
- "explorationProgress": 0,
- "quizProgress": 0,
- },
- "quiz": Object {
- "customQuestion": Object {
- "interval": 20,
- "period": Object {},
- "questionLabel": "Custom1",
- "result": 0,
- "singleFluid": false,
- "timeStep": 20,
- "type": 0,
- },
- "id": "QUIZ001",
- "questions": Array [
- Object {
- "answers": Array [
- Object {
- "answerLabel": "86 km",
- "isTrue": true,
- },
- Object {
- "answerLabel": "78 km",
- "isTrue": false,
- },
- Object {
- "answerLabel": "56 km",
- "isTrue": false,
- },
- ],
- "explanation": "L’aqueduc du Gier est un des aqueducs antiques de Lyon desservant la ville antique de Lugdunum. Avec ses 86 km il est le plus long des quatre aqueducs ayant alimenté la ville en eau, et celui dont les structures sont le mieux conservées. Il doit son nom au fait qu'il puise aux sources du Gier, affluent du Rhône",
- "questionLabel": "Quelle longueur faisait l’aqueduc du Gier pour acheminer l’eau sur Lyon à l’époque romaine ?",
- "result": 0,
- "source": "string",
- },
- Object {
- "answers": Array [
- Object {
- "answerLabel": "1 point d’eau public pour 800 habitants.",
- "isTrue": true,
- },
- Object {
- "answerLabel": "1 point d’eau public pour 400 habitants.",
- "isTrue": false,
- },
- Object {
- "answerLabel": "1 point d’eau public pour 200 habitants.",
- "isTrue": false,
- },
- ],
- "explanation": "string",
- "questionLabel": "En 1800 à Lyon, combien de points d'eau y avait-il par habitants ?",
- "result": 0,
- "source": "string",
- },
- Object {
- "answers": Array [
- Object {
- "answerLabel": "François Mitterrand",
- "isTrue": false,
- },
- Object {
- "answerLabel": "Napoléon Ier",
- "isTrue": true,
- },
- Object {
- "answerLabel": "Napoléon III",
- "isTrue": false,
- },
- ],
- "explanation": "string",
- "questionLabel": "Qui officialise la création de la Compagnie Générale des eaux ?",
- "result": 0,
- "source": "string",
- },
- Object {
- "answers": Array [
- Object {
- "answerLabel": "string",
- "isTrue": false,
- },
- Object {
- "answerLabel": "string",
- "isTrue": false,
- },
- Object {
- "answerLabel": "Aristide Dumont",
- "isTrue": true,
- },
- ],
- "explanation": "string",
- "questionLabel": "Quel ingénieur est à l’origine du projet d’alimentation en eau en 1856 ?",
- "result": 0,
- "source": "string",
- },
- ],
- "result": 0,
- "startDate": null,
- "state": 0,
- },
- "startDate": null,
- "state": 0,
- "success": 0,
- "target": 15,
- "title": "Challenge 5",
- }
- }
- />
- <mock-challengecard
- cardHeight={499.20000000000005}
- cardWidth={285}
- index={5}
- indexSlider={2}
- key="CHALLENGE0006"
- moveToSlide={[Function]}
- userChallenge={
- Object {
- "action": Object {
- "ecogesture": null,
- "startDate": null,
- "state": 0,
- },
- "description": "Description challenge 6",
- "duel": Object {
- "description": "Je parie un ours polaire que vous ne pouvez pas consommer moins que #CONSUMPTION € en 1 semaine",
- "duration": "P30D",
- "fluidTypes": Array [],
- "id": "DUEL001",
- "startDate": null,
- "state": 0,
- "threshold": 0,
- "title": "Title DUEL001",
- "userConsumption": 0,
- },
- "endingDate": null,
- "exploration": Object {
- "complementary_description": "Refaire un tour dans son profil si déjà fait",
- "date": null,
- "description": "Avoir complété son profil",
- "ecogesture_id": "",
- "fluid_condition": Array [],
- "id": "EXPLORATION001",
- "message_success": "Vous avez complété votre profil ou refait un tour dans votre profil",
- "progress": 0,
- "state": 0,
- "target": 1,
- "type": 1,
- },
- "id": "CHALLENGE0006",
- "progress": Object {
- "actionProgress": 0,
- "explorationProgress": 0,
- "quizProgress": 0,
- },
- "quiz": Object {
- "customQuestion": Object {
- "interval": 20,
- "period": Object {},
- "questionLabel": "Custom1",
- "result": 0,
- "singleFluid": false,
- "timeStep": 20,
- "type": 0,
- },
- "id": "QUIZ001",
- "questions": Array [
- Object {
- "answers": Array [
- Object {
- "answerLabel": "86 km",
- "isTrue": true,
- },
- Object {
- "answerLabel": "78 km",
- "isTrue": false,
- },
- Object {
- "answerLabel": "56 km",
- "isTrue": false,
- },
- ],
- "explanation": "L’aqueduc du Gier est un des aqueducs antiques de Lyon desservant la ville antique de Lugdunum. Avec ses 86 km il est le plus long des quatre aqueducs ayant alimenté la ville en eau, et celui dont les structures sont le mieux conservées. Il doit son nom au fait qu'il puise aux sources du Gier, affluent du Rhône",
- "questionLabel": "Quelle longueur faisait l’aqueduc du Gier pour acheminer l’eau sur Lyon à l’époque romaine ?",
- "result": 0,
- "source": "string",
- },
- Object {
- "answers": Array [
- Object {
- "answerLabel": "1 point d’eau public pour 800 habitants.",
- "isTrue": true,
- },
- Object {
- "answerLabel": "1 point d’eau public pour 400 habitants.",
- "isTrue": false,
- },
- Object {
- "answerLabel": "1 point d’eau public pour 200 habitants.",
- "isTrue": false,
- },
- ],
- "explanation": "string",
- "questionLabel": "En 1800 à Lyon, combien de points d'eau y avait-il par habitants ?",
- "result": 0,
- "source": "string",
- },
- Object {
- "answers": Array [
- Object {
- "answerLabel": "François Mitterrand",
- "isTrue": false,
- },
- Object {
- "answerLabel": "Napoléon Ier",
- "isTrue": true,
- },
- Object {
- "answerLabel": "Napoléon III",
- "isTrue": false,
- },
- ],
- "explanation": "string",
- "questionLabel": "Qui officialise la création de la Compagnie Générale des eaux ?",
- "result": 0,
- "source": "string",
- },
- Object {
- "answers": Array [
- Object {
- "answerLabel": "string",
- "isTrue": false,
- },
- Object {
- "answerLabel": "string",
- "isTrue": false,
- },
- Object {
- "answerLabel": "Aristide Dumont",
- "isTrue": true,
- },
- ],
- "explanation": "string",
- "questionLabel": "Quel ingénieur est à l’origine du projet d’alimentation en eau en 1856 ?",
- "result": 0,
- "source": "string",
- },
- ],
- "result": 0,
- "startDate": null,
- "state": 0,
- },
- "startDate": null,
- "state": 0,
- "success": 0,
- "target": 15,
- "title": "Challenge 6",
- }
- }
- />
- </div>
+ <mock-challengecard
+ cardheight="499.20000000000005"
+ cardwidth="285"
+ index="0"
+ indexslider="2"
+ userchallenge="[object Object]"
+ />
+ <mock-challengecard
+ cardheight="499.20000000000005"
+ cardwidth="285"
+ index="1"
+ indexslider="2"
+ userchallenge="[object Object]"
+ />
+ <mock-challengecard
+ cardheight="499.20000000000005"
+ cardwidth="285"
+ index="2"
+ indexslider="2"
+ userchallenge="[object Object]"
+ />
+ <mock-challengecard
+ cardheight="499.20000000000005"
+ cardwidth="285"
+ index="3"
+ indexslider="2"
+ userchallenge="[object Object]"
+ />
+ <mock-challengecard
+ cardheight="499.20000000000005"
+ cardwidth="285"
+ index="4"
+ indexslider="2"
+ userchallenge="[object Object]"
+ />
+ <mock-challengecard
+ cardheight="499.20000000000005"
+ cardwidth="285"
+ index="5"
+ indexslider="2"
+ userchallenge="[object Object]"
+ />
</div>
- <div
- className="sliderButtons"
+ </div>
+ <div
+ class="sliderButtons"
+ >
+ <button
+ aria-label="challenge.accessibility.button_slider_previous"
+ class="MuiButtonBase-root MuiIconButton-root WithStyles(ForwardRef(IconButton))-root-1"
+ tabindex="0"
+ type="button"
>
- <StyledIconButton
- aria-label="challenge.accessibility.button_slider_previous"
- icon="test-file-stub"
- onClick={[Function]}
- sized={16}
+ <span
+ class="MuiIconButton-label"
>
- <WithStyles(WithStyles(ForwardRef(IconButton)))
- aria-label="challenge.accessibility.button_slider_previous"
- onClick={[Function]}
+ <svg
+ aria-hidden="true"
+ class="styles__icon___23x3R"
+ height="16"
+ width="16"
>
- <WithStyles(ForwardRef(IconButton))
- aria-label="challenge.accessibility.button_slider_previous"
- classes={
- Object {
- "root": "WithStyles(ForwardRef(IconButton))-root-1",
- }
- }
- onClick={[Function]}
- >
- <ForwardRef(IconButton)
- aria-label="challenge.accessibility.button_slider_previous"
- classes={
- Object {
- "colorInherit": "MuiIconButton-colorInherit",
- "colorPrimary": "MuiIconButton-colorPrimary",
- "colorSecondary": "MuiIconButton-colorSecondary",
- "disabled": "Mui-disabled",
- "edgeEnd": "MuiIconButton-edgeEnd",
- "edgeStart": "MuiIconButton-edgeStart",
- "label": "MuiIconButton-label",
- "root": "MuiIconButton-root WithStyles(ForwardRef(IconButton))-root-1",
- "sizeSmall": "MuiIconButton-sizeSmall",
- }
- }
- onClick={[Function]}
- >
- <WithStyles(ForwardRef(ButtonBase))
- aria-label="challenge.accessibility.button_slider_previous"
- centerRipple={true}
- className="MuiIconButton-root WithStyles(ForwardRef(IconButton))-root-1"
- disabled={false}
- focusRipple={true}
- onClick={[Function]}
- >
- <ForwardRef(ButtonBase)
- aria-label="challenge.accessibility.button_slider_previous"
- centerRipple={true}
- className="MuiIconButton-root WithStyles(ForwardRef(IconButton))-root-1"
- classes={
- Object {
- "disabled": "Mui-disabled",
- "focusVisible": "Mui-focusVisible",
- "root": "MuiButtonBase-root",
- }
- }
- disabled={false}
- focusRipple={true}
- onClick={[Function]}
- >
- <button
- aria-label="challenge.accessibility.button_slider_previous"
- className="MuiButtonBase-root MuiIconButton-root WithStyles(ForwardRef(IconButton))-root-1"
- disabled={false}
- onBlur={[Function]}
- onClick={[Function]}
- onDragLeave={[Function]}
- onFocus={[Function]}
- onKeyDown={[Function]}
- onKeyUp={[Function]}
- onMouseDown={[Function]}
- onMouseLeave={[Function]}
- onMouseUp={[Function]}
- onTouchEnd={[Function]}
- onTouchMove={[Function]}
- onTouchStart={[Function]}
- tabIndex={0}
- type="button"
- >
- <span
- className="MuiIconButton-label"
- >
- <StyledIcon
- icon="test-file-stub"
- size={16}
- >
- <Icon
- aria-hidden={true}
- icon="test-file-stub"
- size={16}
- spin={false}
- >
- <Component
- aria-hidden={true}
- className="styles__icon___23x3R"
- height={16}
- style={Object {}}
- width={16}
- >
- <svg
- aria-hidden={true}
- className="styles__icon___23x3R"
- height={16}
- style={Object {}}
- width={16}
- >
- <use
- xlinkHref="#test-file-stub"
- />
- </svg>
- </Component>
- </Icon>
- </StyledIcon>
- </span>
- <WithStyles(memo)
- center={true}
- >
- <ForwardRef(TouchRipple)
- center={true}
- classes={
- Object {
- "child": "MuiTouchRipple-child",
- "childLeaving": "MuiTouchRipple-childLeaving",
- "childPulsate": "MuiTouchRipple-childPulsate",
- "ripple": "MuiTouchRipple-ripple",
- "ripplePulsate": "MuiTouchRipple-ripplePulsate",
- "rippleVisible": "MuiTouchRipple-rippleVisible",
- "root": "MuiTouchRipple-root",
- }
- }
- >
- <span
- className="MuiTouchRipple-root"
- >
- <TransitionGroup
- childFactory={[Function]}
- component={null}
- exit={true}
- />
- </span>
- </ForwardRef(TouchRipple)>
- </WithStyles(memo)>
- </button>
- </ForwardRef(ButtonBase)>
- </WithStyles(ForwardRef(ButtonBase))>
- </ForwardRef(IconButton)>
- </WithStyles(ForwardRef(IconButton))>
- </WithStyles(WithStyles(ForwardRef(IconButton)))>
- </StyledIconButton>
- <StyledIconButton
- aria-label="challenge.accessibility.button_slider_next"
- icon="test-file-stub"
- onClick={[Function]}
- sized={16}
+ <use
+ xlink:href="#test-file-stub"
+ />
+ </svg>
+ </span>
+ <span
+ class="MuiTouchRipple-root"
+ />
+ </button>
+ <button
+ aria-label="challenge.accessibility.button_slider_next"
+ class="MuiButtonBase-root MuiIconButton-root WithStyles(ForwardRef(IconButton))-root-1"
+ tabindex="0"
+ type="button"
+ >
+ <span
+ class="MuiIconButton-label"
>
- <WithStyles(WithStyles(ForwardRef(IconButton)))
- aria-label="challenge.accessibility.button_slider_next"
- onClick={[Function]}
+ <svg
+ aria-hidden="true"
+ class="styles__icon___23x3R"
+ height="16"
+ width="16"
>
- <WithStyles(ForwardRef(IconButton))
- aria-label="challenge.accessibility.button_slider_next"
- classes={
- Object {
- "root": "WithStyles(ForwardRef(IconButton))-root-1",
- }
- }
- onClick={[Function]}
- >
- <ForwardRef(IconButton)
- aria-label="challenge.accessibility.button_slider_next"
- classes={
- Object {
- "colorInherit": "MuiIconButton-colorInherit",
- "colorPrimary": "MuiIconButton-colorPrimary",
- "colorSecondary": "MuiIconButton-colorSecondary",
- "disabled": "Mui-disabled",
- "edgeEnd": "MuiIconButton-edgeEnd",
- "edgeStart": "MuiIconButton-edgeStart",
- "label": "MuiIconButton-label",
- "root": "MuiIconButton-root WithStyles(ForwardRef(IconButton))-root-1",
- "sizeSmall": "MuiIconButton-sizeSmall",
- }
- }
- onClick={[Function]}
- >
- <WithStyles(ForwardRef(ButtonBase))
- aria-label="challenge.accessibility.button_slider_next"
- centerRipple={true}
- className="MuiIconButton-root WithStyles(ForwardRef(IconButton))-root-1"
- disabled={false}
- focusRipple={true}
- onClick={[Function]}
- >
- <ForwardRef(ButtonBase)
- aria-label="challenge.accessibility.button_slider_next"
- centerRipple={true}
- className="MuiIconButton-root WithStyles(ForwardRef(IconButton))-root-1"
- classes={
- Object {
- "disabled": "Mui-disabled",
- "focusVisible": "Mui-focusVisible",
- "root": "MuiButtonBase-root",
- }
- }
- disabled={false}
- focusRipple={true}
- onClick={[Function]}
- >
- <button
- aria-label="challenge.accessibility.button_slider_next"
- className="MuiButtonBase-root MuiIconButton-root WithStyles(ForwardRef(IconButton))-root-1"
- disabled={false}
- onBlur={[Function]}
- onClick={[Function]}
- onDragLeave={[Function]}
- onFocus={[Function]}
- onKeyDown={[Function]}
- onKeyUp={[Function]}
- onMouseDown={[Function]}
- onMouseLeave={[Function]}
- onMouseUp={[Function]}
- onTouchEnd={[Function]}
- onTouchMove={[Function]}
- onTouchStart={[Function]}
- tabIndex={0}
- type="button"
- >
- <span
- className="MuiIconButton-label"
- >
- <StyledIcon
- icon="test-file-stub"
- size={16}
- >
- <Icon
- aria-hidden={true}
- icon="test-file-stub"
- size={16}
- spin={false}
- >
- <Component
- aria-hidden={true}
- className="styles__icon___23x3R"
- height={16}
- style={Object {}}
- width={16}
- >
- <svg
- aria-hidden={true}
- className="styles__icon___23x3R"
- height={16}
- style={Object {}}
- width={16}
- >
- <use
- xlinkHref="#test-file-stub"
- />
- </svg>
- </Component>
- </Icon>
- </StyledIcon>
- </span>
- <WithStyles(memo)
- center={true}
- >
- <ForwardRef(TouchRipple)
- center={true}
- classes={
- Object {
- "child": "MuiTouchRipple-child",
- "childLeaving": "MuiTouchRipple-childLeaving",
- "childPulsate": "MuiTouchRipple-childPulsate",
- "ripple": "MuiTouchRipple-ripple",
- "ripplePulsate": "MuiTouchRipple-ripplePulsate",
- "rippleVisible": "MuiTouchRipple-rippleVisible",
- "root": "MuiTouchRipple-root",
- }
- }
- >
- <span
- className="MuiTouchRipple-root"
- >
- <TransitionGroup
- childFactory={[Function]}
- component={null}
- exit={true}
- />
- </span>
- </ForwardRef(TouchRipple)>
- </WithStyles(memo)>
- </button>
- </ForwardRef(ButtonBase)>
- </WithStyles(ForwardRef(ButtonBase))>
- </ForwardRef(IconButton)>
- </WithStyles(ForwardRef(IconButton))>
- </WithStyles(WithStyles(ForwardRef(IconButton)))>
- </StyledIconButton>
- </div>
- </mock-content>
- </ChallengeView>
-</Provider>
+ <use
+ xlink:href="#test-file-stub"
+ />
+ </svg>
+ </span>
+ <span
+ class="MuiTouchRipple-root"
+ />
+ </button>
+ </div>
+ </mock-content>
+</div>
`;
diff --git a/yarn.lock b/yarn.lock
index 5560e50ac..2f3eba9d9 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -15915,17 +15915,7 @@ set-cookie-parser@^2.3.5:
resolved "https://registry.yarnpkg.com/set-cookie-parser/-/set-cookie-parser-2.5.0.tgz#96b59525e1362c94335c3c761100bb6e8f2da4b0"
integrity sha512-cHMAtSXilfyBePduZEBVPTCftTQWz6ehWJD5YNUg4mqvRosrrjKbo4WS8JkB0/RxonMoohHm7cOGH60mDkRQ9w==
-set-function-length@^1.1.1:
- version "1.1.1"
- resolved "https://registry.yarnpkg.com/set-function-length/-/set-function-length-1.1.1.tgz#4bc39fafb0307224a33e106a7d35ca1218d659ed"
- integrity sha512-VoaqjbBJKiWtg4yRcKBQ7g7wnGnLV3M8oLvVWwOk2PdYY6PEFegR1vezXR0tw6fZGF9csVakIRjrJiy2veSBFQ==
- dependencies:
- define-data-property "^1.1.1"
- get-intrinsic "^1.2.1"
- gopd "^1.0.1"
- has-property-descriptors "^1.0.0"
-
-set-function-name@^2.0.0, set-function-name@^2.0.1:
+set-function-name@^2.0.0:
version "2.0.1"
resolved "https://registry.yarnpkg.com/set-function-name/-/set-function-name-2.0.1.tgz#12ce38b7954310b9f61faa12701620a0c882793a"
integrity sha512-tMNCiqYVkXIZgc2Hnoy2IvC/f8ezc5koaRFkCjrpWzGpCd3qbZXPzVy9MAZzK1ch/X0jvSkojys3oqJN0qCmdA==
--
GitLab