diff --git a/src/components/Action/ActionBegin.spec.tsx b/src/components/Action/ActionBegin.spec.tsx index 6ea2ba74bb4a5aa6324c5b30b25a258677552b48..a1a87fe0f4779a1399cd0176a62c971af3855b08 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 2ae077fe99117ec54816805fd08b8a01da2c5620..cfd33fedee5aa17135e7a93f9e9fdcd791d5f2b4 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 90c43e9aa9782a844c0032111c67dfda64fb671b..147ac73cb0a0155a53083b5713bc433058b1db04 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 42092cfa722331bf38ffbaad04891c275257d0aa..d0ef0648aa64f00fdf0f7f7bc26de46db80ea087 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 85516527b9cc7b8cbba8b9bf854dc0f5be14063a..358a734bb51d08c9539bcb7c653d37cfb688cd26 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 23002a23f01e36f785fbace2c052742ab8bdbb46..63083f90b99b2e3b117bb9e5fb69795a5334f4e4 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 3929b747111b4194ba52c3f4b71f4805a20a0efb..06a4e5d786953f2f083715dc46f160d564975271 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 70d6e9e24f7f15364d9d9291c9b2b9c9aef302d5..710e0fbd347a6c9c35089cb96f52fe3616338237 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 253e7a9f965bd67a52797f51ca794c5276d243ec..f676bedb788c1ffeb65bf8d1691467889f998976 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 f9700e0570e62fbd7b47fa4e2ba6c00d24819acb..44006e40b620bee51e1262c222bc4b90646be40d 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 194618aba11fe8413e587081e9c1a25a349f9079..cf7a593eefab0e700213b45c9f3833347dc83a8f 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 d6dfbc1e3aabc44cddbda56d180971a0e6da58bc..74cf7f2366557e23a160c0038756348773515cf9 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 c8dc1953a7997ddddf2f17cf6d1c70a6500e1bb4..d6cfe69bbd6c2e3c3efa4cb73bbaba1a8b378638 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 f56f98490adc7f60cb87feb795a4a5f5eafa8396..eee85b61c9916dbd2e5249b71b0b8344faf07eb5 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 b07d924062942ceaee79035535c24cbd8f3a94f4..d67215220d36acbff0746b44529e6ec7eb275cb9 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 00cd51eee151f6d558da489a2a578771db864646..bfef8f1cacdb4bf135e609356c5f52f1bd8c6daa 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 be445a7a2433ef341f63e569ae1b5e09c0df31ef..2f24464a8b320dc13620ef1572a969e7c89b32f7 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 d705c58d051219aff5aecefd1eb41bc1e62b1409..470b80932f30f0117695e79875cd74c4e18f7154 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 7d65fbab8ad380eee976e14b2135261760da04d4..e0e70808ecfdbca719ea7cf69cb6dd745aed06c0 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 1410759a78c71acb190803b725d7442d14ba91d3..63095bbceb1e071c0071b72b0248c5a640dc5072 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 5f80b30e60723bb66d88a833aa052deaeb5d18d8..2242865caf89c2e64c3b73bf1ffd5d778fcfb83a 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 e6e5a7f13c77b92e4eaa707dc522ccf9b2b0dbd4..11d3d39ca94cede74ba42344b19ed5fed5bf0d98 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 0694b98f8e7f99a4a38e408e92a21b5752ca37b6..6ac99f422b455ab7dd481e74130f47518ebf7d2c 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 c916c501d205d86d1816d257d4a58441a74d1d55..a8ae270354fbf7de7d1f9ceef066018da6e53db5 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 c64f4b6b02e307fe810c4422e6e978a7efce4eae..0a6cf7c486a3fe065d5147bd4485e517afecd444 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 d339c9b712e517eca65902f26761e3e337ae0533..c44b0d8d98f030d6d6e8f74aa2dfbc196c401dc5 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 74ba58c51bf9595adbf60df0ba2ba655e6a8edc6..a7f2adf28fddb4a567fdbb714487f195ccc13505 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 5bace90a60e5d63d31c0d705b8e15514151877cc..8cdce76971c2fdf0c8b64b155b6aa72d29e8de72 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 dc745f6f3c1f841fe5c7c51ff2b327ccbe8755e2..724b247419902dfb0f7f49262e5add10d294d7b6 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 86efcf12d591964811923a9b982b963b0c45abb0..04512dcf30365c1a93ae387a33ad03180f910b29 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 4874eaee45fa946607e3a3d1cd7efcb6ef1e6a38..9bc479799b34b099c204ab8b3047b90da355d2bf 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 09498f8b583a532e2bb823c9fc3a20ffcdf7bb3a..451ac3785f55eee76651c9f2e7f0e92ba4419322 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 dba57dc00833286368cf785304f4713498147679..34860ce4bcc1b3ed84a8f910d968ba259178ccfd 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 83fa79f6b3e31125182c1deda1a0b861a7783b86..775c015bb5973187000382d94e075e7cf65b36ae 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 789d44b5bfbe4deabde615a843b853362005a2e7..4409bb8b4daaf5f896410b215b3353491382188c 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 85e4f86bafbcd303ce130ab2784c3493fea55886..4b8d40505f2bcc826f0aefe3a82004c3c3a371d8 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 3d48d7e5101088f20e3f7f903aae9b541f5261c7..c4aa35b596c03103bd7e812d7b7348f7b45778eb 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 5f65ba1f1858d93da1a1b0fcdd92f36235e358b1..4ba5dadffb05d55b024bdf1f20f047eb8fc940d8 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 45ff068e8769c537eca05c35e7deb76e220d798b..3a8c92a30547631661a7fc0b0c1eedf65e0aa920 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 42447533ee09f713330965e1a46d75f9629b7244..2025ed96b9bf4d12e0cb7dac987fe4508b7ac80a 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 cf155a120faac08c69d2141685bf8e48968b2b42..3fa783215008fa9ecdfe803ee74109f0e460945f 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 4f079d5f26c4e3c06e912b6c8710856be9e95987..aa1c26362a909732e1ce40a727aec479e97983d7 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 bbffacde1a57ab55f3afd6bc6b30be2ffc60281d..4a87bdd34022db59a06192fe5656a87700618548 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 45f8113272c3f07718ed010846ee7ce822608361..b27adc651fbc3b64befae331b242718fe5c0b923 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 8f609d629c3b62ba524decca7241f2095893852b..41980af0f29a9f8a93f8df9c2a638939f259c875 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 b6f92fd6d00ef463f5ca951ae84d52e057d3a4c5..a3e1543acbf23ce8fc518d0994a0490f7b252608 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 68b746407c4278427102d5e704fffea726c7ad9a..0e14bb67e6479e7d9a7cb4ae46bf454d0dd1c274 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 d54252aaeda2ac388973358e010a749b9777e3d6..fb3cf25ffecdfc0c50524c419edfbe78e9832f60 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 8dce007bf23265432d1a2184f8e7e700de355d02..2e91ba2e6357b72e79f853ffd6f725846dc8c31d 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 3a2c6b13180b4639a7693fff03a1c56bbf97840f..47454b07a765efdf76e82692a1ee6b3e88d6e933 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 afc1e1fe9bddcb1ac9fa0b80273b70bb54950668..2ec75eacfa6b081fde5d28744ee3ec004d7debf3 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 4cf025b1fafee98dc16614d1a033a5267263a39c..1d3651780dedc2594a5cfff8d7e05ca7dd4aca5a 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 38942976a83bac1aa333a1b34d34796e897bf6c4..9553d54f0bf50eddb9cdae1ad621293a139b7641 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 0b7982f2b08cbc50e0630f0f786ca712212234d9..5a91aa831bf60d66938f34bcf85be63cdb4a1680 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 a97c14eaea5675b7f44b101a8f1dc6b701e1a8e6..d7e63538735ae0ed4c37e42a3cd0d8cab07eb0b0 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 ab830dd0628564a7762dc2ba9277159e7ddf21a1..eb5387015fd42dc4e2f15a716712b04dd2ad7138 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 a534041ec392820102f3f47f100e0e5bb46e0671..c51902144e89d9522a3edeabc71523e639d95c5c 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 9539b429090cbf3829daebb4201acf11754c729b..12cb41c346cf16d5b767e330745da2065ccb2577 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 005c98b343ca3a95b56c1e53021a4a3b077dd3de..9b1d8405abc6fc7a30d13bd2375d2472bdd79414 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 d1e633a61649020325f81e7f25198d55309ddf44..f88bab5b31b393a05101b69db2fc1c494ecd62c0 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 1b6515c429eb7c8dbf22cd7520635df02720b308..00efadaab79ecac9d15e734d39336f13b88a55d2 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 78474a832ea8baadda173e0f28f88adbf309b580..f1a22af1208c4df1aff51026c85676ed8f1398b2 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 b3f676a96e81885b53b7797f1263507fa5416441..ad7f3fd3a839a4188f1cf5fd8ff24dc05d96fad6 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 177d4adfe14c926a9883245eebae458c9bad73fb..b7b08c4626b98cae49db909832521a422e319d98 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 55852f19d0fcec63bea51f5d29f69286a1f33089..278236744713d87bfc43d9ebfcdca1176577881e 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 90cfc6c0a0e695e1e84f70b5c97955fef2669b7d..640ab07f06a9c523e87055dc2caf36b6484b5900 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 5f3afdd466a9dd5add00245557cbd75e9e07b5bf..1dca3caacb0d1d1aa33ba49000b44ff6931f6a57 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 bbf516e897809c47d29676f2b8e2c70d1526908c..2fd286dd67fe400f211e0d6e01b0fe4bd275a457 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 ab4141b207c6db69ee6bb5faa4d3d95e7ea2ff99..9523131121a96675a2d1fbcf072deec29ed1f905 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 d7f0f27c3d10b2c58c263a479ec0dd7f963ac682..757488f24413394d1a4fc91d8b67293479a0461d 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 6bb3fe42dff707eda976b5354c4f257c947f673a..1e326b7ecbe90acda90f74d958c349c9a168df18 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 86a4f844794bf824ec77f1a7c89ce9794de3616b..f5be5f225c29ddd6e1ddcacad9185020b500d4f9 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 9799a3d51470408cfc6047466283aaee891797d3..6bc674ea10ad0e2c519dc20f2e83da628177df39 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 6dd5c4b177614d50aab12ba4c37a821a090073f1..77eb4e2b0d3fb4d9348ff85138d62a5014dad889 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 9394ed2ca3a75f7a2c50e10c451befe0fc1574bc..c22184392a53b6481c04ddedb83b943138c32874 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 e9a446415d50e8c680620dd4f5983a41f2437f33..77ed83fe0153f33dcbaf9e3ddc4064e49a7ea254 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 5189e961c095c86d7a12caa2dfd504ab2f2fa399..e3a1893c7749c169f6fa96f9e32f0056de2989e8 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 de6d946e2b07f301babef14a9df3194189e3ff11..33df065aaffe98423379c31ff4755b167e9ad517 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 1b915b824f4f32b3047300b8500f8607388f185a..ebba481d47d69a83785ed650c928e0d27426ef9e 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 1532074626de3152e5c952d4bea05cd5e9e159e8..7fccfb0b057acb8a0e3089a91de90725233e2b0b 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 92053cea0548bc900cec68e17df1d58195d906c1..5a616af2c817b84b81b43d3a89ca11f065999998 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 10b2b5ba9c2fd06a0ee0f5b0e55f31c4ba06ce64..4556bc1c70f7ca8c9668c6f53cb7802753d0ffed 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 326945c96e293db970a4a16e1dc1cc1780986656..5e3bbc6d1f7a4fd311df333b2b8b21c7ba1d1412 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 241cd54a9987fee3309ba022d03363a0a8ce0938..237ceadd5ee854f516d5d6483cafe0ca02f99abf 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 e54bcec9139affbde9ea8a3319b6c89631f3b0d0..d5da9a254898b0306fdbcd0d91a14ea6fe70094a 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 143c5d080b97c0fc008a880d869440f3d7117d5f..16bb80e53094137f62ba80d04ae6c44cd0cee44e 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 43865afb140d5fd455a5f096708cccd6df9965ba..0c361b53b98aa22d48542fb94888515915fc9460 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 377c3e49cfb52fea474d0d98cfe63946bbf8c340..93e84f3bfa45f18e5997a7092390f2098480c2d9 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 113ec79c8cf8802b9ed4099e00293c8498f7b65e..58e2860a0b81516048b4d9801dd904e50bebfc24 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 005f1fd3baf9bec0b51fdf50730ea8102c23d33d..d22541d4afa206cc5dae00f678473064856b7b58 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 6bc327a26d131b0951ba3f510cf1a0c9a10f267d..44d7cbb3e703e23e4a3016955cfa7917e5db736a 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 c6ed7950f96f56e6a5ac137545cc20a7a1001dae..53a16a0371ccbe9834f75f59fd782bd3e6ec7eec 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 1aa4f518578d95d682ee35f1f79631d7d5833e35..4de21c9a970505d44c178bde3d3e657669cdd3f3 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 e6fdcf3387d36d36428ee2880e188d9911f75113..39cf264a0d0a78324dc01becd19a70262b40c5e4 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 af34c70da7d378c2f439846695980e7eb0fdcff3..c699a6559b8abe6c7beb5558c2937983fd9301ec 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 8adbc4cc7271313784926b77b6d50388fd62c6b2..8f544d473cba8c645aa24f29e1c6be9d72da73f6 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 717c26db45e99c62987b9fd3ea23e8580899e221..69842d675e46fc131912247f74b364be28027100 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 0f04a90e365fba7d4389c58491b5779e336a4cf4..79d93c696002e742e5aa4f8b61addcd67cad9c64 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 25d8ce3b78a794d3f5f7950bb8257600b6a0f08e..9bcaeb06d3647e83113d749ced0fa7d82ca47d6f 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 644eaffa2934c85ba2290160954034015ba22daa..8ba681d55cf3ecfaaa0e615d17d5596e693bd2c2 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 bd942e0879fd04363c8bc7c29039108e41ff3589..bac7ff63cf8efe2454df8f859067983d6b51040e 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 95c22aaef918c56d97060f0a2d8191982e6314d0..ed3adbd7f2a31816eb0d3e558180008bc0120ec9 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 182a0c0bffe4486dd2ad397dcb4412e1e7f28d87..5277a42a884782baeba27e088ec20f18e9a147dd 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 ad0f42b7948f74982e2040eb6e39b49b863760bd..9b4a93ec519b0f56d2a055eafecb96e0df47257c 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 f4fb708b43e73f4cf39bffc4496c6cc09f015718..380b750d454a93cfa8fdb11c17a65008a7c1525c 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 684bd3346c7dae958172d46530bf775624788b57..b8c167a61be66aacde0d74983bb35fe64988a682 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 5aa144b8624de319827fed50f712142574a2423c..82a92073ab89b9f5aed02680d149d039b8d5bdb3 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 26367ba71186e3dd310f12817855bf2b2c579580..0000000000000000000000000000000000000000 --- 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 0000000000000000000000000000000000000000..9c19d8e1d63b54d0f29d04a84ce2e3004a88ea47 --- /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 0000000000000000000000000000000000000000..653def14adee6803effc53798034329b45b92a50 --- /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 0000000000000000000000000000000000000000..467bf31be711400bee23034f3c3d2a6dfc458077 --- /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 a657805557f7463252c28dbe1f125f54bba01992..28f852216bb07e631b4001cddf0036b1b182fc26 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 0000000000000000000000000000000000000000..96f96fb686faa571f3a6bbc53391b58f80979ea5 --- /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 0000000000000000000000000000000000000000..1407ce08c87d174bd15e3b7d1d6d10f98e47c82a --- /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 0000000000000000000000000000000000000000..cb896d683d30eddebab0b43fabca149d4a03d035 --- /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 0000000000000000000000000000000000000000..9b8091734b280ccc8c259415542090f4073e2a38 --- /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 0000000000000000000000000000000000000000..7f39d022fcfe7a4d5f8832fff69e3066a9264a47 --- /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: {}, + }) +}