From 076cadd73d295096f710e3b137e6ce73eafedc59 Mon Sep 17 00:00:00 2001 From: Bastien DUMONT <bdumont@grandlyon.com> Date: Wed, 5 Jul 2023 14:49:25 +0000 Subject: [PATCH] tests: improve dx --- src/components/Action/ActionBegin.spec.tsx | 54 +- src/components/Action/ActionCard.spec.tsx | 25 +- src/components/Action/ActionChoose.spec.tsx | 27 +- src/components/Action/ActionDone.spec.tsx | 20 +- src/components/Action/ActionList.spec.tsx | 21 +- src/components/Action/ActionModal.spec.tsx | 20 +- src/components/Action/ActionOnGoing.spec.tsx | 24 +- src/components/Action/ActionView.spec.tsx | 68 +- src/components/Analysis/AnalysisView.spec.tsx | 25 +- .../ElecHalfHourChart.spec.tsx | 36 +- .../ElecHalfHourMonthlyAnalysis.spec.tsx | 11 +- .../ElecHalfHourChart.spec.tsx.snap | 4 + .../MaxConsumptionCard.spec.tsx | 22 +- .../Analysis/MonthlyAnalysis.spec.tsx | 11 +- .../ProfileComparator.spec.tsx | 48 +- .../TotalAnalysisChart.spec.tsx | 10 +- .../Challenge/ChallengeCardLast.spec.tsx | 25 +- .../Challenge/ChallengeCardUnlocked.spec.tsx | 31 +- .../Challenge/ChallengeCardUnlocked.tsx | 5 +- .../Challenge/ChallengeView.spec.tsx | 8 +- .../ChallengeCardLast.spec.tsx.snap | 293 +- src/components/Charts/AxisBottom.spec.tsx | 15 +- src/components/Charts/Bar.spec.tsx | 12 +- .../CommonKit/ErrorPage/ErrorPage.spec.tsx | 22 +- .../__snapshots__/ErrorPage.spec.tsx.snap | 323 +- src/components/Connection/Connection.spec.tsx | 12 +- .../Connection/ExpiredConsentModal.spec.tsx | 26 +- .../SGEConnect/SgeConnectView.spec.tsx | 78 +- .../Connection/SGEConnect/SgeInit.spec.tsx | 45 +- .../SGEConnect/SgeModalHint.spec.tsx | 10 +- .../SGEConnect/StepAddress.spec.tsx | 49 +- .../SGEConnect/StepConsent.spec.tsx | 34 +- .../SGEConnect/StepIdentityAndPdl.spec.tsx | 57 +- .../DataloadConsumptionVisualizer.spec.tsx | 42 +- .../EstimatedConsumptionModal.spec.tsx | 17 +- .../NoDataModal.spec.tsx | 14 +- .../EstimatedConsumptionModal.spec.tsx.snap | 1499 +++++---- .../__snapshots__/NoDataModal.spec.tsx.snap | 1747 +++++----- src/components/Duel/DuelOngoing.spec.tsx | 19 +- src/components/Duel/DuelResultModal.spec.tsx | 47 +- src/components/Duel/DuelUnlocked.spec.tsx | 25 +- src/components/Duel/DuelView.spec.tsx | 74 +- .../DuelResultModal.spec.tsx.snap | 1777 +++++----- .../Ecogesture/EcogestureCard.spec.tsx | 33 +- .../Ecogesture/EcogestureEmptyList.spec.tsx | 108 +- .../Ecogesture/EcogestureInitModal.spec.tsx | 68 +- .../Ecogesture/EcogestureList.spec.tsx | 79 +- .../Ecogesture/EcogestureModal.spec.tsx | 14 +- .../Ecogesture/EcogestureReinitModal.spec.tsx | 25 +- .../Ecogesture/EcogestureView.spec.tsx | 13 +- src/components/Ecogesture/EcogestureView.tsx | 3 +- .../Ecogesture/EfficiencyRating.spec.tsx | 18 +- .../Ecogesture/SingleEcogesture.spec.tsx | 35 +- .../EcogestureCard.spec.tsx.snap | 605 ++-- .../EcogestureEmptyList.spec.tsx.snap | 509 ++- .../EcogestureInitModal.spec.tsx.snap | 1857 +++++------ .../EcogestureList.spec.tsx.snap | 2959 ++++++++--------- .../EcogestureReinitModal.spec.tsx.snap | 1959 ++++++----- .../EfficiencyRating.spec.tsx.snap | 243 +- .../EcogestureFormEquipment.spec.tsx | 33 +- .../EcogestureFormSingleChoice.spec.tsx | 5 - .../EcogestureFormView.spec.tsx | 20 +- .../Exploration/ExplorationError.spec.tsx | 1 + .../Exploration/ExplorationFinished.spec.tsx | 16 +- .../Exploration/ExplorationOngoing.spec.tsx | 13 +- .../Exploration/ExplorationView.spec.tsx | 54 +- .../Feedback/FeedbackModal.spec.tsx | 69 +- .../__snapshots__/FeedbackModal.spec.tsx.snap | 10 +- src/components/Header/CozyBar.spec.tsx | 17 +- src/components/Header/Header.spec.tsx | 29 +- .../Home/ConsumptionDetails.spec.tsx | 56 +- src/components/Home/ConsumptionView.spec.tsx | 169 +- src/components/Home/FluidButton.spec.tsx | 19 +- .../ConsumptionDetails.spec.tsx.snap | 145 +- .../Konnector/KonnectorViewerList.spec.tsx | 11 +- src/components/Navbar/Navbar.spec.tsx | 41 +- .../ProfileTypeOptions.spec.tsx | 98 +- .../PartnerIssue/PartnerIssueModal.spec.tsx | 66 +- .../PartnerIssueModal.spec.tsx.snap | 1699 +++++----- src/components/Quiz/QuizBegin.spec.tsx | 11 +- .../Quiz/QuizCustomQuestionContent.spec.tsx | 25 +- src/components/Quiz/QuizFinish.spec.tsx | 11 +- .../Quiz/QuizQuestionContent.spec.tsx | 19 +- src/components/Quiz/QuizView.spec.tsx | 79 +- src/components/Splash/SplashRoot.spec.tsx | 16 +- .../__snapshots__/SplashRoot.spec.tsx.snap | 103 +- .../Terms/DataShareConsentContent.spec.tsx | 17 +- src/components/Terms/TermsView.spec.tsx | 2 - src/components/Terms/TermsView.tsx | 2 +- .../TimeStepSelector.spec.tsx | 50 +- .../TotalConsumption.spec.tsx | 38 +- .../WelcomeModal/WelcomeModal.spec.tsx | 26 +- src/migrations/migration.spec.ts | 6 +- src/services/initialization.service.spec.ts | 35 +- src/services/profile.service.spec.ts | 16 +- src/store/challenge/challenge.slice.spec.ts | 12 +- src/store/chart/chart.slice.spec.ts | 79 +- src/store/global/global.slice.spec.ts | 54 +- src/store/index.ts | 12 + src/store/modal/modal.slice.spec.ts | 31 +- src/store/profile/profile.action.spec.ts | 16 +- src/store/profile/profile.reducer.spec.ts | 15 +- src/store/profile/profile.reducer.ts | 28 +- .../profileEcogesture.action.spec.ts | 2 +- .../profileType/profileType.slice.spec.ts | 10 +- tests/__mocks__/fluidStatusData.mock.ts | 88 +- tests/__mocks__/profileData.mock.ts | 1 + tests/__mocks__/store.ts | 351 -- tests/__mocks__/store/analysis.state.mock.ts | 7 + tests/__mocks__/store/challenge.state.mock.ts | 7 + tests/__mocks__/store/chart.state.mock.ts | 16 + .../global.state.mock.ts} | 224 +- tests/__mocks__/store/index.ts | 8 + tests/__mocks__/store/modal.state.mock.ts | 17 + tests/__mocks__/store/profile.state.mock.ts | 46 + .../__mocks__/store/profileType.state.mock.ts | 39 + tests/__mocks__/store/store.ts | 42 + 117 files changed, 9101 insertions(+), 10291 deletions(-) delete mode 100644 tests/__mocks__/store.ts create mode 100644 tests/__mocks__/store/analysis.state.mock.ts create mode 100644 tests/__mocks__/store/challenge.state.mock.ts create mode 100644 tests/__mocks__/store/chart.state.mock.ts rename tests/__mocks__/{globalStateData.mock.ts => store/global.state.mock.ts} (88%) create mode 100644 tests/__mocks__/store/index.ts create mode 100644 tests/__mocks__/store/modal.state.mock.ts create mode 100644 tests/__mocks__/store/profile.state.mock.ts create mode 100644 tests/__mocks__/store/profileType.state.mock.ts create mode 100644 tests/__mocks__/store/store.ts diff --git a/src/components/Action/ActionBegin.spec.tsx b/src/components/Action/ActionBegin.spec.tsx index 6ea2ba74b..a1a87fe0f 100644 --- a/src/components/Action/ActionBegin.spec.tsx +++ b/src/components/Action/ActionBegin.spec.tsx @@ -3,14 +3,16 @@ 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 { AllEcogestureData, defaultEcogestureData, } from '../../../tests/__mocks__/actionData.mock' import { mockedEcogesturesData } from '../../../tests/__mocks__/ecogesturesData.mock' -import { globalStateData } from '../../../tests/__mocks__/globalStateData.mock' -import { profileData } from '../../../tests/__mocks__/profileData.mock' +import { + createMockEcolyoStore, + mockGlobalState, + mockProfileState, +} from '../../../tests/__mocks__/store' import { waitForComponentToPaint } from '../../../tests/__mocks__/testUtils' import { userChallengeData } from '../../../tests/__mocks__/userChallengeData.mock' import ActionBegin from './ActionBegin' @@ -44,16 +46,12 @@ jest.mock('utils/utils', () => { }), } }) -const mockStore = configureStore([]) describe('ActionBegin component', () => { it('should render correctly', async () => { - const store = mockStore({ - ecolyo: { - challenge: userChallengeData[1], - global: { ...globalStateData, fluidTypes: [0, 1, 2] }, - profile: profileData, - }, + const store = createMockEcolyoStore({ + global: { ...mockGlobalState, fluidTypes: [0, 1, 2] }, + profile: mockProfileState, }) mockImportIconById.mockReturnValue('') @@ -76,12 +74,9 @@ describe('ActionBegin component', () => { AllEcogestureData[2], ]) mockImportIconById.mockReturnValue('') - const store = mockStore({ - ecolyo: { - challenge: userChallengeData[1], - global: { ...globalStateData, fluidTypes: [0, 1, 2] }, - profile: { ...profileData, isProfileTypeCompleted: true }, - }, + const store = createMockEcolyoStore({ + global: { ...mockGlobalState, fluidTypes: [0, 1, 2] }, + profile: { ...mockProfileState, isProfileTypeCompleted: true }, }) const wrapper = mount( <Provider store={store}> @@ -96,12 +91,9 @@ describe('ActionBegin component', () => { expect(wrapper.find('.action-title').text()).toBe('Coup de vent') }) it('should render chosen action ', async () => { - const store = mockStore({ - ecolyo: { - challenge: userChallengeData[1], - global: { ...globalStateData, fluidTypes: [0, 1, 2] }, - profile: profileData, - }, + const store = createMockEcolyoStore({ + global: { ...mockGlobalState, fluidTypes: [0, 1, 2] }, + profile: mockProfileState, }) mockImportIconById.mockReturnValue('') @@ -118,12 +110,9 @@ describe('ActionBegin component', () => { expect(wrapper.find(ActionBegin).exists()).toBeTruthy() }) it('should open launch Modal ', async () => { - const store = mockStore({ - ecolyo: { - challenge: userChallengeData[1], - global: { ...globalStateData, fluidTypes: [0, 1, 2] }, - profile: profileData, - }, + const store = createMockEcolyoStore({ + global: { ...mockGlobalState, fluidTypes: [0, 1, 2] }, + profile: mockProfileState, }) mockImportIconById.mockReturnValue('') @@ -142,12 +131,9 @@ describe('ActionBegin component', () => { expect(wrapper.find(ActionModal).prop('open')).toBeTruthy() }) it('should go to the list ', async () => { - const store = mockStore({ - ecolyo: { - challenge: userChallengeData[1], - global: { ...globalStateData, fluidTypes: [0, 1, 2] }, - profile: profileData, - }, + const store = createMockEcolyoStore({ + global: { ...mockGlobalState, fluidTypes: [0, 1, 2] }, + profile: mockProfileState, }) mockImportIconById.mockReturnValue('') diff --git a/src/components/Action/ActionCard.spec.tsx b/src/components/Action/ActionCard.spec.tsx index 2ae077fe9..cfd33fede 100644 --- a/src/components/Action/ActionCard.spec.tsx +++ b/src/components/Action/ActionCard.spec.tsx @@ -5,16 +5,12 @@ 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 { createMockEcolyoStore } from '../../../tests/__mocks__/store' import { waitForComponentToPaint } from '../../../tests/__mocks__/testUtils' import { userChallengeData } from '../../../tests/__mocks__/userChallengeData.mock' import ActionCard from './ActionCard' -const mockStore = configureStore([]) - jest.mock('cozy-ui/transpiled/react/I18n', () => { return { useI18n: jest.fn(() => { @@ -34,14 +30,12 @@ jest.mock('utils/utils', () => { } }) describe('ActionCard component', () => { + const store = createMockEcolyoStore({ + challenge: { + currentChallenge: userChallengeData[1], + }, + }) it('should be rendered correctly', async () => { - const store = mockStore({ - ecolyo: { - challenge: userChallengeData[1], - global: { ...globalStateData, fluidTypes: [0, 1, 2] }, - profile: profileData, - }, - }) const wrapper = mount( <Provider store={store}> <ActionCard @@ -55,13 +49,6 @@ describe('ActionCard component', () => { expect(toJson(wrapper)).toMatchSnapshot() }) it('should open modal', () => { - const store = mockStore({ - ecolyo: { - challenge: userChallengeData[1], - global: { ...globalStateData, fluidTypes: [0, 1, 2] }, - profile: profileData, - }, - }) const wrapper = mount( <Provider store={store}> <ActionCard diff --git a/src/components/Action/ActionChoose.spec.tsx b/src/components/Action/ActionChoose.spec.tsx index 90c43e9aa..147ac73cb 100644 --- a/src/components/Action/ActionChoose.spec.tsx +++ b/src/components/Action/ActionChoose.spec.tsx @@ -2,9 +2,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 { + createMockEcolyoStore, + mockGlobalState, + mockProfileState, +} from '../../../tests/__mocks__/store' import { waitForComponentToPaint } from '../../../tests/__mocks__/testUtils' import { userChallengeData } from '../../../tests/__mocks__/userChallengeData.mock' import ActionBegin from './ActionBegin' @@ -28,17 +30,13 @@ jest.mock('services/ecogesture.service', () => { } }) }) -const mockStore = configureStore([]) describe('ActionChoose component', () => { + const store = createMockEcolyoStore({ + global: { ...mockGlobalState, fluidTypes: [0, 1, 2] }, + profile: mockProfileState, + }) it('should render correctly', async () => { - const store = mockStore({ - ecolyo: { - challenge: userChallengeData[1], - global: { ...globalStateData, fluidTypes: [0, 1, 2] }, - profile: profileData, - }, - }) const wrapper = mount( <Provider store={store}> <ActionChoose userChallenge={userChallengeData[1]} /> @@ -48,13 +46,6 @@ describe('ActionChoose component', () => { expect(toJson(wrapper)).toMatchSnapshot() }) it('should render ActionBegin component', async () => { - const store = mockStore({ - ecolyo: { - challenge: userChallengeData[1], - global: { ...globalStateData, fluidTypes: [0, 1, 2] }, - profile: profileData, - }, - }) const wrapper = mount( <Provider store={store}> <ActionChoose userChallenge={userChallengeData[1]} /> diff --git a/src/components/Action/ActionDone.spec.tsx b/src/components/Action/ActionDone.spec.tsx index 42092cfa7..d0ef0648a 100644 --- a/src/components/Action/ActionDone.spec.tsx +++ b/src/components/Action/ActionDone.spec.tsx @@ -4,16 +4,13 @@ import toJson from 'enzyme-to-json' import React from 'react' import * as reactRedux from 'react-redux' import { Provider } from 'react-redux' -import configureStore from 'redux-mock-store' 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 { createMockEcolyoStore } from '../../../tests/__mocks__/store' import { waitForComponentToPaint } from '../../../tests/__mocks__/testUtils' import { userChallengeData } from '../../../tests/__mocks__/userChallengeData.mock' import ActionDone from './ActionDone' -const mockStore = configureStore([]) jest.mock('cozy-ui/transpiled/react/I18n', () => { return { useI18n: jest.fn(() => { @@ -42,14 +39,8 @@ jest.mock('services/challenge.service', () => { }) describe('ActionDone component', () => { + const store = createMockEcolyoStore() it('should be rendered correctly', async () => { - const store = mockStore({ - ecolyo: { - challenge: userChallengeData[1], - global: { ...globalStateData, fluidTypes: [0, 1, 2] }, - profile: profileData, - }, - }) const wrapper = mount( <Provider store={store}> <ActionDone currentChallenge={userChallengeData[1]} /> @@ -64,13 +55,6 @@ describe('ActionDone component', () => { challengeActions, 'updateUserChallengeList' ) - const store = mockStore({ - ecolyo: { - challenge: userChallengeData[1], - global: { ...globalStateData, fluidTypes: [0, 1, 2] }, - profile: profileData, - }, - }) mockupdateUserChallenge.mockResolvedValueOnce(userChallengeData[1]) useDispatchSpy.mockReturnValue(jest.fn()) const wrapper = mount( diff --git a/src/components/Action/ActionList.spec.tsx b/src/components/Action/ActionList.spec.tsx index 85516527b..358a734bb 100644 --- a/src/components/Action/ActionList.spec.tsx +++ b/src/components/Action/ActionList.spec.tsx @@ -1,16 +1,15 @@ import { mount } from 'enzyme' 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 { userChallengeData } from '../../../tests/__mocks__/userChallengeData.mock' +import { + createMockEcolyoStore, + mockChallengeState, + mockProfileState, +} from '../../../tests/__mocks__/store' import ActionCard from './ActionCard' import ActionList from './ActionList' -const mockStore = configureStore([]) - const mockgetCustomActions = jest.fn() const mockgetDefaultActions = jest.fn() @@ -36,12 +35,10 @@ jest.mock('cozy-ui/transpiled/react/I18n', () => { describe('ActionList component', () => { it('should be rendered correctly', () => { mockgetDefaultActions.mockResolvedValueOnce(defaultEcogestureData) - const store = mockStore({ - ecolyo: { - challenge: userChallengeData[1], - global: { ...globalStateData, fluidTypes: [0, 1, 2] }, - profile: profileData, - }, + const store = createMockEcolyoStore({ + challenge: { ...mockChallengeState }, + global: { fluidTypes: [0, 1, 2] }, + profile: mockProfileState, }) const wrapper = mount( <Provider store={store}> diff --git a/src/components/Action/ActionModal.spec.tsx b/src/components/Action/ActionModal.spec.tsx index 23002a23f..63083f90b 100644 --- a/src/components/Action/ActionModal.spec.tsx +++ b/src/components/Action/ActionModal.spec.tsx @@ -4,12 +4,10 @@ import toJson from 'enzyme-to-json' import React from 'react' import * as reactRedux from 'react-redux' import { Provider } from 'react-redux' -import configureStore from 'redux-mock-store' import UsageEventService from 'services/usageEvent.service' 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 { createMockEcolyoStore } from '../../../tests/__mocks__/store' import { waitForComponentToPaint } from '../../../tests/__mocks__/testUtils' import { userChallengeData } from '../../../tests/__mocks__/userChallengeData.mock' import ActionModal from './ActionModal' @@ -34,17 +32,10 @@ jest.mock('services/challenge.service', () => { jest.mock('services/usageEvent.service') const mockAddEvent = jest.fn() UsageEventService.addEvent = mockAddEvent -const mockStore = configureStore([]) describe('ActionModal component', () => { + const store = createMockEcolyoStore() it('should render correctly', async () => { - const store = mockStore({ - ecolyo: { - challenge: userChallengeData[1], - global: { ...globalStateData, fluidTypes: [0, 1, 2] }, - profile: profileData, - }, - }) const wrapper = mount( <Provider store={store}> <ActionModal @@ -65,13 +56,6 @@ describe('ActionModal component', () => { 'updateUserChallengeList' ) - const store = mockStore({ - ecolyo: { - challenge: userChallengeData[1], - global: { ...globalStateData, fluidTypes: [0, 1, 2] }, - profile: profileData, - }, - }) mockupdateUserChallenge.mockResolvedValueOnce(userChallengeData[1]) useDispatchSpy.mockReturnValue(jest.fn()) diff --git a/src/components/Action/ActionOnGoing.spec.tsx b/src/components/Action/ActionOnGoing.spec.tsx index 3929b7471..06a4e5d78 100644 --- a/src/components/Action/ActionOnGoing.spec.tsx +++ b/src/components/Action/ActionOnGoing.spec.tsx @@ -7,12 +7,9 @@ import { DateTime } from 'luxon' import { UserAction } from 'models' 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 { createMockEcolyoStore } from '../../../tests/__mocks__/store' import { waitForComponentToPaint } from '../../../tests/__mocks__/testUtils' -import { userChallengeData } from '../../../tests/__mocks__/userChallengeData.mock' import ActionOnGoing from './ActionOnGoing' jest.mock('cozy-ui/transpiled/react/I18n', () => { @@ -32,10 +29,11 @@ jest.mock('utils/utils', () => { }), } }) -const mockStore = configureStore([]) describe('ActionOnGoing component', () => { + const store = createMockEcolyoStore() const userAction: UserAction = { + // TODO if ecogesture is null snapshot test is useless ecogesture: null, startDate: DateTime.local(2020, 1, 1) .setZone('utc', { @@ -45,14 +43,6 @@ describe('ActionOnGoing component', () => { state: UserActionState.ONGOING, } it('should render correctly', async () => { - const store = mockStore({ - ecolyo: { - challenge: userChallengeData[1], - global: { ...globalStateData, fluidTypes: [0, 1, 2] }, - profile: profileData, - }, - }) - const wrapper = mount( <Provider store={store}> <ActionOnGoing userAction={userAction} /> @@ -67,13 +57,7 @@ describe('ActionOnGoing component', () => { startDate: null, state: UserActionState.ONGOING, } - const store = mockStore({ - ecolyo: { - challenge: userChallengeData[1], - global: { ...globalStateData, fluidTypes: [0, 1, 2] }, - profile: profileData, - }, - }) + const wrapper = mount( <Provider store={store}> <ActionOnGoing userAction={userAction1} /> diff --git a/src/components/Action/ActionView.spec.tsx b/src/components/Action/ActionView.spec.tsx index 70d6e9e24..710e0fbd3 100644 --- a/src/components/Action/ActionView.spec.tsx +++ b/src/components/Action/ActionView.spec.tsx @@ -4,9 +4,7 @@ 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 { createMockEcolyoStore } from '../../../tests/__mocks__/store' import { waitForComponentToPaint } from '../../../tests/__mocks__/testUtils' import { userChallengeData } from '../../../tests/__mocks__/userChallengeData.mock' import ActionChoose from './ActionChoose' @@ -32,21 +30,17 @@ jest.mock('components/Header/Header', () => 'mock-header') jest.mock('components/Content/Content', () => 'mock-content') jest.mock('components/Action/ActionBegin', () => 'mock-action-begin') -const mockStore = configureStore([]) describe('ActionView component', () => { it('should render ActionChoose component', async () => { - const userChallenge = { - ...userChallengeData[1], - action: { - ...userChallengeData[1].action, - state: UserActionState.UNSTARTED, - }, - } - const store = mockStore({ - ecolyo: { - challenge: { currentChallenge: userChallenge }, - global: { ...globalStateData, fluidTypes: [0, 1, 2] }, - profile: profileData, + const store = createMockEcolyoStore({ + challenge: { + currentChallenge: { + ...userChallengeData[1], + action: { + ...userChallengeData[1].action, + state: UserActionState.UNSTARTED, + }, + }, }, }) const wrapper = mount( @@ -59,18 +53,15 @@ describe('ActionView component', () => { expect(toJson(wrapper)).toMatchSnapshot() }) it('should render ActionDone component', () => { - const userChallenge = { - ...userChallengeData[1], - action: { - ...userChallengeData[1].action, - state: UserActionState.NOTIFICATION, - }, - } - const store = mockStore({ - ecolyo: { - challenge: { currentChallenge: userChallenge }, - global: { ...globalStateData, fluidTypes: [0, 1, 2] }, - profile: profileData, + const store = createMockEcolyoStore({ + challenge: { + currentChallenge: { + ...userChallengeData[1], + action: { + ...userChallengeData[1].action, + state: UserActionState.NOTIFICATION, + }, + }, }, }) const wrapper = mount( @@ -81,18 +72,15 @@ describe('ActionView component', () => { expect(wrapper.find(ActionDone).exists()).toBeTruthy() }) it('should render ActionOnGoing component', () => { - const userChallenge = { - ...userChallengeData[1], - action: { - ...userChallengeData[1].action, - state: UserActionState.ONGOING, - }, - } - const store = mockStore({ - ecolyo: { - challenge: { currentChallenge: userChallenge }, - global: { ...globalStateData, fluidTypes: [0, 1, 2] }, - profile: profileData, + const store = createMockEcolyoStore({ + challenge: { + currentChallenge: { + ...userChallengeData[1], + action: { + ...userChallengeData[1].action, + state: UserActionState.ONGOING, + }, + }, }, }) const wrapper = mount( diff --git a/src/components/Analysis/AnalysisView.spec.tsx b/src/components/Analysis/AnalysisView.spec.tsx index 253e7a9f9..f676bedb7 100644 --- a/src/components/Analysis/AnalysisView.spec.tsx +++ b/src/components/Analysis/AnalysisView.spec.tsx @@ -5,12 +5,11 @@ import * as reactRedux from 'react-redux' import { Provider } from 'react-redux' import * as globalActions from 'store/global/global.slice' import * as profileActions from 'store/profile/profile.actions' -import { globalStateData } from '../../../tests/__mocks__/globalStateData.mock' -import { profileData } from '../../../tests/__mocks__/profileData.mock' import { createMockEcolyoStore, mockAnalysisState, - mockInitialChartState, + mockChartState, + mockProfileState, } from '../../../tests/__mocks__/store' jest.mock('cozy-ui/transpiled/react/I18n', () => { @@ -54,12 +53,6 @@ describe('AnalysisView component', () => { }) it('should be rendered correctly', () => { - useSelectorSpy.mockReturnValue({ - global: globalStateData, - profile: profileData, - chart: mockInitialChartState, - analysis: mockAnalysisState, - }) useDispatchSpy.mockReturnValue(jest.fn()) const wrapper = mount( <Provider store={store}> @@ -73,17 +66,11 @@ describe('AnalysisView component', () => { }) it('should update profile and toggle analysis notification to false if notification is true', () => { - useSelectorSpy.mockReturnValue({ - global: { - ...globalStateData, - analysisNotification: true, - }, - profile: { - ...profileData, - haveSeenLastAnalysis: false, - }, - chart: mockInitialChartState, + const store = createMockEcolyoStore({ analysis: mockAnalysisState, + chart: mockChartState, + global: { analysisNotification: true }, + profile: { ...mockProfileState, haveSeenLastAnalysis: true }, }) useDispatchSpy.mockReturnValue(jest.fn()) const wrapper = mount( diff --git a/src/components/Analysis/ElecHalfHourMonthlyAnalysis/ElecHalfHourChart.spec.tsx b/src/components/Analysis/ElecHalfHourMonthlyAnalysis/ElecHalfHourChart.spec.tsx index f9700e057..44006e40b 100644 --- a/src/components/Analysis/ElecHalfHourMonthlyAnalysis/ElecHalfHourChart.spec.tsx +++ b/src/components/Analysis/ElecHalfHourMonthlyAnalysis/ElecHalfHourChart.spec.tsx @@ -2,11 +2,9 @@ import { mount } from 'enzyme' import toJson from 'enzyme-to-json' import { DateTime } from 'luxon' import React from 'react' -import * as reactRedux from 'react-redux' import { Provider } from 'react-redux' -import configureStore from 'redux-mock-store' import { dataLoadArray } from '../../../../tests/__mocks__/chartData.mock' -import { globalStateData } from '../../../../tests/__mocks__/globalStateData.mock' +import { createMockEcolyoStore } from '../../../../tests/__mocks__/store' import ElecHalfHourChart from './ElecHalfHourChart' jest.mock('cozy-ui/transpiled/react/I18n', () => { @@ -18,29 +16,23 @@ jest.mock('cozy-ui/transpiled/react/I18n', () => { }), } }) -const mockcompareStepDate = jest.fn() jest.mock('services/dateChart.service', () => { return jest.fn(() => { return { - compareStepDate: mockcompareStepDate, + compareStepDate: jest.fn(), } }) }) -const mockStore = configureStore([]) -const mockUseSelector = jest.spyOn(reactRedux, 'useSelector') describe('ElecHalfHourChart component', () => { - it('should be rendered correctly', () => { - const store = mockStore({ - ecolyo: { - global: globalStateData, - }, - }) - mockUseSelector.mockReturnValue( - DateTime.fromISO('2021-07-01T00:00:00.000Z', { + const store = createMockEcolyoStore({ + chart: { + selectedDate: DateTime.fromISO('2021-07-01T00:00:00.000Z', { zone: 'utc', - }) - ) + }), + }, + }) + it('should be rendered correctly', () => { const wrapper = mount( <Provider store={store}> <ElecHalfHourChart dataLoad={dataLoadArray} isWeekend={true} /> @@ -49,16 +41,6 @@ describe('ElecHalfHourChart component', () => { expect(toJson(wrapper)).toMatchSnapshot() }) it('should render week data', () => { - const store = mockStore({ - ecolyo: { - global: globalStateData, - }, - }) - mockUseSelector.mockReturnValue( - DateTime.fromISO('2021-07-01T00:00:00.000Z', { - zone: 'utc', - }) - ) const wrapper = mount( <Provider store={store}> <ElecHalfHourChart dataLoad={dataLoadArray} isWeekend={false} /> diff --git a/src/components/Analysis/ElecHalfHourMonthlyAnalysis/ElecHalfHourMonthlyAnalysis.spec.tsx b/src/components/Analysis/ElecHalfHourMonthlyAnalysis/ElecHalfHourMonthlyAnalysis.spec.tsx index 194618aba..cf7a593ee 100644 --- a/src/components/Analysis/ElecHalfHourMonthlyAnalysis/ElecHalfHourMonthlyAnalysis.spec.tsx +++ b/src/components/Analysis/ElecHalfHourMonthlyAnalysis/ElecHalfHourMonthlyAnalysis.spec.tsx @@ -4,13 +4,12 @@ import toJson from 'enzyme-to-json' import { PerformanceIndicator } from 'models' import React from 'react' import { Provider } from 'react-redux' -import configureStore from 'redux-mock-store' import { mockDataLoadEnedisAnalysis, mockEnedisMonthlyAnalysisArray, } from '../../../../tests/__mocks__/enedisMonthlyAnalysisData.mock' import { allLastFluidPrices } from '../../../../tests/__mocks__/fluidPrice.mock' -import { mockAnalysisState } from '../../../../tests/__mocks__/store' +import { createMockEcolyoStore } from '../../../../tests/__mocks__/store' import { waitForComponentToPaint } from '../../../../tests/__mocks__/testUtils' import ElecHalfHourMonthlyAnalysis from './ElecHalfHourMonthlyAnalysis' @@ -69,19 +68,13 @@ jest.mock('services/fluidsPrices.service', () => { }) }) -const mockStore = configureStore([]) -const store = mockStore({ - ecolyo: { - analysis: mockAnalysisState, - }, -}) - describe('ElecHalfHourMonthlyAnalysis component', () => { beforeEach(() => { mockCheckDoctypeEntries.mockClear() mockGetEnedisMonthlyAnalysisByDate.mockClear() mockAggregateValuesToDataLoad.mockClear() }) + const store = createMockEcolyoStore() it('should be rendered correctly when isHalfHourActivated is false', async () => { mockCheckDoctypeEntries.mockResolvedValueOnce(false) diff --git a/src/components/Analysis/ElecHalfHourMonthlyAnalysis/__snapshots__/ElecHalfHourChart.spec.tsx.snap b/src/components/Analysis/ElecHalfHourMonthlyAnalysis/__snapshots__/ElecHalfHourChart.spec.tsx.snap index d6dfbc1e3..74cf7f236 100644 --- a/src/components/Analysis/ElecHalfHourMonthlyAnalysis/__snapshots__/ElecHalfHourChart.spec.tsx.snap +++ b/src/components/Analysis/ElecHalfHourMonthlyAnalysis/__snapshots__/ElecHalfHourChart.spec.tsx.snap @@ -401,6 +401,7 @@ exports[`ElecHalfHourChart component should be rendered correctly 1`] = ` } displayAllDays={false} index={0} + selectedDate={"2021-07-01T00:00:00.000Z"} timeStep={10} width={355.9090909090909} > @@ -435,6 +436,7 @@ exports[`ElecHalfHourChart component should be rendered correctly 1`] = ` } displayAllDays={false} index={1} + selectedDate={"2021-07-01T00:00:00.000Z"} timeStep={10} width={355.9090909090909} /> @@ -456,6 +458,7 @@ exports[`ElecHalfHourChart component should be rendered correctly 1`] = ` } displayAllDays={false} index={2} + selectedDate={"2021-07-01T00:00:00.000Z"} timeStep={10} width={355.9090909090909} /> @@ -477,6 +480,7 @@ exports[`ElecHalfHourChart component should be rendered correctly 1`] = ` } displayAllDays={false} index={3} + selectedDate={"2021-07-01T00:00:00.000Z"} timeStep={10} width={355.9090909090909} /> diff --git a/src/components/Analysis/MaxConsumptionCard/MaxConsumptionCard.spec.tsx b/src/components/Analysis/MaxConsumptionCard/MaxConsumptionCard.spec.tsx index c8dc1953a..d6cfe69bb 100644 --- a/src/components/Analysis/MaxConsumptionCard/MaxConsumptionCard.spec.tsx +++ b/src/components/Analysis/MaxConsumptionCard/MaxConsumptionCard.spec.tsx @@ -3,10 +3,9 @@ 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 { graphData } from '../../../../tests/__mocks__/chartData.mock' import mockClient from '../../../../tests/__mocks__/client' -import { mockAnalysisState } from '../../../../tests/__mocks__/store' +import { createMockEcolyoStore } from '../../../../tests/__mocks__/store' import { waitForComponentToPaint } from '../../../../tests/__mocks__/testUtils' import MaxConsumptionCard from './MaxConsumptionCard' @@ -40,16 +39,9 @@ jest.mock('cozy-client', () => { jest.mock('components/Charts/BarChart', () => 'mock-BarChart') -const mockStore = configureStore([]) - describe('MaxConsumptionCard component', () => { + const store = createMockEcolyoStore() it('should be rendered correctly', async () => { - const store = mockStore({ - ecolyo: { - analysis: mockAnalysisState, - }, - }) - const wrapper = mount( <Provider store={store}> <MaxConsumptionCard @@ -62,11 +54,6 @@ describe('MaxConsumptionCard component', () => { expect(wrapper.find('mock-BarChart').exists()).toBeTruthy() }) it('should be rendered with one fluid and not display arrows', async () => { - const store = mockStore({ - ecolyo: { - analysis: mockAnalysisState, - }, - }) const wrapper = mount( <Provider store={store}> <MaxConsumptionCard fluidsWithData={[FluidType.ELECTRICITY]} /> @@ -76,11 +63,6 @@ describe('MaxConsumptionCard component', () => { expect(wrapper.find('.arrow').exists()).toBeFalsy() }) it('should be rendered with several fluids and click navigate between fluid', async () => { - const store = mockStore({ - ecolyo: { - analysis: mockAnalysisState, - }, - }) const wrapper = mount( <Provider store={store}> <MaxConsumptionCard diff --git a/src/components/Analysis/MonthlyAnalysis.spec.tsx b/src/components/Analysis/MonthlyAnalysis.spec.tsx index f56f98490..eee85b61c 100644 --- a/src/components/Analysis/MonthlyAnalysis.spec.tsx +++ b/src/components/Analysis/MonthlyAnalysis.spec.tsx @@ -5,9 +5,8 @@ import { PerformanceIndicator } from 'models' import React from 'react' import { Provider } from 'react-redux' import { BrowserRouter } from 'react-router-dom' -import configureStore from 'redux-mock-store' import mockClient from '../../../tests/__mocks__/client' -import { mockAnalysisState } from '../../../tests/__mocks__/store' +import { createMockEcolyoStore } from '../../../tests/__mocks__/store' import { waitForComponentToPaint } from '../../../tests/__mocks__/testUtils' jest.mock('cozy-ui/transpiled/react/I18n', () => { @@ -58,15 +57,9 @@ jest.mock( window.scrollTo = jest.fn() -const mockStore = configureStore([]) - describe('MonthlyAnalysis component', () => { it('should be rendered correctly', async () => { - const store = mockStore({ - ecolyo: { - analysis: mockAnalysisState, - }, - }) + const store = createMockEcolyoStore() const wrapper = mount( <BrowserRouter> <Provider store={store}> diff --git a/src/components/Analysis/ProfileComparator/ProfileComparator.spec.tsx b/src/components/Analysis/ProfileComparator/ProfileComparator.spec.tsx index b07d92406..d67215220 100644 --- a/src/components/Analysis/ProfileComparator/ProfileComparator.spec.tsx +++ b/src/components/Analysis/ProfileComparator/ProfileComparator.spec.tsx @@ -6,14 +6,15 @@ import { mount } from 'enzyme' import { PerformanceIndicator } from 'models' 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 { mockMonthlyForecastJanuaryTestProfile1, profileTypeData, } from '../../../../tests/__mocks__/profileType.mock' -import { mockAnalysisState } from '../../../../tests/__mocks__/store' +import { + createMockEcolyoStore, + mockAnalysisState, +} from '../../../../tests/__mocks__/store' import { waitForComponentToPaint } from '../../../../tests/__mocks__/testUtils' import ProfileComparator from './ProfileComparator' @@ -57,14 +58,9 @@ jest.mock( ) const modifiedProfile = { ...profileData, isProfileTypeCompleted: true } -const mockStore = configureStore([]) -const store = mockStore({ - ecolyo: { - profile: modifiedProfile, - profileType: profileTypeData, - global: globalStateData, - analysis: mockAnalysisState, - }, +const store = createMockEcolyoStore({ + profile: modifiedProfile, + analysis: mockAnalysisState, }) const allFluids = [FluidType.ELECTRICITY, FluidType.GAS, FluidType.MULTIFLUID] @@ -163,17 +159,15 @@ describe('AnalysisConsumption component', () => { }) it('should be rendered correctly with all fluids connected', async () => { - const store = mockStore({ - ecolyo: { - profile: modifiedProfile, - profileType: profileTypeData, - global: { - fluidTypes: [FluidType.ELECTRICITY, FluidType.WATER, FluidType.GAS], - }, - analysis: { - ...mockAnalysisState, - analysisMonth: profileData.monthlyAnalysisDate, - }, + const store = createMockEcolyoStore({ + profile: modifiedProfile, + profileType: profileTypeData, + global: { + fluidTypes: [FluidType.ELECTRICITY, FluidType.WATER, FluidType.GAS], + }, + analysis: { + ...mockAnalysisState, + analysisMonth: profileData.monthlyAnalysisDate, }, }) mockgetMonthlyForecast.mockReturnValue( @@ -198,12 +192,10 @@ describe('AnalysisConsumption component', () => { }) it('should be rendered correctly with 2 fluids connected', async () => { - const store = mockStore({ - ecolyo: { - profile: modifiedProfile, - global: { fluidTypes: [FluidType.ELECTRICITY, FluidType.WATER] }, - analysis: { analysisMonth: profileData.monthlyAnalysisDate }, - }, + const store = createMockEcolyoStore({ + profile: modifiedProfile, + global: { fluidTypes: [FluidType.ELECTRICITY, FluidType.WATER] }, + analysis: { analysisMonth: profileData.monthlyAnalysisDate }, }) mockgetMonthlyForecast.mockReturnValue( mockMonthlyForecastJanuaryTestProfile1 diff --git a/src/components/Analysis/TotalAnalysisChart/TotalAnalysisChart.spec.tsx b/src/components/Analysis/TotalAnalysisChart/TotalAnalysisChart.spec.tsx index 00cd51eee..bfef8f1ca 100644 --- a/src/components/Analysis/TotalAnalysisChart/TotalAnalysisChart.spec.tsx +++ b/src/components/Analysis/TotalAnalysisChart/TotalAnalysisChart.spec.tsx @@ -6,9 +6,8 @@ import { DateTime } from 'luxon' import { Datachart } from 'models' import React from 'react' 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 { createMockEcolyoStore } from '../../../../tests/__mocks__/store' import { waitForComponentToPaint } from '../../../../tests/__mocks__/testUtils' import TotalAnalysisChart from './TotalAnalysisChart' @@ -36,13 +35,8 @@ jest.mock( () => 'mock-estimatedmodal' ) -const mockStore = configureStore([]) -const store = mockStore({ - ecolyo: { - analysis: mockAnalysisState, - }, -}) describe('TotalAnalysisChart component', () => { + const store = createMockEcolyoStore() it('should be rendered correctly', async () => { const wrapper = mount( <Provider store={store}> diff --git a/src/components/Challenge/ChallengeCardLast.spec.tsx b/src/components/Challenge/ChallengeCardLast.spec.tsx index be445a7a2..2f24464a8 100644 --- a/src/components/Challenge/ChallengeCardLast.spec.tsx +++ b/src/components/Challenge/ChallengeCardLast.spec.tsx @@ -1,10 +1,6 @@ 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 @@ -20,33 +16,16 @@ jest.mock('cozy-ui/transpiled/react/I18n', () => { } }) -const mockStore = configureStore([]) - describe('ChallengeCardLast component', () => { - const store = mockStore({ - ecolyo: { - global: globalStateData, - }, - }) - it('should be rendered correctly', async () => { - const wrapper = mount( - <Provider store={store}> - <ChallengeCardLast /> - </Provider> - ) - await waitForComponentToPaint(wrapper) + const wrapper = mount(<ChallengeCardLast />) expect(toJson(wrapper)).toMatchSnapshot() }) it('should open SAU new idea link', () => { global.open = jest.fn() - const wrapper = mount( - <Provider store={store}> - <ChallengeCardLast /> - </Provider> - ) + const wrapper = mount(<ChallengeCardLast />) wrapper.find('.btn_lastCard').first().simulate('click') expect(window.open).toBeCalledTimes(1) expect(global.open).toHaveBeenCalledWith( diff --git a/src/components/Challenge/ChallengeCardUnlocked.spec.tsx b/src/components/Challenge/ChallengeCardUnlocked.spec.tsx index d705c58d0..470b80932 100644 --- a/src/components/Challenge/ChallengeCardUnlocked.spec.tsx +++ b/src/components/Challenge/ChallengeCardUnlocked.spec.tsx @@ -3,9 +3,11 @@ import { FluidType } from 'enum/fluid.enum' import { mount } from 'enzyme' import React from 'react' import { Provider } from 'react-redux' -import configureStore from 'redux-mock-store' import UsageEventService from 'services/usageEvent.service' -import { globalStateData } from '../../../tests/__mocks__/globalStateData.mock' +import { + createMockEcolyoStore, + mockGlobalState, +} from '../../../tests/__mocks__/store' import { userChallengeData } from '../../../tests/__mocks__/userChallengeData.mock' import ChallengeCardUnlocked from './ChallengeCardUnlocked' import ChallengeNoFluidModal from './ChallengeNoFluidModal' @@ -39,15 +41,9 @@ jest.mock('services/usageEvent.service') const mockAddEvent = jest.fn() UsageEventService.addEvent = mockAddEvent -const mockStore = configureStore([]) - describe('ChallengeCardUnlocked component', () => { + const store = createMockEcolyoStore() it('should be rendered correctly', () => { - const store = mockStore({ - ecolyo: { - global: globalStateData, - }, - }) const wrapper = mount( <Provider store={store}> <ChallengeCardUnlocked userChallenge={userChallengeData[0]} /> @@ -62,11 +58,6 @@ describe('ChallengeCardUnlocked component', () => { }) it('should display ChallengeNoFluidModal when launching challenge without configured fluid', () => { - const store = mockStore({ - ecolyo: { - global: globalStateData, - }, - }) const wrapper = mount( <Provider store={store}> <ChallengeCardUnlocked userChallenge={userChallengeData[0]} /> @@ -78,14 +69,10 @@ describe('ChallengeCardUnlocked component', () => { }) it('should not display ChallengeNoFluidModal and update userChallenge when launching challenge with configured fluid', () => { - const updateGlobalStoreData = { - ...globalStateData, - fluidTypes: [FluidType.ELECTRICITY], - fluidStatus: [{ status: 200 }], - } - const store = mockStore({ - ecolyo: { - global: updateGlobalStoreData, + const store = createMockEcolyoStore({ + global: { + fluidTypes: [FluidType.ELECTRICITY], + fluidStatus: [{ ...mockGlobalState.fluidStatus[0], status: 200 }], }, }) const wrapper = mount( diff --git a/src/components/Challenge/ChallengeCardUnlocked.tsx b/src/components/Challenge/ChallengeCardUnlocked.tsx index 7d65fbab8..e0e70808e 100644 --- a/src/components/Challenge/ChallengeCardUnlocked.tsx +++ b/src/components/Challenge/ChallengeCardUnlocked.tsx @@ -21,14 +21,13 @@ const ChallengeCardUnlocked = ({ }: { userChallenge: UserChallenge }) => { + const { t } = useI18n() const client: Client = useClient() const dispatch = useDispatch<Dispatch<AppActionsTypes>>() - const { t } = useI18n() - - const [openNoFluidModal, setopenNoFluidModal] = useState(false) const { fluidTypes, fluidStatus } = useSelector( (state: AppStore) => state.ecolyo.global ) + const [openNoFluidModal, setopenNoFluidModal] = useState(false) const [challengeIcon, setChallengeIcon] = useState(defaultIcon) let statusRequirementOk = false diff --git a/src/components/Challenge/ChallengeView.spec.tsx b/src/components/Challenge/ChallengeView.spec.tsx index 1410759a7..63095bbce 100644 --- a/src/components/Challenge/ChallengeView.spec.tsx +++ b/src/components/Challenge/ChallengeView.spec.tsx @@ -6,8 +6,6 @@ import * as reactRedux from 'react-redux' import { challengeStateDataFull } from '../../../tests/__mocks__/challengeStateData.mock' import { createMockEcolyoStore } from '../../../tests/__mocks__/store' -const mockUseSelector = jest.spyOn(reactRedux, 'useSelector') - jest.mock('cozy-ui/transpiled/react/I18n', () => { return { useI18n: jest.fn(() => { @@ -24,13 +22,11 @@ jest.mock('components/Content/Content', () => 'mock-content') jest.mock('components/Challenge/ChallengeCard', () => 'mock-challengecard') describe('ChallengeView component', () => { - const store = createMockEcolyoStore() - beforeEach(() => { - store.clearActions() + const store = createMockEcolyoStore({ + challenge: challengeStateDataFull, }) it('should be rendered correctly', () => { - mockUseSelector.mockReturnValue(challengeStateDataFull) const wrapper = mount( <reactRedux.Provider store={store}> <ChallengeView /> diff --git a/src/components/Challenge/__snapshots__/ChallengeCardLast.spec.tsx.snap b/src/components/Challenge/__snapshots__/ChallengeCardLast.spec.tsx.snap index 5f80b30e6..2242865ca 100644 --- a/src/components/Challenge/__snapshots__/ChallengeCardLast.spec.tsx.snap +++ b/src/components/Challenge/__snapshots__/ChallengeCardLast.spec.tsx.snap @@ -1,119 +1,124 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP 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" +<ChallengeCardLast> + <div + className="cardLast" + > + <StyledIcon + icon="test-file-stub" + size={62} > - <StyledIcon + <Icon + aria-hidden={true} icon="test-file-stub" size={62} + spin={false} > - <Icon + <Component aria-hidden={true} - icon="test-file-stub" - size={62} - spin={false} + className="styles__icon___23x3R" + height={62} + style={Object {}} + width={62} > - <Component + <svg aria-hidden={true} className="styles__icon___23x3R" height={62} style={Object {}} width={62} > - <svg - aria-hidden={true} - className="styles__icon___23x3R" - height={62} - style={Object {}} - width={62} - > - <use - xlinkHref="#test-file-stub" - /> - </svg> - </Component> - </Icon> - </StyledIcon> + <use + xlinkHref="#test-file-stub" + /> + </svg> + </Component> + </Icon> + </StyledIcon> + <div + className="content" + > <div - className="content" + className="text-22-bold title-last" > - <div - className="text-22-bold title-last" - > - challenge.card_last.title - </div> - <div - className="text-18-normal message" - > - challenge.card_last.message1 - </div> + challenge.card_last.title </div> - <WithStyles(ForwardRef(Button)) + <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 { - "label": "text-15-bold", - "root": "btn-secondary-negative btn_lastCard", + "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]} > - <ForwardRef(Button) + <WithStyles(ForwardRef(ButtonBase)) 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", - } - } + className="MuiButton-root btn-secondary-negative btn_lastCard MuiButton-text btn1" + component="button" + disabled={false} + focusRipple={true} + focusVisibleClassName="Mui-focusVisible" onClick={[Function]} + type="button" > - <WithStyles(ForwardRef(ButtonBase)) + <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} @@ -121,81 +126,63 @@ exports[`ChallengeCardLast component should be rendered correctly 1`] = ` onClick={[Function]} type="button" > - <ForwardRef(ButtonBase) + <button 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" + className="MuiButtonBase-root MuiButton-root btn-secondary-negative btn_lastCard MuiButton-text btn1" disabled={false} - focusRipple={true} - focusVisibleClassName="Mui-focusVisible" + 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" > - <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" > - <span - className="MuiButton-label text-15-bold" - > - challenge.card_last.button - </span> - <WithStyles(memo) + challenge.card_last.button + </span> + <WithStyles(memo) + center={false} + > + <ForwardRef(TouchRipple) 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", - } + 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" > - <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> + <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> `; diff --git a/src/components/Charts/AxisBottom.spec.tsx b/src/components/Charts/AxisBottom.spec.tsx index e6e5a7f13..11d3d39ca 100644 --- a/src/components/Charts/AxisBottom.spec.tsx +++ b/src/components/Charts/AxisBottom.spec.tsx @@ -22,22 +22,21 @@ const mockProps = { marginBottom: 10, } -const useSelectorSpy = jest.spyOn(reactRedux, 'useSelector') const useDispatchSpy = jest.spyOn(reactRedux, 'useDispatch') describe('AxisBottom component test', () => { - const store = createMockEcolyoStore() + const store = createMockEcolyoStore({ + chart: { + selectedDate: DateTime.fromISO('2020-10-01T00:00:00.000Z', { + zone: 'utc', + }), + }, + }) beforeEach(() => { store.clearActions() useDispatchSpy.mockClear() }) - useSelectorSpy.mockReturnValue({ - selectedDate: DateTime.fromISO('2020-10-01T00:00:00.000Z', { - zone: 'utc', - }), - }) - it('should correctly render YEAR format of AxisBottom', () => { const wrapper = mount( <Provider store={store}> diff --git a/src/components/Charts/Bar.spec.tsx b/src/components/Charts/Bar.spec.tsx index 0694b98f8..6ac99f422 100644 --- a/src/components/Charts/Bar.spec.tsx +++ b/src/components/Charts/Bar.spec.tsx @@ -34,7 +34,6 @@ const mockParam = { isDuel: false, } -const useSelectorSpy = jest.spyOn(reactRedux, 'useSelector') const useDispatchSpy = jest.spyOn(reactRedux, 'useDispatch') const setSelectedDateSpy = jest.spyOn(chartActions, 'setSelectedDate') const setCurrentDatachartIndexSpy = jest.spyOn( @@ -43,7 +42,6 @@ const setCurrentDatachartIndexSpy = jest.spyOn( ) describe('Bar component test', () => { - const store = createMockEcolyoStore() beforeEach(() => { store.clearActions() useDispatchSpy.mockClear() @@ -51,10 +49,12 @@ describe('Bar component test', () => { setCurrentDatachartIndexSpy.mockClear() }) - useSelectorSpy.mockReturnValue({ - selectedDate: DateTime.fromISO('2020-10-01T00:00:00.000Z', { - zone: 'utc', - }), + const store = createMockEcolyoStore({ + chart: { + selectedDate: DateTime.fromISO('2020-10-01T00:00:00.000Z', { + zone: 'utc', + }), + }, }) it('should correctly render Multifluid Bar', () => { diff --git a/src/components/CommonKit/ErrorPage/ErrorPage.spec.tsx b/src/components/CommonKit/ErrorPage/ErrorPage.spec.tsx index c916c501d..a8ae27035 100644 --- a/src/components/CommonKit/ErrorPage/ErrorPage.spec.tsx +++ b/src/components/CommonKit/ErrorPage/ErrorPage.spec.tsx @@ -3,9 +3,6 @@ import { Button } from '@material-ui/core' 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 ErrorPage from './ErrorPage' jest.mock('cozy-ui/transpiled/react/I18n', () => { @@ -29,33 +26,18 @@ jest.mock('components/Header/CozyBar', () => () => <div id="CozyBar" />) jest.mock('components/Content/Content', () => (props: any) => ( <div id="content">{props.children}</div> )) -const mockStore = configureStore([]) describe('ErrorPage component', () => { it('should be rendered correctly', async () => { - const store = mockStore({ - ecolyo: { - global: globalStateData, - }, - }) const wrapper = mount( - <Provider store={store}> - <ErrorPage text={'test'} returnPage={'ecogestures'} /> - </Provider> + <ErrorPage text={'test'} returnPage={'ecogestures'} /> ) expect(toJson(wrapper)).toMatchSnapshot() }) it('should click on button and be redirected', () => { - const store = mockStore({ - ecolyo: { - global: globalStateData, - }, - }) const wrapper = mount( - <Provider store={store}> - <ErrorPage text={'test'} returnPage={'ecogestures'} /> - </Provider> + <ErrorPage text={'test'} returnPage={'ecogestures'} /> ) wrapper.find(Button).simulate('click') expect(mockedNavigate).toHaveBeenCalledWith('/ecogestures') diff --git a/src/components/CommonKit/ErrorPage/__snapshots__/ErrorPage.spec.tsx.snap b/src/components/CommonKit/ErrorPage/__snapshots__/ErrorPage.spec.tsx.snap index c64f4b6b0..0a6cf7c48 100644 --- a/src/components/CommonKit/ErrorPage/__snapshots__/ErrorPage.spec.tsx.snap +++ b/src/components/CommonKit/ErrorPage/__snapshots__/ErrorPage.spec.tsx.snap @@ -1,138 +1,143 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP exports[`ErrorPage component should be rendered correctly 1`] = ` -<Provider - store={ - Object { - "clearActions": [Function], - "dispatch": [Function], - "getActions": [Function], - "getState": [Function], - "replaceReducer": [Function], - "subscribe": [Function], - } - } +<ErrorPage + returnPage="ecogestures" + text="test" > - <ErrorPage - returnPage="ecogestures" - text="test" + <Component + titleKey="error_page.main" > - <Component - titleKey="error_page.main" - > - <div - id="CozyBar" - /> - </Component> - <Component - desktopTitleKey="error_page.main" - setHeaderHeight={[Function]} - > - <div - id="Header" - /> - </Component> - <Component - height={0} + <div + id="CozyBar" + /> + </Component> + <Component + desktopTitleKey="error_page.main" + setHeaderHeight={[Function]} + > + <div + id="Header" + /> + </Component> + <Component + height={0} + > + <div + id="content" > <div - id="content" + className="error-container" > - <div - className="error-container" + <StyledIcon + className="profile-icon" + icon="test-file-stub" + size={250} > - <StyledIcon + <Icon + aria-hidden={true} className="profile-icon" icon="test-file-stub" size={250} + spin={false} > - <Icon + <Component aria-hidden={true} - className="profile-icon" - icon="test-file-stub" - size={250} - spin={false} + className="profile-icon styles__icon___23x3R" + height={250} + style={Object {}} + width={250} > - <Component + <svg aria-hidden={true} className="profile-icon styles__icon___23x3R" height={250} style={Object {}} width={250} > - <svg - aria-hidden={true} - className="profile-icon styles__icon___23x3R" - height={250} - style={Object {}} - width={250} - > - <use - xlinkHref="#test-file-stub" - /> - </svg> - </Component> - </Icon> - </StyledIcon> - <div - className="text-18-bold head" - > - test - </div> - <WithStyles(ForwardRef(Button)) + <use + xlinkHref="#test-file-stub" + /> + </svg> + </Component> + </Icon> + </StyledIcon> + <div + className="text-18-bold head" + > + test + </div> + <WithStyles(ForwardRef(Button)) + aria-label="error_page.back" + classes={ + Object { + "label": "text-18-bold", + "root": "btn-highlight", + } + } + onClick={[Function]} + type="submit" + variant="contained" + > + <ForwardRef(Button) aria-label="error_page.back" classes={ Object { - "label": "text-18-bold", - "root": "btn-highlight", + "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-18-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={[Function]} type="submit" variant="contained" > - <ForwardRef(Button) + <WithStyles(ForwardRef(ButtonBase)) aria-label="error_page.back" - 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-18-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", - } - } + className="MuiButton-root btn-highlight MuiButton-contained" + component="button" + disabled={false} + focusRipple={true} + focusVisibleClassName="Mui-focusVisible" onClick={[Function]} type="submit" - variant="contained" > - <WithStyles(ForwardRef(ButtonBase)) + <ForwardRef(ButtonBase) aria-label="error_page.back" className="MuiButton-root btn-highlight MuiButton-contained" + classes={ + Object { + "disabled": "Mui-disabled", + "focusVisible": "Mui-focusVisible", + "root": "MuiButtonBase-root", + } + } component="button" disabled={false} focusRipple={true} @@ -140,83 +145,65 @@ exports[`ErrorPage component should be rendered correctly 1`] = ` onClick={[Function]} type="submit" > - <ForwardRef(ButtonBase) + <button aria-label="error_page.back" - className="MuiButton-root btn-highlight MuiButton-contained" - classes={ - Object { - "disabled": "Mui-disabled", - "focusVisible": "Mui-focusVisible", - "root": "MuiButtonBase-root", - } - } - component="button" + className="MuiButtonBase-root MuiButton-root btn-highlight MuiButton-contained" disabled={false} - focusRipple={true} - focusVisibleClassName="Mui-focusVisible" + 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="submit" > - <button - aria-label="error_page.back" - className="MuiButtonBase-root MuiButton-root btn-highlight MuiButton-contained" - 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="submit" + <span + className="MuiButton-label text-18-bold" > - <span - className="MuiButton-label text-18-bold" - > - error_page.back - </span> - <WithStyles(memo) + error_page.back + </span> + <WithStyles(memo) + center={false} + > + <ForwardRef(TouchRipple) 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", - } + 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" > - <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> + <TransitionGroup + childFactory={[Function]} + component={null} + exit={true} + /> + </span> + </ForwardRef(TouchRipple)> + </WithStyles(memo)> + </button> + </ForwardRef(ButtonBase)> + </WithStyles(ForwardRef(ButtonBase))> + </ForwardRef(Button)> + </WithStyles(ForwardRef(Button))> </div> - </Component> - </ErrorPage> -</Provider> + </div> + </Component> +</ErrorPage> `; diff --git a/src/components/Connection/Connection.spec.tsx b/src/components/Connection/Connection.spec.tsx index d339c9b71..c44b0d8d9 100644 --- a/src/components/Connection/Connection.spec.tsx +++ b/src/components/Connection/Connection.spec.tsx @@ -4,9 +4,8 @@ import toJson from 'enzyme-to-json' import React from 'react' import * as reactRedux from 'react-redux' import { Provider } from 'react-redux' -import configureStore from 'redux-mock-store' import { fluidStatusConnectedData } from '../../../tests/__mocks__/fluidStatusData.mock' -import { globalStateData } from '../../../tests/__mocks__/globalStateData.mock' +import { createMockEcolyoStore } from '../../../tests/__mocks__/store' jest.mock('components/Connection/EPGLConnect/EpglInit', () => { return jest.fn(() => { @@ -34,15 +33,9 @@ jest.mock('react-router-dom', () => ({ ...jest.requireActual('react-router-dom'), useNavigate: () => mockedNavigate, })) -const mockStore = configureStore([]) const useDispatchSpy = jest.spyOn(reactRedux, 'useDispatch') -const useSelectorSpy = jest.spyOn(reactRedux, 'useSelector') describe('Connection component test', () => { - const store = mockStore({ - ecolyo: { - global: globalStateData, - }, - }) + const store = createMockEcolyoStore() it('should call GrdfInit', () => { const wrapper = mount( <Provider store={store}> @@ -54,7 +47,6 @@ describe('Connection component test', () => { it('should call EpglInit', () => { useDispatchSpy.mockReturnValue(jest.fn()) - useSelectorSpy.mockReturnValue(globalStateData) const wrapper = mount( <Provider store={store}> <Connection fluidStatus={fluidStatusConnectedData[0]} /> diff --git a/src/components/Connection/ExpiredConsentModal.spec.tsx b/src/components/Connection/ExpiredConsentModal.spec.tsx index 74ba58c51..a7f2adf28 100644 --- a/src/components/Connection/ExpiredConsentModal.spec.tsx +++ b/src/components/Connection/ExpiredConsentModal.spec.tsx @@ -5,9 +5,8 @@ import toJson from 'enzyme-to-json' import React from 'react' import * as reactRedux from 'react-redux' import { Provider } from 'react-redux' -import configureStore from 'redux-mock-store' import { fluidStatusConnectedData } from '../../../tests/__mocks__/fluidStatusData.mock' -import { globalStateData } from '../../../tests/__mocks__/globalStateData.mock' +import { createMockEcolyoStore } from '../../../tests/__mocks__/store' import ExpiredConsentModal from './ExpiredConsentModal' jest.mock('cozy-ui/transpiled/react/I18n', () => { @@ -27,15 +26,14 @@ jest.mock('react-router-dom', () => ({ const mockToggleModal = jest.fn() const mockHandleCloseClick = jest.fn() -const mockStore = configureStore([]) describe('ExpiredConsentModal component', () => { - const store = mockStore({ - ecolyo: { - global: globalStateData, - }, - }) + const useDispatchSpy = jest.spyOn(reactRedux, 'useDispatch') + useDispatchSpy.mockReturnValue(jest.fn()) + const store = createMockEcolyoStore() beforeEach(() => { mockedNavigate.mockReset() + store.clearActions() + useDispatchSpy.mockClear() }) it('should be rendered correctly', () => { const component = mount( @@ -51,9 +49,6 @@ describe('ExpiredConsentModal component', () => { expect(toJson(component)).toMatchSnapshot() }) it('should launch the update consent process for GRDF', () => { - const useDispatchSpy = jest.spyOn(reactRedux, 'useDispatch') - useDispatchSpy.mockReturnValue(jest.fn()) - const component = mount( <Provider store={store}> <ExpiredConsentModal @@ -69,10 +64,9 @@ describe('ExpiredConsentModal component', () => { expect(mockedNavigate).toHaveBeenCalledTimes(1) }) it('should launch the update consent process for Enedis', () => { - const useDispatchSpy = jest.spyOn(reactRedux, 'useDispatch') - useDispatchSpy.mockReturnValue(jest.fn()) - const useSelectorSpy = jest.spyOn(reactRedux, 'useSelector') - useSelectorSpy.mockReturnValue({ fluidStatus: fluidStatusConnectedData }) + const store = createMockEcolyoStore({ + global: { fluidStatus: fluidStatusConnectedData }, + }) const component = mount( <Provider store={store}> <ExpiredConsentModal @@ -84,7 +78,7 @@ describe('ExpiredConsentModal component', () => { </Provider> ) component.find(Button).at(1).simulate('click') - expect(useDispatchSpy).toHaveBeenCalledTimes(2) + expect(useDispatchSpy).toHaveBeenCalledTimes(1) expect(mockedNavigate).toHaveBeenCalledTimes(1) }) it('should click on close modal', () => { diff --git a/src/components/Connection/SGEConnect/SgeConnectView.spec.tsx b/src/components/Connection/SGEConnect/SgeConnectView.spec.tsx index 5bace90a6..8cdce7697 100644 --- a/src/components/Connection/SGEConnect/SgeConnectView.spec.tsx +++ b/src/components/Connection/SGEConnect/SgeConnectView.spec.tsx @@ -4,8 +4,10 @@ import toJson from 'enzyme-to-json' import React from 'react' 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 { + createMockEcolyoStore, + mockGlobalState, +} from '../../../../tests/__mocks__/store' import SgeConnectView from './SgeConnectView' jest.mock('cozy-ui/transpiled/react/I18n', () => { @@ -26,7 +28,6 @@ jest.mock('components/Content/Content', () => 'mock-content') jest.mock('components/FormGlobal/FormProgress', () => 'mock-formprogress') jest.mock('components/Header/CozyBar', () => 'mock-cozybar') -const mockStore = configureStore([]) const useDispatchSpy = jest.spyOn(reactRedux, 'useDispatch') describe('SgeConnectView component', () => { @@ -34,11 +35,7 @@ describe('SgeConnectView component', () => { useDispatchSpy.mockReset() }) it('should be rendered correctly', () => { - const store = mockStore({ - ecolyo: { - global: globalStateData, - }, - }) + const store = createMockEcolyoStore() const wrapper = mount( <Provider store={store}> <SgeConnectView /> @@ -47,14 +44,11 @@ describe('SgeConnectView component', () => { expect(toJson(wrapper)).toMatchSnapshot() }) it('should render address Step', () => { - const store = mockStore({ - ecolyo: { - global: { - ...globalStateData, - sgeConnect: { - ...globalStateData.sgeConnect, - currentStep: SgeStep.Address, - }, + const store = createMockEcolyoStore({ + global: { + sgeConnect: { + ...mockGlobalState.sgeConnect, + currentStep: SgeStep.Address, }, }, }) @@ -66,14 +60,11 @@ describe('SgeConnectView component', () => { expect(wrapper.find('.stepAddress')).toBeTruthy() }) it('should render identity Step', () => { - const store = mockStore({ - ecolyo: { - global: { - ...globalStateData, - sgeConnect: { - ...globalStateData.sgeConnect, - currentStep: SgeStep.IdentityAndPDL, - }, + const store = createMockEcolyoStore({ + global: { + sgeConnect: { + ...mockGlobalState.sgeConnect, + currentStep: SgeStep.IdentityAndPDL, }, }, }) @@ -85,14 +76,11 @@ describe('SgeConnectView component', () => { expect(wrapper.find('.stepIdentity')).toBeTruthy() }) it('should render consent Step', () => { - const store = mockStore({ - ecolyo: { - global: { - ...globalStateData, - sgeConnect: { - ...globalStateData.sgeConnect, - currentStep: SgeStep.Consent, - }, + const store = createMockEcolyoStore({ + global: { + sgeConnect: { + ...mockGlobalState.sgeConnect, + currentStep: SgeStep.Consent, }, }, }) @@ -104,14 +92,11 @@ describe('SgeConnectView component', () => { expect(wrapper.find('.stepConsent')).toBeTruthy() }) it('should render default Step', () => { - const store = mockStore({ - ecolyo: { - global: { - ...globalStateData, - sgeConnect: { - ...globalStateData.sgeConnect, - currentStep: 99, - }, + const store = createMockEcolyoStore({ + global: { + sgeConnect: { + ...mockGlobalState.sgeConnect, + currentStep: 99, }, }, }) @@ -126,12 +111,8 @@ describe('SgeConnectView component', () => { beforeEach(() => { useDispatchSpy.mockReset() }) + const store = createMockEcolyoStore() it('should call nextStep method', () => { - const store = mockStore({ - ecolyo: { - global: globalStateData, - }, - }) const wrapper = mount( <Provider store={store}> <SgeConnectView /> @@ -140,12 +121,7 @@ describe('SgeConnectView component', () => { wrapper.find('.profile-navigation-button').last().simulate('click') expect(useDispatchSpy).toHaveBeenCalled() }) - it('shouldnt call disabled nextStep method', () => { - const store = mockStore({ - ecolyo: { - global: globalStateData, - }, - }) + it('should not call disabled nextStep method', () => { const wrapper = mount( <Provider store={store}> <SgeConnectView /> diff --git a/src/components/Connection/SGEConnect/SgeInit.spec.tsx b/src/components/Connection/SGEConnect/SgeInit.spec.tsx index dc745f6f3..724b24741 100644 --- a/src/components/Connection/SGEConnect/SgeInit.spec.tsx +++ b/src/components/Connection/SGEConnect/SgeInit.spec.tsx @@ -1,15 +1,16 @@ import { Button } from '@material-ui/core' import { mount } from 'enzyme' import toJson from 'enzyme-to-json' -import { GlobalState } from 'models/global.model' import React from 'react' import { Provider } from 'react-redux' -import configureStore from 'redux-mock-store' import { fluidStatusData, SgeStatusWithAccount, } from '../../../../tests/__mocks__/fluidStatusData.mock' -import { globalStateData } from '../../../../tests/__mocks__/globalStateData.mock' +import { + createMockEcolyoStore, + mockGlobalState, +} from '../../../../tests/__mocks__/store' import { waitForComponentToPaint } from '../../../../tests/__mocks__/testUtils' import SgeInit from './SgeInit' @@ -34,15 +35,10 @@ const mockUpdate = jest.fn() jest.mock('components/Hooks/useKonnectorAuth', () => jest.fn(() => [mockConnect, mockUpdate]) ) -const mockStore = configureStore<{ ecolyo: { global: GlobalState } }>([]) describe('SgeInit component', () => { + const store = createMockEcolyoStore() it('should be rendered correctly', () => { - const store = mockStore({ - ecolyo: { - global: globalStateData, - }, - }) const wrapper = mount( <Provider store={store}> <SgeInit fluidStatus={fluidStatusData[0]} /> @@ -51,11 +47,6 @@ describe('SgeInit component', () => { expect(toJson(wrapper)).toMatchSnapshot() }) it('should go to sge connect steps', () => { - const store = mockStore({ - ecolyo: { - global: globalStateData, - }, - }) const wrapper = mount( <Provider store={store}> <SgeInit fluidStatus={fluidStatusData[0]} /> @@ -65,14 +56,11 @@ describe('SgeInit component', () => { expect(mockedNavigate).toHaveBeenCalled() }) it('should launch account and trigger creation process', async () => { - const store = mockStore({ - ecolyo: { - global: { - ...globalStateData, - sgeConnect: { - ...globalStateData.sgeConnect, - shouldLaunchAccount: true, - }, + const store = createMockEcolyoStore({ + global: { + sgeConnect: { + ...mockGlobalState.sgeConnect, + shouldLaunchAccount: true, }, }, }) @@ -86,14 +74,11 @@ describe('SgeInit component', () => { expect(mockConnect).toHaveBeenCalled() }) it('should launch existing account update process', async () => { - const store = mockStore({ - ecolyo: { - global: { - ...globalStateData, - sgeConnect: { - ...globalStateData.sgeConnect, - shouldLaunchAccount: true, - }, + const store = createMockEcolyoStore({ + global: { + sgeConnect: { + ...mockGlobalState.sgeConnect, + shouldLaunchAccount: true, }, }, }) diff --git a/src/components/Connection/SGEConnect/SgeModalHint.spec.tsx b/src/components/Connection/SGEConnect/SgeModalHint.spec.tsx index 86efcf12d..04512dcf3 100644 --- a/src/components/Connection/SGEConnect/SgeModalHint.spec.tsx +++ b/src/components/Connection/SGEConnect/SgeModalHint.spec.tsx @@ -2,8 +2,7 @@ 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 { createMockEcolyoStore } from '../../../../tests/__mocks__/store' import SgeModalHint from './SgeModalHint' jest.mock('cozy-ui/transpiled/react/I18n', () => { @@ -15,16 +14,11 @@ jest.mock('cozy-ui/transpiled/react/I18n', () => { }), } }) -const mockStore = configureStore([]) describe('SgeModalHint component', () => { it('should be rendered correctly', () => { const mockClose = jest.fn() - const store = mockStore({ - ecolyo: { - global: globalStateData, - }, - }) + const store = createMockEcolyoStore() const wrapper = mount( <Provider store={store}> <SgeModalHint open={true} handleCloseClick={mockClose} /> diff --git a/src/components/Connection/SGEConnect/StepAddress.spec.tsx b/src/components/Connection/SGEConnect/StepAddress.spec.tsx index 4874eaee4..9bc479799 100644 --- a/src/components/Connection/SGEConnect/StepAddress.spec.tsx +++ b/src/components/Connection/SGEConnect/StepAddress.spec.tsx @@ -2,8 +2,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 { + createMockEcolyoStore, + mockGlobalState, +} from '../../../../tests/__mocks__/store' import StepAddress from './StepAddress' jest.mock('cozy-ui/transpiled/react/I18n', () => { @@ -15,20 +17,15 @@ jest.mock('cozy-ui/transpiled/react/I18n', () => { }), } }) -const mockStore = configureStore([]) +const mockHandleChange = jest.fn() describe('StepAddress component', () => { + const store = createMockEcolyoStore() it('should be rendered correctly', () => { - const mockHandleChange = jest.fn() - const store = mockStore({ - ecolyo: { - global: globalStateData, - }, - }) const wrapper = mount( <Provider store={store}> <StepAddress - sgeState={globalStateData.sgeConnect} + sgeState={mockGlobalState.sgeConnect} onChange={mockHandleChange} /> </Provider> @@ -36,16 +33,10 @@ describe('StepAddress component', () => { expect(toJson(wrapper)).toMatchSnapshot() }) it('should change address value', () => { - const mockHandleChange = jest.fn() - const store = mockStore({ - ecolyo: { - global: globalStateData, - }, - }) const wrapper = mount( <Provider store={store}> <StepAddress - sgeState={globalStateData.sgeConnect} + sgeState={mockGlobalState.sgeConnect} onChange={mockHandleChange} /> </Provider> @@ -54,16 +45,10 @@ describe('StepAddress component', () => { expect(mockHandleChange).toHaveBeenCalledWith('address', '') }) it('should change zipCode value', () => { - const mockHandleChange = jest.fn() - const store = mockStore({ - ecolyo: { - global: globalStateData, - }, - }) const wrapper = mount( <Provider store={store}> <StepAddress - sgeState={globalStateData.sgeConnect} + sgeState={mockGlobalState.sgeConnect} onChange={mockHandleChange} /> </Provider> @@ -72,16 +57,10 @@ describe('StepAddress component', () => { expect(mockHandleChange).toHaveBeenCalledWith('zipCode', '', 5) }) it('should have an existing zipCode value', () => { - const mockHandleChange = jest.fn() - const store = mockStore({ - ecolyo: { - global: globalStateData, - }, - }) const wrapper = mount( <Provider store={store}> <StepAddress - sgeState={{ ...globalStateData.sgeConnect, zipCode: 69200 }} + sgeState={{ ...mockGlobalState.sgeConnect, zipCode: 69200 }} onChange={mockHandleChange} /> </Provider> @@ -89,16 +68,10 @@ describe('StepAddress component', () => { expect(wrapper.find('#zipCode').first().props().value).toBe(69200) }) it('should change city value', () => { - const mockHandleChange = jest.fn() - const store = mockStore({ - ecolyo: { - global: globalStateData, - }, - }) const wrapper = mount( <Provider store={store}> <StepAddress - sgeState={globalStateData.sgeConnect} + sgeState={mockGlobalState.sgeConnect} onChange={mockHandleChange} /> </Provider> diff --git a/src/components/Connection/SGEConnect/StepConsent.spec.tsx b/src/components/Connection/SGEConnect/StepConsent.spec.tsx index 09498f8b5..451ac3785 100644 --- a/src/components/Connection/SGEConnect/StepConsent.spec.tsx +++ b/src/components/Connection/SGEConnect/StepConsent.spec.tsx @@ -1,10 +1,11 @@ import { mount } from 'enzyme' import toJson from 'enzyme-to-json' -import { GlobalState } from 'models/global.model' import React from 'react' import { Provider } from 'react-redux' -import configureStore from 'redux-mock-store' -import { globalStateData } from '../../../../tests/__mocks__/globalStateData.mock' +import { + createMockEcolyoStore, + mockGlobalState, +} from '../../../../tests/__mocks__/store' import StepConsent from './StepConsent' jest.mock('cozy-ui/transpiled/react/I18n', () => { @@ -16,20 +17,15 @@ jest.mock('cozy-ui/transpiled/react/I18n', () => { }), } }) -const mockStore = configureStore<{ ecolyo: { global: GlobalState } }>([]) +const mockHandleChange = jest.fn() describe('StepConsent component', () => { + const store = createMockEcolyoStore() it('should be rendered correctly', () => { - const mockHandleChange = jest.fn() - const store = mockStore({ - ecolyo: { - global: globalStateData, - }, - }) const wrapper = mount( <Provider store={store}> <StepConsent - sgeState={globalStateData.sgeConnect} + sgeState={mockGlobalState.sgeConnect} onChange={mockHandleChange} /> </Provider> @@ -37,16 +33,10 @@ describe('StepConsent component', () => { expect(toJson(wrapper)).toMatchSnapshot() }) it('should change pdlConfirm value', () => { - const mockHandleChange = jest.fn() - const store = mockStore({ - ecolyo: { - global: globalStateData, - }, - }) const wrapper = mount( <Provider store={store}> <StepConsent - sgeState={globalStateData.sgeConnect} + sgeState={mockGlobalState.sgeConnect} onChange={mockHandleChange} /> </Provider> @@ -55,16 +45,10 @@ describe('StepConsent component', () => { expect(mockHandleChange).toHaveBeenCalledWith('pdlConfirm', false) }) it('should change dataConsent value', () => { - const mockHandleChange = jest.fn() - const store = mockStore({ - ecolyo: { - global: globalStateData, - }, - }) const wrapper = mount( <Provider store={store}> <StepConsent - sgeState={globalStateData.sgeConnect} + sgeState={mockGlobalState.sgeConnect} onChange={mockHandleChange} /> </Provider> diff --git a/src/components/Connection/SGEConnect/StepIdentityAndPdl.spec.tsx b/src/components/Connection/SGEConnect/StepIdentityAndPdl.spec.tsx index dba57dc00..34860ce4b 100644 --- a/src/components/Connection/SGEConnect/StepIdentityAndPdl.spec.tsx +++ b/src/components/Connection/SGEConnect/StepIdentityAndPdl.spec.tsx @@ -2,8 +2,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 { + createMockEcolyoStore, + mockGlobalState, +} from '../../../../tests/__mocks__/store' import StepIdentityAndPdl from './StepIdentityAndPdl' jest.mock('cozy-ui/transpiled/react/I18n', () => { @@ -15,20 +17,15 @@ jest.mock('cozy-ui/transpiled/react/I18n', () => { }), } }) -const mockStore = configureStore([]) +const mockHandleChange = jest.fn() describe('StepIdentityAndPdl component', () => { + const store = createMockEcolyoStore() it('should be rendered correctly', () => { - const mockHandleChange = jest.fn() - const store = mockStore({ - ecolyo: { - global: globalStateData, - }, - }) const wrapper = mount( <Provider store={store}> <StepIdentityAndPdl - sgeState={globalStateData.sgeConnect} + sgeState={mockGlobalState.sgeConnect} onChange={mockHandleChange} /> </Provider> @@ -36,16 +33,10 @@ describe('StepIdentityAndPdl component', () => { expect(toJson(wrapper)).toMatchSnapshot() }) it('should change firstName value', () => { - const mockHandleChange = jest.fn() - const store = mockStore({ - ecolyo: { - global: globalStateData, - }, - }) const wrapper = mount( <Provider store={store}> <StepIdentityAndPdl - sgeState={globalStateData.sgeConnect} + sgeState={mockGlobalState.sgeConnect} onChange={mockHandleChange} /> </Provider> @@ -54,16 +45,10 @@ describe('StepIdentityAndPdl component', () => { expect(mockHandleChange).toHaveBeenCalledWith('firstName', '') }) it('should change lastName value', () => { - const mockHandleChange = jest.fn() - const store = mockStore({ - ecolyo: { - global: globalStateData, - }, - }) const wrapper = mount( <Provider store={store}> <StepIdentityAndPdl - sgeState={globalStateData.sgeConnect} + sgeState={mockGlobalState.sgeConnect} onChange={mockHandleChange} /> </Provider> @@ -72,16 +57,10 @@ describe('StepIdentityAndPdl component', () => { expect(mockHandleChange).toHaveBeenCalledWith('lastName', '') }) it('should change pdl value', () => { - const mockHandleChange = jest.fn() - const store = mockStore({ - ecolyo: { - global: globalStateData, - }, - }) const wrapper = mount( <Provider store={store}> <StepIdentityAndPdl - sgeState={globalStateData.sgeConnect} + sgeState={mockGlobalState.sgeConnect} onChange={mockHandleChange} /> </Provider> @@ -90,16 +69,10 @@ describe('StepIdentityAndPdl component', () => { expect(mockHandleChange).toHaveBeenCalledWith('pdl', '', 14) }) it('should open hint modal', () => { - const mockHandleChange = jest.fn() - const store = mockStore({ - ecolyo: { - global: globalStateData, - }, - }) const wrapper = mount( <Provider store={store}> <StepIdentityAndPdl - sgeState={globalStateData.sgeConnect} + sgeState={mockGlobalState.sgeConnect} onChange={mockHandleChange} /> </Provider> @@ -108,16 +81,10 @@ describe('StepIdentityAndPdl component', () => { expect(wrapper.find('.sgeHintModal')).toBeTruthy() }) it('should have an existing pdl value', () => { - const mockHandleChange = jest.fn() - const store = mockStore({ - ecolyo: { - global: globalStateData, - }, - }) const wrapper = mount( <Provider store={store}> <StepIdentityAndPdl - sgeState={{ ...globalStateData.sgeConnect, pdl: 11111111111111 }} + sgeState={{ ...mockGlobalState.sgeConnect, pdl: 11111111111111 }} onChange={mockHandleChange} /> </Provider> diff --git a/src/components/ConsumptionVisualizer/DataloadConsumptionVisualizer.spec.tsx b/src/components/ConsumptionVisualizer/DataloadConsumptionVisualizer.spec.tsx index 83fa79f6b..775c015bb 100644 --- a/src/components/ConsumptionVisualizer/DataloadConsumptionVisualizer.spec.tsx +++ b/src/components/ConsumptionVisualizer/DataloadConsumptionVisualizer.spec.tsx @@ -6,12 +6,11 @@ import { Dataload } from 'models' import React from 'react' import { Provider } from 'react-redux' import { BrowserRouter } from 'react-router-dom' -import configureStore from 'redux-mock-store' import UsageEventService from 'services/usageEvent.service' import { baseDataLoad } from '../../../tests/__mocks__/chartData.mock' import { - mockInitialChartState, - mockInitialEcolyoState, + createMockEcolyoStore, + mockChartState, } from '../../../tests/__mocks__/store' import { waitForComponentToPaint } from '../../../tests/__mocks__/testUtils' import DataloadConsumptionVisualizer from './DataloadConsumptionVisualizer' @@ -35,8 +34,7 @@ jest.mock('services/fluidsPrices.service', () => { }) }) -const mockStore = configureStore([]) -const mockChartStateLoaded = { ...mockInitialChartState, loading: false } +const mockChartStateLoaded = { ...mockChartState, loading: false } const emptyDataLoad = { ...baseDataLoad, value: -1 } const dataLoadWithValueDetailEmpty: Dataload = { ...baseDataLoad, @@ -53,10 +51,8 @@ const dataLoadWithValueDetail: Dataload = { describe('Dataload consumption visualizer component', () => { it('should render with single fluid', async () => { - const store = mockStore({ - ecolyo: { - chart: mockChartStateLoaded, - }, + const store = createMockEcolyoStore({ + chart: mockChartStateLoaded, }) const wrapper = mount( <Provider store={store}> @@ -72,9 +68,7 @@ describe('Dataload consumption visualizer component', () => { expect(toJson(wrapper)).toMatchSnapshot() }) it('should render correctly multifluid and 3 clickable links', () => { - const store = mockStore({ - ecolyo: mockInitialEcolyoState, - }) + const store = createMockEcolyoStore() const wrapper = mount( <Provider store={store}> <BrowserRouter> @@ -91,10 +85,8 @@ describe('Dataload consumption visualizer component', () => { }) it('should render with no value to compare available', async () => { - const store = mockStore({ - ecolyo: { - chart: { ...mockChartStateLoaded, showCompare: true }, - }, + const store = createMockEcolyoStore({ + chart: { ...mockChartStateLoaded, showCompare: true }, }) const wrapper = mount( <Provider store={store}> @@ -109,10 +101,8 @@ describe('Dataload consumption visualizer component', () => { expect(wrapper.find('.dataloadvisualizer-novalue').exists()).toBeTruthy() }) it('should render with water comparison data', async () => { - const store = mockStore({ - ecolyo: { - chart: { ...mockChartStateLoaded, showCompare: true }, - }, + const store = createMockEcolyoStore({ + chart: { ...mockChartStateLoaded, showCompare: true }, }) const wrapper = mount( <Provider store={store}> @@ -127,10 +117,8 @@ describe('Dataload consumption visualizer component', () => { expect(wrapper.find('.water-compare').exists()).toBeTruthy() }) it('should render multifluid with no compare and display estimation modal', async () => { - const store = mockStore({ - ecolyo: { - chart: mockChartStateLoaded, - }, + const store = createMockEcolyoStore({ + chart: mockChartStateLoaded, }) const wrapper = mount( @@ -146,10 +134,8 @@ describe('Dataload consumption visualizer component', () => { expect(wrapper.find('.estimated').first().simulate('click')) }) it('should render multifluid with no compare and navigate to singleFluid page', async () => { - const store = mockStore({ - ecolyo: { - chart: mockChartStateLoaded, - }, + const store = createMockEcolyoStore({ + chart: mockChartStateLoaded, }) const mockLoadToEuro = jest.fn() jest.mock('services/converter.service', () => { diff --git a/src/components/ConsumptionVisualizer/EstimatedConsumptionModal.spec.tsx b/src/components/ConsumptionVisualizer/EstimatedConsumptionModal.spec.tsx index 789d44b5b..4409bb8b4 100644 --- a/src/components/ConsumptionVisualizer/EstimatedConsumptionModal.spec.tsx +++ b/src/components/ConsumptionVisualizer/EstimatedConsumptionModal.spec.tsx @@ -1,10 +1,6 @@ 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', () => { @@ -26,22 +22,11 @@ jest.mock('services/fluidsPrices.service', () => { }) }) -const mockStore = configureStore([]) -const mockHandleClose = jest.fn() describe('EstimatedConsumptionModal component', () => { it('should render correctly', async () => { - const store = mockStore({ - ecolyo: mockInitialEcolyoState, - }) const wrapper = mount( - <Provider store={store}> - <EstimatedConsumptionModal - open={true} - handleCloseClick={mockHandleClose} - /> - </Provider> + <EstimatedConsumptionModal open={true} handleCloseClick={jest.fn()} /> ) - await waitForComponentToPaint(wrapper) expect(toJson(wrapper)).toMatchSnapshot() }) }) diff --git a/src/components/ConsumptionVisualizer/NoDataModal.spec.tsx b/src/components/ConsumptionVisualizer/NoDataModal.spec.tsx index 85e4f86ba..4b8d40505 100644 --- a/src/components/ConsumptionVisualizer/NoDataModal.spec.tsx +++ b/src/components/ConsumptionVisualizer/NoDataModal.spec.tsx @@ -1,10 +1,6 @@ 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', () => { @@ -17,19 +13,11 @@ jest.mock('cozy-ui/transpiled/react/I18n', () => { } }) -const mockStore = configureStore([]) -const mockHandleClose = jest.fn() describe('NoDataModal component', () => { it('should render correctly', async () => { - const store = mockStore({ - ecolyo: mockInitialEcolyoState, - }) const wrapper = mount( - <Provider store={store}> - <NoDataModal open={true} handleCloseClick={mockHandleClose} /> - </Provider> + <NoDataModal open={true} handleCloseClick={jest.fn()} /> ) - await waitForComponentToPaint(wrapper) expect(toJson(wrapper)).toMatchSnapshot() }) }) diff --git a/src/components/ConsumptionVisualizer/__snapshots__/EstimatedConsumptionModal.spec.tsx.snap b/src/components/ConsumptionVisualizer/__snapshots__/EstimatedConsumptionModal.spec.tsx.snap index 3d48d7e51..c4aa35b59 100644 --- a/src/components/ConsumptionVisualizer/__snapshots__/EstimatedConsumptionModal.spec.tsx.snap +++ b/src/components/ConsumptionVisualizer/__snapshots__/EstimatedConsumptionModal.spec.tsx.snap @@ -1,525 +1,529 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP 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} > - <EstimatedConsumptionModal - handleCloseClick={[MockFunction]} + <WithStyles(ForwardRef(Dialog)) + aria-labelledby="accessibility-title" + classes={ + Object { + "paper": "modal-paper", + "root": "modal-root", + } + } + onClose={[MockFunction]} open={true} > - <WithStyles(ForwardRef(Dialog)) + <ForwardRef(Dialog) aria-labelledby="accessibility-title" classes={ Object { - "paper": "modal-paper", - "root": "modal-root", + "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(Dialog) - aria-labelledby="accessibility-title" - classes={ + <ForwardRef(Modal) + BackdropComponent={ 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), - "Naked": Object { - "$$typeof": Symbol(react.forward_ref), - "propTypes": Object { - "children": [Function], - "className": [Function], - "classes": [Function], - "invisible": [Function], - "open": [Function], - "transitionDuration": [Function], - }, - "render": [Function], + "propTypes": Object { + "children": [Function], + "className": [Function], + "classes": [Function], + "invisible": [Function], + "open": [Function], + "transitionDuration": [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, - }, + "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, }, - "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)", + "width": [Function], + }, + "direction": "ltr", + "mixins": Object { + "gutters": [Function], + "toolbar": Object { + "@media (min-width:0px) and (orientation: landscape)": Object { + "minHeight": 48, }, - "tonalOffset": 0.2, - "type": "light", - "warning": Object { - "contrastText": "rgba(0, 0, 0, 0.87)", - "dark": "#f57c00", - "light": "#ffb74d", - "main": "#ff9800", + "@media (min-width:600px)": Object { + "minHeight": 64, }, + "minHeight": 56, }, - "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, + }, + "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, }, - "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], + "augmentColor": [Function], + "background": Object { + "default": "#fafafa", + "paper": "#fff", }, - "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, - }, + "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": 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, - }, + "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, }, - "zIndex": Object { - "appBar": 1100, - "drawer": 1200, - "mobileStepper": 1000, - "modal": 1300, - "snackbar": 1400, - "speedDial": 1050, - "tooltip": 1500, + "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, }, }, - "name": "MuiBackdrop", - }, - "propTypes": Object { - "classes": [Function], - "innerRef": [Function], + "zIndex": Object { + "appBar": 1100, + "drawer": 1200, + "mobileStepper": 1000, + "modal": 1300, + "snackbar": 1400, + "speedDial": 1050, + "tooltip": 1500, + }, }, - "render": [Function], - "useStyles": [Function], - } + "name": "MuiBackdrop", + }, + "propTypes": Object { + "classes": [Function], + "innerRef": [Function], + }, + "render": [Function], + "useStyles": [Function], } - BackdropProps={ - Object { - "transitionDuration": Object { - "enter": 225, - "exit": 195, - }, - } + } + BackdropProps={ + Object { + "transitionDuration": Object { + "enter": 225, + "exit": 195, + }, } - className="MuiDialog-root modal-root" - closeAfterTransition={true} - disableEscapeKeyDown={false} - onClose={[MockFunction]} - open={true} + } + className="MuiDialog-root modal-root" + closeAfterTransition={true} + disableEscapeKeyDown={false} + onClose={[MockFunction]} + open={true} + > + <ForwardRef(Portal) + disablePortal={false} > - <ForwardRef(Portal) - disablePortal={false} - > - <Portal - containerInfo={ - <body - style="padding-right: 0px; overflow: hidden;" + <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 - class="MuiDialog-root modal-root" - role="presentation" - style="position: fixed; z-index: 1300; right: 0px; bottom: 0px; top: 0px; left: 0px;" + 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-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" + aria-labelledby="accessibility-title" + class="MuiPaper-root MuiDialog-paper modal-paper MuiDialog-paperScrollPaper MuiDialog-paperWidthSm MuiPaper-elevation24 MuiPaper-rounded" + role="dialog" > <div - aria-labelledby="accessibility-title" - class="MuiPaper-root MuiDialog-paper modal-paper MuiDialog-paperScrollPaper MuiDialog-paperWidthSm MuiPaper-elevation24 MuiPaper-rounded" - role="dialog" + 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 - id="accessibility-title" + class="text-20-normal modal-title" > - consumption_visualizer.modal.window_title + consumption_visualizer.modal.title </div> - <button - aria-label="consumption_visualizer.modal.close" - class="MuiButtonBase-root MuiIconButton-root modal-paper-close-button" - tabindex="0" - type="button" + <div + class="text-16-normal" > - <span - class="MuiIconButton-label" - > - <svg - class="styles__icon___23x3R" - height="16" - width="16" + 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" > - <use - xlink:href="#test-file-stub" - /> - </svg> - </span> - <span - class="MuiTouchRipple-root" - /> - </button> + FLUID.GAS.LABEL + </span> + consumption_visualizer.modal.list2 + </li> + </ul> <div - class="estimation-modal" + class="text-16-normal" > - <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> + consumption_visualizer.modal.part3 </div> </div> </div> - <div - data-test="sentinelEnd" - tabindex="0" - /> </div> - </body> + <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, + } } > - <div - className="MuiDialog-root modal-root" - onKeyDown={[Function]} - role="presentation" - style={ + <WithStyles(ForwardRef(Backdrop)) + onClick={[Function]} + open={true} + transitionDuration={ Object { - "bottom": 0, - "left": 0, - "position": "fixed", - "right": 0, - "top": 0, - "zIndex": 1300, + "enter": 225, + "exit": 195, } } > - <WithStyles(ForwardRef(Backdrop)) + <ForwardRef(Backdrop) + classes={ + Object { + "invisible": "MuiBackdrop-invisible", + "root": "MuiBackdrop-root", + } + } onClick={[Function]} open={true} transitionDuration={ @@ -529,85 +533,90 @@ exports[`EstimatedConsumptionModal component should render correctly 1`] = ` } } > - <ForwardRef(Backdrop) - classes={ - Object { - "invisible": "MuiBackdrop-invisible", - "root": "MuiBackdrop-root", - } - } + <ForwardRef(Fade) + in={true} onClick={[Function]} - open={true} - transitionDuration={ + timeout={ Object { "enter": 225, "exit": 195, } } > - <ForwardRef(Fade) + <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} > - <Transition - appear={true} - enter={true} - exit={true} - in={true} - mountOnEnter={false} + <div + aria-hidden={true} + className="MuiBackdrop-root" onClick={[Function]} - onEnter={[Function]} - onEntered={[Function]} - onEntering={[Function]} - onExit={[Function]} - onExited={[Function]} - onExiting={[Function]} - timeout={ + style={ Object { - "enter": 225, - "exit": 195, + "opacity": 1, + "visibility": undefined, } } - 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} + /> + </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, + } + } > - <div - data-test="sentinelStart" - tabIndex={0} - /> - <ForwardRef(Fade) + <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={ @@ -616,289 +625,267 @@ exports[`EstimatedConsumptionModal component should render correctly 1`] = ` "exit": 195, } } + unmountOnExit={false} > - <Transition - appear={true} - enter={true} - exit={true} - in={true} - mountOnEnter={false} - onEnter={[Function]} - onEntered={[Function]} - onEntering={[Function]} - onExit={[Function]} - onExited={[Function]} - onExiting={[Function]} + <div + className="MuiDialog-container MuiDialog-scrollPaper" + onMouseDown={[Function]} + onMouseUp={[Function]} role="none presentation" - tabIndex="-1" - timeout={ + style={ Object { - "enter": 225, - "exit": 195, + "opacity": 1, + "visibility": undefined, } } - unmountOnExit={false} + tabIndex="-1" > - <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" > - <WithStyles(ForwardRef(Paper)) + <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" > - <ForwardRef(Paper) + <div 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} + className="MuiPaper-root MuiDialog-paper modal-paper MuiDialog-paperScrollPaper MuiDialog-paperWidthSm MuiPaper-elevation24 MuiPaper-rounded" role="dialog" > <div - aria-labelledby="accessibility-title" - className="MuiPaper-root MuiDialog-paper modal-paper MuiDialog-paperScrollPaper MuiDialog-paperWidthSm MuiPaper-elevation24 MuiPaper-rounded" - role="dialog" + id="accessibility-title" > - <div - id="accessibility-title" - > - consumption_visualizer.modal.window_title - </div> - <WithStyles(ForwardRef(IconButton)) + 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]} > - <ForwardRef(IconButton) + <WithStyles(ForwardRef(ButtonBase)) 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", - } - } + centerRipple={true} + className="MuiIconButton-root modal-paper-close-button" + disabled={false} + focusRipple={true} onClick={[MockFunction]} > - <WithStyles(ForwardRef(ButtonBase)) + <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]} > - <ForwardRef(ButtonBase) + <button 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", - } - } + className="MuiButtonBase-root MuiIconButton-root modal-paper-close-button" disabled={false} - focusRipple={true} + 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" > - <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" > - <span - className="MuiIconButton-label" + <Icon + icon="test-file-stub" + size={16} + spin={false} > - <Icon - icon="test-file-stub" - size={16} - spin={false} + <Component + className="styles__icon___23x3R" + height={16} + style={Object {}} + width={16} > - <Component + <svg 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) + <use + xlinkHref="#test-file-stub" + /> + </svg> + </Component> + </Icon> + </span> + <WithStyles(memo) + center={true} + > + <ForwardRef(TouchRipple) 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", - } + 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" > - <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))> + <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="estimation-modal" + className="text-20-normal modal-title" > - <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> + 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> - </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> + </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> `; diff --git a/src/components/ConsumptionVisualizer/__snapshots__/NoDataModal.spec.tsx.snap b/src/components/ConsumptionVisualizer/__snapshots__/NoDataModal.spec.tsx.snap index 5f65ba1f1..4ba5dadff 100644 --- a/src/components/ConsumptionVisualizer/__snapshots__/NoDataModal.spec.tsx.snap +++ b/src/components/ConsumptionVisualizer/__snapshots__/NoDataModal.spec.tsx.snap @@ -1,548 +1,552 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP 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} > - <NoDataModal - handleCloseClick={[MockFunction]} + <WithStyles(ForwardRef(Dialog)) + aria-labelledby="accessibility-title" + classes={ + Object { + "paper": "modal-paper", + "root": "modal-root", + } + } + onClose={[MockFunction]} open={true} > - <WithStyles(ForwardRef(Dialog)) + <ForwardRef(Dialog) aria-labelledby="accessibility-title" classes={ Object { - "paper": "modal-paper", - "root": "modal-root", + "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(Dialog) - aria-labelledby="accessibility-title" - classes={ + <ForwardRef(Modal) + BackdropComponent={ 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), - "Naked": Object { - "$$typeof": Symbol(react.forward_ref), - "propTypes": Object { - "children": [Function], - "className": [Function], - "classes": [Function], - "invisible": [Function], - "open": [Function], - "transitionDuration": [Function], - }, - "render": [Function], + "propTypes": Object { + "children": [Function], + "className": [Function], + "classes": [Function], + "invisible": [Function], + "open": [Function], + "transitionDuration": [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, - }, + "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, }, - "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)", + "width": [Function], + }, + "direction": "ltr", + "mixins": Object { + "gutters": [Function], + "toolbar": Object { + "@media (min-width:0px) and (orientation: landscape)": Object { + "minHeight": 48, }, - "tonalOffset": 0.2, - "type": "light", - "warning": Object { - "contrastText": "rgba(0, 0, 0, 0.87)", - "dark": "#f57c00", - "light": "#ffb74d", - "main": "#ff9800", + "@media (min-width:600px)": Object { + "minHeight": 64, }, + "minHeight": 56, }, - "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, + }, + "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, }, - "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], + "augmentColor": [Function], + "background": Object { + "default": "#fafafa", + "paper": "#fff", }, - "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, - }, + "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": 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, - }, + "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, }, - "zIndex": Object { - "appBar": 1100, - "drawer": 1200, - "mobileStepper": 1000, - "modal": 1300, - "snackbar": 1400, - "speedDial": 1050, - "tooltip": 1500, + "subtitle2": Object { + "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif", + "fontSize": "0.875rem", + "fontWeight": 500, + "letterSpacing": "0.00714em", + "lineHeight": 1.57, }, }, - "name": "MuiBackdrop", - }, - "propTypes": Object { - "classes": [Function], - "innerRef": [Function], + "zIndex": Object { + "appBar": 1100, + "drawer": 1200, + "mobileStepper": 1000, + "modal": 1300, + "snackbar": 1400, + "speedDial": 1050, + "tooltip": 1500, + }, }, - "render": [Function], - "useStyles": [Function], - } + "name": "MuiBackdrop", + }, + "propTypes": Object { + "classes": [Function], + "innerRef": [Function], + }, + "render": [Function], + "useStyles": [Function], } - BackdropProps={ - Object { - "transitionDuration": Object { - "enter": 225, - "exit": 195, - }, - } + } + BackdropProps={ + Object { + "transitionDuration": Object { + "enter": 225, + "exit": 195, + }, } - className="MuiDialog-root modal-root" - closeAfterTransition={true} - disableEscapeKeyDown={false} - onClose={[MockFunction]} - open={true} + } + className="MuiDialog-root modal-root" + closeAfterTransition={true} + disableEscapeKeyDown={false} + onClose={[MockFunction]} + open={true} + > + <ForwardRef(Portal) + disablePortal={false} > - <ForwardRef(Portal) - disablePortal={false} - > - <Portal - containerInfo={ - <body - style="padding-right: 0px; overflow: hidden;" + <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 - class="MuiDialog-root modal-root" - role="presentation" - style="position: fixed; z-index: 1300; right: 0px; bottom: 0px; top: 0px; left: 0px;" + 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-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" + aria-labelledby="accessibility-title" + class="MuiPaper-root MuiDialog-paper modal-paper MuiDialog-paperScrollPaper MuiDialog-paperWidthSm MuiPaper-elevation24 MuiPaper-rounded" + role="dialog" > <div - aria-labelledby="accessibility-title" - class="MuiPaper-root MuiDialog-paper modal-paper MuiDialog-paperScrollPaper MuiDialog-paperWidthSm MuiPaper-elevation24 MuiPaper-rounded" - role="dialog" + 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 - id="accessibility-title" + class="text-16-normal justified-text" > - consumption_visualizer.modal.window_title + <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="consumption_visualizer.modal.close" - class="MuiButtonBase-root MuiIconButton-root modal-paper-close-button" + aria-label="ecogesture_info_modal.button_close" + class="MuiButtonBase-root MuiButton-root btn-highlight MuiButton-text" tabindex="0" type="button" > <span - class="MuiIconButton-label" + class="MuiButton-label text-16-bold" > - <svg - class="styles__icon___23x3R" - height="16" - width="16" - > - <use - xlink:href="#test-file-stub" - /> - </svg> + ecogesture_info_modal.button_close </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 + 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, + } } > - <div - className="MuiDialog-root modal-root" - onKeyDown={[Function]} - role="presentation" - style={ + <WithStyles(ForwardRef(Backdrop)) + onClick={[Function]} + open={true} + transitionDuration={ Object { - "bottom": 0, - "left": 0, - "position": "fixed", - "right": 0, - "top": 0, - "zIndex": 1300, + "enter": 225, + "exit": 195, } } > - <WithStyles(ForwardRef(Backdrop)) + <ForwardRef(Backdrop) + classes={ + Object { + "invisible": "MuiBackdrop-invisible", + "root": "MuiBackdrop-root", + } + } onClick={[Function]} open={true} transitionDuration={ @@ -552,85 +556,90 @@ exports[`NoDataModal component should render correctly 1`] = ` } } > - <ForwardRef(Backdrop) - classes={ - Object { - "invisible": "MuiBackdrop-invisible", - "root": "MuiBackdrop-root", - } - } + <ForwardRef(Fade) + in={true} onClick={[Function]} - open={true} - transitionDuration={ + timeout={ Object { "enter": 225, "exit": 195, } } > - <ForwardRef(Fade) + <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} > - <Transition - appear={true} - enter={true} - exit={true} - in={true} - mountOnEnter={false} + <div + aria-hidden={true} + className="MuiBackdrop-root" onClick={[Function]} - onEnter={[Function]} - onEntered={[Function]} - onEntering={[Function]} - onExit={[Function]} - onExited={[Function]} - onExiting={[Function]} - timeout={ + style={ Object { - "enter": 225, - "exit": 195, + "opacity": 1, + "visibility": undefined, } } - 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} + /> + </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, + } + } > - <div - data-test="sentinelStart" - tabIndex={0} - /> - <ForwardRef(Fade) + <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={ @@ -639,131 +648,332 @@ exports[`NoDataModal component should render correctly 1`] = ` "exit": 195, } } + unmountOnExit={false} > - <Transition - appear={true} - enter={true} - exit={true} - in={true} - mountOnEnter={false} - onEnter={[Function]} - onEntered={[Function]} - onEntering={[Function]} - onExit={[Function]} - onExited={[Function]} - onExiting={[Function]} + <div + className="MuiDialog-container MuiDialog-scrollPaper" + onMouseDown={[Function]} + onMouseUp={[Function]} role="none presentation" - tabIndex="-1" - timeout={ + style={ Object { - "enter": 225, - "exit": 195, + "opacity": 1, + "visibility": undefined, } } - unmountOnExit={false} + tabIndex="-1" > - <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" > - <WithStyles(ForwardRef(Paper)) + <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" > - <ForwardRef(Paper) + <div 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} + className="MuiPaper-root MuiDialog-paper modal-paper MuiDialog-paperScrollPaper MuiDialog-paperWidthSm MuiPaper-elevation24 MuiPaper-rounded" role="dialog" > <div - aria-labelledby="accessibility-title" - className="MuiPaper-root MuiDialog-paper modal-paper MuiDialog-paperScrollPaper MuiDialog-paperWidthSm MuiPaper-elevation24 MuiPaper-rounded" - role="dialog" + id="accessibility-title" > - <div - id="accessibility-title" - > - consumption_visualizer.modal.window_title - </div> - <WithStyles(ForwardRef(IconButton)) + 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]} > - <ForwardRef(IconButton) + <WithStyles(ForwardRef(ButtonBase)) aria-label="consumption_visualizer.modal.close" - className="modal-paper-close-button" + 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": "MuiIconButton-colorInherit", - "colorPrimary": "MuiIconButton-colorPrimary", - "colorSecondary": "MuiIconButton-colorSecondary", + "colorInherit": "MuiButton-colorInherit", + "contained": "MuiButton-contained", + "containedPrimary": "MuiButton-containedPrimary", + "containedSecondary": "MuiButton-containedSecondary", + "containedSizeLarge": "MuiButton-containedSizeLarge", + "containedSizeSmall": "MuiButton-containedSizeSmall", + "disableElevation": "MuiButton-disableElevation", "disabled": "Mui-disabled", - "edgeEnd": "MuiIconButton-edgeEnd", - "edgeStart": "MuiIconButton-edgeStart", - "label": "MuiIconButton-label", - "root": "MuiIconButton-root", - "sizeSmall": "MuiIconButton-sizeSmall", + "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="consumption_visualizer.modal.close" - centerRipple={true} - className="MuiIconButton-root modal-paper-close-button" + 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="consumption_visualizer.modal.close" - centerRipple={true} - className="MuiIconButton-root modal-paper-close-button" + aria-label="ecogesture_info_modal.button_close" + className="MuiButton-root btn-highlight MuiButton-text" classes={ Object { "disabled": "Mui-disabled", @@ -771,13 +981,16 @@ exports[`NoDataModal component should render correctly 1`] = ` "root": "MuiButtonBase-root", } } + component="button" disabled={false} focusRipple={true} + focusVisibleClassName="Mui-focusVisible" onClick={[MockFunction]} + type="button" > <button - aria-label="consumption_visualizer.modal.close" - className="MuiButtonBase-root MuiIconButton-root modal-paper-close-button" + aria-label="ecogesture_info_modal.button_close" + className="MuiButtonBase-root MuiButton-root btn-highlight MuiButton-text" disabled={false} onBlur={[Function]} onClick={[MockFunction]} @@ -795,37 +1008,15 @@ exports[`NoDataModal component should render correctly 1`] = ` type="button" > <span - className="MuiIconButton-label" + className="MuiButton-label text-16-bold" > - <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> + ecogesture_info_modal.button_close </span> <WithStyles(memo) - center={true} + center={false} > <ForwardRef(TouchRipple) - center={true} + center={false} classes={ Object { "child": "MuiTouchRipple-child", @@ -852,229 +1043,25 @@ exports[`NoDataModal component should render correctly 1`] = ` </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> + </ForwardRef(Button)> + </WithStyles(ForwardRef(Button))> </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> + </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> `; diff --git a/src/components/Duel/DuelOngoing.spec.tsx b/src/components/Duel/DuelOngoing.spec.tsx index 45ff068e8..3a8c92a30 100644 --- a/src/components/Duel/DuelOngoing.spec.tsx +++ b/src/components/Duel/DuelOngoing.spec.tsx @@ -5,9 +5,7 @@ import { DateTime } from 'luxon' import { UserChallenge } from 'models' import React from 'react' 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 { createMockEcolyoStore } from '../../../tests/__mocks__/store' import { waitForComponentToPaint } from '../../../tests/__mocks__/testUtils' import { userChallengeData } from '../../../tests/__mocks__/userChallengeData.mock' import DuelResultModal from './DuelResultModal' @@ -55,16 +53,9 @@ jest.mock('utils/utils', () => { jest.mock('components/Duel/DuelChart', () => 'mock-duelchart') jest.mock('components/Duel/DuelResultModal', () => 'mock-duelModal') -const mockStore = configureStore([]) - describe('DuelOngoing component', () => { + const store = createMockEcolyoStore() it('should be rendered correctly', async () => { - const store = mockStore({ - ecolyo: { - global: globalStateData, - challenge: challengeStateData, - }, - }) mockIsChallengeDone.mockResolvedValue({ isDone: false, isWin: false, @@ -87,12 +78,6 @@ describe('DuelOngoing component', () => { }) it('should display the result Modal when duel is done', async () => { - const store = mockStore({ - ecolyo: { - global: globalStateData, - challenge: challengeStateData, - }, - }) const updatedUserChallenge: UserChallenge = { ...userChallengeData[0], state: UserChallengeState.DUEL, diff --git a/src/components/Duel/DuelResultModal.spec.tsx b/src/components/Duel/DuelResultModal.spec.tsx index 42447533e..2025ed96b 100644 --- a/src/components/Duel/DuelResultModal.spec.tsx +++ b/src/components/Duel/DuelResultModal.spec.tsx @@ -1,10 +1,6 @@ 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 DuelResultModal from './DuelResultModal' @@ -30,50 +26,31 @@ jest.mock('utils/utils', () => { }), } }) -const mockStore = configureStore([]) describe('DuelResultModal component', () => { it('should render correctly', async () => { - const store = mockStore({ - ecolyo: { - challenge: userChallengeData[1], - global: { ...globalStateData, fluidTypes: [0, 1, 2] }, - profile: profileData, - }, - }) mockImportIconById.mockReturnValue('') const wrapper = mount( - <Provider store={store}> - <DuelResultModal - open={true} - handleCloseClick={jest.fn()} - userChallenge={userChallengeData[1]} - win={true} - /> - </Provider> + <DuelResultModal + open={true} + handleCloseClick={jest.fn()} + userChallenge={userChallengeData[1]} + win={true} + /> ) await waitForComponentToPaint(wrapper) expect(toJson(wrapper)).toMatchSnapshot() }) it('should render a loss modal', async () => { - const store = mockStore({ - ecolyo: { - challenge: userChallengeData[1], - global: { ...globalStateData, fluidTypes: [0, 1, 2] }, - profile: profileData, - }, - }) mockImportIconById.mockReturnValue('') const wrapper = mount( - <Provider store={store}> - <DuelResultModal - open={true} - handleCloseClick={jest.fn()} - userChallenge={userChallengeData[1]} - win={false} - /> - </Provider> + <DuelResultModal + open={true} + handleCloseClick={jest.fn()} + userChallenge={userChallengeData[1]} + win={false} + /> ) await waitForComponentToPaint(wrapper) expect(wrapper.find('.title').text()).toBe('duel_result_modal.lost.title') diff --git a/src/components/Duel/DuelUnlocked.spec.tsx b/src/components/Duel/DuelUnlocked.spec.tsx index cf155a120..3fa783215 100644 --- a/src/components/Duel/DuelUnlocked.spec.tsx +++ b/src/components/Duel/DuelUnlocked.spec.tsx @@ -7,10 +7,12 @@ import { UserChallengeUpdateFlag } from 'enum/userChallenge.enum' import { mount } from 'enzyme' import React from 'react' import { Provider } from 'react-redux' -import configureStore from 'redux-mock-store' import UsageEventService from 'services/usageEvent.service' import { formatNumberValues } from 'utils/utils' -import { globalStateData } from '../../../tests/__mocks__/globalStateData.mock' +import { + createMockEcolyoStore, + mockGlobalState, +} from '../../../tests/__mocks__/store' import { userChallengeData } from '../../../tests/__mocks__/userChallengeData.mock' jest.mock('cozy-ui/transpiled/react/I18n', () => { @@ -49,8 +51,6 @@ const mockAddEvent = jest.fn() jest.mock('services/usageEvent.service') UsageEventService.addEvent = mockAddEvent -const mockStore = configureStore([]) - describe('DuelUnlocked component', () => { beforeAll(() => { jest.useFakeTimers() @@ -59,13 +59,9 @@ describe('DuelUnlocked component', () => { afterAll(() => { jest.useRealTimers() }) + const store = createMockEcolyoStore() it('should be rendered correctly', () => { - const store = mockStore({ - ecolyo: { - global: globalStateData, - }, - }) const average: string = formatNumberValues( userChallengeData[1].duel.threshold ).toString() @@ -88,13 +84,10 @@ describe('DuelUnlocked component', () => { }) it('should update userChallenge when launching duel with configured fluid', () => { - const updateGlobalStoreData = { - ...globalStateData, - fluidTypes: [FluidType.ELECTRICITY], - } - const store = mockStore({ - ecolyo: { - global: updateGlobalStoreData, + const store = createMockEcolyoStore({ + global: { + ...mockGlobalState, + fluidTypes: [FluidType.ELECTRICITY], }, }) const wrapper = mount( diff --git a/src/components/Duel/DuelView.spec.tsx b/src/components/Duel/DuelView.spec.tsx index 4f079d5f2..aa1c26362 100644 --- a/src/components/Duel/DuelView.spec.tsx +++ b/src/components/Duel/DuelView.spec.tsx @@ -1,10 +1,14 @@ import DuelView from 'components/Duel/DuelView' import { UserChallengeState } from 'enum/userChallenge.enum' import { UserDuelState } from 'enum/userDuel.enum' -import { shallow } from 'enzyme' +import { mount } from 'enzyme' import React from 'react' -import * as reactRedux from 'react-redux' +import { Provider } from 'react-redux' import { challengeStateData } from '../../../tests/__mocks__/challengeStateData.mock' +import { + createMockEcolyoStore, + mockChartState, +} from '../../../tests/__mocks__/store' import { userChallengeData } from '../../../tests/__mocks__/userChallengeData.mock' import DuelError from './DuelError' import DuelOngoing from './DuelOngoing' @@ -14,8 +18,6 @@ jest.mock('components/Header/CozyBar', () => 'mock-cozybar') jest.mock('components/Header/Header', () => 'mock-header') jest.mock('components/Content/Content', () => 'mock-content') -const mockUseSelector = jest.spyOn(reactRedux, 'useSelector') - const mockedNavigate = jest.fn() jest.mock('react-router-dom', () => ({ useLocation: () => ({ @@ -24,10 +26,24 @@ jest.mock('react-router-dom', () => ({ useNavigate: () => mockedNavigate, })) +jest.mock('cozy-ui/transpiled/react/I18n', () => { + return { + useI18n: jest.fn(() => { + return { + t: (str: string) => str, + } + }), + } +}) + describe('DuelView component', () => { it('should be rendered with DuelError component when no current challenge', () => { - mockUseSelector.mockReturnValue(challengeStateData) - const wrapper = shallow(<DuelView />) + const store = createMockEcolyoStore({ challenge: challengeStateData }) + const wrapper = mount( + <Provider store={store}> + <DuelView /> + </Provider> + ) expect(wrapper.find(DuelError).exists()).toBeTruthy() }) @@ -43,8 +59,15 @@ describe('DuelView component', () => { currentChallenge: updatedUserChallenge, } updatedChallengeState.userChallengeList[1] = updatedUserChallenge - mockUseSelector.mockReturnValue(updatedChallengeState) - const wrapper = shallow(<DuelView />) + const store = createMockEcolyoStore({ + challenge: updatedChallengeState, + chart: mockChartState, + }) + const wrapper = mount( + <Provider store={store}> + <DuelView /> + </Provider> + ) expect(wrapper.find(DuelOngoing).exists()).toBeTruthy() }) @@ -60,8 +83,12 @@ describe('DuelView component', () => { currentChallenge: updatedUserChallenge, } updatedChallengeState.userChallengeList[1] = updatedUserChallenge - mockUseSelector.mockReturnValue(updatedChallengeState) - const wrapper = shallow(<DuelView />) + const store = createMockEcolyoStore({ challenge: updatedChallengeState }) + const wrapper = mount( + <Provider store={store}> + <DuelView /> + </Provider> + ) expect(wrapper.find(DuelError).exists()).toBeTruthy() }) @@ -76,8 +103,12 @@ describe('DuelView component', () => { currentChallenge: updatedUserChallenge, } updatedChallengeState.userChallengeList[1] = updatedUserChallenge - mockUseSelector.mockReturnValue(updatedChallengeState) - const wrapper = shallow(<DuelView />) + const store = createMockEcolyoStore({ challenge: updatedChallengeState }) + const wrapper = mount( + <Provider store={store}> + <DuelView /> + </Provider> + ) expect(wrapper.find(DuelError).exists()).toBeTruthy() }) @@ -93,8 +124,12 @@ describe('DuelView component', () => { currentChallenge: updatedUserChallenge, } updatedChallengeState.userChallengeList[1] = updatedUserChallenge - mockUseSelector.mockReturnValue(updatedChallengeState) - const wrapper = shallow(<DuelView />) + const store = createMockEcolyoStore({ challenge: updatedChallengeState }) + const wrapper = mount( + <Provider store={store}> + <DuelView /> + </Provider> + ) expect(wrapper.find(DuelUnlocked).exists()).toBeTruthy() }) @@ -110,8 +145,15 @@ describe('DuelView component', () => { currentChallenge: updatedUserChallenge, } updatedChallengeState.userChallengeList[1] = updatedUserChallenge - mockUseSelector.mockReturnValue(updatedChallengeState) - const wrapper = shallow(<DuelView />) + const store = createMockEcolyoStore({ + challenge: updatedChallengeState, + chart: mockChartState, + }) + const wrapper = mount( + <Provider store={store}> + <DuelView /> + </Provider> + ) expect(wrapper.find(DuelOngoing).exists()).toBeTruthy() }) }) diff --git a/src/components/Duel/__snapshots__/DuelResultModal.spec.tsx.snap b/src/components/Duel/__snapshots__/DuelResultModal.spec.tsx.snap index bbffacde1..4a87bdd34 100644 --- a/src/components/Duel/__snapshots__/DuelResultModal.spec.tsx.snap +++ b/src/components/Duel/__snapshots__/DuelResultModal.spec.tsx.snap @@ -1,653 +1,657 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP exports[`DuelResultModal component should render correctly 1`] = ` -<Provider - store={ +<DuelResultModal + handleCloseClick={[MockFunction]} + open={true} + userChallenge={ 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, + "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, }, - "quiz": Object { - "customQuestion": Object { - "interval": 20, - "period": Object {}, - "questionLabel": "Custom1", + "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, - "singleFluid": false, - "timeStep": 20, - "type": 0, + "source": "string", }, - "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, - }, + 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": 4, - "success": 1, - "target": 15, - "title": "Challenge 2", + "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", } } - win={true} + onClose={[MockFunction]} + open={true} > - <WithStyles(ForwardRef(Dialog)) + <ForwardRef(Dialog) aria-labelledby="accessibility-title" classes={ Object { - "paper": "modal-paper blue-border", - "root": "modal-root", + "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(Dialog) - aria-labelledby="accessibility-title" - classes={ + <ForwardRef(Modal) + BackdropComponent={ 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), - "Naked": Object { - "$$typeof": Symbol(react.forward_ref), - "propTypes": Object { - "children": [Function], - "className": [Function], - "classes": [Function], - "invisible": [Function], - "open": [Function], - "transitionDuration": [Function], - }, - "render": [Function], + "propTypes": Object { + "children": [Function], + "className": [Function], + "classes": [Function], + "invisible": [Function], + "open": [Function], + "transitionDuration": [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, - }, + "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, }, - "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)", + "width": [Function], + }, + "direction": "ltr", + "mixins": Object { + "gutters": [Function], + "toolbar": Object { + "@media (min-width:0px) and (orientation: landscape)": Object { + "minHeight": 48, }, - "tonalOffset": 0.2, - "type": "light", - "warning": Object { - "contrastText": "rgba(0, 0, 0, 0.87)", - "dark": "#f57c00", - "light": "#ffb74d", - "main": "#ff9800", + "@media (min-width:600px)": Object { + "minHeight": 64, }, + "minHeight": 56, }, - "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, + }, + "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, }, - "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], + "augmentColor": [Function], + "background": Object { + "default": "#fafafa", + "paper": "#fff", }, - "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, - }, + "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": 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, - }, + "fontSize": "1rem", + "fontWeight": 400, + "letterSpacing": "0.00938em", + "lineHeight": 1.5, }, - "zIndex": Object { - "appBar": 1100, - "drawer": 1200, - "mobileStepper": 1000, - "modal": 1300, - "snackbar": 1400, - "speedDial": 1050, - "tooltip": 1500, + "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, }, }, - "name": "MuiBackdrop", - }, - "propTypes": Object { - "classes": [Function], - "innerRef": [Function], + "zIndex": Object { + "appBar": 1100, + "drawer": 1200, + "mobileStepper": 1000, + "modal": 1300, + "snackbar": 1400, + "speedDial": 1050, + "tooltip": 1500, + }, }, - "render": [Function], - "useStyles": [Function], - } + "name": "MuiBackdrop", + }, + "propTypes": Object { + "classes": [Function], + "innerRef": [Function], + }, + "render": [Function], + "useStyles": [Function], } - BackdropProps={ - Object { - "transitionDuration": Object { - "enter": 225, - "exit": 195, - }, - } + } + BackdropProps={ + Object { + "transitionDuration": Object { + "enter": 225, + "exit": 195, + }, } - className="MuiDialog-root modal-root" - closeAfterTransition={true} - disableEscapeKeyDown={false} - onClose={[MockFunction]} - open={true} + } + className="MuiDialog-root modal-root" + closeAfterTransition={true} + disableEscapeKeyDown={false} + onClose={[MockFunction]} + open={true} + > + <ForwardRef(Portal) + disablePortal={false} > - <ForwardRef(Portal) - disablePortal={false} - > - <Portal - containerInfo={ - <body - style="padding-right: 0px; overflow: hidden;" + <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 - class="MuiDialog-root modal-root" - role="presentation" - style="position: fixed; z-index: 1300; right: 0px; bottom: 0px; top: 0px; left: 0px;" + 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-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" + aria-labelledby="accessibility-title" + class="MuiPaper-root MuiDialog-paper modal-paper blue-border MuiDialog-paperScrollPaper MuiDialog-paperWidthSm MuiPaper-elevation24 MuiPaper-rounded" + role="dialog" > <div - aria-labelledby="accessibility-title" - class="MuiPaper-root MuiDialog-paper modal-paper blue-border MuiDialog-paperScrollPaper MuiDialog-paperWidthSm MuiPaper-elevation24 MuiPaper-rounded" - role="dialog" + id="accessibility-title" + > + duel_result_modal.accessibility.window_title + </div> + <div + class="duel-result-modal-root " > <div - id="accessibility-title" + class="imgResultContainer" > - duel_result_modal.accessibility.window_title + <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="duel-result-modal-root " + class="text-28-normal-uppercase title" > - <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 () { + 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 + 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 - data-test="sentinelEnd" - tabindex="0" - /> </div> - </body> + <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, + } } > - <div - className="MuiDialog-root modal-root" - onKeyDown={[Function]} - role="presentation" - style={ + <WithStyles(ForwardRef(Backdrop)) + onClick={[Function]} + open={true} + transitionDuration={ Object { - "bottom": 0, - "left": 0, - "position": "fixed", - "right": 0, - "top": 0, - "zIndex": 1300, + "enter": 225, + "exit": 195, } } > - <WithStyles(ForwardRef(Backdrop)) + <ForwardRef(Backdrop) + classes={ + Object { + "invisible": "MuiBackdrop-invisible", + "root": "MuiBackdrop-root", + } + } onClick={[Function]} open={true} transitionDuration={ @@ -657,85 +661,90 @@ exports[`DuelResultModal component should render correctly 1`] = ` } } > - <ForwardRef(Backdrop) - classes={ - Object { - "invisible": "MuiBackdrop-invisible", - "root": "MuiBackdrop-root", - } - } + <ForwardRef(Fade) + in={true} onClick={[Function]} - open={true} - transitionDuration={ + timeout={ Object { "enter": 225, "exit": 195, } } > - <ForwardRef(Fade) + <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} > - <Transition - appear={true} - enter={true} - exit={true} - in={true} - mountOnEnter={false} + <div + aria-hidden={true} + className="MuiBackdrop-root" onClick={[Function]} - onEnter={[Function]} - onEntered={[Function]} - onEntering={[Function]} - onExit={[Function]} - onExited={[Function]} - onExiting={[Function]} - timeout={ + style={ Object { - "enter": 225, - "exit": 195, + "opacity": 1, + "visibility": undefined, } } - 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} + /> + </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, + } + } > - <div - data-test="sentinelStart" - tabIndex={0} - /> - <ForwardRef(Fade) + <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={ @@ -744,220 +753,216 @@ exports[`DuelResultModal component should render correctly 1`] = ` "exit": 195, } } + unmountOnExit={false} > - <Transition - appear={true} - enter={true} - exit={true} - in={true} - mountOnEnter={false} - onEnter={[Function]} - onEntered={[Function]} - onEntering={[Function]} - onExit={[Function]} - onExited={[Function]} - onExiting={[Function]} + <div + className="MuiDialog-container MuiDialog-scrollPaper" + onMouseDown={[Function]} + onMouseUp={[Function]} role="none presentation" - tabIndex="-1" - timeout={ + style={ Object { - "enter": 225, - "exit": 195, + "opacity": 1, + "visibility": undefined, } } - unmountOnExit={false} + tabIndex="-1" > - <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" > - <WithStyles(ForwardRef(Paper)) + <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" > - <ForwardRef(Paper) + <div 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} + className="MuiPaper-root MuiDialog-paper modal-paper blue-border MuiDialog-paperScrollPaper MuiDialog-paperWidthSm MuiPaper-elevation24 MuiPaper-rounded" 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" + id="accessibility-title" + > + duel_result_modal.accessibility.window_title + </div> + <div + className="duel-result-modal-root " > <div - id="accessibility-title" - > - duel_result_modal.accessibility.window_title - </div> - <div - className="duel-result-modal-root " + className="imgResultContainer" > - <div - className="imgResultContainer" + <Icon + className="challengeWon" + icon="test-file-stub" + size={300} + spin={false} > - <Icon - className="challengeWon" - icon="test-file-stub" - size={300} - spin={false} + <Component + className="challengeWon styles__icon___23x3R" + height={300} + style={Object {}} + width={300} > - <Component + <svg 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} + <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} > - <Component + <svg 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 () { + <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)) + </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 { - "label": "text-16-normal", - "root": "btn-secondary-negative", + "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]} > - <ForwardRef(Button) + <WithStyles(ForwardRef(ButtonBase)) 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", - } - } + className="MuiButton-root btn-secondary-negative MuiButton-text button" + component="button" + disabled={false} + focusRipple={true} + focusVisibleClassName="Mui-focusVisible" onClick={[MockFunction]} + type="button" > - <WithStyles(ForwardRef(ButtonBase)) + <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} @@ -965,98 +970,80 @@ exports[`DuelResultModal component should render correctly 1`] = ` onClick={[MockFunction]} type="button" > - <ForwardRef(ButtonBase) + <button 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" + className="MuiButtonBase-root MuiButton-root btn-secondary-negative MuiButton-text button" disabled={false} - focusRipple={true} - focusVisibleClassName="Mui-focusVisible" + 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" > - <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" > - <span - className="MuiButton-label text-16-normal" - > - duel_result_modal.sucess.button_validate - </span> - <WithStyles(memo) + duel_result_modal.sucess.button_validate + </span> + <WithStyles(memo) + center={false} + > + <ForwardRef(TouchRipple) 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", - } + 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" > - <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> + <TransitionGroup + childFactory={[Function]} + component={null} + exit={true} + /> + </span> + </ForwardRef(TouchRipple)> + </WithStyles(memo)> + </button> + </ForwardRef(ButtonBase)> + </WithStyles(ForwardRef(ButtonBase))> + </ForwardRef(Button)> + </WithStyles(ForwardRef(Button))> </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> + </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> `; diff --git a/src/components/Ecogesture/EcogestureCard.spec.tsx b/src/components/Ecogesture/EcogestureCard.spec.tsx index 45f811327..b27adc651 100644 --- a/src/components/Ecogesture/EcogestureCard.spec.tsx +++ b/src/components/Ecogesture/EcogestureCard.spec.tsx @@ -3,11 +3,8 @@ import EcogestureCard from 'components/Ecogesture/EcogestureCard' import { mount } from 'enzyme' import toJson from 'enzyme-to-json' import React from 'react' -import { Provider } from 'react-redux' import { BrowserRouter } from 'react-router-dom' -import configureStore from 'redux-mock-store' 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', () => { @@ -31,43 +28,25 @@ jest.mock('utils/utils', () => { } }) -const mockStore = configureStore([]) - describe('EcogestureCard component', () => { it('should be rendered correctly', async () => { - const store = mockStore({ - ecolyo: { - global: globalStateData, - }, - }) mockImportIconById.mockReturnValueOnce('') const wrapper = mount( - <Provider store={store}> - <BrowserRouter> - <EcogestureCard ecogesture={mockedEcogesturesData[0]} /> - </BrowserRouter> - </Provider> + <BrowserRouter> + <EcogestureCard ecogesture={mockedEcogesturesData[0]} /> + </BrowserRouter> ) await waitForComponentToPaint(wrapper) - expect(toJson(wrapper)).toMatchSnapshot() }) it('should be with default icon', async () => { - const store = mockStore({ - ecolyo: { - global: globalStateData, - }, - }) mockImportIconById.mockReturnValue(undefined) const wrapper = mount( - <Provider store={store}> - <BrowserRouter> - <EcogestureCard ecogesture={mockedEcogesturesData[0]} /> - </BrowserRouter> - </Provider> + <BrowserRouter> + <EcogestureCard ecogesture={mockedEcogesturesData[0]} /> + </BrowserRouter> ) await waitForComponentToPaint(wrapper) - expect(wrapper.find('.Icon').exists()).toBeTruthy() }) }) diff --git a/src/components/Ecogesture/EcogestureEmptyList.spec.tsx b/src/components/Ecogesture/EcogestureEmptyList.spec.tsx index 8f609d629..41980af0f 100644 --- a/src/components/Ecogesture/EcogestureEmptyList.spec.tsx +++ b/src/components/Ecogesture/EcogestureEmptyList.spec.tsx @@ -2,10 +2,6 @@ import Button from '@material-ui/core/Button' 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 EcogestureEmptyList from './EcogestureEmptyList' jest.mock('cozy-ui/transpiled/react/I18n', () => { @@ -21,110 +17,68 @@ jest.mock('react-router-dom', () => ({ ...jest.requireActual('react-router-dom'), useNavigate: () => mockedNavigate, })) -const mockStore = configureStore([]) const mockedNavigate = jest.fn() const mockChangeTab = jest.fn() const mockHandleClick = jest.fn() + describe('EcogestureEmptyList component', () => { it('should be rendered correctly', () => { - const store = mockStore({ - ecolyo: { - profile: profileData, - global: globalStateData, - }, - }) const wrapper = mount( - <Provider store={store}> - <EcogestureEmptyList - setTab={mockChangeTab} - isObjective={true} - isSelectionDone={false} - handleReinitClick={mockHandleClick} - /> - </Provider> + <EcogestureEmptyList + setTab={mockChangeTab} + isObjective={true} + isSelectionDone={false} + handleReinitClick={mockHandleClick} + /> ) expect(toJson(wrapper)).toMatchSnapshot() }) it('should return to all ecogestures', () => { - const store = mockStore({ - ecolyo: { - profile: profileData, - global: globalStateData, - }, - }) const wrapper = mount( - <Provider store={store}> - <EcogestureEmptyList - setTab={mockChangeTab} - isObjective={false} - isSelectionDone={true} - handleReinitClick={mockHandleClick} - /> - </Provider> + <EcogestureEmptyList + setTab={mockChangeTab} + isObjective={false} + isSelectionDone={true} + handleReinitClick={mockHandleClick} + /> ) wrapper.find(Button).first().simulate('click') expect(mockChangeTab).toHaveBeenCalledTimes(1) }) it('should launch ecogesture form', () => { - const store = mockStore({ - ecolyo: { - profile: profileData, - global: globalStateData, - }, - }) const wrapper = mount( - <Provider store={store}> - <EcogestureEmptyList - setTab={mockChangeTab} - isObjective={false} - isSelectionDone={false} - handleReinitClick={mockHandleClick} - /> - </Provider> + <EcogestureEmptyList + setTab={mockChangeTab} + isObjective={false} + isSelectionDone={false} + handleReinitClick={mockHandleClick} + /> ) wrapper.find(Button).at(1).simulate('click') expect(mockedNavigate).toHaveBeenCalledWith('/ecogesture-form') }) it('should render doing text with empty list on completed selection', () => { - const store = mockStore({ - ecolyo: { - profile: profileData, - global: globalStateData, - }, - }) const wrapper = mount( - <Provider store={store}> - <EcogestureEmptyList - setTab={mockChangeTab} - isObjective={false} - isSelectionDone={true} - handleReinitClick={mockHandleClick} - /> - </Provider> + <EcogestureEmptyList + setTab={mockChangeTab} + isObjective={false} + isSelectionDone={true} + handleReinitClick={mockHandleClick} + /> ) - expect(wrapper.find('.text').first().text()).toBe( 'ecogesture.emptyList.doing1_done' ) }) it('should render objective text with empty list on completed selection', () => { - const store = mockStore({ - ecolyo: { - profile: profileData, - global: globalStateData, - }, - }) const wrapper = mount( - <Provider store={store}> - <EcogestureEmptyList - setTab={mockChangeTab} - isObjective={true} - isSelectionDone={true} - handleReinitClick={mockHandleClick} - /> - </Provider> + <EcogestureEmptyList + setTab={mockChangeTab} + isObjective={true} + isSelectionDone={true} + handleReinitClick={mockHandleClick} + /> ) - expect(wrapper.find('.text').first().text()).toBe( 'ecogesture.emptyList.obj1_done' ) diff --git a/src/components/Ecogesture/EcogestureInitModal.spec.tsx b/src/components/Ecogesture/EcogestureInitModal.spec.tsx index b6f92fd6d..a3e1543ac 100644 --- a/src/components/Ecogesture/EcogestureInitModal.spec.tsx +++ b/src/components/Ecogesture/EcogestureInitModal.spec.tsx @@ -2,11 +2,6 @@ import { Button } from '@material-ui/core' 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 { challengeStateData } from '../../../tests/__mocks__/challengeStateData.mock' -import { globalStateData } from '../../../tests/__mocks__/globalStateData.mock' -import { mockInitialProfileState } from '../../../tests/__mocks__/store' import EcogestureInitModal from './EcogestureInitModal' jest.mock('cozy-ui/transpiled/react/I18n', () => { @@ -34,68 +29,37 @@ jest.mock('react-router-dom', () => ({ }), })) -const mockStore = configureStore([]) const mockHandleClose = jest.fn() const mockHandleLaunchForm = jest.fn() describe('EcogestureInitModal component', () => { it('should be rendered correctly', () => { - const store = mockStore({ - ecolyo: { - global: globalStateData, - profile: mockInitialProfileState, - challenge: challengeStateData, - }, - }) - const wrapper = mount( - <Provider store={store}> - <EcogestureInitModal - open={true} - handleCloseClick={mockHandleClose} - handleLaunchForm={mockHandleLaunchForm} - /> - </Provider> + <EcogestureInitModal + open={true} + handleCloseClick={mockHandleClose} + handleLaunchForm={mockHandleLaunchForm} + /> ) expect(toJson(wrapper)).toMatchSnapshot() }) it('should close modal ', () => { - const store = mockStore({ - ecolyo: { - global: globalStateData, - challenge: challengeStateData, - profile: mockInitialProfileState, - }, - }) - const wrapper = mount( - <Provider store={store}> - <EcogestureInitModal - open={true} - handleCloseClick={mockHandleClose} - handleLaunchForm={mockHandleLaunchForm} - /> - </Provider> + <EcogestureInitModal + open={true} + handleCloseClick={mockHandleClose} + handleLaunchForm={mockHandleLaunchForm} + /> ) wrapper.find(Button).first().simulate('click') expect(mockHandleClose).toHaveBeenCalledTimes(1) }) - it('should close modal and maunch form', async () => { - const store = mockStore({ - ecolyo: { - global: globalStateData, - profile: mockInitialProfileState, - challenge: challengeStateData, - }, - }) - + it('should close modal and launch form', async () => { const wrapper = mount( - <Provider store={store}> - <EcogestureInitModal - open={true} - handleCloseClick={mockHandleClose} - handleLaunchForm={mockHandleLaunchForm} - /> - </Provider> + <EcogestureInitModal + open={true} + handleCloseClick={mockHandleClose} + handleLaunchForm={mockHandleLaunchForm} + /> ) wrapper.find(Button).at(1).simulate('click') expect(mockHandleLaunchForm).toHaveBeenCalledTimes(1) diff --git a/src/components/Ecogesture/EcogestureList.spec.tsx b/src/components/Ecogesture/EcogestureList.spec.tsx index 68b746407..0e14bb67e 100644 --- a/src/components/Ecogesture/EcogestureList.spec.tsx +++ b/src/components/Ecogesture/EcogestureList.spec.tsx @@ -3,12 +3,8 @@ import EcogestureList from 'components/Ecogesture/EcogestureList' import { mount } from 'enzyme' import toJson from 'enzyme-to-json' import React from 'react' -import { Provider } from 'react-redux' import { BrowserRouter } from 'react-router-dom' -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', () => { @@ -22,52 +18,35 @@ jest.mock('cozy-ui/transpiled/react/I18n', () => { }) jest.mock('components/Ecogesture/EcogestureCard', () => 'mock-ecogesturecard') -const mockStore = configureStore([]) const mockHandleReinit = jest.fn() describe('EcogesturesList component', () => { it('should be rendered correctly', async () => { - const store = mockStore({ - ecolyo: { - global: globalStateData, - challenge: challengeStateData, - }, - }) const wrapper = mount( - <Provider store={store}> - <BrowserRouter> - <EcogestureList - list={mockedEcogesturesData} - displaySelection={false} - selectionTotal={0} - selectionViewed={0} - handleReinitClick={mockHandleReinit} - /> - </BrowserRouter> - </Provider> + <BrowserRouter> + <EcogestureList + list={mockedEcogesturesData} + displaySelection={false} + selectionTotal={0} + selectionViewed={0} + handleReinitClick={mockHandleReinit} + /> + </BrowserRouter> ) await waitForComponentToPaint(wrapper) expect(toJson(wrapper)).toMatchSnapshot() }) it('should open the filter menu and select all ecogesture', async () => { - const store = mockStore({ - ecolyo: { - global: globalStateData, - challenge: challengeStateData, - }, - }) const wrapper = mount( - <Provider store={store}> - <BrowserRouter> - <EcogestureList - list={mockedEcogesturesData} - displaySelection={false} - selectionTotal={0} - selectionViewed={0} - /> - </BrowserRouter> - </Provider> + <BrowserRouter> + <EcogestureList + list={mockedEcogesturesData} + displaySelection={false} + selectionTotal={0} + selectionViewed={0} + /> + </BrowserRouter> ) await waitForComponentToPaint(wrapper) wrapper.find('.filter-button').simulate('click') @@ -78,23 +57,15 @@ describe('EcogesturesList component', () => { }) it('should display the selection section', async () => { - const store = mockStore({ - ecolyo: { - global: globalStateData, - challenge: challengeStateData, - }, - }) const wrapper = mount( - <Provider store={store}> - <BrowserRouter> - <EcogestureList - list={mockedEcogesturesData} - displaySelection={true} - selectionTotal={50} - selectionViewed={10} - /> - </BrowserRouter> - </Provider> + <BrowserRouter> + <EcogestureList + list={mockedEcogesturesData} + displaySelection={true} + selectionTotal={50} + selectionViewed={10} + /> + </BrowserRouter> ) await waitForComponentToPaint(wrapper) expect(wrapper.find('.selection').exists()).toBeTruthy() diff --git a/src/components/Ecogesture/EcogestureModal.spec.tsx b/src/components/Ecogesture/EcogestureModal.spec.tsx index d54252aae..fb3cf25ff 100644 --- a/src/components/Ecogesture/EcogestureModal.spec.tsx +++ b/src/components/Ecogesture/EcogestureModal.spec.tsx @@ -2,10 +2,8 @@ import EcogestureModal from 'components/Ecogesture/EcogestureModal' import { mount } from 'enzyme' import React from 'react' 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 { createMockEcolyoStore } from '../../../tests/__mocks__/store' import { waitForComponentToPaint } from '../../../tests/__mocks__/testUtils' jest.mock('cozy-ui/transpiled/react/I18n', () => { @@ -26,17 +24,9 @@ jest.mock('utils/utils', () => { } }) -const mockStore = configureStore([]) - describe('EcogestureModal component', () => { it('should be rendered correctly', async () => { - const store = mockStore({ - ecolyo: { - global: globalStateData, - challenge: challengeStateData, - }, - }) - + const store = createMockEcolyoStore() const wrapper = mount( <Provider store={store}> <EcogestureModal diff --git a/src/components/Ecogesture/EcogestureReinitModal.spec.tsx b/src/components/Ecogesture/EcogestureReinitModal.spec.tsx index 8dce007bf..2e91ba2e6 100644 --- a/src/components/Ecogesture/EcogestureReinitModal.spec.tsx +++ b/src/components/Ecogesture/EcogestureReinitModal.spec.tsx @@ -1,10 +1,6 @@ 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 { challengeStateData } from '../../../tests/__mocks__/challengeStateData.mock' -import { globalStateData } from '../../../tests/__mocks__/globalStateData.mock' import EcogestureReinitModal from './EcogestureReinitModal' jest.mock('cozy-ui/transpiled/react/I18n', () => { @@ -25,25 +21,14 @@ jest.mock('utils/utils', () => { } }) -const mockStore = configureStore([]) - describe('EcogestureReinitModal component', () => { it('should be rendered correctly', async () => { - const store = mockStore({ - ecolyo: { - global: globalStateData, - challenge: challengeStateData, - }, - }) - const wrapper = mount( - <Provider store={store}> - <EcogestureReinitModal - open={true} - handleCloseClick={jest.fn()} - handleLaunchReinit={jest.fn()} - /> - </Provider> + <EcogestureReinitModal + open={true} + handleCloseClick={jest.fn()} + handleLaunchReinit={jest.fn()} + /> ) expect(toJson(wrapper)).toMatchSnapshot() }) diff --git a/src/components/Ecogesture/EcogestureView.spec.tsx b/src/components/Ecogesture/EcogestureView.spec.tsx index 3a2c6b131..47454b07a 100644 --- a/src/components/Ecogesture/EcogestureView.spec.tsx +++ b/src/components/Ecogesture/EcogestureView.spec.tsx @@ -4,14 +4,10 @@ import { Season } from 'enum/ecogesture.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' import * as profileActions from 'store/profile/profile.actions' import { mockedEcogesturesData } from '../../../tests/__mocks__/ecogesturesData.mock' -import { - createMockEcolyoStore, - mockInitialProfileState, -} from '../../../tests/__mocks__/store' +import { createMockEcolyoStore } from '../../../tests/__mocks__/store' import { waitForComponentToPaint } from '../../../tests/__mocks__/testUtils' import EcogestureEmptyList from './EcogestureEmptyList' import EcogestureInitModal from './EcogestureInitModal' @@ -60,7 +56,6 @@ jest.mock('utils/utils', () => { }), } }) -const useSelectorSpy = jest.spyOn(reactRedux, 'useSelector') const mockedNavigate = jest.fn() jest.mock('react-router-dom', () => ({ ...jest.requireActual('react-router-dom'), @@ -80,12 +75,6 @@ describe('EcogestureView component', () => { mockGetAllEcogestures.mockClear() mockGetEcogestureListByProfile.mockClear() - useSelectorSpy.mockReturnValue({ - profile: mockInitialProfileState, - isProfileTypeCompleted: true, - haveSeenEcogestureModal: true, - }) - mockInitEcogesture.mockResolvedValue(mockedEcogesturesData) mockGetSeason.mockReturnValue(Season.WINTER) mockGetEcogestureListByProfile.mockResolvedValue([]) diff --git a/src/components/Ecogesture/EcogestureView.tsx b/src/components/Ecogesture/EcogestureView.tsx index afc1e1fe9..2ec75eacf 100644 --- a/src/components/Ecogesture/EcogestureView.tsx +++ b/src/components/Ecogesture/EcogestureView.tsx @@ -45,9 +45,8 @@ const EcogestureView = () => { } const { t } = useI18n() const client = useClient() - const dispatch = useDispatch<Dispatch<AppActionsTypes>>() const tab = new URLSearchParams(useLocation().search).get('tab') - + const dispatch = useDispatch<Dispatch<AppActionsTypes>>() const { profile, profileEcogesture, profileType } = useSelector( (state: AppStore) => state.ecolyo ) diff --git a/src/components/Ecogesture/EfficiencyRating.spec.tsx b/src/components/Ecogesture/EfficiencyRating.spec.tsx index 4cf025b1f..1d3651780 100644 --- a/src/components/Ecogesture/EfficiencyRating.spec.tsx +++ b/src/components/Ecogesture/EfficiencyRating.spec.tsx @@ -2,10 +2,6 @@ import EfficiencyRating from 'components/Ecogesture/EfficiencyRating' 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 { challengeStateData } from '../../../tests/__mocks__/challengeStateData.mock' -import { globalStateData } from '../../../tests/__mocks__/globalStateData.mock' jest.mock('cozy-ui/transpiled/react/I18n', () => { return { @@ -17,21 +13,9 @@ jest.mock('cozy-ui/transpiled/react/I18n', () => { } }) -const mockStore = configureStore([]) - describe('EfficiencyRating component', () => { it('should be rendered correctly', () => { - const store = mockStore({ - ecolyo: { - global: globalStateData, - challenge: challengeStateData, - }, - }) - const wrapper = mount( - <Provider store={store}> - <EfficiencyRating result={3} /> - </Provider> - ) + const wrapper = mount(<EfficiencyRating result={3} />) expect(toJson(wrapper)).toMatchSnapshot() }) }) diff --git a/src/components/Ecogesture/SingleEcogesture.spec.tsx b/src/components/Ecogesture/SingleEcogesture.spec.tsx index 38942976a..9553d54f0 100644 --- a/src/components/Ecogesture/SingleEcogesture.spec.tsx +++ b/src/components/Ecogesture/SingleEcogesture.spec.tsx @@ -4,10 +4,8 @@ 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 { challengeStateData } from '../../../tests/__mocks__/challengeStateData.mock' import { mockedEcogesturesData } from '../../../tests/__mocks__/ecogesturesData.mock' -import { globalStateData } from '../../../tests/__mocks__/globalStateData.mock' +import { createMockEcolyoStore } from '../../../tests/__mocks__/store' import { waitForComponentToPaint } from '../../../tests/__mocks__/testUtils' jest.mock('cozy-ui/transpiled/react/I18n', () => { @@ -59,17 +57,9 @@ jest.mock('services/ecogesture.service', () => { }) }) -const mockStore = configureStore([]) - describe('SingleEcogesture component', () => { + const store = createMockEcolyoStore() it('should be rendered correctly', async () => { - const store = mockStore({ - ecolyo: { - global: globalStateData, - challenge: challengeStateData, - }, - }) - mockGetEcogesturesByIds.mockResolvedValue([mockedEcogesturesData[0]]) const wrapper = mount( <Provider store={store}> @@ -81,13 +71,6 @@ describe('SingleEcogesture component', () => { }) it('should change doing status', async () => { - const store = mockStore({ - ecolyo: { - global: globalStateData, - challenge: challengeStateData, - }, - }) - mockGetEcogesturesByIds.mockResolvedValue([mockedEcogesturesData[0]]) mockImportIconById.mockReturnValue('') const updatedEcogesture = { ...mockedEcogesturesData[0], doing: true } @@ -103,13 +86,6 @@ describe('SingleEcogesture component', () => { expect(mockUpdateEcogesture).toHaveBeenCalledWith(updatedEcogesture) }) it('should change objective status', async () => { - const store = mockStore({ - ecolyo: { - global: globalStateData, - challenge: challengeStateData, - }, - }) - mockGetEcogesturesByIds.mockResolvedValue([mockedEcogesturesData[0]]) mockImportIconById.mockReturnValue('icontest') const updatedEcogesture = { ...mockedEcogesturesData[0], objective: true } @@ -126,13 +102,6 @@ describe('SingleEcogesture component', () => { expect(mockUpdateEcogesture).toHaveBeenCalledWith(updatedEcogesture) }) it('should toggle more details', async () => { - const store = mockStore({ - ecolyo: { - global: globalStateData, - challenge: challengeStateData, - }, - }) - mockGetEcogesturesByIds.mockResolvedValue([mockedEcogesturesData[0]]) mockImportIconById.mockReturnValue(undefined) diff --git a/src/components/Ecogesture/__snapshots__/EcogestureCard.spec.tsx.snap b/src/components/Ecogesture/__snapshots__/EcogestureCard.spec.tsx.snap index 0b7982f2b..5a91aa831 100644 --- a/src/components/Ecogesture/__snapshots__/EcogestureCard.spec.tsx.snap +++ b/src/components/Ecogesture/__snapshots__/EcogestureCard.spec.tsx.snap @@ -1,86 +1,104 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP exports[`EcogestureCard 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, + } } - } -> - <BrowserRouter> - <Router - location={ - Object { + 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], } - navigationType="POP" - navigator={ + } + > + <EcogestureCard + ecogesture={ Object { - "action": "POP", - "createHref": [Function], - "encodeLocation": [Function], - "go": [Function], - "listen": [Function], - "location": Object { - "hash": "", - "key": "default", - "pathname": "/", - "search": "", - "state": null, - }, - "push": [Function], - "replace": [Function], + "_id": "ECOGESTURE001", + "_rev": "1-67f1ea36efdd892c96bf64a8943154cd", + "_type": "com.grandlyon.ecolyo.ecogesture", + "action": false, + "actionDuration": 3, + "actionName": null, + "difficulty": 1, + "doing": false, + "efficiency": 4, + "equipment": false, + "equipmentInstallation": true, + "equipmentType": Array [], + "fluidTypes": Array [ + 0, + 2, + ], + "id": "ECOGESTURE001", + "impactLevel": 8, + "investment": null, + "longDescription": "On se demande parfois si cela vaut le coup de \\"couper le chauffage\\" quand on s’absente… dès qu’il s’agit d’un week-end la réponse est « oui sûrement » ! Attention cependant au retour à ne pas faire de la surchauffe ! L’idéal est bien évidemment de régler sa programmation pour que le chauffage se relance quelques heures avant votre retour…", + "longName": "Je baisse le chauffage en mode hors gel lorsque je m'absente plus de 2 jours.", + "objective": false, + "room": Array [ + 0, + ], + "season": "Hiver", + "shortName": "Bonhomme de neige", + "usage": 1, + "viewedInSelection": false, } } > - <EcogestureCard - ecogesture={ + <WithStyles(ForwardRef(Link)) + className="ecogesture-list-item" + component={ Object { - "_id": "ECOGESTURE001", - "_rev": "1-67f1ea36efdd892c96bf64a8943154cd", - "_type": "com.grandlyon.ecolyo.ecogesture", - "action": false, - "actionDuration": 3, - "actionName": null, - "difficulty": 1, - "doing": false, - "efficiency": 4, - "equipment": false, - "equipmentInstallation": true, - "equipmentType": Array [], - "fluidTypes": Array [ - 0, - 2, - ], - "id": "ECOGESTURE001", - "impactLevel": 8, - "investment": null, - "longDescription": "On se demande parfois si cela vaut le coup de \\"couper le chauffage\\" quand on s’absente… dès qu’il s’agit d’un week-end la réponse est « oui sûrement » ! Attention cependant au retour à ne pas faire de la surchauffe ! L’idéal est bien évidemment de régler sa programmation pour que le chauffage se relance quelques heures avant votre retour…", - "longName": "Je baisse le chauffage en mode hors gel lorsque je m'absente plus de 2 jours.", - "objective": false, - "room": Array [ - 0, - ], - "season": "Hiver", - "shortName": "Bonhomme de neige", - "usage": 1, - "viewedInSelection": false, + "$$typeof": Symbol(react.forward_ref), + "displayName": "Link", + "render": [Function], + } + } + state={ + Object { + "selectionCompleted": false, + } + } + to={ + Object { + "pathname": "/ecogesture/ECOGESTURE001", } } > - <WithStyles(ForwardRef(Link)) + <ForwardRef(Link) className="ecogesture-list-item" + classes={ + Object { + "button": "MuiLink-button", + "focusVisible": "Mui-focusVisible", + "root": "MuiLink-root", + "underlineAlways": "MuiLink-underlineAlways", + "underlineHover": "MuiLink-underlineHover", + "underlineNone": "MuiLink-underlineNone", + } + } component={ Object { "$$typeof": Symbol(react.forward_ref), @@ -99,18 +117,9 @@ exports[`EcogestureCard component should be rendered correctly 1`] = ` } } > - <ForwardRef(Link) - className="ecogesture-list-item" - classes={ - Object { - "button": "MuiLink-button", - "focusVisible": "Mui-focusVisible", - "root": "MuiLink-root", - "underlineAlways": "MuiLink-underlineAlways", - "underlineHover": "MuiLink-underlineHover", - "underlineNone": "MuiLink-underlineNone", - } - } + <WithStyles(ForwardRef(Typography)) + className="MuiLink-root MuiLink-underlineHover ecogesture-list-item" + color="primary" component={ Object { "$$typeof": Symbol(react.forward_ref), @@ -118,6 +127,8 @@ exports[`EcogestureCard component should be rendered correctly 1`] = ` "render": [Function], } } + onBlur={[Function]} + onFocus={[Function]} state={ Object { "selectionCompleted": false, @@ -128,9 +139,44 @@ exports[`EcogestureCard component should be rendered correctly 1`] = ` "pathname": "/ecogesture/ECOGESTURE001", } } + variant="inherit" > - <WithStyles(ForwardRef(Typography)) + <ForwardRef(Typography) className="MuiLink-root MuiLink-underlineHover ecogesture-list-item" + classes={ + Object { + "alignCenter": "MuiTypography-alignCenter", + "alignJustify": "MuiTypography-alignJustify", + "alignLeft": "MuiTypography-alignLeft", + "alignRight": "MuiTypography-alignRight", + "body1": "MuiTypography-body1", + "body2": "MuiTypography-body2", + "button": "MuiTypography-button", + "caption": "MuiTypography-caption", + "colorError": "MuiTypography-colorError", + "colorInherit": "MuiTypography-colorInherit", + "colorPrimary": "MuiTypography-colorPrimary", + "colorSecondary": "MuiTypography-colorSecondary", + "colorTextPrimary": "MuiTypography-colorTextPrimary", + "colorTextSecondary": "MuiTypography-colorTextSecondary", + "displayBlock": "MuiTypography-displayBlock", + "displayInline": "MuiTypography-displayInline", + "gutterBottom": "MuiTypography-gutterBottom", + "h1": "MuiTypography-h1", + "h2": "MuiTypography-h2", + "h3": "MuiTypography-h3", + "h4": "MuiTypography-h4", + "h5": "MuiTypography-h5", + "h6": "MuiTypography-h6", + "noWrap": "MuiTypography-noWrap", + "overline": "MuiTypography-overline", + "paragraph": "MuiTypography-paragraph", + "root": "MuiTypography-root", + "srOnly": "MuiTypography-srOnly", + "subtitle1": "MuiTypography-subtitle1", + "subtitle2": "MuiTypography-subtitle2", + } + } color="primary" component={ Object { @@ -153,50 +199,8 @@ exports[`EcogestureCard component should be rendered correctly 1`] = ` } variant="inherit" > - <ForwardRef(Typography) - className="MuiLink-root MuiLink-underlineHover ecogesture-list-item" - classes={ - Object { - "alignCenter": "MuiTypography-alignCenter", - "alignJustify": "MuiTypography-alignJustify", - "alignLeft": "MuiTypography-alignLeft", - "alignRight": "MuiTypography-alignRight", - "body1": "MuiTypography-body1", - "body2": "MuiTypography-body2", - "button": "MuiTypography-button", - "caption": "MuiTypography-caption", - "colorError": "MuiTypography-colorError", - "colorInherit": "MuiTypography-colorInherit", - "colorPrimary": "MuiTypography-colorPrimary", - "colorSecondary": "MuiTypography-colorSecondary", - "colorTextPrimary": "MuiTypography-colorTextPrimary", - "colorTextSecondary": "MuiTypography-colorTextSecondary", - "displayBlock": "MuiTypography-displayBlock", - "displayInline": "MuiTypography-displayInline", - "gutterBottom": "MuiTypography-gutterBottom", - "h1": "MuiTypography-h1", - "h2": "MuiTypography-h2", - "h3": "MuiTypography-h3", - "h4": "MuiTypography-h4", - "h5": "MuiTypography-h5", - "h6": "MuiTypography-h6", - "noWrap": "MuiTypography-noWrap", - "overline": "MuiTypography-overline", - "paragraph": "MuiTypography-paragraph", - "root": "MuiTypography-root", - "srOnly": "MuiTypography-srOnly", - "subtitle1": "MuiTypography-subtitle1", - "subtitle2": "MuiTypography-subtitle2", - } - } - color="primary" - component={ - Object { - "$$typeof": Symbol(react.forward_ref), - "displayName": "Link", - "render": [Function], - } - } + <Link + className="MuiTypography-root MuiLink-root MuiLink-underlineHover ecogesture-list-item MuiTypography-colorPrimary" onBlur={[Function]} onFocus={[Function]} state={ @@ -209,224 +213,207 @@ exports[`EcogestureCard component should be rendered correctly 1`] = ` "pathname": "/ecogesture/ECOGESTURE001", } } - variant="inherit" > - <Link + <a className="MuiTypography-root MuiLink-root MuiLink-underlineHover ecogesture-list-item MuiTypography-colorPrimary" + href="/ecogesture/ECOGESTURE001" onBlur={[Function]} + onClick={[Function]} onFocus={[Function]} - state={ - Object { - "selectionCompleted": false, - } - } - to={ - Object { - "pathname": "/ecogesture/ECOGESTURE001", - } - } > - <a - className="MuiTypography-root MuiLink-root MuiLink-underlineHover ecogesture-list-item MuiTypography-colorPrimary" - href="/ecogesture/ECOGESTURE001" - onBlur={[Function]} - onClick={[Function]} - onFocus={[Function]} - > - <StyledEcogestureCard> - <WithStyles(WithStyles(ForwardRef(CardActionArea)))> - <WithStyles(ForwardRef(CardActionArea)) + <StyledEcogestureCard> + <WithStyles(WithStyles(ForwardRef(CardActionArea)))> + <WithStyles(ForwardRef(CardActionArea)) + classes={ + Object { + "root": "WithStyles(ForwardRef(CardActionArea))-root-1", + } + } + > + <ForwardRef(CardActionArea) classes={ Object { - "root": "WithStyles(ForwardRef(CardActionArea))-root-1", + "focusHighlight": "MuiCardActionArea-focusHighlight", + "focusVisible": "Mui-focusVisible", + "root": "MuiCardActionArea-root WithStyles(ForwardRef(CardActionArea))-root-1", } } > - <ForwardRef(CardActionArea) - classes={ - Object { - "focusHighlight": "MuiCardActionArea-focusHighlight", - "focusVisible": "Mui-focusVisible", - "root": "MuiCardActionArea-root WithStyles(ForwardRef(CardActionArea))-root-1", - } - } + <WithStyles(ForwardRef(ButtonBase)) + className="MuiCardActionArea-root WithStyles(ForwardRef(CardActionArea))-root-1" + focusVisibleClassName="Mui-focusVisible" > - <WithStyles(ForwardRef(ButtonBase)) + <ForwardRef(ButtonBase) className="MuiCardActionArea-root WithStyles(ForwardRef(CardActionArea))-root-1" + classes={ + Object { + "disabled": "Mui-disabled", + "focusVisible": "Mui-focusVisible", + "root": "MuiButtonBase-root", + } + } focusVisibleClassName="Mui-focusVisible" > - <ForwardRef(ButtonBase) - className="MuiCardActionArea-root WithStyles(ForwardRef(CardActionArea))-root-1" - classes={ - Object { - "disabled": "Mui-disabled", - "focusVisible": "Mui-focusVisible", - "root": "MuiButtonBase-root", - } - } - focusVisibleClassName="Mui-focusVisible" + <button + className="MuiButtonBase-root MuiCardActionArea-root WithStyles(ForwardRef(CardActionArea))-root-1" + disabled={false} + onBlur={[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" > - <button - className="MuiButtonBase-root MuiCardActionArea-root WithStyles(ForwardRef(CardActionArea))-root-1" - disabled={false} - onBlur={[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)) + <WithStyles(WithStyles(ForwardRef(CardContent)))> + <WithStyles(ForwardRef(CardContent)) + classes={ + Object { + "root": "WithStyles(ForwardRef(CardContent))-root-2", + } + } + > + <ForwardRef(CardContent) classes={ Object { - "root": "WithStyles(ForwardRef(CardContent))-root-2", + "root": "MuiCardContent-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" > <div - className="MuiCardContent-root WithStyles(ForwardRef(CardContent))-root-2" + className="ec-content" > + <Component + className="Icon" + icon="" + size={50} + > + <div + id="StyledIcon" + /> + </Component> <div - className="ec-content" + className="ec-content-short-name text-15-bold" + > + Bonhomme de neige + </div> + <EfficiencyRating + result={4} > - <Component - className="Icon" - icon="" - size={50} - > - <div - id="StyledIcon" - /> - </Component> <div - className="ec-content-short-name text-15-bold" - > - Bonhomme de neige - </div> - <EfficiencyRating - result={4} + className="thunder" > - <div - className="thunder" + <Component + className="star" + icon="test-file-stub" + key="1" + size={15} > - <Component - className="star" - icon="test-file-stub" - key="1" - size={15} - > - <div - id="StyledIcon" - /> - </Component> - <Component - className="star" - icon="test-file-stub" - key="2" - size={15} - > - <div - id="StyledIcon" - /> - </Component> - <Component - className="star" - icon="test-file-stub" - key="3" - size={15} - > - <div - id="StyledIcon" - /> - </Component> - <Component - className="star" - icon="test-file-stub" - key="4" - size={15} - > - <div - id="StyledIcon" - /> - </Component> - <Component - className="star" - icon="test-file-stub" - key="5" - size={15} - > - <div - id="StyledIcon" - /> - </Component> - </div> - </EfficiencyRating> - </div> + <div + id="StyledIcon" + /> + </Component> + <Component + className="star" + icon="test-file-stub" + key="2" + size={15} + > + <div + id="StyledIcon" + /> + </Component> + <Component + className="star" + icon="test-file-stub" + key="3" + size={15} + > + <div + id="StyledIcon" + /> + </Component> + <Component + className="star" + icon="test-file-stub" + key="4" + size={15} + > + <div + id="StyledIcon" + /> + </Component> + <Component + className="star" + icon="test-file-stub" + key="5" + size={15} + > + <div + id="StyledIcon" + /> + </Component> + </div> + </EfficiencyRating> </div> - </ForwardRef(CardContent)> - </WithStyles(ForwardRef(CardContent))> - </WithStyles(WithStyles(ForwardRef(CardContent)))> - <span - className="MuiCardActionArea-focusHighlight" - /> - <WithStyles(memo) + </div> + </ForwardRef(CardContent)> + </WithStyles(ForwardRef(CardContent))> + </WithStyles(WithStyles(ForwardRef(CardContent)))> + <span + className="MuiCardActionArea-focusHighlight" + /> + <WithStyles(memo) + center={false} + > + <ForwardRef(TouchRipple) 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", - } + 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" > - <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)))> - </StyledEcogestureCard> - </a> - </Link> - </ForwardRef(Typography)> - </WithStyles(ForwardRef(Typography))> - </ForwardRef(Link)> - </WithStyles(ForwardRef(Link))> - </EcogestureCard> - </Router> - </BrowserRouter> -</Provider> + <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)))> + </StyledEcogestureCard> + </a> + </Link> + </ForwardRef(Typography)> + </WithStyles(ForwardRef(Typography))> + </ForwardRef(Link)> + </WithStyles(ForwardRef(Link))> + </EcogestureCard> + </Router> +</BrowserRouter> `; diff --git a/src/components/Ecogesture/__snapshots__/EcogestureEmptyList.spec.tsx.snap b/src/components/Ecogesture/__snapshots__/EcogestureEmptyList.spec.tsx.snap index a97c14eae..d7e635387 100644 --- a/src/components/Ecogesture/__snapshots__/EcogestureEmptyList.spec.tsx.snap +++ b/src/components/Ecogesture/__snapshots__/EcogestureEmptyList.spec.tsx.snap @@ -1,126 +1,131 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP exports[`EcogestureEmptyList component should be rendered correctly 1`] = ` -<Provider - store={ - Object { - "clearActions": [Function], - "dispatch": [Function], - "getActions": [Function], - "getState": [Function], - "replaceReducer": [Function], - "subscribe": [Function], - } - } +<EcogestureEmptyList + handleReinitClick={[MockFunction]} + isObjective={true} + isSelectionDone={false} + setTab={[MockFunction]} > - <EcogestureEmptyList - handleReinitClick={[MockFunction]} - isObjective={true} - isSelectionDone={false} - setTab={[MockFunction]} + <div + className="ec-empty-container" > <div - className="ec-empty-container" + className="ec-empty-content" > - <div - className="ec-empty-content" + <StyledIcon + className="icon-big" + icon="test-file-stub" + size={150} > - <StyledIcon + <Icon + aria-hidden={true} className="icon-big" icon="test-file-stub" size={150} + spin={false} > - <Icon + <Component aria-hidden={true} - className="icon-big" - icon="test-file-stub" - size={150} - spin={false} + className="icon-big styles__icon___23x3R" + height={150} + style={Object {}} + width={150} > - <Component + <svg aria-hidden={true} className="icon-big styles__icon___23x3R" height={150} style={Object {}} width={150} > - <svg - aria-hidden={true} - className="icon-big styles__icon___23x3R" - height={150} - style={Object {}} - width={150} - > - <use - xlinkHref="#test-file-stub" - /> - </svg> - </Component> - </Icon> - </StyledIcon> - <div - className="text-16-normal text" - > - ecogesture.emptyList.obj1 - </div> - <div - className="text-16-normal text" - > - ecogesture.emptyList.obj2 - </div> - <div - className="btn-container" + <use + xlinkHref="#test-file-stub" + /> + </svg> + </Component> + </Icon> + </StyledIcon> + <div + className="text-16-normal text" + > + ecogesture.emptyList.obj1 + </div> + <div + className="text-16-normal text" + > + ecogesture.emptyList.obj2 + </div> + <div + className="btn-container" + > + <WithStyles(ForwardRef(Button)) + aria-label="ecogesture.emptyList.btn1" + classes={ + Object { + "label": "text-16-bold", + "root": "btn-secondary-negative btn1", + } + } + onClick={[Function]} > - <WithStyles(ForwardRef(Button)) + <ForwardRef(Button) aria-label="ecogesture.emptyList.btn1" classes={ Object { - "label": "text-16-bold", - "root": "btn-secondary-negative btn1", + "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-secondary-negative btn1", + "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]} > - <ForwardRef(Button) + <WithStyles(ForwardRef(ButtonBase)) aria-label="ecogesture.emptyList.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-16-bold", - "outlined": "MuiButton-outlined", - "outlinedPrimary": "MuiButton-outlinedPrimary", - "outlinedSecondary": "MuiButton-outlinedSecondary", - "outlinedSizeLarge": "MuiButton-outlinedSizeLarge", - "outlinedSizeSmall": "MuiButton-outlinedSizeSmall", - "root": "MuiButton-root btn-secondary-negative btn1", - "sizeLarge": "MuiButton-sizeLarge", - "sizeSmall": "MuiButton-sizeSmall", - "startIcon": "MuiButton-startIcon", - "text": "MuiButton-text", - "textPrimary": "MuiButton-textPrimary", - "textSecondary": "MuiButton-textSecondary", - "textSizeLarge": "MuiButton-textSizeLarge", - "textSizeSmall": "MuiButton-textSizeSmall", - } - } + className="MuiButton-root btn-secondary-negative btn1 MuiButton-text" + component="button" + disabled={false} + focusRipple={true} + focusVisibleClassName="Mui-focusVisible" onClick={[Function]} + type="button" > - <WithStyles(ForwardRef(ButtonBase)) + <ForwardRef(ButtonBase) aria-label="ecogesture.emptyList.btn1" className="MuiButton-root btn-secondary-negative btn1 MuiButton-text" + classes={ + Object { + "disabled": "Mui-disabled", + "focusVisible": "Mui-focusVisible", + "root": "MuiButtonBase-root", + } + } component="button" disabled={false} focusRipple={true} @@ -128,130 +133,130 @@ exports[`EcogestureEmptyList component should be rendered correctly 1`] = ` onClick={[Function]} type="button" > - <ForwardRef(ButtonBase) + <button aria-label="ecogesture.emptyList.btn1" - className="MuiButton-root btn-secondary-negative btn1 MuiButton-text" - classes={ - Object { - "disabled": "Mui-disabled", - "focusVisible": "Mui-focusVisible", - "root": "MuiButtonBase-root", - } - } - component="button" + className="MuiButtonBase-root MuiButton-root btn-secondary-negative btn1 MuiButton-text" disabled={false} - focusRipple={true} - focusVisibleClassName="Mui-focusVisible" + 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" > - <button - aria-label="ecogesture.emptyList.btn1" - className="MuiButtonBase-root MuiButton-root btn-secondary-negative btn1 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-bold" > - <span - className="MuiButton-label text-16-bold" - > - ecogesture.emptyList.btn1 - </span> - <WithStyles(memo) + ecogesture.emptyList.btn1 + </span> + <WithStyles(memo) + center={false} + > + <ForwardRef(TouchRipple) 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", - } + 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" > - <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)) + <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="ecogesture.emptyList.btn2" + classes={ + Object { + "label": "text-16-bold", + "root": "btn-highlight", + } + } + onClick={[Function]} + > + <ForwardRef(Button) aria-label="ecogesture.emptyList.btn2" classes={ Object { - "label": "text-16-bold", - "root": "btn-highlight", + "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={[Function]} > - <ForwardRef(Button) + <WithStyles(ForwardRef(ButtonBase)) aria-label="ecogesture.emptyList.btn2" - 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", - } - } + className="MuiButton-root btn-highlight MuiButton-text" + component="button" + disabled={false} + focusRipple={true} + focusVisibleClassName="Mui-focusVisible" onClick={[Function]} + type="button" > - <WithStyles(ForwardRef(ButtonBase)) + <ForwardRef(ButtonBase) aria-label="ecogesture.emptyList.btn2" className="MuiButton-root btn-highlight MuiButton-text" + classes={ + Object { + "disabled": "Mui-disabled", + "focusVisible": "Mui-focusVisible", + "root": "MuiButtonBase-root", + } + } component="button" disabled={false} focusRipple={true} @@ -259,83 +264,65 @@ exports[`EcogestureEmptyList component should be rendered correctly 1`] = ` onClick={[Function]} type="button" > - <ForwardRef(ButtonBase) + <button aria-label="ecogesture.emptyList.btn2" - className="MuiButton-root btn-highlight MuiButton-text" - classes={ - Object { - "disabled": "Mui-disabled", - "focusVisible": "Mui-focusVisible", - "root": "MuiButtonBase-root", - } - } - component="button" + className="MuiButtonBase-root MuiButton-root btn-highlight MuiButton-text" disabled={false} - focusRipple={true} - focusVisibleClassName="Mui-focusVisible" + 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" > - <button - aria-label="ecogesture.emptyList.btn2" - className="MuiButtonBase-root MuiButton-root btn-highlight 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-bold" > - <span - className="MuiButton-label text-16-bold" - > - ecogesture.emptyList.btn2 - </span> - <WithStyles(memo) + ecogesture.emptyList.btn2 + </span> + <WithStyles(memo) + center={false} + > + <ForwardRef(TouchRipple) 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", - } + 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" > - <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> + <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> - </EcogestureEmptyList> -</Provider> + </div> +</EcogestureEmptyList> `; diff --git a/src/components/Ecogesture/__snapshots__/EcogestureInitModal.spec.tsx.snap b/src/components/Ecogesture/__snapshots__/EcogestureInitModal.spec.tsx.snap index ab830dd06..eb5387015 100644 --- a/src/components/Ecogesture/__snapshots__/EcogestureInitModal.spec.tsx.snap +++ b/src/components/Ecogesture/__snapshots__/EcogestureInitModal.spec.tsx.snap @@ -1,528 +1,532 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP exports[`EcogestureInitModal component should be rendered correctly 1`] = ` -<Provider - store={ - Object { - "clearActions": [Function], - "dispatch": [Function], - "getActions": [Function], - "getState": [Function], - "replaceReducer": [Function], - "subscribe": [Function], - } - } +<EcogestureInitModal + handleCloseClick={[MockFunction]} + handleLaunchForm={[MockFunction]} + open={true} > - <EcogestureInitModal - handleCloseClick={[MockFunction]} - handleLaunchForm={[MockFunction]} + <WithStyles(ForwardRef(Dialog)) + aria-labelledby="accessibility-title" + classes={ + Object { + "paper": "modal-paper", + "root": "modal-root", + } + } + onClose={[MockFunction]} open={true} > - <WithStyles(ForwardRef(Dialog)) + <ForwardRef(Dialog) aria-labelledby="accessibility-title" classes={ Object { - "paper": "modal-paper", - "root": "modal-root", + "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(Dialog) - aria-labelledby="accessibility-title" - classes={ + <ForwardRef(Modal) + BackdropComponent={ 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), - "Naked": Object { - "$$typeof": Symbol(react.forward_ref), - "propTypes": Object { - "children": [Function], - "className": [Function], - "classes": [Function], - "invisible": [Function], - "open": [Function], - "transitionDuration": [Function], - }, - "render": [Function], + "propTypes": Object { + "children": [Function], + "className": [Function], + "classes": [Function], + "invisible": [Function], + "open": [Function], + "transitionDuration": [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, - }, + "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, }, - "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)", + "width": [Function], + }, + "direction": "ltr", + "mixins": Object { + "gutters": [Function], + "toolbar": Object { + "@media (min-width:0px) and (orientation: landscape)": Object { + "minHeight": 48, }, - "tonalOffset": 0.2, - "type": "light", - "warning": Object { - "contrastText": "rgba(0, 0, 0, 0.87)", - "dark": "#f57c00", - "light": "#ffb74d", - "main": "#ff9800", + "@media (min-width:600px)": Object { + "minHeight": 64, }, + "minHeight": 56, }, - "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, + }, + "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, }, - "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], + "augmentColor": [Function], + "background": Object { + "default": "#fafafa", + "paper": "#fff", }, - "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, - }, + "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": 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, - }, + "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, }, - "zIndex": Object { - "appBar": 1100, - "drawer": 1200, - "mobileStepper": 1000, - "modal": 1300, - "snackbar": 1400, - "speedDial": 1050, - "tooltip": 1500, + "subtitle2": Object { + "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif", + "fontSize": "0.875rem", + "fontWeight": 500, + "letterSpacing": "0.00714em", + "lineHeight": 1.57, }, }, - "name": "MuiBackdrop", - }, - "propTypes": Object { - "classes": [Function], - "innerRef": [Function], + "zIndex": Object { + "appBar": 1100, + "drawer": 1200, + "mobileStepper": 1000, + "modal": 1300, + "snackbar": 1400, + "speedDial": 1050, + "tooltip": 1500, + }, }, - "render": [Function], - "useStyles": [Function], - } + "name": "MuiBackdrop", + }, + "propTypes": Object { + "classes": [Function], + "innerRef": [Function], + }, + "render": [Function], + "useStyles": [Function], } - BackdropProps={ - Object { - "transitionDuration": Object { - "enter": 225, - "exit": 195, - }, - } + } + BackdropProps={ + Object { + "transitionDuration": Object { + "enter": 225, + "exit": 195, + }, } - className="MuiDialog-root modal-root" - closeAfterTransition={true} - disableEscapeKeyDown={false} - onClose={[MockFunction]} - open={true} + } + className="MuiDialog-root modal-root" + closeAfterTransition={true} + disableEscapeKeyDown={false} + onClose={[MockFunction]} + open={true} + > + <ForwardRef(Portal) + disablePortal={false} > - <ForwardRef(Portal) - disablePortal={false} - > - <Portal - containerInfo={ - <body - style="padding-right: 0px; overflow: hidden;" + <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 - class="MuiDialog-root modal-root" - role="presentation" - style="position: fixed; z-index: 1300; right: 0px; bottom: 0px; top: 0px; left: 0px;" + 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-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" + aria-labelledby="accessibility-title" + class="MuiPaper-root MuiDialog-paper modal-paper MuiDialog-paperScrollPaper MuiDialog-paperWidthSm MuiPaper-elevation24 MuiPaper-rounded" + role="dialog" > <div - aria-labelledby="accessibility-title" - class="MuiPaper-root MuiDialog-paper modal-paper MuiDialog-paperScrollPaper MuiDialog-paperWidthSm MuiPaper-elevation24 MuiPaper-rounded" - role="dialog" + id="accessibility-title" + > + feedback.accessibility.window_title + </div> + <button + aria-label="feedback.accessibility.button_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="eg-init-modal" > <div - id="accessibility-title" + class="title text-20-bold" > - feedback.accessibility.window_title + ecogesture.initModal.title </div> - <button - aria-label="feedback.accessibility.button_close" - class="MuiButtonBase-root MuiIconButton-root modal-paper-close-button" - tabindex="0" - type="button" + <div + class="text-16-normal text" > - <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> + ecogesture.initModal.text1 + </div> <div - class="eg-init-modal" + class="text-16-normal text" > - <div - class="title text-20-bold" - > - ecogesture.initModal.title - </div> - <div - class="text-16-normal text" - > - ecogesture.initModal.text1 - </div> - <div - class="text-16-normal text" - > - ecogesture.initModal.text2 - </div> - <div - class="buttons-container" + ecogesture.initModal.text2 + </div> + <div + class="buttons-container" + > + <button + aria-label="ecogesture.initModal.btn1" + class="MuiButtonBase-root MuiButton-root btn-secondary-negative MuiButton-text btn1" + tabindex="0" + type="button" > - <button - aria-label="ecogesture.initModal.btn1" - class="MuiButtonBase-root MuiButton-root btn-secondary-negative MuiButton-text btn1" - tabindex="0" - type="button" + <span + class="MuiButton-label text-16-bold" > - <span - class="MuiButton-label text-16-bold" - > - ecogesture.initModal.btn1 - </span> - <span - class="MuiTouchRipple-root" - /> - </button> - <button - aria-label="ecogesture.initModal.btn2" - class="MuiButtonBase-root MuiButton-root btn-profile-next rounded MuiButton-text" - tabindex="0" - type="button" + ecogesture.initModal.btn1 + </span> + <span + class="MuiTouchRipple-root" + /> + </button> + <button + aria-label="ecogesture.initModal.btn2" + class="MuiButtonBase-root MuiButton-root btn-profile-next rounded MuiButton-text" + tabindex="0" + type="button" + > + <span + class="MuiButton-label text-16-bold" > - <span - class="MuiButton-label text-16-bold" - > - ecogesture.initModal.btn2 - </span> - <span - class="MuiTouchRipple-root" - /> - </button> - </div> + ecogesture.initModal.btn2 + </span> + <span + class="MuiTouchRipple-root" + /> + </button> </div> </div> </div> - <div - data-test="sentinelEnd" - tabindex="0" - /> </div> - </body> + <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, + } } > - <div - className="MuiDialog-root modal-root" - onKeyDown={[Function]} - role="presentation" - style={ + <WithStyles(ForwardRef(Backdrop)) + onClick={[Function]} + open={true} + transitionDuration={ Object { - "bottom": 0, - "left": 0, - "position": "fixed", - "right": 0, - "top": 0, - "zIndex": 1300, + "enter": 225, + "exit": 195, } } > - <WithStyles(ForwardRef(Backdrop)) + <ForwardRef(Backdrop) + classes={ + Object { + "invisible": "MuiBackdrop-invisible", + "root": "MuiBackdrop-root", + } + } onClick={[Function]} open={true} transitionDuration={ @@ -532,85 +536,90 @@ exports[`EcogestureInitModal component should be rendered correctly 1`] = ` } } > - <ForwardRef(Backdrop) - classes={ - Object { - "invisible": "MuiBackdrop-invisible", - "root": "MuiBackdrop-root", - } - } + <ForwardRef(Fade) + in={true} onClick={[Function]} - open={true} - transitionDuration={ + timeout={ Object { "enter": 225, "exit": 195, } } > - <ForwardRef(Fade) + <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} > - <Transition - appear={true} - enter={true} - exit={true} - in={true} - mountOnEnter={false} + <div + aria-hidden={true} + className="MuiBackdrop-root" onClick={[Function]} - onEnter={[Function]} - onEntered={[Function]} - onEntering={[Function]} - onExit={[Function]} - onExited={[Function]} - onExiting={[Function]} - timeout={ + style={ Object { - "enter": 225, - "exit": 195, + "opacity": 1, + "visibility": undefined, } } - 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} + /> + </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, + } + } > - <div - data-test="sentinelStart" - tabIndex={0} - /> - <ForwardRef(Fade) + <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={ @@ -619,294 +628,290 @@ exports[`EcogestureInitModal component should be rendered correctly 1`] = ` "exit": 195, } } + unmountOnExit={false} > - <Transition - appear={true} - enter={true} - exit={true} - in={true} - mountOnEnter={false} - onEnter={[Function]} - onEntered={[Function]} - onEntering={[Function]} - onExit={[Function]} - onExited={[Function]} - onExiting={[Function]} + <div + className="MuiDialog-container MuiDialog-scrollPaper" + onMouseDown={[Function]} + onMouseUp={[Function]} role="none presentation" - tabIndex="-1" - timeout={ + style={ Object { - "enter": 225, - "exit": 195, + "opacity": 1, + "visibility": undefined, } } - unmountOnExit={false} + tabIndex="-1" > - <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" > - <WithStyles(ForwardRef(Paper)) + <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" > - <ForwardRef(Paper) + <div 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} + className="MuiPaper-root MuiDialog-paper modal-paper MuiDialog-paperScrollPaper MuiDialog-paperWidthSm MuiPaper-elevation24 MuiPaper-rounded" role="dialog" > <div - aria-labelledby="accessibility-title" - className="MuiPaper-root MuiDialog-paper modal-paper MuiDialog-paperScrollPaper MuiDialog-paperWidthSm MuiPaper-elevation24 MuiPaper-rounded" - role="dialog" + id="accessibility-title" > - <div - id="accessibility-title" - > - feedback.accessibility.window_title - </div> - <WithStyles(ForwardRef(IconButton)) + feedback.accessibility.window_title + </div> + <WithStyles(ForwardRef(IconButton)) + aria-label="feedback.accessibility.button_close" + className="modal-paper-close-button" + onClick={[MockFunction]} + > + <ForwardRef(IconButton) aria-label="feedback.accessibility.button_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]} > - <ForwardRef(IconButton) + <WithStyles(ForwardRef(ButtonBase)) aria-label="feedback.accessibility.button_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", - } - } + centerRipple={true} + className="MuiIconButton-root modal-paper-close-button" + disabled={false} + focusRipple={true} onClick={[MockFunction]} > - <WithStyles(ForwardRef(ButtonBase)) + <ForwardRef(ButtonBase) aria-label="feedback.accessibility.button_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]} > - <ForwardRef(ButtonBase) + <button aria-label="feedback.accessibility.button_close" - centerRipple={true} - className="MuiIconButton-root modal-paper-close-button" - classes={ - Object { - "disabled": "Mui-disabled", - "focusVisible": "Mui-focusVisible", - "root": "MuiButtonBase-root", - } - } + className="MuiButtonBase-root MuiIconButton-root modal-paper-close-button" disabled={false} - focusRipple={true} + 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" > - <button - aria-label="feedback.accessibility.button_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" > - <span - className="MuiIconButton-label" + <Icon + icon="test-file-stub" + size={16} + spin={false} > - <Icon - icon="test-file-stub" - size={16} - spin={false} + <Component + className="styles__icon___23x3R" + height={16} + style={Object {}} + width={16} > - <Component + <svg 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) + <use + xlinkHref="#test-file-stub" + /> + </svg> + </Component> + </Icon> + </span> + <WithStyles(memo) + center={true} + > + <ForwardRef(TouchRipple) 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", - } + 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" > - <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))> + <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="eg-init-modal" + > <div - className="eg-init-modal" + className="title text-20-bold" > - <div - className="title text-20-bold" - > - ecogesture.initModal.title - </div> - <div - className="text-16-normal text" - > - ecogesture.initModal.text1 - </div> - <div - className="text-16-normal text" - > - ecogesture.initModal.text2 - </div> - <div - className="buttons-container" + ecogesture.initModal.title + </div> + <div + className="text-16-normal text" + > + ecogesture.initModal.text1 + </div> + <div + className="text-16-normal text" + > + ecogesture.initModal.text2 + </div> + <div + className="buttons-container" + > + <WithStyles(ForwardRef(Button)) + aria-label="ecogesture.initModal.btn1" + className="btn1" + classes={ + Object { + "label": "text-16-bold", + "root": "btn-secondary-negative", + } + } + onClick={[MockFunction]} > - <WithStyles(ForwardRef(Button)) + <ForwardRef(Button) aria-label="ecogesture.initModal.btn1" className="btn1" classes={ Object { - "label": "text-16-bold", - "root": "btn-secondary-negative", + "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-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]} > - <ForwardRef(Button) + <WithStyles(ForwardRef(ButtonBase)) aria-label="ecogesture.initModal.btn1" - 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-16-bold", - "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", - } - } + className="MuiButton-root btn-secondary-negative MuiButton-text btn1" + component="button" + disabled={false} + focusRipple={true} + focusVisibleClassName="Mui-focusVisible" onClick={[MockFunction]} + type="button" > - <WithStyles(ForwardRef(ButtonBase)) + <ForwardRef(ButtonBase) aria-label="ecogesture.initModal.btn1" className="MuiButton-root btn-secondary-negative MuiButton-text btn1" + classes={ + Object { + "disabled": "Mui-disabled", + "focusVisible": "Mui-focusVisible", + "root": "MuiButtonBase-root", + } + } component="button" disabled={false} focusRipple={true} @@ -914,130 +919,130 @@ exports[`EcogestureInitModal component should be rendered correctly 1`] = ` onClick={[MockFunction]} type="button" > - <ForwardRef(ButtonBase) + <button aria-label="ecogesture.initModal.btn1" - className="MuiButton-root btn-secondary-negative MuiButton-text btn1" - classes={ - Object { - "disabled": "Mui-disabled", - "focusVisible": "Mui-focusVisible", - "root": "MuiButtonBase-root", - } - } - component="button" + className="MuiButtonBase-root MuiButton-root btn-secondary-negative MuiButton-text btn1" disabled={false} - focusRipple={true} - focusVisibleClassName="Mui-focusVisible" + 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" > - <button - aria-label="ecogesture.initModal.btn1" - className="MuiButtonBase-root MuiButton-root btn-secondary-negative MuiButton-text btn1" - 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" > - <span - className="MuiButton-label text-16-bold" - > - ecogesture.initModal.btn1 - </span> - <WithStyles(memo) + ecogesture.initModal.btn1 + </span> + <WithStyles(memo) + center={false} + > + <ForwardRef(TouchRipple) 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", - } + 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" > - <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)) + <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="ecogesture.initModal.btn2" + classes={ + Object { + "label": "text-16-bold", + "root": "btn-profile-next rounded", + } + } + onClick={[MockFunction]} + > + <ForwardRef(Button) aria-label="ecogesture.initModal.btn2" classes={ Object { - "label": "text-16-bold", - "root": "btn-profile-next rounded", + "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-profile-next rounded", + "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]} > - <ForwardRef(Button) + <WithStyles(ForwardRef(ButtonBase)) aria-label="ecogesture.initModal.btn2" - 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-profile-next rounded", - "sizeLarge": "MuiButton-sizeLarge", - "sizeSmall": "MuiButton-sizeSmall", - "startIcon": "MuiButton-startIcon", - "text": "MuiButton-text", - "textPrimary": "MuiButton-textPrimary", - "textSecondary": "MuiButton-textSecondary", - "textSizeLarge": "MuiButton-textSizeLarge", - "textSizeSmall": "MuiButton-textSizeSmall", - } - } + className="MuiButton-root btn-profile-next rounded MuiButton-text" + component="button" + disabled={false} + focusRipple={true} + focusVisibleClassName="Mui-focusVisible" onClick={[MockFunction]} + type="button" > - <WithStyles(ForwardRef(ButtonBase)) + <ForwardRef(ButtonBase) aria-label="ecogesture.initModal.btn2" className="MuiButton-root btn-profile-next rounded MuiButton-text" + classes={ + Object { + "disabled": "Mui-disabled", + "focusVisible": "Mui-focusVisible", + "root": "MuiButtonBase-root", + } + } component="button" disabled={false} focusRipple={true} @@ -1045,99 +1050,81 @@ exports[`EcogestureInitModal component should be rendered correctly 1`] = ` onClick={[MockFunction]} type="button" > - <ForwardRef(ButtonBase) + <button aria-label="ecogesture.initModal.btn2" - className="MuiButton-root btn-profile-next rounded MuiButton-text" - classes={ - Object { - "disabled": "Mui-disabled", - "focusVisible": "Mui-focusVisible", - "root": "MuiButtonBase-root", - } - } - component="button" + className="MuiButtonBase-root MuiButton-root btn-profile-next rounded MuiButton-text" disabled={false} - focusRipple={true} - focusVisibleClassName="Mui-focusVisible" + 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" > - <button - aria-label="ecogesture.initModal.btn2" - className="MuiButtonBase-root MuiButton-root btn-profile-next rounded 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" > - <span - className="MuiButton-label text-16-bold" - > - ecogesture.initModal.btn2 - </span> - <WithStyles(memo) + ecogesture.initModal.btn2 + </span> + <WithStyles(memo) + center={false} + > + <ForwardRef(TouchRipple) 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", - } + 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" > - <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> + <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))> - </EcogestureInitModal> -</Provider> + </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))> +</EcogestureInitModal> `; diff --git a/src/components/Ecogesture/__snapshots__/EcogestureList.spec.tsx.snap b/src/components/Ecogesture/__snapshots__/EcogestureList.spec.tsx.snap index a534041ec..c51902144 100644 --- a/src/components/Ecogesture/__snapshots__/EcogestureList.spec.tsx.snap +++ b/src/components/Ecogesture/__snapshots__/EcogestureList.spec.tsx.snap @@ -1,230 +1,237 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP exports[`EcogesturesList 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, + } } - } -> - <BrowserRouter> - <Router - location={ - Object { + 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], } - navigationType="POP" - navigator={ - Object { - "action": "POP", - "createHref": [Function], - "encodeLocation": [Function], - "go": [Function], - "listen": [Function], - "location": Object { - "hash": "", - "key": "default", - "pathname": "/", - "search": "", - "state": null, + } + > + <EcogestureList + displaySelection={false} + handleReinitClick={[MockFunction]} + list={ + Array [ + Object { + "_id": "ECOGESTURE001", + "_rev": "1-67f1ea36efdd892c96bf64a8943154cd", + "_type": "com.grandlyon.ecolyo.ecogesture", + "action": false, + "actionDuration": 3, + "actionName": null, + "difficulty": 1, + "doing": false, + "efficiency": 4, + "equipment": false, + "equipmentInstallation": true, + "equipmentType": Array [], + "fluidTypes": Array [ + 0, + 2, + ], + "id": "ECOGESTURE001", + "impactLevel": 8, + "investment": null, + "longDescription": "On se demande parfois si cela vaut le coup de \\"couper le chauffage\\" quand on s’absente… dès qu’il s’agit d’un week-end la réponse est « oui sûrement » ! Attention cependant au retour à ne pas faire de la surchauffe ! L’idéal est bien évidemment de régler sa programmation pour que le chauffage se relance quelques heures avant votre retour…", + "longName": "Je baisse le chauffage en mode hors gel lorsque je m'absente plus de 2 jours.", + "objective": false, + "room": Array [ + 0, + ], + "season": "Hiver", + "shortName": "Bonhomme de neige", + "usage": 1, + "viewedInSelection": false, + }, + Object { + "_id": "ECOGESTURE002", + "_rev": "1-ef7ddd778254e3b7d331a88fd17f606d", + "_type": "com.grandlyon.ecolyo.ecogesture", + "action": false, + "actionDuration": 3, + "actionName": null, + "difficulty": 1, + "doing": false, + "efficiency": 4, + "equipment": true, + "equipmentInstallation": true, + "equipmentType": Array [ + "AIR_CONDITIONING", + ], + "fluidTypes": Array [ + 0, + ], + "id": "ECOGESTURE002", + "impactLevel": 8, + "investment": null, + "longDescription": "Cela permet de garder la fraîcheur à l'intérieur. Le climatiseur n'est pas là pour refroidir la rue mais bien la pièce.", + "longName": "Je ferme mes fenêtres quand la climatisation est en marche", + "objective": false, + "room": Array [ + 0, + ], + "season": "Eté", + "shortName": "Coup de vent", + "usage": 2, + "viewedInSelection": false, }, - "push": [Function], - "replace": [Function], - } + Object { + "_id": "ECOGESTURE0013", + "_rev": "1-0b2761dd4aef79556c7aef144060fde6", + "_type": "com.grandlyon.ecolyo.ecogesture", + "action": true, + "actionDuration": 3, + "actionName": "J’utilise le cycle court à basse température pour laver le linge et la vaisselle.", + "difficulty": 1, + "doing": false, + "efficiency": 1, + "equipment": false, + "equipmentInstallation": true, + "equipmentType": Array [ + "WASHING_MACHINE", + "DISHWASHER", + ], + "fluidTypes": Array [ + 1, + ], + "id": "ECOGESTURE0013", + "impactLevel": 2, + "investment": null, + "longDescription": "Utilisez la température la plus basse possible : de nombreux produits nettoyants sont efficaces à froid et un cycle à 90 °C consomme 3 fois plus d'énergie qu'un lavage à 40 °C. En effet, 80 % de l'énergie consommée par un lave-linge ou un lave-vaisselle sert au chauffage de l'eau ! Que ce soit pour la vaisselle ou le linge, les programmes de lavage intensif consomment jusqu'à 40 % de plus. Si possible, rincez à l'eau froide : la température de rinçage n'a pas d'effet sur le nettoyage du linge ou de la vaisselle. Attention cependant avec les tissus qui peuvent rétrécir : ce qui fait rétrécir, c'est le passage d'une température à une autre. Mieux vaut alors faire le cycle complet à l'eau froide pour les premiers lavages de tissus sensibles. Pour du linge ou de la vaisselle peu sales, utilisez la touche \\"Eco\\". Elle réduit la température de lavage et allonge sa durée (c’est le chauffage de l’eau qui consomme le plus). Vous économiserez jusqu’à 45 % par rapport aux cycles longs. Néanmoins, pour vous prémunir contre les bouchons de graisse dans les canalisations, faites quand même un cycle à chaud une fois par mois environ.", + "longName": "J’utilise le plus souvent les cycles courts à basse température pour laver le linge et la vaisselle.", + "objective": false, + "room": Array [ + 1, + 3, + 2, + ], + "season": "Sans saison", + "shortName": "Accelerateur de particules", + "usage": 5, + "viewedInSelection": false, + }, + ] } + selectionTotal={0} + selectionViewed={0} > - <EcogestureList - displaySelection={false} - handleReinitClick={[MockFunction]} - list={ - Array [ - Object { - "_id": "ECOGESTURE001", - "_rev": "1-67f1ea36efdd892c96bf64a8943154cd", - "_type": "com.grandlyon.ecolyo.ecogesture", - "action": false, - "actionDuration": 3, - "actionName": null, - "difficulty": 1, - "doing": false, - "efficiency": 4, - "equipment": false, - "equipmentInstallation": true, - "equipmentType": Array [], - "fluidTypes": Array [ - 0, - 2, - ], - "id": "ECOGESTURE001", - "impactLevel": 8, - "investment": null, - "longDescription": "On se demande parfois si cela vaut le coup de \\"couper le chauffage\\" quand on s’absente… dès qu’il s’agit d’un week-end la réponse est « oui sûrement » ! Attention cependant au retour à ne pas faire de la surchauffe ! L’idéal est bien évidemment de régler sa programmation pour que le chauffage se relance quelques heures avant votre retour…", - "longName": "Je baisse le chauffage en mode hors gel lorsque je m'absente plus de 2 jours.", - "objective": false, - "room": Array [ - 0, - ], - "season": "Hiver", - "shortName": "Bonhomme de neige", - "usage": 1, - "viewedInSelection": false, - }, - Object { - "_id": "ECOGESTURE002", - "_rev": "1-ef7ddd778254e3b7d331a88fd17f606d", - "_type": "com.grandlyon.ecolyo.ecogesture", - "action": false, - "actionDuration": 3, - "actionName": null, - "difficulty": 1, - "doing": false, - "efficiency": 4, - "equipment": true, - "equipmentInstallation": true, - "equipmentType": Array [ - "AIR_CONDITIONING", - ], - "fluidTypes": Array [ - 0, - ], - "id": "ECOGESTURE002", - "impactLevel": 8, - "investment": null, - "longDescription": "Cela permet de garder la fraîcheur à l'intérieur. Le climatiseur n'est pas là pour refroidir la rue mais bien la pièce.", - "longName": "Je ferme mes fenêtres quand la climatisation est en marche", - "objective": false, - "room": Array [ - 0, - ], - "season": "Eté", - "shortName": "Coup de vent", - "usage": 2, - "viewedInSelection": false, - }, - Object { - "_id": "ECOGESTURE0013", - "_rev": "1-0b2761dd4aef79556c7aef144060fde6", - "_type": "com.grandlyon.ecolyo.ecogesture", - "action": true, - "actionDuration": 3, - "actionName": "J’utilise le cycle court à basse température pour laver le linge et la vaisselle.", - "difficulty": 1, - "doing": false, - "efficiency": 1, - "equipment": false, - "equipmentInstallation": true, - "equipmentType": Array [ - "WASHING_MACHINE", - "DISHWASHER", - ], - "fluidTypes": Array [ - 1, - ], - "id": "ECOGESTURE0013", - "impactLevel": 2, - "investment": null, - "longDescription": "Utilisez la température la plus basse possible : de nombreux produits nettoyants sont efficaces à froid et un cycle à 90 °C consomme 3 fois plus d'énergie qu'un lavage à 40 °C. En effet, 80 % de l'énergie consommée par un lave-linge ou un lave-vaisselle sert au chauffage de l'eau ! Que ce soit pour la vaisselle ou le linge, les programmes de lavage intensif consomment jusqu'à 40 % de plus. Si possible, rincez à l'eau froide : la température de rinçage n'a pas d'effet sur le nettoyage du linge ou de la vaisselle. Attention cependant avec les tissus qui peuvent rétrécir : ce qui fait rétrécir, c'est le passage d'une température à une autre. Mieux vaut alors faire le cycle complet à l'eau froide pour les premiers lavages de tissus sensibles. Pour du linge ou de la vaisselle peu sales, utilisez la touche \\"Eco\\". Elle réduit la température de lavage et allonge sa durée (c’est le chauffage de l’eau qui consomme le plus). Vous économiserez jusqu’à 45 % par rapport aux cycles longs. Néanmoins, pour vous prémunir contre les bouchons de graisse dans les canalisations, faites quand même un cycle à chaud une fois par mois environ.", - "longName": "J’utilise le plus souvent les cycles courts à basse température pour laver le linge et la vaisselle.", - "objective": false, - "room": Array [ - 1, - 3, - 2, - ], - "season": "Sans saison", - "shortName": "Accelerateur de particules", - "usage": 5, - "viewedInSelection": false, - }, - ] - } - selectionTotal={0} - selectionViewed={0} + <div + className="ecogesture-root" > <div - className="ecogesture-root" + className="efficiency-button-content" > <div - className="efficiency-button-content" + className="filters text-16-normal" > <div - className="filters text-16-normal" + className="filter-button" + onBlur={[Function]} + onClick={[Function]} + tabIndex={0} > - <div - className="filter-button" - onBlur={[Function]} + <WithStyles(ForwardRef(Button)) + aria-controls="simple-menu" + aria-haspopup="true" + aria-label="ecogesture.MENU_TITLE" + classes={ + Object { + "label": "text-14-normal", + "root": "btn-secondary-negative", + } + } onClick={[Function]} - tabIndex={0} + variant="contained" > - <WithStyles(ForwardRef(Button)) + <ForwardRef(Button) aria-controls="simple-menu" aria-haspopup="true" aria-label="ecogesture.MENU_TITLE" classes={ Object { - "label": "text-14-normal", - "root": "btn-secondary-negative", + "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-14-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]} variant="contained" > - <ForwardRef(Button) + <WithStyles(ForwardRef(ButtonBase)) aria-controls="simple-menu" aria-haspopup="true" aria-label="ecogesture.MENU_TITLE" - 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-14-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", - } - } + className="MuiButton-root btn-secondary-negative MuiButton-contained" + component="button" + disabled={false} + focusRipple={true} + focusVisibleClassName="Mui-focusVisible" onClick={[Function]} - variant="contained" + type="button" > - <WithStyles(ForwardRef(ButtonBase)) + <ForwardRef(ButtonBase) aria-controls="simple-menu" aria-haspopup="true" aria-label="ecogesture.MENU_TITLE" className="MuiButton-root btn-secondary-negative MuiButton-contained" + classes={ + Object { + "disabled": "Mui-disabled", + "focusVisible": "Mui-focusVisible", + "root": "MuiButtonBase-root", + } + } component="button" disabled={false} focusRipple={true} @@ -232,120 +239,118 @@ exports[`EcogesturesList component should be rendered correctly 1`] = ` onClick={[Function]} type="button" > - <ForwardRef(ButtonBase) + <button aria-controls="simple-menu" aria-haspopup="true" aria-label="ecogesture.MENU_TITLE" - className="MuiButton-root btn-secondary-negative MuiButton-contained" - classes={ - Object { - "disabled": "Mui-disabled", - "focusVisible": "Mui-focusVisible", - "root": "MuiButtonBase-root", - } - } - component="button" + className="MuiButtonBase-root MuiButton-root btn-secondary-negative MuiButton-contained" disabled={false} - focusRipple={true} - focusVisibleClassName="Mui-focusVisible" + 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" > - <button - aria-controls="simple-menu" - aria-haspopup="true" - aria-label="ecogesture.MENU_TITLE" - className="MuiButtonBase-root MuiButton-root btn-secondary-negative MuiButton-contained" - 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-14-normal" > - <span - className="MuiButton-label text-14-normal" + <StyledIcon + icon="test-file-stub" + size={20} > - <StyledIcon + <Icon + aria-hidden={true} icon="test-file-stub" size={20} + spin={false} > - <Icon + <Component aria-hidden={true} - icon="test-file-stub" - size={20} - spin={false} + className="styles__icon___23x3R" + height={20} + style={Object {}} + width={20} > - <Component + <svg aria-hidden={true} className="styles__icon___23x3R" height={20} style={Object {}} width={20} > - <svg - aria-hidden={true} - className="styles__icon___23x3R" - height={20} - style={Object {}} - width={20} - > - <use - xlinkHref="#test-file-stub" - /> - </svg> - </Component> - </Icon> - </StyledIcon> - <span - className="ecogestures" - > - ecogesture.MENU_TITLE - </span> + <use + xlinkHref="#test-file-stub" + /> + </svg> + </Component> + </Icon> + </StyledIcon> + <span + className="ecogestures" + > + ecogesture.MENU_TITLE </span> - <WithStyles(memo) + </span> + <WithStyles(memo) + center={false} + > + <ForwardRef(TouchRipple) 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", - } + 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" > - <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(Menu)) + <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(Menu)) + MenuListProps={ + Object { + "className": "filter-menu-list", + } + } + PopoverClasses={ + Object { + "paper": "filter-menu", + } + } + anchorEl={null} + keepMounted={true} + onClose={[Function]} + open={false} + variant="menu" + > + <ForwardRef(Menu) MenuListProps={ Object { "className": "filter-menu-list", @@ -357,35 +362,55 @@ exports[`EcogesturesList component should be rendered correctly 1`] = ` } } anchorEl={null} + classes={ + Object { + "list": "MuiMenu-list", + "paper": "MuiMenu-paper", + } + } keepMounted={true} onClose={[Function]} open={false} variant="menu" > - <ForwardRef(Menu) - MenuListProps={ + <WithStyles(ForwardRef(Popover)) + PaperProps={ Object { - "className": "filter-menu-list", + "classes": Object { + "root": "MuiMenu-paper", + }, } } - PopoverClasses={ + TransitionProps={ Object { - "paper": "filter-menu", + "onEntering": [Function], } } anchorEl={null} + anchorOrigin={ + Object { + "horizontal": "left", + "vertical": "top", + } + } classes={ Object { - "list": "MuiMenu-list", - "paper": "MuiMenu-paper", + "paper": "filter-menu", } } + getContentAnchorEl={[Function]} keepMounted={true} onClose={[Function]} open={false} - variant="menu" + transformOrigin={ + Object { + "horizontal": "left", + "vertical": "top", + } + } + transitionDuration="auto" > - <WithStyles(ForwardRef(Popover)) + <ForwardRef(Popover) PaperProps={ Object { "classes": Object { @@ -407,7 +432,8 @@ exports[`EcogesturesList component should be rendered correctly 1`] = ` } classes={ Object { - "paper": "filter-menu", + "paper": "MuiPopover-paper filter-menu", + "root": "MuiPopover-root", } } getContentAnchorEl={[Function]} @@ -422,246 +448,252 @@ exports[`EcogesturesList component should be rendered correctly 1`] = ` } transitionDuration="auto" > - <ForwardRef(Popover) - PaperProps={ - Object { - "classes": Object { - "root": "MuiMenu-paper", - }, - } - } - TransitionProps={ - Object { - "onEntering": [Function], - } - } - anchorEl={null} - anchorOrigin={ - Object { - "horizontal": "left", - "vertical": "top", - } - } - classes={ + <ForwardRef(Modal) + BackdropProps={ Object { - "paper": "MuiPopover-paper filter-menu", - "root": "MuiPopover-root", + "invisible": true, } } - getContentAnchorEl={[Function]} + className="MuiPopover-root" keepMounted={true} onClose={[Function]} open={false} - transformOrigin={ - Object { - "horizontal": "left", - "vertical": "top", - } - } - transitionDuration="auto" > - <ForwardRef(Modal) - BackdropProps={ - Object { - "invisible": true, - } - } - className="MuiPopover-root" - keepMounted={true} - onClose={[Function]} - open={false} + <ForwardRef(Portal) + disablePortal={false} > - <ForwardRef(Portal) - disablePortal={false} - > - <Portal - containerInfo={ - <body> + <Portal + containerInfo={ + <body> + <div + aria-hidden="true" + class="MuiPopover-root" + role="presentation" + style="position: fixed; z-index: 1300; right: 0px; bottom: 0px; top: 0px; left: 0px; visibility: hidden;" + > <div - aria-hidden="true" - class="MuiPopover-root" - role="presentation" - style="position: fixed; z-index: 1300; right: 0px; bottom: 0px; top: 0px; left: 0px; visibility: hidden;" + data-test="sentinelStart" + tabindex="0" + /> + <div + class="MuiPaper-root MuiMenu-paper MuiPopover-paper filter-menu MuiPaper-elevation8 MuiPaper-rounded" + style="opacity: 0; transform: scale(0.75, 0.5625); visibility: hidden;" + tabindex="-1" > - <div - data-test="sentinelStart" - tabindex="0" - /> - <div - class="MuiPaper-root MuiMenu-paper MuiPopover-paper filter-menu MuiPaper-elevation8 MuiPaper-rounded" - style="opacity: 0; transform: scale(0.75, 0.5625); visibility: hidden;" + <ul + class="MuiList-root MuiMenu-list filter-menu-list MuiList-padding" + role="menu" tabindex="-1" > - <ul - class="MuiList-root MuiMenu-list filter-menu-list MuiList-padding" - role="menu" + <li + aria-disabled="false" + class="MuiButtonBase-root MuiListItem-root MuiMenuItem-root item-active Mui-selected MuiMenuItem-gutters MuiListItem-gutters MuiListItem-button Mui-selected" + role="menuitem" tabindex="-1" > - <li - aria-disabled="false" - class="MuiButtonBase-root MuiListItem-root MuiMenuItem-root item-active Mui-selected MuiMenuItem-gutters MuiListItem-gutters MuiListItem-button Mui-selected" - role="menuitem" - tabindex="-1" + ecogesture.ALL + <div + class="MuiListItemIcon-root filter-menu-icon" > - ecogesture.ALL - <div - class="MuiListItemIcon-root filter-menu-icon" + <svg + aria-hidden="true" + class="styles__icon___23x3R" + height="13" + width="13" > - <svg - aria-hidden="true" - class="styles__icon___23x3R" - height="13" - width="13" - > - <use - xlink:href="#test-file-stub" - /> - </svg> - </div> - <span - class="MuiTouchRipple-root" - /> - </li> - <li - aria-disabled="false" - class="MuiButtonBase-root MuiListItem-root MuiMenuItem-root MuiMenuItem-gutters MuiListItem-gutters MuiListItem-button" - role="menuitem" - tabindex="-1" - > - ecogesture.HEATING - <span - class="MuiTouchRipple-root" - /> - </li> - <li - aria-disabled="false" - class="MuiButtonBase-root MuiListItem-root MuiMenuItem-root MuiMenuItem-gutters MuiListItem-gutters MuiListItem-button" - role="menuitem" - tabindex="-1" - > - ecogesture.AIR_CONDITIONING - <span - class="MuiTouchRipple-root" - /> - </li> - <li - aria-disabled="false" - class="MuiButtonBase-root MuiListItem-root MuiMenuItem-root MuiMenuItem-gutters MuiListItem-gutters MuiListItem-button" - role="menuitem" - tabindex="-1" - > - ecogesture.ECS - <span - class="MuiTouchRipple-root" - /> - </li> - <li - aria-disabled="false" - class="MuiButtonBase-root MuiListItem-root MuiMenuItem-root MuiMenuItem-gutters MuiListItem-gutters MuiListItem-button" - role="menuitem" - tabindex="-1" - > - ecogesture.COLD_WATER - <span - class="MuiTouchRipple-root" - /> - </li> - <li - aria-disabled="false" - class="MuiButtonBase-root MuiListItem-root MuiMenuItem-root MuiMenuItem-gutters MuiListItem-gutters MuiListItem-button" - role="menuitem" - tabindex="-1" - > - ecogesture.ELECTRICITY_SPECIFIC - <span - class="MuiTouchRipple-root" - /> - </li> - <li - aria-disabled="false" - class="MuiButtonBase-root MuiListItem-root MuiMenuItem-root MuiMenuItem-gutters MuiListItem-gutters MuiListItem-button" - role="menuitem" - tabindex="-1" - > - ecogesture.COOKING - <span - class="MuiTouchRipple-root" - /> - </li> - </ul> - </div> - <div - data-test="sentinelEnd" - tabindex="0" - /> + <use + xlink:href="#test-file-stub" + /> + </svg> + </div> + <span + class="MuiTouchRipple-root" + /> + </li> + <li + aria-disabled="false" + class="MuiButtonBase-root MuiListItem-root MuiMenuItem-root MuiMenuItem-gutters MuiListItem-gutters MuiListItem-button" + role="menuitem" + tabindex="-1" + > + ecogesture.HEATING + <span + class="MuiTouchRipple-root" + /> + </li> + <li + aria-disabled="false" + class="MuiButtonBase-root MuiListItem-root MuiMenuItem-root MuiMenuItem-gutters MuiListItem-gutters MuiListItem-button" + role="menuitem" + tabindex="-1" + > + ecogesture.AIR_CONDITIONING + <span + class="MuiTouchRipple-root" + /> + </li> + <li + aria-disabled="false" + class="MuiButtonBase-root MuiListItem-root MuiMenuItem-root MuiMenuItem-gutters MuiListItem-gutters MuiListItem-button" + role="menuitem" + tabindex="-1" + > + ecogesture.ECS + <span + class="MuiTouchRipple-root" + /> + </li> + <li + aria-disabled="false" + class="MuiButtonBase-root MuiListItem-root MuiMenuItem-root MuiMenuItem-gutters MuiListItem-gutters MuiListItem-button" + role="menuitem" + tabindex="-1" + > + ecogesture.COLD_WATER + <span + class="MuiTouchRipple-root" + /> + </li> + <li + aria-disabled="false" + class="MuiButtonBase-root MuiListItem-root MuiMenuItem-root MuiMenuItem-gutters MuiListItem-gutters MuiListItem-button" + role="menuitem" + tabindex="-1" + > + ecogesture.ELECTRICITY_SPECIFIC + <span + class="MuiTouchRipple-root" + /> + </li> + <li + aria-disabled="false" + class="MuiButtonBase-root MuiListItem-root MuiMenuItem-root MuiMenuItem-gutters MuiListItem-gutters MuiListItem-button" + role="menuitem" + tabindex="-1" + > + ecogesture.COOKING + <span + class="MuiTouchRipple-root" + /> + </li> + </ul> </div> - </body> + <div + data-test="sentinelEnd" + tabindex="0" + /> + </div> + </body> + } + > + <div + className="MuiPopover-root" + onKeyDown={[Function]} + role="presentation" + style={ + Object { + "bottom": 0, + "left": 0, + "position": "fixed", + "right": 0, + "top": 0, + "visibility": "hidden", + "zIndex": 1300, + } } > - <div - className="MuiPopover-root" - onKeyDown={[Function]} - role="presentation" - style={ - Object { - "bottom": 0, - "left": 0, - "position": "fixed", - "right": 0, - "top": 0, - "visibility": "hidden", - "zIndex": 1300, - } - } + <ForwardRef(SimpleBackdrop) + invisible={true} + onClick={[Function]} + open={false} + /> + <Unstable_TrapFocus + disableAutoFocus={false} + disableEnforceFocus={false} + disableRestoreFocus={false} + getDoc={[Function]} + isEnabled={[Function]} + open={false} > - <ForwardRef(SimpleBackdrop) - invisible={true} - onClick={[Function]} - open={false} + <div + data-test="sentinelStart" + tabIndex={0} /> - <Unstable_TrapFocus - disableAutoFocus={false} - disableEnforceFocus={false} - disableRestoreFocus={false} - getDoc={[Function]} - isEnabled={[Function]} - open={false} + <ForwardRef(Grow) + appear={true} + in={false} + onEnter={[Function]} + onEntering={[Function]} + onExited={[Function]} + tabIndex="-1" + timeout="auto" > - <div - data-test="sentinelStart" - tabIndex={0} - /> - <ForwardRef(Grow) + <Transition + addEndListener={[Function]} appear={true} + enter={true} + exit={true} in={false} + mountOnEnter={false} onEnter={[Function]} + onEntered={[Function]} onEntering={[Function]} + onExit={[Function]} onExited={[Function]} + onExiting={[Function]} tabIndex="-1" - timeout="auto" + timeout={null} + unmountOnExit={false} > - <Transition - addEndListener={[Function]} - appear={true} - enter={true} - exit={true} - in={false} - mountOnEnter={false} - onEnter={[Function]} - onEntered={[Function]} - onEntering={[Function]} - onExit={[Function]} - onExited={[Function]} - onExiting={[Function]} + <WithStyles(ForwardRef(Paper)) + className="MuiPopover-paper filter-menu" + classes={ + Object { + "root": "MuiMenu-paper", + } + } + elevation={8} + style={ + Object { + "opacity": 0, + "transform": "scale(0.75, 0.5625)", + "visibility": "hidden", + } + } tabIndex="-1" - timeout={null} - unmountOnExit={false} > - <WithStyles(ForwardRef(Paper)) + <ForwardRef(Paper) className="MuiPopover-paper filter-menu" classes={ Object { - "root": "MuiMenu-paper", + "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 MuiMenu-paper", + "rounded": "MuiPaper-rounded", } } elevation={8} @@ -674,41 +706,8 @@ exports[`EcogesturesList component should be rendered correctly 1`] = ` } tabIndex="-1" > - <ForwardRef(Paper) - className="MuiPopover-paper filter-menu" - 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 MuiMenu-paper", - "rounded": "MuiPaper-rounded", - } - } - elevation={8} + <div + className="MuiPaper-root MuiMenu-paper MuiPopover-paper filter-menu MuiPaper-elevation8 MuiPaper-rounded" style={ Object { "opacity": 0, @@ -718,85 +717,99 @@ exports[`EcogesturesList component should be rendered correctly 1`] = ` } tabIndex="-1" > - <div - className="MuiPaper-root MuiMenu-paper MuiPopover-paper filter-menu MuiPaper-elevation8 MuiPaper-rounded" - style={ + <ForwardRef(MenuList) + actions={ Object { - "opacity": 0, - "transform": "scale(0.75, 0.5625)", - "visibility": "hidden", + "current": Object { + "adjustStyleForScrollbar": [Function], + }, } } - tabIndex="-1" + autoFocus={false} + autoFocusItem={false} + className="MuiMenu-list filter-menu-list" + onKeyDown={[Function]} + variant="menu" > - <ForwardRef(MenuList) - actions={ - Object { - "current": Object { - "adjustStyleForScrollbar": [Function], - }, - } - } - autoFocus={false} - autoFocusItem={false} + <WithStyles(ForwardRef(List)) className="MuiMenu-list filter-menu-list" onKeyDown={[Function]} - variant="menu" + role="menu" + tabIndex={-1} > - <WithStyles(ForwardRef(List)) + <ForwardRef(List) className="MuiMenu-list filter-menu-list" + classes={ + Object { + "dense": "MuiList-dense", + "padding": "MuiList-padding", + "root": "MuiList-root", + "subheader": "MuiList-subheader", + } + } onKeyDown={[Function]} role="menu" tabIndex={-1} > - <ForwardRef(List) - className="MuiMenu-list filter-menu-list" - classes={ - Object { - "dense": "MuiList-dense", - "padding": "MuiList-padding", - "root": "MuiList-root", - "subheader": "MuiList-subheader", - } - } + <ul + className="MuiList-root MuiMenu-list filter-menu-list MuiList-padding" onKeyDown={[Function]} role="menu" tabIndex={-1} > - <ul - className="MuiList-root MuiMenu-list filter-menu-list MuiList-padding" - onKeyDown={[Function]} - role="menu" - tabIndex={-1} + <WithStyles(ForwardRef(MenuItem)) + classes={ + Object { + "root": "item-active", + } + } + key=".$.$0" + onClick={[Function]} + selected={true} > - <WithStyles(ForwardRef(MenuItem)) + <ForwardRef(MenuItem) classes={ Object { - "root": "item-active", + "dense": "MuiMenuItem-dense", + "gutters": "MuiMenuItem-gutters", + "root": "MuiMenuItem-root item-active", + "selected": "Mui-selected", } } - key=".$.$0" onClick={[Function]} selected={true} > - <ForwardRef(MenuItem) + <WithStyles(ForwardRef(ListItem)) + button={true} + className="MuiMenuItem-root item-active Mui-selected MuiMenuItem-gutters" classes={ Object { "dense": "MuiMenuItem-dense", - "gutters": "MuiMenuItem-gutters", - "root": "MuiMenuItem-root item-active", - "selected": "Mui-selected", } } + component="li" + disableGutters={false} onClick={[Function]} + role="menuitem" selected={true} + tabIndex={-1} > - <WithStyles(ForwardRef(ListItem)) + <ForwardRef(ListItem) button={true} className="MuiMenuItem-root item-active Mui-selected MuiMenuItem-gutters" classes={ Object { - "dense": "MuiMenuItem-dense", + "alignItemsFlexStart": "MuiListItem-alignItemsFlexStart", + "button": "MuiListItem-button", + "container": "MuiListItem-container", + "dense": "MuiListItem-dense MuiMenuItem-dense", + "disabled": "Mui-disabled", + "divider": "MuiListItem-divider", + "focusVisible": "Mui-focusVisible", + "gutters": "MuiListItem-gutters", + "root": "MuiListItem-root", + "secondaryAction": "MuiListItem-secondaryAction", + "selected": "Mui-selected", } } component="li" @@ -806,33 +819,24 @@ exports[`EcogesturesList component should be rendered correctly 1`] = ` selected={true} tabIndex={-1} > - <ForwardRef(ListItem) - button={true} - className="MuiMenuItem-root item-active Mui-selected MuiMenuItem-gutters" - classes={ - Object { - "alignItemsFlexStart": "MuiListItem-alignItemsFlexStart", - "button": "MuiListItem-button", - "container": "MuiListItem-container", - "dense": "MuiListItem-dense MuiMenuItem-dense", - "disabled": "Mui-disabled", - "divider": "MuiListItem-divider", - "focusVisible": "Mui-focusVisible", - "gutters": "MuiListItem-gutters", - "root": "MuiListItem-root", - "secondaryAction": "MuiListItem-secondaryAction", - "selected": "Mui-selected", - } - } + <WithStyles(ForwardRef(ButtonBase)) + className="MuiListItem-root MuiMenuItem-root item-active Mui-selected MuiMenuItem-gutters MuiListItem-gutters MuiListItem-button Mui-selected" component="li" - disableGutters={false} + disabled={false} + focusVisibleClassName="Mui-focusVisible" onClick={[Function]} role="menuitem" - selected={true} tabIndex={-1} > - <WithStyles(ForwardRef(ButtonBase)) + <ForwardRef(ButtonBase) className="MuiListItem-root MuiMenuItem-root item-active Mui-selected MuiMenuItem-gutters MuiListItem-gutters MuiListItem-button Mui-selected" + classes={ + Object { + "disabled": "Mui-disabled", + "focusVisible": "Mui-focusVisible", + "root": "MuiButtonBase-root", + } + } component="li" disabled={false} focusVisibleClassName="Mui-focusVisible" @@ -840,157 +844,166 @@ exports[`EcogesturesList component should be rendered correctly 1`] = ` role="menuitem" tabIndex={-1} > - <ForwardRef(ButtonBase) - className="MuiListItem-root MuiMenuItem-root item-active Mui-selected MuiMenuItem-gutters MuiListItem-gutters MuiListItem-button Mui-selected" - classes={ - Object { - "disabled": "Mui-disabled", - "focusVisible": "Mui-focusVisible", - "root": "MuiButtonBase-root", - } - } - component="li" - disabled={false} - focusVisibleClassName="Mui-focusVisible" + <li + aria-disabled={false} + className="MuiButtonBase-root MuiListItem-root MuiMenuItem-root item-active Mui-selected MuiMenuItem-gutters MuiListItem-gutters MuiListItem-button Mui-selected" + onBlur={[Function]} onClick={[Function]} + onDragLeave={[Function]} + onFocus={[Function]} + onKeyDown={[Function]} + onKeyUp={[Function]} + onMouseDown={[Function]} + onMouseLeave={[Function]} + onMouseUp={[Function]} + onTouchEnd={[Function]} + onTouchMove={[Function]} + onTouchStart={[Function]} role="menuitem" tabIndex={-1} > - <li - aria-disabled={false} - className="MuiButtonBase-root MuiListItem-root MuiMenuItem-root item-active Mui-selected MuiMenuItem-gutters MuiListItem-gutters MuiListItem-button Mui-selected" - onBlur={[Function]} - onClick={[Function]} - onDragLeave={[Function]} - onFocus={[Function]} - onKeyDown={[Function]} - onKeyUp={[Function]} - onMouseDown={[Function]} - onMouseLeave={[Function]} - onMouseUp={[Function]} - onTouchEnd={[Function]} - onTouchMove={[Function]} - onTouchStart={[Function]} - role="menuitem" - tabIndex={-1} + ecogesture.ALL + <WithStyles(ForwardRef(ListItemIcon)) + classes={ + Object { + "root": "filter-menu-icon", + } + } + key=".1" > - ecogesture.ALL - <WithStyles(ForwardRef(ListItemIcon)) + <ForwardRef(ListItemIcon) classes={ Object { - "root": "filter-menu-icon", + "alignItemsFlexStart": "MuiListItemIcon-alignItemsFlexStart", + "root": "MuiListItemIcon-root filter-menu-icon", } } - key=".1" > - <ForwardRef(ListItemIcon) - classes={ - Object { - "alignItemsFlexStart": "MuiListItemIcon-alignItemsFlexStart", - "root": "MuiListItemIcon-root filter-menu-icon", - } - } + <div + className="MuiListItemIcon-root filter-menu-icon" > - <div - className="MuiListItemIcon-root filter-menu-icon" + <StyledIcon + icon="test-file-stub" + size={13} > - <StyledIcon + <Icon + aria-hidden={true} icon="test-file-stub" size={13} + spin={false} > - <Icon + <Component aria-hidden={true} - icon="test-file-stub" - size={13} - spin={false} + className="styles__icon___23x3R" + height={13} + style={Object {}} + width={13} > - <Component + <svg aria-hidden={true} className="styles__icon___23x3R" height={13} style={Object {}} width={13} > - <svg - aria-hidden={true} - className="styles__icon___23x3R" - height={13} - style={Object {}} - width={13} - > - <use - xlinkHref="#test-file-stub" - /> - </svg> - </Component> - </Icon> - </StyledIcon> - </div> - </ForwardRef(ListItemIcon)> - </WithStyles(ForwardRef(ListItemIcon))> - <WithStyles(memo) + <use + xlinkHref="#test-file-stub" + /> + </svg> + </Component> + </Icon> + </StyledIcon> + </div> + </ForwardRef(ListItemIcon)> + </WithStyles(ForwardRef(ListItemIcon))> + <WithStyles(memo) + center={false} + > + <ForwardRef(TouchRipple) 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", - } + 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" > - <span - className="MuiTouchRipple-root" - > - <TransitionGroup - childFactory={[Function]} - component={null} - exit={true} - /> - </span> - </ForwardRef(TouchRipple)> - </WithStyles(memo)> - </li> - </ForwardRef(ButtonBase)> - </WithStyles(ForwardRef(ButtonBase))> - </ForwardRef(ListItem)> - </WithStyles(ForwardRef(ListItem))> - </ForwardRef(MenuItem)> - </WithStyles(ForwardRef(MenuItem))> - <WithStyles(ForwardRef(MenuItem)) + <TransitionGroup + childFactory={[Function]} + component={null} + exit={true} + /> + </span> + </ForwardRef(TouchRipple)> + </WithStyles(memo)> + </li> + </ForwardRef(ButtonBase)> + </WithStyles(ForwardRef(ButtonBase))> + </ForwardRef(ListItem)> + </WithStyles(ForwardRef(ListItem))> + </ForwardRef(MenuItem)> + </WithStyles(ForwardRef(MenuItem))> + <WithStyles(ForwardRef(MenuItem)) + classes={ + Object { + "root": "", + } + } + key=".$.$1" + onClick={[Function]} + selected={false} + > + <ForwardRef(MenuItem) classes={ Object { - "root": "", + "dense": "MuiMenuItem-dense", + "gutters": "MuiMenuItem-gutters", + "root": "MuiMenuItem-root", + "selected": "Mui-selected", } } - key=".$.$1" onClick={[Function]} selected={false} > - <ForwardRef(MenuItem) + <WithStyles(ForwardRef(ListItem)) + button={true} + className="MuiMenuItem-root MuiMenuItem-gutters" classes={ Object { "dense": "MuiMenuItem-dense", - "gutters": "MuiMenuItem-gutters", - "root": "MuiMenuItem-root", - "selected": "Mui-selected", } } + component="li" + disableGutters={false} onClick={[Function]} + role="menuitem" selected={false} + tabIndex={-1} > - <WithStyles(ForwardRef(ListItem)) + <ForwardRef(ListItem) button={true} className="MuiMenuItem-root MuiMenuItem-gutters" classes={ Object { - "dense": "MuiMenuItem-dense", + "alignItemsFlexStart": "MuiListItem-alignItemsFlexStart", + "button": "MuiListItem-button", + "container": "MuiListItem-container", + "dense": "MuiListItem-dense MuiMenuItem-dense", + "disabled": "Mui-disabled", + "divider": "MuiListItem-divider", + "focusVisible": "Mui-focusVisible", + "gutters": "MuiListItem-gutters", + "root": "MuiListItem-root", + "secondaryAction": "MuiListItem-secondaryAction", + "selected": "Mui-selected", } } component="li" @@ -1000,33 +1013,24 @@ exports[`EcogesturesList component should be rendered correctly 1`] = ` selected={false} tabIndex={-1} > - <ForwardRef(ListItem) - button={true} - className="MuiMenuItem-root MuiMenuItem-gutters" - classes={ - Object { - "alignItemsFlexStart": "MuiListItem-alignItemsFlexStart", - "button": "MuiListItem-button", - "container": "MuiListItem-container", - "dense": "MuiListItem-dense MuiMenuItem-dense", - "disabled": "Mui-disabled", - "divider": "MuiListItem-divider", - "focusVisible": "Mui-focusVisible", - "gutters": "MuiListItem-gutters", - "root": "MuiListItem-root", - "secondaryAction": "MuiListItem-secondaryAction", - "selected": "Mui-selected", - } - } + <WithStyles(ForwardRef(ButtonBase)) + className="MuiListItem-root MuiMenuItem-root MuiMenuItem-gutters MuiListItem-gutters MuiListItem-button" component="li" - disableGutters={false} + disabled={false} + focusVisibleClassName="Mui-focusVisible" onClick={[Function]} role="menuitem" - selected={false} tabIndex={-1} > - <WithStyles(ForwardRef(ButtonBase)) + <ForwardRef(ButtonBase) className="MuiListItem-root MuiMenuItem-root MuiMenuItem-gutters MuiListItem-gutters MuiListItem-button" + classes={ + Object { + "disabled": "Mui-disabled", + "focusVisible": "Mui-focusVisible", + "root": "MuiButtonBase-root", + } + } component="li" disabled={false} focusVisibleClassName="Mui-focusVisible" @@ -1034,104 +1038,113 @@ exports[`EcogesturesList component should be rendered correctly 1`] = ` role="menuitem" tabIndex={-1} > - <ForwardRef(ButtonBase) - className="MuiListItem-root MuiMenuItem-root MuiMenuItem-gutters MuiListItem-gutters MuiListItem-button" - classes={ - Object { - "disabled": "Mui-disabled", - "focusVisible": "Mui-focusVisible", - "root": "MuiButtonBase-root", - } - } - component="li" - disabled={false} - focusVisibleClassName="Mui-focusVisible" + <li + aria-disabled={false} + className="MuiButtonBase-root MuiListItem-root MuiMenuItem-root MuiMenuItem-gutters MuiListItem-gutters MuiListItem-button" + onBlur={[Function]} onClick={[Function]} + onDragLeave={[Function]} + onFocus={[Function]} + onKeyDown={[Function]} + onKeyUp={[Function]} + onMouseDown={[Function]} + onMouseLeave={[Function]} + onMouseUp={[Function]} + onTouchEnd={[Function]} + onTouchMove={[Function]} + onTouchStart={[Function]} role="menuitem" tabIndex={-1} > - <li - aria-disabled={false} - className="MuiButtonBase-root MuiListItem-root MuiMenuItem-root MuiMenuItem-gutters MuiListItem-gutters MuiListItem-button" - onBlur={[Function]} - onClick={[Function]} - onDragLeave={[Function]} - onFocus={[Function]} - onKeyDown={[Function]} - onKeyUp={[Function]} - onMouseDown={[Function]} - onMouseLeave={[Function]} - onMouseUp={[Function]} - onTouchEnd={[Function]} - onTouchMove={[Function]} - onTouchStart={[Function]} - role="menuitem" - tabIndex={-1} + ecogesture.HEATING + <WithStyles(memo) + center={false} > - ecogesture.HEATING - <WithStyles(memo) + <ForwardRef(TouchRipple) 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", - } + 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" > - <span - className="MuiTouchRipple-root" - > - <TransitionGroup - childFactory={[Function]} - component={null} - exit={true} - /> - </span> - </ForwardRef(TouchRipple)> - </WithStyles(memo)> - </li> - </ForwardRef(ButtonBase)> - </WithStyles(ForwardRef(ButtonBase))> - </ForwardRef(ListItem)> - </WithStyles(ForwardRef(ListItem))> - </ForwardRef(MenuItem)> - </WithStyles(ForwardRef(MenuItem))> - <WithStyles(ForwardRef(MenuItem)) + <TransitionGroup + childFactory={[Function]} + component={null} + exit={true} + /> + </span> + </ForwardRef(TouchRipple)> + </WithStyles(memo)> + </li> + </ForwardRef(ButtonBase)> + </WithStyles(ForwardRef(ButtonBase))> + </ForwardRef(ListItem)> + </WithStyles(ForwardRef(ListItem))> + </ForwardRef(MenuItem)> + </WithStyles(ForwardRef(MenuItem))> + <WithStyles(ForwardRef(MenuItem)) + classes={ + Object { + "root": "", + } + } + key=".$.$2" + onClick={[Function]} + selected={false} + > + <ForwardRef(MenuItem) classes={ Object { - "root": "", + "dense": "MuiMenuItem-dense", + "gutters": "MuiMenuItem-gutters", + "root": "MuiMenuItem-root", + "selected": "Mui-selected", } } - key=".$.$2" onClick={[Function]} selected={false} > - <ForwardRef(MenuItem) + <WithStyles(ForwardRef(ListItem)) + button={true} + className="MuiMenuItem-root MuiMenuItem-gutters" classes={ Object { "dense": "MuiMenuItem-dense", - "gutters": "MuiMenuItem-gutters", - "root": "MuiMenuItem-root", - "selected": "Mui-selected", } } + component="li" + disableGutters={false} onClick={[Function]} + role="menuitem" selected={false} + tabIndex={-1} > - <WithStyles(ForwardRef(ListItem)) + <ForwardRef(ListItem) button={true} className="MuiMenuItem-root MuiMenuItem-gutters" classes={ Object { - "dense": "MuiMenuItem-dense", + "alignItemsFlexStart": "MuiListItem-alignItemsFlexStart", + "button": "MuiListItem-button", + "container": "MuiListItem-container", + "dense": "MuiListItem-dense MuiMenuItem-dense", + "disabled": "Mui-disabled", + "divider": "MuiListItem-divider", + "focusVisible": "Mui-focusVisible", + "gutters": "MuiListItem-gutters", + "root": "MuiListItem-root", + "secondaryAction": "MuiListItem-secondaryAction", + "selected": "Mui-selected", } } component="li" @@ -1141,33 +1154,24 @@ exports[`EcogesturesList component should be rendered correctly 1`] = ` selected={false} tabIndex={-1} > - <ForwardRef(ListItem) - button={true} - className="MuiMenuItem-root MuiMenuItem-gutters" - classes={ - Object { - "alignItemsFlexStart": "MuiListItem-alignItemsFlexStart", - "button": "MuiListItem-button", - "container": "MuiListItem-container", - "dense": "MuiListItem-dense MuiMenuItem-dense", - "disabled": "Mui-disabled", - "divider": "MuiListItem-divider", - "focusVisible": "Mui-focusVisible", - "gutters": "MuiListItem-gutters", - "root": "MuiListItem-root", - "secondaryAction": "MuiListItem-secondaryAction", - "selected": "Mui-selected", - } - } + <WithStyles(ForwardRef(ButtonBase)) + className="MuiListItem-root MuiMenuItem-root MuiMenuItem-gutters MuiListItem-gutters MuiListItem-button" component="li" - disableGutters={false} + disabled={false} + focusVisibleClassName="Mui-focusVisible" onClick={[Function]} role="menuitem" - selected={false} tabIndex={-1} > - <WithStyles(ForwardRef(ButtonBase)) + <ForwardRef(ButtonBase) className="MuiListItem-root MuiMenuItem-root MuiMenuItem-gutters MuiListItem-gutters MuiListItem-button" + classes={ + Object { + "disabled": "Mui-disabled", + "focusVisible": "Mui-focusVisible", + "root": "MuiButtonBase-root", + } + } component="li" disabled={false} focusVisibleClassName="Mui-focusVisible" @@ -1175,104 +1179,113 @@ exports[`EcogesturesList component should be rendered correctly 1`] = ` role="menuitem" tabIndex={-1} > - <ForwardRef(ButtonBase) - className="MuiListItem-root MuiMenuItem-root MuiMenuItem-gutters MuiListItem-gutters MuiListItem-button" - classes={ - Object { - "disabled": "Mui-disabled", - "focusVisible": "Mui-focusVisible", - "root": "MuiButtonBase-root", - } - } - component="li" - disabled={false} - focusVisibleClassName="Mui-focusVisible" + <li + aria-disabled={false} + className="MuiButtonBase-root MuiListItem-root MuiMenuItem-root MuiMenuItem-gutters MuiListItem-gutters MuiListItem-button" + onBlur={[Function]} onClick={[Function]} + onDragLeave={[Function]} + onFocus={[Function]} + onKeyDown={[Function]} + onKeyUp={[Function]} + onMouseDown={[Function]} + onMouseLeave={[Function]} + onMouseUp={[Function]} + onTouchEnd={[Function]} + onTouchMove={[Function]} + onTouchStart={[Function]} role="menuitem" tabIndex={-1} > - <li - aria-disabled={false} - className="MuiButtonBase-root MuiListItem-root MuiMenuItem-root MuiMenuItem-gutters MuiListItem-gutters MuiListItem-button" - onBlur={[Function]} - onClick={[Function]} - onDragLeave={[Function]} - onFocus={[Function]} - onKeyDown={[Function]} - onKeyUp={[Function]} - onMouseDown={[Function]} - onMouseLeave={[Function]} - onMouseUp={[Function]} - onTouchEnd={[Function]} - onTouchMove={[Function]} - onTouchStart={[Function]} - role="menuitem" - tabIndex={-1} + ecogesture.AIR_CONDITIONING + <WithStyles(memo) + center={false} > - ecogesture.AIR_CONDITIONING - <WithStyles(memo) + <ForwardRef(TouchRipple) 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", - } + 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" > - <span - className="MuiTouchRipple-root" - > - <TransitionGroup - childFactory={[Function]} - component={null} - exit={true} - /> - </span> - </ForwardRef(TouchRipple)> - </WithStyles(memo)> - </li> - </ForwardRef(ButtonBase)> - </WithStyles(ForwardRef(ButtonBase))> - </ForwardRef(ListItem)> - </WithStyles(ForwardRef(ListItem))> - </ForwardRef(MenuItem)> - </WithStyles(ForwardRef(MenuItem))> - <WithStyles(ForwardRef(MenuItem)) + <TransitionGroup + childFactory={[Function]} + component={null} + exit={true} + /> + </span> + </ForwardRef(TouchRipple)> + </WithStyles(memo)> + </li> + </ForwardRef(ButtonBase)> + </WithStyles(ForwardRef(ButtonBase))> + </ForwardRef(ListItem)> + </WithStyles(ForwardRef(ListItem))> + </ForwardRef(MenuItem)> + </WithStyles(ForwardRef(MenuItem))> + <WithStyles(ForwardRef(MenuItem)) + classes={ + Object { + "root": "", + } + } + key=".$.$3" + onClick={[Function]} + selected={false} + > + <ForwardRef(MenuItem) classes={ Object { - "root": "", + "dense": "MuiMenuItem-dense", + "gutters": "MuiMenuItem-gutters", + "root": "MuiMenuItem-root", + "selected": "Mui-selected", } } - key=".$.$3" onClick={[Function]} selected={false} > - <ForwardRef(MenuItem) + <WithStyles(ForwardRef(ListItem)) + button={true} + className="MuiMenuItem-root MuiMenuItem-gutters" classes={ Object { "dense": "MuiMenuItem-dense", - "gutters": "MuiMenuItem-gutters", - "root": "MuiMenuItem-root", - "selected": "Mui-selected", } } + component="li" + disableGutters={false} onClick={[Function]} + role="menuitem" selected={false} + tabIndex={-1} > - <WithStyles(ForwardRef(ListItem)) + <ForwardRef(ListItem) button={true} className="MuiMenuItem-root MuiMenuItem-gutters" classes={ Object { - "dense": "MuiMenuItem-dense", + "alignItemsFlexStart": "MuiListItem-alignItemsFlexStart", + "button": "MuiListItem-button", + "container": "MuiListItem-container", + "dense": "MuiListItem-dense MuiMenuItem-dense", + "disabled": "Mui-disabled", + "divider": "MuiListItem-divider", + "focusVisible": "Mui-focusVisible", + "gutters": "MuiListItem-gutters", + "root": "MuiListItem-root", + "secondaryAction": "MuiListItem-secondaryAction", + "selected": "Mui-selected", } } component="li" @@ -1282,33 +1295,24 @@ exports[`EcogesturesList component should be rendered correctly 1`] = ` selected={false} tabIndex={-1} > - <ForwardRef(ListItem) - button={true} - className="MuiMenuItem-root MuiMenuItem-gutters" - classes={ - Object { - "alignItemsFlexStart": "MuiListItem-alignItemsFlexStart", - "button": "MuiListItem-button", - "container": "MuiListItem-container", - "dense": "MuiListItem-dense MuiMenuItem-dense", - "disabled": "Mui-disabled", - "divider": "MuiListItem-divider", - "focusVisible": "Mui-focusVisible", - "gutters": "MuiListItem-gutters", - "root": "MuiListItem-root", - "secondaryAction": "MuiListItem-secondaryAction", - "selected": "Mui-selected", - } - } + <WithStyles(ForwardRef(ButtonBase)) + className="MuiListItem-root MuiMenuItem-root MuiMenuItem-gutters MuiListItem-gutters MuiListItem-button" component="li" - disableGutters={false} + disabled={false} + focusVisibleClassName="Mui-focusVisible" onClick={[Function]} role="menuitem" - selected={false} tabIndex={-1} > - <WithStyles(ForwardRef(ButtonBase)) + <ForwardRef(ButtonBase) className="MuiListItem-root MuiMenuItem-root MuiMenuItem-gutters MuiListItem-gutters MuiListItem-button" + classes={ + Object { + "disabled": "Mui-disabled", + "focusVisible": "Mui-focusVisible", + "root": "MuiButtonBase-root", + } + } component="li" disabled={false} focusVisibleClassName="Mui-focusVisible" @@ -1316,104 +1320,113 @@ exports[`EcogesturesList component should be rendered correctly 1`] = ` role="menuitem" tabIndex={-1} > - <ForwardRef(ButtonBase) - className="MuiListItem-root MuiMenuItem-root MuiMenuItem-gutters MuiListItem-gutters MuiListItem-button" - classes={ - Object { - "disabled": "Mui-disabled", - "focusVisible": "Mui-focusVisible", - "root": "MuiButtonBase-root", - } - } - component="li" - disabled={false} - focusVisibleClassName="Mui-focusVisible" + <li + aria-disabled={false} + className="MuiButtonBase-root MuiListItem-root MuiMenuItem-root MuiMenuItem-gutters MuiListItem-gutters MuiListItem-button" + onBlur={[Function]} onClick={[Function]} + onDragLeave={[Function]} + onFocus={[Function]} + onKeyDown={[Function]} + onKeyUp={[Function]} + onMouseDown={[Function]} + onMouseLeave={[Function]} + onMouseUp={[Function]} + onTouchEnd={[Function]} + onTouchMove={[Function]} + onTouchStart={[Function]} role="menuitem" tabIndex={-1} > - <li - aria-disabled={false} - className="MuiButtonBase-root MuiListItem-root MuiMenuItem-root MuiMenuItem-gutters MuiListItem-gutters MuiListItem-button" - onBlur={[Function]} - onClick={[Function]} - onDragLeave={[Function]} - onFocus={[Function]} - onKeyDown={[Function]} - onKeyUp={[Function]} - onMouseDown={[Function]} - onMouseLeave={[Function]} - onMouseUp={[Function]} - onTouchEnd={[Function]} - onTouchMove={[Function]} - onTouchStart={[Function]} - role="menuitem" - tabIndex={-1} + ecogesture.ECS + <WithStyles(memo) + center={false} > - ecogesture.ECS - <WithStyles(memo) + <ForwardRef(TouchRipple) 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", - } + 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" > - <span - className="MuiTouchRipple-root" - > - <TransitionGroup - childFactory={[Function]} - component={null} - exit={true} - /> - </span> - </ForwardRef(TouchRipple)> - </WithStyles(memo)> - </li> - </ForwardRef(ButtonBase)> - </WithStyles(ForwardRef(ButtonBase))> - </ForwardRef(ListItem)> - </WithStyles(ForwardRef(ListItem))> - </ForwardRef(MenuItem)> - </WithStyles(ForwardRef(MenuItem))> - <WithStyles(ForwardRef(MenuItem)) + <TransitionGroup + childFactory={[Function]} + component={null} + exit={true} + /> + </span> + </ForwardRef(TouchRipple)> + </WithStyles(memo)> + </li> + </ForwardRef(ButtonBase)> + </WithStyles(ForwardRef(ButtonBase))> + </ForwardRef(ListItem)> + </WithStyles(ForwardRef(ListItem))> + </ForwardRef(MenuItem)> + </WithStyles(ForwardRef(MenuItem))> + <WithStyles(ForwardRef(MenuItem)) + classes={ + Object { + "root": "", + } + } + key=".$.$4" + onClick={[Function]} + selected={false} + > + <ForwardRef(MenuItem) classes={ Object { - "root": "", + "dense": "MuiMenuItem-dense", + "gutters": "MuiMenuItem-gutters", + "root": "MuiMenuItem-root", + "selected": "Mui-selected", } } - key=".$.$4" onClick={[Function]} selected={false} > - <ForwardRef(MenuItem) + <WithStyles(ForwardRef(ListItem)) + button={true} + className="MuiMenuItem-root MuiMenuItem-gutters" classes={ Object { "dense": "MuiMenuItem-dense", - "gutters": "MuiMenuItem-gutters", - "root": "MuiMenuItem-root", - "selected": "Mui-selected", } } + component="li" + disableGutters={false} onClick={[Function]} + role="menuitem" selected={false} + tabIndex={-1} > - <WithStyles(ForwardRef(ListItem)) + <ForwardRef(ListItem) button={true} className="MuiMenuItem-root MuiMenuItem-gutters" classes={ Object { - "dense": "MuiMenuItem-dense", + "alignItemsFlexStart": "MuiListItem-alignItemsFlexStart", + "button": "MuiListItem-button", + "container": "MuiListItem-container", + "dense": "MuiListItem-dense MuiMenuItem-dense", + "disabled": "Mui-disabled", + "divider": "MuiListItem-divider", + "focusVisible": "Mui-focusVisible", + "gutters": "MuiListItem-gutters", + "root": "MuiListItem-root", + "secondaryAction": "MuiListItem-secondaryAction", + "selected": "Mui-selected", } } component="li" @@ -1423,33 +1436,24 @@ exports[`EcogesturesList component should be rendered correctly 1`] = ` selected={false} tabIndex={-1} > - <ForwardRef(ListItem) - button={true} - className="MuiMenuItem-root MuiMenuItem-gutters" - classes={ - Object { - "alignItemsFlexStart": "MuiListItem-alignItemsFlexStart", - "button": "MuiListItem-button", - "container": "MuiListItem-container", - "dense": "MuiListItem-dense MuiMenuItem-dense", - "disabled": "Mui-disabled", - "divider": "MuiListItem-divider", - "focusVisible": "Mui-focusVisible", - "gutters": "MuiListItem-gutters", - "root": "MuiListItem-root", - "secondaryAction": "MuiListItem-secondaryAction", - "selected": "Mui-selected", - } - } + <WithStyles(ForwardRef(ButtonBase)) + className="MuiListItem-root MuiMenuItem-root MuiMenuItem-gutters MuiListItem-gutters MuiListItem-button" component="li" - disableGutters={false} + disabled={false} + focusVisibleClassName="Mui-focusVisible" onClick={[Function]} role="menuitem" - selected={false} tabIndex={-1} > - <WithStyles(ForwardRef(ButtonBase)) + <ForwardRef(ButtonBase) className="MuiListItem-root MuiMenuItem-root MuiMenuItem-gutters MuiListItem-gutters MuiListItem-button" + classes={ + Object { + "disabled": "Mui-disabled", + "focusVisible": "Mui-focusVisible", + "root": "MuiButtonBase-root", + } + } component="li" disabled={false} focusVisibleClassName="Mui-focusVisible" @@ -1457,104 +1461,113 @@ exports[`EcogesturesList component should be rendered correctly 1`] = ` role="menuitem" tabIndex={-1} > - <ForwardRef(ButtonBase) - className="MuiListItem-root MuiMenuItem-root MuiMenuItem-gutters MuiListItem-gutters MuiListItem-button" - classes={ - Object { - "disabled": "Mui-disabled", - "focusVisible": "Mui-focusVisible", - "root": "MuiButtonBase-root", - } - } - component="li" - disabled={false} - focusVisibleClassName="Mui-focusVisible" + <li + aria-disabled={false} + className="MuiButtonBase-root MuiListItem-root MuiMenuItem-root MuiMenuItem-gutters MuiListItem-gutters MuiListItem-button" + onBlur={[Function]} onClick={[Function]} + onDragLeave={[Function]} + onFocus={[Function]} + onKeyDown={[Function]} + onKeyUp={[Function]} + onMouseDown={[Function]} + onMouseLeave={[Function]} + onMouseUp={[Function]} + onTouchEnd={[Function]} + onTouchMove={[Function]} + onTouchStart={[Function]} role="menuitem" tabIndex={-1} > - <li - aria-disabled={false} - className="MuiButtonBase-root MuiListItem-root MuiMenuItem-root MuiMenuItem-gutters MuiListItem-gutters MuiListItem-button" - onBlur={[Function]} - onClick={[Function]} - onDragLeave={[Function]} - onFocus={[Function]} - onKeyDown={[Function]} - onKeyUp={[Function]} - onMouseDown={[Function]} - onMouseLeave={[Function]} - onMouseUp={[Function]} - onTouchEnd={[Function]} - onTouchMove={[Function]} - onTouchStart={[Function]} - role="menuitem" - tabIndex={-1} + ecogesture.COLD_WATER + <WithStyles(memo) + center={false} > - ecogesture.COLD_WATER - <WithStyles(memo) + <ForwardRef(TouchRipple) 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", - } + 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" > - <span - className="MuiTouchRipple-root" - > - <TransitionGroup - childFactory={[Function]} - component={null} - exit={true} - /> - </span> - </ForwardRef(TouchRipple)> - </WithStyles(memo)> - </li> - </ForwardRef(ButtonBase)> - </WithStyles(ForwardRef(ButtonBase))> - </ForwardRef(ListItem)> - </WithStyles(ForwardRef(ListItem))> - </ForwardRef(MenuItem)> - </WithStyles(ForwardRef(MenuItem))> - <WithStyles(ForwardRef(MenuItem)) + <TransitionGroup + childFactory={[Function]} + component={null} + exit={true} + /> + </span> + </ForwardRef(TouchRipple)> + </WithStyles(memo)> + </li> + </ForwardRef(ButtonBase)> + </WithStyles(ForwardRef(ButtonBase))> + </ForwardRef(ListItem)> + </WithStyles(ForwardRef(ListItem))> + </ForwardRef(MenuItem)> + </WithStyles(ForwardRef(MenuItem))> + <WithStyles(ForwardRef(MenuItem)) + classes={ + Object { + "root": "", + } + } + key=".$.$5" + onClick={[Function]} + selected={false} + > + <ForwardRef(MenuItem) classes={ Object { - "root": "", + "dense": "MuiMenuItem-dense", + "gutters": "MuiMenuItem-gutters", + "root": "MuiMenuItem-root", + "selected": "Mui-selected", } } - key=".$.$5" onClick={[Function]} selected={false} > - <ForwardRef(MenuItem) + <WithStyles(ForwardRef(ListItem)) + button={true} + className="MuiMenuItem-root MuiMenuItem-gutters" classes={ Object { "dense": "MuiMenuItem-dense", - "gutters": "MuiMenuItem-gutters", - "root": "MuiMenuItem-root", - "selected": "Mui-selected", } } + component="li" + disableGutters={false} onClick={[Function]} + role="menuitem" selected={false} + tabIndex={-1} > - <WithStyles(ForwardRef(ListItem)) + <ForwardRef(ListItem) button={true} className="MuiMenuItem-root MuiMenuItem-gutters" classes={ Object { - "dense": "MuiMenuItem-dense", + "alignItemsFlexStart": "MuiListItem-alignItemsFlexStart", + "button": "MuiListItem-button", + "container": "MuiListItem-container", + "dense": "MuiListItem-dense MuiMenuItem-dense", + "disabled": "Mui-disabled", + "divider": "MuiListItem-divider", + "focusVisible": "Mui-focusVisible", + "gutters": "MuiListItem-gutters", + "root": "MuiListItem-root", + "secondaryAction": "MuiListItem-secondaryAction", + "selected": "Mui-selected", } } component="li" @@ -1564,33 +1577,24 @@ exports[`EcogesturesList component should be rendered correctly 1`] = ` selected={false} tabIndex={-1} > - <ForwardRef(ListItem) - button={true} - className="MuiMenuItem-root MuiMenuItem-gutters" - classes={ - Object { - "alignItemsFlexStart": "MuiListItem-alignItemsFlexStart", - "button": "MuiListItem-button", - "container": "MuiListItem-container", - "dense": "MuiListItem-dense MuiMenuItem-dense", - "disabled": "Mui-disabled", - "divider": "MuiListItem-divider", - "focusVisible": "Mui-focusVisible", - "gutters": "MuiListItem-gutters", - "root": "MuiListItem-root", - "secondaryAction": "MuiListItem-secondaryAction", - "selected": "Mui-selected", - } - } + <WithStyles(ForwardRef(ButtonBase)) + className="MuiListItem-root MuiMenuItem-root MuiMenuItem-gutters MuiListItem-gutters MuiListItem-button" component="li" - disableGutters={false} + disabled={false} + focusVisibleClassName="Mui-focusVisible" onClick={[Function]} role="menuitem" - selected={false} tabIndex={-1} > - <WithStyles(ForwardRef(ButtonBase)) + <ForwardRef(ButtonBase) className="MuiListItem-root MuiMenuItem-root MuiMenuItem-gutters MuiListItem-gutters MuiListItem-button" + classes={ + Object { + "disabled": "Mui-disabled", + "focusVisible": "Mui-focusVisible", + "root": "MuiButtonBase-root", + } + } component="li" disabled={false} focusVisibleClassName="Mui-focusVisible" @@ -1598,104 +1602,113 @@ exports[`EcogesturesList component should be rendered correctly 1`] = ` role="menuitem" tabIndex={-1} > - <ForwardRef(ButtonBase) - className="MuiListItem-root MuiMenuItem-root MuiMenuItem-gutters MuiListItem-gutters MuiListItem-button" - classes={ - Object { - "disabled": "Mui-disabled", - "focusVisible": "Mui-focusVisible", - "root": "MuiButtonBase-root", - } - } - component="li" - disabled={false} - focusVisibleClassName="Mui-focusVisible" + <li + aria-disabled={false} + className="MuiButtonBase-root MuiListItem-root MuiMenuItem-root MuiMenuItem-gutters MuiListItem-gutters MuiListItem-button" + onBlur={[Function]} onClick={[Function]} + onDragLeave={[Function]} + onFocus={[Function]} + onKeyDown={[Function]} + onKeyUp={[Function]} + onMouseDown={[Function]} + onMouseLeave={[Function]} + onMouseUp={[Function]} + onTouchEnd={[Function]} + onTouchMove={[Function]} + onTouchStart={[Function]} role="menuitem" tabIndex={-1} > - <li - aria-disabled={false} - className="MuiButtonBase-root MuiListItem-root MuiMenuItem-root MuiMenuItem-gutters MuiListItem-gutters MuiListItem-button" - onBlur={[Function]} - onClick={[Function]} - onDragLeave={[Function]} - onFocus={[Function]} - onKeyDown={[Function]} - onKeyUp={[Function]} - onMouseDown={[Function]} - onMouseLeave={[Function]} - onMouseUp={[Function]} - onTouchEnd={[Function]} - onTouchMove={[Function]} - onTouchStart={[Function]} - role="menuitem" - tabIndex={-1} + ecogesture.ELECTRICITY_SPECIFIC + <WithStyles(memo) + center={false} > - ecogesture.ELECTRICITY_SPECIFIC - <WithStyles(memo) + <ForwardRef(TouchRipple) 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", - } + 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" > - <span - className="MuiTouchRipple-root" - > - <TransitionGroup - childFactory={[Function]} - component={null} - exit={true} - /> - </span> - </ForwardRef(TouchRipple)> - </WithStyles(memo)> - </li> - </ForwardRef(ButtonBase)> - </WithStyles(ForwardRef(ButtonBase))> - </ForwardRef(ListItem)> - </WithStyles(ForwardRef(ListItem))> - </ForwardRef(MenuItem)> - </WithStyles(ForwardRef(MenuItem))> - <WithStyles(ForwardRef(MenuItem)) + <TransitionGroup + childFactory={[Function]} + component={null} + exit={true} + /> + </span> + </ForwardRef(TouchRipple)> + </WithStyles(memo)> + </li> + </ForwardRef(ButtonBase)> + </WithStyles(ForwardRef(ButtonBase))> + </ForwardRef(ListItem)> + </WithStyles(ForwardRef(ListItem))> + </ForwardRef(MenuItem)> + </WithStyles(ForwardRef(MenuItem))> + <WithStyles(ForwardRef(MenuItem)) + classes={ + Object { + "root": "", + } + } + key=".$.$6" + onClick={[Function]} + selected={false} + > + <ForwardRef(MenuItem) classes={ Object { - "root": "", + "dense": "MuiMenuItem-dense", + "gutters": "MuiMenuItem-gutters", + "root": "MuiMenuItem-root", + "selected": "Mui-selected", } } - key=".$.$6" onClick={[Function]} selected={false} > - <ForwardRef(MenuItem) + <WithStyles(ForwardRef(ListItem)) + button={true} + className="MuiMenuItem-root MuiMenuItem-gutters" classes={ Object { "dense": "MuiMenuItem-dense", - "gutters": "MuiMenuItem-gutters", - "root": "MuiMenuItem-root", - "selected": "Mui-selected", } } + component="li" + disableGutters={false} onClick={[Function]} + role="menuitem" selected={false} + tabIndex={-1} > - <WithStyles(ForwardRef(ListItem)) + <ForwardRef(ListItem) button={true} className="MuiMenuItem-root MuiMenuItem-gutters" classes={ Object { - "dense": "MuiMenuItem-dense", + "alignItemsFlexStart": "MuiListItem-alignItemsFlexStart", + "button": "MuiListItem-button", + "container": "MuiListItem-container", + "dense": "MuiListItem-dense MuiMenuItem-dense", + "disabled": "Mui-disabled", + "divider": "MuiListItem-divider", + "focusVisible": "Mui-focusVisible", + "gutters": "MuiListItem-gutters", + "root": "MuiListItem-root", + "secondaryAction": "MuiListItem-secondaryAction", + "selected": "Mui-selected", } } component="li" @@ -1705,33 +1718,24 @@ exports[`EcogesturesList component should be rendered correctly 1`] = ` selected={false} tabIndex={-1} > - <ForwardRef(ListItem) - button={true} - className="MuiMenuItem-root MuiMenuItem-gutters" - classes={ - Object { - "alignItemsFlexStart": "MuiListItem-alignItemsFlexStart", - "button": "MuiListItem-button", - "container": "MuiListItem-container", - "dense": "MuiListItem-dense MuiMenuItem-dense", - "disabled": "Mui-disabled", - "divider": "MuiListItem-divider", - "focusVisible": "Mui-focusVisible", - "gutters": "MuiListItem-gutters", - "root": "MuiListItem-root", - "secondaryAction": "MuiListItem-secondaryAction", - "selected": "Mui-selected", - } - } + <WithStyles(ForwardRef(ButtonBase)) + className="MuiListItem-root MuiMenuItem-root MuiMenuItem-gutters MuiListItem-gutters MuiListItem-button" component="li" - disableGutters={false} + disabled={false} + focusVisibleClassName="Mui-focusVisible" onClick={[Function]} role="menuitem" - selected={false} tabIndex={-1} > - <WithStyles(ForwardRef(ButtonBase)) + <ForwardRef(ButtonBase) className="MuiListItem-root MuiMenuItem-root MuiMenuItem-gutters MuiListItem-gutters MuiListItem-button" + classes={ + Object { + "disabled": "Mui-disabled", + "focusVisible": "Mui-focusVisible", + "root": "MuiButtonBase-root", + } + } component="li" disabled={false} focusVisibleClassName="Mui-focusVisible" @@ -1739,267 +1743,267 @@ exports[`EcogesturesList component should be rendered correctly 1`] = ` role="menuitem" tabIndex={-1} > - <ForwardRef(ButtonBase) - className="MuiListItem-root MuiMenuItem-root MuiMenuItem-gutters MuiListItem-gutters MuiListItem-button" - classes={ - Object { - "disabled": "Mui-disabled", - "focusVisible": "Mui-focusVisible", - "root": "MuiButtonBase-root", - } - } - component="li" - disabled={false} - focusVisibleClassName="Mui-focusVisible" + <li + aria-disabled={false} + className="MuiButtonBase-root MuiListItem-root MuiMenuItem-root MuiMenuItem-gutters MuiListItem-gutters MuiListItem-button" + onBlur={[Function]} onClick={[Function]} + onDragLeave={[Function]} + onFocus={[Function]} + onKeyDown={[Function]} + onKeyUp={[Function]} + onMouseDown={[Function]} + onMouseLeave={[Function]} + onMouseUp={[Function]} + onTouchEnd={[Function]} + onTouchMove={[Function]} + onTouchStart={[Function]} role="menuitem" tabIndex={-1} > - <li - aria-disabled={false} - className="MuiButtonBase-root MuiListItem-root MuiMenuItem-root MuiMenuItem-gutters MuiListItem-gutters MuiListItem-button" - onBlur={[Function]} - onClick={[Function]} - onDragLeave={[Function]} - onFocus={[Function]} - onKeyDown={[Function]} - onKeyUp={[Function]} - onMouseDown={[Function]} - onMouseLeave={[Function]} - onMouseUp={[Function]} - onTouchEnd={[Function]} - onTouchMove={[Function]} - onTouchStart={[Function]} - role="menuitem" - tabIndex={-1} + ecogesture.COOKING + <WithStyles(memo) + center={false} > - ecogesture.COOKING - <WithStyles(memo) + <ForwardRef(TouchRipple) 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", - } + 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" > - <span - className="MuiTouchRipple-root" - > - <TransitionGroup - childFactory={[Function]} - component={null} - exit={true} - /> - </span> - </ForwardRef(TouchRipple)> - </WithStyles(memo)> - </li> - </ForwardRef(ButtonBase)> - </WithStyles(ForwardRef(ButtonBase))> - </ForwardRef(ListItem)> - </WithStyles(ForwardRef(ListItem))> - </ForwardRef(MenuItem)> - </WithStyles(ForwardRef(MenuItem))> - </ul> - </ForwardRef(List)> - </WithStyles(ForwardRef(List))> - </ForwardRef(MenuList)> - </div> - </ForwardRef(Paper)> - </WithStyles(ForwardRef(Paper))> - </Transition> - </ForwardRef(Grow)> - <div - data-test="sentinelEnd" - tabIndex={0} - /> - </Unstable_TrapFocus> - </div> - </Portal> - </ForwardRef(Portal)> - </ForwardRef(Modal)> - </ForwardRef(Popover)> - </WithStyles(ForwardRef(Popover))> - </ForwardRef(Menu)> - </WithStyles(ForwardRef(Menu))> - </div> + <TransitionGroup + childFactory={[Function]} + component={null} + exit={true} + /> + </span> + </ForwardRef(TouchRipple)> + </WithStyles(memo)> + </li> + </ForwardRef(ButtonBase)> + </WithStyles(ForwardRef(ButtonBase))> + </ForwardRef(ListItem)> + </WithStyles(ForwardRef(ListItem))> + </ForwardRef(MenuItem)> + </WithStyles(ForwardRef(MenuItem))> + </ul> + </ForwardRef(List)> + </WithStyles(ForwardRef(List))> + </ForwardRef(MenuList)> + </div> + </ForwardRef(Paper)> + </WithStyles(ForwardRef(Paper))> + </Transition> + </ForwardRef(Grow)> + <div + data-test="sentinelEnd" + tabIndex={0} + /> + </Unstable_TrapFocus> + </div> + </Portal> + </ForwardRef(Portal)> + </ForwardRef(Modal)> + </ForwardRef(Popover)> + </WithStyles(ForwardRef(Popover))> + </ForwardRef(Menu)> + </WithStyles(ForwardRef(Menu))> </div> </div> - <div - className="ecogesture-content" - > - <mock-ecogesturecard - ecogesture={ - Object { - "_id": "ECOGESTURE001", - "_rev": "1-67f1ea36efdd892c96bf64a8943154cd", - "_type": "com.grandlyon.ecolyo.ecogesture", - "action": false, - "actionDuration": 3, - "actionName": null, - "difficulty": 1, - "doing": false, - "efficiency": 4, - "equipment": false, - "equipmentInstallation": true, - "equipmentType": Array [], - "fluidTypes": Array [ - 0, - 2, - ], - "id": "ECOGESTURE001", - "impactLevel": 8, - "investment": null, - "longDescription": "On se demande parfois si cela vaut le coup de \\"couper le chauffage\\" quand on s’absente… dès qu’il s’agit d’un week-end la réponse est « oui sûrement » ! Attention cependant au retour à ne pas faire de la surchauffe ! L’idéal est bien évidemment de régler sa programmation pour que le chauffage se relance quelques heures avant votre retour…", - "longName": "Je baisse le chauffage en mode hors gel lorsque je m'absente plus de 2 jours.", - "objective": false, - "room": Array [ - 0, - ], - "season": "Hiver", - "shortName": "Bonhomme de neige", - "usage": 1, - "viewedInSelection": false, - } + </div> + <div + className="ecogesture-content" + > + <mock-ecogesturecard + ecogesture={ + Object { + "_id": "ECOGESTURE001", + "_rev": "1-67f1ea36efdd892c96bf64a8943154cd", + "_type": "com.grandlyon.ecolyo.ecogesture", + "action": false, + "actionDuration": 3, + "actionName": null, + "difficulty": 1, + "doing": false, + "efficiency": 4, + "equipment": false, + "equipmentInstallation": true, + "equipmentType": Array [], + "fluidTypes": Array [ + 0, + 2, + ], + "id": "ECOGESTURE001", + "impactLevel": 8, + "investment": null, + "longDescription": "On se demande parfois si cela vaut le coup de \\"couper le chauffage\\" quand on s’absente… dès qu’il s’agit d’un week-end la réponse est « oui sûrement » ! Attention cependant au retour à ne pas faire de la surchauffe ! L’idéal est bien évidemment de régler sa programmation pour que le chauffage se relance quelques heures avant votre retour…", + "longName": "Je baisse le chauffage en mode hors gel lorsque je m'absente plus de 2 jours.", + "objective": false, + "room": Array [ + 0, + ], + "season": "Hiver", + "shortName": "Bonhomme de neige", + "usage": 1, + "viewedInSelection": false, } - key="ECOGESTURE001" - selectionCompleted={true} - /> - <mock-ecogesturecard - ecogesture={ - Object { - "_id": "ECOGESTURE002", - "_rev": "1-ef7ddd778254e3b7d331a88fd17f606d", - "_type": "com.grandlyon.ecolyo.ecogesture", - "action": false, - "actionDuration": 3, - "actionName": null, - "difficulty": 1, - "doing": false, - "efficiency": 4, - "equipment": true, - "equipmentInstallation": true, - "equipmentType": Array [ - "AIR_CONDITIONING", - ], - "fluidTypes": Array [ - 0, - ], - "id": "ECOGESTURE002", - "impactLevel": 8, - "investment": null, - "longDescription": "Cela permet de garder la fraîcheur à l'intérieur. Le climatiseur n'est pas là pour refroidir la rue mais bien la pièce.", - "longName": "Je ferme mes fenêtres quand la climatisation est en marche", - "objective": false, - "room": Array [ - 0, - ], - "season": "Eté", - "shortName": "Coup de vent", - "usage": 2, - "viewedInSelection": false, - } + } + key="ECOGESTURE001" + selectionCompleted={true} + /> + <mock-ecogesturecard + ecogesture={ + Object { + "_id": "ECOGESTURE002", + "_rev": "1-ef7ddd778254e3b7d331a88fd17f606d", + "_type": "com.grandlyon.ecolyo.ecogesture", + "action": false, + "actionDuration": 3, + "actionName": null, + "difficulty": 1, + "doing": false, + "efficiency": 4, + "equipment": true, + "equipmentInstallation": true, + "equipmentType": Array [ + "AIR_CONDITIONING", + ], + "fluidTypes": Array [ + 0, + ], + "id": "ECOGESTURE002", + "impactLevel": 8, + "investment": null, + "longDescription": "Cela permet de garder la fraîcheur à l'intérieur. Le climatiseur n'est pas là pour refroidir la rue mais bien la pièce.", + "longName": "Je ferme mes fenêtres quand la climatisation est en marche", + "objective": false, + "room": Array [ + 0, + ], + "season": "Eté", + "shortName": "Coup de vent", + "usage": 2, + "viewedInSelection": false, } - key="ECOGESTURE002" - selectionCompleted={true} - /> - <mock-ecogesturecard - ecogesture={ - Object { - "_id": "ECOGESTURE0013", - "_rev": "1-0b2761dd4aef79556c7aef144060fde6", - "_type": "com.grandlyon.ecolyo.ecogesture", - "action": true, - "actionDuration": 3, - "actionName": "J’utilise le cycle court à basse température pour laver le linge et la vaisselle.", - "difficulty": 1, - "doing": false, - "efficiency": 1, - "equipment": false, - "equipmentInstallation": true, - "equipmentType": Array [ - "WASHING_MACHINE", - "DISHWASHER", - ], - "fluidTypes": Array [ - 1, - ], - "id": "ECOGESTURE0013", - "impactLevel": 2, - "investment": null, - "longDescription": "Utilisez la température la plus basse possible : de nombreux produits nettoyants sont efficaces à froid et un cycle à 90 °C consomme 3 fois plus d'énergie qu'un lavage à 40 °C. En effet, 80 % de l'énergie consommée par un lave-linge ou un lave-vaisselle sert au chauffage de l'eau ! Que ce soit pour la vaisselle ou le linge, les programmes de lavage intensif consomment jusqu'à 40 % de plus. Si possible, rincez à l'eau froide : la température de rinçage n'a pas d'effet sur le nettoyage du linge ou de la vaisselle. Attention cependant avec les tissus qui peuvent rétrécir : ce qui fait rétrécir, c'est le passage d'une température à une autre. Mieux vaut alors faire le cycle complet à l'eau froide pour les premiers lavages de tissus sensibles. Pour du linge ou de la vaisselle peu sales, utilisez la touche \\"Eco\\". Elle réduit la température de lavage et allonge sa durée (c’est le chauffage de l’eau qui consomme le plus). Vous économiserez jusqu’à 45 % par rapport aux cycles longs. Néanmoins, pour vous prémunir contre les bouchons de graisse dans les canalisations, faites quand même un cycle à chaud une fois par mois environ.", - "longName": "J’utilise le plus souvent les cycles courts à basse température pour laver le linge et la vaisselle.", - "objective": false, - "room": Array [ - 1, - 3, - 2, - ], - "season": "Sans saison", - "shortName": "Accelerateur de particules", - "usage": 5, - "viewedInSelection": false, - } + } + key="ECOGESTURE002" + selectionCompleted={true} + /> + <mock-ecogesturecard + ecogesture={ + Object { + "_id": "ECOGESTURE0013", + "_rev": "1-0b2761dd4aef79556c7aef144060fde6", + "_type": "com.grandlyon.ecolyo.ecogesture", + "action": true, + "actionDuration": 3, + "actionName": "J’utilise le cycle court à basse température pour laver le linge et la vaisselle.", + "difficulty": 1, + "doing": false, + "efficiency": 1, + "equipment": false, + "equipmentInstallation": true, + "equipmentType": Array [ + "WASHING_MACHINE", + "DISHWASHER", + ], + "fluidTypes": Array [ + 1, + ], + "id": "ECOGESTURE0013", + "impactLevel": 2, + "investment": null, + "longDescription": "Utilisez la température la plus basse possible : de nombreux produits nettoyants sont efficaces à froid et un cycle à 90 °C consomme 3 fois plus d'énergie qu'un lavage à 40 °C. En effet, 80 % de l'énergie consommée par un lave-linge ou un lave-vaisselle sert au chauffage de l'eau ! Que ce soit pour la vaisselle ou le linge, les programmes de lavage intensif consomment jusqu'à 40 % de plus. Si possible, rincez à l'eau froide : la température de rinçage n'a pas d'effet sur le nettoyage du linge ou de la vaisselle. Attention cependant avec les tissus qui peuvent rétrécir : ce qui fait rétrécir, c'est le passage d'une température à une autre. Mieux vaut alors faire le cycle complet à l'eau froide pour les premiers lavages de tissus sensibles. Pour du linge ou de la vaisselle peu sales, utilisez la touche \\"Eco\\". Elle réduit la température de lavage et allonge sa durée (c’est le chauffage de l’eau qui consomme le plus). Vous économiserez jusqu’à 45 % par rapport aux cycles longs. Néanmoins, pour vous prémunir contre les bouchons de graisse dans les canalisations, faites quand même un cycle à chaud une fois par mois environ.", + "longName": "J’utilise le plus souvent les cycles courts à basse température pour laver le linge et la vaisselle.", + "objective": false, + "room": Array [ + 1, + 3, + 2, + ], + "season": "Sans saison", + "shortName": "Accelerateur de particules", + "usage": 5, + "viewedInSelection": false, + } + } + key="ECOGESTURE0013" + selectionCompleted={true} + /> + <WithStyles(ForwardRef(Button)) + classes={ + Object { + "label": "text-16-normal", + "root": "btn-secondary-negative", } - key="ECOGESTURE0013" - selectionCompleted={true} - /> - <WithStyles(ForwardRef(Button)) + } + onClick={[MockFunction]} + > + <ForwardRef(Button) classes={ Object { - "label": "text-16-normal", - "root": "btn-secondary-negative", + "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]} > - <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", - } - } + <WithStyles(ForwardRef(ButtonBase)) + className="MuiButton-root btn-secondary-negative MuiButton-text" + component="button" + disabled={false} + focusRipple={true} + focusVisibleClassName="Mui-focusVisible" onClick={[MockFunction]} + type="button" > - <WithStyles(ForwardRef(ButtonBase)) + <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} @@ -2007,82 +2011,65 @@ exports[`EcogesturesList component should be rendered correctly 1`] = ` onClick={[MockFunction]} 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" + <button + className="MuiButtonBase-root MuiButton-root btn-secondary-negative MuiButton-text" disabled={false} - focusRipple={true} - focusVisibleClassName="Mui-focusVisible" + 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" > - <button - 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" > - <span - className="MuiButton-label text-16-normal" - > - ecogesture.reinit - </span> - <WithStyles(memo) + ecogesture.reinit + </span> + <WithStyles(memo) + center={false} + > + <ForwardRef(TouchRipple) 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", - } + 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" > - <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> + <TransitionGroup + childFactory={[Function]} + component={null} + exit={true} + /> + </span> + </ForwardRef(TouchRipple)> + </WithStyles(memo)> + </button> + </ForwardRef(ButtonBase)> + </WithStyles(ForwardRef(ButtonBase))> + </ForwardRef(Button)> + </WithStyles(ForwardRef(Button))> </div> - </EcogestureList> - </Router> - </BrowserRouter> -</Provider> + </div> + </EcogestureList> + </Router> +</BrowserRouter> `; diff --git a/src/components/Ecogesture/__snapshots__/EcogestureReinitModal.spec.tsx.snap b/src/components/Ecogesture/__snapshots__/EcogestureReinitModal.spec.tsx.snap index 9539b4290..12cb41c34 100644 --- a/src/components/Ecogesture/__snapshots__/EcogestureReinitModal.spec.tsx.snap +++ b/src/components/Ecogesture/__snapshots__/EcogestureReinitModal.spec.tsx.snap @@ -1,554 +1,558 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP exports[`EcogestureReinitModal component should be rendered correctly 1`] = ` -<Provider - store={ - Object { - "clearActions": [Function], - "dispatch": [Function], - "getActions": [Function], - "getState": [Function], - "replaceReducer": [Function], - "subscribe": [Function], - } - } +<EcogestureReinitModal + handleCloseClick={[MockFunction]} + handleLaunchReinit={[MockFunction]} + open={true} > - <EcogestureReinitModal - handleCloseClick={[MockFunction]} - handleLaunchReinit={[MockFunction]} + <WithStyles(ForwardRef(Dialog)) + aria-labelledby="accessibility-title" + classes={ + Object { + "paper": "modal-paper", + "root": "modal-root", + } + } + onClose={[MockFunction]} open={true} > - <WithStyles(ForwardRef(Dialog)) + <ForwardRef(Dialog) aria-labelledby="accessibility-title" classes={ Object { - "paper": "modal-paper", - "root": "modal-root", + "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(Dialog) - aria-labelledby="accessibility-title" - classes={ + <ForwardRef(Modal) + BackdropComponent={ 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), - "Naked": Object { - "$$typeof": Symbol(react.forward_ref), - "propTypes": Object { - "children": [Function], - "className": [Function], - "classes": [Function], - "invisible": [Function], - "open": [Function], - "transitionDuration": [Function], - }, - "render": [Function], + "propTypes": Object { + "children": [Function], + "className": [Function], + "classes": [Function], + "invisible": [Function], + "open": [Function], + "transitionDuration": [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, - }, + "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, }, - "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)", + "width": [Function], + }, + "direction": "ltr", + "mixins": Object { + "gutters": [Function], + "toolbar": Object { + "@media (min-width:0px) and (orientation: landscape)": Object { + "minHeight": 48, }, - "tonalOffset": 0.2, - "type": "light", - "warning": Object { - "contrastText": "rgba(0, 0, 0, 0.87)", - "dark": "#f57c00", - "light": "#ffb74d", - "main": "#ff9800", + "@media (min-width:600px)": Object { + "minHeight": 64, }, + "minHeight": 56, }, - "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, + }, + "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, }, - "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], + "augmentColor": [Function], + "background": Object { + "default": "#fafafa", + "paper": "#fff", }, - "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, - }, + "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": 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, - }, + "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", }, - "zIndex": Object { - "appBar": 1100, - "drawer": 1200, - "mobileStepper": 1000, - "modal": 1300, - "snackbar": 1400, - "speedDial": 1050, - "tooltip": 1500, + "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, }, }, - "name": "MuiBackdrop", - }, - "propTypes": Object { - "classes": [Function], - "innerRef": [Function], + "zIndex": Object { + "appBar": 1100, + "drawer": 1200, + "mobileStepper": 1000, + "modal": 1300, + "snackbar": 1400, + "speedDial": 1050, + "tooltip": 1500, + }, }, - "render": [Function], - "useStyles": [Function], - } + "name": "MuiBackdrop", + }, + "propTypes": Object { + "classes": [Function], + "innerRef": [Function], + }, + "render": [Function], + "useStyles": [Function], } - BackdropProps={ - Object { - "transitionDuration": Object { - "enter": 225, - "exit": 195, - }, - } + } + BackdropProps={ + Object { + "transitionDuration": Object { + "enter": 225, + "exit": 195, + }, } - className="MuiDialog-root modal-root" - closeAfterTransition={true} - disableEscapeKeyDown={false} - onClose={[MockFunction]} - open={true} + } + className="MuiDialog-root modal-root" + closeAfterTransition={true} + disableEscapeKeyDown={false} + onClose={[MockFunction]} + open={true} + > + <ForwardRef(Portal) + disablePortal={false} > - <ForwardRef(Portal) - disablePortal={false} - > - <Portal - containerInfo={ - <body - style="padding-right: 0px; overflow: hidden;" + <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 - class="MuiDialog-root modal-root" - role="presentation" - style="position: fixed; z-index: 1300; right: 0px; bottom: 0px; top: 0px; left: 0px;" + 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-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" + aria-labelledby="accessibility-title" + class="MuiPaper-root MuiDialog-paper modal-paper MuiDialog-paperScrollPaper MuiDialog-paperWidthSm MuiPaper-elevation24 MuiPaper-rounded" + role="dialog" > <div - aria-labelledby="accessibility-title" - class="MuiPaper-root MuiDialog-paper modal-paper MuiDialog-paperScrollPaper MuiDialog-paperWidthSm MuiPaper-elevation24 MuiPaper-rounded" - role="dialog" + id="accessibility-title" > - <div - id="accessibility-title" - > - feedback.accessibility.window_title - </div> - <button - aria-label="feedback.accessibility.button_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="eg-reinit-modal" + feedback.accessibility.window_title + </div> + <button + aria-label="feedback.accessibility.button_close" + class="MuiButtonBase-root MuiIconButton-root modal-paper-close-button" + tabindex="0" + type="button" + > + <span + class="MuiIconButton-label" > <svg class="styles__icon___23x3R" - height="63" - width="63" + height="16" + width="16" > <use xlink:href="#test-file-stub" /> </svg> - <div - class="title text-20-bold" + </span> + <span + class="MuiTouchRipple-root" + /> + </button> + <div + class="eg-reinit-modal" + > + <svg + class="styles__icon___23x3R" + height="63" + width="63" + > + <use + xlink:href="#test-file-stub" + /> + </svg> + <div + class="title text-20-bold" + > + ecogesture.reinitModal.title_part1 + <span + class="warn-title" + > + ecogesture.reinitModal.title_part2 + </span> + ecogesture.reinitModal.title_part3 + <span + class="warn-title" + > + ecogesture.reinitModal.title_part4 + </span> + ecogesture.reinitModal.title_part5 + <span + class="warn-title" + > + ecogesture.reinitModal.title_part6 + </span> + </div> + <div + class="text-16-normal text" + > + ecogesture.reinitModal.text1 + </div> + <div + class="text-16-bold text" + > + ecogesture.reinitModal.text2 + </div> + <div + class="buttons-container" + > + <button + aria-label="ecogesture.reinitModal.btn1" + class="MuiButtonBase-root MuiButton-root btn-secondary-negative MuiButton-text btn1" + tabindex="0" + type="button" > - ecogesture.reinitModal.title_part1 <span - class="warn-title" + class="MuiButton-label text-16-bold" > - ecogesture.reinitModal.title_part2 + ecogesture.reinitModal.btn1 </span> - ecogesture.reinitModal.title_part3 <span - class="warn-title" - > - ecogesture.reinitModal.title_part4 - </span> - ecogesture.reinitModal.title_part5 + class="MuiTouchRipple-root" + /> + </button> + <button + aria-label="ecogesture.reinitModal.btn2" + class="MuiButtonBase-root MuiButton-root btn-profile-next rounded MuiButton-text" + tabindex="0" + type="button" + > <span - class="warn-title" + class="MuiButton-label text-16-bold" > - ecogesture.reinitModal.title_part6 + ecogesture.reinitModal.btn2 </span> - </div> - <div - class="text-16-normal text" - > - ecogesture.reinitModal.text1 - </div> - <div - class="text-16-bold text" - > - ecogesture.reinitModal.text2 - </div> - <div - class="buttons-container" - > - <button - aria-label="ecogesture.reinitModal.btn1" - class="MuiButtonBase-root MuiButton-root btn-secondary-negative MuiButton-text btn1" - tabindex="0" - type="button" - > - <span - class="MuiButton-label text-16-bold" - > - ecogesture.reinitModal.btn1 - </span> - <span - class="MuiTouchRipple-root" - /> - </button> - <button - aria-label="ecogesture.reinitModal.btn2" - class="MuiButtonBase-root MuiButton-root btn-profile-next rounded MuiButton-text" - tabindex="0" - type="button" - > - <span - class="MuiButton-label text-16-bold" - > - ecogesture.reinitModal.btn2 - </span> - <span - class="MuiTouchRipple-root" - /> - </button> - </div> + <span + class="MuiTouchRipple-root" + /> + </button> </div> </div> </div> - <div - data-test="sentinelEnd" - tabindex="0" - /> </div> - </body> + <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, + } } > - <div - className="MuiDialog-root modal-root" - onKeyDown={[Function]} - role="presentation" - style={ + <WithStyles(ForwardRef(Backdrop)) + onClick={[Function]} + open={true} + transitionDuration={ Object { - "bottom": 0, - "left": 0, - "position": "fixed", - "right": 0, - "top": 0, - "zIndex": 1300, + "enter": 225, + "exit": 195, } } > - <WithStyles(ForwardRef(Backdrop)) + <ForwardRef(Backdrop) + classes={ + Object { + "invisible": "MuiBackdrop-invisible", + "root": "MuiBackdrop-root", + } + } onClick={[Function]} open={true} transitionDuration={ @@ -558,85 +562,90 @@ exports[`EcogestureReinitModal component should be rendered correctly 1`] = ` } } > - <ForwardRef(Backdrop) - classes={ - Object { - "invisible": "MuiBackdrop-invisible", - "root": "MuiBackdrop-root", - } - } + <ForwardRef(Fade) + in={true} onClick={[Function]} - open={true} - transitionDuration={ + timeout={ Object { "enter": 225, "exit": 195, } } > - <ForwardRef(Fade) + <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} > - <Transition - appear={true} - enter={true} - exit={true} - in={true} - mountOnEnter={false} + <div + aria-hidden={true} + className="MuiBackdrop-root" onClick={[Function]} - onEnter={[Function]} - onEntered={[Function]} - onEntering={[Function]} - onExit={[Function]} - onExited={[Function]} - onExiting={[Function]} - timeout={ + style={ Object { - "enter": 225, - "exit": 195, + "opacity": 1, + "visibility": undefined, } } - 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} + /> + </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, + } + } > - <div - data-test="sentinelStart" - tabIndex={0} - /> - <ForwardRef(Fade) + <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={ @@ -645,334 +654,330 @@ exports[`EcogestureReinitModal component should be rendered correctly 1`] = ` "exit": 195, } } + unmountOnExit={false} > - <Transition - appear={true} - enter={true} - exit={true} - in={true} - mountOnEnter={false} - onEnter={[Function]} - onEntered={[Function]} - onEntering={[Function]} - onExit={[Function]} - onExited={[Function]} - onExiting={[Function]} + <div + className="MuiDialog-container MuiDialog-scrollPaper" + onMouseDown={[Function]} + onMouseUp={[Function]} role="none presentation" - tabIndex="-1" - timeout={ + style={ Object { - "enter": 225, - "exit": 195, + "opacity": 1, + "visibility": undefined, } } - unmountOnExit={false} + tabIndex="-1" > - <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" > - <WithStyles(ForwardRef(Paper)) + <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" > - <ForwardRef(Paper) + <div 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} + className="MuiPaper-root MuiDialog-paper modal-paper MuiDialog-paperScrollPaper MuiDialog-paperWidthSm MuiPaper-elevation24 MuiPaper-rounded" role="dialog" > <div - aria-labelledby="accessibility-title" - className="MuiPaper-root MuiDialog-paper modal-paper MuiDialog-paperScrollPaper MuiDialog-paperWidthSm MuiPaper-elevation24 MuiPaper-rounded" - role="dialog" + id="accessibility-title" > - <div - id="accessibility-title" - > - feedback.accessibility.window_title - </div> - <WithStyles(ForwardRef(IconButton)) + feedback.accessibility.window_title + </div> + <WithStyles(ForwardRef(IconButton)) + aria-label="feedback.accessibility.button_close" + className="modal-paper-close-button" + onClick={[MockFunction]} + > + <ForwardRef(IconButton) aria-label="feedback.accessibility.button_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]} > - <ForwardRef(IconButton) + <WithStyles(ForwardRef(ButtonBase)) aria-label="feedback.accessibility.button_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", - } - } + centerRipple={true} + className="MuiIconButton-root modal-paper-close-button" + disabled={false} + focusRipple={true} onClick={[MockFunction]} > - <WithStyles(ForwardRef(ButtonBase)) + <ForwardRef(ButtonBase) aria-label="feedback.accessibility.button_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]} > - <ForwardRef(ButtonBase) + <button aria-label="feedback.accessibility.button_close" - centerRipple={true} - className="MuiIconButton-root modal-paper-close-button" - classes={ - Object { - "disabled": "Mui-disabled", - "focusVisible": "Mui-focusVisible", - "root": "MuiButtonBase-root", - } - } + className="MuiButtonBase-root MuiIconButton-root modal-paper-close-button" disabled={false} - focusRipple={true} + 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" > - <button - aria-label="feedback.accessibility.button_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" > - <span - className="MuiIconButton-label" + <Icon + icon="test-file-stub" + size={16} + spin={false} > - <Icon - icon="test-file-stub" - size={16} - spin={false} + <Component + className="styles__icon___23x3R" + height={16} + style={Object {}} + width={16} > - <Component + <svg 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) + <use + xlinkHref="#test-file-stub" + /> + </svg> + </Component> + </Icon> + </span> + <WithStyles(memo) + center={true} + > + <ForwardRef(TouchRipple) 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", - } + 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" > - <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="eg-reinit-modal" + <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="eg-reinit-modal" + > + <Icon + icon="test-file-stub" + size={63} + spin={false} > - <Icon - icon="test-file-stub" - size={63} - spin={false} + <Component + className="styles__icon___23x3R" + height={63} + style={Object {}} + width={63} > - <Component + <svg className="styles__icon___23x3R" height={63} style={Object {}} width={63} > - <svg - className="styles__icon___23x3R" - height={63} - style={Object {}} - width={63} - > - <use - xlinkHref="#test-file-stub" - /> - </svg> - </Component> - </Icon> - <div - className="title text-20-bold" + <use + xlinkHref="#test-file-stub" + /> + </svg> + </Component> + </Icon> + <div + className="title text-20-bold" + > + ecogesture.reinitModal.title_part1 + <span + className="warn-title" > - ecogesture.reinitModal.title_part1 - <span - className="warn-title" - > - ecogesture.reinitModal.title_part2 - </span> - ecogesture.reinitModal.title_part3 - <span - className="warn-title" - > - ecogesture.reinitModal.title_part4 - </span> - ecogesture.reinitModal.title_part5 - <span - className="warn-title" - > - ecogesture.reinitModal.title_part6 - </span> - </div> - <div - className="text-16-normal text" + ecogesture.reinitModal.title_part2 + </span> + ecogesture.reinitModal.title_part3 + <span + className="warn-title" > - ecogesture.reinitModal.text1 - </div> - <div - className="text-16-bold text" + ecogesture.reinitModal.title_part4 + </span> + ecogesture.reinitModal.title_part5 + <span + className="warn-title" > - ecogesture.reinitModal.text2 - </div> - <div - className="buttons-container" + ecogesture.reinitModal.title_part6 + </span> + </div> + <div + className="text-16-normal text" + > + ecogesture.reinitModal.text1 + </div> + <div + className="text-16-bold text" + > + ecogesture.reinitModal.text2 + </div> + <div + className="buttons-container" + > + <WithStyles(ForwardRef(Button)) + aria-label="ecogesture.reinitModal.btn1" + className="btn1" + classes={ + Object { + "label": "text-16-bold", + "root": "btn-secondary-negative", + } + } + onClick={[MockFunction]} > - <WithStyles(ForwardRef(Button)) + <ForwardRef(Button) aria-label="ecogesture.reinitModal.btn1" className="btn1" classes={ Object { - "label": "text-16-bold", - "root": "btn-secondary-negative", + "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-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]} > - <ForwardRef(Button) + <WithStyles(ForwardRef(ButtonBase)) aria-label="ecogesture.reinitModal.btn1" - 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-16-bold", - "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", - } - } + className="MuiButton-root btn-secondary-negative MuiButton-text btn1" + component="button" + disabled={false} + focusRipple={true} + focusVisibleClassName="Mui-focusVisible" onClick={[MockFunction]} + type="button" > - <WithStyles(ForwardRef(ButtonBase)) + <ForwardRef(ButtonBase) aria-label="ecogesture.reinitModal.btn1" className="MuiButton-root btn-secondary-negative MuiButton-text btn1" + classes={ + Object { + "disabled": "Mui-disabled", + "focusVisible": "Mui-focusVisible", + "root": "MuiButtonBase-root", + } + } component="button" disabled={false} focusRipple={true} @@ -980,130 +985,130 @@ exports[`EcogestureReinitModal component should be rendered correctly 1`] = ` onClick={[MockFunction]} type="button" > - <ForwardRef(ButtonBase) + <button aria-label="ecogesture.reinitModal.btn1" - className="MuiButton-root btn-secondary-negative MuiButton-text btn1" - classes={ - Object { - "disabled": "Mui-disabled", - "focusVisible": "Mui-focusVisible", - "root": "MuiButtonBase-root", - } - } - component="button" + className="MuiButtonBase-root MuiButton-root btn-secondary-negative MuiButton-text btn1" disabled={false} - focusRipple={true} - focusVisibleClassName="Mui-focusVisible" + 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" > - <button - aria-label="ecogesture.reinitModal.btn1" - className="MuiButtonBase-root MuiButton-root btn-secondary-negative MuiButton-text btn1" - 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" > - <span - className="MuiButton-label text-16-bold" - > - ecogesture.reinitModal.btn1 - </span> - <WithStyles(memo) + ecogesture.reinitModal.btn1 + </span> + <WithStyles(memo) + center={false} + > + <ForwardRef(TouchRipple) 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", - } + 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" > - <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)) + <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="ecogesture.reinitModal.btn2" + classes={ + Object { + "label": "text-16-bold", + "root": "btn-profile-next rounded", + } + } + onClick={[MockFunction]} + > + <ForwardRef(Button) aria-label="ecogesture.reinitModal.btn2" classes={ Object { - "label": "text-16-bold", - "root": "btn-profile-next rounded", + "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-profile-next rounded", + "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]} > - <ForwardRef(Button) + <WithStyles(ForwardRef(ButtonBase)) aria-label="ecogesture.reinitModal.btn2" - 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-profile-next rounded", - "sizeLarge": "MuiButton-sizeLarge", - "sizeSmall": "MuiButton-sizeSmall", - "startIcon": "MuiButton-startIcon", - "text": "MuiButton-text", - "textPrimary": "MuiButton-textPrimary", - "textSecondary": "MuiButton-textSecondary", - "textSizeLarge": "MuiButton-textSizeLarge", - "textSizeSmall": "MuiButton-textSizeSmall", - } - } + className="MuiButton-root btn-profile-next rounded MuiButton-text" + component="button" + disabled={false} + focusRipple={true} + focusVisibleClassName="Mui-focusVisible" onClick={[MockFunction]} + type="button" > - <WithStyles(ForwardRef(ButtonBase)) + <ForwardRef(ButtonBase) aria-label="ecogesture.reinitModal.btn2" className="MuiButton-root btn-profile-next rounded MuiButton-text" + classes={ + Object { + "disabled": "Mui-disabled", + "focusVisible": "Mui-focusVisible", + "root": "MuiButtonBase-root", + } + } component="button" disabled={false} focusRipple={true} @@ -1111,99 +1116,81 @@ exports[`EcogestureReinitModal component should be rendered correctly 1`] = ` onClick={[MockFunction]} type="button" > - <ForwardRef(ButtonBase) + <button aria-label="ecogesture.reinitModal.btn2" - className="MuiButton-root btn-profile-next rounded MuiButton-text" - classes={ - Object { - "disabled": "Mui-disabled", - "focusVisible": "Mui-focusVisible", - "root": "MuiButtonBase-root", - } - } - component="button" + className="MuiButtonBase-root MuiButton-root btn-profile-next rounded MuiButton-text" disabled={false} - focusRipple={true} - focusVisibleClassName="Mui-focusVisible" + 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" > - <button - aria-label="ecogesture.reinitModal.btn2" - className="MuiButtonBase-root MuiButton-root btn-profile-next rounded 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" > - <span - className="MuiButton-label text-16-bold" - > - ecogesture.reinitModal.btn2 - </span> - <WithStyles(memo) + ecogesture.reinitModal.btn2 + </span> + <WithStyles(memo) + center={false} + > + <ForwardRef(TouchRipple) 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", - } + 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" > - <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> + <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))> - </EcogestureReinitModal> -</Provider> + </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))> +</EcogestureReinitModal> `; diff --git a/src/components/Ecogesture/__snapshots__/EfficiencyRating.spec.tsx.snap b/src/components/Ecogesture/__snapshots__/EfficiencyRating.spec.tsx.snap index 005c98b34..9b1d8405a 100644 --- a/src/components/Ecogesture/__snapshots__/EfficiencyRating.spec.tsx.snap +++ b/src/components/Ecogesture/__snapshots__/EfficiencyRating.spec.tsx.snap @@ -1,195 +1,182 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP exports[`EfficiencyRating component should be rendered correctly 1`] = ` -<Provider - store={ - Object { - "clearActions": [Function], - "dispatch": [Function], - "getActions": [Function], - "getState": [Function], - "replaceReducer": [Function], - "subscribe": [Function], - } - } +<EfficiencyRating + result={3} > - <EfficiencyRating - result={3} + <div + className="thunder" > - <div - className="thunder" + <StyledIcon + className="star" + icon="test-file-stub" + key="1" + size={15} > - <StyledIcon + <Icon + aria-hidden={true} className="star" icon="test-file-stub" - key="1" size={15} + spin={false} > - <Icon + <Component aria-hidden={true} - className="star" - icon="test-file-stub" - size={15} - spin={false} + className="star styles__icon___23x3R" + height={15} + style={Object {}} + width={15} > - <Component + <svg aria-hidden={true} className="star styles__icon___23x3R" height={15} style={Object {}} width={15} > - <svg - aria-hidden={true} - className="star styles__icon___23x3R" - height={15} - style={Object {}} - width={15} - > - <use - xlinkHref="#test-file-stub" - /> - </svg> - </Component> - </Icon> - </StyledIcon> - <StyledIcon + <use + xlinkHref="#test-file-stub" + /> + </svg> + </Component> + </Icon> + </StyledIcon> + <StyledIcon + className="star" + icon="test-file-stub" + key="2" + size={15} + > + <Icon + aria-hidden={true} className="star" icon="test-file-stub" - key="2" size={15} + spin={false} > - <Icon + <Component aria-hidden={true} - className="star" - icon="test-file-stub" - size={15} - spin={false} + className="star styles__icon___23x3R" + height={15} + style={Object {}} + width={15} > - <Component + <svg aria-hidden={true} className="star styles__icon___23x3R" height={15} style={Object {}} width={15} > - <svg - aria-hidden={true} - className="star styles__icon___23x3R" - height={15} - style={Object {}} - width={15} - > - <use - xlinkHref="#test-file-stub" - /> - </svg> - </Component> - </Icon> - </StyledIcon> - <StyledIcon + <use + xlinkHref="#test-file-stub" + /> + </svg> + </Component> + </Icon> + </StyledIcon> + <StyledIcon + className="star" + icon="test-file-stub" + key="3" + size={15} + > + <Icon + aria-hidden={true} className="star" icon="test-file-stub" - key="3" size={15} + spin={false} > - <Icon + <Component aria-hidden={true} - className="star" - icon="test-file-stub" - size={15} - spin={false} + className="star styles__icon___23x3R" + height={15} + style={Object {}} + width={15} > - <Component + <svg aria-hidden={true} className="star styles__icon___23x3R" height={15} style={Object {}} width={15} > - <svg - aria-hidden={true} - className="star styles__icon___23x3R" - height={15} - style={Object {}} - width={15} - > - <use - xlinkHref="#test-file-stub" - /> - </svg> - </Component> - </Icon> - </StyledIcon> - <StyledIcon + <use + xlinkHref="#test-file-stub" + /> + </svg> + </Component> + </Icon> + </StyledIcon> + <StyledIcon + className="star" + icon="test-file-stub" + key="4" + size={15} + > + <Icon + aria-hidden={true} className="star" icon="test-file-stub" - key="4" size={15} + spin={false} > - <Icon + <Component aria-hidden={true} - className="star" - icon="test-file-stub" - size={15} - spin={false} + className="star styles__icon___23x3R" + height={15} + style={Object {}} + width={15} > - <Component + <svg aria-hidden={true} className="star styles__icon___23x3R" height={15} style={Object {}} width={15} > - <svg - aria-hidden={true} - className="star styles__icon___23x3R" - height={15} - style={Object {}} - width={15} - > - <use - xlinkHref="#test-file-stub" - /> - </svg> - </Component> - </Icon> - </StyledIcon> - <StyledIcon + <use + xlinkHref="#test-file-stub" + /> + </svg> + </Component> + </Icon> + </StyledIcon> + <StyledIcon + className="star" + icon="test-file-stub" + key="5" + size={15} + > + <Icon + aria-hidden={true} className="star" icon="test-file-stub" - key="5" size={15} + spin={false} > - <Icon + <Component aria-hidden={true} - className="star" - icon="test-file-stub" - size={15} - spin={false} + className="star styles__icon___23x3R" + height={15} + style={Object {}} + width={15} > - <Component + <svg aria-hidden={true} className="star styles__icon___23x3R" height={15} style={Object {}} width={15} > - <svg - aria-hidden={true} - className="star styles__icon___23x3R" - height={15} - style={Object {}} - width={15} - > - <use - xlinkHref="#test-file-stub" - /> - </svg> - </Component> - </Icon> - </StyledIcon> - </div> - </EfficiencyRating> -</Provider> + <use + xlinkHref="#test-file-stub" + /> + </svg> + </Component> + </Icon> + </StyledIcon> + </div> +</EfficiencyRating> `; diff --git a/src/components/EcogestureForm/EcogestureFormEquipment.spec.tsx b/src/components/EcogestureForm/EcogestureFormEquipment.spec.tsx index d1e633a61..f88bab5b3 100644 --- a/src/components/EcogestureForm/EcogestureFormEquipment.spec.tsx +++ b/src/components/EcogestureForm/EcogestureFormEquipment.spec.tsx @@ -2,13 +2,9 @@ import { Button } from '@material-ui/core' 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' -import configureStore from 'redux-mock-store' -import { challengeStateData } from '../../../tests/__mocks__/challengeStateData.mock' -import { globalStateData } from '../../../tests/__mocks__/globalStateData.mock' import { mockProfileEcogesture } from '../../../tests/__mocks__/profileEcogesture.mock' -import { mockInitialEcolyoState } from '../../../tests/__mocks__/store' +import { createMockEcolyoStore } from '../../../tests/__mocks__/store' import { waitForComponentToPaint } from '../../../tests/__mocks__/testUtils' import EcogestureFormEquipment from './EcogestureFormEquipment' @@ -21,11 +17,8 @@ jest.mock('cozy-ui/transpiled/react/I18n', () => { }), } }) -const mockStore = configureStore([]) const mockSetPreviousStep = jest.fn() const mockSetNextStep = jest.fn() -const useSelectorSpy = jest.spyOn(reactRedux, 'useSelector') - const mockHistoryPush = jest.fn() jest.mock('react-router-dom', () => ({ ...jest.requireActual('react-router-dom'), @@ -36,17 +29,8 @@ jest.mock('react-router-dom', () => ({ jest.mock('./EquipmentIcon', () => 'mock-equipment-icon') describe('EcogestureFormEquipment component', () => { - useSelectorSpy.mockReturnValue({ - ...mockInitialEcolyoState.profile, - }) - + const store = createMockEcolyoStore() it('should be rendered correctly', async () => { - const store = mockStore({ - ecolyo: { - global: globalStateData, - challenge: challengeStateData, - }, - }) const wrapper = mount( <Provider store={store}> <EcogestureFormEquipment @@ -62,13 +46,6 @@ describe('EcogestureFormEquipment component', () => { }) it('should select equipment and unselect it', async () => { - const store = mockStore({ - ecolyo: { - global: globalStateData, - challenge: challengeStateData, - }, - }) - const wrapper = mount( <Provider store={store}> <EcogestureFormEquipment @@ -90,12 +67,6 @@ describe('EcogestureFormEquipment component', () => { }) it('should click on disabled back button', async () => { - const store = mockStore({ - ecolyo: { - global: globalStateData, - challenge: challengeStateData, - }, - }) const wrapper = mount( <Provider store={store}> <EcogestureFormEquipment diff --git a/src/components/EcogestureForm/EcogestureFormSingleChoice.spec.tsx b/src/components/EcogestureForm/EcogestureFormSingleChoice.spec.tsx index 1b6515c42..00efadaab 100644 --- a/src/components/EcogestureForm/EcogestureFormSingleChoice.spec.tsx +++ b/src/components/EcogestureForm/EcogestureFormSingleChoice.spec.tsx @@ -115,11 +115,6 @@ describe('EcogestureFormSingleChoice component', () => { expect(mockHandlePreviousStep).toHaveBeenCalledTimes(1) }) it('should keep previous answer', async () => { - useSelectorSpy.mockReturnValue({ - profile: { - isProfileEcogestureCompleted: true, - }, - }) const wrapper = mount( <Provider store={store}> <EcogestureFormSingleChoice diff --git a/src/components/EcogestureForm/EcogestureFormView.spec.tsx b/src/components/EcogestureForm/EcogestureFormView.spec.tsx index 78474a832..f1a22af12 100644 --- a/src/components/EcogestureForm/EcogestureFormView.spec.tsx +++ b/src/components/EcogestureForm/EcogestureFormView.spec.tsx @@ -2,14 +2,11 @@ import { Button } from '@material-ui/core' import { mount } from 'enzyme' import toJson from 'enzyme-to-json' -import { Profile } from 'models' import React from 'react' import * as reactRedux from 'react-redux' import { Provider } from 'react-redux' -import { - createMockEcolyoStore, - mockInitialEcolyoState, -} from '../../../tests/__mocks__/store' +import { mockProfileEcogesture } from '../../../tests/__mocks__/profileEcogesture.mock' +import { createMockEcolyoStore } from '../../../tests/__mocks__/store' import { waitForComponentToPaint } from '../../../tests/__mocks__/testUtils' import EcogestureFormView from './EcogestureFormView' @@ -58,7 +55,7 @@ describe('EcogestureFormView component', () => { await waitForComponentToPaint(wrapper) expect(toJson(wrapper)).toMatchSnapshot() }) - it('should render singlechoice', async () => { + it('should render singleChoice', async () => { const wrapper = mount( <Provider store={store}> <EcogestureFormView /> @@ -68,13 +65,12 @@ describe('EcogestureFormView component', () => { expect(wrapper.find('.ecogesture-form-single').exists()).toBeTruthy() }) it('should render profiletype form step because profiletype is completed', async () => { - const updatedProfile: Profile = { - ...mockInitialEcolyoState.profile, - isProfileTypeCompleted: true, - } - const updatedStore = { ...mockInitialEcolyoState, profile: updatedProfile } + const store = createMockEcolyoStore({ + profile: { isProfileTypeCompleted: true }, + profileEcogesture: mockProfileEcogesture, + }) const wrapper = mount( - <Provider store={createMockEcolyoStore(updatedStore)}> + <Provider store={store}> <EcogestureFormView /> </Provider> ) diff --git a/src/components/Exploration/ExplorationError.spec.tsx b/src/components/Exploration/ExplorationError.spec.tsx index b3f676a96..ad7f3fd3a 100644 --- a/src/components/Exploration/ExplorationError.spec.tsx +++ b/src/components/Exploration/ExplorationError.spec.tsx @@ -21,6 +21,7 @@ jest.mock('react-router-dom', () => ({ describe('ExplorationError component', () => { it('should be rendered correctly', () => { const component = shallow(<ExplorationError />).getElement + // TODO fix empty snapshot expect(component).toMatchSnapshot() }) }) diff --git a/src/components/Exploration/ExplorationFinished.spec.tsx b/src/components/Exploration/ExplorationFinished.spec.tsx index 177d4adfe..b7b08c462 100644 --- a/src/components/Exploration/ExplorationFinished.spec.tsx +++ b/src/components/Exploration/ExplorationFinished.spec.tsx @@ -3,8 +3,7 @@ import StyledIcon from 'components/CommonKit/Icon/StyledIcon' import { mount } from 'enzyme' import React from 'react' import { Provider } from 'react-redux' -import configureStore from 'redux-mock-store' -import { globalStateData } from '../../../tests/__mocks__/globalStateData.mock' +import { createMockEcolyoStore } from '../../../tests/__mocks__/store' import { userChallengeData } from '../../../tests/__mocks__/userChallengeData.mock' import ExplorationFinished from './ExplorationFinished' @@ -23,15 +22,9 @@ jest.mock('react-router-dom', () => ({ useNavigate: () => mockedNavigate, })) -const mockStore = configureStore([]) - describe('ExplorationFinished', () => { + const store = createMockEcolyoStore() it('should be rendered correctly', () => { - const store = mockStore({ - ecolyo: { - global: globalStateData, - }, - }) const wrapper = mount( <Provider store={store}> <ExplorationFinished userChallenge={userChallengeData[0]} /> @@ -45,11 +38,6 @@ describe('ExplorationFinished', () => { ) }) it('should redirect to challenge on click on styledButton', () => { - const store = mockStore({ - ecolyo: { - global: globalStateData, - }, - }) const wrapper = mount( <Provider store={store}> <ExplorationFinished userChallenge={userChallengeData[0]} /> diff --git a/src/components/Exploration/ExplorationOngoing.spec.tsx b/src/components/Exploration/ExplorationOngoing.spec.tsx index 55852f19d..278236744 100644 --- a/src/components/Exploration/ExplorationOngoing.spec.tsx +++ b/src/components/Exploration/ExplorationOngoing.spec.tsx @@ -2,9 +2,7 @@ import ExplorationOngoing from 'components/Exploration/ExplorationOngoing' import { mount } from 'enzyme' import React from 'react' 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 { createMockEcolyoStore } from '../../../tests/__mocks__/store' import { userChallengeData } from '../../../tests/__mocks__/userChallengeData.mock' jest.mock('cozy-ui/transpiled/react/I18n', () => { @@ -36,16 +34,9 @@ jest.mock('react-router-dom', () => ({ }), })) -const mockStore = configureStore([]) - describe('ExplorationOngoing component', () => { it('should be rendered correctly', () => { - const store = mockStore({ - ecolyo: { - global: globalStateData, - challenge: challengeStateData, - }, - }) + const store = createMockEcolyoStore() const wrapper = mount( <Provider store={store}> <ExplorationOngoing userChallenge={userChallengeData[0]} /> diff --git a/src/components/Exploration/ExplorationView.spec.tsx b/src/components/Exploration/ExplorationView.spec.tsx index 90cfc6c0a..640ab07f0 100644 --- a/src/components/Exploration/ExplorationView.spec.tsx +++ b/src/components/Exploration/ExplorationView.spec.tsx @@ -1,20 +1,34 @@ import { UserExplorationState } from 'enum/userExploration.enum' -import { shallow } from 'enzyme' +import { mount } from 'enzyme' import React from 'react' -import * as reactRedux from 'react-redux' +import { Provider } from 'react-redux' import { challengeStateData } from '../../../tests/__mocks__/challengeStateData.mock' +import { createMockEcolyoStore } from '../../../tests/__mocks__/store' import { userChallengeData } from '../../../tests/__mocks__/userChallengeData.mock' import ExplorationError from './ExplorationError' import ExplorationFinished from './ExplorationFinished' import ExplorationOngoing from './ExplorationOngoing' import ExplorationView from './ExplorationView' +jest.mock('cozy-ui/transpiled/react/I18n', () => { + return { + useI18n: jest.fn(() => { + return { + t: (str: string) => str, + } + }), + } +}) + +jest.mock('react-router-dom', () => ({ + ...jest.requireActual('react-router-dom'), + useNavigate: () => jest.fn(), +})) + jest.mock('components/Header/CozyBar', () => 'mock-cozybar') jest.mock('components/Header/Header', () => 'mock-header') jest.mock('components/Content/Content', () => 'mock-content') -const mockUseSelector = jest.spyOn(reactRedux, 'useSelector') - describe('ExplorationView', () => { it('should be rendered with ExplorationError component when unknown exploration state', () => { const updatedUserChallenge = { @@ -28,8 +42,12 @@ describe('ExplorationView', () => { ...challengeStateData, currentChallenge: updatedUserChallenge, } - mockUseSelector.mockReturnValue(updatedChallengeState) - const wrapper = shallow(<ExplorationView />) + const store = createMockEcolyoStore({ challenge: updatedChallengeState }) + const wrapper = mount( + <Provider store={store}> + <ExplorationView /> + </Provider> + ) expect(wrapper.find(ExplorationError).exists()).toBeTruthy() }) @@ -45,8 +63,12 @@ describe('ExplorationView', () => { ...challengeStateData, currentChallenge: updatedUserChallenge, } - mockUseSelector.mockReturnValue(updatedChallengeState) - const wrapper = shallow(<ExplorationView />) + const store = createMockEcolyoStore({ challenge: updatedChallengeState }) + const wrapper = mount( + <Provider store={store}> + <ExplorationView /> + </Provider> + ) expect(wrapper.find(ExplorationOngoing).exists()).toBeTruthy() }) @@ -62,8 +84,12 @@ describe('ExplorationView', () => { ...challengeStateData, currentChallenge: updatedUserChallenge, } - mockUseSelector.mockReturnValue(updatedChallengeState) - const wrapper = shallow(<ExplorationView />) + const store = createMockEcolyoStore({ challenge: updatedChallengeState }) + const wrapper = mount( + <Provider store={store}> + <ExplorationView /> + </Provider> + ) expect(wrapper.find(ExplorationOngoing).exists()).toBeTruthy() }) @@ -79,8 +105,12 @@ describe('ExplorationView', () => { ...challengeStateData, currentChallenge: updatedUserChallenge, } - mockUseSelector.mockReturnValue(updatedChallengeState) - const wrapper = shallow(<ExplorationView />) + const store = createMockEcolyoStore({ challenge: updatedChallengeState }) + const wrapper = mount( + <Provider store={store}> + <ExplorationView /> + </Provider> + ) expect(wrapper.find(ExplorationFinished).exists()).toBeTruthy() }) }) diff --git a/src/components/Feedback/FeedbackModal.spec.tsx b/src/components/Feedback/FeedbackModal.spec.tsx index 5f3afdd46..1dca3caac 100644 --- a/src/components/Feedback/FeedbackModal.spec.tsx +++ b/src/components/Feedback/FeedbackModal.spec.tsx @@ -3,10 +3,8 @@ import { mount } from 'enzyme' import React from 'react' 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 declare let __SAU_LINK__: string @@ -31,7 +29,6 @@ jest.mock('services/environment.service', () => { const handleFeedbackModalClose = jest.fn() -const mockUseSelector = jest.spyOn(reactRedux, 'useSelector') const mockUseDispatch = jest.spyOn(reactRedux, 'useDispatch') describe('FeedbackModal component', () => { @@ -40,62 +37,52 @@ describe('FeedbackModal component', () => { store.clearActions() }) it('should render the component', () => { + // TODO fix empty snapshot mockUseDispatch.mockReturnValue(jest.fn()) const component = mount( <Provider store={store}> - <BrowserRouter> - <FeedbackModal - open={true} - handleCloseClick={handleFeedbackModalClose} - /> - </BrowserRouter> + <FeedbackModal + open={true} + handleCloseClick={handleFeedbackModalClose} + /> </Provider> ).getElement() expect(component).toMatchSnapshot() }) -}) -describe('FeedbackModal functionalities', () => { - const store = createMockEcolyoStore() - beforeEach(() => { - store.clearActions() - }) - it('should close the modal', async () => { - mockUseDispatch.mockReturnValue(jest.fn()) - mockUseSelector.mockReturnValue(userChallengeExplo1OnGoing) - const wrapper = mount( - <Provider store={store}> - <BrowserRouter> + describe('FeedbackModal functionalities', () => { + it('should close the modal', async () => { + mockUseDispatch.mockReturnValue(jest.fn()) + const wrapper = mount( + <Provider store={store}> <FeedbackModal open={true} handleCloseClick={handleFeedbackModalClose} /> - </BrowserRouter> - </Provider> - ) - await waitForComponentToPaint(wrapper) + </Provider> + ) + await waitForComponentToPaint(wrapper) - wrapper.find('.modal-paper-close-button').first().simulate('click') - expect(handleFeedbackModalClose).toHaveBeenCalledTimes(1) - wrapper.find('.btn-secondary-positive').first().simulate('click') - expect(handleFeedbackModalClose).toHaveBeenCalledTimes(2) - }) + wrapper.find('.modal-paper-close-button').first().simulate('click') + expect(handleFeedbackModalClose).toHaveBeenCalledTimes(1) + wrapper.find('.btn-secondary-positive').first().simulate('click') + expect(handleFeedbackModalClose).toHaveBeenCalledTimes(2) + }) - it('should open the SAU link', () => { - global.open = jest.fn() + it('should open the SAU link', () => { + global.open = jest.fn() - const wrapper = mount( - <Provider store={store}> - <BrowserRouter> + const wrapper = mount( + <Provider store={store}> <FeedbackModal open={true} handleCloseClick={handleFeedbackModalClose} /> - </BrowserRouter> - </Provider> - ) - wrapper.find('.btn-highlight').first().simulate('click') - expect(window.open).toBeCalledTimes(1) - expect(global.open).toHaveBeenCalledWith(`${__SAU_LINK__}?version=0.0.0`) + </Provider> + ) + wrapper.find('.btn-highlight').first().simulate('click') + expect(window.open).toBeCalledTimes(1) + expect(global.open).toHaveBeenCalledWith(`${__SAU_LINK__}?version=0.0.0`) + }) }) }) diff --git a/src/components/Feedback/__snapshots__/FeedbackModal.spec.tsx.snap b/src/components/Feedback/__snapshots__/FeedbackModal.spec.tsx.snap index bbf516e89..2fd286dd6 100644 --- a/src/components/Feedback/__snapshots__/FeedbackModal.spec.tsx.snap +++ b/src/components/Feedback/__snapshots__/FeedbackModal.spec.tsx.snap @@ -13,11 +13,9 @@ exports[`FeedbackModal component should render the component 1`] = ` } } > - <BrowserRouter> - <FeedbackModal - handleCloseClick={[MockFunction]} - open={true} - /> - </BrowserRouter> + <FeedbackModal + handleCloseClick={[MockFunction]} + open={true} + /> </Provider> `; diff --git a/src/components/Header/CozyBar.spec.tsx b/src/components/Header/CozyBar.spec.tsx index ab4141b20..952313112 100644 --- a/src/components/Header/CozyBar.spec.tsx +++ b/src/components/Header/CozyBar.spec.tsx @@ -4,9 +4,8 @@ import { mount } from 'enzyme' import toJson from 'enzyme-to-json' import React from 'react' import { Provider } from 'react-redux' -import configureStore from 'redux-mock-store' import * as ModalAction from 'store/modal/modal.slice' -import { globalStateData } from '../../../tests/__mocks__/globalStateData.mock' +import { createMockEcolyoStore } from '../../../tests/__mocks__/store' interface BarProps { children: React.ReactNode @@ -36,14 +35,8 @@ jest.mock('react-router-dom', () => ({ useNavigate: () => mockedNavigate, })) -const mockStore = configureStore([]) - describe('CozyBar component', () => { - const store = mockStore({ - ecolyo: { - global: globalStateData, - }, - }) + const store = createMockEcolyoStore() it('should be rendered correctly without without left arrow', () => { const wrapper = mount( <Provider store={store}> @@ -92,10 +85,8 @@ describe('CozyBar component', () => { }) it('should not be rendered with screen type different from mobile', () => { - const store = mockStore({ - ecolyo: { - global: { ...globalStateData, screenType: ScreenType.DESKTOP }, - }, + const store = createMockEcolyoStore({ + global: { screenType: ScreenType.DESKTOP }, }) const wrapper = mount( <Provider store={store}> diff --git a/src/components/Header/Header.spec.tsx b/src/components/Header/Header.spec.tsx index d7f0f27c3..757488f24 100644 --- a/src/components/Header/Header.spec.tsx +++ b/src/components/Header/Header.spec.tsx @@ -1,12 +1,10 @@ import IconButton from '@material-ui/core/IconButton' import Header from 'components/Header/Header' -import { ScreenType } from 'enum/screen.enum' import { mount } from 'enzyme' import React from 'react' import { Provider } from 'react-redux' -import configureStore from 'redux-mock-store' import * as ModalAction from 'store/modal/modal.slice' -import { globalStateData } from '../../../tests/__mocks__/globalStateData.mock' +import { createMockEcolyoStore } from '../../../tests/__mocks__/store' jest.mock('cozy-ui/transpiled/react/I18n', () => { return { @@ -25,15 +23,10 @@ jest.mock('react-router-dom', () => ({ })) const mockSetHeaderHeight = jest.fn() -const mockStore = configureStore([]) describe('Header component', () => { + const store = createMockEcolyoStore() it('should be rendered correctly', () => { - const store = mockStore({ - ecolyo: { - global: globalStateData, - }, - }) const wrapper = mount( <Provider store={store}> <Header @@ -46,11 +39,6 @@ describe('Header component', () => { }) it('should display title and back button when desktopTitle key provided and displayBackArrow is true', () => { - const store = mockStore({ - ecolyo: { - global: globalStateData, - }, - }) const wrapper = mount( <Provider store={store}> <Header @@ -67,11 +55,6 @@ describe('Header component', () => { }) it('should call handleClickBack when back button is clicked', () => { - const store = mockStore({ - ecolyo: { - global: { ...globalStateData, screenType: ScreenType.DESKTOP }, - }, - }) const wrapper = mount( <Provider store={store}> <Header @@ -90,14 +73,6 @@ describe('Header component', () => { }) it('should call handleClickFeedbacks when feedback button is clicked', () => { - const store = mockStore({ - ecolyo: { - global: globalStateData, - modal: { - isFeedbacksOpen: false, - }, - }, - }) const wrapper = mount( <Provider store={store}> <Header diff --git a/src/components/Home/ConsumptionDetails.spec.tsx b/src/components/Home/ConsumptionDetails.spec.tsx index 6bb3fe42d..1e326b7ec 100644 --- a/src/components/Home/ConsumptionDetails.spec.tsx +++ b/src/components/Home/ConsumptionDetails.spec.tsx @@ -1,16 +1,10 @@ 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' -import { BrowserRouter } from 'react-router-dom' -import { - createMockEcolyoStore, - mockInitialChartState, - mockInitialGlobalState, -} from '../../../tests/__mocks__/store' +import { createMockEcolyoStore } from '../../../tests/__mocks__/store' import { waitForComponentToPaint } from '../../../tests/__mocks__/testUtils' import ConsumptionDetails from './ConsumptionDetails' @@ -33,19 +27,9 @@ describe('ConsumptionDetails component', () => { mockUseSelector.mockClear() }) it('should be rendered correctly', async () => { - mockUseSelector.mockReturnValue({ - fluidStatus: mockInitialGlobalState.fluidStatus, - fluidTypes: [FluidType.ELECTRICITY], - selectedDate: mockInitialChartState.selectedDate, - currentTimeStep: TimeStep.WEEK, - currentIndex: mockInitialChartState.currentIndex, - currentDatachart: mockInitialChartState.currentDatachart, - }) const wrapper = mount( <Provider store={store}> - <BrowserRouter> - <ConsumptionDetails fluidType={FluidType.ELECTRICITY} /> - </BrowserRouter> + <ConsumptionDetails fluidType={FluidType.ELECTRICITY} /> </Provider> ) await waitForComponentToPaint(wrapper) @@ -53,55 +37,25 @@ describe('ConsumptionDetails component', () => { }) it('should not render connection card ', () => { - mockUseSelector.mockReturnValue({ - fluidStatus: mockInitialGlobalState.fluidStatus, - fluidTypes: [FluidType.ELECTRICITY, FluidType.GAS, FluidType.WATER], - selectedDate: mockInitialChartState.selectedDate, - currentTimeStep: TimeStep.WEEK, - currentIndex: mockInitialChartState.currentIndex, - currentDatachart: mockInitialChartState.currentDatachart, - }) const wrapper = mount( <Provider store={store}> - <BrowserRouter> - <ConsumptionDetails fluidType={FluidType.MULTIFLUID} /> - </BrowserRouter> + <ConsumptionDetails fluidType={FluidType.MULTIFLUID} /> </Provider> ) expect(wrapper.contains('.fluidcard-link')).toBeFalsy() }) it('should render one connection card ', () => { - mockUseSelector.mockReturnValue({ - fluidStatus: mockInitialGlobalState.fluidStatus, - fluidTypes: [FluidType.ELECTRICITY, FluidType.GAS], - selectedDate: mockInitialChartState.selectedDate, - currentTimeStep: TimeStep.WEEK, - currentIndex: mockInitialChartState.currentIndex, - currentDatachart: mockInitialChartState.currentDatachart, - }) const wrapper = mount( <Provider store={store}> - <BrowserRouter> - <ConsumptionDetails fluidType={FluidType.MULTIFLUID} /> - </BrowserRouter> + <ConsumptionDetails fluidType={FluidType.MULTIFLUID} /> </Provider> ) expect(wrapper.find('.fluidcard-link')).toBeTruthy() }) it('should not render connection card and show multifluid link', () => { - mockUseSelector.mockReturnValue({ - fluidStatus: mockInitialGlobalState.fluidStatus, - fluidTypes: [FluidType.ELECTRICITY, FluidType.GAS], - selectedDate: mockInitialChartState.selectedDate, - currentTimeStep: TimeStep.WEEK, - currentIndex: mockInitialChartState.currentIndex, - currentDatachart: mockInitialChartState.currentDatachart, - }) const wrapper = mount( <Provider store={store}> - <BrowserRouter> - <ConsumptionDetails fluidType={FluidType.ELECTRICITY} /> - </BrowserRouter> + <ConsumptionDetails fluidType={FluidType.ELECTRICITY} /> </Provider> ) expect(wrapper.find('.multi-link')).toBeTruthy() diff --git a/src/components/Home/ConsumptionView.spec.tsx b/src/components/Home/ConsumptionView.spec.tsx index 86a4f8447..f5be5f225 100644 --- a/src/components/Home/ConsumptionView.spec.tsx +++ b/src/components/Home/ConsumptionView.spec.tsx @@ -2,19 +2,21 @@ import Loader from 'components/Loader/Loader' import { FluidState, FluidType } from 'enum/fluid.enum' import { TimeStep } from 'enum/timeStep.enum' import { mount } from 'enzyme' -import { DateTime } from 'luxon' -import { FluidStatus } from 'models' import React from 'react' import * as reactRedux from 'react-redux' import { Provider } from 'react-redux' import * as chartActions from 'store/chart/chart.slice' import { mockCustomPopup } from '../../../tests/__mocks__/customPopup.mock' -import { mockTestProfile1 } from '../../../tests/__mocks__/profileType.mock' import { - createMockEcolyoStore, mockExpiredElec, mockExpiredGas, +} from '../../../tests/__mocks__/fluidStatusData.mock' +import { mockTestProfile1 } from '../../../tests/__mocks__/profileType.mock' +import { + createMockEcolyoStore, + mockChartState, mockInitialEcolyoState, + mockModalState, } from '../../../tests/__mocks__/store' import ConsumptionView from './ConsumptionView' @@ -64,19 +66,13 @@ jest.mock( () => 'mock-SgeConnectView' ) -const useSelectorSpy = jest.spyOn(reactRedux, 'useSelector') const useDispatchSpy = jest.spyOn(reactRedux, 'useDispatch') const setCurrentTimeStepSpy = jest.spyOn(chartActions, 'setCurrentTimeStep') -const mockedPartnersIssueModal = { - enedis: false, - egl: false, - grdf: false, -} +const mockFluidStatus = mockInitialEcolyoState.global.fluidStatus +mockFluidStatus[FluidType.ELECTRICITY].status = FluidState.DONE -const mockSelectedDate = DateTime.local().endOf('minute').setZone('utc', { - keepLocalTime: true, -}) +const mockChartStateShowOffline = { ...mockChartState, showOfflineData: true } describe('ConsumptionView component', () => { const store = createMockEcolyoStore() @@ -87,21 +83,17 @@ describe('ConsumptionView component', () => { }) it('should be rendered correctly', async () => { - const mockFluidStatus: FluidStatus[] = - mockInitialEcolyoState.global.fluidStatus - mockFluidStatus[FluidType.ELECTRICITY].status = FluidState.DONE - useSelectorSpy.mockReturnValue({ + const store = createMockEcolyoStore({ chart: { - currentTimeStep: TimeStep.WEEK, + ...mockChartState, loading: false, showOfflineData: true, - selectedDate: mockSelectedDate, }, global: { fluidStatus: mockFluidStatus, releaseNotes: mockInitialEcolyoState.global.releaseNotes, }, - modal: { partnersIssueModal: mockedPartnersIssueModal }, + modal: mockModalState, }) const wrapper = mount( <Provider store={store}> @@ -117,21 +109,17 @@ describe('ConsumptionView component', () => { }) it('should display a spinner when fluid connected and is loading', () => { - const mockFluidStatus: FluidStatus[] = - mockInitialEcolyoState.global.fluidStatus - mockFluidStatus[FluidType.ELECTRICITY].status = FluidState.DONE - useSelectorSpy.mockReturnValue({ + const store = createMockEcolyoStore({ chart: { - currentTimeStep: TimeStep.WEEK, + ...mockChartState, loading: true, showOfflineData: true, - selectedDate: mockSelectedDate, }, global: { fluidStatus: mockFluidStatus, releaseNotes: mockInitialEcolyoState.global.releaseNotes, }, - modal: { partnersIssueModal: mockedPartnersIssueModal }, + modal: mockModalState, }) const wrapper = mount( <Provider store={store}> @@ -145,18 +133,16 @@ describe('ConsumptionView component', () => { }) it('should set CurrentTimeStep to WEEK when fluid != ELECTRICITY and timeStep = HALF_AN_HOUR', () => { - useSelectorSpy.mockReturnValue({ + const store = createMockEcolyoStore({ chart: { + ...mockChartState, currentTimeStep: TimeStep.HALF_AN_HOUR, - loading: true, - showOfflineData: true, - selectedDate: mockSelectedDate, }, global: { fluidStatus: mockInitialEcolyoState.global.fluidStatus, releaseNotes: mockInitialEcolyoState.global.releaseNotes, }, - modal: { partnersIssueModal: mockedPartnersIssueModal }, + modal: mockModalState, }) mount( <Provider store={store}> @@ -168,19 +154,13 @@ describe('ConsumptionView component', () => { }) it('should render konnector list when no fluid is connected', () => { - useSelectorSpy.mockReturnValue({ - chart: { - currentTimeStep: TimeStep.WEEK, - loading: true, - showOfflineData: true, - selectedDate: mockSelectedDate, - }, + const store = createMockEcolyoStore({ + chart: mockChartStateShowOffline, global: { fluidStatus: [], releaseNotes: mockInitialEcolyoState.global.releaseNotes, }, - modal: { partnersIssueModal: mockedPartnersIssueModal }, - fluidStatus: [], + modal: mockModalState, }) const wrapper = mount( <Provider store={store}> @@ -191,22 +171,13 @@ describe('ConsumptionView component', () => { }) it('should render mutlifluid consumption if at least one fluid is connected', () => { - const updatedStatus: FluidStatus[] = - mockInitialEcolyoState.global.fluidStatus - updatedStatus[1].status = FluidState.DONE - useSelectorSpy.mockReturnValue({ - chart: { - currentTimeStep: TimeStep.WEEK, - loading: true, - showOfflineData: true, - selectedDate: mockSelectedDate, - }, + const store = createMockEcolyoStore({ + chart: mockChartStateShowOffline, global: { - fluidStatus: updatedStatus, + fluidStatus: mockFluidStatus, releaseNotes: mockInitialEcolyoState.global.releaseNotes, }, - modal: { partnersIssueModal: mockedPartnersIssueModal }, - fluidStatus: updatedStatus, + modal: mockModalState, }) const wrapper = mount( <Provider store={store}> @@ -217,21 +188,13 @@ describe('ConsumptionView component', () => { }) it('should render Electricity when elec is connected', () => { - const updatedStatus: FluidStatus[] = - mockInitialEcolyoState.global.fluidStatus - updatedStatus[0].status = FluidState.DONE - useSelectorSpy.mockReturnValue({ - chart: { - currentTimeStep: TimeStep.WEEK, - loading: true, - showOfflineData: true, - selectedDate: mockSelectedDate, - }, + const store = createMockEcolyoStore({ + chart: mockChartStateShowOffline, global: { - fluidStatus: updatedStatus, + fluidStatus: mockFluidStatus, releaseNotes: mockInitialEcolyoState.global.releaseNotes, }, - modal: { partnersIssueModal: mockedPartnersIssueModal }, + modal: mockModalState, }) const wrapper = mount( <Provider store={store}> @@ -244,21 +207,15 @@ describe('ConsumptionView component', () => { // todo describe and add multiple fluids ? it('should render partner issue Modal', async () => { - const updatedStatus: FluidStatus[] = - mockInitialEcolyoState.global.fluidStatus + const updatedStatus = mockInitialEcolyoState.global.fluidStatus updatedStatus[0] = mockExpiredElec - useSelectorSpy.mockReturnValue({ - chart: { - currentTimeStep: TimeStep.WEEK, - loading: true, - showOfflineData: true, - selectedDate: mockSelectedDate, - }, + const store = createMockEcolyoStore({ + chart: mockChartStateShowOffline, global: { fluidStatus: updatedStatus, releaseNotes: mockInitialEcolyoState.global.releaseNotes, }, - modal: { partnersIssueModal: { ...mockedPartnersIssueModal, egl: true } }, + modal: { partnersIssueModal: { enedis: false, grdf: false, egl: true } }, }) useDispatchSpy.mockReturnValue(jest.fn()) mockUpdateProfile.mockResolvedValue(mockTestProfile1) @@ -270,21 +227,15 @@ describe('ConsumptionView component', () => { expect(wrapper.find('mock-partnerissuemodal').exists()).toBeTruthy() }) it('should show expired modal when a GRDF consent is expired', () => { - const updatedStatus: FluidStatus[] = - mockInitialEcolyoState.global.fluidStatus + const updatedStatus = mockInitialEcolyoState.global.fluidStatus updatedStatus[0] = mockExpiredGas - useSelectorSpy.mockReturnValue({ - chart: { - currentTimeStep: TimeStep.WEEK, - loading: true, - showOfflineData: true, - selectedDate: mockSelectedDate, - }, + const store = createMockEcolyoStore({ + chart: mockChartStateShowOffline, global: { fluidStatus: updatedStatus, releaseNotes: mockInitialEcolyoState.global.releaseNotes, }, - modal: { partnersIssueModal: mockedPartnersIssueModal }, + modal: mockModalState, }) useDispatchSpy.mockReturnValue(jest.fn()) const wrapper = mount( @@ -295,21 +246,15 @@ describe('ConsumptionView component', () => { expect(wrapper.find('.title').text()).toBe('consent_outdated.title.2') }) it('should show expired modal when a Enedis consent is expired', () => { - const updatedStatus: FluidStatus[] = - mockInitialEcolyoState.global.fluidStatus + const updatedStatus = mockInitialEcolyoState.global.fluidStatus updatedStatus[0] = mockExpiredElec - useSelectorSpy.mockReturnValue({ - chart: { - currentTimeStep: TimeStep.WEEK, - loading: true, - showOfflineData: true, - selectedDate: mockSelectedDate, - }, + const store = createMockEcolyoStore({ + chart: mockChartStateShowOffline, global: { fluidStatus: updatedStatus, releaseNotes: mockInitialEcolyoState.global.releaseNotes, }, - modal: { partnersIssueModal: mockedPartnersIssueModal }, + modal: mockModalState, }) useDispatchSpy.mockReturnValue(jest.fn()) const wrapper = mount( @@ -321,22 +266,14 @@ describe('ConsumptionView component', () => { expect(wrapper.find('.title').text()).toBe('consent_outdated.title.0') }) it('should render customPopup Modal', async () => { - const updatedStatus: FluidStatus[] = - mockInitialEcolyoState.global.fluidStatus - updatedStatus[0] = mockExpiredElec - useSelectorSpy.mockReturnValue({ - chart: { - currentTimeStep: TimeStep.WEEK, - loading: true, - showOfflineData: true, - selectedDate: mockSelectedDate, - }, + const store = createMockEcolyoStore({ + chart: mockChartStateShowOffline, global: { - fluidStatus: updatedStatus, + fluidStatus: mockFluidStatus, releaseNotes: mockInitialEcolyoState.global.releaseNotes, }, modal: { - partnersIssueModal: mockedPartnersIssueModal, + ...mockModalState, customPopupModal: mockCustomPopup, }, }) @@ -350,24 +287,16 @@ describe('ConsumptionView component', () => { expect(wrapper.find('mock-custompopup').exists()).toBeTruthy() }) it('should render releaseNotesModal if releaseNotes.show is true', async () => { - const updatedStatus: FluidStatus[] = - mockInitialEcolyoState.global.fluidStatus - updatedStatus[0] = mockExpiredElec - useSelectorSpy.mockReturnValue({ - chart: { - currentTimeStep: TimeStep.WEEK, - loading: true, - showOfflineData: true, - selectedDate: mockSelectedDate, - }, + const store = createMockEcolyoStore({ + chart: mockChartStateShowOffline, global: { - fluidStatus: updatedStatus, + fluidStatus: mockFluidStatus, releaseNotes: { show: true, notes: [{ description: 'description', title: 'title' }], }, }, - modal: { partnersIssueModal: mockedPartnersIssueModal }, + modal: mockModalState, }) useDispatchSpy.mockReturnValue(jest.fn()) mockUpdateProfile.mockResolvedValue(mockTestProfile1) diff --git a/src/components/Home/FluidButton.spec.tsx b/src/components/Home/FluidButton.spec.tsx index 9799a3d51..6bc674ea1 100644 --- a/src/components/Home/FluidButton.spec.tsx +++ b/src/components/Home/FluidButton.spec.tsx @@ -4,11 +4,10 @@ import toJson from 'enzyme-to-json' import { GlobalState } from 'models' import React from 'react' import { Provider } from 'react-redux' -import configureStore from 'redux-mock-store' import UsageEventService from 'services/usageEvent.service' import { createMockEcolyoStore, - mockInitialGlobalState, + mockGlobalState, } from '../../../tests/__mocks__/store' import { waitForComponentToPaint } from '../../../tests/__mocks__/testUtils' import FluidButton from './FluidButton' @@ -75,19 +74,15 @@ describe('FluidButton component', () => { }) it('should render errored button', () => { - const mockStore = configureStore([]) - - const updatedInitalState: GlobalState = { - ...mockInitialGlobalState, + const updatedInitialState: GlobalState = { + ...mockGlobalState, } - updatedInitalState.fluidStatus[FluidType.GAS].status = FluidState.ERROR - const store2 = mockStore({ - ecolyo: { - global: updatedInitalState, - }, + updatedInitialState.fluidStatus[FluidType.GAS].status = FluidState.ERROR + const store = createMockEcolyoStore({ + global: updatedInitialState, }) const wrapper = mount( - <Provider store={store2}> + <Provider store={store}> <FluidButton fluidType={FluidType.GAS} isActive={false} /> </Provider> ) diff --git a/src/components/Home/__snapshots__/ConsumptionDetails.spec.tsx.snap b/src/components/Home/__snapshots__/ConsumptionDetails.spec.tsx.snap index 6dd5c4b17..77eb4e2b0 100644 --- a/src/components/Home/__snapshots__/ConsumptionDetails.spec.tsx.snap +++ b/src/components/Home/__snapshots__/ConsumptionDetails.spec.tsx.snap @@ -13,106 +13,73 @@ exports[`ConsumptionDetails component should be rendered correctly 1`] = ` } } > - <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" > - <ConsumptionDetails - fluidType={0} + <div + className="consumption-details-content" > <div - className="consumption-details-root" + className="consumption-details-header text-16-normal-uppercase details-title" + /> + <TotalConsumption + fluidType={0} > <div - className="consumption-details-content" + className="icon-line " > - <div - className="consumption-details-header text-16-normal-uppercase details-title" - /> - <TotalConsumption - fluidType={0} + <StyledIcon + className="pile-icon" + icon="test-file-stub" + size={36} > - <div - className="icon-line " + <Icon + aria-hidden={true} + className="pile-icon" + icon="test-file-stub" + size={36} + spin={false} > - <StyledIcon - className="pile-icon" - icon="test-file-stub" - size={36} + <Component + aria-hidden={true} + className="pile-icon styles__icon___23x3R" + height={36} + style={Object {}} + width={36} > - <Icon + <svg aria-hidden={true} - className="pile-icon" - icon="test-file-stub" - size={36} - spin={false} + className="pile-icon styles__icon___23x3R" + height={36} + style={Object {}} + width={36} > - <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> + <use + xlinkHref="#test-file-stub" + /> + </svg> + </Component> + </Icon> + </StyledIcon> + <div> + <span + className="euro-value" + > + ----- + </span> + <span + className="euro-symbol" + > + € + </span> + </div> </div> - </div> - </ConsumptionDetails> - </Router> - </BrowserRouter> + </TotalConsumption> + </div> + </div> + </ConsumptionDetails> </Provider> `; diff --git a/src/components/Konnector/KonnectorViewerList.spec.tsx b/src/components/Konnector/KonnectorViewerList.spec.tsx index 9394ed2ca..c22184392 100644 --- a/src/components/Konnector/KonnectorViewerList.spec.tsx +++ b/src/components/Konnector/KonnectorViewerList.spec.tsx @@ -1,12 +1,8 @@ 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' -import { - createMockEcolyoStore, - mockInitialGlobalState, -} from '../../../tests/__mocks__/store' +import { createMockEcolyoStore } from '../../../tests/__mocks__/store' import { waitForComponentToPaint } from '../../../tests/__mocks__/testUtils' import KonnectorViewerList from './KonnectorViewerList' @@ -41,11 +37,6 @@ describe('KonnectorViewerList component', () => { expect(toJson(wrapper)).toMatchSnapshot() }) it('should click on card and nav to fluid', async () => { - const mockUseSelector = jest.spyOn(reactRedux, 'useSelector') - - mockUseSelector.mockReturnValue({ - fluidStatus: mockInitialGlobalState.fluidStatus, - }) const wrapper = mount( <Provider store={store}> <KonnectorViewerList /> diff --git a/src/components/Navbar/Navbar.spec.tsx b/src/components/Navbar/Navbar.spec.tsx index e9a446415..77ed83fe0 100644 --- a/src/components/Navbar/Navbar.spec.tsx +++ b/src/components/Navbar/Navbar.spec.tsx @@ -3,8 +3,7 @@ import { mount } from 'enzyme' import React from 'react' import { Provider } from 'react-redux' import { BrowserRouter } from 'react-router-dom' -import configureStore from 'redux-mock-store' -import { globalStateData } from '../../../tests/__mocks__/globalStateData.mock' +import { createMockEcolyoStore } from '../../../tests/__mocks__/store' jest.mock('cozy-ui/transpiled/react/I18n', () => { return { @@ -16,15 +15,9 @@ jest.mock('cozy-ui/transpiled/react/I18n', () => { } }) -const mockStore = configureStore([]) - describe('Navbar component', () => { it('should be rendered correctly with 5 navlink', () => { - const store = mockStore({ - ecolyo: { - global: globalStateData, - }, - }) + const store = createMockEcolyoStore() const wrapper = mount( <Provider store={store}> <BrowserRouter> @@ -36,15 +29,12 @@ describe('Navbar component', () => { }) it('should be rendered correctly with notifications', () => { - const store = mockStore({ - ecolyo: { - global: { - ...globalStateData, - challengeExplorationNotification: true, - challengeActionNotification: false, - challengeDuelNotification: false, - analysisNotification: true, - }, + const store = createMockEcolyoStore({ + global: { + challengeExplorationNotification: true, + challengeActionNotification: false, + challengeDuelNotification: false, + analysisNotification: true, }, }) const wrapper = mount( @@ -59,15 +49,12 @@ describe('Navbar component', () => { }) it('should be rendered correctly without notifications', () => { - const store = mockStore({ - ecolyo: { - global: { - ...globalStateData, - challengeExplorationNotification: false, - challengeActionNotification: false, - challengeDuelNotification: false, - analysisNotification: false, - }, + const store = createMockEcolyoStore({ + global: { + challengeExplorationNotification: false, + challengeActionNotification: false, + challengeDuelNotification: false, + analysisNotification: false, }, }) const wrapper = mount( diff --git a/src/components/Options/ProfileTypeOptions/ProfileTypeOptions.spec.tsx b/src/components/Options/ProfileTypeOptions/ProfileTypeOptions.spec.tsx index 5189e961c..e3a1893c7 100644 --- a/src/components/Options/ProfileTypeOptions/ProfileTypeOptions.spec.tsx +++ b/src/components/Options/ProfileTypeOptions/ProfileTypeOptions.spec.tsx @@ -11,10 +11,12 @@ import { import { mount } from 'enzyme' import React from 'react' import { Provider } from 'react-redux' -import configureStore from 'redux-mock-store' -import { profileData } from '../../../../tests/__mocks__/profileData.mock' import { mockProfileType } from '../../../../tests/__mocks__/profileType.mock' -import { mockInitialChallengeState } from '../../../../tests/__mocks__/store' +import { + createMockEcolyoStore, + mockChallengeState, + mockProfileState, +} from '../../../../tests/__mocks__/store' jest.mock('cozy-ui/transpiled/react/I18n', () => { return { @@ -31,17 +33,9 @@ jest.mock('react-router-dom', () => ({ useNavigate: () => mockedNavigate, })) -const mockStore = configureStore([]) - describe('ProfileTypeOptions component', () => { + const store = createMockEcolyoStore() it('should be rendered correctly', () => { - const store = mockStore({ - ecolyo: { - profile: profileData, - profileType: mockProfileType, - challenge: mockInitialChallengeState, - }, - }) const wrapper = mount( <Provider store={store}> <ProfileTypeOptions /> @@ -53,15 +47,10 @@ describe('ProfileTypeOptions component', () => { wrapper.find('.profile-link').first().simulate('click') }) it('should be rendered when user complete profile type form', () => { - const profileTypeCompleted = { ...profileData } - const profileTypeData = { ...mockProfileType } - profileTypeCompleted.isProfileTypeCompleted = true - const store = mockStore({ - ecolyo: { - profile: profileTypeCompleted, - profileType: profileTypeData, - challenge: mockInitialChallengeState, - }, + const store = createMockEcolyoStore({ + profile: { ...mockProfileState, isProfileTypeCompleted: true }, + profileType: mockProfileType, + challenge: mockChallengeState, }) const wrapper = mount( <Provider store={store}> @@ -71,16 +60,10 @@ describe('ProfileTypeOptions component', () => { expect(wrapper.find('.profile-container').exists()).toBeTruthy() }) it('should be rendered when housing_type = apartment', () => { - const profileTypeCompleted = { ...profileData } - const profileTypeData = { ...mockProfileType } - profileTypeCompleted.isProfileTypeCompleted = true - profileTypeData.housingType = HousingType.APARTMENT - const store = mockStore({ - ecolyo: { - profile: profileTypeCompleted, - profileType: profileTypeData, - challenge: mockInitialChallengeState, - }, + const store = createMockEcolyoStore({ + profile: { ...mockProfileState, isProfileTypeCompleted: true }, + profileType: { ...mockProfileType, housingType: HousingType.APARTMENT }, + challenge: mockChallengeState, }) const wrapper = mount( <Provider store={store}> @@ -90,22 +73,16 @@ describe('ProfileTypeOptions component', () => { expect(wrapper.find('.floor').exists()).toBeTruthy() }) it('should display heating with equipments', () => { - const profileTypeCompleted = { - ...profileData, - } - const profileTypeData = { ...mockProfileType } - - profileTypeData.heating = IndividualOrCollective.INDIVIDUAL - profileTypeCompleted.isProfileTypeCompleted = true - profileTypeData.housingType = HousingType.APARTMENT - profileTypeData.hasInstalledVentilation = ThreeChoicesAnswer.YES - profileTypeData.hasReplacedHeater = ThreeChoicesAnswer.YES - const store = mockStore({ - ecolyo: { - profile: profileTypeCompleted, - profileType: profileTypeData, - challenge: mockInitialChallengeState, + const store = createMockEcolyoStore({ + profile: { ...mockProfileState, isProfileTypeCompleted: true }, + profileType: { + ...mockProfileType, + heating: IndividualOrCollective.INDIVIDUAL, + housingType: HousingType.APARTMENT, + hasInstalledVentilation: ThreeChoicesAnswer.YES, + hasReplacedHeater: ThreeChoicesAnswer.YES, }, + challenge: mockChallengeState, }) const wrapper = mount( <Provider store={store}> @@ -115,23 +92,20 @@ describe('ProfileTypeOptions component', () => { expect(wrapper.find('.equipments').exists()).toBeTruthy() }) it('should display insulation work', () => { - const profileTypeCompleted = { - ...profileData, - } - const profileTypeData = { ...mockProfileType } - - profileTypeCompleted.isProfileTypeCompleted = true - profileTypeData.housingType = HousingType.APARTMENT - profileTypeData.individualInsulationWork = [ - IndividualInsulationWork.ROOF_INSULATION, - IndividualInsulationWork.WINDOW_REPLACEMENT, - ] - const store = mockStore({ - ecolyo: { - profile: profileTypeCompleted, - profileType: profileTypeData, - challenge: mockInitialChallengeState, + const store = createMockEcolyoStore({ + profile: { + ...mockProfileState, + isProfileTypeCompleted: true, + }, + profileType: { + ...mockProfileType, + housingType: HousingType.APARTMENT, + individualInsulationWork: [ + IndividualInsulationWork.ROOF_INSULATION, + IndividualInsulationWork.WINDOW_REPLACEMENT, + ], }, + challenge: mockChallengeState, }) const wrapper = mount( <Provider store={store}> diff --git a/src/components/PartnerIssue/PartnerIssueModal.spec.tsx b/src/components/PartnerIssue/PartnerIssueModal.spec.tsx index de6d946e2..33df065aa 100644 --- a/src/components/PartnerIssue/PartnerIssueModal.spec.tsx +++ b/src/components/PartnerIssue/PartnerIssueModal.spec.tsx @@ -2,8 +2,6 @@ import { Button } from '@material-ui/core' 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 PartnerIssueModal from './PartnerIssueModal' @@ -17,57 +15,45 @@ jest.mock('cozy-ui/transpiled/react/I18n', () => { } }) -const mockStore = configureStore([]) const mockHandleClose = jest.fn() describe('PartnerIssueModal component', () => { - const store = mockStore({ - ecolyo: mockInitialEcolyoState, - }) it('should render correctly', () => { const wrapper = mount( - <Provider store={store}> - <PartnerIssueModal - open={true} - handleCloseClick={mockHandleClose} - issuedFluid={mockInitialEcolyoState.global.fluidStatus[0]} - /> - </Provider> + <PartnerIssueModal + open={true} + handleCloseClick={mockHandleClose} + issuedFluid={mockInitialEcolyoState.global.fluidStatus[0]} + /> ) expect(toJson(wrapper)).toMatchSnapshot() }) it('should render elec modal', () => { const wrapper = mount( - <Provider store={store}> - <PartnerIssueModal - open={true} - handleCloseClick={mockHandleClose} - issuedFluid={mockInitialEcolyoState.global.fluidStatus[0]} - /> - </Provider> + <PartnerIssueModal + open={true} + handleCloseClick={mockHandleClose} + issuedFluid={mockInitialEcolyoState.global.fluidStatus[0]} + /> ) expect(wrapper.text().includes('error_connect_elec')).toBeTruthy() }) it('should render water modal', () => { const wrapper = mount( - <Provider store={store}> - <PartnerIssueModal - open={true} - handleCloseClick={mockHandleClose} - issuedFluid={mockInitialEcolyoState.global.fluidStatus[1]} - /> - </Provider> + <PartnerIssueModal + open={true} + handleCloseClick={mockHandleClose} + issuedFluid={mockInitialEcolyoState.global.fluidStatus[1]} + /> ) expect(wrapper.text().includes('error_connect_water')).toBeTruthy() }) it('should close modal', () => { const wrapper = mount( - <Provider store={store}> - <PartnerIssueModal - open={true} - handleCloseClick={mockHandleClose} - issuedFluid={mockInitialEcolyoState.global.fluidStatus[0]} - /> - </Provider> + <PartnerIssueModal + open={true} + handleCloseClick={mockHandleClose} + issuedFluid={mockInitialEcolyoState.global.fluidStatus[0]} + /> ) wrapper.find(Button).simulate('click') expect(mockHandleClose).toHaveBeenCalled() @@ -75,13 +61,11 @@ describe('PartnerIssueModal component', () => { it('should not be rendered', () => { const wrapper = mount( - <Provider store={store}> - <PartnerIssueModal - open={false} - handleCloseClick={mockHandleClose} - issuedFluid={mockInitialEcolyoState.global.fluidStatus[0]} - /> - </Provider> + <PartnerIssueModal + open={false} + handleCloseClick={mockHandleClose} + issuedFluid={mockInitialEcolyoState.global.fluidStatus[0]} + /> ) expect(wrapper.find('div.partnerIssueModal').exists()).toBeFalsy() }) diff --git a/src/components/PartnerIssue/__snapshots__/PartnerIssueModal.spec.tsx.snap b/src/components/PartnerIssue/__snapshots__/PartnerIssueModal.spec.tsx.snap index 1b915b824..ebba481d4 100644 --- a/src/components/PartnerIssue/__snapshots__/PartnerIssueModal.spec.tsx.snap +++ b/src/components/PartnerIssue/__snapshots__/PartnerIssueModal.spec.tsx.snap @@ -1,52 +1,70 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP exports[`PartnerIssueModal component should render correctly 1`] = ` -<Provider - store={ +<PartnerIssueModal + handleCloseClick={[MockFunction]} + issuedFluid={ Object { - "clearActions": [Function], - "dispatch": [Function], - "getActions": [Function], - "getState": [Function], - "replaceReducer": [Function], - "subscribe": [Function], + "connection": Object { + "account": null, + "isUpdating": false, + "konnector": null, + "konnectorConfig": Object { + "activation": "", + "name": "", + "oauth": false, + "siteLink": "", + "slug": "enedissgegrandlyon", + }, + "shouldLaunchKonnector": false, + "trigger": null, + "triggerState": null, + }, + "firstDataDate": null, + "fluidType": 0, + "lastDataDate": null, + "maintenance": false, + "status": 0, } } + open={true} > - <PartnerIssueModal - handleCloseClick={[MockFunction]} - issuedFluid={ + <WithStyles(ForwardRef(Dialog)) + aria-labelledby="accessibility-title" + classes={ Object { - "connection": Object { - "account": null, - "isUpdating": false, - "konnector": null, - "konnectorConfig": Object { - "activation": "", - "name": "", - "oauth": false, - "siteLink": "", - "slug": "enedissgegrandlyon", - }, - "shouldLaunchKonnector": false, - "trigger": null, - "triggerState": null, - }, - "firstDataDate": null, - "fluidType": 0, - "lastDataDate": null, - "maintenance": false, - "status": 0, + "paper": "modal-paper", + "root": "modal-root", } } + disableEscapeKeyDown={true} + onClose={[Function]} open={true} + style={ + Object { + "zIndex": 1500, + } + } > - <WithStyles(ForwardRef(Dialog)) + <ForwardRef(Dialog) aria-labelledby="accessibility-title" classes={ Object { - "paper": "modal-paper", - "root": "modal-root", + "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", } } disableEscapeKeyDown={true} @@ -58,500 +76,486 @@ exports[`PartnerIssueModal component should render correctly 1`] = ` } } > - <ForwardRef(Dialog) - aria-labelledby="accessibility-title" - classes={ + <ForwardRef(Modal) + BackdropComponent={ 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", - } - } - disableEscapeKeyDown={true} - onClose={[Function]} - open={true} - style={ - Object { - "zIndex": 1500, - } - } - > - <ForwardRef(Modal) - BackdropComponent={ - Object { + "$$typeof": Symbol(react.forward_ref), + "Naked": 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], + "propTypes": Object { + "children": [Function], + "className": [Function], + "classes": [Function], + "invisible": [Function], + "open": [Function], + "transitionDuration": [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, - }, + "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, }, - "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)", + "width": [Function], + }, + "direction": "ltr", + "mixins": Object { + "gutters": [Function], + "toolbar": Object { + "@media (min-width:0px) and (orientation: landscape)": Object { + "minHeight": 48, }, - "tonalOffset": 0.2, - "type": "light", - "warning": Object { - "contrastText": "rgba(0, 0, 0, 0.87)", - "dark": "#f57c00", - "light": "#ffb74d", - "main": "#ff9800", + "@media (min-width:600px)": Object { + "minHeight": 64, }, + "minHeight": 56, }, - "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, + }, + "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, }, - "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], + "augmentColor": [Function], + "background": Object { + "default": "#fafafa", + "paper": "#fff", }, - "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, - }, + "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": 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, - }, + "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, }, - "zIndex": Object { - "appBar": 1100, - "drawer": 1200, - "mobileStepper": 1000, - "modal": 1300, - "snackbar": 1400, - "speedDial": 1050, - "tooltip": 1500, + "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, }, }, - "name": "MuiBackdrop", - }, - "propTypes": Object { - "classes": [Function], - "innerRef": [Function], + "zIndex": Object { + "appBar": 1100, + "drawer": 1200, + "mobileStepper": 1000, + "modal": 1300, + "snackbar": 1400, + "speedDial": 1050, + "tooltip": 1500, + }, }, - "render": [Function], - "useStyles": [Function], - } + "name": "MuiBackdrop", + }, + "propTypes": Object { + "classes": [Function], + "innerRef": [Function], + }, + "render": [Function], + "useStyles": [Function], } - BackdropProps={ - Object { - "transitionDuration": Object { - "enter": 225, - "exit": 195, - }, - } + } + BackdropProps={ + Object { + "transitionDuration": Object { + "enter": 225, + "exit": 195, + }, } - className="MuiDialog-root modal-root" - closeAfterTransition={true} - disableEscapeKeyDown={true} - onClose={[Function]} - open={true} - style={ - Object { - "zIndex": 1500, - } + } + className="MuiDialog-root modal-root" + closeAfterTransition={true} + disableEscapeKeyDown={true} + onClose={[Function]} + open={true} + style={ + Object { + "zIndex": 1500, } + } + > + <ForwardRef(Portal) + disablePortal={false} > - <ForwardRef(Portal) - disablePortal={false} - > - <Portal - containerInfo={ - <body - style="padding-right: 0px; overflow: hidden;" + <Portal + containerInfo={ + <body + style="padding-right: 0px; overflow: hidden;" + > + <div + class="MuiDialog-root modal-root" + role="presentation" + style="position: fixed; z-index: 1500; right: 0px; bottom: 0px; top: 0px; left: 0px;" > <div - class="MuiDialog-root modal-root" - role="presentation" - style="position: fixed; z-index: 1500; right: 0px; bottom: 0px; top: 0px; left: 0px;" + 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-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" + aria-labelledby="accessibility-title" + class="MuiPaper-root MuiDialog-paper modal-paper MuiDialog-paperScrollPaper MuiDialog-paperWidthSm MuiPaper-elevation24 MuiPaper-rounded" + role="dialog" > <div - aria-labelledby="accessibility-title" - class="MuiPaper-root MuiDialog-paper modal-paper MuiDialog-paperScrollPaper MuiDialog-paperWidthSm MuiPaper-elevation24 MuiPaper-rounded" - role="dialog" + id="accessibility-title" + > + feedback.accessibility.window_title + </div> + <button + aria-label="feedback.accessibility.button_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="partnerIssueModal" > + <svg + aria-hidden="true" + class="warn-icon styles__icon___23x3R" + height="40" + width="40" + > + <use + xlink:href="#test-file-stub" + /> + </svg> + <div + class="partner-issue-title text-20-bold" + > + consumption.partner_issue_modal.title + </div> <div - id="accessibility-title" + class="partner-issue-content text-16-normal" > - feedback.accessibility.window_title + consumption.partner_issue_modal.error_connect_elec + </div> + <br /> + <div> + consumption.partner_issue_modal.additional_text </div> <button - aria-label="feedback.accessibility.button_close" - class="MuiButtonBase-root MuiIconButton-root modal-paper-close-button" + class="MuiButtonBase-root MuiButton-root btn-highlight MuiButton-text" tabindex="0" type="button" > <span - class="MuiIconButton-label" + class="MuiButton-label text-16-bold" > - <svg - class="styles__icon___23x3R" - height="16" - width="16" - > - <use - xlink:href="#test-file-stub" - /> - </svg> + consumption.partner_issue_modal.ok </span> <span class="MuiTouchRipple-root" /> </button> - <div - class="partnerIssueModal" - > - <svg - aria-hidden="true" - class="warn-icon styles__icon___23x3R" - height="40" - width="40" - > - <use - xlink:href="#test-file-stub" - /> - </svg> - <div - class="partner-issue-title text-20-bold" - > - consumption.partner_issue_modal.title - </div> - <div - class="partner-issue-content text-16-normal" - > - consumption.partner_issue_modal.error_connect_elec - </div> - <br /> - <div> - consumption.partner_issue_modal.additional_text - </div> - <button - class="MuiButtonBase-root MuiButton-root btn-highlight MuiButton-text" - tabindex="0" - type="button" - > - <span - class="MuiButton-label text-16-bold" - > - consumption.partner_issue_modal.ok - </span> - <span - class="MuiTouchRipple-root" - /> - </button> - </div> </div> </div> - <div - data-test="sentinelEnd" - tabindex="0" - /> </div> - </body> + <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": 1500, + } } > - <div - className="MuiDialog-root modal-root" - onKeyDown={[Function]} - role="presentation" - style={ + <WithStyles(ForwardRef(Backdrop)) + onClick={[Function]} + open={true} + transitionDuration={ Object { - "bottom": 0, - "left": 0, - "position": "fixed", - "right": 0, - "top": 0, - "zIndex": 1500, + "enter": 225, + "exit": 195, } } > - <WithStyles(ForwardRef(Backdrop)) + <ForwardRef(Backdrop) + classes={ + Object { + "invisible": "MuiBackdrop-invisible", + "root": "MuiBackdrop-root", + } + } onClick={[Function]} open={true} transitionDuration={ @@ -561,85 +565,90 @@ exports[`PartnerIssueModal component should render correctly 1`] = ` } } > - <ForwardRef(Backdrop) - classes={ - Object { - "invisible": "MuiBackdrop-invisible", - "root": "MuiBackdrop-root", - } - } + <ForwardRef(Fade) + in={true} onClick={[Function]} - open={true} - transitionDuration={ + timeout={ Object { "enter": 225, "exit": 195, } } > - <ForwardRef(Fade) + <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} > - <Transition - appear={true} - enter={true} - exit={true} - in={true} - mountOnEnter={false} + <div + aria-hidden={true} + className="MuiBackdrop-root" onClick={[Function]} - onEnter={[Function]} - onEntered={[Function]} - onEntering={[Function]} - onExit={[Function]} - onExited={[Function]} - onExiting={[Function]} - timeout={ + style={ Object { - "enter": 225, - "exit": 195, + "opacity": 1, + "visibility": undefined, } } - 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} + /> + </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, + } + } > - <div - data-test="sentinelStart" - tabIndex={0} - /> - <ForwardRef(Fade) + <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={ @@ -648,131 +657,313 @@ exports[`PartnerIssueModal component should render correctly 1`] = ` "exit": 195, } } + unmountOnExit={false} > - <Transition - appear={true} - enter={true} - exit={true} - in={true} - mountOnEnter={false} - onEnter={[Function]} - onEntered={[Function]} - onEntering={[Function]} - onExit={[Function]} - onExited={[Function]} - onExiting={[Function]} + <div + className="MuiDialog-container MuiDialog-scrollPaper" + onMouseDown={[Function]} + onMouseUp={[Function]} role="none presentation" - tabIndex="-1" - timeout={ + style={ Object { - "enter": 225, - "exit": 195, + "opacity": 1, + "visibility": undefined, } } - unmountOnExit={false} + tabIndex="-1" > - <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" > - <WithStyles(ForwardRef(Paper)) + <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" > - <ForwardRef(Paper) + <div 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} + className="MuiPaper-root MuiDialog-paper modal-paper MuiDialog-paperScrollPaper MuiDialog-paperWidthSm MuiPaper-elevation24 MuiPaper-rounded" role="dialog" > <div - aria-labelledby="accessibility-title" - className="MuiPaper-root MuiDialog-paper modal-paper MuiDialog-paperScrollPaper MuiDialog-paperWidthSm MuiPaper-elevation24 MuiPaper-rounded" - role="dialog" + id="accessibility-title" > - <div - id="accessibility-title" - > - feedback.accessibility.window_title - </div> - <WithStyles(ForwardRef(IconButton)) + feedback.accessibility.window_title + </div> + <WithStyles(ForwardRef(IconButton)) + aria-label="feedback.accessibility.button_close" + className="modal-paper-close-button" + onClick={[Function]} + > + <ForwardRef(IconButton) aria-label="feedback.accessibility.button_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={[Function]} > - <ForwardRef(IconButton) + <WithStyles(ForwardRef(ButtonBase)) aria-label="feedback.accessibility.button_close" - className="modal-paper-close-button" + centerRipple={true} + className="MuiIconButton-root modal-paper-close-button" + disabled={false} + focusRipple={true} + onClick={[Function]} + > + <ForwardRef(ButtonBase) + aria-label="feedback.accessibility.button_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={[Function]} + > + <button + aria-label="feedback.accessibility.button_close" + className="MuiButtonBase-root MuiIconButton-root modal-paper-close-button" + 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 + className="partnerIssueModal" + > + <StyledIcon + className="warn-icon" + icon="test-file-stub" + size={40} + > + <Icon + aria-hidden={true} + className="warn-icon" + icon="test-file-stub" + size={40} + spin={false} + > + <Component + aria-hidden={true} + className="warn-icon styles__icon___23x3R" + height={40} + style={Object {}} + width={40} + > + <svg + aria-hidden={true} + className="warn-icon styles__icon___23x3R" + height={40} + style={Object {}} + width={40} + > + <use + xlinkHref="#test-file-stub" + /> + </svg> + </Component> + </Icon> + </StyledIcon> + <div + className="partner-issue-title text-20-bold" + > + consumption.partner_issue_modal.title + </div> + <div + className="partner-issue-content text-16-normal" + dangerouslySetInnerHTML={ + Object { + "__html": "consumption.partner_issue_modal.error_connect_elec", + } + } + /> + <br /> + <div + dangerouslySetInnerHTML={ + Object { + "__html": "consumption.partner_issue_modal.additional_text", + } + } + /> + <WithStyles(ForwardRef(Button)) + classes={ + Object { + "label": "text-16-bold", + "root": "btn-highlight", + } + } + onClick={[Function]} + > + <ForwardRef(Button) classes={ Object { - "colorInherit": "MuiIconButton-colorInherit", - "colorPrimary": "MuiIconButton-colorPrimary", - "colorSecondary": "MuiIconButton-colorSecondary", + "colorInherit": "MuiButton-colorInherit", + "contained": "MuiButton-contained", + "containedPrimary": "MuiButton-containedPrimary", + "containedSecondary": "MuiButton-containedSecondary", + "containedSizeLarge": "MuiButton-containedSizeLarge", + "containedSizeSmall": "MuiButton-containedSizeSmall", + "disableElevation": "MuiButton-disableElevation", "disabled": "Mui-disabled", - "edgeEnd": "MuiIconButton-edgeEnd", - "edgeStart": "MuiIconButton-edgeStart", - "label": "MuiIconButton-label", - "root": "MuiIconButton-root", - "sizeSmall": "MuiIconButton-sizeSmall", + "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={[Function]} > <WithStyles(ForwardRef(ButtonBase)) - aria-label="feedback.accessibility.button_close" - centerRipple={true} - className="MuiIconButton-root modal-paper-close-button" + className="MuiButton-root btn-highlight MuiButton-text" + component="button" disabled={false} focusRipple={true} + focusVisibleClassName="Mui-focusVisible" onClick={[Function]} + type="button" > <ForwardRef(ButtonBase) - aria-label="feedback.accessibility.button_close" - centerRipple={true} - className="MuiIconButton-root modal-paper-close-button" + className="MuiButton-root btn-highlight MuiButton-text" classes={ Object { "disabled": "Mui-disabled", @@ -780,13 +971,15 @@ exports[`PartnerIssueModal component should render correctly 1`] = ` "root": "MuiButtonBase-root", } } + component="button" disabled={false} focusRipple={true} + focusVisibleClassName="Mui-focusVisible" onClick={[Function]} + type="button" > <button - aria-label="feedback.accessibility.button_close" - className="MuiButtonBase-root MuiIconButton-root modal-paper-close-button" + className="MuiButtonBase-root MuiButton-root btn-highlight MuiButton-text" disabled={false} onBlur={[Function]} onClick={[Function]} @@ -804,37 +997,15 @@ exports[`PartnerIssueModal component should render correctly 1`] = ` type="button" > <span - className="MuiIconButton-label" + className="MuiButton-label text-16-bold" > - <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> + consumption.partner_issue_modal.ok </span> <WithStyles(memo) - center={true} + center={false} > <ForwardRef(TouchRipple) - center={true} + center={false} classes={ Object { "child": "MuiTouchRipple-child", @@ -861,209 +1032,25 @@ exports[`PartnerIssueModal component should render correctly 1`] = ` </button> </ForwardRef(ButtonBase)> </WithStyles(ForwardRef(ButtonBase))> - </ForwardRef(IconButton)> - </WithStyles(ForwardRef(IconButton))> - <div - className="partnerIssueModal" - > - <StyledIcon - className="warn-icon" - icon="test-file-stub" - size={40} - > - <Icon - aria-hidden={true} - className="warn-icon" - icon="test-file-stub" - size={40} - spin={false} - > - <Component - aria-hidden={true} - className="warn-icon styles__icon___23x3R" - height={40} - style={Object {}} - width={40} - > - <svg - aria-hidden={true} - className="warn-icon styles__icon___23x3R" - height={40} - style={Object {}} - width={40} - > - <use - xlinkHref="#test-file-stub" - /> - </svg> - </Component> - </Icon> - </StyledIcon> - <div - className="partner-issue-title text-20-bold" - > - consumption.partner_issue_modal.title - </div> - <div - className="partner-issue-content text-16-normal" - dangerouslySetInnerHTML={ - Object { - "__html": "consumption.partner_issue_modal.error_connect_elec", - } - } - /> - <br /> - <div - dangerouslySetInnerHTML={ - Object { - "__html": "consumption.partner_issue_modal.additional_text", - } - } - /> - <WithStyles(ForwardRef(Button)) - classes={ - Object { - "label": "text-16-bold", - "root": "btn-highlight", - } - } - 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-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={[Function]} - > - <WithStyles(ForwardRef(ButtonBase)) - className="MuiButton-root btn-highlight MuiButton-text" - component="button" - disabled={false} - focusRipple={true} - focusVisibleClassName="Mui-focusVisible" - onClick={[Function]} - type="button" - > - <ForwardRef(ButtonBase) - 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={[Function]} - type="button" - > - <button - className="MuiButtonBase-root MuiButton-root btn-highlight 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-bold" - > - consumption.partner_issue_modal.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> + </ForwardRef(Button)> + </WithStyles(ForwardRef(Button))> </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))> - </PartnerIssueModal> -</Provider> + </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))> +</PartnerIssueModal> `; diff --git a/src/components/Quiz/QuizBegin.spec.tsx b/src/components/Quiz/QuizBegin.spec.tsx index 153207462..7fccfb0b0 100644 --- a/src/components/Quiz/QuizBegin.spec.tsx +++ b/src/components/Quiz/QuizBegin.spec.tsx @@ -4,8 +4,7 @@ import { UserChallengeUpdateFlag } from 'enum/userChallenge.enum' import { mount } from 'enzyme' import React from 'react' import { Provider } from 'react-redux' -import configureStore from 'redux-mock-store' -import { globalStateData } from '../../../tests/__mocks__/globalStateData.mock' +import { createMockEcolyoStore } from '../../../tests/__mocks__/store' import { userChallengeData } from '../../../tests/__mocks__/userChallengeData.mock' import QuizBegin from './QuizBegin' @@ -28,15 +27,9 @@ jest.mock('services/challenge.service', () => { }) }) -const mockStore = configureStore([]) - describe('QuizBegin component', () => { it('should be rendered correctly', () => { - const store = mockStore({ - ecolyo: { - global: globalStateData, - }, - }) + const store = createMockEcolyoStore() const wrapper = mount( <Provider store={store}> <QuizBegin userChallenge={userChallengeData[0]} /> diff --git a/src/components/Quiz/QuizCustomQuestionContent.spec.tsx b/src/components/Quiz/QuizCustomQuestionContent.spec.tsx index 92053cea0..5a616af2c 100644 --- a/src/components/Quiz/QuizCustomQuestionContent.spec.tsx +++ b/src/components/Quiz/QuizCustomQuestionContent.spec.tsx @@ -3,10 +3,8 @@ import Loader from 'components/Loader/Loader' import { mount } from 'enzyme' import React from 'react' 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 { questionEntity } from '../../../tests/__mocks__/quizData.mock' +import { createMockEcolyoStore } from '../../../tests/__mocks__/store' import { userChallengeData } from '../../../tests/__mocks__/userChallengeData.mock' import QuizCustomQuestionContent from './QuizCustomQuestionContent' import QuizExplanationModal from './QuizExplanationModal' @@ -49,16 +47,9 @@ jest.mock('services/challenge.service', () => { }) }) -const mockStore = configureStore([]) - describe('QuizCustomQuestionContent component', () => { + const store = createMockEcolyoStore() it('should be rendered correctly', () => { - const store = mockStore({ - ecolyo: { - global: globalStateData, - challenge: challengeStateData, - }, - }) const wrapper = mount( <Provider store={store}> <QuizCustomQuestionContent @@ -79,12 +70,6 @@ describe('QuizCustomQuestionContent component', () => { expect(wrapper.find('input')).toHaveLength(3) }) it('should be rendered correctly with loader', () => { - const store = mockStore({ - ecolyo: { - global: globalStateData, - challenge: challengeStateData, - }, - }) const wrapper = mount( <Provider store={store}> <QuizCustomQuestionContent @@ -98,12 +83,6 @@ describe('QuizCustomQuestionContent component', () => { expect(wrapper.find(Loader).exists()).toBeTruthy() }) it('should display QuizExplanationModal when click on Button', () => { - const store = mockStore({ - ecolyo: { - global: globalStateData, - challenge: challengeStateData, - }, - }) const wrapper = mount( <Provider store={store}> <QuizCustomQuestionContent diff --git a/src/components/Quiz/QuizFinish.spec.tsx b/src/components/Quiz/QuizFinish.spec.tsx index 10b2b5ba9..4556bc1c7 100644 --- a/src/components/Quiz/QuizFinish.spec.tsx +++ b/src/components/Quiz/QuizFinish.spec.tsx @@ -4,8 +4,7 @@ import { UserChallengeUpdateFlag } from 'enum/userChallenge.enum' import { mount } from 'enzyme' import React from 'react' import { Provider } from 'react-redux' -import configureStore from 'redux-mock-store' -import { globalStateData } from '../../../tests/__mocks__/globalStateData.mock' +import { createMockEcolyoStore } from '../../../tests/__mocks__/store' import { waitForComponentToPaint } from '../../../tests/__mocks__/testUtils' import { userChallengeData } from '../../../tests/__mocks__/userChallengeData.mock' import QuizFinish from './QuizFinish' @@ -35,15 +34,9 @@ jest.mock('react-router-dom', () => ({ useNavigate: () => mockedNavigate, })) -const mockStore = configureStore([]) - describe('QuizFinish', () => { it('should be rendered correctly', async () => { - const store = mockStore({ - ecolyo: { - global: globalStateData, - }, - }) + const store = createMockEcolyoStore() const wrapper = mount( <Provider store={store}> <QuizFinish userChallenge={userChallengeData[0]} /> diff --git a/src/components/Quiz/QuizQuestionContent.spec.tsx b/src/components/Quiz/QuizQuestionContent.spec.tsx index 326945c96..5e3bbc6d1 100644 --- a/src/components/Quiz/QuizQuestionContent.spec.tsx +++ b/src/components/Quiz/QuizQuestionContent.spec.tsx @@ -2,9 +2,7 @@ import QuizQuestionContent from 'components/Quiz/QuizQuestionContent' import { mount } from 'enzyme' import React from 'react' 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 { createMockEcolyoStore } from '../../../tests/__mocks__/store' import { userChallengeData } from '../../../tests/__mocks__/userChallengeData.mock' jest.mock('cozy-ui/transpiled/react/I18n', () => { @@ -41,16 +39,9 @@ jest.mock('services/challenge.service', () => { }) }) -const mockStore = configureStore([]) - describe('QuizQuestionContent component', () => { + const store = createMockEcolyoStore() it('should be rendered correctly', () => { - const store = mockStore({ - ecolyo: { - global: globalStateData, - challenge: challengeStateData, - }, - }) const wrapper = mount( <Provider store={store}> <QuizQuestionContent @@ -66,12 +57,6 @@ describe('QuizQuestionContent component', () => { expect(wrapper.find('input')).toHaveLength(3) }) it('should redirect to challenge on click on btn-back', () => { - const store = mockStore({ - ecolyo: { - global: globalStateData, - challenge: challengeStateData, - }, - }) const wrapper = mount( <Provider store={store}> <QuizQuestionContent diff --git a/src/components/Quiz/QuizView.spec.tsx b/src/components/Quiz/QuizView.spec.tsx index 241cd54a9..237ceadd5 100644 --- a/src/components/Quiz/QuizView.spec.tsx +++ b/src/components/Quiz/QuizView.spec.tsx @@ -1,20 +1,42 @@ import QuizView from 'components/Quiz/QuizView' import { UserQuizState } from 'enum/userQuiz.enum' -import { shallow } from 'enzyme' +import { mount } from 'enzyme' +import { ChallengeState } from 'models' import React from 'react' import * as reactRedux from 'react-redux' +import { Provider } from 'react-redux' import { challengeStateData } from '../../../tests/__mocks__/challengeStateData.mock' +import { + createMockEcolyoStore, + mockGlobalState, +} from '../../../tests/__mocks__/store' import { userChallengeData } from '../../../tests/__mocks__/userChallengeData.mock' import QuizBegin from './QuizBegin' import QuizFinish from './QuizFinish' import QuizQuestion from './QuizQuestion' +jest.mock('cozy-ui/transpiled/react/I18n', () => { + return { + useI18n: jest.fn(() => { + return { + t: (str: string) => str, + } + }), + } +}) + +jest.mock('react-router-dom', () => ({ + ...jest.requireActual('react-router-dom'), + useNavigate: () => jest.fn(), +})) + jest.mock('components/Header/CozyBar', () => 'mock-cozybar') jest.mock('components/Header/Header', () => 'mock-header') jest.mock('components/Content/Content', () => 'mock-content') const mockUseSelector = jest.spyOn(reactRedux, 'useSelector') describe('QuizView component', () => { + const store = createMockEcolyoStore() it('should be rendered with QuizBegin component when quiz state = unlocked', () => { const updatedUserChallenge = { ...userChallengeData[0], @@ -24,8 +46,15 @@ describe('QuizView component', () => { ...challengeStateData, currentChallenge: updatedUserChallenge, } - mockUseSelector.mockReturnValue(updatedChallengeState) - const wrapper = shallow(<QuizView />) + const store = createMockEcolyoStore({ + challenge: updatedChallengeState, + global: mockGlobalState, + }) + const wrapper = mount( + <Provider store={store}> + <QuizView /> + </Provider> + ) expect(wrapper.find(QuizBegin).exists()).toBeTruthy() }) @@ -38,8 +67,15 @@ describe('QuizView component', () => { ...challengeStateData, currentChallenge: updatedUserChallenge, } - mockUseSelector.mockReturnValue(updatedChallengeState) - const wrapper = shallow(<QuizView />) + const store = createMockEcolyoStore({ + challenge: updatedChallengeState, + global: mockGlobalState, + }) + const wrapper = mount( + <Provider store={store}> + <QuizView /> + </Provider> + ) expect(wrapper.find(QuizQuestion).exists()).toBeTruthy() }) @@ -52,22 +88,35 @@ describe('QuizView component', () => { ...challengeStateData, currentChallenge: updatedUserChallenge, } - mockUseSelector.mockReturnValue(updatedChallengeState) - const wrapper = shallow(<QuizView />) + const store = createMockEcolyoStore({ + challenge: updatedChallengeState, + global: mockGlobalState, + }) + const wrapper = mount( + <Provider store={store}> + <QuizView /> + </Provider> + ) expect(wrapper.find(QuizFinish).exists()).toBeTruthy() }) it('should be rendered with QuizBegin component when quiz state = null', () => { - const updatedUserChallenge = { - ...userChallengeData[0], - quiz: { ...userChallengeData[0].quiz, state: null }, - } - const updatedChallengeState = { + const updatedChallengeState: ChallengeState = { ...challengeStateData, - currentChallenge: updatedUserChallenge, + currentChallenge: { + ...userChallengeData[0], + quiz: { ...userChallengeData[0].quiz, state: UserQuizState.UNLOCKED }, + }, } - mockUseSelector.mockReturnValue(updatedChallengeState) - const wrapper = shallow(<QuizView />) + const store = createMockEcolyoStore({ + challenge: updatedChallengeState, + global: mockGlobalState, + }) + const wrapper = mount( + <Provider store={store}> + <QuizView /> + </Provider> + ) expect(wrapper.find(QuizBegin).exists()).toBeTruthy() }) }) diff --git a/src/components/Splash/SplashRoot.spec.tsx b/src/components/Splash/SplashRoot.spec.tsx index e54bcec91..d5da9a254 100644 --- a/src/components/Splash/SplashRoot.spec.tsx +++ b/src/components/Splash/SplashRoot.spec.tsx @@ -2,7 +2,8 @@ import { mount } from 'enzyme' import toJson from 'enzyme-to-json' import React from 'react' import * as reactRedux from 'react-redux' -import { userChallengeExplo1OnGoing } from '../../../tests/__mocks__/userChallengeData.mock' +import { Provider } from 'react-redux' +import { createMockEcolyoStore } from '../../../tests/__mocks__/store' import SplashRoot from './SplashRoot' jest.mock('@sentry/react', () => ({ @@ -20,14 +21,19 @@ jest.mock('cozy-ui/transpiled/react/I18n', () => { }), } }) -const mockUseSelector = jest.spyOn(reactRedux, 'useSelector') const mockUseDispatch = jest.spyOn(reactRedux, 'useDispatch') describe('SplashRoot component', () => { - it('should be rendered correctly', () => { - mockUseSelector.mockReturnValue(userChallengeExplo1OnGoing) + it('should be rendered correctly', async () => { + const store = createMockEcolyoStore() mockUseDispatch.mockReturnValue(jest.fn()) - const component = mount(<SplashRoot>children</SplashRoot>) + const component = mount( + <Provider store={store}> + <SplashRoot>children</SplashRoot> + </Provider> + ) + // TODO we should waitForComponent + // await waitForComponentToPaint(component) expect(toJson(component)).toMatchSnapshot() }) }) diff --git a/src/components/Splash/__snapshots__/SplashRoot.spec.tsx.snap b/src/components/Splash/__snapshots__/SplashRoot.spec.tsx.snap index 143c5d080..16bb80e53 100644 --- a/src/components/Splash/__snapshots__/SplashRoot.spec.tsx.snap +++ b/src/components/Splash/__snapshots__/SplashRoot.spec.tsx.snap @@ -1,63 +1,76 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP exports[`SplashRoot component should be rendered correctly 1`] = ` -<SplashRoot> - <div - className="splash-root" - style={ - Object { - "transitionDuration": "1s", - } +<Provider + store={ + Object { + "clearActions": [Function], + "dispatch": [Function], + "getActions": [Function], + "getState": [Function], + "replaceReducer": [Function], + "subscribe": [Function], } - > - <SplashScreen - initStep={1} + } +> + <SplashRoot> + <div + className="splash-root" + style={ + Object { + "transitionDuration": "1s", + } + } > - <div - className="splash-content" + <SplashScreen + initStep={1} > <div - className="splash-loader" + className="splash-content" > - <img - alt="Chargement" - src="test-file-stub" - /> - <span> - Ecolyo - </span> <div - className="splash-progress" + className="splash-loader" > + <img + alt="Chargement" + src="test-file-stub" + /> + <span> + Ecolyo + </span> <div - className="splash-progress-bar-container" + className="splash-progress" > <div - className="splash-progress-bar-content" - style={ - Object { - "width": "17%", + className="splash-progress-bar-container" + > + <div + className="splash-progress-bar-content" + style={ + Object { + "width": "17%", + } } - } - /> + /> + </div> </div> </div> + <div + className="step-label text-18-normal" + > + splashscreen.step.1 + </div> + <div + className="splash-logos-container" + > + <img + alt="ensemble de logos" + src="test-file-stub" + /> + </div> </div> - <div - className="step-label text-18-normal" - > - splashscreen.step.1 - </div> - <div - className="splash-logos-container" - > - <img - alt="ensemble de logos" - src="test-file-stub" - /> - </div> - </div> - </SplashScreen> - </div> -</SplashRoot> + </SplashScreen> + </div> + </SplashRoot> +</Provider> `; diff --git a/src/components/Terms/DataShareConsentContent.spec.tsx b/src/components/Terms/DataShareConsentContent.spec.tsx index 43865afb1..0c361b53b 100644 --- a/src/components/Terms/DataShareConsentContent.spec.tsx +++ b/src/components/Terms/DataShareConsentContent.spec.tsx @@ -2,8 +2,7 @@ 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 { profileData } from '../../../tests/__mocks__/profileData.mock' +import { createMockEcolyoStore } from '../../../tests/__mocks__/store' import DataShareConsentContent from './DataShareConsentContent' jest.mock('cozy-ui/transpiled/react/I18n', () => { @@ -15,14 +14,11 @@ jest.mock('cozy-ui/transpiled/react/I18n', () => { }), } }) -const mockStore = configureStore([]) describe('DataShareConsentContent component', () => { it('should be rendered correctly with first connexion text', () => { - const store = mockStore({ - ecolyo: { - profile: profileData, - }, + const store = createMockEcolyoStore({ + profile: { isFirstConnection: true }, }) const component = mount( <Provider store={store}> @@ -32,11 +28,8 @@ describe('DataShareConsentContent component', () => { expect(toJson(component)).toMatchSnapshot() }) it('should be rendered correctly without first connexion text', () => { - profileData.isFirstConnection = false - const store = mockStore({ - ecolyo: { - profile: profileData, - }, + const store = createMockEcolyoStore({ + profile: { isFirstConnection: false }, }) const component = mount( <Provider store={store}> diff --git a/src/components/Terms/TermsView.spec.tsx b/src/components/Terms/TermsView.spec.tsx index 377c3e49c..93e84f3bf 100644 --- a/src/components/Terms/TermsView.spec.tsx +++ b/src/components/Terms/TermsView.spec.tsx @@ -4,7 +4,6 @@ import toJson from 'enzyme-to-json' import React from 'react' import * as reactRedux from 'react-redux' import { Provider } from 'react-redux' -import { default as configureStore } from 'redux-mock-store' import { createMockEcolyoStore } from '../../../tests/__mocks__/store' import { mockUpToDateTerm } from '../../../tests/__mocks__/termsData.mock' import TermsView from './TermsView' @@ -35,7 +34,6 @@ jest.mock('react-router-dom', () => ({ useNavigate: () => mockedNavigate, })) -const mockStore = configureStore([]) const mockUseDispatch = jest.spyOn(reactRedux, 'useDispatch') const mockUpdateProfile = jest.fn() diff --git a/src/components/Terms/TermsView.tsx b/src/components/Terms/TermsView.tsx index 113ec79c8..58e2860a0 100644 --- a/src/components/Terms/TermsView.tsx +++ b/src/components/Terms/TermsView.tsx @@ -19,6 +19,7 @@ const TermsView = () => { const { t } = useI18n() const client = useClient() const dispatch = useDispatch<Dispatch<AppActionsTypes>>() + const { termsStatus } = useSelector((state: AppStore) => state.ecolyo.global) const navigate = useNavigate() const [GCUValidation, setGCUValidation] = useState<boolean>(false) const [dataConsentValidation, setDataConsentValidation] = @@ -26,7 +27,6 @@ const TermsView = () => { const [openCGUModal, setOpenCGUModal] = useState<boolean>(false) const [openLegalNoticeModal, setOpenLegalNoticeModal] = useState<boolean>(false) - const { termsStatus } = useSelector((state: AppStore) => state.ecolyo.global) const toggleCGUModal = () => { setOpenCGUModal(prev => !prev) diff --git a/src/components/TimeStepSelector/TimeStepSelector.spec.tsx b/src/components/TimeStepSelector/TimeStepSelector.spec.tsx index 005f1fd3b..d22541d4a 100644 --- a/src/components/TimeStepSelector/TimeStepSelector.spec.tsx +++ b/src/components/TimeStepSelector/TimeStepSelector.spec.tsx @@ -33,20 +33,20 @@ const setCurrentIndexSpy = jest.spyOn(chartActions, 'setCurrentIndex') const setSelectedDateSpy = jest.spyOn(chartActions, 'setSelectedDate') describe('TimeStepSelector component', () => { - const store = createMockEcolyoStore() beforeEach(() => { - store.clearActions() useSelectorSpy.mockClear() useDispatchSpy.mockClear() setCurrentTimeStepSpy.mockClear() }) it('should render component properly with 4 timesteps', async () => { - useSelectorSpy.mockReturnValue({ - currentTimeStep: TimeStep.DAY, - selectedDate: DateTime.local().setZone('utc', { - keepLocalTime: true, - }), + const store = createMockEcolyoStore({ + chart: { + currentTimeStep: TimeStep.DAY, + selectedDate: DateTime.local().setZone('utc', { + keepLocalTime: true, + }), + }, }) const wrapper = mount( <Provider store={store}> @@ -60,11 +60,13 @@ describe('TimeStepSelector component', () => { }) it('should render component properly with 5 timesteps', () => { - useSelectorSpy.mockReturnValue({ - currentTimeStep: TimeStep.DAY, - selectedDate: DateTime.local().setZone('utc', { - keepLocalTime: true, - }), + const store = createMockEcolyoStore({ + chart: { + currentTimeStep: TimeStep.DAY, + selectedDate: DateTime.local().setZone('utc', { + keepLocalTime: true, + }), + }, }) const wrapper = mount( <Provider store={store}> @@ -76,11 +78,13 @@ describe('TimeStepSelector component', () => { }) it('should define next TimeStep and dispatch it', () => { - useSelectorSpy.mockReturnValue({ - currentTimeStep: TimeStep.YEAR, - selectedDate: DateTime.local().setZone('utc', { - keepLocalTime: true, - }), + const store = createMockEcolyoStore({ + chart: { + currentTimeStep: TimeStep.YEAR, + selectedDate: DateTime.local().setZone('utc', { + keepLocalTime: true, + }), + }, }) const wrapper = mount( <Provider store={store}> @@ -93,11 +97,13 @@ describe('TimeStepSelector component', () => { expect(setCurrentIndexSpy).toBeCalledTimes(1) }) it('should go to todays day with timestep week', () => { - useSelectorSpy.mockReturnValue({ - currentTimeStep: TimeStep.YEAR, - selectedDate: DateTime.local().setZone('utc', { - keepLocalTime: true, - }), + const store = createMockEcolyoStore({ + chart: { + currentTimeStep: TimeStep.YEAR, + selectedDate: DateTime.local().setZone('utc', { + keepLocalTime: true, + }), + }, }) const wrapper = mount( <Provider store={store}> diff --git a/src/components/TotalConsumption/TotalConsumption.spec.tsx b/src/components/TotalConsumption/TotalConsumption.spec.tsx index 6bc327a26..44d7cbb3e 100644 --- a/src/components/TotalConsumption/TotalConsumption.spec.tsx +++ b/src/components/TotalConsumption/TotalConsumption.spec.tsx @@ -3,9 +3,11 @@ import { TimeStep } from 'enum/timeStep.enum' import { mount } from 'enzyme' import React from 'react' 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 { + createMockEcolyoStore, + mockChartState, +} from '../../../tests/__mocks__/store' import { waitForComponentToPaint } from '../../../tests/__mocks__/testUtils' import TotalConsumption from './TotalConsumption' @@ -19,13 +21,10 @@ jest.mock('cozy-ui/transpiled/react/I18n', () => { } }) -const mockStore = configureStore([]) -const mockChartStore = mockStore({ - ecolyo: { - chart: { - ...mockInitialChartState, - currentDatachart: graphData, - }, +const mockChartStore = createMockEcolyoStore({ + chart: { + ...mockChartState, + currentDatachart: graphData, }, }) @@ -60,14 +59,12 @@ describe('TotalConsumption component', () => { expect(component.find('.euro-value').first().text()).toEqual('130,84') }) it('should format multifluid value AND compared value', async () => { - const store = mockStore({ - ecolyo: { - chart: { - ...mockInitialChartState, - currentDatachart: graphData, - showCompare: true, - currentTimeStep: TimeStep.DAY, - }, + const store = createMockEcolyoStore({ + chart: { + ...mockChartState, + currentDatachart: graphData, + showCompare: true, + currentTimeStep: TimeStep.DAY, }, }) const component = mount( @@ -81,12 +78,7 @@ describe('TotalConsumption component', () => { expect(component.find('.euro-value').at(1).text()).toEqual('110,66') }) it('should display ----- when half an hour electricity data is not activated', async () => { - const store = mockStore({ - ecolyo: { - chart: mockInitialChartState, - currentDatachart: graphData, - }, - }) + const store = createMockEcolyoStore() const component = mount( <Provider store={store}> <TotalConsumption fluidType={FluidType.ELECTRICITY} /> diff --git a/src/components/WelcomeModal/WelcomeModal.spec.tsx b/src/components/WelcomeModal/WelcomeModal.spec.tsx index c6ed7950f..53a16a037 100644 --- a/src/components/WelcomeModal/WelcomeModal.spec.tsx +++ b/src/components/WelcomeModal/WelcomeModal.spec.tsx @@ -3,11 +3,9 @@ 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 thunk from 'redux-thunk' import * as profileActions from 'store/profile/profile.actions' import mockClient from '../../../tests/__mocks__/client' -import { profileData } from '../../../tests/__mocks__/profileData.mock' +import { createMockEcolyoStore } from '../../../tests/__mocks__/store' import WelcomeModal from './WelcomeModal' jest.mock('cozy-ui/transpiled/react/I18n', () => { @@ -63,7 +61,6 @@ jest.mock('mjml-browser', () => { }) jest.mock('services/profile.service') -const mockStore = configureStore([thunk.withExtraArgument({ mockClient })]) const updateProfileSpy = jest.spyOn(profileActions, 'updateProfile') describe('WelcomeModal component', () => { @@ -71,12 +68,8 @@ describe('WelcomeModal component', () => { updateProfileSpy.mockClear() }) + const store = createMockEcolyoStore() it('should be rendered correctly', () => { - const store = mockStore({ - ecolyo: { - profile: profileData, - }, - }) const component = mount( <Provider store={store}> <WelcomeModal open={true} /> @@ -86,11 +79,6 @@ describe('WelcomeModal component', () => { }) it('should not be rendered', () => { - const store = mockStore({ - ecolyo: { - profile: profileData, - }, - }) const component = mount( <Provider store={store}> <WelcomeModal open={false} /> @@ -100,11 +88,6 @@ describe('WelcomeModal component', () => { }) it('should send mail and update profile when user click on the ok button', async () => { - const store = mockStore({ - ecolyo: { - profile: profileData, - }, - }) const component = mount( <Provider store={store}> <WelcomeModal open={true} /> @@ -121,11 +104,6 @@ describe('WelcomeModal component', () => { }) it('should send mail and update profile when modal is closed by user', async () => { - const store = mockStore({ - ecolyo: { - profile: profileData, - }, - }) const component = mount( <Provider store={store}> <WelcomeModal open={true} /> diff --git a/src/migrations/migration.spec.ts b/src/migrations/migration.spec.ts index 1aa4f5185..4de21c9a9 100644 --- a/src/migrations/migration.spec.ts +++ b/src/migrations/migration.spec.ts @@ -3,7 +3,7 @@ import { FLUIDSPRICES_DOCTYPE, PROFILE_DOCTYPE } from 'doctypes' import { FluidPrice, Profile } from 'models' import { Schema } from 'models/schema.models' import mockClient from '../../tests/__mocks__/client' -import { profileData } from '../../tests/__mocks__/profileData.mock' +import { mockProfileState } from '../../tests/__mocks__/store' import { migrate, migrationLog } from './migration' import { MIGRATION_RESULT_COMPLETE, @@ -134,7 +134,7 @@ describe('migration', () => { skip: 0, } const mockQueryResultProfile: QueryResult<Profile[]> = { - data: [profileData], + data: [mockProfileState], bookmark: '', next: false, skip: 0, @@ -177,7 +177,7 @@ describe('migration', () => { skip: 0, } const mockQueryResultProfile: QueryResult<Profile[]> = { - data: [profileData], + data: [mockProfileState], bookmark: '', next: false, skip: 0, diff --git a/src/services/initialization.service.spec.ts b/src/services/initialization.service.spec.ts index e6fdcf338..39cf264a0 100644 --- a/src/services/initialization.service.spec.ts +++ b/src/services/initialization.service.spec.ts @@ -5,7 +5,7 @@ import explorationEntityData from 'db/explorationEntity.json' import quizEntityData from 'db/quizEntity.json' import { FluidType } from 'enum/fluid.enum' import { DateTime } from 'luxon' -import { UserChallenge } from 'models' +import { Profile, UserChallenge } from 'models' import { getActualAnalysisDate } from 'utils/date' import { hashFile } from 'utils/hash' import { allChallengeEntityData } from '../../tests/__mocks__/challengeEntity.mock' @@ -15,8 +15,8 @@ import { allDuelEntity } from '../../tests/__mocks__/duelData.mock' import { allExplorationEntities } from '../../tests/__mocks__/explorationData.mock' import { fluidPrices } from '../../tests/__mocks__/fluidPrice.mock' import { fluidStatusData } from '../../tests/__mocks__/fluidStatusData.mock' -import { profileData } from '../../tests/__mocks__/profileData.mock' import { allQuizEntities } from '../../tests/__mocks__/quizData.mock' +import { mockProfileState } from '../../tests/__mocks__/store' import { mockOutdatedTerm, mockUpToDateTerm, @@ -166,10 +166,10 @@ describe('Initialization service', () => { mockUpdateProfile.mockClear() }) it('should return the profil when existing', async () => { - mockGetProfile.mockResolvedValueOnce(profileData) - mockUpdateProfile.mockResolvedValueOnce(profileData) + mockGetProfile.mockResolvedValueOnce(mockProfileState) + mockUpdateProfile.mockResolvedValueOnce(mockProfileState) await expect(initializationService.initProfile()).resolves.toEqual( - profileData + mockProfileState ) }) it('should create and return the profil when no existing', async () => { @@ -181,9 +181,9 @@ describe('Initialization service', () => { } mockGetProfile.mockResolvedValueOnce(null) mockClient.create.mockResolvedValueOnce(mockQueryResult) - mockUpdateProfile.mockResolvedValueOnce(profileData) + mockUpdateProfile.mockResolvedValueOnce(mockProfileState) await expect(initializationService.initProfile()).resolves.toEqual( - profileData + mockProfileState ) }) it('should throw error when the profile is not created', async () => { @@ -628,35 +628,36 @@ describe('Initialization service', () => { describe('initAnalysis method', () => { it('should return monthlyAnalysisDate and haveSeenLastAnalysis when analysis is up to date', async () => { - const mockProfile = { - ...profileData, + const profile: Profile = { + ...mockProfileState, monthlyAnalysisDate: getActualAnalysisDate(), } await expect( - initializationService.initAnalysis(mockProfile) + initializationService.initAnalysis(profile) ).resolves.toEqual({ monthlyAnalysisDate: getActualAnalysisDate(), - haveSeenLastAnalysis: mockProfile.haveSeenLastAnalysis, + haveSeenLastAnalysis: profile.haveSeenLastAnalysis, }) }) it('should return updated monthlyAnalysisDate and haveSeenLastAnalysis=true when analysis is not up to date and isFirstConnection', async () => { - const mockProfile = { - ...profileData, + const profile: Profile = { + ...mockProfileState, monthlyAnalysisDate: DateTime.fromISO('2000-10-02T00:00:00.000Z', { zone: 'utc', }), haveSeenLastAnalysis: true, + isFirstConnection: true, } await expect( - initializationService.initAnalysis(mockProfile) + initializationService.initAnalysis(profile) ).resolves.toEqual({ monthlyAnalysisDate: getActualAnalysisDate(), haveSeenLastAnalysis: true, }) }) it('should return updated monthlyAnalysisDate and haveSeenLastAnalysis=false when analysis is not up to date and isFirstConnection is false', async () => { - const mockProfile = { - ...profileData, + const profile: Profile = { + ...mockProfileState, isFirstConnection: false, monthlyAnalysisDate: DateTime.fromISO('2000-10-02T00:00:00.000Z', { zone: 'utc', @@ -664,7 +665,7 @@ describe('Initialization service', () => { haveSeenLastAnalysis: true, } await expect( - initializationService.initAnalysis(mockProfile) + initializationService.initAnalysis(profile) ).resolves.toEqual({ monthlyAnalysisDate: getActualAnalysisDate(), haveSeenLastAnalysis: false, diff --git a/src/services/profile.service.spec.ts b/src/services/profile.service.spec.ts index af34c70da..c699a6559 100644 --- a/src/services/profile.service.spec.ts +++ b/src/services/profile.service.spec.ts @@ -2,7 +2,7 @@ import { QueryResult } from 'cozy-client' import { DateTime } from 'luxon' import { Profile } from 'models' import mockClient from '../../tests/__mocks__/client' -import { profileData } from '../../tests/__mocks__/profileData.mock' +import { mockProfileState } from '../../tests/__mocks__/store' import ProfileService from './profile.service' describe('UserProfile service', () => { @@ -11,19 +11,19 @@ describe('UserProfile service', () => { describe('getUserProfile', () => { it('should return the user profile', async () => { const mockQueryResult: QueryResult<Profile[]> = { - data: [profileData], + data: [mockProfileState], bookmark: '', next: false, skip: 0, } mockClient.query.mockResolvedValueOnce(mockQueryResult) const result = await profileService.getProfile() - expect(result).toEqual(profileData) + expect(result).toEqual(mockProfileState) }) it('should return the user profile from string monthlyAnalysisDate', async () => { const userProfile = { - ...profileData, + ...mockProfileState, monthlyAnalysisDate: '2020-11-09T11:27:30.073Z', } // eslint-disable-next-line @typescript-eslint/no-explicit-any @@ -35,7 +35,7 @@ describe('UserProfile service', () => { } mockClient.query.mockResolvedValueOnce(mockQueryResult) const resultUserProfile = { - ...profileData, + ...mockProfileState, monthlyAnalysisDate: DateTime.fromISO('2020-11-09T11:27:30.073Z', { zone: 'utc', }), @@ -60,7 +60,7 @@ describe('UserProfile service', () => { describe('updateUserProfile', () => { it('should return an updated user profile', async () => { const userProfile = { - ...profileData, + ...mockProfileState, monthlyAnalysisDate: '2020-11-03T00:00:00.000Z', customPopupDate: '2020-11-03T00:00:00.000Z', } @@ -85,7 +85,7 @@ describe('UserProfile service', () => { } mockClient.save.mockResolvedValueOnce(mockUpdatedQueryResult) const resultUserProfile = { - ...profileData, + ...mockProfileState, monthlyAnalysisDate: DateTime.fromISO('2020-11-03T00:00:00.000Z', { zone: 'utc', }), @@ -103,7 +103,7 @@ describe('UserProfile service', () => { it('should return null if no user profile found', async () => { const mockQueryResult: QueryResult<Profile[]> = { - data: [profileData], + data: [mockProfileState], bookmark: '', next: false, skip: 0, diff --git a/src/store/challenge/challenge.slice.spec.ts b/src/store/challenge/challenge.slice.spec.ts index 8adbc4cc7..8f544d473 100644 --- a/src/store/challenge/challenge.slice.spec.ts +++ b/src/store/challenge/challenge.slice.spec.ts @@ -2,7 +2,7 @@ import { DataloadState } from 'enum/dataload.enum' import { UserChallengeState } from 'enum/userChallenge.enum' import { DateTime } from 'luxon' import { ChallengeState, Dataload, UserChallenge } from 'models' -import { mockInitialChallengeState } from '../../../tests/__mocks__/store' +import { mockChallengeState } from '../../../tests/__mocks__/store' import { userChallengeData, userChallengeDefault, @@ -18,12 +18,12 @@ import { describe('challenge reducer', () => { it('should return the initial state', () => { const state = challengeSlice.reducer(undefined, { type: undefined }) - expect(state).toEqual(mockInitialChallengeState) + expect(state).toEqual(mockChallengeState) }) it('should handle setUserChallengeList', () => { const state = challengeSlice.reducer( - mockInitialChallengeState, + mockChallengeState, setUserChallengeList(userChallengeData) ) const expectedResult: ChallengeState = { @@ -36,7 +36,7 @@ describe('challenge reducer', () => { it('should handle updateUserChallengeList ', () => { const updatedMockInitialChallengeState = { - ...mockInitialChallengeState, + ...mockChallengeState, userChallengeList: userChallengeDefault, } const updatedUserChallenge: UserChallenge = { @@ -60,7 +60,7 @@ describe('challenge reducer', () => { it('should handle unlockNextUserChallenge ', () => { const updatedMockInitialChallengeState = { - ...mockInitialChallengeState, + ...mockChallengeState, userChallengeList: userChallengeDefault, } const updatedUserChallenge: UserChallenge = { @@ -90,7 +90,7 @@ describe('challenge reducer', () => { it('should handle SET_CHALLENGE_CONSUMPTION ', () => { const updatedMockInitialChallengeState = { - ...mockInitialChallengeState, + ...mockChallengeState, userChallengeList: userChallengeDefault, } const dataload: Dataload[] = [ diff --git a/src/store/chart/chart.slice.spec.ts b/src/store/chart/chart.slice.spec.ts index 717c26db4..69842d675 100644 --- a/src/store/chart/chart.slice.spec.ts +++ b/src/store/chart/chart.slice.spec.ts @@ -1,7 +1,7 @@ import { TimeStep } from 'enum/timeStep.enum' import { DateTime } from 'luxon' import { graphData } from '../../../tests/__mocks__/chartData.mock' -import { mockInitialChartState } from '../../../tests/__mocks__/store' +import { mockChartState } from '../../../tests/__mocks__/store/chart.state.mock' import { chartSlice, setCurrentDataChart, @@ -16,12 +16,12 @@ import { describe('chart reducer', () => { it('should return the initial state', () => { const initialState = chartSlice.reducer(undefined, { type: undefined }) - expect(initialState).toEqual(mockInitialChartState) + expect(initialState).toEqual(mockChartState) }) it('should return same state if no action', () => { - const state = chartSlice.reducer(mockInitialChartState, { type: undefined }) - expect(state).toEqual(mockInitialChartState) + const state = chartSlice.reducer(mockChartState, { type: undefined }) + expect(state).toEqual(mockChartState) }) describe('setSelectedDate', () => { @@ -30,11 +30,11 @@ describe('chart reducer', () => { zone: 'utc', }) const state = chartSlice.reducer( - mockInitialChartState, + mockChartState, setSelectedDate(mockDate) ) expect(state).toEqual({ - ...mockInitialChartState, + ...mockChartState, selectedDate: mockDate, }) }) @@ -43,21 +43,21 @@ describe('chart reducer', () => { describe('setCurrentTimeStep', () => { it('should handle setCurrentTimeStep with payload', () => { const state = chartSlice.reducer( - mockInitialChartState, + mockChartState, setCurrentTimeStep(TimeStep.MONTH) ) expect(state).toEqual({ - ...mockInitialChartState, + ...mockChartState, currentTimeStep: TimeStep.MONTH, }) }) it('should disable showCompare if timestep is year', () => { const state = chartSlice.reducer( - { ...mockInitialChartState, showCompare: true }, + { ...mockChartState, showCompare: true }, setCurrentTimeStep(TimeStep.YEAR) ) expect(state).toEqual({ - ...mockInitialChartState, + ...mockChartState, showCompare: false, currentTimeStep: TimeStep.YEAR, }) @@ -66,12 +66,9 @@ describe('chart reducer', () => { describe('setCurrentIndex', () => { it('should handle setCurrentIndex with payload', () => { - const state = chartSlice.reducer( - mockInitialChartState, - setCurrentIndex(1) - ) + const state = chartSlice.reducer(mockChartState, setCurrentIndex(1)) expect(state).toEqual({ - ...mockInitialChartState, + ...mockChartState, currentIndex: 1, }) }) @@ -80,11 +77,11 @@ describe('chart reducer', () => { describe('setCurrentDataChart', () => { it('should handle setCurrentDataChart with payload', () => { const state = chartSlice.reducer( - mockInitialChartState, + mockChartState, setCurrentDataChart(graphData) ) expect(state).toEqual({ - ...mockInitialChartState, + ...mockChartState, currentDatachart: graphData, }) }) @@ -93,11 +90,11 @@ describe('chart reducer', () => { describe('setCurrentDataChartIndex', () => { it('should handle setCurrentDataChartIndex with payload', () => { const state = chartSlice.reducer( - mockInitialChartState, + mockChartState, setCurrentDataChartIndex(1) ) expect(state).toEqual({ - ...mockInitialChartState, + ...mockChartState, currentDatachartIndex: 1, }) }) @@ -105,9 +102,9 @@ describe('chart reducer', () => { describe('setLoading', () => { it('should handle setLoading with payload', () => { - const state = chartSlice.reducer(mockInitialChartState, setLoading(false)) + const state = chartSlice.reducer(mockChartState, setLoading(false)) expect(state).toEqual({ - ...mockInitialChartState, + ...mockChartState, loading: false, }) }) @@ -115,12 +112,9 @@ describe('chart reducer', () => { describe('setShowCompare', () => { it('should handle setShowCompare', () => { - const state = chartSlice.reducer( - mockInitialChartState, - setShowCompare(true) - ) + const state = chartSlice.reducer(mockChartState, setShowCompare(true)) expect(state).toEqual({ - ...mockInitialChartState, + ...mockChartState, showCompare: true, }) }) @@ -130,12 +124,12 @@ describe('chart reducer', () => { describe('chart reducer', () => { it('should return the initial state', () => { const initialState = chartSlice.reducer(undefined, { type: undefined }) - expect(initialState).toEqual(mockInitialChartState) + expect(initialState).toEqual(mockChartState) }) it('should return same state if no action', () => { - const state = chartSlice.reducer(mockInitialChartState, { type: undefined }) - expect(state).toEqual(mockInitialChartState) + const state = chartSlice.reducer(mockChartState, { type: undefined }) + expect(state).toEqual(mockChartState) }) describe('setSelectedDate', () => { @@ -144,11 +138,11 @@ describe('chart reducer', () => { zone: 'utc', }) const state = chartSlice.reducer( - mockInitialChartState, + mockChartState, setSelectedDate(mockDate) ) expect(state).toEqual({ - ...mockInitialChartState, + ...mockChartState, selectedDate: mockDate, }) }) @@ -157,11 +151,11 @@ describe('chart reducer', () => { describe('setCurrentTimeStep', () => { it('should handle SET_CURRENT_TIMESTEP with payload', () => { const state = chartSlice.reducer( - mockInitialChartState, + mockChartState, setCurrentTimeStep(TimeStep.MONTH) ) expect(state).toEqual({ - ...mockInitialChartState, + ...mockChartState, currentTimeStep: TimeStep.MONTH, }) }) @@ -169,12 +163,9 @@ describe('chart reducer', () => { describe('setCurrentIndex', () => { it('should handle SET_CURRENT_INDEX with payload', () => { - const state = chartSlice.reducer( - mockInitialChartState, - setCurrentIndex(1) - ) + const state = chartSlice.reducer(mockChartState, setCurrentIndex(1)) expect(state).toEqual({ - ...mockInitialChartState, + ...mockChartState, currentIndex: 1, }) }) @@ -183,11 +174,11 @@ describe('chart reducer', () => { describe('setCurrentDataChart', () => { it('should handle SET_CURRENT_DATACHART with payload', () => { const state = chartSlice.reducer( - mockInitialChartState, + mockChartState, setCurrentDataChart(graphData) ) expect(state).toEqual({ - ...mockInitialChartState, + ...mockChartState, currentDatachart: graphData, }) }) @@ -196,11 +187,11 @@ describe('chart reducer', () => { describe('setCurrentDataChartIndex', () => { it('should handle SET_CURRENT_DATACHART_INDEX with payload', () => { const state = chartSlice.reducer( - mockInitialChartState, + mockChartState, setCurrentDataChartIndex(1) ) expect(state).toEqual({ - ...mockInitialChartState, + ...mockChartState, currentDatachartIndex: 1, }) }) @@ -208,9 +199,9 @@ describe('chart reducer', () => { describe('setLoading', () => { it('should handle SET_LOADING with payload', () => { - const state = chartSlice.reducer(mockInitialChartState, setLoading(false)) + const state = chartSlice.reducer(mockChartState, setLoading(false)) expect(state).toEqual({ - ...mockInitialChartState, + ...mockChartState, loading: false, }) }) diff --git a/src/store/global/global.slice.spec.ts b/src/store/global/global.slice.spec.ts index 0f04a90e3..79d93c696 100644 --- a/src/store/global/global.slice.spec.ts +++ b/src/store/global/global.slice.spec.ts @@ -7,7 +7,7 @@ import { FluidStatus, PartnersInfo, TermsStatus } from 'models' import { SgeStore } from 'models/sgeStore.model' import { accountsData } from '../../../tests/__mocks__/accountsData.mock' import { konnectorsData } from '../../../tests/__mocks__/konnectorsData.mock' -import { mockInitialGlobalState } from '../../../tests/__mocks__/store' +import { mockGlobalState } from '../../../tests/__mocks__/store' import { triggersData } from '../../../tests/__mocks__/triggersData.mock' import { changeScreenType, @@ -100,66 +100,66 @@ const fluidStatus: FluidStatus[] = [ describe('globalSlice', () => { it('should return the initial state', () => { const initialState = globalSlice.reducer(undefined, { type: undefined }) - expect(initialState).toEqual(mockInitialGlobalState) + expect(initialState).toEqual(mockGlobalState) }) it('should handle changeScreenType', () => { const state = globalSlice.reducer( - mockInitialGlobalState, + mockGlobalState, changeScreenType(ScreenType.DESKTOP) ) expect(state).toEqual({ - ...mockInitialGlobalState, + ...mockGlobalState, screenType: ScreenType.DESKTOP, }) }) it('should handle toggleChallengeExplorationNotification', () => { const state = globalSlice.reducer( - mockInitialGlobalState, + mockGlobalState, toggleChallengeExplorationNotification(true) ) expect(state).toEqual({ - ...mockInitialGlobalState, + ...mockGlobalState, challengeExplorationNotification: true, }) }) it('should handle toggleChallengeActionNotification', () => { const state = globalSlice.reducer( - mockInitialGlobalState, + mockGlobalState, toggleChallengeActionNotification(true) ) expect(state).toEqual({ - ...mockInitialGlobalState, + ...mockGlobalState, challengeActionNotification: true, }) }) it('should handle toggleChallengeDuelNotification', () => { const state = globalSlice.reducer( - mockInitialGlobalState, + mockGlobalState, toggleChallengeDuelNotification(true) ) expect(state).toEqual({ - ...mockInitialGlobalState, + ...mockGlobalState, challengeDuelNotification: true, }) }) it('should handle toggleAnalysisNotification', () => { const state = globalSlice.reducer( - mockInitialGlobalState, + mockGlobalState, toggleAnalysisNotification(true) ) expect(state).toEqual({ - ...mockInitialGlobalState, + ...mockGlobalState, analysisNotification: true, }) }) it('should handle setFluidStatus', () => { const state = globalSlice.reducer( - mockInitialGlobalState, + mockGlobalState, setFluidStatus(fluidStatus) ) expect(state).toEqual({ - ...mockInitialGlobalState, + ...mockGlobalState, fluidStatus: fluidStatus, fluidTypes: [FluidType.ELECTRICITY, FluidType.WATER], }) @@ -171,25 +171,25 @@ describe('globalSlice', () => { versionType: 'major', } const state = globalSlice.reducer( - mockInitialGlobalState, + mockGlobalState, updateTermsStatus(expectedTermsStatus) ) expect(state).toEqual({ - ...mockInitialGlobalState, + ...mockGlobalState, termsStatus: expectedTermsStatus, }) }) it('should handle showReleaseNotes', () => { const state = globalSlice.reducer( - mockInitialGlobalState, + mockGlobalState, showReleaseNotes({ show: true, notes: [{ description: 'desc', title: 'Title' }], }) ) expect(state).toEqual({ - ...mockInitialGlobalState, + ...mockGlobalState, releaseNotes: { show: true, notes: [{ description: 'desc', title: 'Title' }], @@ -205,22 +205,22 @@ describe('globalSlice', () => { notification_activated: true, } const state = globalSlice.reducer( - mockInitialGlobalState, + mockGlobalState, setPartnersInfo(expectedPartnersInfo) ) expect(state).toEqual({ - ...mockInitialGlobalState, + ...mockGlobalState, partnersInfo: expectedPartnersInfo, }) }) it('should handle setShouldRefreshConsent', () => { const state = globalSlice.reducer( - mockInitialGlobalState, + mockGlobalState, setShouldRefreshConsent(true) ) expect(state).toEqual({ - ...mockInitialGlobalState, + ...mockGlobalState, shouldRefreshConsent: true, }) }) @@ -238,17 +238,17 @@ describe('globalSlice', () => { zipCode: 99999, } const state = globalSlice.reducer( - mockInitialGlobalState, + mockGlobalState, updateSgeStore(expectedSgeConnect) ) expect(state).toEqual({ - ...mockInitialGlobalState, + ...mockGlobalState, sgeConnect: expectedSgeConnect, }) }) it('should handle updateFluidConnection', () => { const state = globalSlice.reducer( - mockInitialGlobalState, + mockGlobalState, updateFluidConnection({ fluidType: FluidType.ELECTRICITY, fluidConnection: { @@ -269,7 +269,7 @@ describe('globalSlice', () => { }) ) expect(state).toEqual({ - ...mockInitialGlobalState, + ...mockGlobalState, fluidStatus: [ { fluidType: FluidType.ELECTRICITY, @@ -293,7 +293,7 @@ describe('globalSlice', () => { }, }, }, - ...mockInitialGlobalState.fluidStatus.slice(1), + ...mockGlobalState.fluidStatus.slice(1), ], }) }) diff --git a/src/store/index.ts b/src/store/index.ts index 25d8ce3b7..9bcaeb06d 100644 --- a/src/store/index.ts +++ b/src/store/index.ts @@ -47,6 +47,18 @@ export interface EcolyoState { profileType: ProfileType } +/** Partial interfaces used for testing purposes */ +export interface MockEcolyoState { + analysis: Partial<AnalysisState> + challenge: Partial<ChallengeState> + chart: Partial<ChartState> + global: Partial<GlobalState> + modal: Partial<ModalState> + profile: Partial<Profile> + profileEcogesture: Partial<ProfileEcogesture> + profileType: Partial<ProfileType> +} + export const defaultAction = { type: null, payload: undefined } const ecolyoReducer = combineReducers({ diff --git a/src/store/modal/modal.slice.spec.ts b/src/store/modal/modal.slice.spec.ts index 644eaffa2..8ba681d55 100644 --- a/src/store/modal/modal.slice.spec.ts +++ b/src/store/modal/modal.slice.spec.ts @@ -1,6 +1,6 @@ import { ModalState } from 'models' import { mockCustomPopup } from '../../../tests/__mocks__/customPopup.mock' -import { mockInitialModalState } from '../../../tests/__mocks__/store' +import { mockModalState } from '../../../tests/__mocks__/store' import { modalSlice, openConnectionModal, @@ -12,17 +12,14 @@ import { describe('modal reducer', () => { it('should return the initial state', () => { const initialState = modalSlice.reducer(undefined, { type: undefined }) - expect(initialState).toEqual(mockInitialModalState) + expect(initialState).toEqual(mockModalState) }) describe('openFeedbackModal', () => { it('should handle openFeedbackModal', () => { - const state = modalSlice.reducer( - mockInitialModalState, - openFeedbackModal(true) - ) + const state = modalSlice.reducer(mockModalState, openFeedbackModal(true)) expect(state).toEqual({ - ...mockInitialModalState, + ...mockModalState, isFeedbacksOpen: true, }) }) @@ -35,11 +32,11 @@ describe('modal reducer', () => { grdf: true, } it('should have all partners to false by default', () => { - const state = modalSlice.reducer(mockInitialModalState, { + const state = modalSlice.reducer(mockModalState, { type: undefined, }) const expectedResult: ModalState = { - ...mockInitialModalState, + ...mockModalState, partnersIssueModal: { egl: false, enedis: false, @@ -50,11 +47,11 @@ describe('modal reducer', () => { }) it('should handle openPartnersModal to set all partners to true', () => { const state = modalSlice.reducer( - mockInitialModalState, + mockModalState, openPartnersModal({ egl: true, enedis: true, grdf: true }) ) const expectedResult: ModalState = { - ...mockInitialModalState, + ...mockModalState, partnersIssueModal: { ...partnersModalAllTrue, }, @@ -64,7 +61,7 @@ describe('modal reducer', () => { it('should handle openPartnersModal to set some partners to false', () => { const state = modalSlice.reducer( { - ...mockInitialModalState, + ...mockModalState, partnersIssueModal: { ...partnersModalAllTrue, }, @@ -72,7 +69,7 @@ describe('modal reducer', () => { openPartnersModal({ egl: true, enedis: false, grdf: false }) ) const expectedResult: ModalState = { - ...mockInitialModalState, + ...mockModalState, partnersIssueModal: { egl: true, enedis: false, @@ -83,11 +80,11 @@ describe('modal reducer', () => { }) it('should handle openConnectionModal', () => { const state = modalSlice.reducer( - mockInitialModalState, + mockModalState, openConnectionModal(true) ) expect(state).toEqual({ - ...mockInitialModalState, + ...mockModalState, isConnectionModalOpen: true, }) }) @@ -96,11 +93,11 @@ describe('modal reducer', () => { describe('customPopup', () => { it('should handle setCustomPopup', () => { const state = modalSlice.reducer( - mockInitialModalState, + mockModalState, setCustomPopup(mockCustomPopup) ) expect(state).toEqual({ - ...mockInitialModalState, + ...mockModalState, customPopupModal: mockCustomPopup, }) }) diff --git a/src/store/profile/profile.action.spec.ts b/src/store/profile/profile.action.spec.ts index bd942e087..bac7ff63c 100644 --- a/src/store/profile/profile.action.spec.ts +++ b/src/store/profile/profile.action.spec.ts @@ -1,6 +1,8 @@ -import { profileData } from '../../../tests/__mocks__/profileData.mock' -import { createMockEcolyoStore } from '../../../tests/__mocks__/store' -import { updateProfile, UPDATE_PROFILE } from './profile.actions' +import { + createMockEcolyoStore, + mockProfileState, +} from '../../../tests/__mocks__/store' +import { UPDATE_PROFILE, updateProfile } from './profile.actions' const mockUpdateProfile = jest.fn() jest.mock('services/profile.service', () => { @@ -17,20 +19,20 @@ describe('profile actions', () => { store.clearActions() }) it('should create an UPDATE_PROFILE action when profile is updated', async () => { - mockUpdateProfile.mockResolvedValueOnce(profileData) + mockUpdateProfile.mockResolvedValueOnce(mockProfileState) const expectedActions = [ { type: UPDATE_PROFILE, - payload: profileData, + payload: mockProfileState, }, ] - await store.dispatch(updateProfile(profileData)) + await store.dispatch(updateProfile(mockProfileState)) expect(store.getActions()).toEqual(expectedActions) }) it('should not create action when profile is not updated', async () => { mockUpdateProfile.mockResolvedValueOnce(null) - await store.dispatch(updateProfile(profileData)) + await store.dispatch(updateProfile(mockProfileState)) expect(store.getActions()).toEqual([]) }) }) diff --git a/src/store/profile/profile.reducer.spec.ts b/src/store/profile/profile.reducer.spec.ts index 95c22aaef..ed3adbd7f 100644 --- a/src/store/profile/profile.reducer.spec.ts +++ b/src/store/profile/profile.reducer.spec.ts @@ -1,27 +1,26 @@ import { defaultAction } from 'store' -import { profileData } from '../../../tests/__mocks__/profileData.mock' -import { mockInitialProfileState } from '../../../tests/__mocks__/store' +import { mockProfileState } from '../../../tests/__mocks__/store' import { UPDATE_PROFILE } from './profile.actions' import { profileReducer } from './profile.reducer' describe('profile reducer', () => { it('should return the initial state', () => { const state = profileReducer(undefined, { ...defaultAction }) - expect(state).toEqual(mockInitialProfileState) + expect(state).toEqual(mockProfileState) }) it('should handle UPDATE_PROFILE with payload', () => { - const state = profileReducer(mockInitialProfileState, { + const state = profileReducer(mockProfileState, { type: UPDATE_PROFILE, - payload: profileData, + payload: mockProfileState, }) - expect(state).toEqual(profileData) + expect(state).toEqual(mockProfileState) }) it('should handle UPDATE_PROFILE without payload', () => { - const state = profileReducer(mockInitialProfileState, { + const state = profileReducer(mockProfileState, { type: UPDATE_PROFILE, }) - expect(state).toEqual(mockInitialProfileState) + expect(state).toEqual(mockProfileState) }) }) diff --git a/src/store/profile/profile.reducer.ts b/src/store/profile/profile.reducer.ts index 182a0c0bf..5277a42a8 100644 --- a/src/store/profile/profile.reducer.ts +++ b/src/store/profile/profile.reducer.ts @@ -15,25 +15,39 @@ const initialState: Profile = { explorationHash: '', isFirstConnection: false, partnersIssueSeenDate: { - enedis: DateTime.fromISO('0000-01-01T00:00:00.000Z'), - egl: DateTime.fromISO('0000-01-01T00:00:00.000Z'), - grdf: DateTime.fromISO('0000-01-01T00:00:00.000Z'), + enedis: DateTime.fromISO('0000-01-01T00:00:00.000Z', { + zone: 'utc', + }), + egl: DateTime.fromISO('0000-01-01T00:00:00.000Z', { + zone: 'utc', + }), + grdf: DateTime.fromISO('0000-01-01T00:00:00.000Z', { + zone: 'utc', + }), }, - lastConnectionDate: DateTime.fromISO('0000-01-01T00:00:00.000Z'), - customPopupDate: DateTime.fromISO('0000-01-01T00:00:00.000Z'), + lastConnectionDate: DateTime.fromISO('0000-01-01T00:00:00.000Z', { + zone: 'utc', + }), + customPopupDate: DateTime.fromISO('0000-01-01T00:00:00.000Z', { + zone: 'utc', + }), haveSeenLastAnalysis: true, sendAnalysisNotification: true, sendConsumptionAlert: false, waterDailyConsumptionLimit: 0, mailToken: '', - monthlyAnalysisDate: DateTime.fromISO('0000-01-01T00:00:00.000Z'), + monthlyAnalysisDate: DateTime.fromISO('0000-01-01T00:00:00.000Z', { + zone: 'utc', + }), isProfileTypeCompleted: false, isProfileEcogestureCompleted: false, onboarding: { isWelcomeSeen: true, }, haveSeenEcogestureModal: false, - activateHalfHourDate: DateTime.fromISO('0000-01-01T00:00:00.000Z'), + activateHalfHourDate: DateTime.fromISO('0000-01-01T00:00:00.000Z', { + zone: 'utc', + }), } export const profileReducer: Reducer<Profile, ProfileActionTypes> = ( diff --git a/src/store/profileEcogesture/profileEcogesture.action.spec.ts b/src/store/profileEcogesture/profileEcogesture.action.spec.ts index ad0f42b79..9b4a93ec5 100644 --- a/src/store/profileEcogesture/profileEcogesture.action.spec.ts +++ b/src/store/profileEcogesture/profileEcogesture.action.spec.ts @@ -1,8 +1,8 @@ import { mockProfileEcogesture } from '../../../tests/__mocks__/profileEcogesture.mock' import { createMockEcolyoStore } from '../../../tests/__mocks__/store' import { - updateProfileEcogesture, UPDATE_PROFILE_ECOGESTURE, + updateProfileEcogesture, } from './profileEcogesture.actions' const mockUpdateProfileEcogesture = jest.fn() diff --git a/src/store/profileType/profileType.slice.spec.ts b/src/store/profileType/profileType.slice.spec.ts index f4fb708b4..380b750d4 100644 --- a/src/store/profileType/profileType.slice.spec.ts +++ b/src/store/profileType/profileType.slice.spec.ts @@ -13,7 +13,7 @@ import { } from 'enum/profileType.enum' import { DateTime } from 'luxon' import { ProfileType } from 'models' -import { mockInitialProfileTypeState } from '../../../tests/__mocks__/store' +import { mockProfileTypeState } from '../../../tests/__mocks__/store/profileType.state.mock' import { profileTypeSlice, setProfileType } from './profileType.slice' describe('profileType reducer', () => { @@ -21,17 +21,17 @@ describe('profileType reducer', () => { const initialState = profileTypeSlice.reducer(undefined, { type: undefined, }) - expect(initialState).toEqual(mockInitialProfileTypeState) + expect(initialState).toEqual(mockProfileTypeState) }) describe('setProfileType', () => { it('should handle update with partial payload', () => { const state = profileTypeSlice.reducer( - mockInitialProfileTypeState, + mockProfileTypeState, setProfileType({ housingType: HousingType.APARTMENT }) ) expect(state).toEqual({ - ...mockInitialProfileTypeState, + ...mockProfileTypeState, housingType: HousingType.APARTMENT, }) }) @@ -58,7 +58,7 @@ describe('profileType reducer', () => { equipments: [EquipmentType.BOILER], } const state = profileTypeSlice.reducer( - mockInitialProfileTypeState, + mockProfileTypeState, setProfileType(newProfileType) ) expect(state).toEqual(newProfileType) diff --git a/tests/__mocks__/fluidStatusData.mock.ts b/tests/__mocks__/fluidStatusData.mock.ts index 684bd3346..b8c167a61 100644 --- a/tests/__mocks__/fluidStatusData.mock.ts +++ b/tests/__mocks__/fluidStatusData.mock.ts @@ -1,9 +1,8 @@ /* eslint-disable camelcase */ -import { FluidState } from 'enum/fluid.enum' +import { FluidState, FluidType } from 'enum/fluid.enum' import { FluidSlugType } from 'enum/fluidSlug.enum' import { DateTime } from 'luxon' import { FluidStatus } from 'models' -import { PartnersInfo } from 'models/partnersInfo.model' export const fluidStatusData: FluidStatus[] = [ { @@ -85,18 +84,6 @@ export const fluidStatusData: FluidStatus[] = [ }, }, ] -export const mockPartnersInfoActivated: PartnersInfo = { - grdf_failure: true, - enedis_failure: true, - egl_failure: true, - notification_activated: true, -} -export const mockPartnersInfoDisabled: PartnersInfo = { - grdf_failure: false, - enedis_failure: false, - egl_failure: false, - notification_activated: false, -} export const fluidStatusConnectedData: FluidStatus[] = [ { @@ -237,3 +224,76 @@ export const SgeStatusWithAccount: FluidStatus = { }, }, } + +export const mockExpiredElec: FluidStatus = { + fluidType: FluidType.ELECTRICITY, + status: FluidState.KONNECTOR_NOT_FOUND, + maintenance: true, + firstDataDate: null, + lastDataDate: null, + connection: { + shouldLaunchKonnector: false, + isUpdating: false, + konnector: null, + account: { + _id: '1', + account_type: 'test', + data: { + consentId: 1, + expirationDate: '1999-08-08', + }, + }, + trigger: null, + triggerState: { + trigger_id: '0', + status: '', + last_executed_job_id: '', + last_execution: '', + last_manual_execution: '', + last_manual_job_id: '', + last_error: 'USER_ACTION_NEEDED.OAUTH_OUTDATED', + }, + konnectorConfig: { + name: '', + oauth: false, + slug: FluidSlugType.ELECTRICITY, + siteLink: '', + activation: '', + }, + }, +} + +export const mockExpiredGas: FluidStatus = { + fluidType: FluidType.GAS, + status: FluidState.ERROR_LOGIN_FAILED, + maintenance: false, + firstDataDate: null, + lastDataDate: null, + connection: { + shouldLaunchKonnector: false, + isUpdating: false, + konnector: null, + account: null, + trigger: null, + triggerState: { + trigger_id: '0', + status: '', + last_executed_job_id: '', + last_execution: '', + last_manual_execution: '', + last_manual_job_id: '', + last_error: 'USER_ACTION_NEEDED.OAUTH_OUTDATED', + }, + konnectorConfig: { + name: '', + oauth: false, + slug: FluidSlugType.GAS, + siteLink: '', + activation: '', + }, + }, +} +export const mockMaintenanceGas: FluidStatus = { + ...mockExpiredGas, + maintenance: true, +} diff --git a/tests/__mocks__/profileData.mock.ts b/tests/__mocks__/profileData.mock.ts index 5aa144b86..82a92073a 100644 --- a/tests/__mocks__/profileData.mock.ts +++ b/tests/__mocks__/profileData.mock.ts @@ -1,6 +1,7 @@ import { DateTime } from 'luxon' import { Profile } from 'models' +// TODO to remove ? export const profileData: Profile = { _id: '4d9403218ef13e65b2e3a8ad1700bc41', _rev: '16-57473da4fc26315247c217083175dfa0', diff --git a/tests/__mocks__/store.ts b/tests/__mocks__/store.ts deleted file mode 100644 index 26367ba71..000000000 --- a/tests/__mocks__/store.ts +++ /dev/null @@ -1,351 +0,0 @@ -/* eslint-disable camelcase */ -import { FluidState, FluidType } from 'enum/fluid.enum' -import { FluidSlugType } from 'enum/fluidSlug.enum' -import { - ConstructionYear, - Floor, - HotWaterEquipment, - HotWaterFluid, - HousingType, - IndividualInsulationWork, - IndividualOrCollective, - OutsideFacingWalls, - ThreeChoicesAnswer, - WarmingType, -} from 'enum/profileType.enum' -import { ScreenType } from 'enum/screen.enum' -import { TimeStep } from 'enum/timeStep.enum' -import { DateTime } from 'luxon' -import { - AnalysisState, - ChallengeState, - ChartState, - FluidStatus, - GlobalState, - ModalState, - Profile, - ProfileType, -} from 'models' -import { ProfileEcogesture } from 'models/profileEcogesture.model' -import configureStore from 'redux-mock-store' -import thunkMiddleware from 'redux-thunk' -import { AppActionsTypes, EcolyoState } from 'store' -import mockClient from './client' -import { mockProfileEcogesture } from './profileEcogesture.mock' - -export const mockInitialGlobalState: GlobalState = { - screenType: ScreenType.MOBILE, - challengeExplorationNotification: false, - challengeActionNotification: false, - challengeDuelNotification: false, - analysisNotification: false, - termsStatus: { - accepted: true, - versionType: 'init', - }, - partnersInfo: { - egl_failure: false, - enedis_failure: false, - grdf_failure: false, - notification_activated: false, - }, - releaseNotes: { - show: false, - notes: [{ description: '', title: '' }], - }, - fluidStatus: [ - { - fluidType: FluidType.ELECTRICITY, - status: FluidState.KONNECTOR_NOT_FOUND, - maintenance: false, - firstDataDate: null, - lastDataDate: null, - connection: { - shouldLaunchKonnector: false, - isUpdating: false, - konnector: null, - account: null, - trigger: null, - triggerState: null, - konnectorConfig: { - name: '', - oauth: false, - slug: FluidSlugType.ELECTRICITY, - siteLink: '', - activation: '', - }, - }, - }, - { - fluidType: FluidType.WATER, - status: FluidState.KONNECTOR_NOT_FOUND, - maintenance: false, - firstDataDate: null, - lastDataDate: null, - connection: { - shouldLaunchKonnector: false, - isUpdating: false, - konnector: null, - account: null, - trigger: null, - triggerState: null, - konnectorConfig: { - name: '', - oauth: false, - slug: FluidSlugType.WATER, - siteLink: '', - activation: '', - }, - }, - }, - { - fluidType: FluidType.GAS, - status: FluidState.KONNECTOR_NOT_FOUND, - maintenance: false, - firstDataDate: null, - lastDataDate: null, - connection: { - shouldLaunchKonnector: false, - isUpdating: false, - konnector: null, - account: null, - trigger: null, - triggerState: null, - konnectorConfig: { - name: '', - oauth: false, - slug: FluidSlugType.GAS, - siteLink: '', - activation: '', - }, - }, - }, - ], - fluidTypes: [], - shouldRefreshConsent: false, - sgeConnect: { - address: '', - city: '', - currentStep: 0, - dataConsent: false, - firstName: '', - lastName: '', - pdl: null, - pdlConfirm: false, - shouldLaunchAccount: false, - zipCode: null, - }, -} -export const mockExpiredElec: FluidStatus = { - fluidType: FluidType.ELECTRICITY, - status: FluidState.KONNECTOR_NOT_FOUND, - maintenance: true, - firstDataDate: null, - lastDataDate: null, - connection: { - shouldLaunchKonnector: false, - isUpdating: false, - konnector: null, - account: { - _id: '1', - account_type: 'test', - data: { - consentId: 1, - expirationDate: '1999-08-08', - }, - }, - trigger: null, - triggerState: { - trigger_id: '0', - status: '', - last_executed_job_id: '', - last_execution: '', - last_manual_execution: '', - last_manual_job_id: '', - last_error: 'USER_ACTION_NEEDED.OAUTH_OUTDATED', - }, - konnectorConfig: { - name: '', - oauth: false, - slug: FluidSlugType.ELECTRICITY, - siteLink: '', - activation: '', - }, - }, -} - -export const mockExpiredGas: FluidStatus = { - fluidType: FluidType.GAS, - status: FluidState.ERROR_LOGIN_FAILED, - maintenance: false, - firstDataDate: null, - lastDataDate: null, - connection: { - shouldLaunchKonnector: false, - isUpdating: false, - konnector: null, - account: null, - trigger: null, - triggerState: { - trigger_id: '0', - status: '', - last_executed_job_id: '', - last_execution: '', - last_manual_execution: '', - last_manual_job_id: '', - last_error: 'USER_ACTION_NEEDED.OAUTH_OUTDATED', - }, - konnectorConfig: { - name: '', - oauth: false, - slug: FluidSlugType.GAS, - siteLink: '', - activation: '', - }, - }, -} -export const mockMaintenanceGas: FluidStatus = { - ...mockExpiredGas, - maintenance: true, -} - -export const mockInitialProfileState: Profile = { - id: '', - ecogestureHash: '', - challengeHash: '', - duelHash: '', - quizHash: '', - explorationHash: '', - isFirstConnection: false, - partnersIssueSeenDate: { - enedis: DateTime.fromISO('0000-01-01T00:00:00.000Z'), - egl: DateTime.fromISO('0000-01-01T00:00:00.000Z'), - grdf: DateTime.fromISO('0000-01-01T00:00:00.000Z'), - }, - lastConnectionDate: DateTime.fromISO('0000-01-01T00:00:00.000Z'), - haveSeenLastAnalysis: true, - sendConsumptionAlert: false, - waterDailyConsumptionLimit: 0, - sendAnalysisNotification: true, - isProfileEcogestureCompleted: false, - mailToken: '', - monthlyAnalysisDate: DateTime.fromISO('0000-01-01T00:00:00.000Z'), - isProfileTypeCompleted: false, - onboarding: { - isWelcomeSeen: true, - }, - haveSeenEcogestureModal: false, - activateHalfHourDate: DateTime.fromISO('0000-01-01T00:00:00.000Z'), - customPopupDate: DateTime.fromISO('0000-01-01T00:00:00.000Z'), -} - -export const mockInitialProfileTypeState: ProfileType = { - housingType: HousingType.INDIVIDUAL_HOUSE, - constructionYear: ConstructionYear.BETWEEN_1975_AND_1989, - area: '100', - occupantsNumber: 4, - outsideFacingWalls: OutsideFacingWalls.TWO, - floor: Floor.NOT_APPLICABLE, - heating: IndividualOrCollective.INDIVIDUAL, - coldWater: IndividualOrCollective.INDIVIDUAL, - hotWater: IndividualOrCollective.INDIVIDUAL, - individualInsulationWork: [ - IndividualInsulationWork.WINDOW_REPLACEMENT, - IndividualInsulationWork.WALL_INSULATION, - ], - hasInstalledVentilation: ThreeChoicesAnswer.UNKNOWN, - hasReplacedHeater: ThreeChoicesAnswer.UNKNOWN, - hotWaterEquipment: HotWaterEquipment.SOLAR, - warmingFluid: WarmingType.ELECTRICITY, - hotWaterFluid: HotWaterFluid.ELECTRICITY, - cookingFluid: FluidType.ELECTRICITY, - updateDate: DateTime.fromISO('0000-01-01T00:00:00.000Z'), - equipments: [], -} - -export const mockInitialChartState: ChartState = { - selectedDate: DateTime.local().endOf('minute').setZone('utc', { - keepLocalTime: true, - }), - currentTimeStep: TimeStep.WEEK, - currentIndex: 0, - currentDatachart: { actualData: [], comparisonData: null }, - currentDatachartIndex: 0, - loading: true, - showCompare: false, - showOfflineData: false, -} - -export const mockInitialModalState: ModalState = { - customPopupModal: { - popupEnabled: false, - title: '', - description: '', - endDate: '', - }, - isConnectionModalOpen: false, - isFeedbacksOpen: false, - partnersIssueModal: { - enedis: false, - egl: false, - grdf: false, - }, -} - -export const mockInitialChallengeState: ChallengeState = { - userChallengeList: [], - currentChallenge: null, - currentDataload: [], -} - -export const mockAnalysisState: AnalysisState = { - period: 'month', - analysisMonth: DateTime.local(2023, 1, 1).startOf('day'), -} - -export const mockInitialEcolyoState: EcolyoState = { - analysis: mockAnalysisState, - challenge: mockInitialChallengeState, - chart: mockInitialChartState, - global: mockInitialGlobalState, - modal: mockInitialModalState, - profile: mockInitialProfileState, - profileType: mockInitialProfileTypeState, - profileEcogesture: mockProfileEcogesture, -} - -const middlewares = [thunkMiddleware.withExtraArgument({ mockClient })] -const mockStore = configureStore< - { - ecolyo: { - analysis: AnalysisState - challenge: ChallengeState - chart: ChartState - global: GlobalState - modal: ModalState - profile: Profile - profileEcogesture: ProfileEcogesture - profileType: ProfileType - } - cozy: unknown - }, - AppActionsTypes ->(middlewares) -const mockedStore = mockStore({ - ecolyo: mockInitialEcolyoState, - cozy: {}, -}) - -/** - * Create a mocked Ecolyo store with the default mockInitialEcolyoState - */ -export const createMockEcolyoStore = ( - initialState: EcolyoState = mockInitialEcolyoState -) => { - return mockStore({ - ecolyo: initialState, - cozy: {}, - }) -} - -export default mockedStore diff --git a/tests/__mocks__/store/analysis.state.mock.ts b/tests/__mocks__/store/analysis.state.mock.ts new file mode 100644 index 000000000..9c19d8e1d --- /dev/null +++ b/tests/__mocks__/store/analysis.state.mock.ts @@ -0,0 +1,7 @@ +import { DateTime } from 'luxon' +import { AnalysisState } from 'models' + +export const mockAnalysisState: AnalysisState = { + period: 'month', + analysisMonth: DateTime.local(2023, 1, 1).startOf('day'), +} diff --git a/tests/__mocks__/store/challenge.state.mock.ts b/tests/__mocks__/store/challenge.state.mock.ts new file mode 100644 index 000000000..653def14a --- /dev/null +++ b/tests/__mocks__/store/challenge.state.mock.ts @@ -0,0 +1,7 @@ +import { ChallengeState } from 'models' + +export const mockChallengeState: ChallengeState = { + userChallengeList: [], + currentChallenge: null, + currentDataload: [], +} diff --git a/tests/__mocks__/store/chart.state.mock.ts b/tests/__mocks__/store/chart.state.mock.ts new file mode 100644 index 000000000..467bf31be --- /dev/null +++ b/tests/__mocks__/store/chart.state.mock.ts @@ -0,0 +1,16 @@ +import { TimeStep } from 'enum/timeStep.enum' +import { DateTime } from 'luxon' +import { ChartState } from 'models' + +export const mockChartState: ChartState = { + selectedDate: DateTime.local().endOf('minute').setZone('utc', { + keepLocalTime: true, + }), + currentTimeStep: TimeStep.WEEK, + currentIndex: 0, + currentDatachart: { actualData: [], comparisonData: null }, + currentDatachartIndex: 0, + loading: true, + showCompare: false, + showOfflineData: false, +} diff --git a/tests/__mocks__/globalStateData.mock.ts b/tests/__mocks__/store/global.state.mock.ts similarity index 88% rename from tests/__mocks__/globalStateData.mock.ts rename to tests/__mocks__/store/global.state.mock.ts index a65780555..28f852216 100644 --- a/tests/__mocks__/globalStateData.mock.ts +++ b/tests/__mocks__/store/global.state.mock.ts @@ -1,115 +1,109 @@ -/* eslint-disable camelcase */ -import { FluidState, FluidType } from 'enum/fluid.enum' -import { FluidSlugType } from 'enum/fluidSlug.enum' -import { ScreenType } from 'enum/screen.enum' -import { GlobalState } from 'models' - -export const globalStateData: GlobalState = { - screenType: ScreenType.MOBILE, - releaseNotes: { - show: false, - notes: [], - }, - challengeExplorationNotification: false, - challengeActionNotification: false, - challengeDuelNotification: false, - analysisNotification: false, - termsStatus: { - accepted: false, - versionType: 'major', - }, - partnersInfo: { - egl_failure: false, - enedis_failure: false, - grdf_failure: false, - notification_activated: false, - }, - fluidStatus: [ - { - fluidType: FluidType.ELECTRICITY, - status: FluidState.KONNECTOR_NOT_FOUND, - maintenance: false, - firstDataDate: null, - lastDataDate: null, - connection: { - shouldLaunchKonnector: false, - isUpdating: false, - konnector: null, - account: null, - trigger: null, - triggerState: null, - konnectorConfig: { - name: '', - oauth: false, - slug: FluidSlugType.ELECTRICITY, - siteLink: '', - activation: '', - }, - }, - }, - { - fluidType: FluidType.WATER, - status: FluidState.KONNECTOR_NOT_FOUND, - maintenance: false, - firstDataDate: null, - lastDataDate: null, - connection: { - shouldLaunchKonnector: false, - isUpdating: false, - konnector: null, - account: null, - trigger: null, - triggerState: null, - konnectorConfig: { - name: '', - oauth: false, - slug: FluidSlugType.WATER, - siteLink: '', - activation: '', - }, - }, - }, - { - fluidType: FluidType.GAS, - status: FluidState.KONNECTOR_NOT_FOUND, - maintenance: false, - firstDataDate: null, - lastDataDate: null, - connection: { - shouldLaunchKonnector: false, - isUpdating: false, - konnector: null, - account: null, - trigger: null, - triggerState: null, - konnectorConfig: { - name: '', - oauth: false, - slug: FluidSlugType.GAS, - siteLink: '', - activation: '', - }, - }, - }, - ], - fluidTypes: [], - shouldRefreshConsent: false, - sgeConnect: { - currentStep: 0, - firstName: '', - lastName: '', - pdl: null, - address: '', - zipCode: null, - city: '', - dataConsent: false, - pdlConfirm: false, - shouldLaunchAccount: false, - }, - customPopupModal: { - title: '', - description: '', - popupEnabled: false, - endDate: '', - }, -} +/* eslint-disable camelcase */ +import { FluidState, FluidType } from 'enum/fluid.enum' +import { FluidSlugType } from 'enum/fluidSlug.enum' +import { ScreenType } from 'enum/screen.enum' +import { GlobalState } from 'models' + +export const mockGlobalState: GlobalState = { + screenType: ScreenType.MOBILE, + challengeExplorationNotification: false, + challengeActionNotification: false, + challengeDuelNotification: false, + analysisNotification: false, + termsStatus: { + accepted: true, + versionType: 'init', + }, + partnersInfo: { + egl_failure: false, + enedis_failure: false, + grdf_failure: false, + notification_activated: false, + }, + releaseNotes: { + show: false, + notes: [{ description: '', title: '' }], + }, + fluidStatus: [ + { + fluidType: FluidType.ELECTRICITY, + status: FluidState.KONNECTOR_NOT_FOUND, + maintenance: false, + firstDataDate: null, + lastDataDate: null, + connection: { + shouldLaunchKonnector: false, + isUpdating: false, + konnector: null, + account: null, + trigger: null, + triggerState: null, + konnectorConfig: { + name: '', + oauth: false, + slug: FluidSlugType.ELECTRICITY, + siteLink: '', + activation: '', + }, + }, + }, + { + fluidType: FluidType.WATER, + status: FluidState.KONNECTOR_NOT_FOUND, + maintenance: false, + firstDataDate: null, + lastDataDate: null, + connection: { + shouldLaunchKonnector: false, + isUpdating: false, + konnector: null, + account: null, + trigger: null, + triggerState: null, + konnectorConfig: { + name: '', + oauth: false, + slug: FluidSlugType.WATER, + siteLink: '', + activation: '', + }, + }, + }, + { + fluidType: FluidType.GAS, + status: FluidState.KONNECTOR_NOT_FOUND, + maintenance: false, + firstDataDate: null, + lastDataDate: null, + connection: { + shouldLaunchKonnector: false, + isUpdating: false, + konnector: null, + account: null, + trigger: null, + triggerState: null, + konnectorConfig: { + name: '', + oauth: false, + slug: FluidSlugType.GAS, + siteLink: '', + activation: '', + }, + }, + }, + ], + fluidTypes: [], + shouldRefreshConsent: false, + sgeConnect: { + address: '', + city: '', + currentStep: 0, + dataConsent: false, + firstName: '', + lastName: '', + pdl: null, + pdlConfirm: false, + zipCode: null, + shouldLaunchAccount: false, + }, +} diff --git a/tests/__mocks__/store/index.ts b/tests/__mocks__/store/index.ts new file mode 100644 index 000000000..96f96fb68 --- /dev/null +++ b/tests/__mocks__/store/index.ts @@ -0,0 +1,8 @@ +export * from './analysis.state.mock' +export * from './challenge.state.mock' +export * from './chart.state.mock' +export * from './global.state.mock' +export * from './modal.state.mock' +export * from './profile.state.mock' +export * from './profileType.state.mock' +export * from './store' diff --git a/tests/__mocks__/store/modal.state.mock.ts b/tests/__mocks__/store/modal.state.mock.ts new file mode 100644 index 000000000..1407ce08c --- /dev/null +++ b/tests/__mocks__/store/modal.state.mock.ts @@ -0,0 +1,17 @@ +import { ModalState } from 'models' + +export const mockModalState: ModalState = { + customPopupModal: { + popupEnabled: false, + title: '', + description: '', + endDate: '', + }, + isConnectionModalOpen: false, + isFeedbacksOpen: false, + partnersIssueModal: { + enedis: false, + egl: false, + grdf: false, + }, +} diff --git a/tests/__mocks__/store/profile.state.mock.ts b/tests/__mocks__/store/profile.state.mock.ts new file mode 100644 index 000000000..cb896d683 --- /dev/null +++ b/tests/__mocks__/store/profile.state.mock.ts @@ -0,0 +1,46 @@ +import { DateTime } from 'luxon' +import { Profile } from 'models' + +export const mockProfileState: Profile = { + id: '', + ecogestureHash: '', + challengeHash: '', + duelHash: '', + quizHash: '', + explorationHash: '', + isFirstConnection: false, + partnersIssueSeenDate: { + enedis: DateTime.fromISO('0000-01-01T00:00:00.000Z', { + zone: 'utc', + }), + egl: DateTime.fromISO('0000-01-01T00:00:00.000Z', { + zone: 'utc', + }), + grdf: DateTime.fromISO('0000-01-01T00:00:00.000Z', { + zone: 'utc', + }), + }, + lastConnectionDate: DateTime.fromISO('0000-01-01T00:00:00.000Z', { + zone: 'utc', + }), + haveSeenLastAnalysis: true, + sendConsumptionAlert: false, + waterDailyConsumptionLimit: 0, + sendAnalysisNotification: true, + isProfileEcogestureCompleted: false, + mailToken: '', + monthlyAnalysisDate: DateTime.fromISO('0000-01-01T00:00:00.000Z', { + zone: 'utc', + }), + isProfileTypeCompleted: false, + onboarding: { + isWelcomeSeen: true, + }, + haveSeenEcogestureModal: false, + activateHalfHourDate: DateTime.fromISO('0000-01-01T00:00:00.000Z', { + zone: 'utc', + }), + customPopupDate: DateTime.fromISO('0000-01-01T00:00:00.000Z', { + zone: 'utc', + }), +} diff --git a/tests/__mocks__/store/profileType.state.mock.ts b/tests/__mocks__/store/profileType.state.mock.ts new file mode 100644 index 000000000..9b8091734 --- /dev/null +++ b/tests/__mocks__/store/profileType.state.mock.ts @@ -0,0 +1,39 @@ +import { FluidType } from 'enum/fluid.enum' +import { + ConstructionYear, + Floor, + HotWaterEquipment, + HotWaterFluid, + HousingType, + IndividualInsulationWork, + IndividualOrCollective, + OutsideFacingWalls, + ThreeChoicesAnswer, + WarmingType, +} from 'enum/profileType.enum' +import { DateTime } from 'luxon' +import { ProfileType } from 'models' + +export const mockProfileTypeState: ProfileType = { + housingType: HousingType.INDIVIDUAL_HOUSE, + constructionYear: ConstructionYear.BETWEEN_1975_AND_1989, + area: '100', + occupantsNumber: 4, + outsideFacingWalls: OutsideFacingWalls.TWO, + floor: Floor.NOT_APPLICABLE, + heating: IndividualOrCollective.INDIVIDUAL, + coldWater: IndividualOrCollective.INDIVIDUAL, + hotWater: IndividualOrCollective.INDIVIDUAL, + individualInsulationWork: [ + IndividualInsulationWork.WINDOW_REPLACEMENT, + IndividualInsulationWork.WALL_INSULATION, + ], + hasInstalledVentilation: ThreeChoicesAnswer.UNKNOWN, + hasReplacedHeater: ThreeChoicesAnswer.UNKNOWN, + hotWaterEquipment: HotWaterEquipment.SOLAR, + warmingFluid: WarmingType.ELECTRICITY, + hotWaterFluid: HotWaterFluid.ELECTRICITY, + cookingFluid: FluidType.ELECTRICITY, + updateDate: DateTime.fromISO('0000-01-01T00:00:00.000Z'), + equipments: [], +} diff --git a/tests/__mocks__/store/store.ts b/tests/__mocks__/store/store.ts new file mode 100644 index 000000000..7f39d022f --- /dev/null +++ b/tests/__mocks__/store/store.ts @@ -0,0 +1,42 @@ +import configureStore from 'redux-mock-store' +import thunkMiddleware from 'redux-thunk' +import { AppActionsTypes, EcolyoState, MockEcolyoState } from 'store' +import mockClient from '../client' +import { mockProfileEcogesture } from '../profileEcogesture.mock' +import { mockAnalysisState } from './analysis.state.mock' +import { mockChallengeState } from './challenge.state.mock' +import { mockChartState } from './chart.state.mock' +import { mockGlobalState } from './global.state.mock' +import { mockModalState } from './modal.state.mock' +import { mockProfileState } from './profile.state.mock' +import { mockProfileTypeState } from './profileType.state.mock' + +export const mockInitialEcolyoState: EcolyoState = { + analysis: mockAnalysisState, + challenge: mockChallengeState, + chart: mockChartState, + global: mockGlobalState, + modal: mockModalState, + profile: mockProfileState, + profileType: mockProfileTypeState, + profileEcogesture: mockProfileEcogesture, +} + +const middlewares = [thunkMiddleware.withExtraArgument({ mockClient })] +const mockStore = configureStore< + { ecolyo: Partial<MockEcolyoState>; cozy: unknown }, + AppActionsTypes +>(middlewares) + +/** + * Create a mocked Ecolyo store with the default mockInitialEcolyoState + * @argument state - optional, a partial desired state + */ +export const createMockEcolyoStore = ( + initialState: Partial<MockEcolyoState> = mockInitialEcolyoState +) => { + return mockStore({ + ecolyo: initialState, + cozy: {}, + }) +} -- GitLab