diff --git a/src/components/Challenge/ChallengeCard/ChallengeCard.spec.tsx b/src/components/Challenge/ChallengeCard/ChallengeCard.spec.tsx
index 9c4a0a2f27cd73a15d69acde9b1ad4786a9582ee..ea845feaaeaefc81f429d2fff33ffb7bd367905b 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 146757e10e7a0afa620a3943624821d65b205f68..457e831873e25c8b68b34837237b03bc42e06aca 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 99f3ed4c387981df137672e7fec13ecf6c771127..56ef37bff49697a3fc05c852f9ef7586b8b3c7eb 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 8f627a3f52a24cea6ecf613fb56804a203e0a4c9..7df066b7f28a181089a3075beb5f502a88dba5ae 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 06e3e75844dbef58fd1dcb812e0fabc229ed50ea..17fb028e94d666557241b6bbe591b932a966472f 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 1f2d1bd3346b62ebdc82ddf3d78b16f6be7801bd..7d36624206fb1815aa9f10d018895ebf36b1e652 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 0cf83e9a1b06f17772d8146401b3366ac861c282..21d15c0f42361f2857c8ee9a12091ae9ca8dff21 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 fda39f814bb35524b8a1bbc95e8f9e1740ddfdea..8ca50446cc8afe7de841dca6da0ba37da65811b6 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 1d6e580a78ae6ef54c47062a317c4536572d1b73..7ac922efb3966c92c59af76cc516215f42c6f369 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 310572994d34e6d7e4e3a479e080c996d8c603fc..a31250957e1df1417544bdc548fda8e4853db64b 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 ea6611f7d2bbdd825204d8a944950365c38f0028..7c16ed69c5186f6b8d18e0afbcf400f827c2540a 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 1d8f8cb1abce23621b028e2b7b91bbe4d4f0db25..91d1abd6664a3c6325958722629811042e68ee57 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 7736d9c4a786f8ec1dd48586ae88ad01b4aefce4..3f3366ca5dc5e7798dbbe06ec4710fca25d1e5c3 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 5560e50acb345ea94fb7125fa623238cd080f9f1..2f3eba9d94c0ef07a46d8330542d8eebe29a10cf 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==