From d7d5a46a0f8c548df63d0abff137a25c5f85330a Mon Sep 17 00:00:00 2001
From: Bastien DUMONT <bdumont@grandlyon.com>
Date: Tue, 20 Jun 2023 07:49:14 +0000
Subject: [PATCH] chore: use correct snapshots
---
src/components/Action/ActionBegin.spec.tsx | 30 +-
src/components/Action/ActionCard.spec.tsx | 7 +-
src/components/Action/ActionChoose.spec.tsx | 7 +-
src/components/Action/ActionDone.spec.tsx | 13 +-
src/components/Action/ActionModal.spec.tsx | 13 +-
src/components/Action/ActionOnGoing.spec.tsx | 22 +-
src/components/Action/ActionView.spec.tsx | 7 +-
.../__snapshots__/ActionBegin.spec.tsx.snap | 1237 ++++++++++++++++-
.../__snapshots__/ActionCard.spec.tsx.snap | 615 +++++++-
.../__snapshots__/ActionChoose.spec.tsx.snap | 316 ++++-
.../__snapshots__/ActionDone.spec.tsx.snap | 360 ++++-
.../__snapshots__/ActionModal.spec.tsx.snap | 1186 +++++++++++++++-
.../__snapshots__/ActionOnGoing.spec.tsx.snap | 29 +-
.../__snapshots__/ActionView.spec.tsx.snap | 327 ++++-
.../Analysis/AnalysisConsumption.spec.tsx | 37 +-
.../Analysis/ElecHalfHourChart.spec.tsx | 5 +-
.../Analysis/MaxConsumptionCard.spec.tsx | 3 +-
src/components/Analysis/PieChart.spec.tsx | 5 +-
.../Analysis/TotalAnalysisChart.spec.tsx | 22 +-
.../ElecHalfHourChart.spec.tsx.snap | 264 +++-
.../MaxConsumptionCard.spec.tsx.snap | 531 ++++++-
.../__snapshots__/PieChart.spec.tsx.snap | 468 ++++++-
.../TotalAnalysisChart.spec.tsx.snap | 17 +-
.../Challenge/ChallengeCardLast.spec.tsx | 7 +-
.../ChallengeCardLast.spec.tsx.snap | 200 ++-
.../DataloadConsumptionVisualizer.spec.tsx | 41 +-
.../EstimatedConsumptionModal.spec.tsx | 7 +-
.../NoDataModal.spec.tsx | 7 +-
...ataloadConsumptionVisualizer.spec.tsx.snap | 479 ++++++-
.../EstimatedConsumptionModal.spec.tsx.snap | 903 +++++++++++-
.../__snapshots__/NoDataModal.spec.tsx.snap | 1079 +++++++++++++-
.../DateNavigator/DateNavigator.spec.tsx | 30 +-
.../__snapshots__/DateNavigator.spec.tsx.snap | 281 +++-
src/components/Duel/DuelOngoing.spec.tsx | 12 +-
src/components/Duel/DuelResultModal.spec.tsx | 15 +-
.../DuelResultModal.spec.tsx.snap | 1061 +++++++++++++-
.../__snapshots__/lastDuelModal.spec.tsx.snap | 780 ++++++++++-
src/components/Duel/lastDuelModal.spec.tsx | 10 +-
.../Ecogesture/EcogestureModal.spec.tsx | 7 +-
.../Feedback/FeedbackModal.spec.tsx | 7 +-
.../Home/ConsumptionDetails.spec.tsx | 7 +-
src/components/Home/FluidButton.spec.tsx | 9 +-
src/components/Home/FluidButtons.spec.tsx | 9 +-
.../ConsumptionDetails.spec.tsx.snap | 117 +-
.../__snapshots__/FluidButton.spec.tsx.snap | 46 +-
.../__snapshots__/FluidButtons.spec.tsx.snap | 207 ++-
.../Konnector/KonnectorViewerList.spec.tsx | 9 +-
.../KonnectorViewerList.spec.tsx.snap | 459 +++++-
src/components/Quiz/QuizFinish.spec.tsx | 7 +-
.../TimeStepSelector.spec.tsx | 7 +-
.../TimeStepSelector.spec.tsx.snap | 226 ++-
.../TotalConsumption.spec.tsx | 27 +-
52 files changed, 11331 insertions(+), 246 deletions(-)
diff --git a/src/components/Action/ActionBegin.spec.tsx b/src/components/Action/ActionBegin.spec.tsx
index 3de8d988d..6ea2ba74b 100644
--- a/src/components/Action/ActionBegin.spec.tsx
+++ b/src/components/Action/ActionBegin.spec.tsx
@@ -1,7 +1,7 @@
import { Button } from '@material-ui/core'
import { mount } from 'enzyme'
+import toJson from 'enzyme-to-json'
import React from 'react'
-import { act } from 'react-dom/test-utils'
import { Provider } from 'react-redux'
import configureStore from 'redux-mock-store'
import {
@@ -11,6 +11,7 @@ import {
import { mockedEcogesturesData } from '../../../tests/__mocks__/ecogesturesData.mock'
import { globalStateData } from '../../../tests/__mocks__/globalStateData.mock'
import { profileData } from '../../../tests/__mocks__/profileData.mock'
+import { waitForComponentToPaint } from '../../../tests/__mocks__/testUtils'
import { userChallengeData } from '../../../tests/__mocks__/userChallengeData.mock'
import ActionBegin from './ActionBegin'
import ActionModal from './ActionModal'
@@ -65,11 +66,8 @@ describe('ActionBegin component', () => {
/>
</Provider>
)
- await act(async () => {
- await new Promise(resolve => setTimeout(resolve))
- wrapper.update()
- })
- expect(wrapper).toMatchSnapshot()
+ await waitForComponentToPaint(wrapper)
+ expect(toJson(wrapper)).toMatchSnapshot()
})
it('should render correctly with custom action', async () => {
mockgetCustomActions.mockResolvedValue([
@@ -94,10 +92,7 @@ describe('ActionBegin component', () => {
/>
</Provider>
)
- await act(async () => {
- await new Promise(resolve => setTimeout(resolve))
- wrapper.update()
- })
+ await waitForComponentToPaint(wrapper)
expect(wrapper.find('.action-title').text()).toBe('Coup de vent')
})
it('should render chosen action ', async () => {
@@ -119,10 +114,7 @@ describe('ActionBegin component', () => {
/>
</Provider>
)
- await act(async () => {
- await new Promise(resolve => setTimeout(resolve))
- wrapper.update()
- })
+ await waitForComponentToPaint(wrapper)
expect(wrapper.find(ActionBegin).exists()).toBeTruthy()
})
it('should open launch Modal ', async () => {
@@ -144,10 +136,7 @@ describe('ActionBegin component', () => {
/>
</Provider>
)
- await act(async () => {
- await new Promise(resolve => setTimeout(resolve))
- wrapper.update()
- })
+ await waitForComponentToPaint(wrapper)
wrapper.find(Button).first().simulate('click')
expect(wrapper.find(ActionModal).exists()).toBeTruthy()
expect(wrapper.find(ActionModal).prop('open')).toBeTruthy()
@@ -171,10 +160,7 @@ describe('ActionBegin component', () => {
/>
</Provider>
)
- await act(async () => {
- await new Promise(resolve => setTimeout(resolve))
- wrapper.update()
- })
+ await waitForComponentToPaint(wrapper)
wrapper.find(Button).at(1).simulate('click')
})
})
diff --git a/src/components/Action/ActionCard.spec.tsx b/src/components/Action/ActionCard.spec.tsx
index db4315c17..2ae077fe9 100644
--- a/src/components/Action/ActionCard.spec.tsx
+++ b/src/components/Action/ActionCard.spec.tsx
@@ -2,12 +2,14 @@ import { Button } from '@material-ui/core'
import defaultIcon from 'assets/icons/visu/duel/default.svg'
import EcogestureModal from 'components/Ecogesture/EcogestureModal'
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 { defaultEcogestureData } from '../../../tests/__mocks__/actionData.mock'
import { globalStateData } from '../../../tests/__mocks__/globalStateData.mock'
import { profileData } from '../../../tests/__mocks__/profileData.mock'
+import { waitForComponentToPaint } from '../../../tests/__mocks__/testUtils'
import { userChallengeData } from '../../../tests/__mocks__/userChallengeData.mock'
import ActionCard from './ActionCard'
@@ -32,7 +34,7 @@ jest.mock('utils/utils', () => {
}
})
describe('ActionCard component', () => {
- it('should be rendered correctly', () => {
+ it('should be rendered correctly', async () => {
const store = mockStore({
ecolyo: {
challenge: userChallengeData[1],
@@ -49,7 +51,8 @@ describe('ActionCard component', () => {
/>
</Provider>
)
- expect(wrapper).toMatchSnapshot()
+ await waitForComponentToPaint(wrapper)
+ expect(toJson(wrapper)).toMatchSnapshot()
})
it('should open modal', () => {
const store = mockStore({
diff --git a/src/components/Action/ActionChoose.spec.tsx b/src/components/Action/ActionChoose.spec.tsx
index 41a5db7fd..90c43e9aa 100644
--- a/src/components/Action/ActionChoose.spec.tsx
+++ b/src/components/Action/ActionChoose.spec.tsx
@@ -1,9 +1,11 @@
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 { globalStateData } from '../../../tests/__mocks__/globalStateData.mock'
import { profileData } from '../../../tests/__mocks__/profileData.mock'
+import { waitForComponentToPaint } from '../../../tests/__mocks__/testUtils'
import { userChallengeData } from '../../../tests/__mocks__/userChallengeData.mock'
import ActionBegin from './ActionBegin'
import ActionChoose from './ActionChoose'
@@ -29,7 +31,7 @@ jest.mock('services/ecogesture.service', () => {
const mockStore = configureStore([])
describe('ActionChoose component', () => {
- it('should render correctly', () => {
+ it('should render correctly', async () => {
const store = mockStore({
ecolyo: {
challenge: userChallengeData[1],
@@ -42,7 +44,8 @@ describe('ActionChoose component', () => {
<ActionChoose userChallenge={userChallengeData[1]} />
</Provider>
)
- expect(wrapper).toMatchSnapshot()
+ await waitForComponentToPaint(wrapper)
+ expect(toJson(wrapper)).toMatchSnapshot()
})
it('should render ActionBegin component', async () => {
const store = mockStore({
diff --git a/src/components/Action/ActionDone.spec.tsx b/src/components/Action/ActionDone.spec.tsx
index 8045aff87..42092cfa7 100644
--- a/src/components/Action/ActionDone.spec.tsx
+++ b/src/components/Action/ActionDone.spec.tsx
@@ -1,7 +1,7 @@
import { Button } from '@material-ui/core'
import { mount } from 'enzyme'
+import toJson from 'enzyme-to-json'
import React from 'react'
-import { act } from 'react-dom/test-utils'
import * as reactRedux from 'react-redux'
import { Provider } from 'react-redux'
import configureStore from 'redux-mock-store'
@@ -9,6 +9,7 @@ import UsageEventService from 'services/usageEvent.service'
import * as challengeActions from 'store/challenge/challenge.slice'
import { globalStateData } from '../../../tests/__mocks__/globalStateData.mock'
import { profileData } from '../../../tests/__mocks__/profileData.mock'
+import { waitForComponentToPaint } from '../../../tests/__mocks__/testUtils'
import { userChallengeData } from '../../../tests/__mocks__/userChallengeData.mock'
import ActionDone from './ActionDone'
@@ -41,7 +42,7 @@ jest.mock('services/challenge.service', () => {
})
describe('ActionDone component', () => {
- it('should be rendered correctly', () => {
+ it('should be rendered correctly', async () => {
const store = mockStore({
ecolyo: {
challenge: userChallengeData[1],
@@ -54,7 +55,8 @@ describe('ActionDone component', () => {
<ActionDone currentChallenge={userChallengeData[1]} />
</Provider>
)
- expect(wrapper).toMatchSnapshot()
+ await waitForComponentToPaint(wrapper)
+ expect(toJson(wrapper)).toMatchSnapshot()
})
it('should click on button and update action to done', async () => {
const useDispatchSpy = jest.spyOn(reactRedux, 'useDispatch')
@@ -77,10 +79,7 @@ describe('ActionDone component', () => {
</Provider>
)
wrapper.find(Button).first().simulate('click')
- await act(async () => {
- await new Promise(resolve => setTimeout(resolve))
- wrapper.update()
- })
+ await waitForComponentToPaint(wrapper)
expect(updateChallengeSpy).toBeCalledTimes(1)
})
})
diff --git a/src/components/Action/ActionModal.spec.tsx b/src/components/Action/ActionModal.spec.tsx
index 650e24902..23002a23f 100644
--- a/src/components/Action/ActionModal.spec.tsx
+++ b/src/components/Action/ActionModal.spec.tsx
@@ -1,7 +1,7 @@
import { Button } from '@material-ui/core'
import { mount } from 'enzyme'
+import toJson from 'enzyme-to-json'
import React from 'react'
-import { act } from 'react-dom/test-utils'
import * as reactRedux from 'react-redux'
import { Provider } from 'react-redux'
import configureStore from 'redux-mock-store'
@@ -10,6 +10,7 @@ import * as challengeActions from 'store/challenge/challenge.slice'
import { defaultEcogestureData } from '../../../tests/__mocks__/actionData.mock'
import { globalStateData } from '../../../tests/__mocks__/globalStateData.mock'
import { profileData } from '../../../tests/__mocks__/profileData.mock'
+import { waitForComponentToPaint } from '../../../tests/__mocks__/testUtils'
import { userChallengeData } from '../../../tests/__mocks__/userChallengeData.mock'
import ActionModal from './ActionModal'
@@ -36,7 +37,7 @@ UsageEventService.addEvent = mockAddEvent
const mockStore = configureStore([])
describe('ActionModal component', () => {
- it('should render correctly', () => {
+ it('should render correctly', async () => {
const store = mockStore({
ecolyo: {
challenge: userChallengeData[1],
@@ -54,7 +55,8 @@ describe('ActionModal component', () => {
/>
</Provider>
)
- expect(wrapper).toMatchSnapshot()
+ await waitForComponentToPaint(wrapper)
+ expect(toJson(wrapper)).toMatchSnapshot()
})
it('should click on button and update action to ongoing', async () => {
const useDispatchSpy = jest.spyOn(reactRedux, 'useDispatch')
@@ -84,10 +86,7 @@ describe('ActionModal component', () => {
</Provider>
)
wrapper.find(Button).first().simulate('click')
- await act(async () => {
- await new Promise(resolve => setTimeout(resolve))
- wrapper.update()
- })
+ await waitForComponentToPaint(wrapper)
expect(updateChallengeSpy).toBeCalledTimes(1)
})
})
diff --git a/src/components/Action/ActionOnGoing.spec.tsx b/src/components/Action/ActionOnGoing.spec.tsx
index db8fec3a7..5df6cbd2d 100644
--- a/src/components/Action/ActionOnGoing.spec.tsx
+++ b/src/components/Action/ActionOnGoing.spec.tsx
@@ -2,15 +2,16 @@ import { Button } from '@material-ui/core'
import EcogestureModal from 'components/Ecogesture/EcogestureModal'
import { UserActionState } from 'enum/userAction.enum'
import { mount } from 'enzyme'
+import toJson from 'enzyme-to-json'
import { DateTime } from 'luxon'
import { UserAction } from 'models'
import React from 'react'
-import { act } from 'react-dom/test-utils'
import { Provider } from 'react-redux'
import configureStore from 'redux-mock-store'
import { defaultEcogestureData } from '../../../tests/__mocks__/actionData.mock'
import { globalStateData } from '../../../tests/__mocks__/globalStateData.mock'
import { profileData } from '../../../tests/__mocks__/profileData.mock'
+import { waitForComponentToPaint } from '../../../tests/__mocks__/testUtils'
import { userChallengeData } from '../../../tests/__mocks__/userChallengeData.mock'
import ActionOnGoing from './ActionOnGoing'
@@ -36,12 +37,14 @@ const mockStore = configureStore([])
describe('ActionOnGoing component', () => {
const userAction: UserAction = {
ecogesture: null,
- startDate: DateTime.local().setZone('utc', {
- keepLocalTime: true,
- }),
+ startDate: DateTime.local()
+ .setZone('utc', {
+ keepLocalTime: true,
+ })
+ .startOf('day'),
state: UserActionState.ONGOING,
}
- it('should render correctly', () => {
+ it('should render correctly', async () => {
const store = mockStore({
ecolyo: {
challenge: userChallengeData[1],
@@ -55,8 +58,8 @@ describe('ActionOnGoing component', () => {
<ActionOnGoing userAction={userAction} />
</Provider>
)
-
- expect(wrapper).toMatchSnapshot()
+ await waitForComponentToPaint(wrapper)
+ expect(toJson(wrapper)).toMatchSnapshot()
})
it('should click on button open ecogesture Modal', async () => {
const userAction1: UserAction = {
@@ -76,10 +79,7 @@ describe('ActionOnGoing component', () => {
<ActionOnGoing userAction={userAction1} />
</Provider>
)
- await act(async () => {
- await new Promise(resolve => setTimeout(resolve))
- wrapper.update()
- })
+ await waitForComponentToPaint(wrapper)
wrapper.find(Button).first().simulate('click')
expect(wrapper.find(EcogestureModal).exists()).toBeTruthy()
})
diff --git a/src/components/Action/ActionView.spec.tsx b/src/components/Action/ActionView.spec.tsx
index e10f9778f..85b3bfa92 100644
--- a/src/components/Action/ActionView.spec.tsx
+++ b/src/components/Action/ActionView.spec.tsx
@@ -1,12 +1,14 @@
import ActionView from 'components/Action/ActionView'
import { UserActionState } from 'enum/userAction.enum'
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 { globalStateData } from '../../../tests/__mocks__/globalStateData.mock'
import { modalStateData } from '../../../tests/__mocks__/modalStateData.mock'
import { profileData } from '../../../tests/__mocks__/profileData.mock'
+import { waitForComponentToPaint } from '../../../tests/__mocks__/testUtils'
import { userChallengeData } from '../../../tests/__mocks__/userChallengeData.mock'
import ActionChoose from './ActionChoose'
import ActionDone from './ActionDone'
@@ -33,7 +35,7 @@ jest.mock('components/Action/ActionBegin', () => 'mock-action-begin')
const mockStore = configureStore([])
describe('ActionView component', () => {
- it('should render ActionChoose component', () => {
+ it('should render ActionChoose component', async () => {
const userChallenge = {
...userChallengeData[1],
action: {
@@ -55,7 +57,8 @@ describe('ActionView component', () => {
</Provider>
)
expect(wrapper.find(ActionChoose).exists()).toBeTruthy()
- expect(wrapper).toMatchSnapshot()
+ await waitForComponentToPaint(wrapper)
+ expect(toJson(wrapper)).toMatchSnapshot()
})
it('should render ActionDone component', () => {
const userChallenge = {
diff --git a/src/components/Action/__snapshots__/ActionBegin.spec.tsx.snap b/src/components/Action/__snapshots__/ActionBegin.spec.tsx.snap
index 65dfa39a4..bc15c7476 100644
--- a/src/components/Action/__snapshots__/ActionBegin.spec.tsx.snap
+++ b/src/components/Action/__snapshots__/ActionBegin.spec.tsx.snap
@@ -1,3 +1,1238 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
-exports[`ActionBegin component should render correctly 1`] = `ReactWrapper {}`;
+exports[`ActionBegin component should render correctly 1`] = `
+<Provider
+ store={
+ Object {
+ "clearActions": [Function],
+ "dispatch": [Function],
+ "getActions": [Function],
+ "getState": [Function],
+ "replaceReducer": [Function],
+ "subscribe": [Function],
+ }
+ }
+>
+ <ActionBegin
+ action={
+ Object {
+ "_id": "ECOGESTURE0014",
+ "action": true,
+ "actionDuration": 3,
+ "actionName": "J’attends que les plats chauds aient refroidi avant de les mettre au réfrigérateur et je les couvre.",
+ "difficulty": 1,
+ "doing": false,
+ "efficiency": 1,
+ "equipment": false,
+ "equipmentInstallation": true,
+ "equipmentType": Array [],
+ "fluidTypes": Array [
+ 0,
+ ],
+ "id": "ECOGESTURE0014",
+ "impactLevel": 2,
+ "investment": null,
+ "longDescription": "En plaçant des plats chauds au réfrigérateur, vous réchauffez l’enceinte de l’appareil, ce qui entraîne une surconsommation. De plus, si les plats ne sont pas couverts, de la vapeur d’eau va se former et provoquer l’apparition du givre. Et couvrir les plats, c’est aussi éviter que les bactéries et les odeurs ne se répandent.",
+ "longName": "J’attends que les plats chauds aient refroidi avant de les mettre au réfrigérateur et je les couvre.",
+ "objective": false,
+ "room": Array [
+ 2,
+ ],
+ "season": "Sans saison",
+ "shortName": "Chat échaudé",
+ "usage": 5,
+ "viewedInSelection": false,
+ }
+ }
+ setShowList={[MockFunction]}
+ 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
+ className="action-begin"
+ >
+ <div
+ className="action-container"
+ >
+ <div
+ className="action-begin-container"
+ >
+ <div
+ className="icon-container"
+ >
+ <StyledIcon
+ className="action-icon"
+ icon=""
+ size={100}
+ >
+ <Icon
+ aria-hidden={true}
+ className="action-icon"
+ icon=""
+ size={100}
+ spin={false}
+ >
+ <Component
+ aria-hidden={true}
+ className="action-icon styles__icon___23x3R"
+ height={100}
+ style={Object {}}
+ width={100}
+ >
+ <svg
+ aria-hidden={true}
+ className="action-icon styles__icon___23x3R"
+ height={100}
+ style={Object {}}
+ width={100}
+ >
+ <use
+ xlinkHref="#"
+ />
+ </svg>
+ </Component>
+ </Icon>
+ </StyledIcon>
+ </div>
+ <StarsContainer
+ isQuizBegin={true}
+ result={0}
+ >
+ <div
+ className="stars"
+ >
+ <StyledIcon
+ className="star"
+ icon="test-file-stub"
+ key="1"
+ size={25}
+ >
+ <Icon
+ aria-hidden={true}
+ className="star"
+ icon="test-file-stub"
+ size={25}
+ spin={false}
+ >
+ <Component
+ aria-hidden={true}
+ className="star styles__icon___23x3R"
+ height={25}
+ style={Object {}}
+ width={25}
+ >
+ <svg
+ aria-hidden={true}
+ className="star styles__icon___23x3R"
+ height={25}
+ style={Object {}}
+ width={25}
+ >
+ <use
+ xlinkHref="#test-file-stub"
+ />
+ </svg>
+ </Component>
+ </Icon>
+ </StyledIcon>
+ <StyledIcon
+ className="star"
+ icon="test-file-stub"
+ key="2"
+ size={25}
+ >
+ <Icon
+ aria-hidden={true}
+ className="star"
+ icon="test-file-stub"
+ size={25}
+ spin={false}
+ >
+ <Component
+ aria-hidden={true}
+ className="star styles__icon___23x3R"
+ height={25}
+ style={Object {}}
+ width={25}
+ >
+ <svg
+ aria-hidden={true}
+ className="star styles__icon___23x3R"
+ height={25}
+ style={Object {}}
+ width={25}
+ >
+ <use
+ xlinkHref="#test-file-stub"
+ />
+ </svg>
+ </Component>
+ </Icon>
+ </StyledIcon>
+ <StyledIcon
+ className="star"
+ icon="test-file-stub"
+ key="3"
+ size={25}
+ >
+ <Icon
+ aria-hidden={true}
+ className="star"
+ icon="test-file-stub"
+ size={25}
+ spin={false}
+ >
+ <Component
+ aria-hidden={true}
+ className="star styles__icon___23x3R"
+ height={25}
+ style={Object {}}
+ width={25}
+ >
+ <svg
+ aria-hidden={true}
+ className="star styles__icon___23x3R"
+ height={25}
+ style={Object {}}
+ width={25}
+ >
+ <use
+ xlinkHref="#test-file-stub"
+ />
+ </svg>
+ </Component>
+ </Icon>
+ </StyledIcon>
+ <StyledIcon
+ className="star"
+ icon="test-file-stub"
+ key="4"
+ size={25}
+ >
+ <Icon
+ aria-hidden={true}
+ className="star"
+ icon="test-file-stub"
+ size={25}
+ spin={false}
+ >
+ <Component
+ aria-hidden={true}
+ className="star styles__icon___23x3R"
+ height={25}
+ style={Object {}}
+ width={25}
+ >
+ <svg
+ aria-hidden={true}
+ className="star styles__icon___23x3R"
+ height={25}
+ style={Object {}}
+ width={25}
+ >
+ <use
+ xlinkHref="#test-file-stub"
+ />
+ </svg>
+ </Component>
+ </Icon>
+ </StyledIcon>
+ <StyledIcon
+ className="star"
+ icon="test-file-stub"
+ key="5"
+ size={25}
+ >
+ <Icon
+ aria-hidden={true}
+ className="star"
+ icon="test-file-stub"
+ size={25}
+ spin={false}
+ >
+ <Component
+ aria-hidden={true}
+ className="star styles__icon___23x3R"
+ height={25}
+ style={Object {}}
+ width={25}
+ >
+ <svg
+ aria-hidden={true}
+ className="star styles__icon___23x3R"
+ height={25}
+ style={Object {}}
+ width={25}
+ >
+ <use
+ xlinkHref="#test-file-stub"
+ />
+ </svg>
+ </Component>
+ </Icon>
+ </StyledIcon>
+ </div>
+ </StarsContainer>
+ <div
+ className="action-title text-20-bold"
+ >
+ Chat échaudé
+ </div>
+ <div
+ className="action-duration text-18"
+ >
+ action.duration
+ </div>
+ <div
+ className="action-text text-18-bold"
+ >
+ J’attends que les plats chauds aient refroidi avant de les mettre au réfrigérateur et je les couvre.
+ </div>
+ <div
+ className="action-buttons"
+ >
+ <WithStyles(ForwardRef(Button))
+ classes={
+ Object {
+ "label": "text-16-normal",
+ "root": "btn-secondary-negative",
+ }
+ }
+ onClick={[Function]}
+ >
+ <ForwardRef(Button)
+ 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 text-16-normal",
+ "outlined": "MuiButton-outlined",
+ "outlinedPrimary": "MuiButton-outlinedPrimary",
+ "outlinedSecondary": "MuiButton-outlinedSecondary",
+ "outlinedSizeLarge": "MuiButton-outlinedSizeLarge",
+ "outlinedSizeSmall": "MuiButton-outlinedSizeSmall",
+ "root": "MuiButton-root btn-secondary-negative",
+ "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))
+ className="MuiButton-root btn-secondary-negative MuiButton-text"
+ component="button"
+ disabled={false}
+ focusRipple={true}
+ focusVisibleClassName="Mui-focusVisible"
+ onClick={[Function]}
+ type="button"
+ >
+ <ForwardRef(ButtonBase)
+ className="MuiButton-root btn-secondary-negative MuiButton-text"
+ 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
+ className="MuiButtonBase-root MuiButton-root btn-secondary-negative MuiButton-text"
+ 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 text-16-normal"
+ >
+ action.apply
+ </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))
+ classes={
+ Object {
+ "label": "text-16-normal",
+ "root": "btn-secondary-negative",
+ }
+ }
+ onClick={[Function]}
+ >
+ <ForwardRef(Button)
+ 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 text-16-normal",
+ "outlined": "MuiButton-outlined",
+ "outlinedPrimary": "MuiButton-outlinedPrimary",
+ "outlinedSecondary": "MuiButton-outlinedSecondary",
+ "outlinedSizeLarge": "MuiButton-outlinedSizeLarge",
+ "outlinedSizeSmall": "MuiButton-outlinedSizeSmall",
+ "root": "MuiButton-root btn-secondary-negative",
+ "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))
+ className="MuiButton-root btn-secondary-negative MuiButton-text"
+ component="button"
+ disabled={false}
+ focusRipple={true}
+ focusVisibleClassName="Mui-focusVisible"
+ onClick={[Function]}
+ type="button"
+ >
+ <ForwardRef(ButtonBase)
+ className="MuiButton-root btn-secondary-negative MuiButton-text"
+ 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
+ className="MuiButtonBase-root MuiButton-root btn-secondary-negative MuiButton-text"
+ 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 text-16-normal"
+ >
+ action.other
+ </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>
+ </div>
+ <ActionModal
+ action={
+ Object {
+ "_id": "ECOGESTURE0014",
+ "action": true,
+ "actionDuration": 3,
+ "actionName": "J’attends que les plats chauds aient refroidi avant de les mettre au réfrigérateur et je les couvre.",
+ "difficulty": 1,
+ "doing": false,
+ "efficiency": 1,
+ "equipment": false,
+ "equipmentInstallation": true,
+ "equipmentType": Array [],
+ "fluidTypes": Array [
+ 0,
+ ],
+ "id": "ECOGESTURE0014",
+ "impactLevel": 2,
+ "investment": null,
+ "longDescription": "En plaçant des plats chauds au réfrigérateur, vous réchauffez l’enceinte de l’appareil, ce qui entraîne une surconsommation. De plus, si les plats ne sont pas couverts, de la vapeur d’eau va se former et provoquer l’apparition du givre. Et couvrir les plats, c’est aussi éviter que les bactéries et les odeurs ne se répandent.",
+ "longName": "J’attends que les plats chauds aient refroidi avant de les mettre au réfrigérateur et je les couvre.",
+ "objective": false,
+ "room": Array [
+ 2,
+ ],
+ "season": "Sans saison",
+ "shortName": "Chat échaudé",
+ "usage": 5,
+ "viewedInSelection": false,
+ }
+ }
+ handleCloseClick={[Function]}
+ open={false}
+ 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",
+ }
+ }
+ >
+ <WithStyles(ForwardRef(Dialog))
+ aria-labelledby="accessibility-title"
+ classes={
+ Object {
+ "paper": "modal-paper",
+ "root": "modal-root",
+ }
+ }
+ onClose={[Function]}
+ open={false}
+ >
+ <ForwardRef(Dialog)
+ aria-labelledby="accessibility-title"
+ classes={
+ Object {
+ "container": "MuiDialog-container",
+ "paper": "MuiDialog-paper modal-paper",
+ "paperFullScreen": "MuiDialog-paperFullScreen",
+ "paperFullWidth": "MuiDialog-paperFullWidth",
+ "paperScrollBody": "MuiDialog-paperScrollBody",
+ "paperScrollPaper": "MuiDialog-paperScrollPaper",
+ "paperWidthFalse": "MuiDialog-paperWidthFalse",
+ "paperWidthLg": "MuiDialog-paperWidthLg",
+ "paperWidthMd": "MuiDialog-paperWidthMd",
+ "paperWidthSm": "MuiDialog-paperWidthSm",
+ "paperWidthXl": "MuiDialog-paperWidthXl",
+ "paperWidthXs": "MuiDialog-paperWidthXs",
+ "root": "MuiDialog-root modal-root",
+ "scrollBody": "MuiDialog-scrollBody",
+ "scrollPaper": "MuiDialog-scrollPaper",
+ }
+ }
+ onClose={[Function]}
+ open={false}
+ >
+ <ForwardRef(Modal)
+ BackdropComponent={
+ Object {
+ "$$typeof": Symbol(react.forward_ref),
+ "Naked": Object {
+ "$$typeof": Symbol(react.forward_ref),
+ "propTypes": Object {
+ "children": [Function],
+ "className": [Function],
+ "classes": [Function],
+ "invisible": [Function],
+ "open": [Function],
+ "transitionDuration": [Function],
+ },
+ "render": [Function],
+ },
+ "displayName": "WithStyles(ForwardRef(Backdrop))",
+ "options": Object {
+ "defaultTheme": Object {
+ "breakpoints": Object {
+ "between": [Function],
+ "down": [Function],
+ "keys": Array [
+ "xs",
+ "sm",
+ "md",
+ "lg",
+ "xl",
+ ],
+ "only": [Function],
+ "up": [Function],
+ "values": Object {
+ "lg": 1280,
+ "md": 960,
+ "sm": 600,
+ "xl": 1920,
+ "xs": 0,
+ },
+ "width": [Function],
+ },
+ "direction": "ltr",
+ "mixins": Object {
+ "gutters": [Function],
+ "toolbar": Object {
+ "@media (min-width:0px) and (orientation: landscape)": Object {
+ "minHeight": 48,
+ },
+ "@media (min-width:600px)": Object {
+ "minHeight": 64,
+ },
+ "minHeight": 56,
+ },
+ },
+ "overrides": Object {},
+ "palette": Object {
+ "action": Object {
+ "activatedOpacity": 0.12,
+ "active": "rgba(0, 0, 0, 0.54)",
+ "disabled": "rgba(0, 0, 0, 0.26)",
+ "disabledBackground": "rgba(0, 0, 0, 0.12)",
+ "disabledOpacity": 0.38,
+ "focus": "rgba(0, 0, 0, 0.12)",
+ "focusOpacity": 0.12,
+ "hover": "rgba(0, 0, 0, 0.04)",
+ "hoverOpacity": 0.04,
+ "selected": "rgba(0, 0, 0, 0.08)",
+ "selectedOpacity": 0.08,
+ },
+ "augmentColor": [Function],
+ "background": Object {
+ "default": "#fafafa",
+ "paper": "#fff",
+ },
+ "common": Object {
+ "black": "#000",
+ "white": "#fff",
+ },
+ "contrastThreshold": 3,
+ "divider": "rgba(0, 0, 0, 0.12)",
+ "error": Object {
+ "contrastText": "#fff",
+ "dark": "#d32f2f",
+ "light": "#e57373",
+ "main": "#f44336",
+ },
+ "getContrastText": [Function],
+ "grey": Object {
+ "100": "#f5f5f5",
+ "200": "#eeeeee",
+ "300": "#e0e0e0",
+ "400": "#bdbdbd",
+ "50": "#fafafa",
+ "500": "#9e9e9e",
+ "600": "#757575",
+ "700": "#616161",
+ "800": "#424242",
+ "900": "#212121",
+ "A100": "#d5d5d5",
+ "A200": "#aaaaaa",
+ "A400": "#303030",
+ "A700": "#616161",
+ },
+ "info": Object {
+ "contrastText": "#fff",
+ "dark": "#1976d2",
+ "light": "#64b5f6",
+ "main": "#2196f3",
+ },
+ "primary": Object {
+ "contrastText": "#fff",
+ "dark": "#303f9f",
+ "light": "#7986cb",
+ "main": "#3f51b5",
+ },
+ "secondary": Object {
+ "contrastText": "#fff",
+ "dark": "#c51162",
+ "light": "#ff4081",
+ "main": "#f50057",
+ },
+ "success": Object {
+ "contrastText": "rgba(0, 0, 0, 0.87)",
+ "dark": "#388e3c",
+ "light": "#81c784",
+ "main": "#4caf50",
+ },
+ "text": Object {
+ "disabled": "rgba(0, 0, 0, 0.38)",
+ "hint": "rgba(0, 0, 0, 0.38)",
+ "primary": "rgba(0, 0, 0, 0.87)",
+ "secondary": "rgba(0, 0, 0, 0.54)",
+ },
+ "tonalOffset": 0.2,
+ "type": "light",
+ "warning": Object {
+ "contrastText": "rgba(0, 0, 0, 0.87)",
+ "dark": "#f57c00",
+ "light": "#ffb74d",
+ "main": "#ff9800",
+ },
+ },
+ "props": Object {},
+ "shadows": Array [
+ "none",
+ "0px 2px 1px -1px rgba(0,0,0,0.2),0px 1px 1px 0px rgba(0,0,0,0.14),0px 1px 3px 0px rgba(0,0,0,0.12)",
+ "0px 3px 1px -2px rgba(0,0,0,0.2),0px 2px 2px 0px rgba(0,0,0,0.14),0px 1px 5px 0px rgba(0,0,0,0.12)",
+ "0px 3px 3px -2px rgba(0,0,0,0.2),0px 3px 4px 0px rgba(0,0,0,0.14),0px 1px 8px 0px rgba(0,0,0,0.12)",
+ "0px 2px 4px -1px rgba(0,0,0,0.2),0px 4px 5px 0px rgba(0,0,0,0.14),0px 1px 10px 0px rgba(0,0,0,0.12)",
+ "0px 3px 5px -1px rgba(0,0,0,0.2),0px 5px 8px 0px rgba(0,0,0,0.14),0px 1px 14px 0px rgba(0,0,0,0.12)",
+ "0px 3px 5px -1px rgba(0,0,0,0.2),0px 6px 10px 0px rgba(0,0,0,0.14),0px 1px 18px 0px rgba(0,0,0,0.12)",
+ "0px 4px 5px -2px rgba(0,0,0,0.2),0px 7px 10px 1px rgba(0,0,0,0.14),0px 2px 16px 1px rgba(0,0,0,0.12)",
+ "0px 5px 5px -3px rgba(0,0,0,0.2),0px 8px 10px 1px rgba(0,0,0,0.14),0px 3px 14px 2px rgba(0,0,0,0.12)",
+ "0px 5px 6px -3px rgba(0,0,0,0.2),0px 9px 12px 1px rgba(0,0,0,0.14),0px 3px 16px 2px rgba(0,0,0,0.12)",
+ "0px 6px 6px -3px rgba(0,0,0,0.2),0px 10px 14px 1px rgba(0,0,0,0.14),0px 4px 18px 3px rgba(0,0,0,0.12)",
+ "0px 6px 7px -4px rgba(0,0,0,0.2),0px 11px 15px 1px rgba(0,0,0,0.14),0px 4px 20px 3px rgba(0,0,0,0.12)",
+ "0px 7px 8px -4px rgba(0,0,0,0.2),0px 12px 17px 2px rgba(0,0,0,0.14),0px 5px 22px 4px rgba(0,0,0,0.12)",
+ "0px 7px 8px -4px rgba(0,0,0,0.2),0px 13px 19px 2px rgba(0,0,0,0.14),0px 5px 24px 4px rgba(0,0,0,0.12)",
+ "0px 7px 9px -4px rgba(0,0,0,0.2),0px 14px 21px 2px rgba(0,0,0,0.14),0px 5px 26px 4px rgba(0,0,0,0.12)",
+ "0px 8px 9px -5px rgba(0,0,0,0.2),0px 15px 22px 2px rgba(0,0,0,0.14),0px 6px 28px 5px rgba(0,0,0,0.12)",
+ "0px 8px 10px -5px rgba(0,0,0,0.2),0px 16px 24px 2px rgba(0,0,0,0.14),0px 6px 30px 5px rgba(0,0,0,0.12)",
+ "0px 8px 11px -5px rgba(0,0,0,0.2),0px 17px 26px 2px rgba(0,0,0,0.14),0px 6px 32px 5px rgba(0,0,0,0.12)",
+ "0px 9px 11px -5px rgba(0,0,0,0.2),0px 18px 28px 2px rgba(0,0,0,0.14),0px 7px 34px 6px rgba(0,0,0,0.12)",
+ "0px 9px 12px -6px rgba(0,0,0,0.2),0px 19px 29px 2px rgba(0,0,0,0.14),0px 7px 36px 6px rgba(0,0,0,0.12)",
+ "0px 10px 13px -6px rgba(0,0,0,0.2),0px 20px 31px 3px rgba(0,0,0,0.14),0px 8px 38px 7px rgba(0,0,0,0.12)",
+ "0px 10px 13px -6px rgba(0,0,0,0.2),0px 21px 33px 3px rgba(0,0,0,0.14),0px 8px 40px 7px rgba(0,0,0,0.12)",
+ "0px 10px 14px -6px rgba(0,0,0,0.2),0px 22px 35px 3px rgba(0,0,0,0.14),0px 8px 42px 7px rgba(0,0,0,0.12)",
+ "0px 11px 14px -7px rgba(0,0,0,0.2),0px 23px 36px 3px rgba(0,0,0,0.14),0px 9px 44px 8px rgba(0,0,0,0.12)",
+ "0px 11px 15px -7px rgba(0,0,0,0.2),0px 24px 38px 3px rgba(0,0,0,0.14),0px 9px 46px 8px rgba(0,0,0,0.12)",
+ ],
+ "shape": Object {
+ "borderRadius": 4,
+ },
+ "spacing": [Function],
+ "transitions": Object {
+ "create": [Function],
+ "duration": Object {
+ "complex": 375,
+ "enteringScreen": 225,
+ "leavingScreen": 195,
+ "short": 250,
+ "shorter": 200,
+ "shortest": 150,
+ "standard": 300,
+ },
+ "easing": Object {
+ "easeIn": "cubic-bezier(0.4, 0, 1, 1)",
+ "easeInOut": "cubic-bezier(0.4, 0, 0.2, 1)",
+ "easeOut": "cubic-bezier(0.0, 0, 0.2, 1)",
+ "sharp": "cubic-bezier(0.4, 0, 0.6, 1)",
+ },
+ "getAutoHeightDuration": [Function],
+ },
+ "typography": Object {
+ "body1": Object {
+ "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
+ "fontSize": "1rem",
+ "fontWeight": 400,
+ "letterSpacing": "0.00938em",
+ "lineHeight": 1.5,
+ },
+ "body2": Object {
+ "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
+ "fontSize": "0.875rem",
+ "fontWeight": 400,
+ "letterSpacing": "0.01071em",
+ "lineHeight": 1.43,
+ },
+ "button": Object {
+ "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
+ "fontSize": "0.875rem",
+ "fontWeight": 500,
+ "letterSpacing": "0.02857em",
+ "lineHeight": 1.75,
+ "textTransform": "uppercase",
+ },
+ "caption": Object {
+ "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
+ "fontSize": "0.75rem",
+ "fontWeight": 400,
+ "letterSpacing": "0.03333em",
+ "lineHeight": 1.66,
+ },
+ "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
+ "fontSize": 14,
+ "fontWeightBold": 700,
+ "fontWeightLight": 300,
+ "fontWeightMedium": 500,
+ "fontWeightRegular": 400,
+ "h1": Object {
+ "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
+ "fontSize": "6rem",
+ "fontWeight": 300,
+ "letterSpacing": "-0.01562em",
+ "lineHeight": 1.167,
+ },
+ "h2": Object {
+ "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
+ "fontSize": "3.75rem",
+ "fontWeight": 300,
+ "letterSpacing": "-0.00833em",
+ "lineHeight": 1.2,
+ },
+ "h3": Object {
+ "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
+ "fontSize": "3rem",
+ "fontWeight": 400,
+ "letterSpacing": "0em",
+ "lineHeight": 1.167,
+ },
+ "h4": Object {
+ "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
+ "fontSize": "2.125rem",
+ "fontWeight": 400,
+ "letterSpacing": "0.00735em",
+ "lineHeight": 1.235,
+ },
+ "h5": Object {
+ "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
+ "fontSize": "1.5rem",
+ "fontWeight": 400,
+ "letterSpacing": "0em",
+ "lineHeight": 1.334,
+ },
+ "h6": Object {
+ "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
+ "fontSize": "1.25rem",
+ "fontWeight": 500,
+ "letterSpacing": "0.0075em",
+ "lineHeight": 1.6,
+ },
+ "htmlFontSize": 16,
+ "overline": Object {
+ "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
+ "fontSize": "0.75rem",
+ "fontWeight": 400,
+ "letterSpacing": "0.08333em",
+ "lineHeight": 2.66,
+ "textTransform": "uppercase",
+ },
+ "pxToRem": [Function],
+ "round": [Function],
+ "subtitle1": Object {
+ "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
+ "fontSize": "1rem",
+ "fontWeight": 400,
+ "letterSpacing": "0.00938em",
+ "lineHeight": 1.75,
+ },
+ "subtitle2": Object {
+ "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
+ "fontSize": "0.875rem",
+ "fontWeight": 500,
+ "letterSpacing": "0.00714em",
+ "lineHeight": 1.57,
+ },
+ },
+ "zIndex": Object {
+ "appBar": 1100,
+ "drawer": 1200,
+ "mobileStepper": 1000,
+ "modal": 1300,
+ "snackbar": 1400,
+ "speedDial": 1050,
+ "tooltip": 1500,
+ },
+ },
+ "name": "MuiBackdrop",
+ },
+ "propTypes": Object {
+ "classes": [Function],
+ "innerRef": [Function],
+ },
+ "render": [Function],
+ "useStyles": [Function],
+ }
+ }
+ BackdropProps={
+ Object {
+ "transitionDuration": Object {
+ "enter": 225,
+ "exit": 195,
+ },
+ }
+ }
+ className="MuiDialog-root modal-root"
+ closeAfterTransition={true}
+ disableEscapeKeyDown={false}
+ onClose={[Function]}
+ open={false}
+ />
+ </ForwardRef(Dialog)>
+ </WithStyles(ForwardRef(Dialog))>
+ </ActionModal>
+ </div>
+ </div>
+ </ActionBegin>
+</Provider>
+`;
diff --git a/src/components/Action/__snapshots__/ActionCard.spec.tsx.snap b/src/components/Action/__snapshots__/ActionCard.spec.tsx.snap
index a2089e3e2..c13a97777 100644
--- a/src/components/Action/__snapshots__/ActionCard.spec.tsx.snap
+++ b/src/components/Action/__snapshots__/ActionCard.spec.tsx.snap
@@ -1,3 +1,616 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
-exports[`ActionCard component should be rendered correctly 1`] = `ReactWrapper {}`;
+exports[`ActionCard component should be rendered correctly 1`] = `
+<Provider
+ store={
+ Object {
+ "clearActions": [Function],
+ "dispatch": [Function],
+ "getActions": [Function],
+ "getState": [Function],
+ "replaceReducer": [Function],
+ "subscribe": [Function],
+ }
+ }
+>
+ <ActionCard
+ action={
+ Object {
+ "_id": "ECOGESTURE0014",
+ "action": true,
+ "actionDuration": 3,
+ "actionName": "J’attends que les plats chauds aient refroidi avant de les mettre au réfrigérateur et je les couvre.",
+ "difficulty": 1,
+ "doing": false,
+ "efficiency": 1,
+ "equipment": false,
+ "equipmentInstallation": true,
+ "equipmentType": Array [],
+ "fluidTypes": Array [
+ 0,
+ ],
+ "id": "ECOGESTURE0014",
+ "impactLevel": 2,
+ "investment": null,
+ "longDescription": "En plaçant des plats chauds au réfrigérateur, vous réchauffez l’enceinte de l’appareil, ce qui entraîne une surconsommation. De plus, si les plats ne sont pas couverts, de la vapeur d’eau va se former et provoquer l’apparition du givre. Et couvrir les plats, c’est aussi éviter que les bactéries et les odeurs ne se répandent.",
+ "longName": "J’attends que les plats chauds aient refroidi avant de les mettre au réfrigérateur et je les couvre.",
+ "objective": false,
+ "room": Array [
+ 2,
+ ],
+ "season": "Sans saison",
+ "shortName": "Chat échaudé",
+ "usage": 5,
+ "viewedInSelection": false,
+ }
+ }
+ setSelectedAction={[MockFunction]}
+ setShowList={[MockFunction]}
+ >
+ <WithStyles(ForwardRef(Button))
+ className="action-card"
+ key="ECOGESTURE0014"
+ onClick={[Function]}
+ >
+ <ForwardRef(Button)
+ className="action-card"
+ 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))
+ className="MuiButton-root MuiButton-text action-card"
+ component="button"
+ disabled={false}
+ focusRipple={true}
+ focusVisibleClassName="Mui-focusVisible"
+ onClick={[Function]}
+ type="button"
+ >
+ <ForwardRef(ButtonBase)
+ className="MuiButton-root MuiButton-text action-card"
+ 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
+ className="MuiButtonBase-root MuiButton-root MuiButton-text action-card"
+ 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"
+ >
+ <StyledIcon
+ className="action-icon"
+ icon="test-file-stub"
+ size={100}
+ >
+ <Icon
+ aria-hidden={true}
+ className="action-icon"
+ icon="test-file-stub"
+ size={100}
+ spin={false}
+ >
+ <Component
+ aria-hidden={true}
+ className="action-icon styles__icon___23x3R"
+ height={100}
+ style={Object {}}
+ width={100}
+ >
+ <svg
+ aria-hidden={true}
+ className="action-icon styles__icon___23x3R"
+ height={100}
+ style={Object {}}
+ width={100}
+ >
+ <use
+ xlinkHref="#test-file-stub"
+ />
+ </svg>
+ </Component>
+ </Icon>
+ </StyledIcon>
+ <div
+ className="action-title text-18-bold"
+ >
+ Chat échaudé
+ </div>
+ </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))>
+ <EcogestureModal
+ ecogesture={
+ Object {
+ "_id": "ECOGESTURE0014",
+ "action": true,
+ "actionDuration": 3,
+ "actionName": "J’attends que les plats chauds aient refroidi avant de les mettre au réfrigérateur et je les couvre.",
+ "difficulty": 1,
+ "doing": false,
+ "efficiency": 1,
+ "equipment": false,
+ "equipmentInstallation": true,
+ "equipmentType": Array [],
+ "fluidTypes": Array [
+ 0,
+ ],
+ "id": "ECOGESTURE0014",
+ "impactLevel": 2,
+ "investment": null,
+ "longDescription": "En plaçant des plats chauds au réfrigérateur, vous réchauffez l’enceinte de l’appareil, ce qui entraîne une surconsommation. De plus, si les plats ne sont pas couverts, de la vapeur d’eau va se former et provoquer l’apparition du givre. Et couvrir les plats, c’est aussi éviter que les bactéries et les odeurs ne se répandent.",
+ "longName": "J’attends que les plats chauds aient refroidi avant de les mettre au réfrigérateur et je les couvre.",
+ "objective": false,
+ "room": Array [
+ 2,
+ ],
+ "season": "Sans saison",
+ "shortName": "Chat échaudé",
+ "usage": 5,
+ "viewedInSelection": false,
+ }
+ }
+ handleCloseClick={[Function]}
+ isAction={true}
+ open={false}
+ selectEcogesture={[Function]}
+ >
+ <WithStyles(ForwardRef(Dialog))
+ aria-labelledby="accessibility-title"
+ classes={
+ Object {
+ "paper": "modal-paper no-padding blue-border",
+ "root": "modal-root",
+ }
+ }
+ onClose={[Function]}
+ open={false}
+ >
+ <ForwardRef(Dialog)
+ aria-labelledby="accessibility-title"
+ classes={
+ Object {
+ "container": "MuiDialog-container",
+ "paper": "MuiDialog-paper modal-paper no-padding blue-border",
+ "paperFullScreen": "MuiDialog-paperFullScreen",
+ "paperFullWidth": "MuiDialog-paperFullWidth",
+ "paperScrollBody": "MuiDialog-paperScrollBody",
+ "paperScrollPaper": "MuiDialog-paperScrollPaper",
+ "paperWidthFalse": "MuiDialog-paperWidthFalse",
+ "paperWidthLg": "MuiDialog-paperWidthLg",
+ "paperWidthMd": "MuiDialog-paperWidthMd",
+ "paperWidthSm": "MuiDialog-paperWidthSm",
+ "paperWidthXl": "MuiDialog-paperWidthXl",
+ "paperWidthXs": "MuiDialog-paperWidthXs",
+ "root": "MuiDialog-root modal-root",
+ "scrollBody": "MuiDialog-scrollBody",
+ "scrollPaper": "MuiDialog-scrollPaper",
+ }
+ }
+ onClose={[Function]}
+ open={false}
+ >
+ <ForwardRef(Modal)
+ BackdropComponent={
+ Object {
+ "$$typeof": Symbol(react.forward_ref),
+ "Naked": Object {
+ "$$typeof": Symbol(react.forward_ref),
+ "propTypes": Object {
+ "children": [Function],
+ "className": [Function],
+ "classes": [Function],
+ "invisible": [Function],
+ "open": [Function],
+ "transitionDuration": [Function],
+ },
+ "render": [Function],
+ },
+ "displayName": "WithStyles(ForwardRef(Backdrop))",
+ "options": Object {
+ "defaultTheme": Object {
+ "breakpoints": Object {
+ "between": [Function],
+ "down": [Function],
+ "keys": Array [
+ "xs",
+ "sm",
+ "md",
+ "lg",
+ "xl",
+ ],
+ "only": [Function],
+ "up": [Function],
+ "values": Object {
+ "lg": 1280,
+ "md": 960,
+ "sm": 600,
+ "xl": 1920,
+ "xs": 0,
+ },
+ "width": [Function],
+ },
+ "direction": "ltr",
+ "mixins": Object {
+ "gutters": [Function],
+ "toolbar": Object {
+ "@media (min-width:0px) and (orientation: landscape)": Object {
+ "minHeight": 48,
+ },
+ "@media (min-width:600px)": Object {
+ "minHeight": 64,
+ },
+ "minHeight": 56,
+ },
+ },
+ "overrides": Object {},
+ "palette": Object {
+ "action": Object {
+ "activatedOpacity": 0.12,
+ "active": "rgba(0, 0, 0, 0.54)",
+ "disabled": "rgba(0, 0, 0, 0.26)",
+ "disabledBackground": "rgba(0, 0, 0, 0.12)",
+ "disabledOpacity": 0.38,
+ "focus": "rgba(0, 0, 0, 0.12)",
+ "focusOpacity": 0.12,
+ "hover": "rgba(0, 0, 0, 0.04)",
+ "hoverOpacity": 0.04,
+ "selected": "rgba(0, 0, 0, 0.08)",
+ "selectedOpacity": 0.08,
+ },
+ "augmentColor": [Function],
+ "background": Object {
+ "default": "#fafafa",
+ "paper": "#fff",
+ },
+ "common": Object {
+ "black": "#000",
+ "white": "#fff",
+ },
+ "contrastThreshold": 3,
+ "divider": "rgba(0, 0, 0, 0.12)",
+ "error": Object {
+ "contrastText": "#fff",
+ "dark": "#d32f2f",
+ "light": "#e57373",
+ "main": "#f44336",
+ },
+ "getContrastText": [Function],
+ "grey": Object {
+ "100": "#f5f5f5",
+ "200": "#eeeeee",
+ "300": "#e0e0e0",
+ "400": "#bdbdbd",
+ "50": "#fafafa",
+ "500": "#9e9e9e",
+ "600": "#757575",
+ "700": "#616161",
+ "800": "#424242",
+ "900": "#212121",
+ "A100": "#d5d5d5",
+ "A200": "#aaaaaa",
+ "A400": "#303030",
+ "A700": "#616161",
+ },
+ "info": Object {
+ "contrastText": "#fff",
+ "dark": "#1976d2",
+ "light": "#64b5f6",
+ "main": "#2196f3",
+ },
+ "primary": Object {
+ "contrastText": "#fff",
+ "dark": "#303f9f",
+ "light": "#7986cb",
+ "main": "#3f51b5",
+ },
+ "secondary": Object {
+ "contrastText": "#fff",
+ "dark": "#c51162",
+ "light": "#ff4081",
+ "main": "#f50057",
+ },
+ "success": Object {
+ "contrastText": "rgba(0, 0, 0, 0.87)",
+ "dark": "#388e3c",
+ "light": "#81c784",
+ "main": "#4caf50",
+ },
+ "text": Object {
+ "disabled": "rgba(0, 0, 0, 0.38)",
+ "hint": "rgba(0, 0, 0, 0.38)",
+ "primary": "rgba(0, 0, 0, 0.87)",
+ "secondary": "rgba(0, 0, 0, 0.54)",
+ },
+ "tonalOffset": 0.2,
+ "type": "light",
+ "warning": Object {
+ "contrastText": "rgba(0, 0, 0, 0.87)",
+ "dark": "#f57c00",
+ "light": "#ffb74d",
+ "main": "#ff9800",
+ },
+ },
+ "props": Object {},
+ "shadows": Array [
+ "none",
+ "0px 2px 1px -1px rgba(0,0,0,0.2),0px 1px 1px 0px rgba(0,0,0,0.14),0px 1px 3px 0px rgba(0,0,0,0.12)",
+ "0px 3px 1px -2px rgba(0,0,0,0.2),0px 2px 2px 0px rgba(0,0,0,0.14),0px 1px 5px 0px rgba(0,0,0,0.12)",
+ "0px 3px 3px -2px rgba(0,0,0,0.2),0px 3px 4px 0px rgba(0,0,0,0.14),0px 1px 8px 0px rgba(0,0,0,0.12)",
+ "0px 2px 4px -1px rgba(0,0,0,0.2),0px 4px 5px 0px rgba(0,0,0,0.14),0px 1px 10px 0px rgba(0,0,0,0.12)",
+ "0px 3px 5px -1px rgba(0,0,0,0.2),0px 5px 8px 0px rgba(0,0,0,0.14),0px 1px 14px 0px rgba(0,0,0,0.12)",
+ "0px 3px 5px -1px rgba(0,0,0,0.2),0px 6px 10px 0px rgba(0,0,0,0.14),0px 1px 18px 0px rgba(0,0,0,0.12)",
+ "0px 4px 5px -2px rgba(0,0,0,0.2),0px 7px 10px 1px rgba(0,0,0,0.14),0px 2px 16px 1px rgba(0,0,0,0.12)",
+ "0px 5px 5px -3px rgba(0,0,0,0.2),0px 8px 10px 1px rgba(0,0,0,0.14),0px 3px 14px 2px rgba(0,0,0,0.12)",
+ "0px 5px 6px -3px rgba(0,0,0,0.2),0px 9px 12px 1px rgba(0,0,0,0.14),0px 3px 16px 2px rgba(0,0,0,0.12)",
+ "0px 6px 6px -3px rgba(0,0,0,0.2),0px 10px 14px 1px rgba(0,0,0,0.14),0px 4px 18px 3px rgba(0,0,0,0.12)",
+ "0px 6px 7px -4px rgba(0,0,0,0.2),0px 11px 15px 1px rgba(0,0,0,0.14),0px 4px 20px 3px rgba(0,0,0,0.12)",
+ "0px 7px 8px -4px rgba(0,0,0,0.2),0px 12px 17px 2px rgba(0,0,0,0.14),0px 5px 22px 4px rgba(0,0,0,0.12)",
+ "0px 7px 8px -4px rgba(0,0,0,0.2),0px 13px 19px 2px rgba(0,0,0,0.14),0px 5px 24px 4px rgba(0,0,0,0.12)",
+ "0px 7px 9px -4px rgba(0,0,0,0.2),0px 14px 21px 2px rgba(0,0,0,0.14),0px 5px 26px 4px rgba(0,0,0,0.12)",
+ "0px 8px 9px -5px rgba(0,0,0,0.2),0px 15px 22px 2px rgba(0,0,0,0.14),0px 6px 28px 5px rgba(0,0,0,0.12)",
+ "0px 8px 10px -5px rgba(0,0,0,0.2),0px 16px 24px 2px rgba(0,0,0,0.14),0px 6px 30px 5px rgba(0,0,0,0.12)",
+ "0px 8px 11px -5px rgba(0,0,0,0.2),0px 17px 26px 2px rgba(0,0,0,0.14),0px 6px 32px 5px rgba(0,0,0,0.12)",
+ "0px 9px 11px -5px rgba(0,0,0,0.2),0px 18px 28px 2px rgba(0,0,0,0.14),0px 7px 34px 6px rgba(0,0,0,0.12)",
+ "0px 9px 12px -6px rgba(0,0,0,0.2),0px 19px 29px 2px rgba(0,0,0,0.14),0px 7px 36px 6px rgba(0,0,0,0.12)",
+ "0px 10px 13px -6px rgba(0,0,0,0.2),0px 20px 31px 3px rgba(0,0,0,0.14),0px 8px 38px 7px rgba(0,0,0,0.12)",
+ "0px 10px 13px -6px rgba(0,0,0,0.2),0px 21px 33px 3px rgba(0,0,0,0.14),0px 8px 40px 7px rgba(0,0,0,0.12)",
+ "0px 10px 14px -6px rgba(0,0,0,0.2),0px 22px 35px 3px rgba(0,0,0,0.14),0px 8px 42px 7px rgba(0,0,0,0.12)",
+ "0px 11px 14px -7px rgba(0,0,0,0.2),0px 23px 36px 3px rgba(0,0,0,0.14),0px 9px 44px 8px rgba(0,0,0,0.12)",
+ "0px 11px 15px -7px rgba(0,0,0,0.2),0px 24px 38px 3px rgba(0,0,0,0.14),0px 9px 46px 8px rgba(0,0,0,0.12)",
+ ],
+ "shape": Object {
+ "borderRadius": 4,
+ },
+ "spacing": [Function],
+ "transitions": Object {
+ "create": [Function],
+ "duration": Object {
+ "complex": 375,
+ "enteringScreen": 225,
+ "leavingScreen": 195,
+ "short": 250,
+ "shorter": 200,
+ "shortest": 150,
+ "standard": 300,
+ },
+ "easing": Object {
+ "easeIn": "cubic-bezier(0.4, 0, 1, 1)",
+ "easeInOut": "cubic-bezier(0.4, 0, 0.2, 1)",
+ "easeOut": "cubic-bezier(0.0, 0, 0.2, 1)",
+ "sharp": "cubic-bezier(0.4, 0, 0.6, 1)",
+ },
+ "getAutoHeightDuration": [Function],
+ },
+ "typography": Object {
+ "body1": Object {
+ "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
+ "fontSize": "1rem",
+ "fontWeight": 400,
+ "letterSpacing": "0.00938em",
+ "lineHeight": 1.5,
+ },
+ "body2": Object {
+ "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
+ "fontSize": "0.875rem",
+ "fontWeight": 400,
+ "letterSpacing": "0.01071em",
+ "lineHeight": 1.43,
+ },
+ "button": Object {
+ "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
+ "fontSize": "0.875rem",
+ "fontWeight": 500,
+ "letterSpacing": "0.02857em",
+ "lineHeight": 1.75,
+ "textTransform": "uppercase",
+ },
+ "caption": Object {
+ "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
+ "fontSize": "0.75rem",
+ "fontWeight": 400,
+ "letterSpacing": "0.03333em",
+ "lineHeight": 1.66,
+ },
+ "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
+ "fontSize": 14,
+ "fontWeightBold": 700,
+ "fontWeightLight": 300,
+ "fontWeightMedium": 500,
+ "fontWeightRegular": 400,
+ "h1": Object {
+ "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
+ "fontSize": "6rem",
+ "fontWeight": 300,
+ "letterSpacing": "-0.01562em",
+ "lineHeight": 1.167,
+ },
+ "h2": Object {
+ "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
+ "fontSize": "3.75rem",
+ "fontWeight": 300,
+ "letterSpacing": "-0.00833em",
+ "lineHeight": 1.2,
+ },
+ "h3": Object {
+ "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
+ "fontSize": "3rem",
+ "fontWeight": 400,
+ "letterSpacing": "0em",
+ "lineHeight": 1.167,
+ },
+ "h4": Object {
+ "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
+ "fontSize": "2.125rem",
+ "fontWeight": 400,
+ "letterSpacing": "0.00735em",
+ "lineHeight": 1.235,
+ },
+ "h5": Object {
+ "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
+ "fontSize": "1.5rem",
+ "fontWeight": 400,
+ "letterSpacing": "0em",
+ "lineHeight": 1.334,
+ },
+ "h6": Object {
+ "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
+ "fontSize": "1.25rem",
+ "fontWeight": 500,
+ "letterSpacing": "0.0075em",
+ "lineHeight": 1.6,
+ },
+ "htmlFontSize": 16,
+ "overline": Object {
+ "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
+ "fontSize": "0.75rem",
+ "fontWeight": 400,
+ "letterSpacing": "0.08333em",
+ "lineHeight": 2.66,
+ "textTransform": "uppercase",
+ },
+ "pxToRem": [Function],
+ "round": [Function],
+ "subtitle1": Object {
+ "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
+ "fontSize": "1rem",
+ "fontWeight": 400,
+ "letterSpacing": "0.00938em",
+ "lineHeight": 1.75,
+ },
+ "subtitle2": Object {
+ "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
+ "fontSize": "0.875rem",
+ "fontWeight": 500,
+ "letterSpacing": "0.00714em",
+ "lineHeight": 1.57,
+ },
+ },
+ "zIndex": Object {
+ "appBar": 1100,
+ "drawer": 1200,
+ "mobileStepper": 1000,
+ "modal": 1300,
+ "snackbar": 1400,
+ "speedDial": 1050,
+ "tooltip": 1500,
+ },
+ },
+ "name": "MuiBackdrop",
+ },
+ "propTypes": Object {
+ "classes": [Function],
+ "innerRef": [Function],
+ },
+ "render": [Function],
+ "useStyles": [Function],
+ }
+ }
+ BackdropProps={
+ Object {
+ "transitionDuration": Object {
+ "enter": 225,
+ "exit": 195,
+ },
+ }
+ }
+ className="MuiDialog-root modal-root"
+ closeAfterTransition={true}
+ disableEscapeKeyDown={false}
+ onClose={[Function]}
+ open={false}
+ />
+ </ForwardRef(Dialog)>
+ </WithStyles(ForwardRef(Dialog))>
+ </EcogestureModal>
+ </ActionCard>
+</Provider>
+`;
diff --git a/src/components/Action/__snapshots__/ActionChoose.spec.tsx.snap b/src/components/Action/__snapshots__/ActionChoose.spec.tsx.snap
index 39bd87fbe..c9e003d09 100644
--- a/src/components/Action/__snapshots__/ActionChoose.spec.tsx.snap
+++ b/src/components/Action/__snapshots__/ActionChoose.spec.tsx.snap
@@ -1,3 +1,317 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
-exports[`ActionChoose component should render correctly 1`] = `ReactWrapper {}`;
+exports[`ActionChoose component should render correctly 1`] = `
+<Provider
+ store={
+ Object {
+ "clearActions": [Function],
+ "dispatch": [Function],
+ "getActions": [Function],
+ "getState": [Function],
+ "replaceReducer": [Function],
+ "subscribe": [Function],
+ }
+ }
+>
+ <ActionChoose
+ 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
+ className="action-choose"
+ >
+ <ActionBegin
+ setShowList={[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",
+ }
+ }
+ >
+ <div
+ className="action-begin"
+ />
+ </ActionBegin>
+ </div>
+ </ActionChoose>
+</Provider>
+`;
diff --git a/src/components/Action/__snapshots__/ActionDone.spec.tsx.snap b/src/components/Action/__snapshots__/ActionDone.spec.tsx.snap
index 6e25bc307..a2b535dc1 100644
--- a/src/components/Action/__snapshots__/ActionDone.spec.tsx.snap
+++ b/src/components/Action/__snapshots__/ActionDone.spec.tsx.snap
@@ -1,3 +1,361 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
-exports[`ActionDone component should be rendered correctly 1`] = `ReactWrapper {}`;
+exports[`ActionDone component should be rendered correctly 1`] = `
+<Provider
+ store={
+ Object {
+ "clearActions": [Function],
+ "dispatch": [Function],
+ "getActions": [Function],
+ "getState": [Function],
+ "replaceReducer": [Function],
+ "subscribe": [Function],
+ }
+ }
+>
+ <ActionDone
+ currentChallenge={
+ 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
+ className="action-done-container"
+ >
+ <div
+ className="action-done"
+ >
+ <div
+ className="result-title"
+ >
+
+ action.finished
+ </div>
+ <div
+ className="result-text text-16-normal"
+ >
+ action.resultText1
+ </div>
+ <div
+ className="result-text text-16-normal"
+ >
+ action.resultText2
+ </div>
+ <div
+ className="result-text text-16-normal"
+ >
+ action.resultText3
+ </div>
+ <div
+ className="result-text text-16-normal"
+ >
+ action.resultText4
+ </div>
+ <div
+ className="stars"
+ >
+ <span>
+ 5
+ </span>
+ <StyledIcon
+ icon="test-file-stub"
+ size={33}
+ >
+ <Icon
+ aria-hidden={true}
+ icon="test-file-stub"
+ size={33}
+ spin={false}
+ >
+ <Component
+ aria-hidden={true}
+ className="styles__icon___23x3R"
+ height={33}
+ style={Object {}}
+ width={33}
+ >
+ <svg
+ aria-hidden={true}
+ className="styles__icon___23x3R"
+ height={33}
+ style={Object {}}
+ width={33}
+ >
+ <use
+ xlinkHref="#test-file-stub"
+ />
+ </svg>
+ </Component>
+ </Icon>
+ </StyledIcon>
+ </div>
+ <WithStyles(ForwardRef(Button))
+ classes={
+ Object {
+ "label": "text-16-normal",
+ "root": "btn-secondary-negative btn-detail",
+ }
+ }
+ onClick={[Function]}
+ >
+ <ForwardRef(Button)
+ 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 text-16-normal",
+ "outlined": "MuiButton-outlined",
+ "outlinedPrimary": "MuiButton-outlinedPrimary",
+ "outlinedSecondary": "MuiButton-outlinedSecondary",
+ "outlinedSizeLarge": "MuiButton-outlinedSizeLarge",
+ "outlinedSizeSmall": "MuiButton-outlinedSizeSmall",
+ "root": "MuiButton-root btn-secondary-negative btn-detail",
+ "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))
+ className="MuiButton-root btn-secondary-negative btn-detail MuiButton-text"
+ component="button"
+ disabled={false}
+ focusRipple={true}
+ focusVisibleClassName="Mui-focusVisible"
+ onClick={[Function]}
+ type="button"
+ >
+ <ForwardRef(ButtonBase)
+ className="MuiButton-root btn-secondary-negative btn-detail MuiButton-text"
+ 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
+ className="MuiButtonBase-root MuiButton-root btn-secondary-negative btn-detail MuiButton-text"
+ 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 text-16-normal"
+ >
+ action.ok
+ </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>
+ </div>
+ </ActionDone>
+</Provider>
+`;
diff --git a/src/components/Action/__snapshots__/ActionModal.spec.tsx.snap b/src/components/Action/__snapshots__/ActionModal.spec.tsx.snap
index dedc0fd60..0c8806398 100644
--- a/src/components/Action/__snapshots__/ActionModal.spec.tsx.snap
+++ b/src/components/Action/__snapshots__/ActionModal.spec.tsx.snap
@@ -1,3 +1,1187 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
-exports[`ActionModal component should render correctly 1`] = `ReactWrapper {}`;
+exports[`ActionModal component should render correctly 1`] = `
+<Provider
+ store={
+ Object {
+ "clearActions": [Function],
+ "dispatch": [Function],
+ "getActions": [Function],
+ "getState": [Function],
+ "replaceReducer": [Function],
+ "subscribe": [Function],
+ }
+ }
+>
+ <ActionModal
+ action={
+ Object {
+ "_id": "ECOGESTURE0014",
+ "action": true,
+ "actionDuration": 3,
+ "actionName": "J’attends que les plats chauds aient refroidi avant de les mettre au réfrigérateur et je les couvre.",
+ "difficulty": 1,
+ "doing": false,
+ "efficiency": 1,
+ "equipment": false,
+ "equipmentInstallation": true,
+ "equipmentType": Array [],
+ "fluidTypes": Array [
+ 0,
+ ],
+ "id": "ECOGESTURE0014",
+ "impactLevel": 2,
+ "investment": null,
+ "longDescription": "En plaçant des plats chauds au réfrigérateur, vous réchauffez l’enceinte de l’appareil, ce qui entraîne une surconsommation. De plus, si les plats ne sont pas couverts, de la vapeur d’eau va se former et provoquer l’apparition du givre. Et couvrir les plats, c’est aussi éviter que les bactéries et les odeurs ne se répandent.",
+ "longName": "J’attends que les plats chauds aient refroidi avant de les mettre au réfrigérateur et je les couvre.",
+ "objective": false,
+ "room": Array [
+ 2,
+ ],
+ "season": "Sans saison",
+ "shortName": "Chat échaudé",
+ "usage": 5,
+ "viewedInSelection": false,
+ }
+ }
+ handleCloseClick={[MockFunction]}
+ open={true}
+ 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",
+ }
+ }
+ >
+ <WithStyles(ForwardRef(Dialog))
+ aria-labelledby="accessibility-title"
+ classes={
+ Object {
+ "paper": "modal-paper",
+ "root": "modal-root",
+ }
+ }
+ onClose={[MockFunction]}
+ open={true}
+ >
+ <ForwardRef(Dialog)
+ aria-labelledby="accessibility-title"
+ classes={
+ Object {
+ "container": "MuiDialog-container",
+ "paper": "MuiDialog-paper modal-paper",
+ "paperFullScreen": "MuiDialog-paperFullScreen",
+ "paperFullWidth": "MuiDialog-paperFullWidth",
+ "paperScrollBody": "MuiDialog-paperScrollBody",
+ "paperScrollPaper": "MuiDialog-paperScrollPaper",
+ "paperWidthFalse": "MuiDialog-paperWidthFalse",
+ "paperWidthLg": "MuiDialog-paperWidthLg",
+ "paperWidthMd": "MuiDialog-paperWidthMd",
+ "paperWidthSm": "MuiDialog-paperWidthSm",
+ "paperWidthXl": "MuiDialog-paperWidthXl",
+ "paperWidthXs": "MuiDialog-paperWidthXs",
+ "root": "MuiDialog-root modal-root",
+ "scrollBody": "MuiDialog-scrollBody",
+ "scrollPaper": "MuiDialog-scrollPaper",
+ }
+ }
+ onClose={[MockFunction]}
+ open={true}
+ >
+ <ForwardRef(Modal)
+ BackdropComponent={
+ Object {
+ "$$typeof": Symbol(react.forward_ref),
+ "Naked": Object {
+ "$$typeof": Symbol(react.forward_ref),
+ "propTypes": Object {
+ "children": [Function],
+ "className": [Function],
+ "classes": [Function],
+ "invisible": [Function],
+ "open": [Function],
+ "transitionDuration": [Function],
+ },
+ "render": [Function],
+ },
+ "displayName": "WithStyles(ForwardRef(Backdrop))",
+ "options": Object {
+ "defaultTheme": Object {
+ "breakpoints": Object {
+ "between": [Function],
+ "down": [Function],
+ "keys": Array [
+ "xs",
+ "sm",
+ "md",
+ "lg",
+ "xl",
+ ],
+ "only": [Function],
+ "up": [Function],
+ "values": Object {
+ "lg": 1280,
+ "md": 960,
+ "sm": 600,
+ "xl": 1920,
+ "xs": 0,
+ },
+ "width": [Function],
+ },
+ "direction": "ltr",
+ "mixins": Object {
+ "gutters": [Function],
+ "toolbar": Object {
+ "@media (min-width:0px) and (orientation: landscape)": Object {
+ "minHeight": 48,
+ },
+ "@media (min-width:600px)": Object {
+ "minHeight": 64,
+ },
+ "minHeight": 56,
+ },
+ },
+ "overrides": Object {},
+ "palette": Object {
+ "action": Object {
+ "activatedOpacity": 0.12,
+ "active": "rgba(0, 0, 0, 0.54)",
+ "disabled": "rgba(0, 0, 0, 0.26)",
+ "disabledBackground": "rgba(0, 0, 0, 0.12)",
+ "disabledOpacity": 0.38,
+ "focus": "rgba(0, 0, 0, 0.12)",
+ "focusOpacity": 0.12,
+ "hover": "rgba(0, 0, 0, 0.04)",
+ "hoverOpacity": 0.04,
+ "selected": "rgba(0, 0, 0, 0.08)",
+ "selectedOpacity": 0.08,
+ },
+ "augmentColor": [Function],
+ "background": Object {
+ "default": "#fafafa",
+ "paper": "#fff",
+ },
+ "common": Object {
+ "black": "#000",
+ "white": "#fff",
+ },
+ "contrastThreshold": 3,
+ "divider": "rgba(0, 0, 0, 0.12)",
+ "error": Object {
+ "contrastText": "#fff",
+ "dark": "#d32f2f",
+ "light": "#e57373",
+ "main": "#f44336",
+ },
+ "getContrastText": [Function],
+ "grey": Object {
+ "100": "#f5f5f5",
+ "200": "#eeeeee",
+ "300": "#e0e0e0",
+ "400": "#bdbdbd",
+ "50": "#fafafa",
+ "500": "#9e9e9e",
+ "600": "#757575",
+ "700": "#616161",
+ "800": "#424242",
+ "900": "#212121",
+ "A100": "#d5d5d5",
+ "A200": "#aaaaaa",
+ "A400": "#303030",
+ "A700": "#616161",
+ },
+ "info": Object {
+ "contrastText": "#fff",
+ "dark": "#1976d2",
+ "light": "#64b5f6",
+ "main": "#2196f3",
+ },
+ "primary": Object {
+ "contrastText": "#fff",
+ "dark": "#303f9f",
+ "light": "#7986cb",
+ "main": "#3f51b5",
+ },
+ "secondary": Object {
+ "contrastText": "#fff",
+ "dark": "#c51162",
+ "light": "#ff4081",
+ "main": "#f50057",
+ },
+ "success": Object {
+ "contrastText": "rgba(0, 0, 0, 0.87)",
+ "dark": "#388e3c",
+ "light": "#81c784",
+ "main": "#4caf50",
+ },
+ "text": Object {
+ "disabled": "rgba(0, 0, 0, 0.38)",
+ "hint": "rgba(0, 0, 0, 0.38)",
+ "primary": "rgba(0, 0, 0, 0.87)",
+ "secondary": "rgba(0, 0, 0, 0.54)",
+ },
+ "tonalOffset": 0.2,
+ "type": "light",
+ "warning": Object {
+ "contrastText": "rgba(0, 0, 0, 0.87)",
+ "dark": "#f57c00",
+ "light": "#ffb74d",
+ "main": "#ff9800",
+ },
+ },
+ "props": Object {},
+ "shadows": Array [
+ "none",
+ "0px 2px 1px -1px rgba(0,0,0,0.2),0px 1px 1px 0px rgba(0,0,0,0.14),0px 1px 3px 0px rgba(0,0,0,0.12)",
+ "0px 3px 1px -2px rgba(0,0,0,0.2),0px 2px 2px 0px rgba(0,0,0,0.14),0px 1px 5px 0px rgba(0,0,0,0.12)",
+ "0px 3px 3px -2px rgba(0,0,0,0.2),0px 3px 4px 0px rgba(0,0,0,0.14),0px 1px 8px 0px rgba(0,0,0,0.12)",
+ "0px 2px 4px -1px rgba(0,0,0,0.2),0px 4px 5px 0px rgba(0,0,0,0.14),0px 1px 10px 0px rgba(0,0,0,0.12)",
+ "0px 3px 5px -1px rgba(0,0,0,0.2),0px 5px 8px 0px rgba(0,0,0,0.14),0px 1px 14px 0px rgba(0,0,0,0.12)",
+ "0px 3px 5px -1px rgba(0,0,0,0.2),0px 6px 10px 0px rgba(0,0,0,0.14),0px 1px 18px 0px rgba(0,0,0,0.12)",
+ "0px 4px 5px -2px rgba(0,0,0,0.2),0px 7px 10px 1px rgba(0,0,0,0.14),0px 2px 16px 1px rgba(0,0,0,0.12)",
+ "0px 5px 5px -3px rgba(0,0,0,0.2),0px 8px 10px 1px rgba(0,0,0,0.14),0px 3px 14px 2px rgba(0,0,0,0.12)",
+ "0px 5px 6px -3px rgba(0,0,0,0.2),0px 9px 12px 1px rgba(0,0,0,0.14),0px 3px 16px 2px rgba(0,0,0,0.12)",
+ "0px 6px 6px -3px rgba(0,0,0,0.2),0px 10px 14px 1px rgba(0,0,0,0.14),0px 4px 18px 3px rgba(0,0,0,0.12)",
+ "0px 6px 7px -4px rgba(0,0,0,0.2),0px 11px 15px 1px rgba(0,0,0,0.14),0px 4px 20px 3px rgba(0,0,0,0.12)",
+ "0px 7px 8px -4px rgba(0,0,0,0.2),0px 12px 17px 2px rgba(0,0,0,0.14),0px 5px 22px 4px rgba(0,0,0,0.12)",
+ "0px 7px 8px -4px rgba(0,0,0,0.2),0px 13px 19px 2px rgba(0,0,0,0.14),0px 5px 24px 4px rgba(0,0,0,0.12)",
+ "0px 7px 9px -4px rgba(0,0,0,0.2),0px 14px 21px 2px rgba(0,0,0,0.14),0px 5px 26px 4px rgba(0,0,0,0.12)",
+ "0px 8px 9px -5px rgba(0,0,0,0.2),0px 15px 22px 2px rgba(0,0,0,0.14),0px 6px 28px 5px rgba(0,0,0,0.12)",
+ "0px 8px 10px -5px rgba(0,0,0,0.2),0px 16px 24px 2px rgba(0,0,0,0.14),0px 6px 30px 5px rgba(0,0,0,0.12)",
+ "0px 8px 11px -5px rgba(0,0,0,0.2),0px 17px 26px 2px rgba(0,0,0,0.14),0px 6px 32px 5px rgba(0,0,0,0.12)",
+ "0px 9px 11px -5px rgba(0,0,0,0.2),0px 18px 28px 2px rgba(0,0,0,0.14),0px 7px 34px 6px rgba(0,0,0,0.12)",
+ "0px 9px 12px -6px rgba(0,0,0,0.2),0px 19px 29px 2px rgba(0,0,0,0.14),0px 7px 36px 6px rgba(0,0,0,0.12)",
+ "0px 10px 13px -6px rgba(0,0,0,0.2),0px 20px 31px 3px rgba(0,0,0,0.14),0px 8px 38px 7px rgba(0,0,0,0.12)",
+ "0px 10px 13px -6px rgba(0,0,0,0.2),0px 21px 33px 3px rgba(0,0,0,0.14),0px 8px 40px 7px rgba(0,0,0,0.12)",
+ "0px 10px 14px -6px rgba(0,0,0,0.2),0px 22px 35px 3px rgba(0,0,0,0.14),0px 8px 42px 7px rgba(0,0,0,0.12)",
+ "0px 11px 14px -7px rgba(0,0,0,0.2),0px 23px 36px 3px rgba(0,0,0,0.14),0px 9px 44px 8px rgba(0,0,0,0.12)",
+ "0px 11px 15px -7px rgba(0,0,0,0.2),0px 24px 38px 3px rgba(0,0,0,0.14),0px 9px 46px 8px rgba(0,0,0,0.12)",
+ ],
+ "shape": Object {
+ "borderRadius": 4,
+ },
+ "spacing": [Function],
+ "transitions": Object {
+ "create": [Function],
+ "duration": Object {
+ "complex": 375,
+ "enteringScreen": 225,
+ "leavingScreen": 195,
+ "short": 250,
+ "shorter": 200,
+ "shortest": 150,
+ "standard": 300,
+ },
+ "easing": Object {
+ "easeIn": "cubic-bezier(0.4, 0, 1, 1)",
+ "easeInOut": "cubic-bezier(0.4, 0, 0.2, 1)",
+ "easeOut": "cubic-bezier(0.0, 0, 0.2, 1)",
+ "sharp": "cubic-bezier(0.4, 0, 0.6, 1)",
+ },
+ "getAutoHeightDuration": [Function],
+ },
+ "typography": Object {
+ "body1": Object {
+ "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
+ "fontSize": "1rem",
+ "fontWeight": 400,
+ "letterSpacing": "0.00938em",
+ "lineHeight": 1.5,
+ },
+ "body2": Object {
+ "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
+ "fontSize": "0.875rem",
+ "fontWeight": 400,
+ "letterSpacing": "0.01071em",
+ "lineHeight": 1.43,
+ },
+ "button": Object {
+ "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
+ "fontSize": "0.875rem",
+ "fontWeight": 500,
+ "letterSpacing": "0.02857em",
+ "lineHeight": 1.75,
+ "textTransform": "uppercase",
+ },
+ "caption": Object {
+ "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
+ "fontSize": "0.75rem",
+ "fontWeight": 400,
+ "letterSpacing": "0.03333em",
+ "lineHeight": 1.66,
+ },
+ "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
+ "fontSize": 14,
+ "fontWeightBold": 700,
+ "fontWeightLight": 300,
+ "fontWeightMedium": 500,
+ "fontWeightRegular": 400,
+ "h1": Object {
+ "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
+ "fontSize": "6rem",
+ "fontWeight": 300,
+ "letterSpacing": "-0.01562em",
+ "lineHeight": 1.167,
+ },
+ "h2": Object {
+ "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
+ "fontSize": "3.75rem",
+ "fontWeight": 300,
+ "letterSpacing": "-0.00833em",
+ "lineHeight": 1.2,
+ },
+ "h3": Object {
+ "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
+ "fontSize": "3rem",
+ "fontWeight": 400,
+ "letterSpacing": "0em",
+ "lineHeight": 1.167,
+ },
+ "h4": Object {
+ "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
+ "fontSize": "2.125rem",
+ "fontWeight": 400,
+ "letterSpacing": "0.00735em",
+ "lineHeight": 1.235,
+ },
+ "h5": Object {
+ "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
+ "fontSize": "1.5rem",
+ "fontWeight": 400,
+ "letterSpacing": "0em",
+ "lineHeight": 1.334,
+ },
+ "h6": Object {
+ "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
+ "fontSize": "1.25rem",
+ "fontWeight": 500,
+ "letterSpacing": "0.0075em",
+ "lineHeight": 1.6,
+ },
+ "htmlFontSize": 16,
+ "overline": Object {
+ "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
+ "fontSize": "0.75rem",
+ "fontWeight": 400,
+ "letterSpacing": "0.08333em",
+ "lineHeight": 2.66,
+ "textTransform": "uppercase",
+ },
+ "pxToRem": [Function],
+ "round": [Function],
+ "subtitle1": Object {
+ "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
+ "fontSize": "1rem",
+ "fontWeight": 400,
+ "letterSpacing": "0.00938em",
+ "lineHeight": 1.75,
+ },
+ "subtitle2": Object {
+ "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
+ "fontSize": "0.875rem",
+ "fontWeight": 500,
+ "letterSpacing": "0.00714em",
+ "lineHeight": 1.57,
+ },
+ },
+ "zIndex": Object {
+ "appBar": 1100,
+ "drawer": 1200,
+ "mobileStepper": 1000,
+ "modal": 1300,
+ "snackbar": 1400,
+ "speedDial": 1050,
+ "tooltip": 1500,
+ },
+ },
+ "name": "MuiBackdrop",
+ },
+ "propTypes": Object {
+ "classes": [Function],
+ "innerRef": [Function],
+ },
+ "render": [Function],
+ "useStyles": [Function],
+ }
+ }
+ BackdropProps={
+ Object {
+ "transitionDuration": Object {
+ "enter": 225,
+ "exit": 195,
+ },
+ }
+ }
+ className="MuiDialog-root modal-root"
+ closeAfterTransition={true}
+ disableEscapeKeyDown={false}
+ onClose={[MockFunction]}
+ open={true}
+ >
+ <ForwardRef(Portal)
+ disablePortal={false}
+ >
+ <Portal
+ containerInfo={
+ <body
+ style="padding-right: 0px; overflow: hidden;"
+ >
+ <div
+ class="MuiDialog-root modal-root"
+ role="presentation"
+ style="position: fixed; z-index: 1300; right: 0px; bottom: 0px; top: 0px; left: 0px;"
+ >
+ <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
+ 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"
+ >
+ <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"
+ >
+ action_modal.accessibility.window_title
+ </div>
+ <div
+ class="action-modal"
+ >
+ <svg
+ class="styles__icon___23x3R"
+ height="75"
+ width="75"
+ >
+ <use
+ xlink:href="#test-file-stub"
+ />
+ </svg>
+ <div
+ class="action-title text-16-normal"
+ >
+ action.duration
+ </div>
+ <div
+ class="action-text text-16-normal"
+ >
+ J’attends que les plats chauds aient refroidi avant de les mettre au réfrigérateur et je les couvre.
+ </div>
+ <div
+ class="buttons"
+ >
+ <button
+ aria-label="action_modal.accessibility.button_accept"
+ class="MuiButtonBase-root MuiButton-root btn-secondary-negative MuiButton-text"
+ tabindex="0"
+ type="button"
+ >
+ <span
+ class="MuiButton-label text-16-normal"
+ >
+ action_modal.accept
+ </span>
+ <span
+ class="MuiTouchRipple-root"
+ />
+ </button>
+ <button
+ aria-label="action_modal.accessibility.button_refuse"
+ class="MuiButtonBase-root MuiButton-root btn-secondary-negative MuiButton-text"
+ tabindex="0"
+ type="button"
+ >
+ <span
+ class="MuiButton-label text-16-normal"
+ >
+ action_modal.refuse
+ </span>
+ <span
+ class="MuiTouchRipple-root"
+ />
+ </button>
+ </div>
+ </div>
+ </div>
+ </div>
+ <div
+ data-test="sentinelEnd"
+ tabindex="0"
+ />
+ </div>
+ </body>
+ }
+ >
+ <div
+ className="MuiDialog-root modal-root"
+ onKeyDown={[Function]}
+ role="presentation"
+ style={
+ Object {
+ "bottom": 0,
+ "left": 0,
+ "position": "fixed",
+ "right": 0,
+ "top": 0,
+ "zIndex": 1300,
+ }
+ }
+ >
+ <WithStyles(ForwardRef(Backdrop))
+ onClick={[Function]}
+ open={true}
+ transitionDuration={
+ Object {
+ "enter": 225,
+ "exit": 195,
+ }
+ }
+ >
+ <ForwardRef(Backdrop)
+ classes={
+ Object {
+ "invisible": "MuiBackdrop-invisible",
+ "root": "MuiBackdrop-root",
+ }
+ }
+ onClick={[Function]}
+ open={true}
+ transitionDuration={
+ Object {
+ "enter": 225,
+ "exit": 195,
+ }
+ }
+ >
+ <ForwardRef(Fade)
+ in={true}
+ onClick={[Function]}
+ timeout={
+ Object {
+ "enter": 225,
+ "exit": 195,
+ }
+ }
+ >
+ <Transition
+ appear={true}
+ enter={true}
+ exit={true}
+ in={true}
+ mountOnEnter={false}
+ onClick={[Function]}
+ onEnter={[Function]}
+ onEntered={[Function]}
+ onEntering={[Function]}
+ onExit={[Function]}
+ onExited={[Function]}
+ onExiting={[Function]}
+ timeout={
+ Object {
+ "enter": 225,
+ "exit": 195,
+ }
+ }
+ unmountOnExit={false}
+ >
+ <div
+ aria-hidden={true}
+ className="MuiBackdrop-root"
+ onClick={[Function]}
+ style={
+ Object {
+ "opacity": 1,
+ "visibility": undefined,
+ }
+ }
+ />
+ </Transition>
+ </ForwardRef(Fade)>
+ </ForwardRef(Backdrop)>
+ </WithStyles(ForwardRef(Backdrop))>
+ <Unstable_TrapFocus
+ disableAutoFocus={false}
+ disableEnforceFocus={false}
+ disableRestoreFocus={false}
+ getDoc={[Function]}
+ isEnabled={[Function]}
+ open={true}
+ >
+ <div
+ data-test="sentinelStart"
+ tabIndex={0}
+ />
+ <ForwardRef(Fade)
+ appear={true}
+ in={true}
+ onEnter={[Function]}
+ onExited={[Function]}
+ role="none presentation"
+ tabIndex="-1"
+ timeout={
+ Object {
+ "enter": 225,
+ "exit": 195,
+ }
+ }
+ >
+ <Transition
+ appear={true}
+ enter={true}
+ exit={true}
+ in={true}
+ mountOnEnter={false}
+ onEnter={[Function]}
+ onEntered={[Function]}
+ onEntering={[Function]}
+ onExit={[Function]}
+ onExited={[Function]}
+ onExiting={[Function]}
+ role="none presentation"
+ tabIndex="-1"
+ timeout={
+ Object {
+ "enter": 225,
+ "exit": 195,
+ }
+ }
+ unmountOnExit={false}
+ >
+ <div
+ className="MuiDialog-container MuiDialog-scrollPaper"
+ onMouseDown={[Function]}
+ onMouseUp={[Function]}
+ role="none presentation"
+ style={
+ Object {
+ "opacity": 1,
+ "visibility": undefined,
+ }
+ }
+ tabIndex="-1"
+ >
+ <WithStyles(ForwardRef(Paper))
+ aria-labelledby="accessibility-title"
+ className="MuiDialog-paper modal-paper MuiDialog-paperScrollPaper MuiDialog-paperWidthSm"
+ elevation={24}
+ role="dialog"
+ >
+ <ForwardRef(Paper)
+ aria-labelledby="accessibility-title"
+ className="MuiDialog-paper modal-paper MuiDialog-paperScrollPaper MuiDialog-paperWidthSm"
+ classes={
+ Object {
+ "elevation0": "MuiPaper-elevation0",
+ "elevation1": "MuiPaper-elevation1",
+ "elevation10": "MuiPaper-elevation10",
+ "elevation11": "MuiPaper-elevation11",
+ "elevation12": "MuiPaper-elevation12",
+ "elevation13": "MuiPaper-elevation13",
+ "elevation14": "MuiPaper-elevation14",
+ "elevation15": "MuiPaper-elevation15",
+ "elevation16": "MuiPaper-elevation16",
+ "elevation17": "MuiPaper-elevation17",
+ "elevation18": "MuiPaper-elevation18",
+ "elevation19": "MuiPaper-elevation19",
+ "elevation2": "MuiPaper-elevation2",
+ "elevation20": "MuiPaper-elevation20",
+ "elevation21": "MuiPaper-elevation21",
+ "elevation22": "MuiPaper-elevation22",
+ "elevation23": "MuiPaper-elevation23",
+ "elevation24": "MuiPaper-elevation24",
+ "elevation3": "MuiPaper-elevation3",
+ "elevation4": "MuiPaper-elevation4",
+ "elevation5": "MuiPaper-elevation5",
+ "elevation6": "MuiPaper-elevation6",
+ "elevation7": "MuiPaper-elevation7",
+ "elevation8": "MuiPaper-elevation8",
+ "elevation9": "MuiPaper-elevation9",
+ "outlined": "MuiPaper-outlined",
+ "root": "MuiPaper-root",
+ "rounded": "MuiPaper-rounded",
+ }
+ }
+ elevation={24}
+ role="dialog"
+ >
+ <div
+ aria-labelledby="accessibility-title"
+ className="MuiPaper-root MuiDialog-paper modal-paper MuiDialog-paperScrollPaper MuiDialog-paperWidthSm MuiPaper-elevation24 MuiPaper-rounded"
+ role="dialog"
+ >
+ <div
+ id="accessibility-title"
+ >
+ action_modal.accessibility.window_title
+ </div>
+ <div
+ className="action-modal"
+ >
+ <Icon
+ icon="test-file-stub"
+ size={75}
+ spin={false}
+ >
+ <Component
+ className="styles__icon___23x3R"
+ height={75}
+ style={Object {}}
+ width={75}
+ >
+ <svg
+ className="styles__icon___23x3R"
+ height={75}
+ style={Object {}}
+ width={75}
+ >
+ <use
+ xlinkHref="#test-file-stub"
+ />
+ </svg>
+ </Component>
+ </Icon>
+ <div
+ className="action-title text-16-normal"
+ >
+ action.duration
+ </div>
+ <div
+ className="action-text text-16-normal"
+ >
+ J’attends que les plats chauds aient refroidi avant de les mettre au réfrigérateur et je les couvre.
+ </div>
+ <div
+ className="buttons"
+ >
+ <WithStyles(ForwardRef(Button))
+ aria-label="action_modal.accessibility.button_accept"
+ classes={
+ Object {
+ "label": "text-16-normal",
+ "root": "btn-secondary-negative",
+ }
+ }
+ onClick={[Function]}
+ >
+ <ForwardRef(Button)
+ aria-label="action_modal.accessibility.button_accept"
+ 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 text-16-normal",
+ "outlined": "MuiButton-outlined",
+ "outlinedPrimary": "MuiButton-outlinedPrimary",
+ "outlinedSecondary": "MuiButton-outlinedSecondary",
+ "outlinedSizeLarge": "MuiButton-outlinedSizeLarge",
+ "outlinedSizeSmall": "MuiButton-outlinedSizeSmall",
+ "root": "MuiButton-root btn-secondary-negative",
+ "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="action_modal.accessibility.button_accept"
+ className="MuiButton-root btn-secondary-negative MuiButton-text"
+ component="button"
+ disabled={false}
+ focusRipple={true}
+ focusVisibleClassName="Mui-focusVisible"
+ onClick={[Function]}
+ type="button"
+ >
+ <ForwardRef(ButtonBase)
+ aria-label="action_modal.accessibility.button_accept"
+ className="MuiButton-root btn-secondary-negative MuiButton-text"
+ 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="action_modal.accessibility.button_accept"
+ className="MuiButtonBase-root MuiButton-root btn-secondary-negative MuiButton-text"
+ 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 text-16-normal"
+ >
+ action_modal.accept
+ </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="action_modal.accessibility.button_refuse"
+ classes={
+ Object {
+ "label": "text-16-normal",
+ "root": "btn-secondary-negative",
+ }
+ }
+ onClick={[MockFunction]}
+ >
+ <ForwardRef(Button)
+ aria-label="action_modal.accessibility.button_refuse"
+ 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 text-16-normal",
+ "outlined": "MuiButton-outlined",
+ "outlinedPrimary": "MuiButton-outlinedPrimary",
+ "outlinedSecondary": "MuiButton-outlinedSecondary",
+ "outlinedSizeLarge": "MuiButton-outlinedSizeLarge",
+ "outlinedSizeSmall": "MuiButton-outlinedSizeSmall",
+ "root": "MuiButton-root btn-secondary-negative",
+ "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={[MockFunction]}
+ >
+ <WithStyles(ForwardRef(ButtonBase))
+ aria-label="action_modal.accessibility.button_refuse"
+ className="MuiButton-root btn-secondary-negative MuiButton-text"
+ component="button"
+ disabled={false}
+ focusRipple={true}
+ focusVisibleClassName="Mui-focusVisible"
+ onClick={[MockFunction]}
+ type="button"
+ >
+ <ForwardRef(ButtonBase)
+ aria-label="action_modal.accessibility.button_refuse"
+ className="MuiButton-root btn-secondary-negative MuiButton-text"
+ classes={
+ Object {
+ "disabled": "Mui-disabled",
+ "focusVisible": "Mui-focusVisible",
+ "root": "MuiButtonBase-root",
+ }
+ }
+ component="button"
+ disabled={false}
+ focusRipple={true}
+ focusVisibleClassName="Mui-focusVisible"
+ onClick={[MockFunction]}
+ type="button"
+ >
+ <button
+ aria-label="action_modal.accessibility.button_refuse"
+ className="MuiButtonBase-root MuiButton-root btn-secondary-negative MuiButton-text"
+ disabled={false}
+ onBlur={[Function]}
+ onClick={[MockFunction]}
+ 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 text-16-normal"
+ >
+ action_modal.refuse
+ </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>
+ </div>
+ </div>
+ </ForwardRef(Paper)>
+ </WithStyles(ForwardRef(Paper))>
+ </div>
+ </Transition>
+ </ForwardRef(Fade)>
+ <div
+ data-test="sentinelEnd"
+ tabIndex={0}
+ />
+ </Unstable_TrapFocus>
+ </div>
+ </Portal>
+ </ForwardRef(Portal)>
+ </ForwardRef(Modal)>
+ </ForwardRef(Dialog)>
+ </WithStyles(ForwardRef(Dialog))>
+ </ActionModal>
+</Provider>
+`;
diff --git a/src/components/Action/__snapshots__/ActionOnGoing.spec.tsx.snap b/src/components/Action/__snapshots__/ActionOnGoing.spec.tsx.snap
index 052482d29..b864a4b10 100644
--- a/src/components/Action/__snapshots__/ActionOnGoing.spec.tsx.snap
+++ b/src/components/Action/__snapshots__/ActionOnGoing.spec.tsx.snap
@@ -1,3 +1,30 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
-exports[`ActionOnGoing component should render correctly 1`] = `ReactWrapper {}`;
+exports[`ActionOnGoing component should render correctly 1`] = `
+<Provider
+ store={
+ Object {
+ "clearActions": [Function],
+ "dispatch": [Function],
+ "getActions": [Function],
+ "getState": [Function],
+ "replaceReducer": [Function],
+ "subscribe": [Function],
+ }
+ }
+>
+ <ActionOnGoing
+ userAction={
+ Object {
+ "ecogesture": null,
+ "startDate": "2023-06-20T00:00:00.000Z",
+ "state": 1,
+ }
+ }
+ >
+ <div
+ className="action-ongoing"
+ />
+ </ActionOnGoing>
+</Provider>
+`;
diff --git a/src/components/Action/__snapshots__/ActionView.spec.tsx.snap b/src/components/Action/__snapshots__/ActionView.spec.tsx.snap
index cf32fed7e..5dd71af41 100644
--- a/src/components/Action/__snapshots__/ActionView.spec.tsx.snap
+++ b/src/components/Action/__snapshots__/ActionView.spec.tsx.snap
@@ -1,3 +1,328 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
-exports[`ActionView component should render ActionChoose component 1`] = `ReactWrapper {}`;
+exports[`ActionView component should render ActionChoose component 1`] = `
+<Provider
+ store={
+ Object {
+ "clearActions": [Function],
+ "dispatch": [Function],
+ "getActions": [Function],
+ "getState": [Function],
+ "replaceReducer": [Function],
+ "subscribe": [Function],
+ }
+ }
+>
+ <ActionView>
+ <mock-cozybar
+ displayBackArrow={true}
+ titleKey="common.title_action"
+ />
+ <mock-header
+ desktopTitleKey="common.title_action"
+ displayBackArrow={true}
+ setHeaderHeight={[Function]}
+ />
+ <mock-content
+ height={0}
+ >
+ <ActionChoose
+ 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
+ className="action-choose"
+ >
+ <mock-action-begin
+ setShowList={[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",
+ }
+ }
+ />
+ </div>
+ </ActionChoose>
+ </mock-content>
+ </ActionView>
+</Provider>
+`;
diff --git a/src/components/Analysis/AnalysisConsumption.spec.tsx b/src/components/Analysis/AnalysisConsumption.spec.tsx
index 963c6b64f..0e19f2b8e 100644
--- a/src/components/Analysis/AnalysisConsumption.spec.tsx
+++ b/src/components/Analysis/AnalysisConsumption.spec.tsx
@@ -6,7 +6,6 @@ import { FluidType } from 'enum/fluid.enum'
import { mount } from 'enzyme'
import { PerformanceIndicator } from 'models'
import React from 'react'
-import { act } from 'react-dom/test-utils'
import { Provider } from 'react-redux'
import configureStore from 'redux-mock-store'
import { globalStateData } from '../../../tests/__mocks__/globalStateData.mock'
@@ -16,6 +15,7 @@ import {
profileTypeData,
} from '../../../tests/__mocks__/profileType.mock'
import { mockAnalysisState } from '../../../tests/__mocks__/store'
+import { waitForComponentToPaint } from '../../../tests/__mocks__/testUtils'
jest.mock('cozy-ui/transpiled/react/I18n', () => {
return {
@@ -99,10 +99,7 @@ describe('AnalysisConsumption component', () => {
/>
</Provider>
)
- await act(async () => {
- await new Promise(resolve => setTimeout(resolve))
- wrapper.update()
- })
+ await waitForComponentToPaint(wrapper)
expect(wrapper.find(Accordion).exists()).toBeTruthy()
expect(wrapper.find('#analysisconsumptionrow').length).toBe(4)
})
@@ -121,10 +118,7 @@ describe('AnalysisConsumption component', () => {
/>
</Provider>
)
- await act(async () => {
- await new Promise(resolve => setTimeout(resolve))
- wrapper.update()
- })
+ await waitForComponentToPaint(wrapper)
expect(wrapper.find(Button).exists()).toBeTruthy()
})
@@ -142,10 +136,7 @@ describe('AnalysisConsumption component', () => {
/>
</Provider>
)
- await act(async () => {
- await new Promise(resolve => setTimeout(resolve))
- wrapper.update()
- })
+ await waitForComponentToPaint(wrapper)
expect(wrapper.find(Accordion).exists()).toBeTruthy()
expect(wrapper.find('#analysisconsumptionrow').length).toBe(4)
})
@@ -159,10 +150,7 @@ describe('AnalysisConsumption component', () => {
/>
</Provider>
)
- await act(async () => {
- await new Promise(resolve => setTimeout(resolve))
- wrapper.update()
- })
+ await waitForComponentToPaint(wrapper)
expect(
wrapper.find('#analysisconsumptionrow').first().parent().prop('fluid')
).toBe(FluidType.MULTIFLUID)
@@ -193,10 +181,7 @@ describe('AnalysisConsumption component', () => {
/>
</Provider>
)
- await act(async () => {
- await new Promise(resolve => setTimeout(resolve))
- wrapper.update()
- })
+ await waitForComponentToPaint(wrapper)
expect(mockgetMonthlyForecast).toHaveBeenCalledWith(
profileData.monthlyAnalysisDate.month - 1
)
@@ -224,10 +209,7 @@ describe('AnalysisConsumption component', () => {
/>
</Provider>
)
- await act(async () => {
- await new Promise(resolve => setTimeout(resolve))
- wrapper.update()
- })
+ await waitForComponentToPaint(wrapper)
expect(mockgetMonthlyForecast).toHaveBeenCalledWith(
profileData.monthlyAnalysisDate.month - 1
)
@@ -245,10 +227,7 @@ describe('AnalysisConsumption component', () => {
/>
</Provider>
)
- await act(async () => {
- await new Promise(resolve => setTimeout(resolve))
- wrapper.update()
- })
+ await waitForComponentToPaint(wrapper)
wrapper.find(Button).first().simulate('click')
expect(mockedNavigate).toBeCalledWith('/profileType')
})
diff --git a/src/components/Analysis/ElecHalfHourChart.spec.tsx b/src/components/Analysis/ElecHalfHourChart.spec.tsx
index 8cb417f25..b9e16b2aa 100644
--- a/src/components/Analysis/ElecHalfHourChart.spec.tsx
+++ b/src/components/Analysis/ElecHalfHourChart.spec.tsx
@@ -1,4 +1,5 @@
import { mount } from 'enzyme'
+import toJson from 'enzyme-to-json'
import { DateTime } from 'luxon'
import React from 'react'
import * as reactRedux from 'react-redux'
@@ -44,8 +45,8 @@ describe('ElecHalfHourChart component', () => {
<Provider store={store}>
<ElecHalfHourChart dataLoad={dataLoadArray} isWeekend={true} />
</Provider>
- ).getElement()
- expect(wrapper).toMatchSnapshot()
+ )
+ expect(toJson(wrapper)).toMatchSnapshot()
})
it('should render week data', () => {
const store = mockStore({
diff --git a/src/components/Analysis/MaxConsumptionCard.spec.tsx b/src/components/Analysis/MaxConsumptionCard.spec.tsx
index 717f549a0..a4273b052 100644
--- a/src/components/Analysis/MaxConsumptionCard.spec.tsx
+++ b/src/components/Analysis/MaxConsumptionCard.spec.tsx
@@ -1,5 +1,6 @@
import { FluidType } from 'enum/fluid.enum'
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'
@@ -58,7 +59,7 @@ describe('MaxConsumptionCard component', () => {
</Provider>
)
await waitForComponentToPaint(wrapper)
- expect(wrapper).toMatchSnapshot()
+ expect(toJson(wrapper)).toMatchSnapshot()
expect(wrapper.find('mock-BarChart').exists()).toBeTruthy()
})
it('should be rendered with one fluid and not display arrows', async () => {
diff --git a/src/components/Analysis/PieChart.spec.tsx b/src/components/Analysis/PieChart.spec.tsx
index 84bba0ee8..130cf415b 100644
--- a/src/components/Analysis/PieChart.spec.tsx
+++ b/src/components/Analysis/PieChart.spec.tsx
@@ -1,5 +1,6 @@
import { DataloadState } from 'enum/dataload.enum'
import { mount } from 'enzyme'
+import toJson from 'enzyme-to-json'
import { DateTime } from 'luxon'
import { DataloadValueDetail } from 'models'
import React from 'react'
@@ -55,8 +56,8 @@ describe('PieChart component', () => {
dataloadValueDetailArray={mockDataloadValueDetailArray}
/>
</Provider>
- ).getElement()
- expect(wrapper).toMatchSnapshot()
+ )
+ expect(toJson(wrapper)).toMatchSnapshot()
})
it('should open estimation modal', () => {
const store = mockStore({
diff --git a/src/components/Analysis/TotalAnalysisChart.spec.tsx b/src/components/Analysis/TotalAnalysisChart.spec.tsx
index f214ab9c2..bff43f5a9 100644
--- a/src/components/Analysis/TotalAnalysisChart.spec.tsx
+++ b/src/components/Analysis/TotalAnalysisChart.spec.tsx
@@ -1,14 +1,15 @@
import { DataloadState } from 'enum/dataload.enum'
import { FluidType } from 'enum/fluid.enum'
import { mount } from 'enzyme'
+import toJson from 'enzyme-to-json'
import { DateTime } from 'luxon'
import { Datachart } from 'models'
import React from 'react'
-import { act } from 'react-dom/test-utils'
import { Provider } from 'react-redux'
import configureStore from 'redux-mock-store'
import { graphMonthData } from '../../../tests/__mocks__/chartData.mock'
import { mockAnalysisState } from '../../../tests/__mocks__/store'
+import { waitForComponentToPaint } from '../../../tests/__mocks__/testUtils'
import TotalAnalysisChart from './TotalAnalysisChart'
jest.mock('cozy-ui/transpiled/react/I18n', () => {
@@ -42,8 +43,8 @@ describe('TotalAnalysisChart component', () => {
<Provider store={store}>
<TotalAnalysisChart fluidTypes={[FluidType.ELECTRICITY]} />
</Provider>
- ).getElement()
- expect(wrapper).toMatchSnapshot()
+ )
+ expect(toJson(wrapper)).toMatchSnapshot()
})
it('should render several fluids and display month data', async () => {
mockgetGraphData.mockResolvedValueOnce(graphMonthData)
@@ -54,10 +55,7 @@ describe('TotalAnalysisChart component', () => {
/>
</Provider>
)
- await act(async () => {
- await new Promise(resolve => setTimeout(resolve))
- wrapper.update()
- })
+ await waitForComponentToPaint(wrapper)
expect(wrapper.find('.fluidconso').exists()).toBeTruthy()
})
it('should render empty price', async () => {
@@ -82,10 +80,7 @@ describe('TotalAnalysisChart component', () => {
/>
</Provider>
)
- await act(async () => {
- await new Promise(resolve => setTimeout(resolve))
- wrapper.update()
- })
+ await waitForComponentToPaint(wrapper)
expect(wrapper.find('.fluidconso').text()).toBe('--- €')
})
it('should render empty price for one fluid', async () => {
@@ -108,10 +103,7 @@ describe('TotalAnalysisChart component', () => {
<TotalAnalysisChart fluidTypes={[FluidType.ELECTRICITY]} />
</Provider>
)
- await act(async () => {
- await new Promise(resolve => setTimeout(resolve))
- wrapper.update()
- })
+ await waitForComponentToPaint(wrapper)
expect(wrapper.find('.fluidconso').exists()).toBe(false)
})
})
diff --git a/src/components/Analysis/__snapshots__/ElecHalfHourChart.spec.tsx.snap b/src/components/Analysis/__snapshots__/ElecHalfHourChart.spec.tsx.snap
index 8e10e4a99..7392efb5b 100644
--- a/src/components/Analysis/__snapshots__/ElecHalfHourChart.spec.tsx.snap
+++ b/src/components/Analysis/__snapshots__/ElecHalfHourChart.spec.tsx.snap
@@ -43,6 +43,268 @@ exports[`ElecHalfHourChart component should be rendered correctly 1`] = `
]
}
isWeekend={true}
- />
+ >
+ <div
+ className="graph-elec-half-hour"
+ >
+ <svg
+ height={0}
+ width={0}
+ >
+ <AxisRight
+ fluidType={0}
+ isAnalysis={true}
+ marginRight={60}
+ marginTop={0}
+ width={0}
+ yScale={[Function]}
+ >
+ <g
+ className="axis y"
+ transform="translate(-60, 0)"
+ />
+ </AxisRight>
+ <g
+ transform="translate(10,0)"
+ >
+ <Bar
+ compare={false}
+ compareDataload={null}
+ dataload={
+ Object {
+ "date": "2021-09-23T00:00:00.000Z",
+ "state": "VALID",
+ "value": 12,
+ "valueDetail": null,
+ }
+ }
+ fluidType={0}
+ height={-30}
+ index={0}
+ isDuel={false}
+ isSwitching={false}
+ key="0"
+ timeStep={10}
+ weekdays="weekend"
+ xScale={[Function]}
+ yScale={[Function]}
+ >
+ <g />
+ </Bar>
+ <Bar
+ compare={false}
+ compareDataload={null}
+ dataload={
+ Object {
+ "date": "2021-09-23T00:00:00.000Z",
+ "state": "VALID",
+ "value": 12,
+ "valueDetail": null,
+ }
+ }
+ fluidType={0}
+ height={-30}
+ index={1}
+ isDuel={false}
+ isSwitching={false}
+ key="1"
+ timeStep={10}
+ weekdays="weekend"
+ xScale={[Function]}
+ yScale={[Function]}
+ >
+ <g />
+ </Bar>
+ <Bar
+ compare={false}
+ compareDataload={null}
+ dataload={
+ Object {
+ "date": "2021-09-23T00:00:00.000Z",
+ "state": "VALID",
+ "value": 12,
+ "valueDetail": null,
+ }
+ }
+ fluidType={0}
+ height={-30}
+ index={2}
+ isDuel={false}
+ isSwitching={false}
+ key="2"
+ timeStep={10}
+ weekdays="weekend"
+ xScale={[Function]}
+ yScale={[Function]}
+ >
+ <g />
+ </Bar>
+ <Bar
+ compare={false}
+ compareDataload={null}
+ dataload={
+ Object {
+ "date": "2021-09-23T00:00:00.000Z",
+ "state": "VALID",
+ "value": 12,
+ "valueDetail": null,
+ }
+ }
+ fluidType={0}
+ height={-30}
+ index={3}
+ isDuel={false}
+ isSwitching={false}
+ key="3"
+ timeStep={10}
+ weekdays="weekend"
+ xScale={[Function]}
+ yScale={[Function]}
+ >
+ <g />
+ </Bar>
+ </g>
+ <AxisBottom
+ data={
+ Array [
+ Object {
+ "date": "2021-09-23T00:00:00.000Z",
+ "state": "VALID",
+ "value": 12,
+ "valueDetail": null,
+ },
+ Object {
+ "date": "2021-09-23T00:00:00.000Z",
+ "state": "VALID",
+ "value": 12,
+ "valueDetail": null,
+ },
+ Object {
+ "date": "2021-09-23T00:00:00.000Z",
+ "state": "VALID",
+ "value": 12,
+ "valueDetail": null,
+ },
+ Object {
+ "date": "2021-09-23T00:00:00.000Z",
+ "state": "VALID",
+ "value": 12,
+ "valueDetail": null,
+ },
+ ]
+ }
+ height={0}
+ isDuel={false}
+ marginBottom={30}
+ marginLeft={10}
+ timeStep={10}
+ xScale={[Function]}
+ >
+ <g
+ className="axis x"
+ transform="translate(10, -30)"
+ >
+ <g
+ className="tick"
+ key="0"
+ opacity="1"
+ transform="translate(-63.63636363636364, 0)"
+ >
+ <TextAxis
+ dataload={
+ Object {
+ "date": "2021-09-23T00:00:00.000Z",
+ "state": "VALID",
+ "value": 12,
+ "valueDetail": null,
+ }
+ }
+ displayAllDays={false}
+ index={0}
+ timeStep={10}
+ width={28.636363636363637}
+ >
+ <text
+ dy="0.71em"
+ x={28.636363636363637}
+ y="10"
+ >
+ <tspan
+ className="tick-text chart-ticks-x-text"
+ textAnchor="middle"
+ >
+ 0
+ </tspan>
+ </text>
+ </TextAxis>
+ </g>
+ <g
+ className="tick"
+ key="1"
+ opacity="1"
+ transform="translate(-63.63636363636364, 0)"
+ >
+ <TextAxis
+ dataload={
+ Object {
+ "date": "2021-09-23T00:00:00.000Z",
+ "state": "VALID",
+ "value": 12,
+ "valueDetail": null,
+ }
+ }
+ displayAllDays={false}
+ index={1}
+ timeStep={10}
+ width={28.636363636363637}
+ />
+ </g>
+ <g
+ className="tick"
+ key="2"
+ opacity="1"
+ transform="translate(-63.63636363636364, 0)"
+ >
+ <TextAxis
+ dataload={
+ Object {
+ "date": "2021-09-23T00:00:00.000Z",
+ "state": "VALID",
+ "value": 12,
+ "valueDetail": null,
+ }
+ }
+ displayAllDays={false}
+ index={2}
+ timeStep={10}
+ width={28.636363636363637}
+ />
+ </g>
+ <g
+ className="tick"
+ key="3"
+ opacity="1"
+ transform="translate(-63.63636363636364, 0)"
+ >
+ <TextAxis
+ dataload={
+ Object {
+ "date": "2021-09-23T00:00:00.000Z",
+ "state": "VALID",
+ "value": 12,
+ "valueDetail": null,
+ }
+ }
+ displayAllDays={false}
+ index={3}
+ timeStep={10}
+ width={28.636363636363637}
+ />
+ </g>
+ </g>
+ </AxisBottom>
+ </svg>
+ </div>
+ </ElecHalfHourChart>
</Provider>
`;
diff --git a/src/components/Analysis/__snapshots__/MaxConsumptionCard.spec.tsx.snap b/src/components/Analysis/__snapshots__/MaxConsumptionCard.spec.tsx.snap
index a06993e7f..16d52c3f0 100644
--- a/src/components/Analysis/__snapshots__/MaxConsumptionCard.spec.tsx.snap
+++ b/src/components/Analysis/__snapshots__/MaxConsumptionCard.spec.tsx.snap
@@ -1,3 +1,532 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
-exports[`MaxConsumptionCard component should be rendered correctly 1`] = `ReactWrapper {}`;
+exports[`MaxConsumptionCard component should be rendered correctly 1`] = `
+<Provider
+ store={
+ Object {
+ "clearActions": [Function],
+ "dispatch": [Function],
+ "getActions": [Function],
+ "getState": [Function],
+ "replaceReducer": [Function],
+ "subscribe": [Function],
+ }
+ }
+>
+ <MaxConsumptionCard>
+ <div
+ className="max-consumption-container"
+ >
+ <StyledIcon
+ icon="test-file-stub"
+ size={38}
+ >
+ <Icon
+ aria-hidden={true}
+ icon="test-file-stub"
+ size={38}
+ spin={false}
+ >
+ <Component
+ aria-hidden={true}
+ className="styles__icon___23x3R"
+ height={38}
+ style={Object {}}
+ width={38}
+ >
+ <svg
+ aria-hidden={true}
+ className="styles__icon___23x3R"
+ height={38}
+ style={Object {}}
+ width={38}
+ >
+ <use
+ xlinkHref="#test-file-stub"
+ />
+ </svg>
+ </Component>
+ </Icon>
+ </StyledIcon>
+ <div
+ className="text-16-normal title"
+ >
+ analysis.max_day
+ </div>
+ <div
+ className="fluid-navigation"
+ >
+ <WithStyles(ForwardRef(IconButton))
+ aria-label="consumption.accessibility.button_previous_value"
+ className="arrow-prev"
+ onClick={[Function]}
+ >
+ <ForwardRef(IconButton)
+ aria-label="consumption.accessibility.button_previous_value"
+ className="arrow-prev"
+ 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",
+ "sizeSmall": "MuiIconButton-sizeSmall",
+ }
+ }
+ onClick={[Function]}
+ >
+ <WithStyles(ForwardRef(ButtonBase))
+ aria-label="consumption.accessibility.button_previous_value"
+ centerRipple={true}
+ className="MuiIconButton-root arrow-prev"
+ disabled={false}
+ focusRipple={true}
+ onClick={[Function]}
+ >
+ <ForwardRef(ButtonBase)
+ aria-label="consumption.accessibility.button_previous_value"
+ centerRipple={true}
+ className="MuiIconButton-root arrow-prev"
+ classes={
+ Object {
+ "disabled": "Mui-disabled",
+ "focusVisible": "Mui-focusVisible",
+ "root": "MuiButtonBase-root",
+ }
+ }
+ disabled={false}
+ focusRipple={true}
+ onClick={[Function]}
+ >
+ <button
+ aria-label="consumption.accessibility.button_previous_value"
+ className="MuiButtonBase-root MuiIconButton-root arrow-prev"
+ 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"
+ >
+ <Icon
+ icon="test-file-stub"
+ size={24}
+ spin={false}
+ >
+ <Component
+ className="styles__icon___23x3R"
+ height={24}
+ style={Object {}}
+ width={24}
+ >
+ <svg
+ className="styles__icon___23x3R"
+ height={24}
+ style={Object {}}
+ width={24}
+ >
+ <use
+ xlinkHref="#test-file-stub"
+ />
+ </svg>
+ </Component>
+ </Icon>
+ </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))>
+ <div
+ className="text-20-bold fluid electricity"
+ >
+ FLUID.ELECTRICITY.LABEL
+ </div>
+ <WithStyles(ForwardRef(IconButton))
+ aria-label="consumption.accessibility.button_next_value"
+ className="arrow-next"
+ onClick={[Function]}
+ >
+ <ForwardRef(IconButton)
+ aria-label="consumption.accessibility.button_next_value"
+ className="arrow-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",
+ "sizeSmall": "MuiIconButton-sizeSmall",
+ }
+ }
+ onClick={[Function]}
+ >
+ <WithStyles(ForwardRef(ButtonBase))
+ aria-label="consumption.accessibility.button_next_value"
+ centerRipple={true}
+ className="MuiIconButton-root arrow-next"
+ disabled={false}
+ focusRipple={true}
+ onClick={[Function]}
+ >
+ <ForwardRef(ButtonBase)
+ aria-label="consumption.accessibility.button_next_value"
+ centerRipple={true}
+ className="MuiIconButton-root arrow-next"
+ classes={
+ Object {
+ "disabled": "Mui-disabled",
+ "focusVisible": "Mui-focusVisible",
+ "root": "MuiButtonBase-root",
+ }
+ }
+ disabled={false}
+ focusRipple={true}
+ onClick={[Function]}
+ >
+ <button
+ aria-label="consumption.accessibility.button_next_value"
+ className="MuiButtonBase-root MuiIconButton-root arrow-next"
+ 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"
+ >
+ <Icon
+ icon="test-file-stub"
+ size={24}
+ spin={false}
+ >
+ <Component
+ className="styles__icon___23x3R"
+ height={24}
+ style={Object {}}
+ width={24}
+ >
+ <svg
+ className="styles__icon___23x3R"
+ height={24}
+ style={Object {}}
+ width={24}
+ >
+ <use
+ xlinkHref="#test-file-stub"
+ />
+ </svg>
+ </Component>
+ </Icon>
+ </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))>
+ </div>
+ <div
+ className="data-container"
+ >
+ <div
+ className="text-24-bold maxDay-date"
+ >
+ jeudi 01 octobre
+ </div>
+ <div>
+ <DataloadSection
+ dataload={
+ Object {
+ "date": "2020-10-01T00:00:00.000Z",
+ "state": "AGGREGATED_VALID",
+ "value": 69.18029999999999,
+ "valueDetail": Array [
+ Object {
+ "state": "VALID",
+ "value": 45.127739999999996,
+ },
+ Object {
+ "state": "VALID",
+ "value": 0.9048899999999999,
+ },
+ Object {
+ "state": "VALID",
+ "value": 23.147669999999998,
+ },
+ ],
+ }
+ }
+ dataloadSectionType="NO_COMPARE"
+ fluidType={0}
+ toggleEstimationModal={[Function]}
+ >
+ <div
+ className="dataloadvisualizer-section"
+ >
+ <div
+ className="dataloadvisualizer-value text-36-bold electricity"
+ >
+ <DataloadSectionValue
+ dataload={
+ Object {
+ "date": "2020-10-01T00:00:00.000Z",
+ "state": "AGGREGATED_VALID",
+ "value": 69.18029999999999,
+ "valueDetail": Array [
+ Object {
+ "state": "VALID",
+ "value": 45.127739999999996,
+ },
+ Object {
+ "state": "VALID",
+ "value": 0.9048899999999999,
+ },
+ Object {
+ "state": "VALID",
+ "value": 23.147669999999998,
+ },
+ ],
+ }
+ }
+ dataloadSectionType="NO_COMPARE"
+ fluidType={0}
+ toggleEstimationModal={[Function]}
+ >
+ 69,18
+ <span
+ className="text-18-normal"
+ >
+ FLUID.ELECTRICITY.UNIT
+ </span>
+ </DataloadSectionValue>
+ </div>
+ <DataloadSectionDetail
+ dataload={
+ Object {
+ "date": "2020-10-01T00:00:00.000Z",
+ "state": "AGGREGATED_VALID",
+ "value": 69.18029999999999,
+ "valueDetail": Array [
+ Object {
+ "state": "VALID",
+ "value": 45.127739999999996,
+ },
+ Object {
+ "state": "VALID",
+ "value": 0.9048899999999999,
+ },
+ Object {
+ "state": "VALID",
+ "value": 23.147669999999998,
+ },
+ ],
+ }
+ }
+ dataloadSectionType="NO_COMPARE"
+ fluidType={0}
+ >
+ <div
+ className="dataloadvisualizer-euro text-16-normal electricity"
+ >
+ 12,04 €
+ </div>
+ </DataloadSectionDetail>
+ </div>
+ </DataloadSection>
+ </div>
+ <mock-BarChart
+ chartData={
+ Object {
+ "actualData": Array [
+ Object {
+ "date": "2020-10-01T00:00:00.000Z",
+ "state": "AGGREGATED_VALID",
+ "value": 69.18029999999999,
+ "valueDetail": Array [
+ Object {
+ "state": "VALID",
+ "value": 45.127739999999996,
+ },
+ Object {
+ "state": "VALID",
+ "value": 0.9048899999999999,
+ },
+ Object {
+ "state": "VALID",
+ "value": 23.147669999999998,
+ },
+ ],
+ },
+ Object {
+ "date": "2020-10-02T00:00:00.000Z",
+ "state": "AGGREGATED_VALID",
+ "value": 61.65554999999999,
+ "valueDetail": Array [
+ Object {
+ "state": "VALID",
+ "value": 40.21918999999999,
+ },
+ Object {
+ "state": "VALID",
+ "value": 0.8064649999999999,
+ },
+ Object {
+ "state": "VALID",
+ "value": 20.629894999999998,
+ },
+ ],
+ },
+ Object {
+ "date": "2020-10-03T00:00:00.000Z",
+ "state": "EMPTY",
+ "value": -1,
+ "valueDetail": null,
+ },
+ ],
+ "comparisonData": Array [
+ Object {
+ "date": "2020-09-01T00:00:00.000Z",
+ "state": "AGGREGATED_VALID",
+ "value": 54.090509999999995,
+ "valueDetail": Array [
+ Object {
+ "state": "VALID",
+ "value": 35.284358,
+ },
+ Object {
+ "state": "VALID",
+ "value": 0.707513,
+ },
+ Object {
+ "state": "VALID",
+ "value": 18.098639,
+ },
+ ],
+ },
+ Object {
+ "date": "2020-09-02T00:00:00.000Z",
+ "state": "AGGREGATED_VALID",
+ "value": 56.57427,
+ "valueDetail": Array [
+ Object {
+ "state": "VALID",
+ "value": 36.904565999999996,
+ },
+ Object {
+ "state": "VALID",
+ "value": 0.740001,
+ },
+ Object {
+ "state": "VALID",
+ "value": 18.929703,
+ },
+ ],
+ },
+ Object {
+ "date": "2020-09-03T00:00:00.000Z",
+ "state": "EMPTY",
+ "value": -1,
+ "valueDetail": null,
+ },
+ ],
+ }
+ }
+ clickable={false}
+ fluidType={0}
+ height={0}
+ isSwitching={false}
+ timeStep={20}
+ width={0}
+ />
+ </div>
+ </div>
+ </MaxConsumptionCard>
+</Provider>
+`;
diff --git a/src/components/Analysis/__snapshots__/PieChart.spec.tsx.snap b/src/components/Analysis/__snapshots__/PieChart.spec.tsx.snap
index b63095617..068b2c5be 100644
--- a/src/components/Analysis/__snapshots__/PieChart.spec.tsx.snap
+++ b/src/components/Analysis/__snapshots__/PieChart.spec.tsx.snap
@@ -36,6 +36,472 @@ exports[`PieChart component should be rendered correctly 1`] = `
outerRadius={300}
totalValue={60}
width={300}
- />
+ >
+ <div
+ className="pie-container"
+ style={
+ Object {
+ "height": 300,
+ "width": 300,
+ }
+ }
+ >
+ <svg
+ height={300}
+ width={300}
+ >
+ <defs>
+ <filter
+ height="300%"
+ id="glow"
+ width="300%"
+ x="-75%"
+ y="-75%"
+ >
+ <feGaussianBlur
+ result="coloredBlur"
+ stdDeviation="10"
+ />
+ <feMerge>
+ <feMergeNode
+ in="coloredBlur"
+ />
+ <feMergeNode
+ in="SourceGraphic"
+ />
+ </feMerge>
+ </filter>
+ </defs>
+ <g
+ transform="translate(300 300)"
+ />
+ </svg>
+ <div
+ className="pie-center"
+ style={
+ Object {
+ "height": 300,
+ "left": 0,
+ "top": 0,
+ "width": 300,
+ }
+ }
+ >
+ <div
+ className="text-36-bold"
+ >
+ 60,00
+ <span
+ className="euro-unit"
+ >
+ FLUID.MULTIFLUID.UNIT
+ </span>
+ </div>
+ <div
+ className="text-16-normal date"
+ >
+ analysis_pie.monthde juin
+ </div>
+ <div
+ className="text-14-normal estimation-text"
+ onClick={[Function]}
+ >
+ <span
+ className="estimated"
+ >
+ analysis_pie.estimation
+ </span>
+ <span
+ className="estimated"
+ >
+ analysis_pie.estimation2
+ </span>
+ </div>
+ <div
+ className="circle"
+ style={
+ Object {
+ "height": 300,
+ "left": 0,
+ "top": 0,
+ "width": 300,
+ }
+ }
+ />
+ </div>
+ <EstimatedConsumptionModal
+ handleCloseClick={[Function]}
+ open={false}
+ >
+ <WithStyles(ForwardRef(Dialog))
+ aria-labelledby="accessibility-title"
+ classes={
+ Object {
+ "paper": "modal-paper",
+ "root": "modal-root",
+ }
+ }
+ onClose={[Function]}
+ open={false}
+ >
+ <ForwardRef(Dialog)
+ aria-labelledby="accessibility-title"
+ classes={
+ Object {
+ "container": "MuiDialog-container",
+ "paper": "MuiDialog-paper modal-paper",
+ "paperFullScreen": "MuiDialog-paperFullScreen",
+ "paperFullWidth": "MuiDialog-paperFullWidth",
+ "paperScrollBody": "MuiDialog-paperScrollBody",
+ "paperScrollPaper": "MuiDialog-paperScrollPaper",
+ "paperWidthFalse": "MuiDialog-paperWidthFalse",
+ "paperWidthLg": "MuiDialog-paperWidthLg",
+ "paperWidthMd": "MuiDialog-paperWidthMd",
+ "paperWidthSm": "MuiDialog-paperWidthSm",
+ "paperWidthXl": "MuiDialog-paperWidthXl",
+ "paperWidthXs": "MuiDialog-paperWidthXs",
+ "root": "MuiDialog-root modal-root",
+ "scrollBody": "MuiDialog-scrollBody",
+ "scrollPaper": "MuiDialog-scrollPaper",
+ }
+ }
+ onClose={[Function]}
+ open={false}
+ >
+ <ForwardRef(Modal)
+ BackdropComponent={
+ Object {
+ "$$typeof": Symbol(react.forward_ref),
+ "Naked": Object {
+ "$$typeof": Symbol(react.forward_ref),
+ "propTypes": Object {
+ "children": [Function],
+ "className": [Function],
+ "classes": [Function],
+ "invisible": [Function],
+ "open": [Function],
+ "transitionDuration": [Function],
+ },
+ "render": [Function],
+ },
+ "displayName": "WithStyles(ForwardRef(Backdrop))",
+ "options": Object {
+ "defaultTheme": Object {
+ "breakpoints": Object {
+ "between": [Function],
+ "down": [Function],
+ "keys": Array [
+ "xs",
+ "sm",
+ "md",
+ "lg",
+ "xl",
+ ],
+ "only": [Function],
+ "up": [Function],
+ "values": Object {
+ "lg": 1280,
+ "md": 960,
+ "sm": 600,
+ "xl": 1920,
+ "xs": 0,
+ },
+ "width": [Function],
+ },
+ "direction": "ltr",
+ "mixins": Object {
+ "gutters": [Function],
+ "toolbar": Object {
+ "@media (min-width:0px) and (orientation: landscape)": Object {
+ "minHeight": 48,
+ },
+ "@media (min-width:600px)": Object {
+ "minHeight": 64,
+ },
+ "minHeight": 56,
+ },
+ },
+ "overrides": Object {},
+ "palette": Object {
+ "action": Object {
+ "activatedOpacity": 0.12,
+ "active": "rgba(0, 0, 0, 0.54)",
+ "disabled": "rgba(0, 0, 0, 0.26)",
+ "disabledBackground": "rgba(0, 0, 0, 0.12)",
+ "disabledOpacity": 0.38,
+ "focus": "rgba(0, 0, 0, 0.12)",
+ "focusOpacity": 0.12,
+ "hover": "rgba(0, 0, 0, 0.04)",
+ "hoverOpacity": 0.04,
+ "selected": "rgba(0, 0, 0, 0.08)",
+ "selectedOpacity": 0.08,
+ },
+ "augmentColor": [Function],
+ "background": Object {
+ "default": "#fafafa",
+ "paper": "#fff",
+ },
+ "common": Object {
+ "black": "#000",
+ "white": "#fff",
+ },
+ "contrastThreshold": 3,
+ "divider": "rgba(0, 0, 0, 0.12)",
+ "error": Object {
+ "contrastText": "#fff",
+ "dark": "#d32f2f",
+ "light": "#e57373",
+ "main": "#f44336",
+ },
+ "getContrastText": [Function],
+ "grey": Object {
+ "100": "#f5f5f5",
+ "200": "#eeeeee",
+ "300": "#e0e0e0",
+ "400": "#bdbdbd",
+ "50": "#fafafa",
+ "500": "#9e9e9e",
+ "600": "#757575",
+ "700": "#616161",
+ "800": "#424242",
+ "900": "#212121",
+ "A100": "#d5d5d5",
+ "A200": "#aaaaaa",
+ "A400": "#303030",
+ "A700": "#616161",
+ },
+ "info": Object {
+ "contrastText": "#fff",
+ "dark": "#1976d2",
+ "light": "#64b5f6",
+ "main": "#2196f3",
+ },
+ "primary": Object {
+ "contrastText": "#fff",
+ "dark": "#303f9f",
+ "light": "#7986cb",
+ "main": "#3f51b5",
+ },
+ "secondary": Object {
+ "contrastText": "#fff",
+ "dark": "#c51162",
+ "light": "#ff4081",
+ "main": "#f50057",
+ },
+ "success": Object {
+ "contrastText": "rgba(0, 0, 0, 0.87)",
+ "dark": "#388e3c",
+ "light": "#81c784",
+ "main": "#4caf50",
+ },
+ "text": Object {
+ "disabled": "rgba(0, 0, 0, 0.38)",
+ "hint": "rgba(0, 0, 0, 0.38)",
+ "primary": "rgba(0, 0, 0, 0.87)",
+ "secondary": "rgba(0, 0, 0, 0.54)",
+ },
+ "tonalOffset": 0.2,
+ "type": "light",
+ "warning": Object {
+ "contrastText": "rgba(0, 0, 0, 0.87)",
+ "dark": "#f57c00",
+ "light": "#ffb74d",
+ "main": "#ff9800",
+ },
+ },
+ "props": Object {},
+ "shadows": Array [
+ "none",
+ "0px 2px 1px -1px rgba(0,0,0,0.2),0px 1px 1px 0px rgba(0,0,0,0.14),0px 1px 3px 0px rgba(0,0,0,0.12)",
+ "0px 3px 1px -2px rgba(0,0,0,0.2),0px 2px 2px 0px rgba(0,0,0,0.14),0px 1px 5px 0px rgba(0,0,0,0.12)",
+ "0px 3px 3px -2px rgba(0,0,0,0.2),0px 3px 4px 0px rgba(0,0,0,0.14),0px 1px 8px 0px rgba(0,0,0,0.12)",
+ "0px 2px 4px -1px rgba(0,0,0,0.2),0px 4px 5px 0px rgba(0,0,0,0.14),0px 1px 10px 0px rgba(0,0,0,0.12)",
+ "0px 3px 5px -1px rgba(0,0,0,0.2),0px 5px 8px 0px rgba(0,0,0,0.14),0px 1px 14px 0px rgba(0,0,0,0.12)",
+ "0px 3px 5px -1px rgba(0,0,0,0.2),0px 6px 10px 0px rgba(0,0,0,0.14),0px 1px 18px 0px rgba(0,0,0,0.12)",
+ "0px 4px 5px -2px rgba(0,0,0,0.2),0px 7px 10px 1px rgba(0,0,0,0.14),0px 2px 16px 1px rgba(0,0,0,0.12)",
+ "0px 5px 5px -3px rgba(0,0,0,0.2),0px 8px 10px 1px rgba(0,0,0,0.14),0px 3px 14px 2px rgba(0,0,0,0.12)",
+ "0px 5px 6px -3px rgba(0,0,0,0.2),0px 9px 12px 1px rgba(0,0,0,0.14),0px 3px 16px 2px rgba(0,0,0,0.12)",
+ "0px 6px 6px -3px rgba(0,0,0,0.2),0px 10px 14px 1px rgba(0,0,0,0.14),0px 4px 18px 3px rgba(0,0,0,0.12)",
+ "0px 6px 7px -4px rgba(0,0,0,0.2),0px 11px 15px 1px rgba(0,0,0,0.14),0px 4px 20px 3px rgba(0,0,0,0.12)",
+ "0px 7px 8px -4px rgba(0,0,0,0.2),0px 12px 17px 2px rgba(0,0,0,0.14),0px 5px 22px 4px rgba(0,0,0,0.12)",
+ "0px 7px 8px -4px rgba(0,0,0,0.2),0px 13px 19px 2px rgba(0,0,0,0.14),0px 5px 24px 4px rgba(0,0,0,0.12)",
+ "0px 7px 9px -4px rgba(0,0,0,0.2),0px 14px 21px 2px rgba(0,0,0,0.14),0px 5px 26px 4px rgba(0,0,0,0.12)",
+ "0px 8px 9px -5px rgba(0,0,0,0.2),0px 15px 22px 2px rgba(0,0,0,0.14),0px 6px 28px 5px rgba(0,0,0,0.12)",
+ "0px 8px 10px -5px rgba(0,0,0,0.2),0px 16px 24px 2px rgba(0,0,0,0.14),0px 6px 30px 5px rgba(0,0,0,0.12)",
+ "0px 8px 11px -5px rgba(0,0,0,0.2),0px 17px 26px 2px rgba(0,0,0,0.14),0px 6px 32px 5px rgba(0,0,0,0.12)",
+ "0px 9px 11px -5px rgba(0,0,0,0.2),0px 18px 28px 2px rgba(0,0,0,0.14),0px 7px 34px 6px rgba(0,0,0,0.12)",
+ "0px 9px 12px -6px rgba(0,0,0,0.2),0px 19px 29px 2px rgba(0,0,0,0.14),0px 7px 36px 6px rgba(0,0,0,0.12)",
+ "0px 10px 13px -6px rgba(0,0,0,0.2),0px 20px 31px 3px rgba(0,0,0,0.14),0px 8px 38px 7px rgba(0,0,0,0.12)",
+ "0px 10px 13px -6px rgba(0,0,0,0.2),0px 21px 33px 3px rgba(0,0,0,0.14),0px 8px 40px 7px rgba(0,0,0,0.12)",
+ "0px 10px 14px -6px rgba(0,0,0,0.2),0px 22px 35px 3px rgba(0,0,0,0.14),0px 8px 42px 7px rgba(0,0,0,0.12)",
+ "0px 11px 14px -7px rgba(0,0,0,0.2),0px 23px 36px 3px rgba(0,0,0,0.14),0px 9px 44px 8px rgba(0,0,0,0.12)",
+ "0px 11px 15px -7px rgba(0,0,0,0.2),0px 24px 38px 3px rgba(0,0,0,0.14),0px 9px 46px 8px rgba(0,0,0,0.12)",
+ ],
+ "shape": Object {
+ "borderRadius": 4,
+ },
+ "spacing": [Function],
+ "transitions": Object {
+ "create": [Function],
+ "duration": Object {
+ "complex": 375,
+ "enteringScreen": 225,
+ "leavingScreen": 195,
+ "short": 250,
+ "shorter": 200,
+ "shortest": 150,
+ "standard": 300,
+ },
+ "easing": Object {
+ "easeIn": "cubic-bezier(0.4, 0, 1, 1)",
+ "easeInOut": "cubic-bezier(0.4, 0, 0.2, 1)",
+ "easeOut": "cubic-bezier(0.0, 0, 0.2, 1)",
+ "sharp": "cubic-bezier(0.4, 0, 0.6, 1)",
+ },
+ "getAutoHeightDuration": [Function],
+ },
+ "typography": Object {
+ "body1": Object {
+ "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
+ "fontSize": "1rem",
+ "fontWeight": 400,
+ "letterSpacing": "0.00938em",
+ "lineHeight": 1.5,
+ },
+ "body2": Object {
+ "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
+ "fontSize": "0.875rem",
+ "fontWeight": 400,
+ "letterSpacing": "0.01071em",
+ "lineHeight": 1.43,
+ },
+ "button": Object {
+ "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
+ "fontSize": "0.875rem",
+ "fontWeight": 500,
+ "letterSpacing": "0.02857em",
+ "lineHeight": 1.75,
+ "textTransform": "uppercase",
+ },
+ "caption": Object {
+ "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
+ "fontSize": "0.75rem",
+ "fontWeight": 400,
+ "letterSpacing": "0.03333em",
+ "lineHeight": 1.66,
+ },
+ "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
+ "fontSize": 14,
+ "fontWeightBold": 700,
+ "fontWeightLight": 300,
+ "fontWeightMedium": 500,
+ "fontWeightRegular": 400,
+ "h1": Object {
+ "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
+ "fontSize": "6rem",
+ "fontWeight": 300,
+ "letterSpacing": "-0.01562em",
+ "lineHeight": 1.167,
+ },
+ "h2": Object {
+ "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
+ "fontSize": "3.75rem",
+ "fontWeight": 300,
+ "letterSpacing": "-0.00833em",
+ "lineHeight": 1.2,
+ },
+ "h3": Object {
+ "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
+ "fontSize": "3rem",
+ "fontWeight": 400,
+ "letterSpacing": "0em",
+ "lineHeight": 1.167,
+ },
+ "h4": Object {
+ "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
+ "fontSize": "2.125rem",
+ "fontWeight": 400,
+ "letterSpacing": "0.00735em",
+ "lineHeight": 1.235,
+ },
+ "h5": Object {
+ "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
+ "fontSize": "1.5rem",
+ "fontWeight": 400,
+ "letterSpacing": "0em",
+ "lineHeight": 1.334,
+ },
+ "h6": Object {
+ "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
+ "fontSize": "1.25rem",
+ "fontWeight": 500,
+ "letterSpacing": "0.0075em",
+ "lineHeight": 1.6,
+ },
+ "htmlFontSize": 16,
+ "overline": Object {
+ "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
+ "fontSize": "0.75rem",
+ "fontWeight": 400,
+ "letterSpacing": "0.08333em",
+ "lineHeight": 2.66,
+ "textTransform": "uppercase",
+ },
+ "pxToRem": [Function],
+ "round": [Function],
+ "subtitle1": Object {
+ "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
+ "fontSize": "1rem",
+ "fontWeight": 400,
+ "letterSpacing": "0.00938em",
+ "lineHeight": 1.75,
+ },
+ "subtitle2": Object {
+ "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
+ "fontSize": "0.875rem",
+ "fontWeight": 500,
+ "letterSpacing": "0.00714em",
+ "lineHeight": 1.57,
+ },
+ },
+ "zIndex": Object {
+ "appBar": 1100,
+ "drawer": 1200,
+ "mobileStepper": 1000,
+ "modal": 1300,
+ "snackbar": 1400,
+ "speedDial": 1050,
+ "tooltip": 1500,
+ },
+ },
+ "name": "MuiBackdrop",
+ },
+ "propTypes": Object {
+ "classes": [Function],
+ "innerRef": [Function],
+ },
+ "render": [Function],
+ "useStyles": [Function],
+ }
+ }
+ BackdropProps={
+ Object {
+ "transitionDuration": Object {
+ "enter": 225,
+ "exit": 195,
+ },
+ }
+ }
+ className="MuiDialog-root modal-root"
+ closeAfterTransition={true}
+ disableEscapeKeyDown={false}
+ onClose={[Function]}
+ open={false}
+ />
+ </ForwardRef(Dialog)>
+ </WithStyles(ForwardRef(Dialog))>
+ </EstimatedConsumptionModal>
+ </div>
+ </PieChart>
</Provider>
`;
diff --git a/src/components/Analysis/__snapshots__/TotalAnalysisChart.spec.tsx.snap b/src/components/Analysis/__snapshots__/TotalAnalysisChart.spec.tsx.snap
index 7a0694330..c5f2907e2 100644
--- a/src/components/Analysis/__snapshots__/TotalAnalysisChart.spec.tsx.snap
+++ b/src/components/Analysis/__snapshots__/TotalAnalysisChart.spec.tsx.snap
@@ -19,6 +19,21 @@ exports[`TotalAnalysisChart component should be rendered correctly 1`] = `
0,
]
}
- />
+ >
+ <div
+ className="totalAnalysis-container"
+ style={
+ Object {
+ "minHeight": 475,
+ }
+ }
+ >
+ <div
+ className="text-24-normal title"
+ >
+ analysis_pie.total
+ </div>
+ </div>
+ </TotalAnalysisChart>
</Provider>
`;
diff --git a/src/components/Challenge/ChallengeCardLast.spec.tsx b/src/components/Challenge/ChallengeCardLast.spec.tsx
index b9b4cee80..be445a7a2 100644
--- a/src/components/Challenge/ChallengeCardLast.spec.tsx
+++ b/src/components/Challenge/ChallengeCardLast.spec.tsx
@@ -1,8 +1,10 @@
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 { globalStateData } from '../../../tests/__mocks__/globalStateData.mock'
+import { waitForComponentToPaint } from '../../../tests/__mocks__/testUtils'
import ChallengeCardLast from './ChallengeCardLast'
// Value coming from jest.config
@@ -27,13 +29,14 @@ describe('ChallengeCardLast component', () => {
},
})
- it('should be rendered correctly', () => {
+ it('should be rendered correctly', async () => {
const wrapper = mount(
<Provider store={store}>
<ChallengeCardLast />
</Provider>
)
- expect(wrapper).toMatchSnapshot()
+ await waitForComponentToPaint(wrapper)
+ expect(toJson(wrapper)).toMatchSnapshot()
})
it('should open SAU new idea link', () => {
diff --git a/src/components/Challenge/__snapshots__/ChallengeCardLast.spec.tsx.snap b/src/components/Challenge/__snapshots__/ChallengeCardLast.spec.tsx.snap
index efa516743..5f80b30e6 100644
--- a/src/components/Challenge/__snapshots__/ChallengeCardLast.spec.tsx.snap
+++ b/src/components/Challenge/__snapshots__/ChallengeCardLast.spec.tsx.snap
@@ -1,3 +1,201 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
-exports[`ChallengeCardLast component should be rendered correctly 1`] = `ReactWrapper {}`;
+exports[`ChallengeCardLast component should be rendered correctly 1`] = `
+<Provider
+ store={
+ Object {
+ "clearActions": [Function],
+ "dispatch": [Function],
+ "getActions": [Function],
+ "getState": [Function],
+ "replaceReducer": [Function],
+ "subscribe": [Function],
+ }
+ }
+>
+ <ChallengeCardLast>
+ <div
+ className="cardLast"
+ >
+ <StyledIcon
+ icon="test-file-stub"
+ size={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>
+ <div
+ className="content"
+ >
+ <div
+ className="text-22-bold title-last"
+ >
+ challenge.card_last.title
+ </div>
+ <div
+ className="text-18-normal message"
+ >
+ challenge.card_last.message1
+ </div>
+ </div>
+ <WithStyles(ForwardRef(Button))
+ aria-label="challenge.card_last.button"
+ className="btn1"
+ classes={
+ Object {
+ "label": "text-15-bold",
+ "root": "btn-secondary-negative btn_lastCard",
+ }
+ }
+ onClick={[Function]}
+ >
+ <ForwardRef(Button)
+ aria-label="challenge.card_last.button"
+ className="btn1"
+ 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 text-15-bold",
+ "outlined": "MuiButton-outlined",
+ "outlinedPrimary": "MuiButton-outlinedPrimary",
+ "outlinedSecondary": "MuiButton-outlinedSecondary",
+ "outlinedSizeLarge": "MuiButton-outlinedSizeLarge",
+ "outlinedSizeSmall": "MuiButton-outlinedSizeSmall",
+ "root": "MuiButton-root btn-secondary-negative btn_lastCard",
+ "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_last.button"
+ className="MuiButton-root btn-secondary-negative btn_lastCard MuiButton-text btn1"
+ component="button"
+ disabled={false}
+ focusRipple={true}
+ focusVisibleClassName="Mui-focusVisible"
+ onClick={[Function]}
+ type="button"
+ >
+ <ForwardRef(ButtonBase)
+ aria-label="challenge.card_last.button"
+ className="MuiButton-root btn-secondary-negative btn_lastCard MuiButton-text btn1"
+ 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 btn-secondary-negative btn_lastCard MuiButton-text btn1"
+ 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 text-15-bold"
+ >
+ 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))>
+ </div>
+ </ChallengeCardLast>
+</Provider>
+`;
diff --git a/src/components/ConsumptionVisualizer/DataloadConsumptionVisualizer.spec.tsx b/src/components/ConsumptionVisualizer/DataloadConsumptionVisualizer.spec.tsx
index d3191e935..83fa79f6b 100644
--- a/src/components/ConsumptionVisualizer/DataloadConsumptionVisualizer.spec.tsx
+++ b/src/components/ConsumptionVisualizer/DataloadConsumptionVisualizer.spec.tsx
@@ -1,6 +1,7 @@
import { DataloadState } from 'enum/dataload.enum'
import { FluidType } from 'enum/fluid.enum'
import { mount } from 'enzyme'
+import toJson from 'enzyme-to-json'
import { Dataload } from 'models'
import React from 'react'
import { Provider } from 'react-redux'
@@ -12,6 +13,7 @@ import {
mockInitialChartState,
mockInitialEcolyoState,
} from '../../../tests/__mocks__/store'
+import { waitForComponentToPaint } from '../../../tests/__mocks__/testUtils'
import DataloadConsumptionVisualizer from './DataloadConsumptionVisualizer'
jest.mock('cozy-ui/transpiled/react/I18n', () => {
@@ -50,6 +52,25 @@ const dataLoadWithValueDetail: Dataload = {
}
describe('Dataload consumption visualizer component', () => {
+ it('should render with single fluid', async () => {
+ const store = mockStore({
+ ecolyo: {
+ chart: mockChartStateLoaded,
+ },
+ })
+ const wrapper = mount(
+ <Provider store={store}>
+ <DataloadConsumptionVisualizer
+ fluidType={FluidType.ELECTRICITY}
+ dataload={baseDataLoad}
+ compareDataload={baseDataLoad}
+ setActive={jest.fn()}
+ />
+ </Provider>
+ )
+ await waitForComponentToPaint(wrapper)
+ expect(toJson(wrapper)).toMatchSnapshot()
+ })
it('should render correctly multifluid and 3 clickable links', () => {
const store = mockStore({
ecolyo: mockInitialEcolyoState,
@@ -66,27 +87,9 @@ describe('Dataload consumption visualizer component', () => {
</BrowserRouter>
</Provider>
)
- expect(wrapper).toMatchSnapshot()
expect(wrapper.find('.dataloadvisualizer-euro-link').length).toBe(3)
})
- it('should render with single fluid', () => {
- const store = mockStore({
- ecolyo: {
- chart: mockChartStateLoaded,
- },
- })
- const wrapper = mount(
- <Provider store={store}>
- <DataloadConsumptionVisualizer
- fluidType={FluidType.ELECTRICITY}
- dataload={baseDataLoad}
- compareDataload={baseDataLoad}
- setActive={jest.fn()}
- />
- </Provider>
- )
- expect(wrapper).toMatchSnapshot()
- })
+
it('should render with no value to compare available', async () => {
const store = mockStore({
ecolyo: {
diff --git a/src/components/ConsumptionVisualizer/EstimatedConsumptionModal.spec.tsx b/src/components/ConsumptionVisualizer/EstimatedConsumptionModal.spec.tsx
index 6c6816dff..789d44b5b 100644
--- a/src/components/ConsumptionVisualizer/EstimatedConsumptionModal.spec.tsx
+++ b/src/components/ConsumptionVisualizer/EstimatedConsumptionModal.spec.tsx
@@ -1,8 +1,10 @@
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 { mockInitialEcolyoState } from '../../../tests/__mocks__/store'
+import { waitForComponentToPaint } from '../../../tests/__mocks__/testUtils'
import EstimatedConsumptionModal from './EstimatedConsumptionModal'
jest.mock('cozy-ui/transpiled/react/I18n', () => {
@@ -27,7 +29,7 @@ jest.mock('services/fluidsPrices.service', () => {
const mockStore = configureStore([])
const mockHandleClose = jest.fn()
describe('EstimatedConsumptionModal component', () => {
- it('should render correctly', () => {
+ it('should render correctly', async () => {
const store = mockStore({
ecolyo: mockInitialEcolyoState,
})
@@ -39,6 +41,7 @@ describe('EstimatedConsumptionModal component', () => {
/>
</Provider>
)
- expect(wrapper).toMatchSnapshot()
+ await waitForComponentToPaint(wrapper)
+ expect(toJson(wrapper)).toMatchSnapshot()
})
})
diff --git a/src/components/ConsumptionVisualizer/NoDataModal.spec.tsx b/src/components/ConsumptionVisualizer/NoDataModal.spec.tsx
index ca13f103c..85e4f86ba 100644
--- a/src/components/ConsumptionVisualizer/NoDataModal.spec.tsx
+++ b/src/components/ConsumptionVisualizer/NoDataModal.spec.tsx
@@ -1,8 +1,10 @@
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 { mockInitialEcolyoState } from '../../../tests/__mocks__/store'
+import { waitForComponentToPaint } from '../../../tests/__mocks__/testUtils'
import NoDataModal from './NoDataModal'
jest.mock('cozy-ui/transpiled/react/I18n', () => {
@@ -18,7 +20,7 @@ jest.mock('cozy-ui/transpiled/react/I18n', () => {
const mockStore = configureStore([])
const mockHandleClose = jest.fn()
describe('NoDataModal component', () => {
- it('should render correctly', () => {
+ it('should render correctly', async () => {
const store = mockStore({
ecolyo: mockInitialEcolyoState,
})
@@ -27,6 +29,7 @@ describe('NoDataModal component', () => {
<NoDataModal open={true} handleCloseClick={mockHandleClose} />
</Provider>
)
- expect(wrapper).toMatchSnapshot()
+ await waitForComponentToPaint(wrapper)
+ expect(toJson(wrapper)).toMatchSnapshot()
})
})
diff --git a/src/components/ConsumptionVisualizer/__snapshots__/DataloadConsumptionVisualizer.spec.tsx.snap b/src/components/ConsumptionVisualizer/__snapshots__/DataloadConsumptionVisualizer.spec.tsx.snap
index 70032d957..3161ddaa1 100644
--- a/src/components/ConsumptionVisualizer/__snapshots__/DataloadConsumptionVisualizer.spec.tsx.snap
+++ b/src/components/ConsumptionVisualizer/__snapshots__/DataloadConsumptionVisualizer.spec.tsx.snap
@@ -1,5 +1,478 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
-exports[`Dataload consumption visualizer component should render correctly multifluid and 3 clickable links 1`] = `ReactWrapper {}`;
-
-exports[`Dataload consumption visualizer component should render with single fluid 1`] = `ReactWrapper {}`;
+exports[`Dataload consumption visualizer component should render with single fluid 1`] = `
+<Provider
+ store={
+ Object {
+ "clearActions": [Function],
+ "dispatch": [Function],
+ "getActions": [Function],
+ "getState": [Function],
+ "replaceReducer": [Function],
+ "subscribe": [Function],
+ }
+ }
+>
+ <DataloadConsumptionVisualizer
+ compareDataload={
+ Object {
+ "date": "2021-09-23T00:00:00.000Z",
+ "state": "VALID",
+ "value": 12,
+ "valueDetail": null,
+ }
+ }
+ dataload={
+ Object {
+ "date": "2021-09-23T00:00:00.000Z",
+ "state": "VALID",
+ "value": 12,
+ "valueDetail": null,
+ }
+ }
+ fluidType={0}
+ setActive={[MockFunction]}
+ >
+ <div
+ className="dataloadvisualizer-root"
+ >
+ <div
+ className="dataloadvisualizer-content"
+ >
+ <DataloadSection
+ dataload={
+ Object {
+ "date": "2021-09-23T00:00:00.000Z",
+ "state": "VALID",
+ "value": 12,
+ "valueDetail": null,
+ }
+ }
+ dataloadSectionType="NO_COMPARE"
+ fluidType={0}
+ toggleEstimationModal={[Function]}
+ >
+ <div
+ className="dataloadvisualizer-section"
+ >
+ <div
+ className="dataloadvisualizer-value text-36-bold electricity"
+ >
+ <DataloadSectionValue
+ dataload={
+ Object {
+ "date": "2021-09-23T00:00:00.000Z",
+ "state": "VALID",
+ "value": 12,
+ "valueDetail": null,
+ }
+ }
+ dataloadSectionType="NO_COMPARE"
+ fluidType={0}
+ toggleEstimationModal={[Function]}
+ >
+ 12,00
+ <span
+ className="text-18-normal"
+ >
+ FLUID.ELECTRICITY.UNIT
+ </span>
+ </DataloadSectionValue>
+ </div>
+ <DataloadSectionDetail
+ dataload={
+ Object {
+ "date": "2021-09-23T00:00:00.000Z",
+ "state": "VALID",
+ "value": 12,
+ "valueDetail": null,
+ }
+ }
+ dataloadSectionType="NO_COMPARE"
+ fluidType={0}
+ >
+ <div
+ className="dataloadvisualizer-euro text-16-normal electricity"
+ >
+ 2,09 €
+ </div>
+ </DataloadSectionDetail>
+ </div>
+ </DataloadSection>
+ </div>
+ <EstimatedConsumptionModal
+ handleCloseClick={[Function]}
+ open={false}
+ >
+ <WithStyles(ForwardRef(Dialog))
+ aria-labelledby="accessibility-title"
+ classes={
+ Object {
+ "paper": "modal-paper",
+ "root": "modal-root",
+ }
+ }
+ onClose={[Function]}
+ open={false}
+ >
+ <ForwardRef(Dialog)
+ aria-labelledby="accessibility-title"
+ classes={
+ Object {
+ "container": "MuiDialog-container",
+ "paper": "MuiDialog-paper modal-paper",
+ "paperFullScreen": "MuiDialog-paperFullScreen",
+ "paperFullWidth": "MuiDialog-paperFullWidth",
+ "paperScrollBody": "MuiDialog-paperScrollBody",
+ "paperScrollPaper": "MuiDialog-paperScrollPaper",
+ "paperWidthFalse": "MuiDialog-paperWidthFalse",
+ "paperWidthLg": "MuiDialog-paperWidthLg",
+ "paperWidthMd": "MuiDialog-paperWidthMd",
+ "paperWidthSm": "MuiDialog-paperWidthSm",
+ "paperWidthXl": "MuiDialog-paperWidthXl",
+ "paperWidthXs": "MuiDialog-paperWidthXs",
+ "root": "MuiDialog-root modal-root",
+ "scrollBody": "MuiDialog-scrollBody",
+ "scrollPaper": "MuiDialog-scrollPaper",
+ }
+ }
+ onClose={[Function]}
+ open={false}
+ >
+ <ForwardRef(Modal)
+ BackdropComponent={
+ Object {
+ "$$typeof": Symbol(react.forward_ref),
+ "Naked": Object {
+ "$$typeof": Symbol(react.forward_ref),
+ "propTypes": Object {
+ "children": [Function],
+ "className": [Function],
+ "classes": [Function],
+ "invisible": [Function],
+ "open": [Function],
+ "transitionDuration": [Function],
+ },
+ "render": [Function],
+ },
+ "displayName": "WithStyles(ForwardRef(Backdrop))",
+ "options": Object {
+ "defaultTheme": Object {
+ "breakpoints": Object {
+ "between": [Function],
+ "down": [Function],
+ "keys": Array [
+ "xs",
+ "sm",
+ "md",
+ "lg",
+ "xl",
+ ],
+ "only": [Function],
+ "up": [Function],
+ "values": Object {
+ "lg": 1280,
+ "md": 960,
+ "sm": 600,
+ "xl": 1920,
+ "xs": 0,
+ },
+ "width": [Function],
+ },
+ "direction": "ltr",
+ "mixins": Object {
+ "gutters": [Function],
+ "toolbar": Object {
+ "@media (min-width:0px) and (orientation: landscape)": Object {
+ "minHeight": 48,
+ },
+ "@media (min-width:600px)": Object {
+ "minHeight": 64,
+ },
+ "minHeight": 56,
+ },
+ },
+ "overrides": Object {},
+ "palette": Object {
+ "action": Object {
+ "activatedOpacity": 0.12,
+ "active": "rgba(0, 0, 0, 0.54)",
+ "disabled": "rgba(0, 0, 0, 0.26)",
+ "disabledBackground": "rgba(0, 0, 0, 0.12)",
+ "disabledOpacity": 0.38,
+ "focus": "rgba(0, 0, 0, 0.12)",
+ "focusOpacity": 0.12,
+ "hover": "rgba(0, 0, 0, 0.04)",
+ "hoverOpacity": 0.04,
+ "selected": "rgba(0, 0, 0, 0.08)",
+ "selectedOpacity": 0.08,
+ },
+ "augmentColor": [Function],
+ "background": Object {
+ "default": "#fafafa",
+ "paper": "#fff",
+ },
+ "common": Object {
+ "black": "#000",
+ "white": "#fff",
+ },
+ "contrastThreshold": 3,
+ "divider": "rgba(0, 0, 0, 0.12)",
+ "error": Object {
+ "contrastText": "#fff",
+ "dark": "#d32f2f",
+ "light": "#e57373",
+ "main": "#f44336",
+ },
+ "getContrastText": [Function],
+ "grey": Object {
+ "100": "#f5f5f5",
+ "200": "#eeeeee",
+ "300": "#e0e0e0",
+ "400": "#bdbdbd",
+ "50": "#fafafa",
+ "500": "#9e9e9e",
+ "600": "#757575",
+ "700": "#616161",
+ "800": "#424242",
+ "900": "#212121",
+ "A100": "#d5d5d5",
+ "A200": "#aaaaaa",
+ "A400": "#303030",
+ "A700": "#616161",
+ },
+ "info": Object {
+ "contrastText": "#fff",
+ "dark": "#1976d2",
+ "light": "#64b5f6",
+ "main": "#2196f3",
+ },
+ "primary": Object {
+ "contrastText": "#fff",
+ "dark": "#303f9f",
+ "light": "#7986cb",
+ "main": "#3f51b5",
+ },
+ "secondary": Object {
+ "contrastText": "#fff",
+ "dark": "#c51162",
+ "light": "#ff4081",
+ "main": "#f50057",
+ },
+ "success": Object {
+ "contrastText": "rgba(0, 0, 0, 0.87)",
+ "dark": "#388e3c",
+ "light": "#81c784",
+ "main": "#4caf50",
+ },
+ "text": Object {
+ "disabled": "rgba(0, 0, 0, 0.38)",
+ "hint": "rgba(0, 0, 0, 0.38)",
+ "primary": "rgba(0, 0, 0, 0.87)",
+ "secondary": "rgba(0, 0, 0, 0.54)",
+ },
+ "tonalOffset": 0.2,
+ "type": "light",
+ "warning": Object {
+ "contrastText": "rgba(0, 0, 0, 0.87)",
+ "dark": "#f57c00",
+ "light": "#ffb74d",
+ "main": "#ff9800",
+ },
+ },
+ "props": Object {},
+ "shadows": Array [
+ "none",
+ "0px 2px 1px -1px rgba(0,0,0,0.2),0px 1px 1px 0px rgba(0,0,0,0.14),0px 1px 3px 0px rgba(0,0,0,0.12)",
+ "0px 3px 1px -2px rgba(0,0,0,0.2),0px 2px 2px 0px rgba(0,0,0,0.14),0px 1px 5px 0px rgba(0,0,0,0.12)",
+ "0px 3px 3px -2px rgba(0,0,0,0.2),0px 3px 4px 0px rgba(0,0,0,0.14),0px 1px 8px 0px rgba(0,0,0,0.12)",
+ "0px 2px 4px -1px rgba(0,0,0,0.2),0px 4px 5px 0px rgba(0,0,0,0.14),0px 1px 10px 0px rgba(0,0,0,0.12)",
+ "0px 3px 5px -1px rgba(0,0,0,0.2),0px 5px 8px 0px rgba(0,0,0,0.14),0px 1px 14px 0px rgba(0,0,0,0.12)",
+ "0px 3px 5px -1px rgba(0,0,0,0.2),0px 6px 10px 0px rgba(0,0,0,0.14),0px 1px 18px 0px rgba(0,0,0,0.12)",
+ "0px 4px 5px -2px rgba(0,0,0,0.2),0px 7px 10px 1px rgba(0,0,0,0.14),0px 2px 16px 1px rgba(0,0,0,0.12)",
+ "0px 5px 5px -3px rgba(0,0,0,0.2),0px 8px 10px 1px rgba(0,0,0,0.14),0px 3px 14px 2px rgba(0,0,0,0.12)",
+ "0px 5px 6px -3px rgba(0,0,0,0.2),0px 9px 12px 1px rgba(0,0,0,0.14),0px 3px 16px 2px rgba(0,0,0,0.12)",
+ "0px 6px 6px -3px rgba(0,0,0,0.2),0px 10px 14px 1px rgba(0,0,0,0.14),0px 4px 18px 3px rgba(0,0,0,0.12)",
+ "0px 6px 7px -4px rgba(0,0,0,0.2),0px 11px 15px 1px rgba(0,0,0,0.14),0px 4px 20px 3px rgba(0,0,0,0.12)",
+ "0px 7px 8px -4px rgba(0,0,0,0.2),0px 12px 17px 2px rgba(0,0,0,0.14),0px 5px 22px 4px rgba(0,0,0,0.12)",
+ "0px 7px 8px -4px rgba(0,0,0,0.2),0px 13px 19px 2px rgba(0,0,0,0.14),0px 5px 24px 4px rgba(0,0,0,0.12)",
+ "0px 7px 9px -4px rgba(0,0,0,0.2),0px 14px 21px 2px rgba(0,0,0,0.14),0px 5px 26px 4px rgba(0,0,0,0.12)",
+ "0px 8px 9px -5px rgba(0,0,0,0.2),0px 15px 22px 2px rgba(0,0,0,0.14),0px 6px 28px 5px rgba(0,0,0,0.12)",
+ "0px 8px 10px -5px rgba(0,0,0,0.2),0px 16px 24px 2px rgba(0,0,0,0.14),0px 6px 30px 5px rgba(0,0,0,0.12)",
+ "0px 8px 11px -5px rgba(0,0,0,0.2),0px 17px 26px 2px rgba(0,0,0,0.14),0px 6px 32px 5px rgba(0,0,0,0.12)",
+ "0px 9px 11px -5px rgba(0,0,0,0.2),0px 18px 28px 2px rgba(0,0,0,0.14),0px 7px 34px 6px rgba(0,0,0,0.12)",
+ "0px 9px 12px -6px rgba(0,0,0,0.2),0px 19px 29px 2px rgba(0,0,0,0.14),0px 7px 36px 6px rgba(0,0,0,0.12)",
+ "0px 10px 13px -6px rgba(0,0,0,0.2),0px 20px 31px 3px rgba(0,0,0,0.14),0px 8px 38px 7px rgba(0,0,0,0.12)",
+ "0px 10px 13px -6px rgba(0,0,0,0.2),0px 21px 33px 3px rgba(0,0,0,0.14),0px 8px 40px 7px rgba(0,0,0,0.12)",
+ "0px 10px 14px -6px rgba(0,0,0,0.2),0px 22px 35px 3px rgba(0,0,0,0.14),0px 8px 42px 7px rgba(0,0,0,0.12)",
+ "0px 11px 14px -7px rgba(0,0,0,0.2),0px 23px 36px 3px rgba(0,0,0,0.14),0px 9px 44px 8px rgba(0,0,0,0.12)",
+ "0px 11px 15px -7px rgba(0,0,0,0.2),0px 24px 38px 3px rgba(0,0,0,0.14),0px 9px 46px 8px rgba(0,0,0,0.12)",
+ ],
+ "shape": Object {
+ "borderRadius": 4,
+ },
+ "spacing": [Function],
+ "transitions": Object {
+ "create": [Function],
+ "duration": Object {
+ "complex": 375,
+ "enteringScreen": 225,
+ "leavingScreen": 195,
+ "short": 250,
+ "shorter": 200,
+ "shortest": 150,
+ "standard": 300,
+ },
+ "easing": Object {
+ "easeIn": "cubic-bezier(0.4, 0, 1, 1)",
+ "easeInOut": "cubic-bezier(0.4, 0, 0.2, 1)",
+ "easeOut": "cubic-bezier(0.0, 0, 0.2, 1)",
+ "sharp": "cubic-bezier(0.4, 0, 0.6, 1)",
+ },
+ "getAutoHeightDuration": [Function],
+ },
+ "typography": Object {
+ "body1": Object {
+ "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
+ "fontSize": "1rem",
+ "fontWeight": 400,
+ "letterSpacing": "0.00938em",
+ "lineHeight": 1.5,
+ },
+ "body2": Object {
+ "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
+ "fontSize": "0.875rem",
+ "fontWeight": 400,
+ "letterSpacing": "0.01071em",
+ "lineHeight": 1.43,
+ },
+ "button": Object {
+ "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
+ "fontSize": "0.875rem",
+ "fontWeight": 500,
+ "letterSpacing": "0.02857em",
+ "lineHeight": 1.75,
+ "textTransform": "uppercase",
+ },
+ "caption": Object {
+ "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
+ "fontSize": "0.75rem",
+ "fontWeight": 400,
+ "letterSpacing": "0.03333em",
+ "lineHeight": 1.66,
+ },
+ "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
+ "fontSize": 14,
+ "fontWeightBold": 700,
+ "fontWeightLight": 300,
+ "fontWeightMedium": 500,
+ "fontWeightRegular": 400,
+ "h1": Object {
+ "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
+ "fontSize": "6rem",
+ "fontWeight": 300,
+ "letterSpacing": "-0.01562em",
+ "lineHeight": 1.167,
+ },
+ "h2": Object {
+ "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
+ "fontSize": "3.75rem",
+ "fontWeight": 300,
+ "letterSpacing": "-0.00833em",
+ "lineHeight": 1.2,
+ },
+ "h3": Object {
+ "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
+ "fontSize": "3rem",
+ "fontWeight": 400,
+ "letterSpacing": "0em",
+ "lineHeight": 1.167,
+ },
+ "h4": Object {
+ "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
+ "fontSize": "2.125rem",
+ "fontWeight": 400,
+ "letterSpacing": "0.00735em",
+ "lineHeight": 1.235,
+ },
+ "h5": Object {
+ "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
+ "fontSize": "1.5rem",
+ "fontWeight": 400,
+ "letterSpacing": "0em",
+ "lineHeight": 1.334,
+ },
+ "h6": Object {
+ "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
+ "fontSize": "1.25rem",
+ "fontWeight": 500,
+ "letterSpacing": "0.0075em",
+ "lineHeight": 1.6,
+ },
+ "htmlFontSize": 16,
+ "overline": Object {
+ "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
+ "fontSize": "0.75rem",
+ "fontWeight": 400,
+ "letterSpacing": "0.08333em",
+ "lineHeight": 2.66,
+ "textTransform": "uppercase",
+ },
+ "pxToRem": [Function],
+ "round": [Function],
+ "subtitle1": Object {
+ "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
+ "fontSize": "1rem",
+ "fontWeight": 400,
+ "letterSpacing": "0.00938em",
+ "lineHeight": 1.75,
+ },
+ "subtitle2": Object {
+ "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
+ "fontSize": "0.875rem",
+ "fontWeight": 500,
+ "letterSpacing": "0.00714em",
+ "lineHeight": 1.57,
+ },
+ },
+ "zIndex": Object {
+ "appBar": 1100,
+ "drawer": 1200,
+ "mobileStepper": 1000,
+ "modal": 1300,
+ "snackbar": 1400,
+ "speedDial": 1050,
+ "tooltip": 1500,
+ },
+ },
+ "name": "MuiBackdrop",
+ },
+ "propTypes": Object {
+ "classes": [Function],
+ "innerRef": [Function],
+ },
+ "render": [Function],
+ "useStyles": [Function],
+ }
+ }
+ BackdropProps={
+ Object {
+ "transitionDuration": Object {
+ "enter": 225,
+ "exit": 195,
+ },
+ }
+ }
+ className="MuiDialog-root modal-root"
+ closeAfterTransition={true}
+ disableEscapeKeyDown={false}
+ onClose={[Function]}
+ open={false}
+ />
+ </ForwardRef(Dialog)>
+ </WithStyles(ForwardRef(Dialog))>
+ </EstimatedConsumptionModal>
+ </div>
+ </DataloadConsumptionVisualizer>
+</Provider>
+`;
diff --git a/src/components/ConsumptionVisualizer/__snapshots__/EstimatedConsumptionModal.spec.tsx.snap b/src/components/ConsumptionVisualizer/__snapshots__/EstimatedConsumptionModal.spec.tsx.snap
index 70af07cd5..3d48d7e51 100644
--- a/src/components/ConsumptionVisualizer/__snapshots__/EstimatedConsumptionModal.spec.tsx.snap
+++ b/src/components/ConsumptionVisualizer/__snapshots__/EstimatedConsumptionModal.spec.tsx.snap
@@ -1,3 +1,904 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
-exports[`EstimatedConsumptionModal component should render correctly 1`] = `ReactWrapper {}`;
+exports[`EstimatedConsumptionModal component should render correctly 1`] = `
+<Provider
+ store={
+ Object {
+ "clearActions": [Function],
+ "dispatch": [Function],
+ "getActions": [Function],
+ "getState": [Function],
+ "replaceReducer": [Function],
+ "subscribe": [Function],
+ }
+ }
+>
+ <EstimatedConsumptionModal
+ handleCloseClick={[MockFunction]}
+ open={true}
+ >
+ <WithStyles(ForwardRef(Dialog))
+ aria-labelledby="accessibility-title"
+ classes={
+ Object {
+ "paper": "modal-paper",
+ "root": "modal-root",
+ }
+ }
+ onClose={[MockFunction]}
+ open={true}
+ >
+ <ForwardRef(Dialog)
+ aria-labelledby="accessibility-title"
+ classes={
+ Object {
+ "container": "MuiDialog-container",
+ "paper": "MuiDialog-paper modal-paper",
+ "paperFullScreen": "MuiDialog-paperFullScreen",
+ "paperFullWidth": "MuiDialog-paperFullWidth",
+ "paperScrollBody": "MuiDialog-paperScrollBody",
+ "paperScrollPaper": "MuiDialog-paperScrollPaper",
+ "paperWidthFalse": "MuiDialog-paperWidthFalse",
+ "paperWidthLg": "MuiDialog-paperWidthLg",
+ "paperWidthMd": "MuiDialog-paperWidthMd",
+ "paperWidthSm": "MuiDialog-paperWidthSm",
+ "paperWidthXl": "MuiDialog-paperWidthXl",
+ "paperWidthXs": "MuiDialog-paperWidthXs",
+ "root": "MuiDialog-root modal-root",
+ "scrollBody": "MuiDialog-scrollBody",
+ "scrollPaper": "MuiDialog-scrollPaper",
+ }
+ }
+ onClose={[MockFunction]}
+ open={true}
+ >
+ <ForwardRef(Modal)
+ BackdropComponent={
+ Object {
+ "$$typeof": Symbol(react.forward_ref),
+ "Naked": Object {
+ "$$typeof": Symbol(react.forward_ref),
+ "propTypes": Object {
+ "children": [Function],
+ "className": [Function],
+ "classes": [Function],
+ "invisible": [Function],
+ "open": [Function],
+ "transitionDuration": [Function],
+ },
+ "render": [Function],
+ },
+ "displayName": "WithStyles(ForwardRef(Backdrop))",
+ "options": Object {
+ "defaultTheme": Object {
+ "breakpoints": Object {
+ "between": [Function],
+ "down": [Function],
+ "keys": Array [
+ "xs",
+ "sm",
+ "md",
+ "lg",
+ "xl",
+ ],
+ "only": [Function],
+ "up": [Function],
+ "values": Object {
+ "lg": 1280,
+ "md": 960,
+ "sm": 600,
+ "xl": 1920,
+ "xs": 0,
+ },
+ "width": [Function],
+ },
+ "direction": "ltr",
+ "mixins": Object {
+ "gutters": [Function],
+ "toolbar": Object {
+ "@media (min-width:0px) and (orientation: landscape)": Object {
+ "minHeight": 48,
+ },
+ "@media (min-width:600px)": Object {
+ "minHeight": 64,
+ },
+ "minHeight": 56,
+ },
+ },
+ "overrides": Object {},
+ "palette": Object {
+ "action": Object {
+ "activatedOpacity": 0.12,
+ "active": "rgba(0, 0, 0, 0.54)",
+ "disabled": "rgba(0, 0, 0, 0.26)",
+ "disabledBackground": "rgba(0, 0, 0, 0.12)",
+ "disabledOpacity": 0.38,
+ "focus": "rgba(0, 0, 0, 0.12)",
+ "focusOpacity": 0.12,
+ "hover": "rgba(0, 0, 0, 0.04)",
+ "hoverOpacity": 0.04,
+ "selected": "rgba(0, 0, 0, 0.08)",
+ "selectedOpacity": 0.08,
+ },
+ "augmentColor": [Function],
+ "background": Object {
+ "default": "#fafafa",
+ "paper": "#fff",
+ },
+ "common": Object {
+ "black": "#000",
+ "white": "#fff",
+ },
+ "contrastThreshold": 3,
+ "divider": "rgba(0, 0, 0, 0.12)",
+ "error": Object {
+ "contrastText": "#fff",
+ "dark": "#d32f2f",
+ "light": "#e57373",
+ "main": "#f44336",
+ },
+ "getContrastText": [Function],
+ "grey": Object {
+ "100": "#f5f5f5",
+ "200": "#eeeeee",
+ "300": "#e0e0e0",
+ "400": "#bdbdbd",
+ "50": "#fafafa",
+ "500": "#9e9e9e",
+ "600": "#757575",
+ "700": "#616161",
+ "800": "#424242",
+ "900": "#212121",
+ "A100": "#d5d5d5",
+ "A200": "#aaaaaa",
+ "A400": "#303030",
+ "A700": "#616161",
+ },
+ "info": Object {
+ "contrastText": "#fff",
+ "dark": "#1976d2",
+ "light": "#64b5f6",
+ "main": "#2196f3",
+ },
+ "primary": Object {
+ "contrastText": "#fff",
+ "dark": "#303f9f",
+ "light": "#7986cb",
+ "main": "#3f51b5",
+ },
+ "secondary": Object {
+ "contrastText": "#fff",
+ "dark": "#c51162",
+ "light": "#ff4081",
+ "main": "#f50057",
+ },
+ "success": Object {
+ "contrastText": "rgba(0, 0, 0, 0.87)",
+ "dark": "#388e3c",
+ "light": "#81c784",
+ "main": "#4caf50",
+ },
+ "text": Object {
+ "disabled": "rgba(0, 0, 0, 0.38)",
+ "hint": "rgba(0, 0, 0, 0.38)",
+ "primary": "rgba(0, 0, 0, 0.87)",
+ "secondary": "rgba(0, 0, 0, 0.54)",
+ },
+ "tonalOffset": 0.2,
+ "type": "light",
+ "warning": Object {
+ "contrastText": "rgba(0, 0, 0, 0.87)",
+ "dark": "#f57c00",
+ "light": "#ffb74d",
+ "main": "#ff9800",
+ },
+ },
+ "props": Object {},
+ "shadows": Array [
+ "none",
+ "0px 2px 1px -1px rgba(0,0,0,0.2),0px 1px 1px 0px rgba(0,0,0,0.14),0px 1px 3px 0px rgba(0,0,0,0.12)",
+ "0px 3px 1px -2px rgba(0,0,0,0.2),0px 2px 2px 0px rgba(0,0,0,0.14),0px 1px 5px 0px rgba(0,0,0,0.12)",
+ "0px 3px 3px -2px rgba(0,0,0,0.2),0px 3px 4px 0px rgba(0,0,0,0.14),0px 1px 8px 0px rgba(0,0,0,0.12)",
+ "0px 2px 4px -1px rgba(0,0,0,0.2),0px 4px 5px 0px rgba(0,0,0,0.14),0px 1px 10px 0px rgba(0,0,0,0.12)",
+ "0px 3px 5px -1px rgba(0,0,0,0.2),0px 5px 8px 0px rgba(0,0,0,0.14),0px 1px 14px 0px rgba(0,0,0,0.12)",
+ "0px 3px 5px -1px rgba(0,0,0,0.2),0px 6px 10px 0px rgba(0,0,0,0.14),0px 1px 18px 0px rgba(0,0,0,0.12)",
+ "0px 4px 5px -2px rgba(0,0,0,0.2),0px 7px 10px 1px rgba(0,0,0,0.14),0px 2px 16px 1px rgba(0,0,0,0.12)",
+ "0px 5px 5px -3px rgba(0,0,0,0.2),0px 8px 10px 1px rgba(0,0,0,0.14),0px 3px 14px 2px rgba(0,0,0,0.12)",
+ "0px 5px 6px -3px rgba(0,0,0,0.2),0px 9px 12px 1px rgba(0,0,0,0.14),0px 3px 16px 2px rgba(0,0,0,0.12)",
+ "0px 6px 6px -3px rgba(0,0,0,0.2),0px 10px 14px 1px rgba(0,0,0,0.14),0px 4px 18px 3px rgba(0,0,0,0.12)",
+ "0px 6px 7px -4px rgba(0,0,0,0.2),0px 11px 15px 1px rgba(0,0,0,0.14),0px 4px 20px 3px rgba(0,0,0,0.12)",
+ "0px 7px 8px -4px rgba(0,0,0,0.2),0px 12px 17px 2px rgba(0,0,0,0.14),0px 5px 22px 4px rgba(0,0,0,0.12)",
+ "0px 7px 8px -4px rgba(0,0,0,0.2),0px 13px 19px 2px rgba(0,0,0,0.14),0px 5px 24px 4px rgba(0,0,0,0.12)",
+ "0px 7px 9px -4px rgba(0,0,0,0.2),0px 14px 21px 2px rgba(0,0,0,0.14),0px 5px 26px 4px rgba(0,0,0,0.12)",
+ "0px 8px 9px -5px rgba(0,0,0,0.2),0px 15px 22px 2px rgba(0,0,0,0.14),0px 6px 28px 5px rgba(0,0,0,0.12)",
+ "0px 8px 10px -5px rgba(0,0,0,0.2),0px 16px 24px 2px rgba(0,0,0,0.14),0px 6px 30px 5px rgba(0,0,0,0.12)",
+ "0px 8px 11px -5px rgba(0,0,0,0.2),0px 17px 26px 2px rgba(0,0,0,0.14),0px 6px 32px 5px rgba(0,0,0,0.12)",
+ "0px 9px 11px -5px rgba(0,0,0,0.2),0px 18px 28px 2px rgba(0,0,0,0.14),0px 7px 34px 6px rgba(0,0,0,0.12)",
+ "0px 9px 12px -6px rgba(0,0,0,0.2),0px 19px 29px 2px rgba(0,0,0,0.14),0px 7px 36px 6px rgba(0,0,0,0.12)",
+ "0px 10px 13px -6px rgba(0,0,0,0.2),0px 20px 31px 3px rgba(0,0,0,0.14),0px 8px 38px 7px rgba(0,0,0,0.12)",
+ "0px 10px 13px -6px rgba(0,0,0,0.2),0px 21px 33px 3px rgba(0,0,0,0.14),0px 8px 40px 7px rgba(0,0,0,0.12)",
+ "0px 10px 14px -6px rgba(0,0,0,0.2),0px 22px 35px 3px rgba(0,0,0,0.14),0px 8px 42px 7px rgba(0,0,0,0.12)",
+ "0px 11px 14px -7px rgba(0,0,0,0.2),0px 23px 36px 3px rgba(0,0,0,0.14),0px 9px 44px 8px rgba(0,0,0,0.12)",
+ "0px 11px 15px -7px rgba(0,0,0,0.2),0px 24px 38px 3px rgba(0,0,0,0.14),0px 9px 46px 8px rgba(0,0,0,0.12)",
+ ],
+ "shape": Object {
+ "borderRadius": 4,
+ },
+ "spacing": [Function],
+ "transitions": Object {
+ "create": [Function],
+ "duration": Object {
+ "complex": 375,
+ "enteringScreen": 225,
+ "leavingScreen": 195,
+ "short": 250,
+ "shorter": 200,
+ "shortest": 150,
+ "standard": 300,
+ },
+ "easing": Object {
+ "easeIn": "cubic-bezier(0.4, 0, 1, 1)",
+ "easeInOut": "cubic-bezier(0.4, 0, 0.2, 1)",
+ "easeOut": "cubic-bezier(0.0, 0, 0.2, 1)",
+ "sharp": "cubic-bezier(0.4, 0, 0.6, 1)",
+ },
+ "getAutoHeightDuration": [Function],
+ },
+ "typography": Object {
+ "body1": Object {
+ "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
+ "fontSize": "1rem",
+ "fontWeight": 400,
+ "letterSpacing": "0.00938em",
+ "lineHeight": 1.5,
+ },
+ "body2": Object {
+ "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
+ "fontSize": "0.875rem",
+ "fontWeight": 400,
+ "letterSpacing": "0.01071em",
+ "lineHeight": 1.43,
+ },
+ "button": Object {
+ "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
+ "fontSize": "0.875rem",
+ "fontWeight": 500,
+ "letterSpacing": "0.02857em",
+ "lineHeight": 1.75,
+ "textTransform": "uppercase",
+ },
+ "caption": Object {
+ "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
+ "fontSize": "0.75rem",
+ "fontWeight": 400,
+ "letterSpacing": "0.03333em",
+ "lineHeight": 1.66,
+ },
+ "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
+ "fontSize": 14,
+ "fontWeightBold": 700,
+ "fontWeightLight": 300,
+ "fontWeightMedium": 500,
+ "fontWeightRegular": 400,
+ "h1": Object {
+ "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
+ "fontSize": "6rem",
+ "fontWeight": 300,
+ "letterSpacing": "-0.01562em",
+ "lineHeight": 1.167,
+ },
+ "h2": Object {
+ "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
+ "fontSize": "3.75rem",
+ "fontWeight": 300,
+ "letterSpacing": "-0.00833em",
+ "lineHeight": 1.2,
+ },
+ "h3": Object {
+ "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
+ "fontSize": "3rem",
+ "fontWeight": 400,
+ "letterSpacing": "0em",
+ "lineHeight": 1.167,
+ },
+ "h4": Object {
+ "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
+ "fontSize": "2.125rem",
+ "fontWeight": 400,
+ "letterSpacing": "0.00735em",
+ "lineHeight": 1.235,
+ },
+ "h5": Object {
+ "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
+ "fontSize": "1.5rem",
+ "fontWeight": 400,
+ "letterSpacing": "0em",
+ "lineHeight": 1.334,
+ },
+ "h6": Object {
+ "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
+ "fontSize": "1.25rem",
+ "fontWeight": 500,
+ "letterSpacing": "0.0075em",
+ "lineHeight": 1.6,
+ },
+ "htmlFontSize": 16,
+ "overline": Object {
+ "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
+ "fontSize": "0.75rem",
+ "fontWeight": 400,
+ "letterSpacing": "0.08333em",
+ "lineHeight": 2.66,
+ "textTransform": "uppercase",
+ },
+ "pxToRem": [Function],
+ "round": [Function],
+ "subtitle1": Object {
+ "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
+ "fontSize": "1rem",
+ "fontWeight": 400,
+ "letterSpacing": "0.00938em",
+ "lineHeight": 1.75,
+ },
+ "subtitle2": Object {
+ "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
+ "fontSize": "0.875rem",
+ "fontWeight": 500,
+ "letterSpacing": "0.00714em",
+ "lineHeight": 1.57,
+ },
+ },
+ "zIndex": Object {
+ "appBar": 1100,
+ "drawer": 1200,
+ "mobileStepper": 1000,
+ "modal": 1300,
+ "snackbar": 1400,
+ "speedDial": 1050,
+ "tooltip": 1500,
+ },
+ },
+ "name": "MuiBackdrop",
+ },
+ "propTypes": Object {
+ "classes": [Function],
+ "innerRef": [Function],
+ },
+ "render": [Function],
+ "useStyles": [Function],
+ }
+ }
+ BackdropProps={
+ Object {
+ "transitionDuration": Object {
+ "enter": 225,
+ "exit": 195,
+ },
+ }
+ }
+ className="MuiDialog-root modal-root"
+ closeAfterTransition={true}
+ disableEscapeKeyDown={false}
+ onClose={[MockFunction]}
+ open={true}
+ >
+ <ForwardRef(Portal)
+ disablePortal={false}
+ >
+ <Portal
+ containerInfo={
+ <body
+ style="padding-right: 0px; overflow: hidden;"
+ >
+ <div
+ class="MuiDialog-root modal-root"
+ role="presentation"
+ style="position: fixed; z-index: 1300; right: 0px; bottom: 0px; top: 0px; left: 0px;"
+ >
+ <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
+ 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"
+ >
+ <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"
+ >
+ consumption_visualizer.modal.window_title
+ </div>
+ <button
+ aria-label="consumption_visualizer.modal.close"
+ class="MuiButtonBase-root MuiIconButton-root modal-paper-close-button"
+ tabindex="0"
+ type="button"
+ >
+ <span
+ class="MuiIconButton-label"
+ >
+ <svg
+ class="styles__icon___23x3R"
+ height="16"
+ width="16"
+ >
+ <use
+ xlink:href="#test-file-stub"
+ />
+ </svg>
+ </span>
+ <span
+ class="MuiTouchRipple-root"
+ />
+ </button>
+ <div
+ class="estimation-modal"
+ >
+ <div
+ class="text-20-normal modal-title"
+ >
+ consumption_visualizer.modal.title
+ </div>
+ <div
+ class="text-16-normal"
+ >
+ consumption_visualizer.modal.part1
+ </div>
+ <br />
+ <div
+ class="text-16-normal"
+ >
+ consumption_visualizer.modal.part2
+ </div>
+ <ul>
+ <li>
+ <span
+ class="electricity"
+ >
+ FLUID.ELECTRICITY.LABEL
+ </span>
+ consumption_visualizer.modal.list1
+ </li>
+ <li>
+ <span
+ class="water"
+ >
+ FLUID.WATER.LABEL
+ </span>
+ consumption_visualizer.modal.list3
+ </li>
+ <li>
+ <span
+ class="gas"
+ >
+ FLUID.GAS.LABEL
+ </span>
+ consumption_visualizer.modal.list2
+ </li>
+ </ul>
+ <div
+ class="text-16-normal"
+ >
+ consumption_visualizer.modal.part3
+ </div>
+ </div>
+ </div>
+ </div>
+ <div
+ data-test="sentinelEnd"
+ tabindex="0"
+ />
+ </div>
+ </body>
+ }
+ >
+ <div
+ className="MuiDialog-root modal-root"
+ onKeyDown={[Function]}
+ role="presentation"
+ style={
+ Object {
+ "bottom": 0,
+ "left": 0,
+ "position": "fixed",
+ "right": 0,
+ "top": 0,
+ "zIndex": 1300,
+ }
+ }
+ >
+ <WithStyles(ForwardRef(Backdrop))
+ onClick={[Function]}
+ open={true}
+ transitionDuration={
+ Object {
+ "enter": 225,
+ "exit": 195,
+ }
+ }
+ >
+ <ForwardRef(Backdrop)
+ classes={
+ Object {
+ "invisible": "MuiBackdrop-invisible",
+ "root": "MuiBackdrop-root",
+ }
+ }
+ onClick={[Function]}
+ open={true}
+ transitionDuration={
+ Object {
+ "enter": 225,
+ "exit": 195,
+ }
+ }
+ >
+ <ForwardRef(Fade)
+ in={true}
+ onClick={[Function]}
+ timeout={
+ Object {
+ "enter": 225,
+ "exit": 195,
+ }
+ }
+ >
+ <Transition
+ appear={true}
+ enter={true}
+ exit={true}
+ in={true}
+ mountOnEnter={false}
+ onClick={[Function]}
+ onEnter={[Function]}
+ onEntered={[Function]}
+ onEntering={[Function]}
+ onExit={[Function]}
+ onExited={[Function]}
+ onExiting={[Function]}
+ timeout={
+ Object {
+ "enter": 225,
+ "exit": 195,
+ }
+ }
+ unmountOnExit={false}
+ >
+ <div
+ aria-hidden={true}
+ className="MuiBackdrop-root"
+ onClick={[Function]}
+ style={
+ Object {
+ "opacity": 1,
+ "visibility": undefined,
+ }
+ }
+ />
+ </Transition>
+ </ForwardRef(Fade)>
+ </ForwardRef(Backdrop)>
+ </WithStyles(ForwardRef(Backdrop))>
+ <Unstable_TrapFocus
+ disableAutoFocus={false}
+ disableEnforceFocus={false}
+ disableRestoreFocus={false}
+ getDoc={[Function]}
+ isEnabled={[Function]}
+ open={true}
+ >
+ <div
+ data-test="sentinelStart"
+ tabIndex={0}
+ />
+ <ForwardRef(Fade)
+ appear={true}
+ in={true}
+ onEnter={[Function]}
+ onExited={[Function]}
+ role="none presentation"
+ tabIndex="-1"
+ timeout={
+ Object {
+ "enter": 225,
+ "exit": 195,
+ }
+ }
+ >
+ <Transition
+ appear={true}
+ enter={true}
+ exit={true}
+ in={true}
+ mountOnEnter={false}
+ onEnter={[Function]}
+ onEntered={[Function]}
+ onEntering={[Function]}
+ onExit={[Function]}
+ onExited={[Function]}
+ onExiting={[Function]}
+ role="none presentation"
+ tabIndex="-1"
+ timeout={
+ Object {
+ "enter": 225,
+ "exit": 195,
+ }
+ }
+ unmountOnExit={false}
+ >
+ <div
+ className="MuiDialog-container MuiDialog-scrollPaper"
+ onMouseDown={[Function]}
+ onMouseUp={[Function]}
+ role="none presentation"
+ style={
+ Object {
+ "opacity": 1,
+ "visibility": undefined,
+ }
+ }
+ tabIndex="-1"
+ >
+ <WithStyles(ForwardRef(Paper))
+ aria-labelledby="accessibility-title"
+ className="MuiDialog-paper modal-paper MuiDialog-paperScrollPaper MuiDialog-paperWidthSm"
+ elevation={24}
+ role="dialog"
+ >
+ <ForwardRef(Paper)
+ aria-labelledby="accessibility-title"
+ className="MuiDialog-paper modal-paper MuiDialog-paperScrollPaper MuiDialog-paperWidthSm"
+ classes={
+ Object {
+ "elevation0": "MuiPaper-elevation0",
+ "elevation1": "MuiPaper-elevation1",
+ "elevation10": "MuiPaper-elevation10",
+ "elevation11": "MuiPaper-elevation11",
+ "elevation12": "MuiPaper-elevation12",
+ "elevation13": "MuiPaper-elevation13",
+ "elevation14": "MuiPaper-elevation14",
+ "elevation15": "MuiPaper-elevation15",
+ "elevation16": "MuiPaper-elevation16",
+ "elevation17": "MuiPaper-elevation17",
+ "elevation18": "MuiPaper-elevation18",
+ "elevation19": "MuiPaper-elevation19",
+ "elevation2": "MuiPaper-elevation2",
+ "elevation20": "MuiPaper-elevation20",
+ "elevation21": "MuiPaper-elevation21",
+ "elevation22": "MuiPaper-elevation22",
+ "elevation23": "MuiPaper-elevation23",
+ "elevation24": "MuiPaper-elevation24",
+ "elevation3": "MuiPaper-elevation3",
+ "elevation4": "MuiPaper-elevation4",
+ "elevation5": "MuiPaper-elevation5",
+ "elevation6": "MuiPaper-elevation6",
+ "elevation7": "MuiPaper-elevation7",
+ "elevation8": "MuiPaper-elevation8",
+ "elevation9": "MuiPaper-elevation9",
+ "outlined": "MuiPaper-outlined",
+ "root": "MuiPaper-root",
+ "rounded": "MuiPaper-rounded",
+ }
+ }
+ elevation={24}
+ role="dialog"
+ >
+ <div
+ aria-labelledby="accessibility-title"
+ className="MuiPaper-root MuiDialog-paper modal-paper MuiDialog-paperScrollPaper MuiDialog-paperWidthSm MuiPaper-elevation24 MuiPaper-rounded"
+ role="dialog"
+ >
+ <div
+ id="accessibility-title"
+ >
+ consumption_visualizer.modal.window_title
+ </div>
+ <WithStyles(ForwardRef(IconButton))
+ aria-label="consumption_visualizer.modal.close"
+ className="modal-paper-close-button"
+ onClick={[MockFunction]}
+ >
+ <ForwardRef(IconButton)
+ aria-label="consumption_visualizer.modal.close"
+ className="modal-paper-close-button"
+ 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",
+ "sizeSmall": "MuiIconButton-sizeSmall",
+ }
+ }
+ onClick={[MockFunction]}
+ >
+ <WithStyles(ForwardRef(ButtonBase))
+ aria-label="consumption_visualizer.modal.close"
+ centerRipple={true}
+ className="MuiIconButton-root modal-paper-close-button"
+ disabled={false}
+ focusRipple={true}
+ onClick={[MockFunction]}
+ >
+ <ForwardRef(ButtonBase)
+ aria-label="consumption_visualizer.modal.close"
+ centerRipple={true}
+ className="MuiIconButton-root modal-paper-close-button"
+ classes={
+ Object {
+ "disabled": "Mui-disabled",
+ "focusVisible": "Mui-focusVisible",
+ "root": "MuiButtonBase-root",
+ }
+ }
+ disabled={false}
+ focusRipple={true}
+ onClick={[MockFunction]}
+ >
+ <button
+ aria-label="consumption_visualizer.modal.close"
+ className="MuiButtonBase-root MuiIconButton-root modal-paper-close-button"
+ disabled={false}
+ onBlur={[Function]}
+ onClick={[MockFunction]}
+ 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"
+ >
+ <Icon
+ icon="test-file-stub"
+ size={16}
+ spin={false}
+ >
+ <Component
+ className="styles__icon___23x3R"
+ height={16}
+ style={Object {}}
+ width={16}
+ >
+ <svg
+ className="styles__icon___23x3R"
+ height={16}
+ style={Object {}}
+ width={16}
+ >
+ <use
+ xlinkHref="#test-file-stub"
+ />
+ </svg>
+ </Component>
+ </Icon>
+ </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))>
+ <div
+ className="estimation-modal"
+ >
+ <div
+ className="text-20-normal modal-title"
+ >
+ consumption_visualizer.modal.title
+ </div>
+ <div
+ className="text-16-normal"
+ >
+ consumption_visualizer.modal.part1
+ </div>
+ <br />
+ <div
+ className="text-16-normal"
+ >
+ consumption_visualizer.modal.part2
+ </div>
+ <ul>
+ <li>
+ <span
+ className="electricity"
+ >
+ FLUID.ELECTRICITY.LABEL
+ </span>
+ consumption_visualizer.modal.list1
+ </li>
+ <li>
+ <span
+ className="water"
+ >
+ FLUID.WATER.LABEL
+ </span>
+ consumption_visualizer.modal.list3
+ </li>
+ <li>
+ <span
+ className="gas"
+ >
+ FLUID.GAS.LABEL
+ </span>
+ consumption_visualizer.modal.list2
+ </li>
+ </ul>
+ <div
+ className="text-16-normal"
+ >
+ consumption_visualizer.modal.part3
+ </div>
+ </div>
+ </div>
+ </ForwardRef(Paper)>
+ </WithStyles(ForwardRef(Paper))>
+ </div>
+ </Transition>
+ </ForwardRef(Fade)>
+ <div
+ data-test="sentinelEnd"
+ tabIndex={0}
+ />
+ </Unstable_TrapFocus>
+ </div>
+ </Portal>
+ </ForwardRef(Portal)>
+ </ForwardRef(Modal)>
+ </ForwardRef(Dialog)>
+ </WithStyles(ForwardRef(Dialog))>
+ </EstimatedConsumptionModal>
+</Provider>
+`;
diff --git a/src/components/ConsumptionVisualizer/__snapshots__/NoDataModal.spec.tsx.snap b/src/components/ConsumptionVisualizer/__snapshots__/NoDataModal.spec.tsx.snap
index f7551fdfb..5f65ba1f1 100644
--- a/src/components/ConsumptionVisualizer/__snapshots__/NoDataModal.spec.tsx.snap
+++ b/src/components/ConsumptionVisualizer/__snapshots__/NoDataModal.spec.tsx.snap
@@ -1,3 +1,1080 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
-exports[`NoDataModal component should render correctly 1`] = `ReactWrapper {}`;
+exports[`NoDataModal component should render correctly 1`] = `
+<Provider
+ store={
+ Object {
+ "clearActions": [Function],
+ "dispatch": [Function],
+ "getActions": [Function],
+ "getState": [Function],
+ "replaceReducer": [Function],
+ "subscribe": [Function],
+ }
+ }
+>
+ <NoDataModal
+ handleCloseClick={[MockFunction]}
+ open={true}
+ >
+ <WithStyles(ForwardRef(Dialog))
+ aria-labelledby="accessibility-title"
+ classes={
+ Object {
+ "paper": "modal-paper",
+ "root": "modal-root",
+ }
+ }
+ onClose={[MockFunction]}
+ open={true}
+ >
+ <ForwardRef(Dialog)
+ aria-labelledby="accessibility-title"
+ classes={
+ Object {
+ "container": "MuiDialog-container",
+ "paper": "MuiDialog-paper modal-paper",
+ "paperFullScreen": "MuiDialog-paperFullScreen",
+ "paperFullWidth": "MuiDialog-paperFullWidth",
+ "paperScrollBody": "MuiDialog-paperScrollBody",
+ "paperScrollPaper": "MuiDialog-paperScrollPaper",
+ "paperWidthFalse": "MuiDialog-paperWidthFalse",
+ "paperWidthLg": "MuiDialog-paperWidthLg",
+ "paperWidthMd": "MuiDialog-paperWidthMd",
+ "paperWidthSm": "MuiDialog-paperWidthSm",
+ "paperWidthXl": "MuiDialog-paperWidthXl",
+ "paperWidthXs": "MuiDialog-paperWidthXs",
+ "root": "MuiDialog-root modal-root",
+ "scrollBody": "MuiDialog-scrollBody",
+ "scrollPaper": "MuiDialog-scrollPaper",
+ }
+ }
+ onClose={[MockFunction]}
+ open={true}
+ >
+ <ForwardRef(Modal)
+ BackdropComponent={
+ Object {
+ "$$typeof": Symbol(react.forward_ref),
+ "Naked": Object {
+ "$$typeof": Symbol(react.forward_ref),
+ "propTypes": Object {
+ "children": [Function],
+ "className": [Function],
+ "classes": [Function],
+ "invisible": [Function],
+ "open": [Function],
+ "transitionDuration": [Function],
+ },
+ "render": [Function],
+ },
+ "displayName": "WithStyles(ForwardRef(Backdrop))",
+ "options": Object {
+ "defaultTheme": Object {
+ "breakpoints": Object {
+ "between": [Function],
+ "down": [Function],
+ "keys": Array [
+ "xs",
+ "sm",
+ "md",
+ "lg",
+ "xl",
+ ],
+ "only": [Function],
+ "up": [Function],
+ "values": Object {
+ "lg": 1280,
+ "md": 960,
+ "sm": 600,
+ "xl": 1920,
+ "xs": 0,
+ },
+ "width": [Function],
+ },
+ "direction": "ltr",
+ "mixins": Object {
+ "gutters": [Function],
+ "toolbar": Object {
+ "@media (min-width:0px) and (orientation: landscape)": Object {
+ "minHeight": 48,
+ },
+ "@media (min-width:600px)": Object {
+ "minHeight": 64,
+ },
+ "minHeight": 56,
+ },
+ },
+ "overrides": Object {},
+ "palette": Object {
+ "action": Object {
+ "activatedOpacity": 0.12,
+ "active": "rgba(0, 0, 0, 0.54)",
+ "disabled": "rgba(0, 0, 0, 0.26)",
+ "disabledBackground": "rgba(0, 0, 0, 0.12)",
+ "disabledOpacity": 0.38,
+ "focus": "rgba(0, 0, 0, 0.12)",
+ "focusOpacity": 0.12,
+ "hover": "rgba(0, 0, 0, 0.04)",
+ "hoverOpacity": 0.04,
+ "selected": "rgba(0, 0, 0, 0.08)",
+ "selectedOpacity": 0.08,
+ },
+ "augmentColor": [Function],
+ "background": Object {
+ "default": "#fafafa",
+ "paper": "#fff",
+ },
+ "common": Object {
+ "black": "#000",
+ "white": "#fff",
+ },
+ "contrastThreshold": 3,
+ "divider": "rgba(0, 0, 0, 0.12)",
+ "error": Object {
+ "contrastText": "#fff",
+ "dark": "#d32f2f",
+ "light": "#e57373",
+ "main": "#f44336",
+ },
+ "getContrastText": [Function],
+ "grey": Object {
+ "100": "#f5f5f5",
+ "200": "#eeeeee",
+ "300": "#e0e0e0",
+ "400": "#bdbdbd",
+ "50": "#fafafa",
+ "500": "#9e9e9e",
+ "600": "#757575",
+ "700": "#616161",
+ "800": "#424242",
+ "900": "#212121",
+ "A100": "#d5d5d5",
+ "A200": "#aaaaaa",
+ "A400": "#303030",
+ "A700": "#616161",
+ },
+ "info": Object {
+ "contrastText": "#fff",
+ "dark": "#1976d2",
+ "light": "#64b5f6",
+ "main": "#2196f3",
+ },
+ "primary": Object {
+ "contrastText": "#fff",
+ "dark": "#303f9f",
+ "light": "#7986cb",
+ "main": "#3f51b5",
+ },
+ "secondary": Object {
+ "contrastText": "#fff",
+ "dark": "#c51162",
+ "light": "#ff4081",
+ "main": "#f50057",
+ },
+ "success": Object {
+ "contrastText": "rgba(0, 0, 0, 0.87)",
+ "dark": "#388e3c",
+ "light": "#81c784",
+ "main": "#4caf50",
+ },
+ "text": Object {
+ "disabled": "rgba(0, 0, 0, 0.38)",
+ "hint": "rgba(0, 0, 0, 0.38)",
+ "primary": "rgba(0, 0, 0, 0.87)",
+ "secondary": "rgba(0, 0, 0, 0.54)",
+ },
+ "tonalOffset": 0.2,
+ "type": "light",
+ "warning": Object {
+ "contrastText": "rgba(0, 0, 0, 0.87)",
+ "dark": "#f57c00",
+ "light": "#ffb74d",
+ "main": "#ff9800",
+ },
+ },
+ "props": Object {},
+ "shadows": Array [
+ "none",
+ "0px 2px 1px -1px rgba(0,0,0,0.2),0px 1px 1px 0px rgba(0,0,0,0.14),0px 1px 3px 0px rgba(0,0,0,0.12)",
+ "0px 3px 1px -2px rgba(0,0,0,0.2),0px 2px 2px 0px rgba(0,0,0,0.14),0px 1px 5px 0px rgba(0,0,0,0.12)",
+ "0px 3px 3px -2px rgba(0,0,0,0.2),0px 3px 4px 0px rgba(0,0,0,0.14),0px 1px 8px 0px rgba(0,0,0,0.12)",
+ "0px 2px 4px -1px rgba(0,0,0,0.2),0px 4px 5px 0px rgba(0,0,0,0.14),0px 1px 10px 0px rgba(0,0,0,0.12)",
+ "0px 3px 5px -1px rgba(0,0,0,0.2),0px 5px 8px 0px rgba(0,0,0,0.14),0px 1px 14px 0px rgba(0,0,0,0.12)",
+ "0px 3px 5px -1px rgba(0,0,0,0.2),0px 6px 10px 0px rgba(0,0,0,0.14),0px 1px 18px 0px rgba(0,0,0,0.12)",
+ "0px 4px 5px -2px rgba(0,0,0,0.2),0px 7px 10px 1px rgba(0,0,0,0.14),0px 2px 16px 1px rgba(0,0,0,0.12)",
+ "0px 5px 5px -3px rgba(0,0,0,0.2),0px 8px 10px 1px rgba(0,0,0,0.14),0px 3px 14px 2px rgba(0,0,0,0.12)",
+ "0px 5px 6px -3px rgba(0,0,0,0.2),0px 9px 12px 1px rgba(0,0,0,0.14),0px 3px 16px 2px rgba(0,0,0,0.12)",
+ "0px 6px 6px -3px rgba(0,0,0,0.2),0px 10px 14px 1px rgba(0,0,0,0.14),0px 4px 18px 3px rgba(0,0,0,0.12)",
+ "0px 6px 7px -4px rgba(0,0,0,0.2),0px 11px 15px 1px rgba(0,0,0,0.14),0px 4px 20px 3px rgba(0,0,0,0.12)",
+ "0px 7px 8px -4px rgba(0,0,0,0.2),0px 12px 17px 2px rgba(0,0,0,0.14),0px 5px 22px 4px rgba(0,0,0,0.12)",
+ "0px 7px 8px -4px rgba(0,0,0,0.2),0px 13px 19px 2px rgba(0,0,0,0.14),0px 5px 24px 4px rgba(0,0,0,0.12)",
+ "0px 7px 9px -4px rgba(0,0,0,0.2),0px 14px 21px 2px rgba(0,0,0,0.14),0px 5px 26px 4px rgba(0,0,0,0.12)",
+ "0px 8px 9px -5px rgba(0,0,0,0.2),0px 15px 22px 2px rgba(0,0,0,0.14),0px 6px 28px 5px rgba(0,0,0,0.12)",
+ "0px 8px 10px -5px rgba(0,0,0,0.2),0px 16px 24px 2px rgba(0,0,0,0.14),0px 6px 30px 5px rgba(0,0,0,0.12)",
+ "0px 8px 11px -5px rgba(0,0,0,0.2),0px 17px 26px 2px rgba(0,0,0,0.14),0px 6px 32px 5px rgba(0,0,0,0.12)",
+ "0px 9px 11px -5px rgba(0,0,0,0.2),0px 18px 28px 2px rgba(0,0,0,0.14),0px 7px 34px 6px rgba(0,0,0,0.12)",
+ "0px 9px 12px -6px rgba(0,0,0,0.2),0px 19px 29px 2px rgba(0,0,0,0.14),0px 7px 36px 6px rgba(0,0,0,0.12)",
+ "0px 10px 13px -6px rgba(0,0,0,0.2),0px 20px 31px 3px rgba(0,0,0,0.14),0px 8px 38px 7px rgba(0,0,0,0.12)",
+ "0px 10px 13px -6px rgba(0,0,0,0.2),0px 21px 33px 3px rgba(0,0,0,0.14),0px 8px 40px 7px rgba(0,0,0,0.12)",
+ "0px 10px 14px -6px rgba(0,0,0,0.2),0px 22px 35px 3px rgba(0,0,0,0.14),0px 8px 42px 7px rgba(0,0,0,0.12)",
+ "0px 11px 14px -7px rgba(0,0,0,0.2),0px 23px 36px 3px rgba(0,0,0,0.14),0px 9px 44px 8px rgba(0,0,0,0.12)",
+ "0px 11px 15px -7px rgba(0,0,0,0.2),0px 24px 38px 3px rgba(0,0,0,0.14),0px 9px 46px 8px rgba(0,0,0,0.12)",
+ ],
+ "shape": Object {
+ "borderRadius": 4,
+ },
+ "spacing": [Function],
+ "transitions": Object {
+ "create": [Function],
+ "duration": Object {
+ "complex": 375,
+ "enteringScreen": 225,
+ "leavingScreen": 195,
+ "short": 250,
+ "shorter": 200,
+ "shortest": 150,
+ "standard": 300,
+ },
+ "easing": Object {
+ "easeIn": "cubic-bezier(0.4, 0, 1, 1)",
+ "easeInOut": "cubic-bezier(0.4, 0, 0.2, 1)",
+ "easeOut": "cubic-bezier(0.0, 0, 0.2, 1)",
+ "sharp": "cubic-bezier(0.4, 0, 0.6, 1)",
+ },
+ "getAutoHeightDuration": [Function],
+ },
+ "typography": Object {
+ "body1": Object {
+ "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
+ "fontSize": "1rem",
+ "fontWeight": 400,
+ "letterSpacing": "0.00938em",
+ "lineHeight": 1.5,
+ },
+ "body2": Object {
+ "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
+ "fontSize": "0.875rem",
+ "fontWeight": 400,
+ "letterSpacing": "0.01071em",
+ "lineHeight": 1.43,
+ },
+ "button": Object {
+ "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
+ "fontSize": "0.875rem",
+ "fontWeight": 500,
+ "letterSpacing": "0.02857em",
+ "lineHeight": 1.75,
+ "textTransform": "uppercase",
+ },
+ "caption": Object {
+ "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
+ "fontSize": "0.75rem",
+ "fontWeight": 400,
+ "letterSpacing": "0.03333em",
+ "lineHeight": 1.66,
+ },
+ "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
+ "fontSize": 14,
+ "fontWeightBold": 700,
+ "fontWeightLight": 300,
+ "fontWeightMedium": 500,
+ "fontWeightRegular": 400,
+ "h1": Object {
+ "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
+ "fontSize": "6rem",
+ "fontWeight": 300,
+ "letterSpacing": "-0.01562em",
+ "lineHeight": 1.167,
+ },
+ "h2": Object {
+ "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
+ "fontSize": "3.75rem",
+ "fontWeight": 300,
+ "letterSpacing": "-0.00833em",
+ "lineHeight": 1.2,
+ },
+ "h3": Object {
+ "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
+ "fontSize": "3rem",
+ "fontWeight": 400,
+ "letterSpacing": "0em",
+ "lineHeight": 1.167,
+ },
+ "h4": Object {
+ "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
+ "fontSize": "2.125rem",
+ "fontWeight": 400,
+ "letterSpacing": "0.00735em",
+ "lineHeight": 1.235,
+ },
+ "h5": Object {
+ "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
+ "fontSize": "1.5rem",
+ "fontWeight": 400,
+ "letterSpacing": "0em",
+ "lineHeight": 1.334,
+ },
+ "h6": Object {
+ "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
+ "fontSize": "1.25rem",
+ "fontWeight": 500,
+ "letterSpacing": "0.0075em",
+ "lineHeight": 1.6,
+ },
+ "htmlFontSize": 16,
+ "overline": Object {
+ "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
+ "fontSize": "0.75rem",
+ "fontWeight": 400,
+ "letterSpacing": "0.08333em",
+ "lineHeight": 2.66,
+ "textTransform": "uppercase",
+ },
+ "pxToRem": [Function],
+ "round": [Function],
+ "subtitle1": Object {
+ "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
+ "fontSize": "1rem",
+ "fontWeight": 400,
+ "letterSpacing": "0.00938em",
+ "lineHeight": 1.75,
+ },
+ "subtitle2": Object {
+ "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
+ "fontSize": "0.875rem",
+ "fontWeight": 500,
+ "letterSpacing": "0.00714em",
+ "lineHeight": 1.57,
+ },
+ },
+ "zIndex": Object {
+ "appBar": 1100,
+ "drawer": 1200,
+ "mobileStepper": 1000,
+ "modal": 1300,
+ "snackbar": 1400,
+ "speedDial": 1050,
+ "tooltip": 1500,
+ },
+ },
+ "name": "MuiBackdrop",
+ },
+ "propTypes": Object {
+ "classes": [Function],
+ "innerRef": [Function],
+ },
+ "render": [Function],
+ "useStyles": [Function],
+ }
+ }
+ BackdropProps={
+ Object {
+ "transitionDuration": Object {
+ "enter": 225,
+ "exit": 195,
+ },
+ }
+ }
+ className="MuiDialog-root modal-root"
+ closeAfterTransition={true}
+ disableEscapeKeyDown={false}
+ onClose={[MockFunction]}
+ open={true}
+ >
+ <ForwardRef(Portal)
+ disablePortal={false}
+ >
+ <Portal
+ containerInfo={
+ <body
+ style="padding-right: 0px; overflow: hidden;"
+ >
+ <div
+ class="MuiDialog-root modal-root"
+ role="presentation"
+ style="position: fixed; z-index: 1300; right: 0px; bottom: 0px; top: 0px; left: 0px;"
+ >
+ <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
+ 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"
+ >
+ <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"
+ >
+ consumption_visualizer.modal.window_title
+ </div>
+ <button
+ aria-label="consumption_visualizer.modal.close"
+ class="MuiButtonBase-root MuiIconButton-root modal-paper-close-button"
+ tabindex="0"
+ type="button"
+ >
+ <span
+ class="MuiIconButton-label"
+ >
+ <svg
+ class="styles__icon___23x3R"
+ height="16"
+ width="16"
+ >
+ <use
+ xlink:href="#test-file-stub"
+ />
+ </svg>
+ </span>
+ <span
+ class="MuiTouchRipple-root"
+ />
+ </button>
+ <div
+ class="nodata-modal"
+ >
+ <div
+ class="question-mark"
+ >
+ <svg
+ class="styles__icon___23x3R"
+ height="36"
+ width="36"
+ >
+ <use
+ xlink:href="#test-file-stub"
+ />
+ </svg>
+ </div>
+ <div
+ class="text-20-normal title"
+ >
+ consumption_visualizer.why_no_data
+ </div>
+ <div
+ class="text-16-normal"
+ >
+ consumption_visualizer.dataModal.list_title
+ </div>
+ <div
+ class="text-16-normal justified-text"
+ >
+ <span>
+ •
+ </span>
+ consumption_visualizer.dataModal.item1
+ </div>
+ <div
+ class="text-16-normal justified-text"
+ >
+ <span>
+ •
+ </span>
+ consumption_visualizer.dataModal.item2
+ </div>
+ <div
+ class="text-16-normal justified-text"
+ >
+ <span>
+ •
+ </span>
+ consumption_visualizer.dataModal.item3
+ </div>
+ <div
+ class="text-16-normal justified-text"
+ >
+ <span>
+ •
+ </span>
+ consumption_visualizer.dataModal.item4
+ </div>
+ <button
+ aria-label="ecogesture_info_modal.button_close"
+ class="MuiButtonBase-root MuiButton-root btn-highlight MuiButton-text"
+ tabindex="0"
+ type="button"
+ >
+ <span
+ class="MuiButton-label text-16-bold"
+ >
+ ecogesture_info_modal.button_close
+ </span>
+ <span
+ class="MuiTouchRipple-root"
+ />
+ </button>
+ </div>
+ </div>
+ </div>
+ <div
+ data-test="sentinelEnd"
+ tabindex="0"
+ />
+ </div>
+ </body>
+ }
+ >
+ <div
+ className="MuiDialog-root modal-root"
+ onKeyDown={[Function]}
+ role="presentation"
+ style={
+ Object {
+ "bottom": 0,
+ "left": 0,
+ "position": "fixed",
+ "right": 0,
+ "top": 0,
+ "zIndex": 1300,
+ }
+ }
+ >
+ <WithStyles(ForwardRef(Backdrop))
+ onClick={[Function]}
+ open={true}
+ transitionDuration={
+ Object {
+ "enter": 225,
+ "exit": 195,
+ }
+ }
+ >
+ <ForwardRef(Backdrop)
+ classes={
+ Object {
+ "invisible": "MuiBackdrop-invisible",
+ "root": "MuiBackdrop-root",
+ }
+ }
+ onClick={[Function]}
+ open={true}
+ transitionDuration={
+ Object {
+ "enter": 225,
+ "exit": 195,
+ }
+ }
+ >
+ <ForwardRef(Fade)
+ in={true}
+ onClick={[Function]}
+ timeout={
+ Object {
+ "enter": 225,
+ "exit": 195,
+ }
+ }
+ >
+ <Transition
+ appear={true}
+ enter={true}
+ exit={true}
+ in={true}
+ mountOnEnter={false}
+ onClick={[Function]}
+ onEnter={[Function]}
+ onEntered={[Function]}
+ onEntering={[Function]}
+ onExit={[Function]}
+ onExited={[Function]}
+ onExiting={[Function]}
+ timeout={
+ Object {
+ "enter": 225,
+ "exit": 195,
+ }
+ }
+ unmountOnExit={false}
+ >
+ <div
+ aria-hidden={true}
+ className="MuiBackdrop-root"
+ onClick={[Function]}
+ style={
+ Object {
+ "opacity": 1,
+ "visibility": undefined,
+ }
+ }
+ />
+ </Transition>
+ </ForwardRef(Fade)>
+ </ForwardRef(Backdrop)>
+ </WithStyles(ForwardRef(Backdrop))>
+ <Unstable_TrapFocus
+ disableAutoFocus={false}
+ disableEnforceFocus={false}
+ disableRestoreFocus={false}
+ getDoc={[Function]}
+ isEnabled={[Function]}
+ open={true}
+ >
+ <div
+ data-test="sentinelStart"
+ tabIndex={0}
+ />
+ <ForwardRef(Fade)
+ appear={true}
+ in={true}
+ onEnter={[Function]}
+ onExited={[Function]}
+ role="none presentation"
+ tabIndex="-1"
+ timeout={
+ Object {
+ "enter": 225,
+ "exit": 195,
+ }
+ }
+ >
+ <Transition
+ appear={true}
+ enter={true}
+ exit={true}
+ in={true}
+ mountOnEnter={false}
+ onEnter={[Function]}
+ onEntered={[Function]}
+ onEntering={[Function]}
+ onExit={[Function]}
+ onExited={[Function]}
+ onExiting={[Function]}
+ role="none presentation"
+ tabIndex="-1"
+ timeout={
+ Object {
+ "enter": 225,
+ "exit": 195,
+ }
+ }
+ unmountOnExit={false}
+ >
+ <div
+ className="MuiDialog-container MuiDialog-scrollPaper"
+ onMouseDown={[Function]}
+ onMouseUp={[Function]}
+ role="none presentation"
+ style={
+ Object {
+ "opacity": 1,
+ "visibility": undefined,
+ }
+ }
+ tabIndex="-1"
+ >
+ <WithStyles(ForwardRef(Paper))
+ aria-labelledby="accessibility-title"
+ className="MuiDialog-paper modal-paper MuiDialog-paperScrollPaper MuiDialog-paperWidthSm"
+ elevation={24}
+ role="dialog"
+ >
+ <ForwardRef(Paper)
+ aria-labelledby="accessibility-title"
+ className="MuiDialog-paper modal-paper MuiDialog-paperScrollPaper MuiDialog-paperWidthSm"
+ classes={
+ Object {
+ "elevation0": "MuiPaper-elevation0",
+ "elevation1": "MuiPaper-elevation1",
+ "elevation10": "MuiPaper-elevation10",
+ "elevation11": "MuiPaper-elevation11",
+ "elevation12": "MuiPaper-elevation12",
+ "elevation13": "MuiPaper-elevation13",
+ "elevation14": "MuiPaper-elevation14",
+ "elevation15": "MuiPaper-elevation15",
+ "elevation16": "MuiPaper-elevation16",
+ "elevation17": "MuiPaper-elevation17",
+ "elevation18": "MuiPaper-elevation18",
+ "elevation19": "MuiPaper-elevation19",
+ "elevation2": "MuiPaper-elevation2",
+ "elevation20": "MuiPaper-elevation20",
+ "elevation21": "MuiPaper-elevation21",
+ "elevation22": "MuiPaper-elevation22",
+ "elevation23": "MuiPaper-elevation23",
+ "elevation24": "MuiPaper-elevation24",
+ "elevation3": "MuiPaper-elevation3",
+ "elevation4": "MuiPaper-elevation4",
+ "elevation5": "MuiPaper-elevation5",
+ "elevation6": "MuiPaper-elevation6",
+ "elevation7": "MuiPaper-elevation7",
+ "elevation8": "MuiPaper-elevation8",
+ "elevation9": "MuiPaper-elevation9",
+ "outlined": "MuiPaper-outlined",
+ "root": "MuiPaper-root",
+ "rounded": "MuiPaper-rounded",
+ }
+ }
+ elevation={24}
+ role="dialog"
+ >
+ <div
+ aria-labelledby="accessibility-title"
+ className="MuiPaper-root MuiDialog-paper modal-paper MuiDialog-paperScrollPaper MuiDialog-paperWidthSm MuiPaper-elevation24 MuiPaper-rounded"
+ role="dialog"
+ >
+ <div
+ id="accessibility-title"
+ >
+ consumption_visualizer.modal.window_title
+ </div>
+ <WithStyles(ForwardRef(IconButton))
+ aria-label="consumption_visualizer.modal.close"
+ className="modal-paper-close-button"
+ onClick={[MockFunction]}
+ >
+ <ForwardRef(IconButton)
+ aria-label="consumption_visualizer.modal.close"
+ className="modal-paper-close-button"
+ 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",
+ "sizeSmall": "MuiIconButton-sizeSmall",
+ }
+ }
+ onClick={[MockFunction]}
+ >
+ <WithStyles(ForwardRef(ButtonBase))
+ aria-label="consumption_visualizer.modal.close"
+ centerRipple={true}
+ className="MuiIconButton-root modal-paper-close-button"
+ disabled={false}
+ focusRipple={true}
+ onClick={[MockFunction]}
+ >
+ <ForwardRef(ButtonBase)
+ aria-label="consumption_visualizer.modal.close"
+ centerRipple={true}
+ className="MuiIconButton-root modal-paper-close-button"
+ classes={
+ Object {
+ "disabled": "Mui-disabled",
+ "focusVisible": "Mui-focusVisible",
+ "root": "MuiButtonBase-root",
+ }
+ }
+ disabled={false}
+ focusRipple={true}
+ onClick={[MockFunction]}
+ >
+ <button
+ aria-label="consumption_visualizer.modal.close"
+ className="MuiButtonBase-root MuiIconButton-root modal-paper-close-button"
+ disabled={false}
+ onBlur={[Function]}
+ onClick={[MockFunction]}
+ 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"
+ >
+ <Icon
+ icon="test-file-stub"
+ size={16}
+ spin={false}
+ >
+ <Component
+ className="styles__icon___23x3R"
+ height={16}
+ style={Object {}}
+ width={16}
+ >
+ <svg
+ className="styles__icon___23x3R"
+ height={16}
+ style={Object {}}
+ width={16}
+ >
+ <use
+ xlinkHref="#test-file-stub"
+ />
+ </svg>
+ </Component>
+ </Icon>
+ </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))>
+ <div
+ className="nodata-modal"
+ >
+ <div
+ className="question-mark"
+ >
+ <Icon
+ icon="test-file-stub"
+ size={36}
+ spin={false}
+ >
+ <Component
+ className="styles__icon___23x3R"
+ height={36}
+ style={Object {}}
+ width={36}
+ >
+ <svg
+ className="styles__icon___23x3R"
+ height={36}
+ style={Object {}}
+ width={36}
+ >
+ <use
+ xlinkHref="#test-file-stub"
+ />
+ </svg>
+ </Component>
+ </Icon>
+ </div>
+ <div
+ className="text-20-normal title"
+ >
+ consumption_visualizer.why_no_data
+ </div>
+ <div
+ className="text-16-normal"
+ >
+ consumption_visualizer.dataModal.list_title
+ </div>
+ <div
+ className="text-16-normal justified-text"
+ >
+ <span>
+ •
+ </span>
+ consumption_visualizer.dataModal.item1
+ </div>
+ <div
+ className="text-16-normal justified-text"
+ >
+ <span>
+ •
+ </span>
+ consumption_visualizer.dataModal.item2
+ </div>
+ <div
+ className="text-16-normal justified-text"
+ >
+ <span>
+ •
+ </span>
+ consumption_visualizer.dataModal.item3
+ </div>
+ <div
+ className="text-16-normal justified-text"
+ >
+ <span>
+ •
+ </span>
+ consumption_visualizer.dataModal.item4
+ </div>
+ <WithStyles(ForwardRef(Button))
+ aria-label="ecogesture_info_modal.button_close"
+ classes={
+ Object {
+ "label": "text-16-bold",
+ "root": "btn-highlight",
+ }
+ }
+ onClick={[MockFunction]}
+ >
+ <ForwardRef(Button)
+ aria-label="ecogesture_info_modal.button_close"
+ 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 text-16-bold",
+ "outlined": "MuiButton-outlined",
+ "outlinedPrimary": "MuiButton-outlinedPrimary",
+ "outlinedSecondary": "MuiButton-outlinedSecondary",
+ "outlinedSizeLarge": "MuiButton-outlinedSizeLarge",
+ "outlinedSizeSmall": "MuiButton-outlinedSizeSmall",
+ "root": "MuiButton-root btn-highlight",
+ "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={[MockFunction]}
+ >
+ <WithStyles(ForwardRef(ButtonBase))
+ aria-label="ecogesture_info_modal.button_close"
+ className="MuiButton-root btn-highlight MuiButton-text"
+ component="button"
+ disabled={false}
+ focusRipple={true}
+ focusVisibleClassName="Mui-focusVisible"
+ onClick={[MockFunction]}
+ type="button"
+ >
+ <ForwardRef(ButtonBase)
+ aria-label="ecogesture_info_modal.button_close"
+ className="MuiButton-root btn-highlight MuiButton-text"
+ classes={
+ Object {
+ "disabled": "Mui-disabled",
+ "focusVisible": "Mui-focusVisible",
+ "root": "MuiButtonBase-root",
+ }
+ }
+ component="button"
+ disabled={false}
+ focusRipple={true}
+ focusVisibleClassName="Mui-focusVisible"
+ onClick={[MockFunction]}
+ type="button"
+ >
+ <button
+ aria-label="ecogesture_info_modal.button_close"
+ className="MuiButtonBase-root MuiButton-root btn-highlight MuiButton-text"
+ disabled={false}
+ onBlur={[Function]}
+ onClick={[MockFunction]}
+ 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 text-16-bold"
+ >
+ ecogesture_info_modal.button_close
+ </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>
+ </div>
+ </ForwardRef(Paper)>
+ </WithStyles(ForwardRef(Paper))>
+ </div>
+ </Transition>
+ </ForwardRef(Fade)>
+ <div
+ data-test="sentinelEnd"
+ tabIndex={0}
+ />
+ </Unstable_TrapFocus>
+ </div>
+ </Portal>
+ </ForwardRef(Portal)>
+ </ForwardRef(Modal)>
+ </ForwardRef(Dialog)>
+ </WithStyles(ForwardRef(Dialog))>
+ </NoDataModal>
+</Provider>
+`;
diff --git a/src/components/DateNavigator/DateNavigator.spec.tsx b/src/components/DateNavigator/DateNavigator.spec.tsx
index 7c1f57700..b42e1968d 100644
--- a/src/components/DateNavigator/DateNavigator.spec.tsx
+++ b/src/components/DateNavigator/DateNavigator.spec.tsx
@@ -1,13 +1,14 @@
import { IconButton } from '@material-ui/core'
import { mount } from 'enzyme'
+import toJson from 'enzyme-to-json'
import { DateTime } from 'luxon'
import React from 'react'
-import { act } from 'react-dom/test-utils'
import * as reactRedux from 'react-redux'
import { Provider } from 'react-redux'
import configureStore from 'redux-mock-store'
import { globalStateData } from '../../../tests/__mocks__/globalStateData.mock'
import { mockInitialChartState } from '../../../tests/__mocks__/store'
+import { waitForComponentToPaint } from '../../../tests/__mocks__/testUtils'
import DateNavigator from './DateNavigator'
jest.mock('cozy-ui/transpiled/react/I18n', () => {
@@ -24,7 +25,7 @@ const mockStore = configureStore([])
const mockUseDispatch = jest.spyOn(reactRedux, 'useDispatch')
describe('DateNavigator component', () => {
- it('should be rendered correctly', () => {
+ it('should be rendered correctly', async () => {
const store = mockStore({
ecolyo: {
global: globalStateData,
@@ -39,8 +40,9 @@ describe('DateNavigator component', () => {
})}
/>
</Provider>
- ).getElement()
- expect(wrapper).toMatchSnapshot()
+ )
+ await waitForComponentToPaint(wrapper)
+ expect(toJson(wrapper)).toMatchSnapshot()
})
it('should click on left arrow and change date', async () => {
const store = mockStore({
@@ -58,10 +60,7 @@ describe('DateNavigator component', () => {
/>
</Provider>
)
- await act(async () => {
- await new Promise(resolve => setTimeout(resolve))
- wrapper.update()
- })
+ await waitForComponentToPaint(wrapper)
wrapper.find(IconButton).first().simulate('click')
expect(mockUseDispatch).toHaveBeenCalledTimes(2)
})
@@ -77,10 +76,7 @@ describe('DateNavigator component', () => {
<DateNavigator currentAnalysisDate={DateTime.now()} />
</Provider>
)
- await act(async () => {
- await new Promise(resolve => setTimeout(resolve))
- wrapper.update()
- })
+ await waitForComponentToPaint(wrapper)
wrapper.find(IconButton).at(1).simulate('click')
expect(mockUseDispatch).toHaveBeenCalledTimes(3)
})
@@ -97,10 +93,7 @@ describe('DateNavigator component', () => {
<DateNavigator />
</Provider>
)
- await act(async () => {
- await new Promise(resolve => setTimeout(resolve))
- wrapper.update()
- })
+ await waitForComponentToPaint(wrapper)
wrapper.find(IconButton).at(0).simulate('click')
expect(mockUseDispatch).toHaveBeenCalledTimes(4)
})
@@ -116,10 +109,7 @@ describe('DateNavigator component', () => {
<DateNavigator />
</Provider>
)
- await act(async () => {
- await new Promise(resolve => setTimeout(resolve))
- wrapper.update()
- })
+ await waitForComponentToPaint(wrapper)
wrapper.find(IconButton).at(1).simulate('click')
expect(mockUseDispatch).toHaveBeenCalledTimes(5)
})
diff --git a/src/components/DateNavigator/__snapshots__/DateNavigator.spec.tsx.snap b/src/components/DateNavigator/__snapshots__/DateNavigator.spec.tsx.snap
index e58a9227a..eec71c390 100644
--- a/src/components/DateNavigator/__snapshots__/DateNavigator.spec.tsx.snap
+++ b/src/components/DateNavigator/__snapshots__/DateNavigator.spec.tsx.snap
@@ -15,6 +15,285 @@ exports[`DateNavigator component should be rendered correctly 1`] = `
>
<DateNavigator
currentAnalysisDate={"2021-07-01T00:00:00.000Z"}
- />
+ >
+ <div
+ className="date-navigator"
+ >
+ <div>
+ <WithStyles(ForwardRef(IconButton))
+ aria-label="consumption.accessibility.button_previous_value"
+ className="date-navigator-button disable"
+ onClick={[Function]}
+ >
+ <ForwardRef(IconButton)
+ aria-label="consumption.accessibility.button_previous_value"
+ className="date-navigator-button disable"
+ 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",
+ "sizeSmall": "MuiIconButton-sizeSmall",
+ }
+ }
+ onClick={[Function]}
+ >
+ <WithStyles(ForwardRef(ButtonBase))
+ aria-label="consumption.accessibility.button_previous_value"
+ centerRipple={true}
+ className="MuiIconButton-root date-navigator-button disable"
+ disabled={false}
+ focusRipple={true}
+ onClick={[Function]}
+ >
+ <ForwardRef(ButtonBase)
+ aria-label="consumption.accessibility.button_previous_value"
+ centerRipple={true}
+ className="MuiIconButton-root date-navigator-button disable"
+ classes={
+ Object {
+ "disabled": "Mui-disabled",
+ "focusVisible": "Mui-focusVisible",
+ "root": "MuiButtonBase-root",
+ }
+ }
+ disabled={false}
+ focusRipple={true}
+ onClick={[Function]}
+ >
+ <button
+ aria-label="consumption.accessibility.button_previous_value"
+ className="MuiButtonBase-root MuiIconButton-root date-navigator-button disable"
+ 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"
+ >
+ <Icon
+ icon="test-file-stub"
+ size={16}
+ spin={false}
+ >
+ <Component
+ className="styles__icon___23x3R"
+ height={16}
+ style={Object {}}
+ width={16}
+ >
+ <svg
+ className="styles__icon___23x3R"
+ height={16}
+ style={Object {}}
+ width={16}
+ >
+ <use
+ xlinkHref="#test-file-stub"
+ />
+ </svg>
+ </Component>
+ </Icon>
+ </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))>
+ </div>
+ <DateNavigatorFormat
+ date={"2021-06-01T00:00:00.000Z"}
+ inline={false}
+ timeStep={40}
+ >
+ <div
+ className="date-navigator-format"
+ >
+ <div
+ className="date-navigator-format-date text-16-bold timeRange"
+ >
+ June
+ </div>
+ <div
+ className="date-navigator-format-date text-15-normal"
+ >
+ 2021
+ </div>
+ </div>
+ </DateNavigatorFormat>
+ <div>
+ <WithStyles(ForwardRef(IconButton))
+ aria-label="consumption.accessibility.button_next_value"
+ className="date-navigator-button disable"
+ onClick={[Function]}
+ >
+ <ForwardRef(IconButton)
+ aria-label="consumption.accessibility.button_next_value"
+ className="date-navigator-button disable"
+ 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",
+ "sizeSmall": "MuiIconButton-sizeSmall",
+ }
+ }
+ onClick={[Function]}
+ >
+ <WithStyles(ForwardRef(ButtonBase))
+ aria-label="consumption.accessibility.button_next_value"
+ centerRipple={true}
+ className="MuiIconButton-root date-navigator-button disable"
+ disabled={false}
+ focusRipple={true}
+ onClick={[Function]}
+ >
+ <ForwardRef(ButtonBase)
+ aria-label="consumption.accessibility.button_next_value"
+ centerRipple={true}
+ className="MuiIconButton-root date-navigator-button disable"
+ classes={
+ Object {
+ "disabled": "Mui-disabled",
+ "focusVisible": "Mui-focusVisible",
+ "root": "MuiButtonBase-root",
+ }
+ }
+ disabled={false}
+ focusRipple={true}
+ onClick={[Function]}
+ >
+ <button
+ aria-label="consumption.accessibility.button_next_value"
+ className="MuiButtonBase-root MuiIconButton-root date-navigator-button disable"
+ 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"
+ >
+ <Icon
+ icon="test-file-stub"
+ size={16}
+ spin={false}
+ >
+ <Component
+ className="styles__icon___23x3R"
+ height={16}
+ style={Object {}}
+ width={16}
+ >
+ <svg
+ className="styles__icon___23x3R"
+ height={16}
+ style={Object {}}
+ width={16}
+ >
+ <use
+ xlinkHref="#test-file-stub"
+ />
+ </svg>
+ </Component>
+ </Icon>
+ </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))>
+ </div>
+ </div>
+ </DateNavigator>
</Provider>
`;
diff --git a/src/components/Duel/DuelOngoing.spec.tsx b/src/components/Duel/DuelOngoing.spec.tsx
index 8202525bd..45ff068e8 100644
--- a/src/components/Duel/DuelOngoing.spec.tsx
+++ b/src/components/Duel/DuelOngoing.spec.tsx
@@ -4,11 +4,11 @@ import { mount } from 'enzyme'
import { DateTime } from 'luxon'
import { UserChallenge } from 'models'
import React from 'react'
-import { act } from 'react-dom/test-utils'
import { Provider } from 'react-redux'
import configureStore from 'redux-mock-store'
import { challengeStateData } from '../../../tests/__mocks__/challengeStateData.mock'
import { globalStateData } from '../../../tests/__mocks__/globalStateData.mock'
+import { waitForComponentToPaint } from '../../../tests/__mocks__/testUtils'
import { userChallengeData } from '../../../tests/__mocks__/userChallengeData.mock'
import DuelResultModal from './DuelResultModal'
@@ -76,10 +76,7 @@ describe('DuelOngoing component', () => {
<DuelOngoing userChallenge={userChallengeData[0]} />
</Provider>
)
- await act(async () => {
- await new Promise(resolve => setTimeout(resolve))
- wrapper.update()
- })
+ await waitForComponentToPaint(wrapper)
expect(wrapper.find('.duel-title').text()).toEqual(
userChallengeData[1].duel.title
)
@@ -111,10 +108,7 @@ describe('DuelOngoing component', () => {
<DuelOngoing userChallenge={updatedUserChallenge} />
</Provider>
)
- await act(async () => {
- await new Promise(resolve => setTimeout(resolve))
- wrapper.update()
- })
+ await waitForComponentToPaint(wrapper)
expect(wrapper.find(DuelResultModal).exists()).toBeTruthy()
})
})
diff --git a/src/components/Duel/DuelResultModal.spec.tsx b/src/components/Duel/DuelResultModal.spec.tsx
index 543839aff..42447533e 100644
--- a/src/components/Duel/DuelResultModal.spec.tsx
+++ b/src/components/Duel/DuelResultModal.spec.tsx
@@ -1,10 +1,11 @@
import { mount } from 'enzyme'
+import toJson from 'enzyme-to-json'
import React from 'react'
-import { act } from 'react-dom/test-utils'
import { Provider } from 'react-redux'
import configureStore from 'redux-mock-store'
import { globalStateData } from '../../../tests/__mocks__/globalStateData.mock'
import { profileData } from '../../../tests/__mocks__/profileData.mock'
+import { waitForComponentToPaint } from '../../../tests/__mocks__/testUtils'
import { userChallengeData } from '../../../tests/__mocks__/userChallengeData.mock'
import DuelResultModal from './DuelResultModal'
@@ -51,11 +52,8 @@ describe('DuelResultModal component', () => {
/>
</Provider>
)
- await act(async () => {
- await new Promise(resolve => setTimeout(resolve))
- wrapper.update()
- })
- expect(wrapper).toMatchSnapshot()
+ await waitForComponentToPaint(wrapper)
+ expect(toJson(wrapper)).toMatchSnapshot()
})
it('should render a loss modal', async () => {
const store = mockStore({
@@ -77,10 +75,7 @@ describe('DuelResultModal component', () => {
/>
</Provider>
)
- await act(async () => {
- await new Promise(resolve => setTimeout(resolve))
- wrapper.update()
- })
+ await waitForComponentToPaint(wrapper)
expect(wrapper.find('.title').text()).toBe('duel_result_modal.lost.title')
})
})
diff --git a/src/components/Duel/__snapshots__/DuelResultModal.spec.tsx.snap b/src/components/Duel/__snapshots__/DuelResultModal.spec.tsx.snap
index 7ed7b2d54..bbffacde1 100644
--- a/src/components/Duel/__snapshots__/DuelResultModal.spec.tsx.snap
+++ b/src/components/Duel/__snapshots__/DuelResultModal.spec.tsx.snap
@@ -1,3 +1,1062 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
-exports[`DuelResultModal component should render correctly 1`] = `ReactWrapper {}`;
+exports[`DuelResultModal component should render correctly 1`] = `
+<Provider
+ store={
+ Object {
+ "clearActions": [Function],
+ "dispatch": [Function],
+ "getActions": [Function],
+ "getState": [Function],
+ "replaceReducer": [Function],
+ "subscribe": [Function],
+ }
+ }
+>
+ <DuelResultModal
+ handleCloseClick={[MockFunction]}
+ open={true}
+ 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",
+ }
+ }
+ win={true}
+ >
+ <WithStyles(ForwardRef(Dialog))
+ aria-labelledby="accessibility-title"
+ classes={
+ Object {
+ "paper": "modal-paper blue-border",
+ "root": "modal-root",
+ }
+ }
+ onClose={[MockFunction]}
+ open={true}
+ >
+ <ForwardRef(Dialog)
+ aria-labelledby="accessibility-title"
+ classes={
+ Object {
+ "container": "MuiDialog-container",
+ "paper": "MuiDialog-paper modal-paper blue-border",
+ "paperFullScreen": "MuiDialog-paperFullScreen",
+ "paperFullWidth": "MuiDialog-paperFullWidth",
+ "paperScrollBody": "MuiDialog-paperScrollBody",
+ "paperScrollPaper": "MuiDialog-paperScrollPaper",
+ "paperWidthFalse": "MuiDialog-paperWidthFalse",
+ "paperWidthLg": "MuiDialog-paperWidthLg",
+ "paperWidthMd": "MuiDialog-paperWidthMd",
+ "paperWidthSm": "MuiDialog-paperWidthSm",
+ "paperWidthXl": "MuiDialog-paperWidthXl",
+ "paperWidthXs": "MuiDialog-paperWidthXs",
+ "root": "MuiDialog-root modal-root",
+ "scrollBody": "MuiDialog-scrollBody",
+ "scrollPaper": "MuiDialog-scrollPaper",
+ }
+ }
+ onClose={[MockFunction]}
+ open={true}
+ >
+ <ForwardRef(Modal)
+ BackdropComponent={
+ Object {
+ "$$typeof": Symbol(react.forward_ref),
+ "Naked": Object {
+ "$$typeof": Symbol(react.forward_ref),
+ "propTypes": Object {
+ "children": [Function],
+ "className": [Function],
+ "classes": [Function],
+ "invisible": [Function],
+ "open": [Function],
+ "transitionDuration": [Function],
+ },
+ "render": [Function],
+ },
+ "displayName": "WithStyles(ForwardRef(Backdrop))",
+ "options": Object {
+ "defaultTheme": Object {
+ "breakpoints": Object {
+ "between": [Function],
+ "down": [Function],
+ "keys": Array [
+ "xs",
+ "sm",
+ "md",
+ "lg",
+ "xl",
+ ],
+ "only": [Function],
+ "up": [Function],
+ "values": Object {
+ "lg": 1280,
+ "md": 960,
+ "sm": 600,
+ "xl": 1920,
+ "xs": 0,
+ },
+ "width": [Function],
+ },
+ "direction": "ltr",
+ "mixins": Object {
+ "gutters": [Function],
+ "toolbar": Object {
+ "@media (min-width:0px) and (orientation: landscape)": Object {
+ "minHeight": 48,
+ },
+ "@media (min-width:600px)": Object {
+ "minHeight": 64,
+ },
+ "minHeight": 56,
+ },
+ },
+ "overrides": Object {},
+ "palette": Object {
+ "action": Object {
+ "activatedOpacity": 0.12,
+ "active": "rgba(0, 0, 0, 0.54)",
+ "disabled": "rgba(0, 0, 0, 0.26)",
+ "disabledBackground": "rgba(0, 0, 0, 0.12)",
+ "disabledOpacity": 0.38,
+ "focus": "rgba(0, 0, 0, 0.12)",
+ "focusOpacity": 0.12,
+ "hover": "rgba(0, 0, 0, 0.04)",
+ "hoverOpacity": 0.04,
+ "selected": "rgba(0, 0, 0, 0.08)",
+ "selectedOpacity": 0.08,
+ },
+ "augmentColor": [Function],
+ "background": Object {
+ "default": "#fafafa",
+ "paper": "#fff",
+ },
+ "common": Object {
+ "black": "#000",
+ "white": "#fff",
+ },
+ "contrastThreshold": 3,
+ "divider": "rgba(0, 0, 0, 0.12)",
+ "error": Object {
+ "contrastText": "#fff",
+ "dark": "#d32f2f",
+ "light": "#e57373",
+ "main": "#f44336",
+ },
+ "getContrastText": [Function],
+ "grey": Object {
+ "100": "#f5f5f5",
+ "200": "#eeeeee",
+ "300": "#e0e0e0",
+ "400": "#bdbdbd",
+ "50": "#fafafa",
+ "500": "#9e9e9e",
+ "600": "#757575",
+ "700": "#616161",
+ "800": "#424242",
+ "900": "#212121",
+ "A100": "#d5d5d5",
+ "A200": "#aaaaaa",
+ "A400": "#303030",
+ "A700": "#616161",
+ },
+ "info": Object {
+ "contrastText": "#fff",
+ "dark": "#1976d2",
+ "light": "#64b5f6",
+ "main": "#2196f3",
+ },
+ "primary": Object {
+ "contrastText": "#fff",
+ "dark": "#303f9f",
+ "light": "#7986cb",
+ "main": "#3f51b5",
+ },
+ "secondary": Object {
+ "contrastText": "#fff",
+ "dark": "#c51162",
+ "light": "#ff4081",
+ "main": "#f50057",
+ },
+ "success": Object {
+ "contrastText": "rgba(0, 0, 0, 0.87)",
+ "dark": "#388e3c",
+ "light": "#81c784",
+ "main": "#4caf50",
+ },
+ "text": Object {
+ "disabled": "rgba(0, 0, 0, 0.38)",
+ "hint": "rgba(0, 0, 0, 0.38)",
+ "primary": "rgba(0, 0, 0, 0.87)",
+ "secondary": "rgba(0, 0, 0, 0.54)",
+ },
+ "tonalOffset": 0.2,
+ "type": "light",
+ "warning": Object {
+ "contrastText": "rgba(0, 0, 0, 0.87)",
+ "dark": "#f57c00",
+ "light": "#ffb74d",
+ "main": "#ff9800",
+ },
+ },
+ "props": Object {},
+ "shadows": Array [
+ "none",
+ "0px 2px 1px -1px rgba(0,0,0,0.2),0px 1px 1px 0px rgba(0,0,0,0.14),0px 1px 3px 0px rgba(0,0,0,0.12)",
+ "0px 3px 1px -2px rgba(0,0,0,0.2),0px 2px 2px 0px rgba(0,0,0,0.14),0px 1px 5px 0px rgba(0,0,0,0.12)",
+ "0px 3px 3px -2px rgba(0,0,0,0.2),0px 3px 4px 0px rgba(0,0,0,0.14),0px 1px 8px 0px rgba(0,0,0,0.12)",
+ "0px 2px 4px -1px rgba(0,0,0,0.2),0px 4px 5px 0px rgba(0,0,0,0.14),0px 1px 10px 0px rgba(0,0,0,0.12)",
+ "0px 3px 5px -1px rgba(0,0,0,0.2),0px 5px 8px 0px rgba(0,0,0,0.14),0px 1px 14px 0px rgba(0,0,0,0.12)",
+ "0px 3px 5px -1px rgba(0,0,0,0.2),0px 6px 10px 0px rgba(0,0,0,0.14),0px 1px 18px 0px rgba(0,0,0,0.12)",
+ "0px 4px 5px -2px rgba(0,0,0,0.2),0px 7px 10px 1px rgba(0,0,0,0.14),0px 2px 16px 1px rgba(0,0,0,0.12)",
+ "0px 5px 5px -3px rgba(0,0,0,0.2),0px 8px 10px 1px rgba(0,0,0,0.14),0px 3px 14px 2px rgba(0,0,0,0.12)",
+ "0px 5px 6px -3px rgba(0,0,0,0.2),0px 9px 12px 1px rgba(0,0,0,0.14),0px 3px 16px 2px rgba(0,0,0,0.12)",
+ "0px 6px 6px -3px rgba(0,0,0,0.2),0px 10px 14px 1px rgba(0,0,0,0.14),0px 4px 18px 3px rgba(0,0,0,0.12)",
+ "0px 6px 7px -4px rgba(0,0,0,0.2),0px 11px 15px 1px rgba(0,0,0,0.14),0px 4px 20px 3px rgba(0,0,0,0.12)",
+ "0px 7px 8px -4px rgba(0,0,0,0.2),0px 12px 17px 2px rgba(0,0,0,0.14),0px 5px 22px 4px rgba(0,0,0,0.12)",
+ "0px 7px 8px -4px rgba(0,0,0,0.2),0px 13px 19px 2px rgba(0,0,0,0.14),0px 5px 24px 4px rgba(0,0,0,0.12)",
+ "0px 7px 9px -4px rgba(0,0,0,0.2),0px 14px 21px 2px rgba(0,0,0,0.14),0px 5px 26px 4px rgba(0,0,0,0.12)",
+ "0px 8px 9px -5px rgba(0,0,0,0.2),0px 15px 22px 2px rgba(0,0,0,0.14),0px 6px 28px 5px rgba(0,0,0,0.12)",
+ "0px 8px 10px -5px rgba(0,0,0,0.2),0px 16px 24px 2px rgba(0,0,0,0.14),0px 6px 30px 5px rgba(0,0,0,0.12)",
+ "0px 8px 11px -5px rgba(0,0,0,0.2),0px 17px 26px 2px rgba(0,0,0,0.14),0px 6px 32px 5px rgba(0,0,0,0.12)",
+ "0px 9px 11px -5px rgba(0,0,0,0.2),0px 18px 28px 2px rgba(0,0,0,0.14),0px 7px 34px 6px rgba(0,0,0,0.12)",
+ "0px 9px 12px -6px rgba(0,0,0,0.2),0px 19px 29px 2px rgba(0,0,0,0.14),0px 7px 36px 6px rgba(0,0,0,0.12)",
+ "0px 10px 13px -6px rgba(0,0,0,0.2),0px 20px 31px 3px rgba(0,0,0,0.14),0px 8px 38px 7px rgba(0,0,0,0.12)",
+ "0px 10px 13px -6px rgba(0,0,0,0.2),0px 21px 33px 3px rgba(0,0,0,0.14),0px 8px 40px 7px rgba(0,0,0,0.12)",
+ "0px 10px 14px -6px rgba(0,0,0,0.2),0px 22px 35px 3px rgba(0,0,0,0.14),0px 8px 42px 7px rgba(0,0,0,0.12)",
+ "0px 11px 14px -7px rgba(0,0,0,0.2),0px 23px 36px 3px rgba(0,0,0,0.14),0px 9px 44px 8px rgba(0,0,0,0.12)",
+ "0px 11px 15px -7px rgba(0,0,0,0.2),0px 24px 38px 3px rgba(0,0,0,0.14),0px 9px 46px 8px rgba(0,0,0,0.12)",
+ ],
+ "shape": Object {
+ "borderRadius": 4,
+ },
+ "spacing": [Function],
+ "transitions": Object {
+ "create": [Function],
+ "duration": Object {
+ "complex": 375,
+ "enteringScreen": 225,
+ "leavingScreen": 195,
+ "short": 250,
+ "shorter": 200,
+ "shortest": 150,
+ "standard": 300,
+ },
+ "easing": Object {
+ "easeIn": "cubic-bezier(0.4, 0, 1, 1)",
+ "easeInOut": "cubic-bezier(0.4, 0, 0.2, 1)",
+ "easeOut": "cubic-bezier(0.0, 0, 0.2, 1)",
+ "sharp": "cubic-bezier(0.4, 0, 0.6, 1)",
+ },
+ "getAutoHeightDuration": [Function],
+ },
+ "typography": Object {
+ "body1": Object {
+ "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
+ "fontSize": "1rem",
+ "fontWeight": 400,
+ "letterSpacing": "0.00938em",
+ "lineHeight": 1.5,
+ },
+ "body2": Object {
+ "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
+ "fontSize": "0.875rem",
+ "fontWeight": 400,
+ "letterSpacing": "0.01071em",
+ "lineHeight": 1.43,
+ },
+ "button": Object {
+ "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
+ "fontSize": "0.875rem",
+ "fontWeight": 500,
+ "letterSpacing": "0.02857em",
+ "lineHeight": 1.75,
+ "textTransform": "uppercase",
+ },
+ "caption": Object {
+ "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
+ "fontSize": "0.75rem",
+ "fontWeight": 400,
+ "letterSpacing": "0.03333em",
+ "lineHeight": 1.66,
+ },
+ "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
+ "fontSize": 14,
+ "fontWeightBold": 700,
+ "fontWeightLight": 300,
+ "fontWeightMedium": 500,
+ "fontWeightRegular": 400,
+ "h1": Object {
+ "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
+ "fontSize": "6rem",
+ "fontWeight": 300,
+ "letterSpacing": "-0.01562em",
+ "lineHeight": 1.167,
+ },
+ "h2": Object {
+ "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
+ "fontSize": "3.75rem",
+ "fontWeight": 300,
+ "letterSpacing": "-0.00833em",
+ "lineHeight": 1.2,
+ },
+ "h3": Object {
+ "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
+ "fontSize": "3rem",
+ "fontWeight": 400,
+ "letterSpacing": "0em",
+ "lineHeight": 1.167,
+ },
+ "h4": Object {
+ "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
+ "fontSize": "2.125rem",
+ "fontWeight": 400,
+ "letterSpacing": "0.00735em",
+ "lineHeight": 1.235,
+ },
+ "h5": Object {
+ "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
+ "fontSize": "1.5rem",
+ "fontWeight": 400,
+ "letterSpacing": "0em",
+ "lineHeight": 1.334,
+ },
+ "h6": Object {
+ "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
+ "fontSize": "1.25rem",
+ "fontWeight": 500,
+ "letterSpacing": "0.0075em",
+ "lineHeight": 1.6,
+ },
+ "htmlFontSize": 16,
+ "overline": Object {
+ "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
+ "fontSize": "0.75rem",
+ "fontWeight": 400,
+ "letterSpacing": "0.08333em",
+ "lineHeight": 2.66,
+ "textTransform": "uppercase",
+ },
+ "pxToRem": [Function],
+ "round": [Function],
+ "subtitle1": Object {
+ "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
+ "fontSize": "1rem",
+ "fontWeight": 400,
+ "letterSpacing": "0.00938em",
+ "lineHeight": 1.75,
+ },
+ "subtitle2": Object {
+ "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
+ "fontSize": "0.875rem",
+ "fontWeight": 500,
+ "letterSpacing": "0.00714em",
+ "lineHeight": 1.57,
+ },
+ },
+ "zIndex": Object {
+ "appBar": 1100,
+ "drawer": 1200,
+ "mobileStepper": 1000,
+ "modal": 1300,
+ "snackbar": 1400,
+ "speedDial": 1050,
+ "tooltip": 1500,
+ },
+ },
+ "name": "MuiBackdrop",
+ },
+ "propTypes": Object {
+ "classes": [Function],
+ "innerRef": [Function],
+ },
+ "render": [Function],
+ "useStyles": [Function],
+ }
+ }
+ BackdropProps={
+ Object {
+ "transitionDuration": Object {
+ "enter": 225,
+ "exit": 195,
+ },
+ }
+ }
+ className="MuiDialog-root modal-root"
+ closeAfterTransition={true}
+ disableEscapeKeyDown={false}
+ onClose={[MockFunction]}
+ open={true}
+ >
+ <ForwardRef(Portal)
+ disablePortal={false}
+ >
+ <Portal
+ containerInfo={
+ <body
+ style="padding-right: 0px; overflow: hidden;"
+ >
+ <div
+ class="MuiDialog-root modal-root"
+ role="presentation"
+ style="position: fixed; z-index: 1300; right: 0px; bottom: 0px; top: 0px; left: 0px;"
+ >
+ <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
+ 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"
+ >
+ <div
+ aria-labelledby="accessibility-title"
+ class="MuiPaper-root MuiDialog-paper modal-paper blue-border MuiDialog-paperScrollPaper MuiDialog-paperWidthSm MuiPaper-elevation24 MuiPaper-rounded"
+ role="dialog"
+ >
+ <div
+ id="accessibility-title"
+ >
+ duel_result_modal.accessibility.window_title
+ </div>
+ <div
+ class="duel-result-modal-root "
+ >
+ <div
+ class="imgResultContainer"
+ >
+ <svg
+ class="challengeWon styles__icon___23x3R"
+ height="300"
+ width="300"
+ >
+ <use
+ xlink:href="#test-file-stub"
+ />
+ </svg>
+ <svg
+ class="imgResult styles__icon___23x3R"
+ height="180"
+ width="180"
+ >
+ <use
+ xlink:href="#"
+ />
+ </svg>
+ </div>
+ <div
+ class="text-28-normal-uppercase title"
+ >
+ duel_result_modal.sucess.title
+ </div>
+ <div
+ class="text-18-normal"
+ >
+ duel_result_modal.sucess.message1function () {
+ return fn.apply(this, arguments);
+ } €
+ </div>
+ <div
+ class="text-18-normal"
+ >
+ duel_result_modal.sucess.message2Challenge 2
+ </div>
+ <button
+ aria-label="duel_result_modal.accessibility.button_validate"
+ class="MuiButtonBase-root MuiButton-root btn-secondary-negative MuiButton-text button"
+ tabindex="0"
+ type="button"
+ >
+ <span
+ class="MuiButton-label text-16-normal"
+ >
+ duel_result_modal.sucess.button_validate
+ </span>
+ <span
+ class="MuiTouchRipple-root"
+ />
+ </button>
+ </div>
+ </div>
+ </div>
+ <div
+ data-test="sentinelEnd"
+ tabindex="0"
+ />
+ </div>
+ </body>
+ }
+ >
+ <div
+ className="MuiDialog-root modal-root"
+ onKeyDown={[Function]}
+ role="presentation"
+ style={
+ Object {
+ "bottom": 0,
+ "left": 0,
+ "position": "fixed",
+ "right": 0,
+ "top": 0,
+ "zIndex": 1300,
+ }
+ }
+ >
+ <WithStyles(ForwardRef(Backdrop))
+ onClick={[Function]}
+ open={true}
+ transitionDuration={
+ Object {
+ "enter": 225,
+ "exit": 195,
+ }
+ }
+ >
+ <ForwardRef(Backdrop)
+ classes={
+ Object {
+ "invisible": "MuiBackdrop-invisible",
+ "root": "MuiBackdrop-root",
+ }
+ }
+ onClick={[Function]}
+ open={true}
+ transitionDuration={
+ Object {
+ "enter": 225,
+ "exit": 195,
+ }
+ }
+ >
+ <ForwardRef(Fade)
+ in={true}
+ onClick={[Function]}
+ timeout={
+ Object {
+ "enter": 225,
+ "exit": 195,
+ }
+ }
+ >
+ <Transition
+ appear={true}
+ enter={true}
+ exit={true}
+ in={true}
+ mountOnEnter={false}
+ onClick={[Function]}
+ onEnter={[Function]}
+ onEntered={[Function]}
+ onEntering={[Function]}
+ onExit={[Function]}
+ onExited={[Function]}
+ onExiting={[Function]}
+ timeout={
+ Object {
+ "enter": 225,
+ "exit": 195,
+ }
+ }
+ unmountOnExit={false}
+ >
+ <div
+ aria-hidden={true}
+ className="MuiBackdrop-root"
+ onClick={[Function]}
+ style={
+ Object {
+ "opacity": 1,
+ "visibility": undefined,
+ }
+ }
+ />
+ </Transition>
+ </ForwardRef(Fade)>
+ </ForwardRef(Backdrop)>
+ </WithStyles(ForwardRef(Backdrop))>
+ <Unstable_TrapFocus
+ disableAutoFocus={false}
+ disableEnforceFocus={false}
+ disableRestoreFocus={false}
+ getDoc={[Function]}
+ isEnabled={[Function]}
+ open={true}
+ >
+ <div
+ data-test="sentinelStart"
+ tabIndex={0}
+ />
+ <ForwardRef(Fade)
+ appear={true}
+ in={true}
+ onEnter={[Function]}
+ onExited={[Function]}
+ role="none presentation"
+ tabIndex="-1"
+ timeout={
+ Object {
+ "enter": 225,
+ "exit": 195,
+ }
+ }
+ >
+ <Transition
+ appear={true}
+ enter={true}
+ exit={true}
+ in={true}
+ mountOnEnter={false}
+ onEnter={[Function]}
+ onEntered={[Function]}
+ onEntering={[Function]}
+ onExit={[Function]}
+ onExited={[Function]}
+ onExiting={[Function]}
+ role="none presentation"
+ tabIndex="-1"
+ timeout={
+ Object {
+ "enter": 225,
+ "exit": 195,
+ }
+ }
+ unmountOnExit={false}
+ >
+ <div
+ className="MuiDialog-container MuiDialog-scrollPaper"
+ onMouseDown={[Function]}
+ onMouseUp={[Function]}
+ role="none presentation"
+ style={
+ Object {
+ "opacity": 1,
+ "visibility": undefined,
+ }
+ }
+ tabIndex="-1"
+ >
+ <WithStyles(ForwardRef(Paper))
+ aria-labelledby="accessibility-title"
+ className="MuiDialog-paper modal-paper blue-border MuiDialog-paperScrollPaper MuiDialog-paperWidthSm"
+ elevation={24}
+ role="dialog"
+ >
+ <ForwardRef(Paper)
+ aria-labelledby="accessibility-title"
+ className="MuiDialog-paper modal-paper blue-border MuiDialog-paperScrollPaper MuiDialog-paperWidthSm"
+ classes={
+ Object {
+ "elevation0": "MuiPaper-elevation0",
+ "elevation1": "MuiPaper-elevation1",
+ "elevation10": "MuiPaper-elevation10",
+ "elevation11": "MuiPaper-elevation11",
+ "elevation12": "MuiPaper-elevation12",
+ "elevation13": "MuiPaper-elevation13",
+ "elevation14": "MuiPaper-elevation14",
+ "elevation15": "MuiPaper-elevation15",
+ "elevation16": "MuiPaper-elevation16",
+ "elevation17": "MuiPaper-elevation17",
+ "elevation18": "MuiPaper-elevation18",
+ "elevation19": "MuiPaper-elevation19",
+ "elevation2": "MuiPaper-elevation2",
+ "elevation20": "MuiPaper-elevation20",
+ "elevation21": "MuiPaper-elevation21",
+ "elevation22": "MuiPaper-elevation22",
+ "elevation23": "MuiPaper-elevation23",
+ "elevation24": "MuiPaper-elevation24",
+ "elevation3": "MuiPaper-elevation3",
+ "elevation4": "MuiPaper-elevation4",
+ "elevation5": "MuiPaper-elevation5",
+ "elevation6": "MuiPaper-elevation6",
+ "elevation7": "MuiPaper-elevation7",
+ "elevation8": "MuiPaper-elevation8",
+ "elevation9": "MuiPaper-elevation9",
+ "outlined": "MuiPaper-outlined",
+ "root": "MuiPaper-root",
+ "rounded": "MuiPaper-rounded",
+ }
+ }
+ elevation={24}
+ role="dialog"
+ >
+ <div
+ aria-labelledby="accessibility-title"
+ className="MuiPaper-root MuiDialog-paper modal-paper blue-border MuiDialog-paperScrollPaper MuiDialog-paperWidthSm MuiPaper-elevation24 MuiPaper-rounded"
+ role="dialog"
+ >
+ <div
+ id="accessibility-title"
+ >
+ duel_result_modal.accessibility.window_title
+ </div>
+ <div
+ className="duel-result-modal-root "
+ >
+ <div
+ className="imgResultContainer"
+ >
+ <Icon
+ className="challengeWon"
+ icon="test-file-stub"
+ size={300}
+ spin={false}
+ >
+ <Component
+ className="challengeWon styles__icon___23x3R"
+ height={300}
+ style={Object {}}
+ width={300}
+ >
+ <svg
+ className="challengeWon styles__icon___23x3R"
+ height={300}
+ style={Object {}}
+ width={300}
+ >
+ <use
+ xlinkHref="#test-file-stub"
+ />
+ </svg>
+ </Component>
+ </Icon>
+ <Icon
+ className="imgResult"
+ icon=""
+ size={180}
+ spin={false}
+ >
+ <Component
+ className="imgResult styles__icon___23x3R"
+ height={180}
+ style={Object {}}
+ width={180}
+ >
+ <svg
+ className="imgResult styles__icon___23x3R"
+ height={180}
+ style={Object {}}
+ width={180}
+ >
+ <use
+ xlinkHref="#"
+ />
+ </svg>
+ </Component>
+ </Icon>
+ </div>
+ <div
+ className="text-28-normal-uppercase title"
+ >
+ duel_result_modal.sucess.title
+ </div>
+ <div
+ className="text-18-normal"
+ >
+ duel_result_modal.sucess.message1function () {
+ return fn.apply(this, arguments);
+ } €
+ </div>
+ <div
+ className="text-18-normal"
+ >
+ duel_result_modal.sucess.message2Challenge 2
+ </div>
+ <WithStyles(ForwardRef(Button))
+ aria-label="duel_result_modal.accessibility.button_validate"
+ className="button"
+ classes={
+ Object {
+ "label": "text-16-normal",
+ "root": "btn-secondary-negative",
+ }
+ }
+ onClick={[MockFunction]}
+ >
+ <ForwardRef(Button)
+ aria-label="duel_result_modal.accessibility.button_validate"
+ className="button"
+ 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 text-16-normal",
+ "outlined": "MuiButton-outlined",
+ "outlinedPrimary": "MuiButton-outlinedPrimary",
+ "outlinedSecondary": "MuiButton-outlinedSecondary",
+ "outlinedSizeLarge": "MuiButton-outlinedSizeLarge",
+ "outlinedSizeSmall": "MuiButton-outlinedSizeSmall",
+ "root": "MuiButton-root btn-secondary-negative",
+ "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={[MockFunction]}
+ >
+ <WithStyles(ForwardRef(ButtonBase))
+ aria-label="duel_result_modal.accessibility.button_validate"
+ className="MuiButton-root btn-secondary-negative MuiButton-text button"
+ component="button"
+ disabled={false}
+ focusRipple={true}
+ focusVisibleClassName="Mui-focusVisible"
+ onClick={[MockFunction]}
+ type="button"
+ >
+ <ForwardRef(ButtonBase)
+ aria-label="duel_result_modal.accessibility.button_validate"
+ className="MuiButton-root btn-secondary-negative MuiButton-text button"
+ classes={
+ Object {
+ "disabled": "Mui-disabled",
+ "focusVisible": "Mui-focusVisible",
+ "root": "MuiButtonBase-root",
+ }
+ }
+ component="button"
+ disabled={false}
+ focusRipple={true}
+ focusVisibleClassName="Mui-focusVisible"
+ onClick={[MockFunction]}
+ type="button"
+ >
+ <button
+ aria-label="duel_result_modal.accessibility.button_validate"
+ className="MuiButtonBase-root MuiButton-root btn-secondary-negative MuiButton-text button"
+ disabled={false}
+ onBlur={[Function]}
+ onClick={[MockFunction]}
+ 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 text-16-normal"
+ >
+ duel_result_modal.sucess.button_validate
+ </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>
+ </div>
+ </ForwardRef(Paper)>
+ </WithStyles(ForwardRef(Paper))>
+ </div>
+ </Transition>
+ </ForwardRef(Fade)>
+ <div
+ data-test="sentinelEnd"
+ tabIndex={0}
+ />
+ </Unstable_TrapFocus>
+ </div>
+ </Portal>
+ </ForwardRef(Portal)>
+ </ForwardRef(Modal)>
+ </ForwardRef(Dialog)>
+ </WithStyles(ForwardRef(Dialog))>
+ </DuelResultModal>
+</Provider>
+`;
diff --git a/src/components/Duel/__snapshots__/lastDuelModal.spec.tsx.snap b/src/components/Duel/__snapshots__/lastDuelModal.spec.tsx.snap
index 2b0bc89e8..14af31e26 100644
--- a/src/components/Duel/__snapshots__/lastDuelModal.spec.tsx.snap
+++ b/src/components/Duel/__snapshots__/lastDuelModal.spec.tsx.snap
@@ -1,3 +1,781 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
-exports[`lastDuelModal component should render correctly 1`] = `ReactWrapper {}`;
+exports[`lastDuelModal component should render correctly 1`] = `
+<LastDuelModal
+ handleCloseClick={[MockFunction]}
+ open={true}
+>
+ <WithStyles(ForwardRef(Dialog))
+ aria-labelledby="accessibility-title"
+ classes={
+ Object {
+ "paper": "modal-paper blue-light-border",
+ "root": "modal-root",
+ }
+ }
+ onClose={[MockFunction]}
+ open={true}
+ >
+ <ForwardRef(Dialog)
+ aria-labelledby="accessibility-title"
+ classes={
+ Object {
+ "container": "MuiDialog-container",
+ "paper": "MuiDialog-paper modal-paper blue-light-border",
+ "paperFullScreen": "MuiDialog-paperFullScreen",
+ "paperFullWidth": "MuiDialog-paperFullWidth",
+ "paperScrollBody": "MuiDialog-paperScrollBody",
+ "paperScrollPaper": "MuiDialog-paperScrollPaper",
+ "paperWidthFalse": "MuiDialog-paperWidthFalse",
+ "paperWidthLg": "MuiDialog-paperWidthLg",
+ "paperWidthMd": "MuiDialog-paperWidthMd",
+ "paperWidthSm": "MuiDialog-paperWidthSm",
+ "paperWidthXl": "MuiDialog-paperWidthXl",
+ "paperWidthXs": "MuiDialog-paperWidthXs",
+ "root": "MuiDialog-root modal-root",
+ "scrollBody": "MuiDialog-scrollBody",
+ "scrollPaper": "MuiDialog-scrollPaper",
+ }
+ }
+ onClose={[MockFunction]}
+ open={true}
+ >
+ <ForwardRef(Modal)
+ BackdropComponent={
+ Object {
+ "$$typeof": Symbol(react.forward_ref),
+ "Naked": Object {
+ "$$typeof": Symbol(react.forward_ref),
+ "propTypes": Object {
+ "children": [Function],
+ "className": [Function],
+ "classes": [Function],
+ "invisible": [Function],
+ "open": [Function],
+ "transitionDuration": [Function],
+ },
+ "render": [Function],
+ },
+ "displayName": "WithStyles(ForwardRef(Backdrop))",
+ "options": Object {
+ "defaultTheme": Object {
+ "breakpoints": Object {
+ "between": [Function],
+ "down": [Function],
+ "keys": Array [
+ "xs",
+ "sm",
+ "md",
+ "lg",
+ "xl",
+ ],
+ "only": [Function],
+ "up": [Function],
+ "values": Object {
+ "lg": 1280,
+ "md": 960,
+ "sm": 600,
+ "xl": 1920,
+ "xs": 0,
+ },
+ "width": [Function],
+ },
+ "direction": "ltr",
+ "mixins": Object {
+ "gutters": [Function],
+ "toolbar": Object {
+ "@media (min-width:0px) and (orientation: landscape)": Object {
+ "minHeight": 48,
+ },
+ "@media (min-width:600px)": Object {
+ "minHeight": 64,
+ },
+ "minHeight": 56,
+ },
+ },
+ "overrides": Object {},
+ "palette": Object {
+ "action": Object {
+ "activatedOpacity": 0.12,
+ "active": "rgba(0, 0, 0, 0.54)",
+ "disabled": "rgba(0, 0, 0, 0.26)",
+ "disabledBackground": "rgba(0, 0, 0, 0.12)",
+ "disabledOpacity": 0.38,
+ "focus": "rgba(0, 0, 0, 0.12)",
+ "focusOpacity": 0.12,
+ "hover": "rgba(0, 0, 0, 0.04)",
+ "hoverOpacity": 0.04,
+ "selected": "rgba(0, 0, 0, 0.08)",
+ "selectedOpacity": 0.08,
+ },
+ "augmentColor": [Function],
+ "background": Object {
+ "default": "#fafafa",
+ "paper": "#fff",
+ },
+ "common": Object {
+ "black": "#000",
+ "white": "#fff",
+ },
+ "contrastThreshold": 3,
+ "divider": "rgba(0, 0, 0, 0.12)",
+ "error": Object {
+ "contrastText": "#fff",
+ "dark": "#d32f2f",
+ "light": "#e57373",
+ "main": "#f44336",
+ },
+ "getContrastText": [Function],
+ "grey": Object {
+ "100": "#f5f5f5",
+ "200": "#eeeeee",
+ "300": "#e0e0e0",
+ "400": "#bdbdbd",
+ "50": "#fafafa",
+ "500": "#9e9e9e",
+ "600": "#757575",
+ "700": "#616161",
+ "800": "#424242",
+ "900": "#212121",
+ "A100": "#d5d5d5",
+ "A200": "#aaaaaa",
+ "A400": "#303030",
+ "A700": "#616161",
+ },
+ "info": Object {
+ "contrastText": "#fff",
+ "dark": "#1976d2",
+ "light": "#64b5f6",
+ "main": "#2196f3",
+ },
+ "primary": Object {
+ "contrastText": "#fff",
+ "dark": "#303f9f",
+ "light": "#7986cb",
+ "main": "#3f51b5",
+ },
+ "secondary": Object {
+ "contrastText": "#fff",
+ "dark": "#c51162",
+ "light": "#ff4081",
+ "main": "#f50057",
+ },
+ "success": Object {
+ "contrastText": "rgba(0, 0, 0, 0.87)",
+ "dark": "#388e3c",
+ "light": "#81c784",
+ "main": "#4caf50",
+ },
+ "text": Object {
+ "disabled": "rgba(0, 0, 0, 0.38)",
+ "hint": "rgba(0, 0, 0, 0.38)",
+ "primary": "rgba(0, 0, 0, 0.87)",
+ "secondary": "rgba(0, 0, 0, 0.54)",
+ },
+ "tonalOffset": 0.2,
+ "type": "light",
+ "warning": Object {
+ "contrastText": "rgba(0, 0, 0, 0.87)",
+ "dark": "#f57c00",
+ "light": "#ffb74d",
+ "main": "#ff9800",
+ },
+ },
+ "props": Object {},
+ "shadows": Array [
+ "none",
+ "0px 2px 1px -1px rgba(0,0,0,0.2),0px 1px 1px 0px rgba(0,0,0,0.14),0px 1px 3px 0px rgba(0,0,0,0.12)",
+ "0px 3px 1px -2px rgba(0,0,0,0.2),0px 2px 2px 0px rgba(0,0,0,0.14),0px 1px 5px 0px rgba(0,0,0,0.12)",
+ "0px 3px 3px -2px rgba(0,0,0,0.2),0px 3px 4px 0px rgba(0,0,0,0.14),0px 1px 8px 0px rgba(0,0,0,0.12)",
+ "0px 2px 4px -1px rgba(0,0,0,0.2),0px 4px 5px 0px rgba(0,0,0,0.14),0px 1px 10px 0px rgba(0,0,0,0.12)",
+ "0px 3px 5px -1px rgba(0,0,0,0.2),0px 5px 8px 0px rgba(0,0,0,0.14),0px 1px 14px 0px rgba(0,0,0,0.12)",
+ "0px 3px 5px -1px rgba(0,0,0,0.2),0px 6px 10px 0px rgba(0,0,0,0.14),0px 1px 18px 0px rgba(0,0,0,0.12)",
+ "0px 4px 5px -2px rgba(0,0,0,0.2),0px 7px 10px 1px rgba(0,0,0,0.14),0px 2px 16px 1px rgba(0,0,0,0.12)",
+ "0px 5px 5px -3px rgba(0,0,0,0.2),0px 8px 10px 1px rgba(0,0,0,0.14),0px 3px 14px 2px rgba(0,0,0,0.12)",
+ "0px 5px 6px -3px rgba(0,0,0,0.2),0px 9px 12px 1px rgba(0,0,0,0.14),0px 3px 16px 2px rgba(0,0,0,0.12)",
+ "0px 6px 6px -3px rgba(0,0,0,0.2),0px 10px 14px 1px rgba(0,0,0,0.14),0px 4px 18px 3px rgba(0,0,0,0.12)",
+ "0px 6px 7px -4px rgba(0,0,0,0.2),0px 11px 15px 1px rgba(0,0,0,0.14),0px 4px 20px 3px rgba(0,0,0,0.12)",
+ "0px 7px 8px -4px rgba(0,0,0,0.2),0px 12px 17px 2px rgba(0,0,0,0.14),0px 5px 22px 4px rgba(0,0,0,0.12)",
+ "0px 7px 8px -4px rgba(0,0,0,0.2),0px 13px 19px 2px rgba(0,0,0,0.14),0px 5px 24px 4px rgba(0,0,0,0.12)",
+ "0px 7px 9px -4px rgba(0,0,0,0.2),0px 14px 21px 2px rgba(0,0,0,0.14),0px 5px 26px 4px rgba(0,0,0,0.12)",
+ "0px 8px 9px -5px rgba(0,0,0,0.2),0px 15px 22px 2px rgba(0,0,0,0.14),0px 6px 28px 5px rgba(0,0,0,0.12)",
+ "0px 8px 10px -5px rgba(0,0,0,0.2),0px 16px 24px 2px rgba(0,0,0,0.14),0px 6px 30px 5px rgba(0,0,0,0.12)",
+ "0px 8px 11px -5px rgba(0,0,0,0.2),0px 17px 26px 2px rgba(0,0,0,0.14),0px 6px 32px 5px rgba(0,0,0,0.12)",
+ "0px 9px 11px -5px rgba(0,0,0,0.2),0px 18px 28px 2px rgba(0,0,0,0.14),0px 7px 34px 6px rgba(0,0,0,0.12)",
+ "0px 9px 12px -6px rgba(0,0,0,0.2),0px 19px 29px 2px rgba(0,0,0,0.14),0px 7px 36px 6px rgba(0,0,0,0.12)",
+ "0px 10px 13px -6px rgba(0,0,0,0.2),0px 20px 31px 3px rgba(0,0,0,0.14),0px 8px 38px 7px rgba(0,0,0,0.12)",
+ "0px 10px 13px -6px rgba(0,0,0,0.2),0px 21px 33px 3px rgba(0,0,0,0.14),0px 8px 40px 7px rgba(0,0,0,0.12)",
+ "0px 10px 14px -6px rgba(0,0,0,0.2),0px 22px 35px 3px rgba(0,0,0,0.14),0px 8px 42px 7px rgba(0,0,0,0.12)",
+ "0px 11px 14px -7px rgba(0,0,0,0.2),0px 23px 36px 3px rgba(0,0,0,0.14),0px 9px 44px 8px rgba(0,0,0,0.12)",
+ "0px 11px 15px -7px rgba(0,0,0,0.2),0px 24px 38px 3px rgba(0,0,0,0.14),0px 9px 46px 8px rgba(0,0,0,0.12)",
+ ],
+ "shape": Object {
+ "borderRadius": 4,
+ },
+ "spacing": [Function],
+ "transitions": Object {
+ "create": [Function],
+ "duration": Object {
+ "complex": 375,
+ "enteringScreen": 225,
+ "leavingScreen": 195,
+ "short": 250,
+ "shorter": 200,
+ "shortest": 150,
+ "standard": 300,
+ },
+ "easing": Object {
+ "easeIn": "cubic-bezier(0.4, 0, 1, 1)",
+ "easeInOut": "cubic-bezier(0.4, 0, 0.2, 1)",
+ "easeOut": "cubic-bezier(0.0, 0, 0.2, 1)",
+ "sharp": "cubic-bezier(0.4, 0, 0.6, 1)",
+ },
+ "getAutoHeightDuration": [Function],
+ },
+ "typography": Object {
+ "body1": Object {
+ "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
+ "fontSize": "1rem",
+ "fontWeight": 400,
+ "letterSpacing": "0.00938em",
+ "lineHeight": 1.5,
+ },
+ "body2": Object {
+ "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
+ "fontSize": "0.875rem",
+ "fontWeight": 400,
+ "letterSpacing": "0.01071em",
+ "lineHeight": 1.43,
+ },
+ "button": Object {
+ "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
+ "fontSize": "0.875rem",
+ "fontWeight": 500,
+ "letterSpacing": "0.02857em",
+ "lineHeight": 1.75,
+ "textTransform": "uppercase",
+ },
+ "caption": Object {
+ "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
+ "fontSize": "0.75rem",
+ "fontWeight": 400,
+ "letterSpacing": "0.03333em",
+ "lineHeight": 1.66,
+ },
+ "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
+ "fontSize": 14,
+ "fontWeightBold": 700,
+ "fontWeightLight": 300,
+ "fontWeightMedium": 500,
+ "fontWeightRegular": 400,
+ "h1": Object {
+ "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
+ "fontSize": "6rem",
+ "fontWeight": 300,
+ "letterSpacing": "-0.01562em",
+ "lineHeight": 1.167,
+ },
+ "h2": Object {
+ "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
+ "fontSize": "3.75rem",
+ "fontWeight": 300,
+ "letterSpacing": "-0.00833em",
+ "lineHeight": 1.2,
+ },
+ "h3": Object {
+ "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
+ "fontSize": "3rem",
+ "fontWeight": 400,
+ "letterSpacing": "0em",
+ "lineHeight": 1.167,
+ },
+ "h4": Object {
+ "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
+ "fontSize": "2.125rem",
+ "fontWeight": 400,
+ "letterSpacing": "0.00735em",
+ "lineHeight": 1.235,
+ },
+ "h5": Object {
+ "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
+ "fontSize": "1.5rem",
+ "fontWeight": 400,
+ "letterSpacing": "0em",
+ "lineHeight": 1.334,
+ },
+ "h6": Object {
+ "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
+ "fontSize": "1.25rem",
+ "fontWeight": 500,
+ "letterSpacing": "0.0075em",
+ "lineHeight": 1.6,
+ },
+ "htmlFontSize": 16,
+ "overline": Object {
+ "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
+ "fontSize": "0.75rem",
+ "fontWeight": 400,
+ "letterSpacing": "0.08333em",
+ "lineHeight": 2.66,
+ "textTransform": "uppercase",
+ },
+ "pxToRem": [Function],
+ "round": [Function],
+ "subtitle1": Object {
+ "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
+ "fontSize": "1rem",
+ "fontWeight": 400,
+ "letterSpacing": "0.00938em",
+ "lineHeight": 1.75,
+ },
+ "subtitle2": Object {
+ "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
+ "fontSize": "0.875rem",
+ "fontWeight": 500,
+ "letterSpacing": "0.00714em",
+ "lineHeight": 1.57,
+ },
+ },
+ "zIndex": Object {
+ "appBar": 1100,
+ "drawer": 1200,
+ "mobileStepper": 1000,
+ "modal": 1300,
+ "snackbar": 1400,
+ "speedDial": 1050,
+ "tooltip": 1500,
+ },
+ },
+ "name": "MuiBackdrop",
+ },
+ "propTypes": Object {
+ "classes": [Function],
+ "innerRef": [Function],
+ },
+ "render": [Function],
+ "useStyles": [Function],
+ }
+ }
+ BackdropProps={
+ Object {
+ "transitionDuration": Object {
+ "enter": 225,
+ "exit": 195,
+ },
+ }
+ }
+ className="MuiDialog-root modal-root"
+ closeAfterTransition={true}
+ disableEscapeKeyDown={false}
+ onClose={[MockFunction]}
+ open={true}
+ >
+ <ForwardRef(Portal)
+ disablePortal={false}
+ >
+ <Portal
+ containerInfo={
+ <body
+ style="padding-right: 0px; overflow: hidden;"
+ >
+ <div
+ class="MuiDialog-root modal-root"
+ role="presentation"
+ style="position: fixed; z-index: 1300; right: 0px; bottom: 0px; top: 0px; left: 0px;"
+ >
+ <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
+ 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"
+ >
+ <div
+ aria-labelledby="accessibility-title"
+ class="MuiPaper-root MuiDialog-paper modal-paper blue-light-border MuiDialog-paperScrollPaper MuiDialog-paperWidthSm MuiPaper-elevation24 MuiPaper-rounded"
+ role="dialog"
+ >
+ <div
+ id="accessibility-title"
+ >
+ last_duel_modal.title
+ </div>
+ <div
+ class="duel-last-modal-root"
+ >
+ <div>
+ <svg
+ aria-hidden="true"
+ class="closeIcon styles__icon___23x3R"
+ height="16"
+ width="16"
+ >
+ <use
+ xlink:href="#test-file-stub"
+ />
+ </svg>
+ </div>
+ <svg
+ aria-hidden="true"
+ class="icon styles__icon___23x3R"
+ height="48"
+ width="48"
+ >
+ <use
+ xlink:href="#test-file-stub"
+ />
+ </svg>
+ <div
+ class="text-28-bold title"
+ >
+ last_duel_modal.title
+ </div>
+ <div
+ class="text-22-bold subtitle"
+ >
+ last_duel_modal.subtitle
+ </div>
+ <div
+ class="text-18-normal content"
+ >
+ last_duel_modal.message1
+ </div>
+ <div
+ class="text-18-normal content"
+ >
+ last_duel_modal.message2
+ </div>
+ </div>
+ </div>
+ </div>
+ <div
+ data-test="sentinelEnd"
+ tabindex="0"
+ />
+ </div>
+ </body>
+ }
+ >
+ <div
+ className="MuiDialog-root modal-root"
+ onKeyDown={[Function]}
+ role="presentation"
+ style={
+ Object {
+ "bottom": 0,
+ "left": 0,
+ "position": "fixed",
+ "right": 0,
+ "top": 0,
+ "zIndex": 1300,
+ }
+ }
+ >
+ <WithStyles(ForwardRef(Backdrop))
+ onClick={[Function]}
+ open={true}
+ transitionDuration={
+ Object {
+ "enter": 225,
+ "exit": 195,
+ }
+ }
+ >
+ <ForwardRef(Backdrop)
+ classes={
+ Object {
+ "invisible": "MuiBackdrop-invisible",
+ "root": "MuiBackdrop-root",
+ }
+ }
+ onClick={[Function]}
+ open={true}
+ transitionDuration={
+ Object {
+ "enter": 225,
+ "exit": 195,
+ }
+ }
+ >
+ <ForwardRef(Fade)
+ in={true}
+ onClick={[Function]}
+ timeout={
+ Object {
+ "enter": 225,
+ "exit": 195,
+ }
+ }
+ >
+ <Transition
+ appear={true}
+ enter={true}
+ exit={true}
+ in={true}
+ mountOnEnter={false}
+ onClick={[Function]}
+ onEnter={[Function]}
+ onEntered={[Function]}
+ onEntering={[Function]}
+ onExit={[Function]}
+ onExited={[Function]}
+ onExiting={[Function]}
+ timeout={
+ Object {
+ "enter": 225,
+ "exit": 195,
+ }
+ }
+ unmountOnExit={false}
+ >
+ <div
+ aria-hidden={true}
+ className="MuiBackdrop-root"
+ onClick={[Function]}
+ style={
+ Object {
+ "opacity": 1,
+ "visibility": undefined,
+ }
+ }
+ />
+ </Transition>
+ </ForwardRef(Fade)>
+ </ForwardRef(Backdrop)>
+ </WithStyles(ForwardRef(Backdrop))>
+ <Unstable_TrapFocus
+ disableAutoFocus={false}
+ disableEnforceFocus={false}
+ disableRestoreFocus={false}
+ getDoc={[Function]}
+ isEnabled={[Function]}
+ open={true}
+ >
+ <div
+ data-test="sentinelStart"
+ tabIndex={0}
+ />
+ <ForwardRef(Fade)
+ appear={true}
+ in={true}
+ onEnter={[Function]}
+ onExited={[Function]}
+ role="none presentation"
+ tabIndex="-1"
+ timeout={
+ Object {
+ "enter": 225,
+ "exit": 195,
+ }
+ }
+ >
+ <Transition
+ appear={true}
+ enter={true}
+ exit={true}
+ in={true}
+ mountOnEnter={false}
+ onEnter={[Function]}
+ onEntered={[Function]}
+ onEntering={[Function]}
+ onExit={[Function]}
+ onExited={[Function]}
+ onExiting={[Function]}
+ role="none presentation"
+ tabIndex="-1"
+ timeout={
+ Object {
+ "enter": 225,
+ "exit": 195,
+ }
+ }
+ unmountOnExit={false}
+ >
+ <div
+ className="MuiDialog-container MuiDialog-scrollPaper"
+ onMouseDown={[Function]}
+ onMouseUp={[Function]}
+ role="none presentation"
+ style={
+ Object {
+ "opacity": 1,
+ "visibility": undefined,
+ }
+ }
+ tabIndex="-1"
+ >
+ <WithStyles(ForwardRef(Paper))
+ aria-labelledby="accessibility-title"
+ className="MuiDialog-paper modal-paper blue-light-border MuiDialog-paperScrollPaper MuiDialog-paperWidthSm"
+ elevation={24}
+ role="dialog"
+ >
+ <ForwardRef(Paper)
+ aria-labelledby="accessibility-title"
+ className="MuiDialog-paper modal-paper blue-light-border MuiDialog-paperScrollPaper MuiDialog-paperWidthSm"
+ classes={
+ Object {
+ "elevation0": "MuiPaper-elevation0",
+ "elevation1": "MuiPaper-elevation1",
+ "elevation10": "MuiPaper-elevation10",
+ "elevation11": "MuiPaper-elevation11",
+ "elevation12": "MuiPaper-elevation12",
+ "elevation13": "MuiPaper-elevation13",
+ "elevation14": "MuiPaper-elevation14",
+ "elevation15": "MuiPaper-elevation15",
+ "elevation16": "MuiPaper-elevation16",
+ "elevation17": "MuiPaper-elevation17",
+ "elevation18": "MuiPaper-elevation18",
+ "elevation19": "MuiPaper-elevation19",
+ "elevation2": "MuiPaper-elevation2",
+ "elevation20": "MuiPaper-elevation20",
+ "elevation21": "MuiPaper-elevation21",
+ "elevation22": "MuiPaper-elevation22",
+ "elevation23": "MuiPaper-elevation23",
+ "elevation24": "MuiPaper-elevation24",
+ "elevation3": "MuiPaper-elevation3",
+ "elevation4": "MuiPaper-elevation4",
+ "elevation5": "MuiPaper-elevation5",
+ "elevation6": "MuiPaper-elevation6",
+ "elevation7": "MuiPaper-elevation7",
+ "elevation8": "MuiPaper-elevation8",
+ "elevation9": "MuiPaper-elevation9",
+ "outlined": "MuiPaper-outlined",
+ "root": "MuiPaper-root",
+ "rounded": "MuiPaper-rounded",
+ }
+ }
+ elevation={24}
+ role="dialog"
+ >
+ <div
+ aria-labelledby="accessibility-title"
+ className="MuiPaper-root MuiDialog-paper modal-paper blue-light-border MuiDialog-paperScrollPaper MuiDialog-paperWidthSm MuiPaper-elevation24 MuiPaper-rounded"
+ role="dialog"
+ >
+ <div
+ id="accessibility-title"
+ >
+ last_duel_modal.title
+ </div>
+ <div
+ className="duel-last-modal-root"
+ >
+ <div
+ onClick={[MockFunction]}
+ >
+ <StyledIcon
+ className="closeIcon"
+ icon="test-file-stub"
+ size={16}
+ >
+ <Icon
+ aria-hidden={true}
+ className="closeIcon"
+ icon="test-file-stub"
+ size={16}
+ spin={false}
+ >
+ <Component
+ aria-hidden={true}
+ className="closeIcon styles__icon___23x3R"
+ height={16}
+ style={Object {}}
+ width={16}
+ >
+ <svg
+ aria-hidden={true}
+ className="closeIcon styles__icon___23x3R"
+ height={16}
+ style={Object {}}
+ width={16}
+ >
+ <use
+ xlinkHref="#test-file-stub"
+ />
+ </svg>
+ </Component>
+ </Icon>
+ </StyledIcon>
+ </div>
+ <StyledIcon
+ className="icon"
+ icon="test-file-stub"
+ size={48}
+ >
+ <Icon
+ aria-hidden={true}
+ className="icon"
+ icon="test-file-stub"
+ size={48}
+ spin={false}
+ >
+ <Component
+ aria-hidden={true}
+ className="icon styles__icon___23x3R"
+ height={48}
+ style={Object {}}
+ width={48}
+ >
+ <svg
+ aria-hidden={true}
+ className="icon styles__icon___23x3R"
+ height={48}
+ style={Object {}}
+ width={48}
+ >
+ <use
+ xlinkHref="#test-file-stub"
+ />
+ </svg>
+ </Component>
+ </Icon>
+ </StyledIcon>
+ <div
+ className="text-28-bold title"
+ >
+ last_duel_modal.title
+ </div>
+ <div
+ className="text-22-bold subtitle"
+ >
+ last_duel_modal.subtitle
+ </div>
+ <div
+ className="text-18-normal content"
+ >
+ last_duel_modal.message1
+ </div>
+ <div
+ className="text-18-normal content"
+ >
+ last_duel_modal.message2
+ </div>
+ </div>
+ </div>
+ </ForwardRef(Paper)>
+ </WithStyles(ForwardRef(Paper))>
+ </div>
+ </Transition>
+ </ForwardRef(Fade)>
+ <div
+ data-test="sentinelEnd"
+ tabIndex={0}
+ />
+ </Unstable_TrapFocus>
+ </div>
+ </Portal>
+ </ForwardRef(Portal)>
+ </ForwardRef(Modal)>
+ </ForwardRef(Dialog)>
+ </WithStyles(ForwardRef(Dialog))>
+</LastDuelModal>
+`;
diff --git a/src/components/Duel/lastDuelModal.spec.tsx b/src/components/Duel/lastDuelModal.spec.tsx
index 4001dd478..f0b613baf 100644
--- a/src/components/Duel/lastDuelModal.spec.tsx
+++ b/src/components/Duel/lastDuelModal.spec.tsx
@@ -1,6 +1,7 @@
import { mount } from 'enzyme'
+import toJson from 'enzyme-to-json'
import React from 'react'
-import { act } from 'react-dom/test-utils'
+import { waitForComponentToPaint } from '../../../tests/__mocks__/testUtils'
import LastDuelModal from './lastDuelModal'
jest.mock('cozy-ui/transpiled/react/I18n', () => {
@@ -18,10 +19,7 @@ describe('lastDuelModal component', () => {
const wrapper = mount(
<LastDuelModal open={true} handleCloseClick={jest.fn()} />
)
- await act(async () => {
- await new Promise(resolve => setTimeout(resolve))
- wrapper.update()
- })
- expect(wrapper).toMatchSnapshot()
+ await waitForComponentToPaint(wrapper)
+ expect(toJson(wrapper)).toMatchSnapshot()
})
})
diff --git a/src/components/Ecogesture/EcogestureModal.spec.tsx b/src/components/Ecogesture/EcogestureModal.spec.tsx
index f05e4a50e..d54252aae 100644
--- a/src/components/Ecogesture/EcogestureModal.spec.tsx
+++ b/src/components/Ecogesture/EcogestureModal.spec.tsx
@@ -1,12 +1,12 @@
import EcogestureModal from 'components/Ecogesture/EcogestureModal'
import { mount } from 'enzyme'
import React from 'react'
-import { act } from 'react-dom/test-utils'
import { Provider } from 'react-redux'
import configureStore from 'redux-mock-store'
import { challengeStateData } from '../../../tests/__mocks__/challengeStateData.mock'
import { mockedEcogesturesData } from '../../../tests/__mocks__/ecogesturesData.mock'
import { globalStateData } from '../../../tests/__mocks__/globalStateData.mock'
+import { waitForComponentToPaint } from '../../../tests/__mocks__/testUtils'
jest.mock('cozy-ui/transpiled/react/I18n', () => {
return {
@@ -47,10 +47,7 @@ describe('EcogestureModal component', () => {
/>
</Provider>
)
- await act(async () => {
- await new Promise(resolve => setTimeout(resolve))
- wrapper.update()
- })
+ await waitForComponentToPaint(wrapper)
expect(wrapper.find('.em-title').text()).toEqual(
mockedEcogesturesData[0].shortName
)
diff --git a/src/components/Feedback/FeedbackModal.spec.tsx b/src/components/Feedback/FeedbackModal.spec.tsx
index 9b51acb66..5f3afdd46 100644
--- a/src/components/Feedback/FeedbackModal.spec.tsx
+++ b/src/components/Feedback/FeedbackModal.spec.tsx
@@ -1,11 +1,11 @@
import FeedbackModal from 'components/Feedback/FeedbackModal'
import { mount } from 'enzyme'
import React from 'react'
-import { act } from 'react-dom/test-utils'
import * as reactRedux from 'react-redux'
import { Provider } from 'react-redux'
import { BrowserRouter } from 'react-router-dom'
import { createMockEcolyoStore } from '../../../tests/__mocks__/store'
+import { waitForComponentToPaint } from '../../../tests/__mocks__/testUtils'
import { userChallengeExplo1OnGoing } from '../../../tests/__mocks__/userChallengeData.mock'
// Value coming from jest.config
@@ -73,10 +73,7 @@ describe('FeedbackModal functionalities', () => {
</BrowserRouter>
</Provider>
)
- await act(async () => {
- await new Promise(resolve => setTimeout(resolve))
- wrapper.update()
- })
+ await waitForComponentToPaint(wrapper)
wrapper.find('.modal-paper-close-button').first().simulate('click')
expect(handleFeedbackModalClose).toHaveBeenCalledTimes(1)
diff --git a/src/components/Home/ConsumptionDetails.spec.tsx b/src/components/Home/ConsumptionDetails.spec.tsx
index 93fcb2080..6bb3fe42d 100644
--- a/src/components/Home/ConsumptionDetails.spec.tsx
+++ b/src/components/Home/ConsumptionDetails.spec.tsx
@@ -1,6 +1,7 @@
import { FluidType } from 'enum/fluid.enum'
import { TimeStep } from 'enum/timeStep.enum'
import { mount } from 'enzyme'
+import toJson from 'enzyme-to-json'
import React from 'react'
import * as reactRedux from 'react-redux'
import { Provider } from 'react-redux'
@@ -10,6 +11,7 @@ import {
mockInitialChartState,
mockInitialGlobalState,
} from '../../../tests/__mocks__/store'
+import { waitForComponentToPaint } from '../../../tests/__mocks__/testUtils'
import ConsumptionDetails from './ConsumptionDetails'
jest.mock('cozy-ui/transpiled/react/I18n', () => {
@@ -30,7 +32,7 @@ describe('ConsumptionDetails component', () => {
store.clearActions()
mockUseSelector.mockClear()
})
- it('should be rendered correctly', () => {
+ it('should be rendered correctly', async () => {
mockUseSelector.mockReturnValue({
fluidStatus: mockInitialGlobalState.fluidStatus,
fluidTypes: [FluidType.ELECTRICITY],
@@ -46,7 +48,8 @@ describe('ConsumptionDetails component', () => {
</BrowserRouter>
</Provider>
)
- expect(wrapper).toMatchSnapshot()
+ await waitForComponentToPaint(wrapper)
+ expect(toJson(wrapper)).toMatchSnapshot()
})
it('should not render connection card ', () => {
diff --git a/src/components/Home/FluidButton.spec.tsx b/src/components/Home/FluidButton.spec.tsx
index e58745f9c..9799a3d51 100644
--- a/src/components/Home/FluidButton.spec.tsx
+++ b/src/components/Home/FluidButton.spec.tsx
@@ -1,5 +1,6 @@
import { FluidState, FluidType } from 'enum/fluid.enum'
import { mount } from 'enzyme'
+import toJson from 'enzyme-to-json'
import { GlobalState } from 'models'
import React from 'react'
import { Provider } from 'react-redux'
@@ -9,6 +10,7 @@ import {
createMockEcolyoStore,
mockInitialGlobalState,
} from '../../../tests/__mocks__/store'
+import { waitForComponentToPaint } from '../../../tests/__mocks__/testUtils'
import FluidButton from './FluidButton'
jest.mock('cozy-ui/transpiled/react/I18n', () => {
@@ -32,13 +34,14 @@ describe('FluidButton component', () => {
store.clearActions()
})
- it('should be rendered correctly', () => {
+ it('should be rendered correctly', async () => {
const wrapper = mount(
<Provider store={store}>
<FluidButton fluidType={FluidType.ELECTRICITY} isActive={false} />
</Provider>
- ).getElement()
- expect(wrapper).toMatchSnapshot()
+ )
+ await waitForComponentToPaint(wrapper)
+ expect(toJson(wrapper)).toMatchSnapshot()
})
it('should render multifluidButton', () => {
diff --git a/src/components/Home/FluidButtons.spec.tsx b/src/components/Home/FluidButtons.spec.tsx
index 34a90e11d..08e569ac5 100644
--- a/src/components/Home/FluidButtons.spec.tsx
+++ b/src/components/Home/FluidButtons.spec.tsx
@@ -1,8 +1,10 @@
import { FluidType } from 'enum/fluid.enum'
import { mount } from 'enzyme'
+import toJson from 'enzyme-to-json'
import React from 'react'
import { Provider } from 'react-redux'
import { createMockEcolyoStore } from '../../../tests/__mocks__/store'
+import { waitForComponentToPaint } from '../../../tests/__mocks__/testUtils'
import FluidButtons from './FluidButtons'
jest.mock('cozy-ui/transpiled/react/I18n', () => {
@@ -26,12 +28,13 @@ describe('FluidButtons component', () => {
store.clearActions()
})
- it('should be rendered correctly', () => {
+ it('should be rendered correctly', async () => {
const wrapper = mount(
<Provider store={store}>
<FluidButtons activeFluid={FluidType.ELECTRICITY} />
</Provider>
- ).getElement()
- expect(wrapper).toMatchSnapshot()
+ )
+ await waitForComponentToPaint(wrapper)
+ expect(toJson(wrapper)).toMatchSnapshot()
})
})
diff --git a/src/components/Home/__snapshots__/ConsumptionDetails.spec.tsx.snap b/src/components/Home/__snapshots__/ConsumptionDetails.spec.tsx.snap
index b419df1db..6dd5c4b17 100644
--- a/src/components/Home/__snapshots__/ConsumptionDetails.spec.tsx.snap
+++ b/src/components/Home/__snapshots__/ConsumptionDetails.spec.tsx.snap
@@ -1,3 +1,118 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
-exports[`ConsumptionDetails component should be rendered correctly 1`] = `ReactWrapper {}`;
+exports[`ConsumptionDetails component should be rendered correctly 1`] = `
+<Provider
+ store={
+ Object {
+ "clearActions": [Function],
+ "dispatch": [Function],
+ "getActions": [Function],
+ "getState": [Function],
+ "replaceReducer": [Function],
+ "subscribe": [Function],
+ }
+ }
+>
+ <BrowserRouter>
+ <Router
+ location={
+ Object {
+ "hash": "",
+ "key": "default",
+ "pathname": "/",
+ "search": "",
+ "state": null,
+ }
+ }
+ navigationType="POP"
+ navigator={
+ Object {
+ "action": "POP",
+ "createHref": [Function],
+ "encodeLocation": [Function],
+ "go": [Function],
+ "listen": [Function],
+ "location": Object {
+ "hash": "",
+ "key": "default",
+ "pathname": "/",
+ "search": "",
+ "state": null,
+ },
+ "push": [Function],
+ "replace": [Function],
+ }
+ }
+ >
+ <ConsumptionDetails
+ fluidType={0}
+ >
+ <div
+ className="consumption-details-root"
+ >
+ <div
+ className="consumption-details-content"
+ >
+ <div
+ className="consumption-details-header text-16-normal-uppercase details-title"
+ />
+ <TotalConsumption
+ fluidType={0}
+ >
+ <div
+ className="icon-line "
+ >
+ <StyledIcon
+ className="pile-icon"
+ icon="test-file-stub"
+ size={36}
+ >
+ <Icon
+ aria-hidden={true}
+ className="pile-icon"
+ icon="test-file-stub"
+ size={36}
+ spin={false}
+ >
+ <Component
+ aria-hidden={true}
+ className="pile-icon styles__icon___23x3R"
+ height={36}
+ style={Object {}}
+ width={36}
+ >
+ <svg
+ aria-hidden={true}
+ className="pile-icon styles__icon___23x3R"
+ height={36}
+ style={Object {}}
+ width={36}
+ >
+ <use
+ xlinkHref="#test-file-stub"
+ />
+ </svg>
+ </Component>
+ </Icon>
+ </StyledIcon>
+ <div>
+ <span
+ className="euro-value"
+ >
+ -----
+ </span>
+ <span
+ className="euro-symbol"
+ >
+ €
+ </span>
+ </div>
+ </div>
+ </TotalConsumption>
+ </div>
+ </div>
+ </ConsumptionDetails>
+ </Router>
+ </BrowserRouter>
+</Provider>
+`;
diff --git a/src/components/Home/__snapshots__/FluidButton.spec.tsx.snap b/src/components/Home/__snapshots__/FluidButton.spec.tsx.snap
index 062bfb67a..bc20bd2d9 100644
--- a/src/components/Home/__snapshots__/FluidButton.spec.tsx.snap
+++ b/src/components/Home/__snapshots__/FluidButton.spec.tsx.snap
@@ -16,6 +16,50 @@ exports[`FluidButton component should be rendered correctly 1`] = `
<FluidButton
fluidType={0}
isActive={false}
- />
+ >
+ <div
+ className="fluid-title electricity fluid-button"
+ onClick={[Function]}
+ >
+ <StyledIcon
+ className="fluid-icon"
+ icon="test-file-stub"
+ size={32}
+ >
+ <Icon
+ aria-hidden={true}
+ className="fluid-icon"
+ icon="test-file-stub"
+ size={32}
+ spin={false}
+ >
+ <Component
+ aria-hidden={true}
+ className="fluid-icon styles__icon___23x3R"
+ height={32}
+ style={Object {}}
+ width={32}
+ >
+ <svg
+ aria-hidden={true}
+ className="fluid-icon styles__icon___23x3R"
+ height={32}
+ style={Object {}}
+ width={32}
+ >
+ <use
+ xlinkHref="#test-file-stub"
+ />
+ </svg>
+ </Component>
+ </Icon>
+ </StyledIcon>
+ <div
+ className="fluid-title electricity false text-14-normal"
+ >
+ FLUID.ELECTRICITY.LABEL
+ </div>
+ </div>
+ </FluidButton>
</Provider>
`;
diff --git a/src/components/Home/__snapshots__/FluidButtons.spec.tsx.snap b/src/components/Home/__snapshots__/FluidButtons.spec.tsx.snap
index 62953c6cf..3925c6abe 100644
--- a/src/components/Home/__snapshots__/FluidButtons.spec.tsx.snap
+++ b/src/components/Home/__snapshots__/FluidButtons.spec.tsx.snap
@@ -15,6 +15,211 @@ exports[`FluidButtons component should be rendered correctly 1`] = `
>
<FluidButtons
activeFluid={0}
- />
+ >
+ <div
+ className="fluid-buttons"
+ >
+ <div
+ className="content"
+ >
+ <FluidButton
+ fluidType={3}
+ isActive={false}
+ key="3"
+ >
+ <div
+ className="fluid-title multifluid fluid-button"
+ onClick={[Function]}
+ >
+ <StyledIcon
+ className="fluid-icon"
+ icon="test-file-stub"
+ size={36}
+ >
+ <Icon
+ aria-hidden={true}
+ className="fluid-icon"
+ icon="test-file-stub"
+ size={36}
+ spin={false}
+ >
+ <Component
+ aria-hidden={true}
+ className="fluid-icon styles__icon___23x3R"
+ height={36}
+ style={Object {}}
+ width={36}
+ >
+ <svg
+ aria-hidden={true}
+ className="fluid-icon styles__icon___23x3R"
+ height={36}
+ style={Object {}}
+ width={36}
+ >
+ <use
+ xlinkHref="#test-file-stub"
+ />
+ </svg>
+ </Component>
+ </Icon>
+ </StyledIcon>
+ <div
+ className="fluid-title multifluid false text-14-normal"
+ >
+ FLUID.MULTIFLUID.LABEL
+ </div>
+ </div>
+ </FluidButton>
+ <FluidButton
+ fluidType={0}
+ isActive={true}
+ key="0"
+ >
+ <div
+ className="fluid-title electricity fluid-button"
+ onClick={[Function]}
+ >
+ <StyledIcon
+ className="fluid-icon"
+ icon="test-file-stub"
+ size={32}
+ >
+ <Icon
+ aria-hidden={true}
+ className="fluid-icon"
+ icon="test-file-stub"
+ size={32}
+ spin={false}
+ >
+ <Component
+ aria-hidden={true}
+ className="fluid-icon styles__icon___23x3R"
+ height={32}
+ style={Object {}}
+ width={32}
+ >
+ <svg
+ aria-hidden={true}
+ className="fluid-icon styles__icon___23x3R"
+ height={32}
+ style={Object {}}
+ width={32}
+ >
+ <use
+ xlinkHref="#test-file-stub"
+ />
+ </svg>
+ </Component>
+ </Icon>
+ </StyledIcon>
+ <div
+ className="fluid-title electricity active text-14-normal"
+ >
+ FLUID.ELECTRICITY.LABEL
+ </div>
+ </div>
+ </FluidButton>
+ <FluidButton
+ fluidType={1}
+ isActive={false}
+ key="1"
+ >
+ <div
+ className="fluid-title water fluid-button"
+ onClick={[Function]}
+ >
+ <StyledIcon
+ className="fluid-icon"
+ icon="test-file-stub"
+ size={32}
+ >
+ <Icon
+ aria-hidden={true}
+ className="fluid-icon"
+ icon="test-file-stub"
+ size={32}
+ spin={false}
+ >
+ <Component
+ aria-hidden={true}
+ className="fluid-icon styles__icon___23x3R"
+ height={32}
+ style={Object {}}
+ width={32}
+ >
+ <svg
+ aria-hidden={true}
+ className="fluid-icon styles__icon___23x3R"
+ height={32}
+ style={Object {}}
+ width={32}
+ >
+ <use
+ xlinkHref="#test-file-stub"
+ />
+ </svg>
+ </Component>
+ </Icon>
+ </StyledIcon>
+ <div
+ className="fluid-title water false text-14-normal"
+ >
+ FLUID.WATER.LABEL
+ </div>
+ </div>
+ </FluidButton>
+ <FluidButton
+ fluidType={2}
+ isActive={false}
+ key="2"
+ >
+ <div
+ className="fluid-title gas fluid-button"
+ onClick={[Function]}
+ >
+ <StyledIcon
+ className="fluid-icon"
+ icon="test-file-stub"
+ size={32}
+ >
+ <Icon
+ aria-hidden={true}
+ className="fluid-icon"
+ icon="test-file-stub"
+ size={32}
+ spin={false}
+ >
+ <Component
+ aria-hidden={true}
+ className="fluid-icon styles__icon___23x3R"
+ height={32}
+ style={Object {}}
+ width={32}
+ >
+ <svg
+ aria-hidden={true}
+ className="fluid-icon styles__icon___23x3R"
+ height={32}
+ style={Object {}}
+ width={32}
+ >
+ <use
+ xlinkHref="#test-file-stub"
+ />
+ </svg>
+ </Component>
+ </Icon>
+ </StyledIcon>
+ <div
+ className="fluid-title gas false text-14-normal"
+ >
+ FLUID.GAS.LABEL
+ </div>
+ </div>
+ </FluidButton>
+ </div>
+ </div>
+ </FluidButtons>
</Provider>
`;
diff --git a/src/components/Konnector/KonnectorViewerList.spec.tsx b/src/components/Konnector/KonnectorViewerList.spec.tsx
index 638e43f17..9394ed2ca 100644
--- a/src/components/Konnector/KonnectorViewerList.spec.tsx
+++ b/src/components/Konnector/KonnectorViewerList.spec.tsx
@@ -1,4 +1,5 @@
import { mount } from 'enzyme'
+import toJson from 'enzyme-to-json'
import React from 'react'
import * as reactRedux from 'react-redux'
import { Provider } from 'react-redux'
@@ -6,6 +7,7 @@ import {
createMockEcolyoStore,
mockInitialGlobalState,
} from '../../../tests/__mocks__/store'
+import { waitForComponentToPaint } from '../../../tests/__mocks__/testUtils'
import KonnectorViewerList from './KonnectorViewerList'
jest.mock('cozy-ui/transpiled/react/I18n', () => {
@@ -29,13 +31,14 @@ describe('KonnectorViewerList component', () => {
store.clearActions()
})
- it('should be rendered correctly', () => {
+ it('should be rendered correctly', async () => {
const wrapper = mount(
<Provider store={store}>
<KonnectorViewerList />
</Provider>
- ).getElement()
- expect(wrapper).toMatchSnapshot()
+ )
+ await waitForComponentToPaint(wrapper)
+ expect(toJson(wrapper)).toMatchSnapshot()
})
it('should click on card and nav to fluid', async () => {
const mockUseSelector = jest.spyOn(reactRedux, 'useSelector')
diff --git a/src/components/Konnector/__snapshots__/KonnectorViewerList.spec.tsx.snap b/src/components/Konnector/__snapshots__/KonnectorViewerList.spec.tsx.snap
index e4db320e7..5399a7450 100644
--- a/src/components/Konnector/__snapshots__/KonnectorViewerList.spec.tsx.snap
+++ b/src/components/Konnector/__snapshots__/KonnectorViewerList.spec.tsx.snap
@@ -13,6 +13,463 @@ exports[`KonnectorViewerList component should be rendered correctly 1`] = `
}
}
>
- <KonnectorViewerList />
+ <KonnectorViewerList>
+ <StyledCard
+ className="connection-card"
+ key="0"
+ onClick={[Function]}
+ >
+ <WithStyles(WithStyles(ForwardRef(CardActionArea)))
+ className="connection-card"
+ onClick={[Function]}
+ >
+ <WithStyles(ForwardRef(CardActionArea))
+ className="connection-card"
+ classes={
+ Object {
+ "root": "WithStyles(ForwardRef(CardActionArea))-root-1",
+ }
+ }
+ onClick={[Function]}
+ >
+ <ForwardRef(CardActionArea)
+ className="connection-card"
+ classes={
+ Object {
+ "focusHighlight": "MuiCardActionArea-focusHighlight",
+ "focusVisible": "Mui-focusVisible",
+ "root": "MuiCardActionArea-root WithStyles(ForwardRef(CardActionArea))-root-1",
+ }
+ }
+ onClick={[Function]}
+ >
+ <WithStyles(ForwardRef(ButtonBase))
+ className="MuiCardActionArea-root WithStyles(ForwardRef(CardActionArea))-root-1 connection-card"
+ focusVisibleClassName="Mui-focusVisible"
+ onClick={[Function]}
+ >
+ <ForwardRef(ButtonBase)
+ className="MuiCardActionArea-root WithStyles(ForwardRef(CardActionArea))-root-1 connection-card"
+ classes={
+ Object {
+ "disabled": "Mui-disabled",
+ "focusVisible": "Mui-focusVisible",
+ "root": "MuiButtonBase-root",
+ }
+ }
+ focusVisibleClassName="Mui-focusVisible"
+ onClick={[Function]}
+ >
+ <button
+ className="MuiButtonBase-root MuiCardActionArea-root WithStyles(ForwardRef(CardActionArea))-root-1 connection-card"
+ 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"
+ >
+ <WithStyles(WithStyles(ForwardRef(CardContent)))>
+ <WithStyles(ForwardRef(CardContent))
+ classes={
+ Object {
+ "root": "WithStyles(ForwardRef(CardContent))-root-2",
+ }
+ }
+ >
+ <ForwardRef(CardContent)
+ classes={
+ Object {
+ "root": "MuiCardContent-root WithStyles(ForwardRef(CardContent))-root-2",
+ }
+ }
+ >
+ <div
+ className="MuiCardContent-root WithStyles(ForwardRef(CardContent))-root-2"
+ >
+ <Icon
+ icon="test-file-stub"
+ size={36}
+ spin={false}
+ >
+ <Component
+ className="styles__icon___23x3R"
+ height={36}
+ style={Object {}}
+ width={36}
+ >
+ <svg
+ className="styles__icon___23x3R"
+ height={36}
+ style={Object {}}
+ width={36}
+ >
+ <use
+ xlinkHref="#test-file-stub"
+ />
+ </svg>
+ </Component>
+ </Icon>
+ <div
+ className="konnector-title text-18-bold electricity"
+ >
+ konnector_options.label_connect_to_electricity
+ </div>
+ </div>
+ </ForwardRef(CardContent)>
+ </WithStyles(ForwardRef(CardContent))>
+ </WithStyles(WithStyles(ForwardRef(CardContent)))>
+ <span
+ className="MuiCardActionArea-focusHighlight"
+ />
+ <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(CardActionArea)>
+ </WithStyles(ForwardRef(CardActionArea))>
+ </WithStyles(WithStyles(ForwardRef(CardActionArea)))>
+ </StyledCard>
+ <StyledCard
+ className="connection-card"
+ key="1"
+ onClick={[Function]}
+ >
+ <WithStyles(WithStyles(ForwardRef(CardActionArea)))
+ className="connection-card"
+ onClick={[Function]}
+ >
+ <WithStyles(ForwardRef(CardActionArea))
+ className="connection-card"
+ classes={
+ Object {
+ "root": "WithStyles(ForwardRef(CardActionArea))-root-1",
+ }
+ }
+ onClick={[Function]}
+ >
+ <ForwardRef(CardActionArea)
+ className="connection-card"
+ classes={
+ Object {
+ "focusHighlight": "MuiCardActionArea-focusHighlight",
+ "focusVisible": "Mui-focusVisible",
+ "root": "MuiCardActionArea-root WithStyles(ForwardRef(CardActionArea))-root-1",
+ }
+ }
+ onClick={[Function]}
+ >
+ <WithStyles(ForwardRef(ButtonBase))
+ className="MuiCardActionArea-root WithStyles(ForwardRef(CardActionArea))-root-1 connection-card"
+ focusVisibleClassName="Mui-focusVisible"
+ onClick={[Function]}
+ >
+ <ForwardRef(ButtonBase)
+ className="MuiCardActionArea-root WithStyles(ForwardRef(CardActionArea))-root-1 connection-card"
+ classes={
+ Object {
+ "disabled": "Mui-disabled",
+ "focusVisible": "Mui-focusVisible",
+ "root": "MuiButtonBase-root",
+ }
+ }
+ focusVisibleClassName="Mui-focusVisible"
+ onClick={[Function]}
+ >
+ <button
+ className="MuiButtonBase-root MuiCardActionArea-root WithStyles(ForwardRef(CardActionArea))-root-1 connection-card"
+ 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"
+ >
+ <WithStyles(WithStyles(ForwardRef(CardContent)))>
+ <WithStyles(ForwardRef(CardContent))
+ classes={
+ Object {
+ "root": "WithStyles(ForwardRef(CardContent))-root-2",
+ }
+ }
+ >
+ <ForwardRef(CardContent)
+ classes={
+ Object {
+ "root": "MuiCardContent-root WithStyles(ForwardRef(CardContent))-root-2",
+ }
+ }
+ >
+ <div
+ className="MuiCardContent-root WithStyles(ForwardRef(CardContent))-root-2"
+ >
+ <Icon
+ icon="test-file-stub"
+ size={36}
+ spin={false}
+ >
+ <Component
+ className="styles__icon___23x3R"
+ height={36}
+ style={Object {}}
+ width={36}
+ >
+ <svg
+ className="styles__icon___23x3R"
+ height={36}
+ style={Object {}}
+ width={36}
+ >
+ <use
+ xlinkHref="#test-file-stub"
+ />
+ </svg>
+ </Component>
+ </Icon>
+ <div
+ className="konnector-title text-18-bold water"
+ >
+ konnector_options.label_connect_to_water
+ </div>
+ </div>
+ </ForwardRef(CardContent)>
+ </WithStyles(ForwardRef(CardContent))>
+ </WithStyles(WithStyles(ForwardRef(CardContent)))>
+ <span
+ className="MuiCardActionArea-focusHighlight"
+ />
+ <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(CardActionArea)>
+ </WithStyles(ForwardRef(CardActionArea))>
+ </WithStyles(WithStyles(ForwardRef(CardActionArea)))>
+ </StyledCard>
+ <StyledCard
+ className="connection-card"
+ key="2"
+ onClick={[Function]}
+ >
+ <WithStyles(WithStyles(ForwardRef(CardActionArea)))
+ className="connection-card"
+ onClick={[Function]}
+ >
+ <WithStyles(ForwardRef(CardActionArea))
+ className="connection-card"
+ classes={
+ Object {
+ "root": "WithStyles(ForwardRef(CardActionArea))-root-1",
+ }
+ }
+ onClick={[Function]}
+ >
+ <ForwardRef(CardActionArea)
+ className="connection-card"
+ classes={
+ Object {
+ "focusHighlight": "MuiCardActionArea-focusHighlight",
+ "focusVisible": "Mui-focusVisible",
+ "root": "MuiCardActionArea-root WithStyles(ForwardRef(CardActionArea))-root-1",
+ }
+ }
+ onClick={[Function]}
+ >
+ <WithStyles(ForwardRef(ButtonBase))
+ className="MuiCardActionArea-root WithStyles(ForwardRef(CardActionArea))-root-1 connection-card"
+ focusVisibleClassName="Mui-focusVisible"
+ onClick={[Function]}
+ >
+ <ForwardRef(ButtonBase)
+ className="MuiCardActionArea-root WithStyles(ForwardRef(CardActionArea))-root-1 connection-card"
+ classes={
+ Object {
+ "disabled": "Mui-disabled",
+ "focusVisible": "Mui-focusVisible",
+ "root": "MuiButtonBase-root",
+ }
+ }
+ focusVisibleClassName="Mui-focusVisible"
+ onClick={[Function]}
+ >
+ <button
+ className="MuiButtonBase-root MuiCardActionArea-root WithStyles(ForwardRef(CardActionArea))-root-1 connection-card"
+ 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"
+ >
+ <WithStyles(WithStyles(ForwardRef(CardContent)))>
+ <WithStyles(ForwardRef(CardContent))
+ classes={
+ Object {
+ "root": "WithStyles(ForwardRef(CardContent))-root-2",
+ }
+ }
+ >
+ <ForwardRef(CardContent)
+ classes={
+ Object {
+ "root": "MuiCardContent-root WithStyles(ForwardRef(CardContent))-root-2",
+ }
+ }
+ >
+ <div
+ className="MuiCardContent-root WithStyles(ForwardRef(CardContent))-root-2"
+ >
+ <Icon
+ icon="test-file-stub"
+ size={36}
+ spin={false}
+ >
+ <Component
+ className="styles__icon___23x3R"
+ height={36}
+ style={Object {}}
+ width={36}
+ >
+ <svg
+ className="styles__icon___23x3R"
+ height={36}
+ style={Object {}}
+ width={36}
+ >
+ <use
+ xlinkHref="#test-file-stub"
+ />
+ </svg>
+ </Component>
+ </Icon>
+ <div
+ className="konnector-title text-18-bold gas"
+ >
+ konnector_options.label_connect_to_gas
+ </div>
+ </div>
+ </ForwardRef(CardContent)>
+ </WithStyles(ForwardRef(CardContent))>
+ </WithStyles(WithStyles(ForwardRef(CardContent)))>
+ <span
+ className="MuiCardActionArea-focusHighlight"
+ />
+ <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(CardActionArea)>
+ </WithStyles(ForwardRef(CardActionArea))>
+ </WithStyles(WithStyles(ForwardRef(CardActionArea)))>
+ </StyledCard>
+ </KonnectorViewerList>
</Provider>
`;
diff --git a/src/components/Quiz/QuizFinish.spec.tsx b/src/components/Quiz/QuizFinish.spec.tsx
index fbce4cee6..10b2b5ba9 100644
--- a/src/components/Quiz/QuizFinish.spec.tsx
+++ b/src/components/Quiz/QuizFinish.spec.tsx
@@ -3,10 +3,10 @@ import StyledIcon from 'components/CommonKit/Icon/StyledIcon'
import { UserChallengeUpdateFlag } from 'enum/userChallenge.enum'
import { mount } from 'enzyme'
import React from 'react'
-import { act } from 'react-dom/test-utils'
import { Provider } from 'react-redux'
import configureStore from 'redux-mock-store'
import { globalStateData } from '../../../tests/__mocks__/globalStateData.mock'
+import { waitForComponentToPaint } from '../../../tests/__mocks__/testUtils'
import { userChallengeData } from '../../../tests/__mocks__/userChallengeData.mock'
import QuizFinish from './QuizFinish'
@@ -57,10 +57,7 @@ describe('QuizFinish', () => {
userChallengeData[0],
UserChallengeUpdateFlag.QUIZ_RESET
)
- await act(async () => {
- await new Promise(resolve => setTimeout(resolve))
- wrapper.update()
- })
+ await waitForComponentToPaint(wrapper)
expect(mockedNavigate).toHaveBeenCalledWith('/challenges')
})
diff --git a/src/components/TimeStepSelector/TimeStepSelector.spec.tsx b/src/components/TimeStepSelector/TimeStepSelector.spec.tsx
index 6678b795d..005f1fd3b 100644
--- a/src/components/TimeStepSelector/TimeStepSelector.spec.tsx
+++ b/src/components/TimeStepSelector/TimeStepSelector.spec.tsx
@@ -3,6 +3,7 @@ import TimeStepSelector from 'components/TimeStepSelector/TimeStepSelector'
import { FluidType } from 'enum/fluid.enum'
import { TimeStep } from 'enum/timeStep.enum'
import { mount } from 'enzyme'
+import toJson from 'enzyme-to-json'
import { DateTime } from 'luxon'
import React from 'react'
import * as reactRedux from 'react-redux'
@@ -10,6 +11,7 @@ import { Provider } from 'react-redux'
import UsageEventService from 'services/usageEvent.service'
import * as chartActions from 'store/chart/chart.slice'
import { createMockEcolyoStore } from '../../../tests/__mocks__/store'
+import { waitForComponentToPaint } from '../../../tests/__mocks__/testUtils'
jest.mock('cozy-ui/transpiled/react/I18n', () => {
return {
@@ -39,7 +41,7 @@ describe('TimeStepSelector component', () => {
setCurrentTimeStepSpy.mockClear()
})
- it('should render component properly with 4 timesteps', () => {
+ it('should render component properly with 4 timesteps', async () => {
useSelectorSpy.mockReturnValue({
currentTimeStep: TimeStep.DAY,
selectedDate: DateTime.local().setZone('utc', {
@@ -53,7 +55,8 @@ describe('TimeStepSelector component', () => {
)
expect(wrapper.find('.circle').at(3).exists()).toBeTruthy()
expect(wrapper.find('.circle').at(4).exists()).toBeFalsy()
- expect(wrapper).toMatchSnapshot()
+ await waitForComponentToPaint(wrapper)
+ expect(toJson(wrapper)).toMatchSnapshot()
})
it('should render component properly with 5 timesteps', () => {
diff --git a/src/components/TimeStepSelector/__snapshots__/TimeStepSelector.spec.tsx.snap b/src/components/TimeStepSelector/__snapshots__/TimeStepSelector.spec.tsx.snap
index f4343d02a..25dcf210d 100644
--- a/src/components/TimeStepSelector/__snapshots__/TimeStepSelector.spec.tsx.snap
+++ b/src/components/TimeStepSelector/__snapshots__/TimeStepSelector.spec.tsx.snap
@@ -1,3 +1,227 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
-exports[`TimeStepSelector component should render component properly with 4 timesteps 1`] = `ReactWrapper {}`;
+exports[`TimeStepSelector component should render component properly with 4 timesteps 1`] = `
+<Provider
+ store={
+ Object {
+ "clearActions": [Function],
+ "dispatch": [Function],
+ "getActions": [Function],
+ "getState": [Function],
+ "replaceReducer": [Function],
+ "subscribe": [Function],
+ }
+ }
+>
+ <TimeStepSelector
+ fluidType={1}
+ >
+ <div
+ className="timestep-selector"
+ >
+ <WithStyles(ForwardRef(Button))
+ classes={
+ Object {
+ "label": "text-13-normal",
+ "root": "btn-today",
+ }
+ }
+ onClick={[Function]}
+ >
+ <ForwardRef(Button)
+ 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 text-13-normal",
+ "outlined": "MuiButton-outlined",
+ "outlinedPrimary": "MuiButton-outlinedPrimary",
+ "outlinedSecondary": "MuiButton-outlinedSecondary",
+ "outlinedSizeLarge": "MuiButton-outlinedSizeLarge",
+ "outlinedSizeSmall": "MuiButton-outlinedSizeSmall",
+ "root": "MuiButton-root btn-today",
+ "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))
+ className="MuiButton-root btn-today MuiButton-text"
+ component="button"
+ disabled={false}
+ focusRipple={true}
+ focusVisibleClassName="Mui-focusVisible"
+ onClick={[Function]}
+ type="button"
+ >
+ <ForwardRef(ButtonBase)
+ className="MuiButton-root btn-today MuiButton-text"
+ 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
+ className="MuiButtonBase-root MuiButton-root btn-today MuiButton-text"
+ 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 text-13-normal"
+ >
+ timestep.today
+ </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
+ className="timestep-container"
+ >
+ <ul
+ className="timestep-bar false"
+ >
+ <li
+ className="circle"
+ id="week"
+ onClick={[Function]}
+ >
+ <span
+ className="clickable-area"
+ />
+ <span
+ className="text text-14-normal"
+ >
+ timestep.week.period
+ </span>
+ </li>
+ <li
+ className="bar"
+ />
+ <li
+ className="active circle"
+ id="day"
+ onClick={[Function]}
+ >
+ <span
+ className="clickable-area"
+ />
+ <span
+ className="text text-14-normal"
+ >
+ timestep.day.period
+ </span>
+ </li>
+ <li
+ className="bar"
+ />
+ <li
+ className="circle"
+ id="month"
+ onClick={[Function]}
+ >
+ <span
+ className="clickable-area"
+ />
+ <span
+ className="text text-14-normal"
+ >
+ timestep.month.period
+ </span>
+ </li>
+ <li
+ className="bar"
+ />
+ <li
+ className="circle"
+ id="year"
+ onClick={[Function]}
+ >
+ <span
+ className="clickable-area"
+ />
+ <span
+ className="text text-14-normal"
+ >
+ timestep.year.period
+ </span>
+ </li>
+ <li
+ className="bar"
+ />
+ </ul>
+ </div>
+ </div>
+ </TimeStepSelector>
+</Provider>
+`;
diff --git a/src/components/TotalConsumption/TotalConsumption.spec.tsx b/src/components/TotalConsumption/TotalConsumption.spec.tsx
index c0efe60c8..6bc327a26 100644
--- a/src/components/TotalConsumption/TotalConsumption.spec.tsx
+++ b/src/components/TotalConsumption/TotalConsumption.spec.tsx
@@ -2,11 +2,11 @@ import { FluidType } from 'enum/fluid.enum'
import { TimeStep } from 'enum/timeStep.enum'
import { mount } from 'enzyme'
import React from 'react'
-import { act } from 'react-dom/test-utils'
import { Provider } from 'react-redux'
import configureStore from 'redux-mock-store'
import { graphData } from '../../../tests/__mocks__/chartData.mock'
import { mockInitialChartState } from '../../../tests/__mocks__/store'
+import { waitForComponentToPaint } from '../../../tests/__mocks__/testUtils'
import TotalConsumption from './TotalConsumption'
jest.mock('cozy-ui/transpiled/react/I18n', () => {
@@ -36,10 +36,7 @@ describe('TotalConsumption component', () => {
<TotalConsumption fluidType={FluidType.ELECTRICITY} />
</Provider>
)
- await act(async () => {
- await new Promise(resolve => setTimeout(resolve))
- component.update()
- })
+ await waitForComponentToPaint(component)
expect(component).toMatchSnapshot()
})
it('should render euro value', async () => {
@@ -48,10 +45,7 @@ describe('TotalConsumption component', () => {
<TotalConsumption fluidType={FluidType.ELECTRICITY} />
</Provider>
)
- await act(async () => {
- await new Promise(resolve => setTimeout(resolve))
- component.update()
- })
+ await waitForComponentToPaint(component)
expect(component.find('.euro-value').first().text()).toEqual('22,77')
})
@@ -61,10 +55,7 @@ describe('TotalConsumption component', () => {
<TotalConsumption fluidType={FluidType.MULTIFLUID} />
</Provider>
)
- await act(async () => {
- await new Promise(resolve => setTimeout(resolve))
- component.update()
- })
+ await waitForComponentToPaint(component)
expect(component.find('.euro-value').first().text()).toEqual('130,84')
})
@@ -84,10 +75,7 @@ describe('TotalConsumption component', () => {
<TotalConsumption fluidType={FluidType.MULTIFLUID} />
</Provider>
)
- await act(async () => {
- await new Promise(resolve => setTimeout(resolve))
- component.update()
- })
+ await waitForComponentToPaint(component)
expect(component.find('.euro-value').first().text()).toEqual('130,84')
expect(component.find('.euro-value').at(1).text()).toEqual('110,66')
@@ -104,10 +92,7 @@ describe('TotalConsumption component', () => {
<TotalConsumption fluidType={FluidType.ELECTRICITY} />
</Provider>
)
- await act(async () => {
- await new Promise(resolve => setTimeout(resolve))
- component.update()
- })
+ await waitForComponentToPaint(component)
expect(component.find('.euro-value').first().text()).toEqual('-----')
})
--
GitLab