diff --git a/.vscode/settings.json b/.vscode/settings.json index 3ca992d4a63289a6bf16276fae1483b76f17790c..bebf60a861ec7d68cb7291e9ffda595b275add63 100644 --- a/.vscode/settings.json +++ b/.vscode/settings.json @@ -142,6 +142,7 @@ "testid", "Tétris", "timestep", + "timesteps", "TIMESTEP", "UNCOMING", "Unstarted", diff --git a/package.json b/package.json index 790f8c1c0f2c075632d1bec60edc2f9ade564652..776b16ee9287c37d699f5ed3b64a1133df9393b4 100644 --- a/package.json +++ b/package.json @@ -115,7 +115,6 @@ "cozy-jobs-cli": "^2.0.0", "enzyme": "3.11.0", "enzyme-adapter-react-16": "1.15.7", - "enzyme-to-json": "^3.6.2", "eslint": "^8.49.0", "eslint-config-prettier": "^9.0.0", "eslint-plugin-jest": "^27.2.3", diff --git a/src/components/Connection/ExpiredConsentModal/ExpiredConsentModal.spec.tsx b/src/components/Connection/ExpiredConsentModal/ExpiredConsentModal.spec.tsx index ab0df6dcc0593ce40246251ac0df36376d72b145..cf6cc00505123e43982dd9e58a8caae962f7ca0e 100644 --- a/src/components/Connection/ExpiredConsentModal/ExpiredConsentModal.spec.tsx +++ b/src/components/Connection/ExpiredConsentModal/ExpiredConsentModal.spec.tsx @@ -14,7 +14,6 @@ jest.mock('react-router-dom', () => ({ useNavigate: () => mockedNavigate, })) const mockAppDispatch = jest.spyOn(storeHooks, 'useAppDispatch') -const mockToggleModal = jest.fn() const mockHandleCloseClick = jest.fn() describe('ExpiredConsentModal component', () => { @@ -23,17 +22,17 @@ describe('ExpiredConsentModal component', () => { jest.clearAllMocks() }) it('should be rendered correctly', () => { - const { container } = render( + const { baseElement } = render( <Provider store={store}> <ExpiredConsentModal open={true} handleCloseClick={jest.fn()} fluidType={FluidType.ELECTRICITY} - toggleModal={mockToggleModal} + toggleModal={jest.fn()} /> </Provider> ) - expect(container).toMatchSnapshot() + expect(baseElement).toMatchSnapshot() }) it('should launch the update consent process for GRDF', async () => { render( @@ -42,7 +41,7 @@ describe('ExpiredConsentModal component', () => { open={true} handleCloseClick={jest.fn()} fluidType={FluidType.GAS} - toggleModal={mockToggleModal} + toggleModal={jest.fn()} /> </Provider> ) @@ -62,7 +61,7 @@ describe('ExpiredConsentModal component', () => { open={true} handleCloseClick={jest.fn()} fluidType={FluidType.ELECTRICITY} - toggleModal={mockToggleModal} + toggleModal={jest.fn()} /> </Provider> ) @@ -79,7 +78,7 @@ describe('ExpiredConsentModal component', () => { open={true} handleCloseClick={mockHandleCloseClick} fluidType={FluidType.ELECTRICITY} - toggleModal={mockToggleModal} + toggleModal={jest.fn()} /> </Provider> ) diff --git a/src/components/Connection/ExpiredConsentModal/__snapshots__/ExpiredConsentModal.spec.tsx.snap b/src/components/Connection/ExpiredConsentModal/__snapshots__/ExpiredConsentModal.spec.tsx.snap index f600c7c130db6ca9dff8c4088724c93395a0a3d3..63df43d816ffddbb1d15973cdf1e753ca5127fa5 100644 --- a/src/components/Connection/ExpiredConsentModal/__snapshots__/ExpiredConsentModal.spec.tsx.snap +++ b/src/components/Connection/ExpiredConsentModal/__snapshots__/ExpiredConsentModal.spec.tsx.snap @@ -1,7 +1,135 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP exports[`ExpiredConsentModal component should be rendered correctly 1`] = ` -<div - aria-hidden="true" -/> +<body + style="padding-right: 0px; overflow: hidden;" +> + <div + aria-hidden="true" + /> + <div + class="MuiDialog-root modal-root" + role="presentation" + style="position: fixed; z-index: 1300; right: 0px; bottom: 0px; top: 0px; left: 0px;" + > + <div + aria-hidden="true" + class="MuiBackdrop-root" + style="opacity: 1; webkit-transition: opacity 225ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; transition: opacity 225ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;" + /> + <div + data-test="sentinelStart" + tabindex="0" + /> + <div + class="MuiDialog-container MuiDialog-scrollPaper" + role="none presentation" + style="opacity: 1; webkit-transition: opacity 225ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; transition: opacity 225ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;" + tabindex="-1" + > + <div + aria-labelledby="accessibility-title" + class="MuiPaper-root MuiDialog-paper modal-paper MuiDialog-paperScrollPaper MuiDialog-paperWidthSm MuiPaper-elevation24 MuiPaper-rounded" + role="dialog" + > + <div + id="accessibility-title" + > + consumption_visualizer.modal.window_title + </div> + <button + aria-label="consumption_visualizer.modal.close" + class="MuiButtonBase-root MuiIconButton-root modal-paper-close-button" + tabindex="0" + type="button" + > + <span + class="MuiIconButton-label" + > + <svg + class="styles__icon___23x3R" + height="16" + width="16" + > + <use + xlink:href="#test-file-stub" + /> + </svg> + </span> + <span + class="MuiTouchRipple-root" + /> + </button> + <div + class="expired-consent-modal" + > + <div + class="icon-main" + > + <svg + class="styles__icon___23x3R" + height="135" + width="135" + > + <use + xlink:href="#test-file-stub" + /> + </svg> + </div> + <div + class="text-20-bold title electricity" + > + consent_outdated.title.0 + </div> + <div> + consent_outdated.text1.0 + </div> + <div + class="text-16-bold" + > + consent_outdated.text2.0 + </div> + <div + class="buttons" + > + <button + aria-label="consent_outdated.later" + class="MuiButtonBase-root MuiButton-root MuiButton-text btnSecondary" + tabindex="0" + type="button" + > + <span + class="MuiButton-label" + > + consent_outdated.no + </span> + <span + class="MuiTouchRipple-root" + /> + </button> + <button + aria-label="consent_outdated.go" + class="MuiButtonBase-root MuiButton-root MuiButton-text btnPrimary" + tabindex="0" + type="button" + > + <span + class="MuiButton-label" + > + consent_outdated.yes + </span> + <span + class="MuiTouchRipple-root" + /> + </button> + </div> + </div> + </div> + </div> + <div + data-test="sentinelEnd" + tabindex="0" + /> + </div> +</body> `; diff --git a/src/components/Connection/GRDFDeleteAccountModal/DeleteGRDFAccountModal.spec.tsx b/src/components/Connection/GRDFDeleteAccountModal/DeleteGRDFAccountModal.spec.tsx index a2dc737bed579aed519340cd83a9210d901dec6d..9826c86b36f19a970fdf49bf23a18ff45ca65ae1 100644 --- a/src/components/Connection/GRDFDeleteAccountModal/DeleteGRDFAccountModal.spec.tsx +++ b/src/components/Connection/GRDFDeleteAccountModal/DeleteGRDFAccountModal.spec.tsx @@ -5,14 +5,14 @@ import DeleteGRDFAccountModal from './DeleteGRDFAccountModal' describe('DeleteGRDFAccountModal component', () => { it('should be rendered correctly', () => { - const { container } = render( + const { baseElement } = render( <DeleteGRDFAccountModal open={true} handleCloseClick={jest.fn()} deleteAccount={jest.fn()} /> ) - expect(container).toMatchSnapshot() + expect(baseElement).toMatchSnapshot() }) it('should launch the deletion process and close modal', async () => { const mockDelete = jest.fn() diff --git a/src/components/Connection/GRDFDeleteAccountModal/__snapshots__/DeleteGRDFAccountModal.spec.tsx.snap b/src/components/Connection/GRDFDeleteAccountModal/__snapshots__/DeleteGRDFAccountModal.spec.tsx.snap index fccb539c7f7e15d784baea2ddbee70b1e04f3155..e5abef42856191fc37712230da818725bbc1536b 100644 --- a/src/components/Connection/GRDFDeleteAccountModal/__snapshots__/DeleteGRDFAccountModal.spec.tsx.snap +++ b/src/components/Connection/GRDFDeleteAccountModal/__snapshots__/DeleteGRDFAccountModal.spec.tsx.snap @@ -1,7 +1,137 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP exports[`DeleteGRDFAccountModal component should be rendered correctly 1`] = ` -<div - aria-hidden="true" -/> +<body + style="padding-right: 0px; overflow: hidden;" +> + <div + aria-hidden="true" + /> + <div + class="MuiDialog-root modal-root" + role="presentation" + style="position: fixed; z-index: 1300; right: 0px; bottom: 0px; top: 0px; left: 0px;" + > + <div + aria-hidden="true" + class="MuiBackdrop-root" + style="opacity: 1; webkit-transition: opacity 225ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; transition: opacity 225ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;" + /> + <div + data-test="sentinelStart" + tabindex="0" + /> + <div + class="MuiDialog-container MuiDialog-scrollPaper" + role="none presentation" + style="opacity: 1; webkit-transition: opacity 225ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; transition: opacity 225ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;" + tabindex="-1" + > + <div + aria-labelledby="accessibility-title" + class="MuiPaper-root MuiDialog-paper modal-paper MuiDialog-paperScrollPaper MuiDialog-paperWidthSm MuiPaper-elevation24 MuiPaper-rounded" + role="dialog" + > + <div + id="accessibility-title" + > + consumption_visualizer.modal.window_title + </div> + <button + aria-label="consumption_visualizer.modal.close" + class="MuiButtonBase-root MuiIconButton-root modal-paper-close-button" + tabindex="0" + type="button" + > + <span + class="MuiIconButton-label" + > + <svg + class="styles__icon___23x3R" + height="16" + width="16" + > + <use + xlink:href="#test-file-stub" + /> + </svg> + </span> + <span + class="MuiTouchRipple-root" + /> + </button> + <div + class="delete-grdf-modal" + > + <div + class="icon-main" + > + <svg + class="styles__icon___23x3R" + height="135" + width="135" + > + <use + xlink:href="#test-file-stub" + /> + </svg> + </div> + <div + class="text-15-normal text1" + > + delete_grdf_modal.text1 + </div> + <div + class="text-16-normal text2" + > + delete_grdf_modal.text2 + </div> + <div + class="text-15-normal text3" + > + delete_grdf_modal.text3 + </div> + <div + class="buttons" + > + <button + aria-label="delete_grdf_modal.cancel" + class="MuiButtonBase-root MuiButton-root MuiButton-text btnSecondary" + tabindex="0" + type="button" + > + <span + class="MuiButton-label" + > + delete_grdf_modal.cancel + </span> + <span + class="MuiTouchRipple-root" + /> + </button> + <button + aria-label="delete_grdf_modal.go" + class="MuiButtonBase-root MuiButton-root MuiButton-text btnPrimary" + tabindex="0" + type="button" + > + <span + class="MuiButton-label" + > + delete_grdf_modal.go + </span> + <span + class="MuiTouchRipple-root" + /> + </button> + </div> + </div> + </div> + </div> + <div + data-test="sentinelEnd" + tabindex="0" + /> + </div> +</body> `; diff --git a/src/components/ConsumptionVisualizer/NoDataModal.spec.tsx b/src/components/ConsumptionVisualizer/NoDataModal.spec.tsx index 50e7cddf1f334da7c3ff332e1a7e77b328524e80..c9ff69e6525aa1d2e4a0dbf18c4f52017af31b9c 100644 --- a/src/components/ConsumptionVisualizer/NoDataModal.spec.tsx +++ b/src/components/ConsumptionVisualizer/NoDataModal.spec.tsx @@ -4,9 +4,9 @@ import NoDataModal from './NoDataModal' describe('NoDataModal component', () => { it('should render correctly', async () => { - const { container } = render( + const { baseElement } = render( <NoDataModal open={true} handleCloseClick={jest.fn()} /> ) - expect(container).toMatchSnapshot() + expect(baseElement).toMatchSnapshot() }) }) diff --git a/src/components/ConsumptionVisualizer/__snapshots__/NoDataModal.spec.tsx.snap b/src/components/ConsumptionVisualizer/__snapshots__/NoDataModal.spec.tsx.snap index 051488da021c91f20999a61614d2b53a0a6e573c..971b2e6f4b797334794ace1f0a9db07b5491ff43 100644 --- a/src/components/ConsumptionVisualizer/__snapshots__/NoDataModal.spec.tsx.snap +++ b/src/components/ConsumptionVisualizer/__snapshots__/NoDataModal.spec.tsx.snap @@ -1,7 +1,127 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP exports[`NoDataModal component should render correctly 1`] = ` -<div - aria-hidden="true" -/> +<body + style="padding-right: 0px; overflow: hidden;" +> + <div + aria-hidden="true" + /> + <div + class="MuiDialog-root modal-root" + role="presentation" + style="position: fixed; z-index: 1300; right: 0px; bottom: 0px; top: 0px; left: 0px;" + > + <div + aria-hidden="true" + class="MuiBackdrop-root" + style="opacity: 1; webkit-transition: opacity 225ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; transition: opacity 225ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;" + /> + <div + data-test="sentinelStart" + tabindex="0" + /> + <div + class="MuiDialog-container MuiDialog-scrollPaper" + role="none presentation" + style="opacity: 1; webkit-transition: opacity 225ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; transition: opacity 225ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;" + tabindex="-1" + > + <div + aria-labelledby="accessibility-title" + class="MuiPaper-root MuiDialog-paper modal-paper MuiDialog-paperScrollPaper MuiDialog-paperWidthSm MuiPaper-elevation24 MuiPaper-rounded" + role="dialog" + > + <div + id="accessibility-title" + > + consumption_visualizer.modal.window_title + </div> + <button + aria-label="consumption_visualizer.modal.close" + class="MuiButtonBase-root MuiIconButton-root modal-paper-close-button" + tabindex="0" + type="button" + > + <span + class="MuiIconButton-label" + > + <svg + class="styles__icon___23x3R" + height="16" + width="16" + > + <use + xlink:href="#test-file-stub" + /> + </svg> + </span> + <span + class="MuiTouchRipple-root" + /> + </button> + <div + class="nodata-modal" + > + <div + class="question-mark" + > + <svg + class="styles__icon___23x3R" + height="36" + width="36" + > + <use + xlink:href="#test-file-stub" + /> + </svg> + </div> + <div + class="text-20-normal title" + > + consumption_visualizer.why_no_data + </div> + <div + class="text-16-normal" + > + consumption_visualizer.dataModal.list_title + </div> + <ul> + <li> + consumption_visualizer.dataModal.item1 + </li> + <li> + consumption_visualizer.dataModal.item2 + </li> + <li> + consumption_visualizer.dataModal.item3 + </li> + <li> + consumption_visualizer.dataModal.item4 + </li> + </ul> + <button + aria-label="ecogesture_info_modal.button_close" + class="MuiButtonBase-root MuiButton-root MuiButton-text btnPrimary" + tabindex="0" + type="button" + > + <span + class="MuiButton-label" + > + ecogesture_info_modal.button_close + </span> + <span + class="MuiTouchRipple-root" + /> + </button> + </div> + </div> + </div> + <div + data-test="sentinelEnd" + tabindex="0" + /> + </div> +</body> `; diff --git a/src/components/DateNavigator/DateNavigator.spec.tsx b/src/components/DateNavigator/DateNavigator.spec.tsx index 4f26b7be1a47c5e48378b25712069ade3571ef97..1708d74e8b7efe019174f6b90eddb8126c5acab5 100644 --- a/src/components/DateNavigator/DateNavigator.spec.tsx +++ b/src/components/DateNavigator/DateNavigator.spec.tsx @@ -1,5 +1,5 @@ import { render, screen } from '@testing-library/react' -import { userEvent } from '@testing-library/user-event' +import userEvent from '@testing-library/user-event' import { TimeStep } from 'enums' import { DateTime } from 'luxon' import React from 'react' diff --git a/src/components/Duel/DuelError/DuelError.spec.tsx b/src/components/Duel/DuelError/DuelError.spec.tsx index c8763df63e5fbb524b73033abcabce425d044f75..7e2f3d3ee2a67e00a24793530c55245205d474d7 100644 --- a/src/components/Duel/DuelError/DuelError.spec.tsx +++ b/src/components/Duel/DuelError/DuelError.spec.tsx @@ -1,10 +1,10 @@ -import { shallow } from 'enzyme' +import { render } from '@testing-library/react' import React from 'react' import DuelError from './DuelError' describe('DuelError component', () => { it('should be rendered correctly', () => { - const component = shallow(<DuelError />).getElement() - expect(component).toMatchSnapshot() + const { container } = render(<DuelError />) + expect(container).toMatchSnapshot() }) }) diff --git a/src/components/Duel/DuelError/__snapshots__/DuelError.spec.tsx.snap b/src/components/Duel/DuelError/__snapshots__/DuelError.spec.tsx.snap index 9274f35b21ddc379c85abaf5a643ec2b3dd3f535..4680b10b3f5a98ffc276d6707a66fcd1045dee4d 100644 --- a/src/components/Duel/DuelError/__snapshots__/DuelError.spec.tsx.snap +++ b/src/components/Duel/DuelError/__snapshots__/DuelError.spec.tsx.snap @@ -1,24 +1,34 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP exports[`DuelError component should be rendered correctly 1`] = ` -<div - className="duel-error-container" -> +<div> <div - className="duel-error-message" + class="duel-error-container" > - duel.global_error - </div> - <div - className="duel-error-button" - > - <WithStyles(ForwardRef(Button)) - aria-label="duel.accessibility.button_go_back" - className="btnSecondary" - onClick={[Function]} + <div + class="duel-error-message" + > + duel.global_error + </div> + <div + class="duel-error-button" > - duel.button_go_back - </WithStyles(ForwardRef(Button))> + <button + aria-label="duel.accessibility.button_go_back" + class="MuiButtonBase-root MuiButton-root MuiButton-text btnSecondary" + tabindex="0" + type="button" + > + <span + class="MuiButton-label" + > + duel.button_go_back + </span> + <span + class="MuiTouchRipple-root" + /> + </button> + </div> </div> </div> `; diff --git a/src/components/Duel/DuelResultModal/DuelResultModal.spec.tsx b/src/components/Duel/DuelResultModal/DuelResultModal.spec.tsx index 4a73f4cf35e6d2c5551678bb6a8639c2fdf4607c..e107a11882ffe40520dafa7e02130f7cf1a23952 100644 --- a/src/components/Duel/DuelResultModal/DuelResultModal.spec.tsx +++ b/src/components/Duel/DuelResultModal/DuelResultModal.spec.tsx @@ -1,13 +1,13 @@ +import { render } from '@testing-library/react' import { mount } from 'enzyme' -import toJson from 'enzyme-to-json' import React from 'react' import { waitForComponentToPaint } from 'tests/__mocks__/testUtils' import { userChallengeData } from 'tests/__mocks__/userChallengeData.mock' import DuelResultModal from './DuelResultModal' describe('DuelResultModal component', () => { - it('should render correctly', async () => { - const wrapper = mount( + it('should render correctly', () => { + const { baseElement } = render( <DuelResultModal open={true} handleCloseClick={jest.fn()} @@ -15,8 +15,7 @@ describe('DuelResultModal component', () => { win={true} /> ) - await waitForComponentToPaint(wrapper) - expect(toJson(wrapper)).toMatchSnapshot() + expect(baseElement).toMatchSnapshot() }) it('should render a loss modal', async () => { const wrapper = mount( diff --git a/src/components/Duel/DuelResultModal/__snapshots__/DuelResultModal.spec.tsx.snap b/src/components/Duel/DuelResultModal/__snapshots__/DuelResultModal.spec.tsx.snap index f8d9e72b69362e0156b0c3b5eb3bce59263180aa..aa23ded2d78cd0d202f78d5202ed92f1a4540c17 100644 --- a/src/components/Duel/DuelResultModal/__snapshots__/DuelResultModal.spec.tsx.snap +++ b/src/components/Duel/DuelResultModal/__snapshots__/DuelResultModal.spec.tsx.snap @@ -1,1039 +1,104 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP exports[`DuelResultModal component should render correctly 1`] = ` -<DuelResultModal - handleCloseClick={[MockFunction]} - open={true} - userChallenge={ - Object { - "action": Object { - "ecogesture": null, - "startDate": null, - "state": 0, - }, - "description": "Description challenge 2", - "duel": Object { - "description": "Je parie un ours polaire que vous ne pouvez pas consommer moins que #CONSUMPTION € en 1 semaine", - "duration": "P30D", - "fluidTypes": Array [], - "id": "DUEL001", - "startDate": null, - "state": 0, - "threshold": 0, - "title": "Title DUEL001", - "userConsumption": 0, - }, - "endingDate": null, - "exploration": Object { - "complementary_description": "Refaire un tour dans son profil si déjà fait", - "date": null, - "description": "Avoir complété son profil", - "ecogesture_id": "", - "fluid_condition": Array [], - "id": "EXPLORATION001", - "message_success": "Vous avez complété votre profil ou refait un tour dans votre profil", - "progress": 0, - "state": 0, - "target": 1, - "type": 1, - }, - "id": "CHALLENGE0002", - "progress": Object { - "actionProgress": 0, - "explorationProgress": 0, - "quizProgress": 0, - }, - "quiz": Object { - "customQuestion": Object { - "interval": 20, - "period": Object {}, - "questionLabel": "Custom1", - "result": 0, - "singleFluid": false, - "timeStep": 20, - "type": 0, - }, - "id": "QUIZ001", - "questions": Array [ - Object { - "answers": Array [ - Object { - "answerLabel": "86 km", - "isTrue": true, - }, - Object { - "answerLabel": "78 km", - "isTrue": false, - }, - Object { - "answerLabel": "56 km", - "isTrue": false, - }, - ], - "explanation": "L’aqueduc du Gier est un des aqueducs antiques de Lyon desservant la ville antique de Lugdunum. Avec ses 86 km il est le plus long des quatre aqueducs ayant alimenté la ville en eau, et celui dont les structures sont le mieux conservées. Il doit son nom au fait qu'il puise aux sources du Gier, affluent du Rhône", - "questionLabel": "Quelle longueur faisait l’aqueduc du Gier pour acheminer l’eau sur Lyon à l’époque romaine ?", - "result": 0, - "source": "string", - }, - Object { - "answers": Array [ - Object { - "answerLabel": "1 point d’eau public pour 800 habitants.", - "isTrue": true, - }, - Object { - "answerLabel": "1 point d’eau public pour 400 habitants.", - "isTrue": false, - }, - Object { - "answerLabel": "1 point d’eau public pour 200 habitants.", - "isTrue": false, - }, - ], - "explanation": "string", - "questionLabel": "En 1800 à Lyon, combien de points d'eau y avait-il par habitants ?", - "result": 0, - "source": "string", - }, - Object { - "answers": Array [ - Object { - "answerLabel": "François Mitterrand", - "isTrue": false, - }, - Object { - "answerLabel": "Napoléon Ier", - "isTrue": true, - }, - Object { - "answerLabel": "Napoléon III", - "isTrue": false, - }, - ], - "explanation": "string", - "questionLabel": "Qui officialise la création de la Compagnie Générale des eaux ?", - "result": 0, - "source": "string", - }, - Object { - "answers": Array [ - Object { - "answerLabel": "string", - "isTrue": false, - }, - Object { - "answerLabel": "string", - "isTrue": false, - }, - Object { - "answerLabel": "Aristide Dumont", - "isTrue": true, - }, - ], - "explanation": "string", - "questionLabel": "Quel ingénieur est à l’origine du projet d’alimentation en eau en 1856 ?", - "result": 0, - "source": "string", - }, - ], - "result": 0, - "startDate": null, - "state": 0, - }, - "startDate": null, - "state": 4, - "success": 1, - "target": 15, - "title": "Challenge 2", - } - } - win={true} +<body + style="padding-right: 0px; overflow: hidden;" > - <WithStyles(ForwardRef(Dialog)) - aria-labelledby="accessibility-title" - classes={ - Object { - "paper": "modal-paper blue-border", - "root": "modal-root", - } - } - onClose={[MockFunction]} - open={true} + <div + aria-hidden="true" + /> + <div + class="MuiDialog-root modal-root" + role="presentation" + style="position: fixed; z-index: 1300; right: 0px; bottom: 0px; top: 0px; left: 0px;" > - <ForwardRef(Dialog) - aria-labelledby="accessibility-title" - classes={ - Object { - "container": "MuiDialog-container", - "paper": "MuiDialog-paper modal-paper blue-border", - "paperFullScreen": "MuiDialog-paperFullScreen", - "paperFullWidth": "MuiDialog-paperFullWidth", - "paperScrollBody": "MuiDialog-paperScrollBody", - "paperScrollPaper": "MuiDialog-paperScrollPaper", - "paperWidthFalse": "MuiDialog-paperWidthFalse", - "paperWidthLg": "MuiDialog-paperWidthLg", - "paperWidthMd": "MuiDialog-paperWidthMd", - "paperWidthSm": "MuiDialog-paperWidthSm", - "paperWidthXl": "MuiDialog-paperWidthXl", - "paperWidthXs": "MuiDialog-paperWidthXs", - "root": "MuiDialog-root modal-root", - "scrollBody": "MuiDialog-scrollBody", - "scrollPaper": "MuiDialog-scrollPaper", - } - } - onClose={[MockFunction]} - open={true} + <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" > - <ForwardRef(Modal) - BackdropComponent={ - Object { - "$$typeof": Symbol(react.forward_ref), - "Naked": Object { - "$$typeof": Symbol(react.forward_ref), - "propTypes": Object { - "children": [Function], - "className": [Function], - "classes": [Function], - "invisible": [Function], - "open": [Function], - "transitionDuration": [Function], - }, - "render": [Function], - }, - "displayName": "WithStyles(ForwardRef(Backdrop))", - "options": Object { - "defaultTheme": Object { - "breakpoints": Object { - "between": [Function], - "down": [Function], - "keys": Array [ - "xs", - "sm", - "md", - "lg", - "xl", - ], - "only": [Function], - "up": [Function], - "values": Object { - "lg": 1280, - "md": 960, - "sm": 600, - "xl": 1920, - "xs": 0, - }, - "width": [Function], - }, - "direction": "ltr", - "mixins": Object { - "gutters": [Function], - "toolbar": Object { - "@media (min-width:0px) and (orientation: landscape)": Object { - "minHeight": 48, - }, - "@media (min-width:600px)": Object { - "minHeight": 64, - }, - "minHeight": 56, - }, - }, - "overrides": Object {}, - "palette": Object { - "action": Object { - "activatedOpacity": 0.12, - "active": "rgba(0, 0, 0, 0.54)", - "disabled": "rgba(0, 0, 0, 0.26)", - "disabledBackground": "rgba(0, 0, 0, 0.12)", - "disabledOpacity": 0.38, - "focus": "rgba(0, 0, 0, 0.12)", - "focusOpacity": 0.12, - "hover": "rgba(0, 0, 0, 0.04)", - "hoverOpacity": 0.04, - "selected": "rgba(0, 0, 0, 0.08)", - "selectedOpacity": 0.08, - }, - "augmentColor": [Function], - "background": Object { - "default": "#fafafa", - "paper": "#fff", - }, - "common": Object { - "black": "#000", - "white": "#fff", - }, - "contrastThreshold": 3, - "divider": "rgba(0, 0, 0, 0.12)", - "error": Object { - "contrastText": "#fff", - "dark": "#d32f2f", - "light": "#e57373", - "main": "#f44336", - }, - "getContrastText": [Function], - "grey": Object { - "100": "#f5f5f5", - "200": "#eeeeee", - "300": "#e0e0e0", - "400": "#bdbdbd", - "50": "#fafafa", - "500": "#9e9e9e", - "600": "#757575", - "700": "#616161", - "800": "#424242", - "900": "#212121", - "A100": "#d5d5d5", - "A200": "#aaaaaa", - "A400": "#303030", - "A700": "#616161", - }, - "info": Object { - "contrastText": "#fff", - "dark": "#1976d2", - "light": "#64b5f6", - "main": "#2196f3", - }, - "primary": Object { - "contrastText": "#fff", - "dark": "#303f9f", - "light": "#7986cb", - "main": "#3f51b5", - }, - "secondary": Object { - "contrastText": "#fff", - "dark": "#c51162", - "light": "#ff4081", - "main": "#f50057", - }, - "success": Object { - "contrastText": "rgba(0, 0, 0, 0.87)", - "dark": "#388e3c", - "light": "#81c784", - "main": "#4caf50", - }, - "text": Object { - "disabled": "rgba(0, 0, 0, 0.38)", - "hint": "rgba(0, 0, 0, 0.38)", - "primary": "rgba(0, 0, 0, 0.87)", - "secondary": "rgba(0, 0, 0, 0.54)", - }, - "tonalOffset": 0.2, - "type": "light", - "warning": Object { - "contrastText": "rgba(0, 0, 0, 0.87)", - "dark": "#f57c00", - "light": "#ffb74d", - "main": "#ff9800", - }, - }, - "props": Object {}, - "shadows": Array [ - "none", - "0px 2px 1px -1px rgba(0,0,0,0.2),0px 1px 1px 0px rgba(0,0,0,0.14),0px 1px 3px 0px rgba(0,0,0,0.12)", - "0px 3px 1px -2px rgba(0,0,0,0.2),0px 2px 2px 0px rgba(0,0,0,0.14),0px 1px 5px 0px rgba(0,0,0,0.12)", - "0px 3px 3px -2px rgba(0,0,0,0.2),0px 3px 4px 0px rgba(0,0,0,0.14),0px 1px 8px 0px rgba(0,0,0,0.12)", - "0px 2px 4px -1px rgba(0,0,0,0.2),0px 4px 5px 0px rgba(0,0,0,0.14),0px 1px 10px 0px rgba(0,0,0,0.12)", - "0px 3px 5px -1px rgba(0,0,0,0.2),0px 5px 8px 0px rgba(0,0,0,0.14),0px 1px 14px 0px rgba(0,0,0,0.12)", - "0px 3px 5px -1px rgba(0,0,0,0.2),0px 6px 10px 0px rgba(0,0,0,0.14),0px 1px 18px 0px rgba(0,0,0,0.12)", - "0px 4px 5px -2px rgba(0,0,0,0.2),0px 7px 10px 1px rgba(0,0,0,0.14),0px 2px 16px 1px rgba(0,0,0,0.12)", - "0px 5px 5px -3px rgba(0,0,0,0.2),0px 8px 10px 1px rgba(0,0,0,0.14),0px 3px 14px 2px rgba(0,0,0,0.12)", - "0px 5px 6px -3px rgba(0,0,0,0.2),0px 9px 12px 1px rgba(0,0,0,0.14),0px 3px 16px 2px rgba(0,0,0,0.12)", - "0px 6px 6px -3px rgba(0,0,0,0.2),0px 10px 14px 1px rgba(0,0,0,0.14),0px 4px 18px 3px rgba(0,0,0,0.12)", - "0px 6px 7px -4px rgba(0,0,0,0.2),0px 11px 15px 1px rgba(0,0,0,0.14),0px 4px 20px 3px rgba(0,0,0,0.12)", - "0px 7px 8px -4px rgba(0,0,0,0.2),0px 12px 17px 2px rgba(0,0,0,0.14),0px 5px 22px 4px rgba(0,0,0,0.12)", - "0px 7px 8px -4px rgba(0,0,0,0.2),0px 13px 19px 2px rgba(0,0,0,0.14),0px 5px 24px 4px rgba(0,0,0,0.12)", - "0px 7px 9px -4px rgba(0,0,0,0.2),0px 14px 21px 2px rgba(0,0,0,0.14),0px 5px 26px 4px rgba(0,0,0,0.12)", - "0px 8px 9px -5px rgba(0,0,0,0.2),0px 15px 22px 2px rgba(0,0,0,0.14),0px 6px 28px 5px rgba(0,0,0,0.12)", - "0px 8px 10px -5px rgba(0,0,0,0.2),0px 16px 24px 2px rgba(0,0,0,0.14),0px 6px 30px 5px rgba(0,0,0,0.12)", - "0px 8px 11px -5px rgba(0,0,0,0.2),0px 17px 26px 2px rgba(0,0,0,0.14),0px 6px 32px 5px rgba(0,0,0,0.12)", - "0px 9px 11px -5px rgba(0,0,0,0.2),0px 18px 28px 2px rgba(0,0,0,0.14),0px 7px 34px 6px rgba(0,0,0,0.12)", - "0px 9px 12px -6px rgba(0,0,0,0.2),0px 19px 29px 2px rgba(0,0,0,0.14),0px 7px 36px 6px rgba(0,0,0,0.12)", - "0px 10px 13px -6px rgba(0,0,0,0.2),0px 20px 31px 3px rgba(0,0,0,0.14),0px 8px 38px 7px rgba(0,0,0,0.12)", - "0px 10px 13px -6px rgba(0,0,0,0.2),0px 21px 33px 3px rgba(0,0,0,0.14),0px 8px 40px 7px rgba(0,0,0,0.12)", - "0px 10px 14px -6px rgba(0,0,0,0.2),0px 22px 35px 3px rgba(0,0,0,0.14),0px 8px 42px 7px rgba(0,0,0,0.12)", - "0px 11px 14px -7px rgba(0,0,0,0.2),0px 23px 36px 3px rgba(0,0,0,0.14),0px 9px 44px 8px rgba(0,0,0,0.12)", - "0px 11px 15px -7px rgba(0,0,0,0.2),0px 24px 38px 3px rgba(0,0,0,0.14),0px 9px 46px 8px rgba(0,0,0,0.12)", - ], - "shape": Object { - "borderRadius": 4, - }, - "spacing": [Function], - "transitions": Object { - "create": [Function], - "duration": Object { - "complex": 375, - "enteringScreen": 225, - "leavingScreen": 195, - "short": 250, - "shorter": 200, - "shortest": 150, - "standard": 300, - }, - "easing": Object { - "easeIn": "cubic-bezier(0.4, 0, 1, 1)", - "easeInOut": "cubic-bezier(0.4, 0, 0.2, 1)", - "easeOut": "cubic-bezier(0.0, 0, 0.2, 1)", - "sharp": "cubic-bezier(0.4, 0, 0.6, 1)", - }, - "getAutoHeightDuration": [Function], - }, - "typography": Object { - "body1": Object { - "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif", - "fontSize": "1rem", - "fontWeight": 400, - "letterSpacing": "0.00938em", - "lineHeight": 1.5, - }, - "body2": Object { - "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif", - "fontSize": "0.875rem", - "fontWeight": 400, - "letterSpacing": "0.01071em", - "lineHeight": 1.43, - }, - "button": Object { - "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif", - "fontSize": "0.875rem", - "fontWeight": 500, - "letterSpacing": "0.02857em", - "lineHeight": 1.75, - "textTransform": "uppercase", - }, - "caption": Object { - "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif", - "fontSize": "0.75rem", - "fontWeight": 400, - "letterSpacing": "0.03333em", - "lineHeight": 1.66, - }, - "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif", - "fontSize": 14, - "fontWeightBold": 700, - "fontWeightLight": 300, - "fontWeightMedium": 500, - "fontWeightRegular": 400, - "h1": Object { - "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif", - "fontSize": "6rem", - "fontWeight": 300, - "letterSpacing": "-0.01562em", - "lineHeight": 1.167, - }, - "h2": Object { - "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif", - "fontSize": "3.75rem", - "fontWeight": 300, - "letterSpacing": "-0.00833em", - "lineHeight": 1.2, - }, - "h3": Object { - "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif", - "fontSize": "3rem", - "fontWeight": 400, - "letterSpacing": "0em", - "lineHeight": 1.167, - }, - "h4": Object { - "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif", - "fontSize": "2.125rem", - "fontWeight": 400, - "letterSpacing": "0.00735em", - "lineHeight": 1.235, - }, - "h5": Object { - "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif", - "fontSize": "1.5rem", - "fontWeight": 400, - "letterSpacing": "0em", - "lineHeight": 1.334, - }, - "h6": Object { - "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif", - "fontSize": "1.25rem", - "fontWeight": 500, - "letterSpacing": "0.0075em", - "lineHeight": 1.6, - }, - "htmlFontSize": 16, - "overline": Object { - "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif", - "fontSize": "0.75rem", - "fontWeight": 400, - "letterSpacing": "0.08333em", - "lineHeight": 2.66, - "textTransform": "uppercase", - }, - "pxToRem": [Function], - "round": [Function], - "subtitle1": Object { - "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif", - "fontSize": "1rem", - "fontWeight": 400, - "letterSpacing": "0.00938em", - "lineHeight": 1.75, - }, - "subtitle2": Object { - "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif", - "fontSize": "0.875rem", - "fontWeight": 500, - "letterSpacing": "0.00714em", - "lineHeight": 1.57, - }, - }, - "zIndex": Object { - "appBar": 1100, - "drawer": 1200, - "mobileStepper": 1000, - "modal": 1300, - "snackbar": 1400, - "speedDial": 1050, - "tooltip": 1500, - }, - }, - "name": "MuiBackdrop", - }, - "propTypes": Object { - "classes": [Function], - "innerRef": [Function], - }, - "render": [Function], - "useStyles": [Function], - } - } - BackdropProps={ - Object { - "transitionDuration": Object { - "enter": 225, - "exit": 195, - }, - } - } - className="MuiDialog-root modal-root" - closeAfterTransition={true} - disableEscapeKeyDown={false} - onClose={[MockFunction]} - open={true} + <div + aria-labelledby="accessibility-title" + class="MuiPaper-root MuiDialog-paper modal-paper blue-border MuiDialog-paperScrollPaper MuiDialog-paperWidthSm MuiPaper-elevation24 MuiPaper-rounded" + role="dialog" > - <ForwardRef(Portal) - disablePortal={false} + <div + id="accessibility-title" > - <Portal - containerInfo={ - <body - style="padding-right: 0px; overflow: hidden;" - > - <div - class="MuiDialog-root modal-root" - role="presentation" - style="position: fixed; z-index: 1300; right: 0px; bottom: 0px; top: 0px; left: 0px;" - > - <div - aria-hidden="true" - class="MuiBackdrop-root" - style="opacity: 1; webkit-transition: opacity 225ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; transition: opacity 225ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;" - /> - <div - data-test="sentinelStart" - tabindex="0" - /> - <div - class="MuiDialog-container MuiDialog-scrollPaper" - role="none presentation" - style="opacity: 1; webkit-transition: opacity 225ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; transition: opacity 225ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;" - tabindex="-1" - > - <div - aria-labelledby="accessibility-title" - class="MuiPaper-root MuiDialog-paper modal-paper blue-border MuiDialog-paperScrollPaper MuiDialog-paperWidthSm MuiPaper-elevation24 MuiPaper-rounded" - role="dialog" - > - <div - id="accessibility-title" - > - duel_result_modal.accessibility.window_title - </div> - <div - class="duel-result-modal-root" - > - <div - class="imgResultContainer" - > - <svg - class="challengeWon styles__icon___23x3R" - height="300" - width="300" - > - <use - xlink:href="#test-file-stub" - /> - </svg> - <svg - class="imgResult styles__icon___23x3R" - height="180" - width="180" - > - <use - xlink:href="#test-file-stub" - /> - </svg> - </div> - <div - class="text-28-normal-uppercase title" - > - duel_result_modal.success.title - </div> - <div - class="text-18-bold" - > - duel_result_modal.success.message1 - </div> - <div - class="text-18-bold" - > - duel_result_modal.success.message2 - </div> - <button - aria-label="duel_result_modal.accessibility.button_validate" - class="MuiButtonBase-root MuiButton-root MuiButton-text btnSecondary" - tabindex="0" - type="button" - > - <span - class="MuiButton-label" - > - duel_result_modal.success.button_validate - </span> - <span - class="MuiTouchRipple-root" - /> - </button> - </div> - </div> - </div> - <div - data-test="sentinelEnd" - tabindex="0" - /> - </div> - </body> - } + duel_result_modal.accessibility.window_title + </div> + <div + class="duel-result-modal-root" + > + <div + class="imgResultContainer" + > + <svg + class="challengeWon styles__icon___23x3R" + height="300" + width="300" + > + <use + xlink:href="#test-file-stub" + /> + </svg> + <svg + class="imgResult styles__icon___23x3R" + height="180" + width="180" + > + <use + xlink:href="#test-file-stub" + /> + </svg> + </div> + <div + class="text-28-normal-uppercase title" + > + duel_result_modal.success.title + </div> + <div + class="text-18-bold" + > + duel_result_modal.success.message1 + </div> + <div + class="text-18-bold" + > + duel_result_modal.success.message2 + </div> + <button + aria-label="duel_result_modal.accessibility.button_validate" + class="MuiButtonBase-root MuiButton-root MuiButton-text btnSecondary" + tabindex="0" + type="button" > - <div - className="MuiDialog-root modal-root" - onKeyDown={[Function]} - role="presentation" - style={ - Object { - "bottom": 0, - "left": 0, - "position": "fixed", - "right": 0, - "top": 0, - "zIndex": 1300, - } - } + <span + class="MuiButton-label" > - <WithStyles(ForwardRef(Backdrop)) - onClick={[Function]} - open={true} - transitionDuration={ - Object { - "enter": 225, - "exit": 195, - } - } - > - <ForwardRef(Backdrop) - classes={ - Object { - "invisible": "MuiBackdrop-invisible", - "root": "MuiBackdrop-root", - } - } - onClick={[Function]} - open={true} - transitionDuration={ - Object { - "enter": 225, - "exit": 195, - } - } - > - <ForwardRef(Fade) - in={true} - onClick={[Function]} - timeout={ - Object { - "enter": 225, - "exit": 195, - } - } - > - <Transition - appear={true} - enter={true} - exit={true} - in={true} - mountOnEnter={false} - onClick={[Function]} - onEnter={[Function]} - onEntered={[Function]} - onEntering={[Function]} - onExit={[Function]} - onExited={[Function]} - onExiting={[Function]} - timeout={ - Object { - "enter": 225, - "exit": 195, - } - } - unmountOnExit={false} - > - <div - aria-hidden={true} - className="MuiBackdrop-root" - onClick={[Function]} - style={ - Object { - "opacity": 1, - "visibility": undefined, - } - } - /> - </Transition> - </ForwardRef(Fade)> - </ForwardRef(Backdrop)> - </WithStyles(ForwardRef(Backdrop))> - <Unstable_TrapFocus - disableAutoFocus={false} - disableEnforceFocus={false} - disableRestoreFocus={false} - getDoc={[Function]} - isEnabled={[Function]} - open={true} - > - <div - data-test="sentinelStart" - tabIndex={0} - /> - <ForwardRef(Fade) - appear={true} - in={true} - onEnter={[Function]} - onExited={[Function]} - role="none presentation" - tabIndex="-1" - timeout={ - Object { - "enter": 225, - "exit": 195, - } - } - > - <Transition - appear={true} - enter={true} - exit={true} - in={true} - mountOnEnter={false} - onEnter={[Function]} - onEntered={[Function]} - onEntering={[Function]} - onExit={[Function]} - onExited={[Function]} - onExiting={[Function]} - role="none presentation" - tabIndex="-1" - timeout={ - Object { - "enter": 225, - "exit": 195, - } - } - unmountOnExit={false} - > - <div - className="MuiDialog-container MuiDialog-scrollPaper" - onMouseDown={[Function]} - onMouseUp={[Function]} - role="none presentation" - style={ - Object { - "opacity": 1, - "visibility": undefined, - } - } - tabIndex="-1" - > - <WithStyles(ForwardRef(Paper)) - aria-labelledby="accessibility-title" - className="MuiDialog-paper modal-paper blue-border MuiDialog-paperScrollPaper MuiDialog-paperWidthSm" - elevation={24} - role="dialog" - > - <ForwardRef(Paper) - aria-labelledby="accessibility-title" - className="MuiDialog-paper modal-paper blue-border MuiDialog-paperScrollPaper MuiDialog-paperWidthSm" - classes={ - Object { - "elevation0": "MuiPaper-elevation0", - "elevation1": "MuiPaper-elevation1", - "elevation10": "MuiPaper-elevation10", - "elevation11": "MuiPaper-elevation11", - "elevation12": "MuiPaper-elevation12", - "elevation13": "MuiPaper-elevation13", - "elevation14": "MuiPaper-elevation14", - "elevation15": "MuiPaper-elevation15", - "elevation16": "MuiPaper-elevation16", - "elevation17": "MuiPaper-elevation17", - "elevation18": "MuiPaper-elevation18", - "elevation19": "MuiPaper-elevation19", - "elevation2": "MuiPaper-elevation2", - "elevation20": "MuiPaper-elevation20", - "elevation21": "MuiPaper-elevation21", - "elevation22": "MuiPaper-elevation22", - "elevation23": "MuiPaper-elevation23", - "elevation24": "MuiPaper-elevation24", - "elevation3": "MuiPaper-elevation3", - "elevation4": "MuiPaper-elevation4", - "elevation5": "MuiPaper-elevation5", - "elevation6": "MuiPaper-elevation6", - "elevation7": "MuiPaper-elevation7", - "elevation8": "MuiPaper-elevation8", - "elevation9": "MuiPaper-elevation9", - "outlined": "MuiPaper-outlined", - "root": "MuiPaper-root", - "rounded": "MuiPaper-rounded", - } - } - elevation={24} - role="dialog" - > - <div - aria-labelledby="accessibility-title" - className="MuiPaper-root MuiDialog-paper modal-paper blue-border MuiDialog-paperScrollPaper MuiDialog-paperWidthSm MuiPaper-elevation24 MuiPaper-rounded" - role="dialog" - > - <div - id="accessibility-title" - > - duel_result_modal.accessibility.window_title - </div> - <div - className="duel-result-modal-root" - > - <div - className="imgResultContainer" - > - <Icon - className="challengeWon" - icon="test-file-stub" - size={300} - spin={false} - > - <Component - className="challengeWon styles__icon___23x3R" - height={300} - style={Object {}} - width={300} - > - <svg - className="challengeWon styles__icon___23x3R" - height={300} - style={Object {}} - width={300} - > - <use - xlinkHref="#test-file-stub" - /> - </svg> - </Component> - </Icon> - <Icon - className="imgResult" - icon="test-file-stub" - size={180} - spin={false} - > - <Component - className="imgResult styles__icon___23x3R" - height={180} - style={Object {}} - width={180} - > - <svg - className="imgResult styles__icon___23x3R" - height={180} - style={Object {}} - width={180} - > - <use - xlinkHref="#test-file-stub" - /> - </svg> - </Component> - </Icon> - </div> - <div - className="text-28-normal-uppercase title" - > - duel_result_modal.success.title - </div> - <div - className="text-18-bold" - > - duel_result_modal.success.message1 - </div> - <div - className="text-18-bold" - > - duel_result_modal.success.message2 - </div> - <WithStyles(ForwardRef(Button)) - aria-label="duel_result_modal.accessibility.button_validate" - className="btnSecondary" - onClick={[MockFunction]} - > - <ForwardRef(Button) - aria-label="duel_result_modal.accessibility.button_validate" - className="btnSecondary" - classes={ - Object { - "colorInherit": "MuiButton-colorInherit", - "contained": "MuiButton-contained", - "containedPrimary": "MuiButton-containedPrimary", - "containedSecondary": "MuiButton-containedSecondary", - "containedSizeLarge": "MuiButton-containedSizeLarge", - "containedSizeSmall": "MuiButton-containedSizeSmall", - "disableElevation": "MuiButton-disableElevation", - "disabled": "Mui-disabled", - "endIcon": "MuiButton-endIcon", - "focusVisible": "Mui-focusVisible", - "fullWidth": "MuiButton-fullWidth", - "iconSizeLarge": "MuiButton-iconSizeLarge", - "iconSizeMedium": "MuiButton-iconSizeMedium", - "iconSizeSmall": "MuiButton-iconSizeSmall", - "label": "MuiButton-label", - "outlined": "MuiButton-outlined", - "outlinedPrimary": "MuiButton-outlinedPrimary", - "outlinedSecondary": "MuiButton-outlinedSecondary", - "outlinedSizeLarge": "MuiButton-outlinedSizeLarge", - "outlinedSizeSmall": "MuiButton-outlinedSizeSmall", - "root": "MuiButton-root", - "sizeLarge": "MuiButton-sizeLarge", - "sizeSmall": "MuiButton-sizeSmall", - "startIcon": "MuiButton-startIcon", - "text": "MuiButton-text", - "textPrimary": "MuiButton-textPrimary", - "textSecondary": "MuiButton-textSecondary", - "textSizeLarge": "MuiButton-textSizeLarge", - "textSizeSmall": "MuiButton-textSizeSmall", - } - } - onClick={[MockFunction]} - > - <WithStyles(ForwardRef(ButtonBase)) - aria-label="duel_result_modal.accessibility.button_validate" - className="MuiButton-root MuiButton-text btnSecondary" - component="button" - disabled={false} - focusRipple={true} - focusVisibleClassName="Mui-focusVisible" - onClick={[MockFunction]} - type="button" - > - <ForwardRef(ButtonBase) - aria-label="duel_result_modal.accessibility.button_validate" - className="MuiButton-root MuiButton-text btnSecondary" - classes={ - Object { - "disabled": "Mui-disabled", - "focusVisible": "Mui-focusVisible", - "root": "MuiButtonBase-root", - } - } - component="button" - disabled={false} - focusRipple={true} - focusVisibleClassName="Mui-focusVisible" - onClick={[MockFunction]} - type="button" - > - <button - aria-label="duel_result_modal.accessibility.button_validate" - className="MuiButtonBase-root MuiButton-root MuiButton-text btnSecondary" - 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" - > - duel_result_modal.success.button_validate - </span> - <WithStyles(memo) - center={false} - > - <ForwardRef(TouchRipple) - center={false} - classes={ - Object { - "child": "MuiTouchRipple-child", - "childLeaving": "MuiTouchRipple-childLeaving", - "childPulsate": "MuiTouchRipple-childPulsate", - "ripple": "MuiTouchRipple-ripple", - "ripplePulsate": "MuiTouchRipple-ripplePulsate", - "rippleVisible": "MuiTouchRipple-rippleVisible", - "root": "MuiTouchRipple-root", - } - } - > - <span - className="MuiTouchRipple-root" - > - <TransitionGroup - childFactory={[Function]} - component={null} - exit={true} - /> - </span> - </ForwardRef(TouchRipple)> - </WithStyles(memo)> - </button> - </ForwardRef(ButtonBase)> - </WithStyles(ForwardRef(ButtonBase))> - </ForwardRef(Button)> - </WithStyles(ForwardRef(Button))> - </div> - </div> - </ForwardRef(Paper)> - </WithStyles(ForwardRef(Paper))> - </div> - </Transition> - </ForwardRef(Fade)> - <div - data-test="sentinelEnd" - tabIndex={0} - /> - </Unstable_TrapFocus> - </div> - </Portal> - </ForwardRef(Portal)> - </ForwardRef(Modal)> - </ForwardRef(Dialog)> - </WithStyles(ForwardRef(Dialog))> -</DuelResultModal> + duel_result_modal.success.button_validate + </span> + <span + class="MuiTouchRipple-root" + /> + </button> + </div> + </div> + </div> + <div + data-test="sentinelEnd" + tabindex="0" + /> + </div> +</body> `; diff --git a/src/components/Duel/LastDuelModal/__snapshots__/lastDuelModal.spec.tsx.snap b/src/components/Duel/LastDuelModal/__snapshots__/lastDuelModal.spec.tsx.snap index 7d00ebf2f1864fd6dbf382541bd91ae3b7664ee1..94080d04db0112ac94524c000602b89c7c440d93 100644 --- a/src/components/Duel/LastDuelModal/__snapshots__/lastDuelModal.spec.tsx.snap +++ b/src/components/Duel/LastDuelModal/__snapshots__/lastDuelModal.spec.tsx.snap @@ -1,878 +1,106 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP exports[`lastDuelModal component should render correctly 1`] = ` -<LastDuelModal - handleCloseClick={[MockFunction]} - open={true} +<body + style="padding-right: 0px; overflow: hidden;" > - <WithStyles(ForwardRef(Dialog)) - aria-labelledby="accessibility-title" - classes={ - Object { - "paper": "modal-paper blue-light-border", - "root": "modal-root", - } - } - onClose={[MockFunction]} - open={true} + <div + aria-hidden="true" + /> + <div + class="MuiDialog-root modal-root" + role="presentation" + style="position: fixed; z-index: 1300; right: 0px; bottom: 0px; top: 0px; left: 0px;" > - <ForwardRef(Dialog) - aria-labelledby="accessibility-title" - classes={ - Object { - "container": "MuiDialog-container", - "paper": "MuiDialog-paper modal-paper blue-light-border", - "paperFullScreen": "MuiDialog-paperFullScreen", - "paperFullWidth": "MuiDialog-paperFullWidth", - "paperScrollBody": "MuiDialog-paperScrollBody", - "paperScrollPaper": "MuiDialog-paperScrollPaper", - "paperWidthFalse": "MuiDialog-paperWidthFalse", - "paperWidthLg": "MuiDialog-paperWidthLg", - "paperWidthMd": "MuiDialog-paperWidthMd", - "paperWidthSm": "MuiDialog-paperWidthSm", - "paperWidthXl": "MuiDialog-paperWidthXl", - "paperWidthXs": "MuiDialog-paperWidthXs", - "root": "MuiDialog-root modal-root", - "scrollBody": "MuiDialog-scrollBody", - "scrollPaper": "MuiDialog-scrollPaper", - } - } - onClose={[MockFunction]} - open={true} + <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" > - <ForwardRef(Modal) - BackdropComponent={ - Object { - "$$typeof": Symbol(react.forward_ref), - "Naked": Object { - "$$typeof": Symbol(react.forward_ref), - "propTypes": Object { - "children": [Function], - "className": [Function], - "classes": [Function], - "invisible": [Function], - "open": [Function], - "transitionDuration": [Function], - }, - "render": [Function], - }, - "displayName": "WithStyles(ForwardRef(Backdrop))", - "options": Object { - "defaultTheme": Object { - "breakpoints": Object { - "between": [Function], - "down": [Function], - "keys": Array [ - "xs", - "sm", - "md", - "lg", - "xl", - ], - "only": [Function], - "up": [Function], - "values": Object { - "lg": 1280, - "md": 960, - "sm": 600, - "xl": 1920, - "xs": 0, - }, - "width": [Function], - }, - "direction": "ltr", - "mixins": Object { - "gutters": [Function], - "toolbar": Object { - "@media (min-width:0px) and (orientation: landscape)": Object { - "minHeight": 48, - }, - "@media (min-width:600px)": Object { - "minHeight": 64, - }, - "minHeight": 56, - }, - }, - "overrides": Object {}, - "palette": Object { - "action": Object { - "activatedOpacity": 0.12, - "active": "rgba(0, 0, 0, 0.54)", - "disabled": "rgba(0, 0, 0, 0.26)", - "disabledBackground": "rgba(0, 0, 0, 0.12)", - "disabledOpacity": 0.38, - "focus": "rgba(0, 0, 0, 0.12)", - "focusOpacity": 0.12, - "hover": "rgba(0, 0, 0, 0.04)", - "hoverOpacity": 0.04, - "selected": "rgba(0, 0, 0, 0.08)", - "selectedOpacity": 0.08, - }, - "augmentColor": [Function], - "background": Object { - "default": "#fafafa", - "paper": "#fff", - }, - "common": Object { - "black": "#000", - "white": "#fff", - }, - "contrastThreshold": 3, - "divider": "rgba(0, 0, 0, 0.12)", - "error": Object { - "contrastText": "#fff", - "dark": "#d32f2f", - "light": "#e57373", - "main": "#f44336", - }, - "getContrastText": [Function], - "grey": Object { - "100": "#f5f5f5", - "200": "#eeeeee", - "300": "#e0e0e0", - "400": "#bdbdbd", - "50": "#fafafa", - "500": "#9e9e9e", - "600": "#757575", - "700": "#616161", - "800": "#424242", - "900": "#212121", - "A100": "#d5d5d5", - "A200": "#aaaaaa", - "A400": "#303030", - "A700": "#616161", - }, - "info": Object { - "contrastText": "#fff", - "dark": "#1976d2", - "light": "#64b5f6", - "main": "#2196f3", - }, - "primary": Object { - "contrastText": "#fff", - "dark": "#303f9f", - "light": "#7986cb", - "main": "#3f51b5", - }, - "secondary": Object { - "contrastText": "#fff", - "dark": "#c51162", - "light": "#ff4081", - "main": "#f50057", - }, - "success": Object { - "contrastText": "rgba(0, 0, 0, 0.87)", - "dark": "#388e3c", - "light": "#81c784", - "main": "#4caf50", - }, - "text": Object { - "disabled": "rgba(0, 0, 0, 0.38)", - "hint": "rgba(0, 0, 0, 0.38)", - "primary": "rgba(0, 0, 0, 0.87)", - "secondary": "rgba(0, 0, 0, 0.54)", - }, - "tonalOffset": 0.2, - "type": "light", - "warning": Object { - "contrastText": "rgba(0, 0, 0, 0.87)", - "dark": "#f57c00", - "light": "#ffb74d", - "main": "#ff9800", - }, - }, - "props": Object {}, - "shadows": Array [ - "none", - "0px 2px 1px -1px rgba(0,0,0,0.2),0px 1px 1px 0px rgba(0,0,0,0.14),0px 1px 3px 0px rgba(0,0,0,0.12)", - "0px 3px 1px -2px rgba(0,0,0,0.2),0px 2px 2px 0px rgba(0,0,0,0.14),0px 1px 5px 0px rgba(0,0,0,0.12)", - "0px 3px 3px -2px rgba(0,0,0,0.2),0px 3px 4px 0px rgba(0,0,0,0.14),0px 1px 8px 0px rgba(0,0,0,0.12)", - "0px 2px 4px -1px rgba(0,0,0,0.2),0px 4px 5px 0px rgba(0,0,0,0.14),0px 1px 10px 0px rgba(0,0,0,0.12)", - "0px 3px 5px -1px rgba(0,0,0,0.2),0px 5px 8px 0px rgba(0,0,0,0.14),0px 1px 14px 0px rgba(0,0,0,0.12)", - "0px 3px 5px -1px rgba(0,0,0,0.2),0px 6px 10px 0px rgba(0,0,0,0.14),0px 1px 18px 0px rgba(0,0,0,0.12)", - "0px 4px 5px -2px rgba(0,0,0,0.2),0px 7px 10px 1px rgba(0,0,0,0.14),0px 2px 16px 1px rgba(0,0,0,0.12)", - "0px 5px 5px -3px rgba(0,0,0,0.2),0px 8px 10px 1px rgba(0,0,0,0.14),0px 3px 14px 2px rgba(0,0,0,0.12)", - "0px 5px 6px -3px rgba(0,0,0,0.2),0px 9px 12px 1px rgba(0,0,0,0.14),0px 3px 16px 2px rgba(0,0,0,0.12)", - "0px 6px 6px -3px rgba(0,0,0,0.2),0px 10px 14px 1px rgba(0,0,0,0.14),0px 4px 18px 3px rgba(0,0,0,0.12)", - "0px 6px 7px -4px rgba(0,0,0,0.2),0px 11px 15px 1px rgba(0,0,0,0.14),0px 4px 20px 3px rgba(0,0,0,0.12)", - "0px 7px 8px -4px rgba(0,0,0,0.2),0px 12px 17px 2px rgba(0,0,0,0.14),0px 5px 22px 4px rgba(0,0,0,0.12)", - "0px 7px 8px -4px rgba(0,0,0,0.2),0px 13px 19px 2px rgba(0,0,0,0.14),0px 5px 24px 4px rgba(0,0,0,0.12)", - "0px 7px 9px -4px rgba(0,0,0,0.2),0px 14px 21px 2px rgba(0,0,0,0.14),0px 5px 26px 4px rgba(0,0,0,0.12)", - "0px 8px 9px -5px rgba(0,0,0,0.2),0px 15px 22px 2px rgba(0,0,0,0.14),0px 6px 28px 5px rgba(0,0,0,0.12)", - "0px 8px 10px -5px rgba(0,0,0,0.2),0px 16px 24px 2px rgba(0,0,0,0.14),0px 6px 30px 5px rgba(0,0,0,0.12)", - "0px 8px 11px -5px rgba(0,0,0,0.2),0px 17px 26px 2px rgba(0,0,0,0.14),0px 6px 32px 5px rgba(0,0,0,0.12)", - "0px 9px 11px -5px rgba(0,0,0,0.2),0px 18px 28px 2px rgba(0,0,0,0.14),0px 7px 34px 6px rgba(0,0,0,0.12)", - "0px 9px 12px -6px rgba(0,0,0,0.2),0px 19px 29px 2px rgba(0,0,0,0.14),0px 7px 36px 6px rgba(0,0,0,0.12)", - "0px 10px 13px -6px rgba(0,0,0,0.2),0px 20px 31px 3px rgba(0,0,0,0.14),0px 8px 38px 7px rgba(0,0,0,0.12)", - "0px 10px 13px -6px rgba(0,0,0,0.2),0px 21px 33px 3px rgba(0,0,0,0.14),0px 8px 40px 7px rgba(0,0,0,0.12)", - "0px 10px 14px -6px rgba(0,0,0,0.2),0px 22px 35px 3px rgba(0,0,0,0.14),0px 8px 42px 7px rgba(0,0,0,0.12)", - "0px 11px 14px -7px rgba(0,0,0,0.2),0px 23px 36px 3px rgba(0,0,0,0.14),0px 9px 44px 8px rgba(0,0,0,0.12)", - "0px 11px 15px -7px rgba(0,0,0,0.2),0px 24px 38px 3px rgba(0,0,0,0.14),0px 9px 46px 8px rgba(0,0,0,0.12)", - ], - "shape": Object { - "borderRadius": 4, - }, - "spacing": [Function], - "transitions": Object { - "create": [Function], - "duration": Object { - "complex": 375, - "enteringScreen": 225, - "leavingScreen": 195, - "short": 250, - "shorter": 200, - "shortest": 150, - "standard": 300, - }, - "easing": Object { - "easeIn": "cubic-bezier(0.4, 0, 1, 1)", - "easeInOut": "cubic-bezier(0.4, 0, 0.2, 1)", - "easeOut": "cubic-bezier(0.0, 0, 0.2, 1)", - "sharp": "cubic-bezier(0.4, 0, 0.6, 1)", - }, - "getAutoHeightDuration": [Function], - }, - "typography": Object { - "body1": Object { - "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif", - "fontSize": "1rem", - "fontWeight": 400, - "letterSpacing": "0.00938em", - "lineHeight": 1.5, - }, - "body2": Object { - "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif", - "fontSize": "0.875rem", - "fontWeight": 400, - "letterSpacing": "0.01071em", - "lineHeight": 1.43, - }, - "button": Object { - "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif", - "fontSize": "0.875rem", - "fontWeight": 500, - "letterSpacing": "0.02857em", - "lineHeight": 1.75, - "textTransform": "uppercase", - }, - "caption": Object { - "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif", - "fontSize": "0.75rem", - "fontWeight": 400, - "letterSpacing": "0.03333em", - "lineHeight": 1.66, - }, - "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif", - "fontSize": 14, - "fontWeightBold": 700, - "fontWeightLight": 300, - "fontWeightMedium": 500, - "fontWeightRegular": 400, - "h1": Object { - "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif", - "fontSize": "6rem", - "fontWeight": 300, - "letterSpacing": "-0.01562em", - "lineHeight": 1.167, - }, - "h2": Object { - "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif", - "fontSize": "3.75rem", - "fontWeight": 300, - "letterSpacing": "-0.00833em", - "lineHeight": 1.2, - }, - "h3": Object { - "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif", - "fontSize": "3rem", - "fontWeight": 400, - "letterSpacing": "0em", - "lineHeight": 1.167, - }, - "h4": Object { - "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif", - "fontSize": "2.125rem", - "fontWeight": 400, - "letterSpacing": "0.00735em", - "lineHeight": 1.235, - }, - "h5": Object { - "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif", - "fontSize": "1.5rem", - "fontWeight": 400, - "letterSpacing": "0em", - "lineHeight": 1.334, - }, - "h6": Object { - "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif", - "fontSize": "1.25rem", - "fontWeight": 500, - "letterSpacing": "0.0075em", - "lineHeight": 1.6, - }, - "htmlFontSize": 16, - "overline": Object { - "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif", - "fontSize": "0.75rem", - "fontWeight": 400, - "letterSpacing": "0.08333em", - "lineHeight": 2.66, - "textTransform": "uppercase", - }, - "pxToRem": [Function], - "round": [Function], - "subtitle1": Object { - "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif", - "fontSize": "1rem", - "fontWeight": 400, - "letterSpacing": "0.00938em", - "lineHeight": 1.75, - }, - "subtitle2": Object { - "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif", - "fontSize": "0.875rem", - "fontWeight": 500, - "letterSpacing": "0.00714em", - "lineHeight": 1.57, - }, - }, - "zIndex": Object { - "appBar": 1100, - "drawer": 1200, - "mobileStepper": 1000, - "modal": 1300, - "snackbar": 1400, - "speedDial": 1050, - "tooltip": 1500, - }, - }, - "name": "MuiBackdrop", - }, - "propTypes": Object { - "classes": [Function], - "innerRef": [Function], - }, - "render": [Function], - "useStyles": [Function], - } - } - BackdropProps={ - Object { - "transitionDuration": Object { - "enter": 225, - "exit": 195, - }, - } - } - className="MuiDialog-root modal-root" - closeAfterTransition={true} - disableEscapeKeyDown={false} - onClose={[MockFunction]} - open={true} + <div + aria-labelledby="accessibility-title" + class="MuiPaper-root MuiDialog-paper modal-paper blue-light-border MuiDialog-paperScrollPaper MuiDialog-paperWidthSm MuiPaper-elevation24 MuiPaper-rounded" + role="dialog" > - <ForwardRef(Portal) - disablePortal={false} + <div + id="accessibility-title" > - <Portal - containerInfo={ - <body - style="padding-right: 0px; overflow: hidden;" - > - <div - class="MuiDialog-root modal-root" - role="presentation" - style="position: fixed; z-index: 1300; right: 0px; bottom: 0px; top: 0px; left: 0px;" - > - <div - aria-hidden="true" - class="MuiBackdrop-root" - style="opacity: 1; webkit-transition: opacity 225ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; transition: opacity 225ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;" - /> - <div - data-test="sentinelStart" - tabindex="0" - /> - <div - class="MuiDialog-container MuiDialog-scrollPaper" - role="none presentation" - style="opacity: 1; webkit-transition: opacity 225ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; transition: opacity 225ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;" - tabindex="-1" - > - <div - aria-labelledby="accessibility-title" - class="MuiPaper-root MuiDialog-paper modal-paper blue-light-border MuiDialog-paperScrollPaper MuiDialog-paperWidthSm MuiPaper-elevation24 MuiPaper-rounded" - role="dialog" - > - <div - id="accessibility-title" - > - last_duel_modal.title - </div> - <div - class="duel-last-modal-root" - > - <button - 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> - <svg - aria-hidden="true" - class="icon styles__icon___23x3R" - height="48" - width="48" - > - <use - xlink:href="#test-file-stub" - /> - </svg> - <h1 - class="text-28-bold" - > - last_duel_modal.title - </h1> - <div> - <h2 - class="text-22-bold" - > - last_duel_modal.subtitle - </h2> - <p - class="text-18-normal" - > - last_duel_modal.message1 - </p> - <p - class="text-18-normal" - > - last_duel_modal.message2 - </p> - </div> - </div> - </div> - </div> - <div - data-test="sentinelEnd" - tabindex="0" - /> - </div> - </body> - } + last_duel_modal.title + </div> + <div + class="duel-last-modal-root" + > + <button + class="MuiButtonBase-root MuiIconButton-root modal-paper-close-button" + tabindex="0" + type="button" > - <div - className="MuiDialog-root modal-root" - onKeyDown={[Function]} - role="presentation" - style={ - Object { - "bottom": 0, - "left": 0, - "position": "fixed", - "right": 0, - "top": 0, - "zIndex": 1300, - } - } + <span + class="MuiIconButton-label" > - <WithStyles(ForwardRef(Backdrop)) - onClick={[Function]} - open={true} - transitionDuration={ - Object { - "enter": 225, - "exit": 195, - } - } - > - <ForwardRef(Backdrop) - classes={ - Object { - "invisible": "MuiBackdrop-invisible", - "root": "MuiBackdrop-root", - } - } - onClick={[Function]} - open={true} - transitionDuration={ - Object { - "enter": 225, - "exit": 195, - } - } - > - <ForwardRef(Fade) - in={true} - onClick={[Function]} - timeout={ - Object { - "enter": 225, - "exit": 195, - } - } - > - <Transition - appear={true} - enter={true} - exit={true} - in={true} - mountOnEnter={false} - onClick={[Function]} - onEnter={[Function]} - onEntered={[Function]} - onEntering={[Function]} - onExit={[Function]} - onExited={[Function]} - onExiting={[Function]} - timeout={ - Object { - "enter": 225, - "exit": 195, - } - } - unmountOnExit={false} - > - <div - aria-hidden={true} - className="MuiBackdrop-root" - onClick={[Function]} - style={ - Object { - "opacity": 1, - "visibility": undefined, - } - } - /> - </Transition> - </ForwardRef(Fade)> - </ForwardRef(Backdrop)> - </WithStyles(ForwardRef(Backdrop))> - <Unstable_TrapFocus - disableAutoFocus={false} - disableEnforceFocus={false} - disableRestoreFocus={false} - getDoc={[Function]} - isEnabled={[Function]} - open={true} + <svg + class="styles__icon___23x3R" + height="16" + width="16" > - <div - data-test="sentinelStart" - tabIndex={0} + <use + xlink:href="#test-file-stub" /> - <ForwardRef(Fade) - appear={true} - in={true} - onEnter={[Function]} - onExited={[Function]} - role="none presentation" - tabIndex="-1" - timeout={ - Object { - "enter": 225, - "exit": 195, - } - } - > - <Transition - appear={true} - enter={true} - exit={true} - in={true} - mountOnEnter={false} - onEnter={[Function]} - onEntered={[Function]} - onEntering={[Function]} - onExit={[Function]} - onExited={[Function]} - onExiting={[Function]} - role="none presentation" - tabIndex="-1" - timeout={ - Object { - "enter": 225, - "exit": 195, - } - } - unmountOnExit={false} - > - <div - className="MuiDialog-container MuiDialog-scrollPaper" - onMouseDown={[Function]} - onMouseUp={[Function]} - role="none presentation" - style={ - Object { - "opacity": 1, - "visibility": undefined, - } - } - tabIndex="-1" - > - <WithStyles(ForwardRef(Paper)) - aria-labelledby="accessibility-title" - className="MuiDialog-paper modal-paper blue-light-border MuiDialog-paperScrollPaper MuiDialog-paperWidthSm" - elevation={24} - role="dialog" - > - <ForwardRef(Paper) - aria-labelledby="accessibility-title" - className="MuiDialog-paper modal-paper blue-light-border MuiDialog-paperScrollPaper MuiDialog-paperWidthSm" - classes={ - Object { - "elevation0": "MuiPaper-elevation0", - "elevation1": "MuiPaper-elevation1", - "elevation10": "MuiPaper-elevation10", - "elevation11": "MuiPaper-elevation11", - "elevation12": "MuiPaper-elevation12", - "elevation13": "MuiPaper-elevation13", - "elevation14": "MuiPaper-elevation14", - "elevation15": "MuiPaper-elevation15", - "elevation16": "MuiPaper-elevation16", - "elevation17": "MuiPaper-elevation17", - "elevation18": "MuiPaper-elevation18", - "elevation19": "MuiPaper-elevation19", - "elevation2": "MuiPaper-elevation2", - "elevation20": "MuiPaper-elevation20", - "elevation21": "MuiPaper-elevation21", - "elevation22": "MuiPaper-elevation22", - "elevation23": "MuiPaper-elevation23", - "elevation24": "MuiPaper-elevation24", - "elevation3": "MuiPaper-elevation3", - "elevation4": "MuiPaper-elevation4", - "elevation5": "MuiPaper-elevation5", - "elevation6": "MuiPaper-elevation6", - "elevation7": "MuiPaper-elevation7", - "elevation8": "MuiPaper-elevation8", - "elevation9": "MuiPaper-elevation9", - "outlined": "MuiPaper-outlined", - "root": "MuiPaper-root", - "rounded": "MuiPaper-rounded", - } - } - elevation={24} - role="dialog" - > - <div - aria-labelledby="accessibility-title" - className="MuiPaper-root MuiDialog-paper modal-paper blue-light-border MuiDialog-paperScrollPaper MuiDialog-paperWidthSm MuiPaper-elevation24 MuiPaper-rounded" - role="dialog" - > - <div - id="accessibility-title" - > - last_duel_modal.title - </div> - <div - className="duel-last-modal-root" - > - <WithStyles(ForwardRef(IconButton)) - className="modal-paper-close-button" - onClick={[MockFunction]} - > - <ForwardRef(IconButton) - className="modal-paper-close-button" - classes={ - Object { - "colorInherit": "MuiIconButton-colorInherit", - "colorPrimary": "MuiIconButton-colorPrimary", - "colorSecondary": "MuiIconButton-colorSecondary", - "disabled": "Mui-disabled", - "edgeEnd": "MuiIconButton-edgeEnd", - "edgeStart": "MuiIconButton-edgeStart", - "label": "MuiIconButton-label", - "root": "MuiIconButton-root", - "sizeSmall": "MuiIconButton-sizeSmall", - } - } - onClick={[MockFunction]} - > - <WithStyles(ForwardRef(ButtonBase)) - centerRipple={true} - className="MuiIconButton-root modal-paper-close-button" - disabled={false} - focusRipple={true} - onClick={[MockFunction]} - > - <ForwardRef(ButtonBase) - 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 - 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))> - <StyledIcon - className="icon" - icon="test-file-stub" - size={48} - > - <Icon - aria-hidden={true} - className="icon" - icon="test-file-stub" - size={48} - spin={false} - > - <Component - aria-hidden={true} - className="icon styles__icon___23x3R" - height={48} - style={Object {}} - width={48} - > - <svg - aria-hidden={true} - className="icon styles__icon___23x3R" - height={48} - style={Object {}} - width={48} - > - <use - xlinkHref="#test-file-stub" - /> - </svg> - </Component> - </Icon> - </StyledIcon> - <h1 - className="text-28-bold" - > - last_duel_modal.title - </h1> - <div> - <h2 - className="text-22-bold" - > - last_duel_modal.subtitle - </h2> - <p - className="text-18-normal" - > - last_duel_modal.message1 - </p> - <p - className="text-18-normal" - > - last_duel_modal.message2 - </p> - </div> - </div> - </div> - </ForwardRef(Paper)> - </WithStyles(ForwardRef(Paper))> - </div> - </Transition> - </ForwardRef(Fade)> - <div - data-test="sentinelEnd" - tabIndex={0} - /> - </Unstable_TrapFocus> - </div> - </Portal> - </ForwardRef(Portal)> - </ForwardRef(Modal)> - </ForwardRef(Dialog)> - </WithStyles(ForwardRef(Dialog))> -</LastDuelModal> + </svg> + </span> + <span + class="MuiTouchRipple-root" + /> + </button> + <svg + aria-hidden="true" + class="icon styles__icon___23x3R" + height="48" + width="48" + > + <use + xlink:href="#test-file-stub" + /> + </svg> + <h1 + class="text-28-bold" + > + last_duel_modal.title + </h1> + <div> + <h2 + class="text-22-bold" + > + last_duel_modal.subtitle + </h2> + <p + class="text-18-normal" + > + last_duel_modal.message1 + </p> + <p + class="text-18-normal" + > + last_duel_modal.message2 + </p> + </div> + </div> + </div> + </div> + <div + data-test="sentinelEnd" + tabindex="0" + /> + </div> +</body> `; diff --git a/src/components/Duel/LastDuelModal/lastDuelModal.spec.tsx b/src/components/Duel/LastDuelModal/lastDuelModal.spec.tsx index ed1f8b01bfd824f6031c9d867e765570efac1432..b2496be0e9bd3e3351dffef9666ec7ed43c3e1c7 100644 --- a/src/components/Duel/LastDuelModal/lastDuelModal.spec.tsx +++ b/src/components/Duel/LastDuelModal/lastDuelModal.spec.tsx @@ -1,15 +1,12 @@ -import { mount } from 'enzyme' -import toJson from 'enzyme-to-json' +import { render } from '@testing-library/react' import React from 'react' -import { waitForComponentToPaint } from 'tests/__mocks__/testUtils' import LastDuelModal from './lastDuelModal' describe('lastDuelModal component', () => { - it('should render correctly', async () => { - const wrapper = mount( + it('should render correctly', () => { + const { baseElement } = render( <LastDuelModal open={true} handleCloseClick={jest.fn()} /> ) - await waitForComponentToPaint(wrapper) - expect(toJson(wrapper)).toMatchSnapshot() + expect(baseElement).toMatchSnapshot() }) }) diff --git a/src/components/Ecogesture/EcogestureCard/EcogestureCard.spec.tsx b/src/components/Ecogesture/EcogestureCard/EcogestureCard.spec.tsx index d00c057dc48a14e90d9d74f237f72e37e0f51fb6..4bb4deaf40cd412c0305cb3c6510d41c9d042b26 100644 --- a/src/components/Ecogesture/EcogestureCard/EcogestureCard.spec.tsx +++ b/src/components/Ecogesture/EcogestureCard/EcogestureCard.spec.tsx @@ -1,6 +1,6 @@ +import { render, waitFor } from '@testing-library/react' import EcogestureCard from 'components/Ecogesture/EcogestureCard/EcogestureCard' import { mount } from 'enzyme' -import toJson from 'enzyme-to-json' import React from 'react' import { BrowserRouter } from 'react-router-dom' import { mockedEcogesturesData } from 'tests/__mocks__/ecogesturesData.mock' @@ -8,13 +8,13 @@ import { waitForComponentToPaint } from 'tests/__mocks__/testUtils' describe('EcogestureCard component', () => { it('should be rendered correctly', async () => { - const wrapper = mount( + const { container } = render( <BrowserRouter> <EcogestureCard ecogesture={mockedEcogesturesData[0]} /> </BrowserRouter> ) - await waitForComponentToPaint(wrapper) - expect(toJson(wrapper)).toMatchSnapshot() + await waitFor(() => null, { container }) + expect(container).toMatchSnapshot() }) it('should be with default icon', async () => { const wrapper = mount( diff --git a/src/components/Ecogesture/EcogestureCard/__snapshots__/EcogestureCard.spec.tsx.snap b/src/components/Ecogesture/EcogestureCard/__snapshots__/EcogestureCard.spec.tsx.snap index 4651aef74bf933a342f65549c0b21a2740fb46be..3096c7c182a2bb6559e467571b1def474a743d07 100644 --- a/src/components/Ecogesture/EcogestureCard/__snapshots__/EcogestureCard.spec.tsx.snap +++ b/src/components/Ecogesture/EcogestureCard/__snapshots__/EcogestureCard.spec.tsx.snap @@ -1,416 +1,95 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP exports[`EcogestureCard 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], - } - } +<div> + <button + class="MuiButtonBase-root MuiCardActionArea-root WithStyles(ForwardRef(CardActionArea))-root-1 ecogesture-list-item" + tabindex="0" + type="button" > - <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 + class="MuiCardContent-root WithStyles(ForwardRef(CardContent))-root-2" > - <StyledEcogestureCard - className="ecogesture-list-item" - onClick={[Function]} + <div + class="ec-content" > - <WithStyles(WithStyles(ForwardRef(CardActionArea))) - className="ecogesture-list-item" - onClick={[Function]} + <svg + aria-hidden="true" + class="Icon styles__icon___23x3R" + height="50" + width="50" > - <WithStyles(ForwardRef(CardActionArea)) - className="ecogesture-list-item" - classes={ - Object { - "root": "WithStyles(ForwardRef(CardActionArea))-root-1", - } - } - onClick={[Function]} + <use + xlink:href="#test-file-stub" + /> + </svg> + <div + class="ec-content-short-name text-15-bold" + > + Bonhomme de neige + </div> + <div + class="thunder" + > + <svg + aria-hidden="true" + class="star styles__icon___23x3R" + height="15" + width="15" + > + <use + xlink:href="#test-file-stub" + /> + </svg> + <svg + aria-hidden="true" + class="star styles__icon___23x3R" + height="15" + width="15" + > + <use + xlink:href="#test-file-stub" + /> + </svg> + <svg + aria-hidden="true" + class="star styles__icon___23x3R" + height="15" + width="15" + > + <use + xlink:href="#test-file-stub" + /> + </svg> + <svg + aria-hidden="true" + class="star styles__icon___23x3R" + height="15" + width="15" + > + <use + xlink:href="#test-file-stub" + /> + </svg> + <svg + aria-hidden="true" + class="star styles__icon___23x3R" + height="15" + width="15" > - <ForwardRef(CardActionArea) - className="ecogesture-list-item" - classes={ - Object { - "focusHighlight": "MuiCardActionArea-focusHighlight", - "focusVisible": "Mui-focusVisible", - "root": "MuiCardActionArea-root WithStyles(ForwardRef(CardActionArea))-root-1", - } - } - onClick={[Function]} - > - <WithStyles(ForwardRef(ButtonBase)) - className="MuiCardActionArea-root WithStyles(ForwardRef(CardActionArea))-root-1 ecogesture-list-item" - focusVisibleClassName="Mui-focusVisible" - onClick={[Function]} - > - <ForwardRef(ButtonBase) - className="MuiCardActionArea-root WithStyles(ForwardRef(CardActionArea))-root-1 ecogesture-list-item" - classes={ - Object { - "disabled": "Mui-disabled", - "focusVisible": "Mui-focusVisible", - "root": "MuiButtonBase-root", - } - } - focusVisibleClassName="Mui-focusVisible" - onClick={[Function]} - > - <button - className="MuiButtonBase-root MuiCardActionArea-root WithStyles(ForwardRef(CardActionArea))-root-1 ecogesture-list-item" - disabled={false} - onBlur={[Function]} - onClick={[Function]} - onDragLeave={[Function]} - onFocus={[Function]} - onKeyDown={[Function]} - onKeyUp={[Function]} - onMouseDown={[Function]} - onMouseLeave={[Function]} - onMouseUp={[Function]} - onTouchEnd={[Function]} - onTouchMove={[Function]} - onTouchStart={[Function]} - tabIndex={0} - type="button" - > - <WithStyles(WithStyles(ForwardRef(CardContent)))> - <WithStyles(ForwardRef(CardContent)) - classes={ - Object { - "root": "WithStyles(ForwardRef(CardContent))-root-2", - } - } - > - <ForwardRef(CardContent) - classes={ - Object { - "root": "MuiCardContent-root WithStyles(ForwardRef(CardContent))-root-2", - } - } - > - <div - className="MuiCardContent-root WithStyles(ForwardRef(CardContent))-root-2" - > - <div - className="ec-content" - > - <StyledIcon - className="Icon" - icon="test-file-stub" - size={50} - > - <Icon - aria-hidden={true} - className="Icon" - icon="test-file-stub" - size={50} - spin={false} - > - <Component - aria-hidden={true} - className="Icon styles__icon___23x3R" - height={50} - style={Object {}} - width={50} - > - <svg - aria-hidden={true} - className="Icon styles__icon___23x3R" - height={50} - style={Object {}} - width={50} - > - <use - xlinkHref="#test-file-stub" - /> - </svg> - </Component> - </Icon> - </StyledIcon> - <div - className="ec-content-short-name text-15-bold" - > - Bonhomme de neige - </div> - <EfficiencyRating - result={4} - > - <div - className="thunder" - > - <StyledIcon - className="star" - icon="test-file-stub" - key="1" - size={15} - > - <Icon - aria-hidden={true} - className="star" - icon="test-file-stub" - size={15} - spin={false} - > - <Component - 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 - className="star" - icon="test-file-stub" - key="2" - size={15} - > - <Icon - aria-hidden={true} - className="star" - icon="test-file-stub" - size={15} - spin={false} - > - <Component - 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 - className="star" - icon="test-file-stub" - key="3" - size={15} - > - <Icon - aria-hidden={true} - className="star" - icon="test-file-stub" - size={15} - spin={false} - > - <Component - 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 - className="star" - icon="test-file-stub" - key="4" - size={15} - > - <Icon - aria-hidden={true} - className="star" - icon="test-file-stub" - size={15} - spin={false} - > - <Component - 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 - className="star" - icon="test-file-stub" - key="5" - size={15} - > - <Icon - aria-hidden={true} - className="star" - icon="test-file-stub" - size={15} - spin={false} - > - <Component - 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> - </div> - </div> - </ForwardRef(CardContent)> - </WithStyles(ForwardRef(CardContent))> - </WithStyles(WithStyles(ForwardRef(CardContent)))> - <span - className="MuiCardActionArea-focusHighlight" - /> - <WithStyles(memo) - center={false} - > - <ForwardRef(TouchRipple) - center={false} - classes={ - Object { - "child": "MuiTouchRipple-child", - "childLeaving": "MuiTouchRipple-childLeaving", - "childPulsate": "MuiTouchRipple-childPulsate", - "ripple": "MuiTouchRipple-ripple", - "ripplePulsate": "MuiTouchRipple-ripplePulsate", - "rippleVisible": "MuiTouchRipple-rippleVisible", - "root": "MuiTouchRipple-root", - } - } - > - <span - className="MuiTouchRipple-root" - > - <TransitionGroup - childFactory={[Function]} - component={null} - exit={true} - /> - </span> - </ForwardRef(TouchRipple)> - </WithStyles(memo)> - </button> - </ForwardRef(ButtonBase)> - </WithStyles(ForwardRef(ButtonBase))> - </ForwardRef(CardActionArea)> - </WithStyles(ForwardRef(CardActionArea))> - </WithStyles(WithStyles(ForwardRef(CardActionArea)))> - </StyledEcogestureCard> - </EcogestureCard> - </Router> -</BrowserRouter> + <use + xlink:href="#test-file-stub" + /> + </svg> + </div> + </div> + </div> + <span + class="MuiCardActionArea-focusHighlight" + /> + <span + class="MuiTouchRipple-root" + /> + </button> +</div> `; diff --git a/src/components/Ecogesture/EcogestureEmptyList/EcogestureEmptyList.spec.tsx b/src/components/Ecogesture/EcogestureEmptyList/EcogestureEmptyList.spec.tsx index f1681bd29989772457cdc93c82980f7298244024..650084258d585c8cee9829dc983aff1a3fca2e4c 100644 --- a/src/components/Ecogesture/EcogestureEmptyList/EcogestureEmptyList.spec.tsx +++ b/src/components/Ecogesture/EcogestureEmptyList/EcogestureEmptyList.spec.tsx @@ -1,6 +1,6 @@ import Button from '@material-ui/core/Button' +import { render } from '@testing-library/react' import { mount } from 'enzyme' -import toJson from 'enzyme-to-json' import React from 'react' import EcogestureEmptyList from './EcogestureEmptyList' @@ -14,7 +14,7 @@ const mockHandleClick = jest.fn() describe('EcogestureEmptyList component', () => { it('should be rendered correctly', () => { - const wrapper = mount( + const { container } = render( <EcogestureEmptyList setTab={mockChangeTab} isObjective={true} @@ -22,7 +22,7 @@ describe('EcogestureEmptyList component', () => { handleReinitClick={mockHandleClick} /> ) - expect(toJson(wrapper)).toMatchSnapshot() + expect(container).toMatchSnapshot() }) it('should return to all ecogestures', () => { const wrapper = mount( diff --git a/src/components/Ecogesture/EcogestureEmptyList/__snapshots__/EcogestureEmptyList.spec.tsx.snap b/src/components/Ecogesture/EcogestureEmptyList/__snapshots__/EcogestureEmptyList.spec.tsx.snap index ed4aae32b588201d413d319aabb63ce229524270..3fcc1897fd30e95764ae4a513e3220b41e039d85 100644 --- a/src/components/Ecogesture/EcogestureEmptyList/__snapshots__/EcogestureEmptyList.spec.tsx.snap +++ b/src/components/Ecogesture/EcogestureEmptyList/__snapshots__/EcogestureEmptyList.spec.tsx.snap @@ -1,320 +1,68 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP exports[`EcogestureEmptyList component should be rendered correctly 1`] = ` -<EcogestureEmptyList - handleReinitClick={[MockFunction]} - isObjective={true} - isSelectionDone={false} - setTab={[MockFunction]} -> +<div> <div - className="ec-empty-container" + class="ec-empty-container" > <div - className="ec-empty-content" + class="ec-empty-content" > - <StyledIcon - className="icon-big" - icon="test-file-stub" - size={150} + <svg + aria-hidden="true" + class="icon-big styles__icon___23x3R" + height="150" + width="150" > - <Icon - aria-hidden={true} - className="icon-big" - icon="test-file-stub" - size={150} - spin={false} - > - <Component - 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> + <use + xlink:href="#test-file-stub" + /> + </svg> <div - className="text-16-normal" + class="text-16-normal" > ecogesture.emptyList.obj1 </div> <div - className="text-16-normal" + class="text-16-normal" > ecogesture.emptyList.obj2 </div> <div - className="buttons" + class="buttons" > - <WithStyles(ForwardRef(Button)) + <button aria-label="ecogesture.emptyList.btn1" - className="btnSecondary" - onClick={[Function]} + class="MuiButtonBase-root MuiButton-root MuiButton-text btnSecondary" + tabindex="0" + type="button" > - <ForwardRef(Button) - aria-label="ecogesture.emptyList.btn1" - className="btnSecondary" - classes={ - Object { - "colorInherit": "MuiButton-colorInherit", - "contained": "MuiButton-contained", - "containedPrimary": "MuiButton-containedPrimary", - "containedSecondary": "MuiButton-containedSecondary", - "containedSizeLarge": "MuiButton-containedSizeLarge", - "containedSizeSmall": "MuiButton-containedSizeSmall", - "disableElevation": "MuiButton-disableElevation", - "disabled": "Mui-disabled", - "endIcon": "MuiButton-endIcon", - "focusVisible": "Mui-focusVisible", - "fullWidth": "MuiButton-fullWidth", - "iconSizeLarge": "MuiButton-iconSizeLarge", - "iconSizeMedium": "MuiButton-iconSizeMedium", - "iconSizeSmall": "MuiButton-iconSizeSmall", - "label": "MuiButton-label", - "outlined": "MuiButton-outlined", - "outlinedPrimary": "MuiButton-outlinedPrimary", - "outlinedSecondary": "MuiButton-outlinedSecondary", - "outlinedSizeLarge": "MuiButton-outlinedSizeLarge", - "outlinedSizeSmall": "MuiButton-outlinedSizeSmall", - "root": "MuiButton-root", - "sizeLarge": "MuiButton-sizeLarge", - "sizeSmall": "MuiButton-sizeSmall", - "startIcon": "MuiButton-startIcon", - "text": "MuiButton-text", - "textPrimary": "MuiButton-textPrimary", - "textSecondary": "MuiButton-textSecondary", - "textSizeLarge": "MuiButton-textSizeLarge", - "textSizeSmall": "MuiButton-textSizeSmall", - } - } - onClick={[Function]} + <span + class="MuiButton-label" > - <WithStyles(ForwardRef(ButtonBase)) - aria-label="ecogesture.emptyList.btn1" - className="MuiButton-root MuiButton-text btnSecondary" - component="button" - disabled={false} - focusRipple={true} - focusVisibleClassName="Mui-focusVisible" - onClick={[Function]} - type="button" - > - <ForwardRef(ButtonBase) - aria-label="ecogesture.emptyList.btn1" - className="MuiButton-root MuiButton-text btnSecondary" - classes={ - Object { - "disabled": "Mui-disabled", - "focusVisible": "Mui-focusVisible", - "root": "MuiButtonBase-root", - } - } - component="button" - disabled={false} - focusRipple={true} - focusVisibleClassName="Mui-focusVisible" - onClick={[Function]} - type="button" - > - <button - aria-label="ecogesture.emptyList.btn1" - className="MuiButtonBase-root MuiButton-root MuiButton-text btnSecondary" - disabled={false} - onBlur={[Function]} - onClick={[Function]} - onDragLeave={[Function]} - onFocus={[Function]} - onKeyDown={[Function]} - onKeyUp={[Function]} - onMouseDown={[Function]} - onMouseLeave={[Function]} - onMouseUp={[Function]} - onTouchEnd={[Function]} - onTouchMove={[Function]} - onTouchStart={[Function]} - tabIndex={0} - type="button" - > - <span - className="MuiButton-label" - > - ecogesture.emptyList.btn1 - </span> - <WithStyles(memo) - center={false} - > - <ForwardRef(TouchRipple) - center={false} - classes={ - Object { - "child": "MuiTouchRipple-child", - "childLeaving": "MuiTouchRipple-childLeaving", - "childPulsate": "MuiTouchRipple-childPulsate", - "ripple": "MuiTouchRipple-ripple", - "ripplePulsate": "MuiTouchRipple-ripplePulsate", - "rippleVisible": "MuiTouchRipple-rippleVisible", - "root": "MuiTouchRipple-root", - } - } - > - <span - className="MuiTouchRipple-root" - > - <TransitionGroup - childFactory={[Function]} - component={null} - exit={true} - /> - </span> - </ForwardRef(TouchRipple)> - </WithStyles(memo)> - </button> - </ForwardRef(ButtonBase)> - </WithStyles(ForwardRef(ButtonBase))> - </ForwardRef(Button)> - </WithStyles(ForwardRef(Button))> - <WithStyles(ForwardRef(Button)) + ecogesture.emptyList.btn1 + </span> + <span + class="MuiTouchRipple-root" + /> + </button> + <button aria-label="ecogesture.emptyList.btn2" - className="btnPrimary" - onClick={[Function]} + class="MuiButtonBase-root MuiButton-root MuiButton-text btnPrimary" + tabindex="0" + type="button" > - <ForwardRef(Button) - aria-label="ecogesture.emptyList.btn2" - className="btnPrimary" - classes={ - Object { - "colorInherit": "MuiButton-colorInherit", - "contained": "MuiButton-contained", - "containedPrimary": "MuiButton-containedPrimary", - "containedSecondary": "MuiButton-containedSecondary", - "containedSizeLarge": "MuiButton-containedSizeLarge", - "containedSizeSmall": "MuiButton-containedSizeSmall", - "disableElevation": "MuiButton-disableElevation", - "disabled": "Mui-disabled", - "endIcon": "MuiButton-endIcon", - "focusVisible": "Mui-focusVisible", - "fullWidth": "MuiButton-fullWidth", - "iconSizeLarge": "MuiButton-iconSizeLarge", - "iconSizeMedium": "MuiButton-iconSizeMedium", - "iconSizeSmall": "MuiButton-iconSizeSmall", - "label": "MuiButton-label", - "outlined": "MuiButton-outlined", - "outlinedPrimary": "MuiButton-outlinedPrimary", - "outlinedSecondary": "MuiButton-outlinedSecondary", - "outlinedSizeLarge": "MuiButton-outlinedSizeLarge", - "outlinedSizeSmall": "MuiButton-outlinedSizeSmall", - "root": "MuiButton-root", - "sizeLarge": "MuiButton-sizeLarge", - "sizeSmall": "MuiButton-sizeSmall", - "startIcon": "MuiButton-startIcon", - "text": "MuiButton-text", - "textPrimary": "MuiButton-textPrimary", - "textSecondary": "MuiButton-textSecondary", - "textSizeLarge": "MuiButton-textSizeLarge", - "textSizeSmall": "MuiButton-textSizeSmall", - } - } - onClick={[Function]} + <span + class="MuiButton-label" > - <WithStyles(ForwardRef(ButtonBase)) - aria-label="ecogesture.emptyList.btn2" - className="MuiButton-root MuiButton-text btnPrimary" - component="button" - disabled={false} - focusRipple={true} - focusVisibleClassName="Mui-focusVisible" - onClick={[Function]} - type="button" - > - <ForwardRef(ButtonBase) - aria-label="ecogesture.emptyList.btn2" - className="MuiButton-root MuiButton-text btnPrimary" - classes={ - Object { - "disabled": "Mui-disabled", - "focusVisible": "Mui-focusVisible", - "root": "MuiButtonBase-root", - } - } - component="button" - disabled={false} - focusRipple={true} - focusVisibleClassName="Mui-focusVisible" - onClick={[Function]} - type="button" - > - <button - aria-label="ecogesture.emptyList.btn2" - className="MuiButtonBase-root MuiButton-root MuiButton-text btnPrimary" - 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" - > - ecogesture.emptyList.btn2 - </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))> + ecogesture.emptyList.btn2 + </span> + <span + class="MuiTouchRipple-root" + /> + </button> </div> </div> </div> -</EcogestureEmptyList> +</div> `; diff --git a/src/components/Ecogesture/EcogestureInitModal/EcogestureInitModal.spec.tsx b/src/components/Ecogesture/EcogestureInitModal/EcogestureInitModal.spec.tsx index 7f04115005180020e5dbc90cd4dda9735670ef71..dde721578578d724cae9afc64681a0aab0e85ddc 100644 --- a/src/components/Ecogesture/EcogestureInitModal/EcogestureInitModal.spec.tsx +++ b/src/components/Ecogesture/EcogestureInitModal/EcogestureInitModal.spec.tsx @@ -1,6 +1,6 @@ import { Button } from '@material-ui/core' +import { render } from '@testing-library/react' import { mount } from 'enzyme' -import toJson from 'enzyme-to-json' import React from 'react' import EcogestureInitModal from './EcogestureInitModal' @@ -8,14 +8,14 @@ const mockHandleClose = jest.fn() const mockHandleLaunchForm = jest.fn() describe('EcogestureInitModal component', () => { it('should be rendered correctly', () => { - const wrapper = mount( + const { baseElement } = render( <EcogestureInitModal open={true} handleCloseClick={mockHandleClose} handleLaunchForm={mockHandleLaunchForm} /> ) - expect(toJson(wrapper)).toMatchSnapshot() + expect(baseElement).toMatchSnapshot() }) it('should close modal', () => { const wrapper = mount( diff --git a/src/components/Ecogesture/EcogestureInitModal/__snapshots__/EcogestureInitModal.spec.tsx.snap b/src/components/Ecogesture/EcogestureInitModal/__snapshots__/EcogestureInitModal.spec.tsx.snap index 60906791ed06582f143c96c29eff16b057ec25a6..553d5fd25832abc984ad52b2ee0b720c102afe3d 100644 --- a/src/components/Ecogesture/EcogestureInitModal/__snapshots__/EcogestureInitModal.spec.tsx.snap +++ b/src/components/Ecogesture/EcogestureInitModal/__snapshots__/EcogestureInitModal.spec.tsx.snap @@ -1,1120 +1,124 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP exports[`EcogestureInitModal component should be rendered correctly 1`] = ` -<EcogestureInitModal - handleCloseClick={[MockFunction]} - handleLaunchForm={[MockFunction]} - open={true} +<body + style="padding-right: 0px; overflow: hidden;" > - <WithStyles(ForwardRef(Dialog)) - aria-labelledby="accessibility-title" - classes={ - Object { - "paper": "modal-paper", - "root": "modal-root", - } - } - onClose={[MockFunction]} - open={true} + <div + aria-hidden="true" + /> + <div + class="MuiDialog-root modal-root" + role="presentation" + style="position: fixed; z-index: 1300; right: 0px; bottom: 0px; top: 0px; left: 0px;" > - <ForwardRef(Dialog) - aria-labelledby="accessibility-title" - classes={ - Object { - "container": "MuiDialog-container", - "paper": "MuiDialog-paper modal-paper", - "paperFullScreen": "MuiDialog-paperFullScreen", - "paperFullWidth": "MuiDialog-paperFullWidth", - "paperScrollBody": "MuiDialog-paperScrollBody", - "paperScrollPaper": "MuiDialog-paperScrollPaper", - "paperWidthFalse": "MuiDialog-paperWidthFalse", - "paperWidthLg": "MuiDialog-paperWidthLg", - "paperWidthMd": "MuiDialog-paperWidthMd", - "paperWidthSm": "MuiDialog-paperWidthSm", - "paperWidthXl": "MuiDialog-paperWidthXl", - "paperWidthXs": "MuiDialog-paperWidthXs", - "root": "MuiDialog-root modal-root", - "scrollBody": "MuiDialog-scrollBody", - "scrollPaper": "MuiDialog-scrollPaper", - } - } - onClose={[MockFunction]} - open={true} + <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" > - <ForwardRef(Modal) - BackdropComponent={ - Object { - "$$typeof": Symbol(react.forward_ref), - "Naked": Object { - "$$typeof": Symbol(react.forward_ref), - "propTypes": Object { - "children": [Function], - "className": [Function], - "classes": [Function], - "invisible": [Function], - "open": [Function], - "transitionDuration": [Function], - }, - "render": [Function], - }, - "displayName": "WithStyles(ForwardRef(Backdrop))", - "options": Object { - "defaultTheme": Object { - "breakpoints": Object { - "between": [Function], - "down": [Function], - "keys": Array [ - "xs", - "sm", - "md", - "lg", - "xl", - ], - "only": [Function], - "up": [Function], - "values": Object { - "lg": 1280, - "md": 960, - "sm": 600, - "xl": 1920, - "xs": 0, - }, - "width": [Function], - }, - "direction": "ltr", - "mixins": Object { - "gutters": [Function], - "toolbar": Object { - "@media (min-width:0px) and (orientation: landscape)": Object { - "minHeight": 48, - }, - "@media (min-width:600px)": Object { - "minHeight": 64, - }, - "minHeight": 56, - }, - }, - "overrides": Object {}, - "palette": Object { - "action": Object { - "activatedOpacity": 0.12, - "active": "rgba(0, 0, 0, 0.54)", - "disabled": "rgba(0, 0, 0, 0.26)", - "disabledBackground": "rgba(0, 0, 0, 0.12)", - "disabledOpacity": 0.38, - "focus": "rgba(0, 0, 0, 0.12)", - "focusOpacity": 0.12, - "hover": "rgba(0, 0, 0, 0.04)", - "hoverOpacity": 0.04, - "selected": "rgba(0, 0, 0, 0.08)", - "selectedOpacity": 0.08, - }, - "augmentColor": [Function], - "background": Object { - "default": "#fafafa", - "paper": "#fff", - }, - "common": Object { - "black": "#000", - "white": "#fff", - }, - "contrastThreshold": 3, - "divider": "rgba(0, 0, 0, 0.12)", - "error": Object { - "contrastText": "#fff", - "dark": "#d32f2f", - "light": "#e57373", - "main": "#f44336", - }, - "getContrastText": [Function], - "grey": Object { - "100": "#f5f5f5", - "200": "#eeeeee", - "300": "#e0e0e0", - "400": "#bdbdbd", - "50": "#fafafa", - "500": "#9e9e9e", - "600": "#757575", - "700": "#616161", - "800": "#424242", - "900": "#212121", - "A100": "#d5d5d5", - "A200": "#aaaaaa", - "A400": "#303030", - "A700": "#616161", - }, - "info": Object { - "contrastText": "#fff", - "dark": "#1976d2", - "light": "#64b5f6", - "main": "#2196f3", - }, - "primary": Object { - "contrastText": "#fff", - "dark": "#303f9f", - "light": "#7986cb", - "main": "#3f51b5", - }, - "secondary": Object { - "contrastText": "#fff", - "dark": "#c51162", - "light": "#ff4081", - "main": "#f50057", - }, - "success": Object { - "contrastText": "rgba(0, 0, 0, 0.87)", - "dark": "#388e3c", - "light": "#81c784", - "main": "#4caf50", - }, - "text": Object { - "disabled": "rgba(0, 0, 0, 0.38)", - "hint": "rgba(0, 0, 0, 0.38)", - "primary": "rgba(0, 0, 0, 0.87)", - "secondary": "rgba(0, 0, 0, 0.54)", - }, - "tonalOffset": 0.2, - "type": "light", - "warning": Object { - "contrastText": "rgba(0, 0, 0, 0.87)", - "dark": "#f57c00", - "light": "#ffb74d", - "main": "#ff9800", - }, - }, - "props": Object {}, - "shadows": Array [ - "none", - "0px 2px 1px -1px rgba(0,0,0,0.2),0px 1px 1px 0px rgba(0,0,0,0.14),0px 1px 3px 0px rgba(0,0,0,0.12)", - "0px 3px 1px -2px rgba(0,0,0,0.2),0px 2px 2px 0px rgba(0,0,0,0.14),0px 1px 5px 0px rgba(0,0,0,0.12)", - "0px 3px 3px -2px rgba(0,0,0,0.2),0px 3px 4px 0px rgba(0,0,0,0.14),0px 1px 8px 0px rgba(0,0,0,0.12)", - "0px 2px 4px -1px rgba(0,0,0,0.2),0px 4px 5px 0px rgba(0,0,0,0.14),0px 1px 10px 0px rgba(0,0,0,0.12)", - "0px 3px 5px -1px rgba(0,0,0,0.2),0px 5px 8px 0px rgba(0,0,0,0.14),0px 1px 14px 0px rgba(0,0,0,0.12)", - "0px 3px 5px -1px rgba(0,0,0,0.2),0px 6px 10px 0px rgba(0,0,0,0.14),0px 1px 18px 0px rgba(0,0,0,0.12)", - "0px 4px 5px -2px rgba(0,0,0,0.2),0px 7px 10px 1px rgba(0,0,0,0.14),0px 2px 16px 1px rgba(0,0,0,0.12)", - "0px 5px 5px -3px rgba(0,0,0,0.2),0px 8px 10px 1px rgba(0,0,0,0.14),0px 3px 14px 2px rgba(0,0,0,0.12)", - "0px 5px 6px -3px rgba(0,0,0,0.2),0px 9px 12px 1px rgba(0,0,0,0.14),0px 3px 16px 2px rgba(0,0,0,0.12)", - "0px 6px 6px -3px rgba(0,0,0,0.2),0px 10px 14px 1px rgba(0,0,0,0.14),0px 4px 18px 3px rgba(0,0,0,0.12)", - "0px 6px 7px -4px rgba(0,0,0,0.2),0px 11px 15px 1px rgba(0,0,0,0.14),0px 4px 20px 3px rgba(0,0,0,0.12)", - "0px 7px 8px -4px rgba(0,0,0,0.2),0px 12px 17px 2px rgba(0,0,0,0.14),0px 5px 22px 4px rgba(0,0,0,0.12)", - "0px 7px 8px -4px rgba(0,0,0,0.2),0px 13px 19px 2px rgba(0,0,0,0.14),0px 5px 24px 4px rgba(0,0,0,0.12)", - "0px 7px 9px -4px rgba(0,0,0,0.2),0px 14px 21px 2px rgba(0,0,0,0.14),0px 5px 26px 4px rgba(0,0,0,0.12)", - "0px 8px 9px -5px rgba(0,0,0,0.2),0px 15px 22px 2px rgba(0,0,0,0.14),0px 6px 28px 5px rgba(0,0,0,0.12)", - "0px 8px 10px -5px rgba(0,0,0,0.2),0px 16px 24px 2px rgba(0,0,0,0.14),0px 6px 30px 5px rgba(0,0,0,0.12)", - "0px 8px 11px -5px rgba(0,0,0,0.2),0px 17px 26px 2px rgba(0,0,0,0.14),0px 6px 32px 5px rgba(0,0,0,0.12)", - "0px 9px 11px -5px rgba(0,0,0,0.2),0px 18px 28px 2px rgba(0,0,0,0.14),0px 7px 34px 6px rgba(0,0,0,0.12)", - "0px 9px 12px -6px rgba(0,0,0,0.2),0px 19px 29px 2px rgba(0,0,0,0.14),0px 7px 36px 6px rgba(0,0,0,0.12)", - "0px 10px 13px -6px rgba(0,0,0,0.2),0px 20px 31px 3px rgba(0,0,0,0.14),0px 8px 38px 7px rgba(0,0,0,0.12)", - "0px 10px 13px -6px rgba(0,0,0,0.2),0px 21px 33px 3px rgba(0,0,0,0.14),0px 8px 40px 7px rgba(0,0,0,0.12)", - "0px 10px 14px -6px rgba(0,0,0,0.2),0px 22px 35px 3px rgba(0,0,0,0.14),0px 8px 42px 7px rgba(0,0,0,0.12)", - "0px 11px 14px -7px rgba(0,0,0,0.2),0px 23px 36px 3px rgba(0,0,0,0.14),0px 9px 44px 8px rgba(0,0,0,0.12)", - "0px 11px 15px -7px rgba(0,0,0,0.2),0px 24px 38px 3px rgba(0,0,0,0.14),0px 9px 46px 8px rgba(0,0,0,0.12)", - ], - "shape": Object { - "borderRadius": 4, - }, - "spacing": [Function], - "transitions": Object { - "create": [Function], - "duration": Object { - "complex": 375, - "enteringScreen": 225, - "leavingScreen": 195, - "short": 250, - "shorter": 200, - "shortest": 150, - "standard": 300, - }, - "easing": Object { - "easeIn": "cubic-bezier(0.4, 0, 1, 1)", - "easeInOut": "cubic-bezier(0.4, 0, 0.2, 1)", - "easeOut": "cubic-bezier(0.0, 0, 0.2, 1)", - "sharp": "cubic-bezier(0.4, 0, 0.6, 1)", - }, - "getAutoHeightDuration": [Function], - }, - "typography": Object { - "body1": Object { - "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif", - "fontSize": "1rem", - "fontWeight": 400, - "letterSpacing": "0.00938em", - "lineHeight": 1.5, - }, - "body2": Object { - "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif", - "fontSize": "0.875rem", - "fontWeight": 400, - "letterSpacing": "0.01071em", - "lineHeight": 1.43, - }, - "button": Object { - "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif", - "fontSize": "0.875rem", - "fontWeight": 500, - "letterSpacing": "0.02857em", - "lineHeight": 1.75, - "textTransform": "uppercase", - }, - "caption": Object { - "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif", - "fontSize": "0.75rem", - "fontWeight": 400, - "letterSpacing": "0.03333em", - "lineHeight": 1.66, - }, - "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif", - "fontSize": 14, - "fontWeightBold": 700, - "fontWeightLight": 300, - "fontWeightMedium": 500, - "fontWeightRegular": 400, - "h1": Object { - "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif", - "fontSize": "6rem", - "fontWeight": 300, - "letterSpacing": "-0.01562em", - "lineHeight": 1.167, - }, - "h2": Object { - "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif", - "fontSize": "3.75rem", - "fontWeight": 300, - "letterSpacing": "-0.00833em", - "lineHeight": 1.2, - }, - "h3": Object { - "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif", - "fontSize": "3rem", - "fontWeight": 400, - "letterSpacing": "0em", - "lineHeight": 1.167, - }, - "h4": Object { - "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif", - "fontSize": "2.125rem", - "fontWeight": 400, - "letterSpacing": "0.00735em", - "lineHeight": 1.235, - }, - "h5": Object { - "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif", - "fontSize": "1.5rem", - "fontWeight": 400, - "letterSpacing": "0em", - "lineHeight": 1.334, - }, - "h6": Object { - "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif", - "fontSize": "1.25rem", - "fontWeight": 500, - "letterSpacing": "0.0075em", - "lineHeight": 1.6, - }, - "htmlFontSize": 16, - "overline": Object { - "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif", - "fontSize": "0.75rem", - "fontWeight": 400, - "letterSpacing": "0.08333em", - "lineHeight": 2.66, - "textTransform": "uppercase", - }, - "pxToRem": [Function], - "round": [Function], - "subtitle1": Object { - "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif", - "fontSize": "1rem", - "fontWeight": 400, - "letterSpacing": "0.00938em", - "lineHeight": 1.75, - }, - "subtitle2": Object { - "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif", - "fontSize": "0.875rem", - "fontWeight": 500, - "letterSpacing": "0.00714em", - "lineHeight": 1.57, - }, - }, - "zIndex": Object { - "appBar": 1100, - "drawer": 1200, - "mobileStepper": 1000, - "modal": 1300, - "snackbar": 1400, - "speedDial": 1050, - "tooltip": 1500, - }, - }, - "name": "MuiBackdrop", - }, - "propTypes": Object { - "classes": [Function], - "innerRef": [Function], - }, - "render": [Function], - "useStyles": [Function], - } - } - BackdropProps={ - Object { - "transitionDuration": Object { - "enter": 225, - "exit": 195, - }, - } - } - className="MuiDialog-root modal-root" - closeAfterTransition={true} - disableEscapeKeyDown={false} - onClose={[MockFunction]} - open={true} + <div + aria-labelledby="accessibility-title" + class="MuiPaper-root MuiDialog-paper modal-paper MuiDialog-paperScrollPaper MuiDialog-paperWidthSm MuiPaper-elevation24 MuiPaper-rounded" + role="dialog" > - <ForwardRef(Portal) - disablePortal={false} + <div + id="accessibility-title" > - <Portal - containerInfo={ - <body - style="padding-right: 0px; overflow: hidden;" - > - <div - class="MuiDialog-root modal-root" - role="presentation" - style="position: fixed; z-index: 1300; right: 0px; bottom: 0px; top: 0px; left: 0px;" - > - <div - aria-hidden="true" - class="MuiBackdrop-root" - style="opacity: 1; webkit-transition: opacity 225ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; transition: opacity 225ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;" - /> - <div - data-test="sentinelStart" - tabindex="0" - /> - <div - class="MuiDialog-container MuiDialog-scrollPaper" - role="none presentation" - style="opacity: 1; webkit-transition: opacity 225ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; transition: opacity 225ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;" - tabindex="-1" - > - <div - aria-labelledby="accessibility-title" - class="MuiPaper-root MuiDialog-paper modal-paper MuiDialog-paperScrollPaper MuiDialog-paperWidthSm MuiPaper-elevation24 MuiPaper-rounded" - role="dialog" - > - <div - id="accessibility-title" - > - 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 - class="title text-20-bold" - > - ecogesture.initModal.title - </div> - <div - class="text-16-normal" - > - ecogesture.initModal.text1 - </div> - <div - class="text-16-normal" - > - ecogesture.initModal.text2 - </div> - <div - class="buttons-container" - > - <button - aria-label="ecogesture.initModal.btn1" - class="MuiButtonBase-root MuiButton-root MuiButton-text btnSecondary" - tabindex="0" - type="button" - > - <span - class="MuiButton-label" - > - ecogesture.initModal.btn1 - </span> - <span - class="MuiTouchRipple-root" - /> - </button> - <button - aria-label="ecogesture.initModal.btn2" - class="MuiButtonBase-root MuiButton-root MuiButton-text btnPrimary" - tabindex="0" - type="button" - > - <span - class="MuiButton-label" - > - ecogesture.initModal.btn2 - </span> - <span - class="MuiTouchRipple-root" - /> - </button> - </div> - </div> - </div> - </div> - <div - data-test="sentinelEnd" - tabindex="0" - /> - </div> - </body> - } + 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" > - <div - className="MuiDialog-root modal-root" - onKeyDown={[Function]} - role="presentation" - style={ - Object { - "bottom": 0, - "left": 0, - "position": "fixed", - "right": 0, - "top": 0, - "zIndex": 1300, - } - } + <svg + class="styles__icon___23x3R" + height="16" + width="16" > - <WithStyles(ForwardRef(Backdrop)) - onClick={[Function]} - open={true} - transitionDuration={ - Object { - "enter": 225, - "exit": 195, - } - } + <use + xlink:href="#test-file-stub" + /> + </svg> + </span> + <span + class="MuiTouchRipple-root" + /> + </button> + <div + class="eg-init-modal" + > + <div + class="title text-20-bold" + > + ecogesture.initModal.title + </div> + <div + class="text-16-normal" + > + ecogesture.initModal.text1 + </div> + <div + class="text-16-normal" + > + ecogesture.initModal.text2 + </div> + <div + class="buttons-container" + > + <button + aria-label="ecogesture.initModal.btn1" + class="MuiButtonBase-root MuiButton-root MuiButton-text btnSecondary" + tabindex="0" + type="button" + > + <span + class="MuiButton-label" > - <ForwardRef(Backdrop) - classes={ - Object { - "invisible": "MuiBackdrop-invisible", - "root": "MuiBackdrop-root", - } - } - onClick={[Function]} - open={true} - transitionDuration={ - Object { - "enter": 225, - "exit": 195, - } - } - > - <ForwardRef(Fade) - in={true} - onClick={[Function]} - timeout={ - Object { - "enter": 225, - "exit": 195, - } - } - > - <Transition - appear={true} - enter={true} - exit={true} - in={true} - mountOnEnter={false} - onClick={[Function]} - onEnter={[Function]} - onEntered={[Function]} - onEntering={[Function]} - onExit={[Function]} - onExited={[Function]} - onExiting={[Function]} - timeout={ - Object { - "enter": 225, - "exit": 195, - } - } - unmountOnExit={false} - > - <div - aria-hidden={true} - className="MuiBackdrop-root" - onClick={[Function]} - style={ - Object { - "opacity": 1, - "visibility": undefined, - } - } - /> - </Transition> - </ForwardRef(Fade)> - </ForwardRef(Backdrop)> - </WithStyles(ForwardRef(Backdrop))> - <Unstable_TrapFocus - disableAutoFocus={false} - disableEnforceFocus={false} - disableRestoreFocus={false} - getDoc={[Function]} - isEnabled={[Function]} - open={true} + ecogesture.initModal.btn1 + </span> + <span + class="MuiTouchRipple-root" + /> + </button> + <button + aria-label="ecogesture.initModal.btn2" + class="MuiButtonBase-root MuiButton-root MuiButton-text btnPrimary" + tabindex="0" + type="button" + > + <span + class="MuiButton-label" > - <div - data-test="sentinelStart" - tabIndex={0} - /> - <ForwardRef(Fade) - appear={true} - in={true} - onEnter={[Function]} - onExited={[Function]} - role="none presentation" - tabIndex="-1" - timeout={ - Object { - "enter": 225, - "exit": 195, - } - } - > - <Transition - appear={true} - enter={true} - exit={true} - in={true} - mountOnEnter={false} - onEnter={[Function]} - onEntered={[Function]} - onEntering={[Function]} - onExit={[Function]} - onExited={[Function]} - onExiting={[Function]} - role="none presentation" - tabIndex="-1" - timeout={ - Object { - "enter": 225, - "exit": 195, - } - } - unmountOnExit={false} - > - <div - className="MuiDialog-container MuiDialog-scrollPaper" - onMouseDown={[Function]} - onMouseUp={[Function]} - role="none presentation" - style={ - Object { - "opacity": 1, - "visibility": undefined, - } - } - tabIndex="-1" - > - <WithStyles(ForwardRef(Paper)) - aria-labelledby="accessibility-title" - className="MuiDialog-paper modal-paper MuiDialog-paperScrollPaper MuiDialog-paperWidthSm" - elevation={24} - role="dialog" - > - <ForwardRef(Paper) - aria-labelledby="accessibility-title" - className="MuiDialog-paper modal-paper MuiDialog-paperScrollPaper MuiDialog-paperWidthSm" - classes={ - Object { - "elevation0": "MuiPaper-elevation0", - "elevation1": "MuiPaper-elevation1", - "elevation10": "MuiPaper-elevation10", - "elevation11": "MuiPaper-elevation11", - "elevation12": "MuiPaper-elevation12", - "elevation13": "MuiPaper-elevation13", - "elevation14": "MuiPaper-elevation14", - "elevation15": "MuiPaper-elevation15", - "elevation16": "MuiPaper-elevation16", - "elevation17": "MuiPaper-elevation17", - "elevation18": "MuiPaper-elevation18", - "elevation19": "MuiPaper-elevation19", - "elevation2": "MuiPaper-elevation2", - "elevation20": "MuiPaper-elevation20", - "elevation21": "MuiPaper-elevation21", - "elevation22": "MuiPaper-elevation22", - "elevation23": "MuiPaper-elevation23", - "elevation24": "MuiPaper-elevation24", - "elevation3": "MuiPaper-elevation3", - "elevation4": "MuiPaper-elevation4", - "elevation5": "MuiPaper-elevation5", - "elevation6": "MuiPaper-elevation6", - "elevation7": "MuiPaper-elevation7", - "elevation8": "MuiPaper-elevation8", - "elevation9": "MuiPaper-elevation9", - "outlined": "MuiPaper-outlined", - "root": "MuiPaper-root", - "rounded": "MuiPaper-rounded", - } - } - elevation={24} - role="dialog" - > - <div - aria-labelledby="accessibility-title" - className="MuiPaper-root MuiDialog-paper modal-paper MuiDialog-paperScrollPaper MuiDialog-paperWidthSm MuiPaper-elevation24 MuiPaper-rounded" - role="dialog" - > - <div - id="accessibility-title" - > - 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]} - > - <WithStyles(ForwardRef(ButtonBase)) - aria-label="feedback.accessibility.button_close" - centerRipple={true} - className="MuiIconButton-root modal-paper-close-button" - disabled={false} - focusRipple={true} - onClick={[MockFunction]} - > - <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]} - > - <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" - > - <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="eg-init-modal" - > - <div - className="title text-20-bold" - > - ecogesture.initModal.title - </div> - <div - className="text-16-normal" - > - ecogesture.initModal.text1 - </div> - <div - className="text-16-normal" - > - ecogesture.initModal.text2 - </div> - <div - className="buttons-container" - > - <WithStyles(ForwardRef(Button)) - aria-label="ecogesture.initModal.btn1" - className="btnSecondary" - onClick={[MockFunction]} - > - <ForwardRef(Button) - aria-label="ecogesture.initModal.btn1" - className="btnSecondary" - classes={ - Object { - "colorInherit": "MuiButton-colorInherit", - "contained": "MuiButton-contained", - "containedPrimary": "MuiButton-containedPrimary", - "containedSecondary": "MuiButton-containedSecondary", - "containedSizeLarge": "MuiButton-containedSizeLarge", - "containedSizeSmall": "MuiButton-containedSizeSmall", - "disableElevation": "MuiButton-disableElevation", - "disabled": "Mui-disabled", - "endIcon": "MuiButton-endIcon", - "focusVisible": "Mui-focusVisible", - "fullWidth": "MuiButton-fullWidth", - "iconSizeLarge": "MuiButton-iconSizeLarge", - "iconSizeMedium": "MuiButton-iconSizeMedium", - "iconSizeSmall": "MuiButton-iconSizeSmall", - "label": "MuiButton-label", - "outlined": "MuiButton-outlined", - "outlinedPrimary": "MuiButton-outlinedPrimary", - "outlinedSecondary": "MuiButton-outlinedSecondary", - "outlinedSizeLarge": "MuiButton-outlinedSizeLarge", - "outlinedSizeSmall": "MuiButton-outlinedSizeSmall", - "root": "MuiButton-root", - "sizeLarge": "MuiButton-sizeLarge", - "sizeSmall": "MuiButton-sizeSmall", - "startIcon": "MuiButton-startIcon", - "text": "MuiButton-text", - "textPrimary": "MuiButton-textPrimary", - "textSecondary": "MuiButton-textSecondary", - "textSizeLarge": "MuiButton-textSizeLarge", - "textSizeSmall": "MuiButton-textSizeSmall", - } - } - onClick={[MockFunction]} - > - <WithStyles(ForwardRef(ButtonBase)) - aria-label="ecogesture.initModal.btn1" - className="MuiButton-root MuiButton-text btnSecondary" - component="button" - disabled={false} - focusRipple={true} - focusVisibleClassName="Mui-focusVisible" - onClick={[MockFunction]} - type="button" - > - <ForwardRef(ButtonBase) - aria-label="ecogesture.initModal.btn1" - className="MuiButton-root MuiButton-text btnSecondary" - classes={ - Object { - "disabled": "Mui-disabled", - "focusVisible": "Mui-focusVisible", - "root": "MuiButtonBase-root", - } - } - component="button" - disabled={false} - focusRipple={true} - focusVisibleClassName="Mui-focusVisible" - onClick={[MockFunction]} - type="button" - > - <button - aria-label="ecogesture.initModal.btn1" - className="MuiButtonBase-root MuiButton-root MuiButton-text btnSecondary" - 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" - > - ecogesture.initModal.btn1 - </span> - <WithStyles(memo) - center={false} - > - <ForwardRef(TouchRipple) - center={false} - classes={ - Object { - "child": "MuiTouchRipple-child", - "childLeaving": "MuiTouchRipple-childLeaving", - "childPulsate": "MuiTouchRipple-childPulsate", - "ripple": "MuiTouchRipple-ripple", - "ripplePulsate": "MuiTouchRipple-ripplePulsate", - "rippleVisible": "MuiTouchRipple-rippleVisible", - "root": "MuiTouchRipple-root", - } - } - > - <span - className="MuiTouchRipple-root" - > - <TransitionGroup - childFactory={[Function]} - component={null} - exit={true} - /> - </span> - </ForwardRef(TouchRipple)> - </WithStyles(memo)> - </button> - </ForwardRef(ButtonBase)> - </WithStyles(ForwardRef(ButtonBase))> - </ForwardRef(Button)> - </WithStyles(ForwardRef(Button))> - <WithStyles(ForwardRef(Button)) - aria-label="ecogesture.initModal.btn2" - className="btnPrimary" - onClick={[MockFunction]} - > - <ForwardRef(Button) - aria-label="ecogesture.initModal.btn2" - className="btnPrimary" - classes={ - Object { - "colorInherit": "MuiButton-colorInherit", - "contained": "MuiButton-contained", - "containedPrimary": "MuiButton-containedPrimary", - "containedSecondary": "MuiButton-containedSecondary", - "containedSizeLarge": "MuiButton-containedSizeLarge", - "containedSizeSmall": "MuiButton-containedSizeSmall", - "disableElevation": "MuiButton-disableElevation", - "disabled": "Mui-disabled", - "endIcon": "MuiButton-endIcon", - "focusVisible": "Mui-focusVisible", - "fullWidth": "MuiButton-fullWidth", - "iconSizeLarge": "MuiButton-iconSizeLarge", - "iconSizeMedium": "MuiButton-iconSizeMedium", - "iconSizeSmall": "MuiButton-iconSizeSmall", - "label": "MuiButton-label", - "outlined": "MuiButton-outlined", - "outlinedPrimary": "MuiButton-outlinedPrimary", - "outlinedSecondary": "MuiButton-outlinedSecondary", - "outlinedSizeLarge": "MuiButton-outlinedSizeLarge", - "outlinedSizeSmall": "MuiButton-outlinedSizeSmall", - "root": "MuiButton-root", - "sizeLarge": "MuiButton-sizeLarge", - "sizeSmall": "MuiButton-sizeSmall", - "startIcon": "MuiButton-startIcon", - "text": "MuiButton-text", - "textPrimary": "MuiButton-textPrimary", - "textSecondary": "MuiButton-textSecondary", - "textSizeLarge": "MuiButton-textSizeLarge", - "textSizeSmall": "MuiButton-textSizeSmall", - } - } - onClick={[MockFunction]} - > - <WithStyles(ForwardRef(ButtonBase)) - aria-label="ecogesture.initModal.btn2" - className="MuiButton-root MuiButton-text btnPrimary" - component="button" - disabled={false} - focusRipple={true} - focusVisibleClassName="Mui-focusVisible" - onClick={[MockFunction]} - type="button" - > - <ForwardRef(ButtonBase) - aria-label="ecogesture.initModal.btn2" - className="MuiButton-root MuiButton-text btnPrimary" - 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.initModal.btn2" - className="MuiButtonBase-root MuiButton-root MuiButton-text btnPrimary" - 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" - > - ecogesture.initModal.btn2 - </span> - <WithStyles(memo) - center={false} - > - <ForwardRef(TouchRipple) - center={false} - classes={ - Object { - "child": "MuiTouchRipple-child", - "childLeaving": "MuiTouchRipple-childLeaving", - "childPulsate": "MuiTouchRipple-childPulsate", - "ripple": "MuiTouchRipple-ripple", - "ripplePulsate": "MuiTouchRipple-ripplePulsate", - "rippleVisible": "MuiTouchRipple-rippleVisible", - "root": "MuiTouchRipple-root", - } - } - > - <span - className="MuiTouchRipple-root" - > - <TransitionGroup - childFactory={[Function]} - component={null} - exit={true} - /> - </span> - </ForwardRef(TouchRipple)> - </WithStyles(memo)> - </button> - </ForwardRef(ButtonBase)> - </WithStyles(ForwardRef(ButtonBase))> - </ForwardRef(Button)> - </WithStyles(ForwardRef(Button))> - </div> - </div> - </div> - </ForwardRef(Paper)> - </WithStyles(ForwardRef(Paper))> - </div> - </Transition> - </ForwardRef(Fade)> - <div - data-test="sentinelEnd" - tabIndex={0} - /> - </Unstable_TrapFocus> - </div> - </Portal> - </ForwardRef(Portal)> - </ForwardRef(Modal)> - </ForwardRef(Dialog)> - </WithStyles(ForwardRef(Dialog))> -</EcogestureInitModal> + ecogesture.initModal.btn2 + </span> + <span + class="MuiTouchRipple-root" + /> + </button> + </div> + </div> + </div> + </div> + <div + data-test="sentinelEnd" + tabindex="0" + /> + </div> +</body> `; diff --git a/src/components/Ecogesture/EcogestureList/EcogestureList.spec.tsx b/src/components/Ecogesture/EcogestureList/EcogestureList.spec.tsx index ca1e30237f57c3d658950d100824c3bef2866c7d..c6be11ce126c2999165f23cce9ad8169473c78d8 100644 --- a/src/components/Ecogesture/EcogestureList/EcogestureList.spec.tsx +++ b/src/components/Ecogesture/EcogestureList/EcogestureList.spec.tsx @@ -1,6 +1,6 @@ import { Button, MenuItem } from '@material-ui/core' +import { render } from '@testing-library/react' 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' @@ -27,7 +27,7 @@ describe('EcogesturesList component', () => { mockAppDispatch.mockClear() }) it('should be rendered correctly', async () => { - const wrapper = mount( + const { container } = render( <Provider store={store}> <BrowserRouter> <EcogestureList @@ -40,8 +40,7 @@ describe('EcogesturesList component', () => { </BrowserRouter> </Provider> ) - await waitForComponentToPaint(wrapper) - expect(toJson(wrapper)).toMatchSnapshot() + expect(container).toMatchSnapshot() }) it('should open the filter menu and select all ecogesture', async () => { diff --git a/src/components/Ecogesture/EcogestureList/__snapshots__/EcogestureList.spec.tsx.snap b/src/components/Ecogesture/EcogestureList/__snapshots__/EcogestureList.spec.tsx.snap index f5da3ffbcbde4deb8ca85cd977576cc7c7fdf192..536577972c3d8ff109992cace617895fd5fd1a6b 100644 --- a/src/components/Ecogesture/EcogestureList/__snapshots__/EcogestureList.spec.tsx.snap +++ b/src/components/Ecogesture/EcogestureList/__snapshots__/EcogestureList.spec.tsx.snap @@ -1,2066 +1,72 @@ // 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, - } - } - 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], - } - } +<div> + <div + class="ecogesture-root" + > + <div + class="efficiency-button-content" > - <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} + <button + aria-controls="simple-menu" + aria-haspopup="true" + aria-label="ecogesture.MENU_TITLE" + class="MuiButtonBase-root MuiButton-root MuiButton-text btnSecondary btnFilter MuiButton-textSizeSmall MuiButton-sizeSmall" + tabindex="0" + type="button" > - <div - className="ecogesture-root" + <span + class="MuiButton-label" > - <div - className="efficiency-button-content" + <svg + aria-hidden="true" + class="styles__icon___23x3R" + height="20" + width="20" > - <WithStyles(ForwardRef(Button)) - aria-controls="simple-menu" - aria-haspopup="true" - aria-label="ecogesture.MENU_TITLE" - className="btnSecondary btnFilter" - onClick={[Function]} - size="small" - > - <ForwardRef(Button) - aria-controls="simple-menu" - aria-haspopup="true" - aria-label="ecogesture.MENU_TITLE" - className="btnSecondary btnFilter" - classes={ - Object { - "colorInherit": "MuiButton-colorInherit", - "contained": "MuiButton-contained", - "containedPrimary": "MuiButton-containedPrimary", - "containedSecondary": "MuiButton-containedSecondary", - "containedSizeLarge": "MuiButton-containedSizeLarge", - "containedSizeSmall": "MuiButton-containedSizeSmall", - "disableElevation": "MuiButton-disableElevation", - "disabled": "Mui-disabled", - "endIcon": "MuiButton-endIcon", - "focusVisible": "Mui-focusVisible", - "fullWidth": "MuiButton-fullWidth", - "iconSizeLarge": "MuiButton-iconSizeLarge", - "iconSizeMedium": "MuiButton-iconSizeMedium", - "iconSizeSmall": "MuiButton-iconSizeSmall", - "label": "MuiButton-label", - "outlined": "MuiButton-outlined", - "outlinedPrimary": "MuiButton-outlinedPrimary", - "outlinedSecondary": "MuiButton-outlinedSecondary", - "outlinedSizeLarge": "MuiButton-outlinedSizeLarge", - "outlinedSizeSmall": "MuiButton-outlinedSizeSmall", - "root": "MuiButton-root", - "sizeLarge": "MuiButton-sizeLarge", - "sizeSmall": "MuiButton-sizeSmall", - "startIcon": "MuiButton-startIcon", - "text": "MuiButton-text", - "textPrimary": "MuiButton-textPrimary", - "textSecondary": "MuiButton-textSecondary", - "textSizeLarge": "MuiButton-textSizeLarge", - "textSizeSmall": "MuiButton-textSizeSmall", - } - } - onClick={[Function]} - size="small" - > - <WithStyles(ForwardRef(ButtonBase)) - aria-controls="simple-menu" - aria-haspopup="true" - aria-label="ecogesture.MENU_TITLE" - className="MuiButton-root MuiButton-text btnSecondary btnFilter MuiButton-textSizeSmall MuiButton-sizeSmall" - component="button" - disabled={false} - focusRipple={true} - focusVisibleClassName="Mui-focusVisible" - onClick={[Function]} - type="button" - > - <ForwardRef(ButtonBase) - aria-controls="simple-menu" - aria-haspopup="true" - aria-label="ecogesture.MENU_TITLE" - className="MuiButton-root MuiButton-text btnSecondary btnFilter MuiButton-textSizeSmall MuiButton-sizeSmall" - classes={ - Object { - "disabled": "Mui-disabled", - "focusVisible": "Mui-focusVisible", - "root": "MuiButtonBase-root", - } - } - component="button" - disabled={false} - focusRipple={true} - focusVisibleClassName="Mui-focusVisible" - onClick={[Function]} - type="button" - > - <button - aria-controls="simple-menu" - aria-haspopup="true" - aria-label="ecogesture.MENU_TITLE" - className="MuiButtonBase-root MuiButton-root MuiButton-text btnSecondary btnFilter MuiButton-textSizeSmall MuiButton-sizeSmall" - disabled={false} - onBlur={[Function]} - onClick={[Function]} - onDragLeave={[Function]} - onFocus={[Function]} - onKeyDown={[Function]} - onKeyUp={[Function]} - onMouseDown={[Function]} - onMouseLeave={[Function]} - onMouseUp={[Function]} - onTouchEnd={[Function]} - onTouchMove={[Function]} - onTouchStart={[Function]} - tabIndex={0} - type="button" - > - <span - className="MuiButton-label" - > - <StyledIcon - icon="test-file-stub" - size={20} - > - <Icon - aria-hidden={true} - icon="test-file-stub" - size={20} - spin={false} - > - <Component - 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="" - > - ecogesture.MENU_TITLE - </span> - </span> - <WithStyles(memo) - center={false} - > - <ForwardRef(TouchRipple) - center={false} - classes={ - Object { - "child": "MuiTouchRipple-child", - "childLeaving": "MuiTouchRipple-childLeaving", - "childPulsate": "MuiTouchRipple-childPulsate", - "ripple": "MuiTouchRipple-ripple", - "ripplePulsate": "MuiTouchRipple-ripplePulsate", - "rippleVisible": "MuiTouchRipple-rippleVisible", - "root": "MuiTouchRipple-root", - } - } - > - <span - className="MuiTouchRipple-root" - > - <TransitionGroup - childFactory={[Function]} - component={null} - exit={true} - /> - </span> - </ForwardRef(TouchRipple)> - </WithStyles(memo)> - </button> - </ForwardRef(ButtonBase)> - </WithStyles(ForwardRef(ButtonBase))> - </ForwardRef(Button)> - </WithStyles(ForwardRef(Button))> - <WithStyles(ForwardRef(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", - } - } - PopoverClasses={ - Object { - "paper": "filter-menu", - } - } - anchorEl={null} - classes={ - Object { - "list": "MuiMenu-list", - "paper": "MuiMenu-paper", - } - } - keepMounted={true} - onClose={[Function]} - open={false} - variant="menu" - > - <WithStyles(ForwardRef(Popover)) - PaperProps={ - Object { - "classes": Object { - "root": "MuiMenu-paper", - }, - } - } - TransitionProps={ - Object { - "onEntering": [Function], - } - } - anchorEl={null} - anchorOrigin={ - Object { - "horizontal": "left", - "vertical": "top", - } - } - classes={ - Object { - "paper": "filter-menu", - } - } - getContentAnchorEl={[Function]} - keepMounted={true} - onClose={[Function]} - open={false} - transformOrigin={ - Object { - "horizontal": "left", - "vertical": "top", - } - } - transitionDuration="auto" - > - <ForwardRef(Popover) - PaperProps={ - Object { - "classes": Object { - "root": "MuiMenu-paper", - }, - } - } - TransitionProps={ - Object { - "onEntering": [Function], - } - } - anchorEl={null} - anchorOrigin={ - Object { - "horizontal": "left", - "vertical": "top", - } - } - classes={ - Object { - "paper": "MuiPopover-paper filter-menu", - "root": "MuiPopover-root", - } - } - getContentAnchorEl={[Function]} - 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} - > - <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 - 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" - > - <ul - class="MuiList-root MuiMenu-list filter-menu-list MuiList-padding" - role="menu" - 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" - > - <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" - /> - </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, - } - } - > - <ForwardRef(SimpleBackdrop) - invisible={true} - onClick={[Function]} - open={false} - /> - <Unstable_TrapFocus - disableAutoFocus={false} - disableEnforceFocus={false} - disableRestoreFocus={false} - getDoc={[Function]} - isEnabled={[Function]} - open={false} - > - <div - data-test="sentinelStart" - tabIndex={0} - /> - <ForwardRef(Grow) - appear={true} - in={false} - onEnter={[Function]} - onEntering={[Function]} - onExited={[Function]} - tabIndex="-1" - timeout="auto" - > - <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={null} - unmountOnExit={false} - > - <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" - > - <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} - style={ - Object { - "opacity": 0, - "transform": "scale(0.75, 0.5625)", - "visibility": "hidden", - } - } - tabIndex="-1" - > - <div - className="MuiPaper-root MuiMenu-paper MuiPopover-paper filter-menu MuiPaper-elevation8 MuiPaper-rounded" - style={ - Object { - "opacity": 0, - "transform": "scale(0.75, 0.5625)", - "visibility": "hidden", - } - } - tabIndex="-1" - > - <ForwardRef(MenuList) - actions={ - Object { - "current": Object { - "adjustStyleForScrollbar": [Function], - }, - } - } - autoFocus={false} - autoFocusItem={false} - className="MuiMenu-list filter-menu-list" - onKeyDown={[Function]} - variant="menu" - > - <WithStyles(ForwardRef(List)) - className="MuiMenu-list filter-menu-list" - 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", - } - } - 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} - > - <ForwardRef(MenuItem) - classes={ - Object { - "dense": "MuiMenuItem-dense", - "gutters": "MuiMenuItem-gutters", - "root": "MuiMenuItem-root item-active", - "selected": "Mui-selected", - } - } - onClick={[Function]} - selected={true} - > - <WithStyles(ForwardRef(ListItem)) - button={true} - className="MuiMenuItem-root item-active Mui-selected MuiMenuItem-gutters" - classes={ - Object { - "dense": "MuiMenuItem-dense", - } - } - component="li" - disableGutters={false} - onClick={[Function]} - role="menuitem" - 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", - } - } - component="li" - disableGutters={false} - onClick={[Function]} - role="menuitem" - selected={true} - tabIndex={-1} - > - <WithStyles(ForwardRef(ButtonBase)) - className="MuiListItem-root MuiMenuItem-root item-active Mui-selected MuiMenuItem-gutters MuiListItem-gutters MuiListItem-button Mui-selected" - component="li" - disabled={false} - focusVisibleClassName="Mui-focusVisible" - onClick={[Function]} - 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" - onClick={[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" - > - <ForwardRef(ListItemIcon) - classes={ - Object { - "alignItemsFlexStart": "MuiListItemIcon-alignItemsFlexStart", - "root": "MuiListItemIcon-root filter-menu-icon", - } - } - > - <div - className="MuiListItemIcon-root filter-menu-icon" - > - <StyledIcon - icon="test-file-stub" - size={13} - > - <Icon - aria-hidden={true} - icon="test-file-stub" - size={13} - spin={false} - > - <Component - 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) - 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)> - </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 { - "dense": "MuiMenuItem-dense", - "gutters": "MuiMenuItem-gutters", - "root": "MuiMenuItem-root", - "selected": "Mui-selected", - } - } - onClick={[Function]} - selected={false} - > - <WithStyles(ForwardRef(ListItem)) - button={true} - className="MuiMenuItem-root MuiMenuItem-gutters" - classes={ - Object { - "dense": "MuiMenuItem-dense", - } - } - component="li" - disableGutters={false} - onClick={[Function]} - role="menuitem" - 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", - } - } - component="li" - disableGutters={false} - onClick={[Function]} - role="menuitem" - selected={false} - tabIndex={-1} - > - <WithStyles(ForwardRef(ButtonBase)) - className="MuiListItem-root MuiMenuItem-root MuiMenuItem-gutters MuiListItem-gutters MuiListItem-button" - component="li" - disabled={false} - focusVisibleClassName="Mui-focusVisible" - onClick={[Function]} - 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" - onClick={[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} - > - <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)> - </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 { - "dense": "MuiMenuItem-dense", - "gutters": "MuiMenuItem-gutters", - "root": "MuiMenuItem-root", - "selected": "Mui-selected", - } - } - onClick={[Function]} - selected={false} - > - <WithStyles(ForwardRef(ListItem)) - button={true} - className="MuiMenuItem-root MuiMenuItem-gutters" - classes={ - Object { - "dense": "MuiMenuItem-dense", - } - } - component="li" - disableGutters={false} - onClick={[Function]} - role="menuitem" - 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", - } - } - component="li" - disableGutters={false} - onClick={[Function]} - role="menuitem" - selected={false} - tabIndex={-1} - > - <WithStyles(ForwardRef(ButtonBase)) - className="MuiListItem-root MuiMenuItem-root MuiMenuItem-gutters MuiListItem-gutters MuiListItem-button" - component="li" - disabled={false} - focusVisibleClassName="Mui-focusVisible" - onClick={[Function]} - 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" - onClick={[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} - > - <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)> - </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 { - "dense": "MuiMenuItem-dense", - "gutters": "MuiMenuItem-gutters", - "root": "MuiMenuItem-root", - "selected": "Mui-selected", - } - } - onClick={[Function]} - selected={false} - > - <WithStyles(ForwardRef(ListItem)) - button={true} - className="MuiMenuItem-root MuiMenuItem-gutters" - classes={ - Object { - "dense": "MuiMenuItem-dense", - } - } - component="li" - disableGutters={false} - onClick={[Function]} - role="menuitem" - 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", - } - } - component="li" - disableGutters={false} - onClick={[Function]} - role="menuitem" - selected={false} - tabIndex={-1} - > - <WithStyles(ForwardRef(ButtonBase)) - className="MuiListItem-root MuiMenuItem-root MuiMenuItem-gutters MuiListItem-gutters MuiListItem-button" - component="li" - disabled={false} - focusVisibleClassName="Mui-focusVisible" - onClick={[Function]} - 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" - onClick={[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} - > - <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)> - </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 { - "dense": "MuiMenuItem-dense", - "gutters": "MuiMenuItem-gutters", - "root": "MuiMenuItem-root", - "selected": "Mui-selected", - } - } - onClick={[Function]} - selected={false} - > - <WithStyles(ForwardRef(ListItem)) - button={true} - className="MuiMenuItem-root MuiMenuItem-gutters" - classes={ - Object { - "dense": "MuiMenuItem-dense", - } - } - component="li" - disableGutters={false} - onClick={[Function]} - role="menuitem" - 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", - } - } - component="li" - disableGutters={false} - onClick={[Function]} - role="menuitem" - selected={false} - tabIndex={-1} - > - <WithStyles(ForwardRef(ButtonBase)) - className="MuiListItem-root MuiMenuItem-root MuiMenuItem-gutters MuiListItem-gutters MuiListItem-button" - component="li" - disabled={false} - focusVisibleClassName="Mui-focusVisible" - onClick={[Function]} - 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" - onClick={[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} - > - <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)> - </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 { - "dense": "MuiMenuItem-dense", - "gutters": "MuiMenuItem-gutters", - "root": "MuiMenuItem-root", - "selected": "Mui-selected", - } - } - onClick={[Function]} - selected={false} - > - <WithStyles(ForwardRef(ListItem)) - button={true} - className="MuiMenuItem-root MuiMenuItem-gutters" - classes={ - Object { - "dense": "MuiMenuItem-dense", - } - } - component="li" - disableGutters={false} - onClick={[Function]} - role="menuitem" - 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", - } - } - component="li" - disableGutters={false} - onClick={[Function]} - role="menuitem" - selected={false} - tabIndex={-1} - > - <WithStyles(ForwardRef(ButtonBase)) - className="MuiListItem-root MuiMenuItem-root MuiMenuItem-gutters MuiListItem-gutters MuiListItem-button" - component="li" - disabled={false} - focusVisibleClassName="Mui-focusVisible" - onClick={[Function]} - 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" - onClick={[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} - > - <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)> - </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 { - "dense": "MuiMenuItem-dense", - "gutters": "MuiMenuItem-gutters", - "root": "MuiMenuItem-root", - "selected": "Mui-selected", - } - } - onClick={[Function]} - selected={false} - > - <WithStyles(ForwardRef(ListItem)) - button={true} - className="MuiMenuItem-root MuiMenuItem-gutters" - classes={ - Object { - "dense": "MuiMenuItem-dense", - } - } - component="li" - disableGutters={false} - onClick={[Function]} - role="menuitem" - 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", - } - } - component="li" - disableGutters={false} - onClick={[Function]} - role="menuitem" - selected={false} - tabIndex={-1} - > - <WithStyles(ForwardRef(ButtonBase)) - className="MuiListItem-root MuiMenuItem-root MuiMenuItem-gutters MuiListItem-gutters MuiListItem-button" - component="li" - disabled={false} - focusVisibleClassName="Mui-focusVisible" - onClick={[Function]} - 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" - onClick={[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} - > - <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)> - </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 - 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" - /> - <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" + <use + xlink:href="#test-file-stub" /> - <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" - /> - <WithStyles(ForwardRef(Button)) - className="btnSecondary" - onClick={[MockFunction]} - > - <ForwardRef(Button) - className="btnSecondary" - classes={ - Object { - "colorInherit": "MuiButton-colorInherit", - "contained": "MuiButton-contained", - "containedPrimary": "MuiButton-containedPrimary", - "containedSecondary": "MuiButton-containedSecondary", - "containedSizeLarge": "MuiButton-containedSizeLarge", - "containedSizeSmall": "MuiButton-containedSizeSmall", - "disableElevation": "MuiButton-disableElevation", - "disabled": "Mui-disabled", - "endIcon": "MuiButton-endIcon", - "focusVisible": "Mui-focusVisible", - "fullWidth": "MuiButton-fullWidth", - "iconSizeLarge": "MuiButton-iconSizeLarge", - "iconSizeMedium": "MuiButton-iconSizeMedium", - "iconSizeSmall": "MuiButton-iconSizeSmall", - "label": "MuiButton-label", - "outlined": "MuiButton-outlined", - "outlinedPrimary": "MuiButton-outlinedPrimary", - "outlinedSecondary": "MuiButton-outlinedSecondary", - "outlinedSizeLarge": "MuiButton-outlinedSizeLarge", - "outlinedSizeSmall": "MuiButton-outlinedSizeSmall", - "root": "MuiButton-root", - "sizeLarge": "MuiButton-sizeLarge", - "sizeSmall": "MuiButton-sizeSmall", - "startIcon": "MuiButton-startIcon", - "text": "MuiButton-text", - "textPrimary": "MuiButton-textPrimary", - "textSecondary": "MuiButton-textSecondary", - "textSizeLarge": "MuiButton-textSizeLarge", - "textSizeSmall": "MuiButton-textSizeSmall", - } - } - onClick={[MockFunction]} - > - <WithStyles(ForwardRef(ButtonBase)) - className="MuiButton-root MuiButton-text btnSecondary" - component="button" - disabled={false} - focusRipple={true} - focusVisibleClassName="Mui-focusVisible" - onClick={[MockFunction]} - type="button" - > - <ForwardRef(ButtonBase) - className="MuiButton-root MuiButton-text btnSecondary" - classes={ - Object { - "disabled": "Mui-disabled", - "focusVisible": "Mui-focusVisible", - "root": "MuiButtonBase-root", - } - } - component="button" - disabled={false} - focusRipple={true} - focusVisibleClassName="Mui-focusVisible" - onClick={[MockFunction]} - type="button" - > - <button - className="MuiButtonBase-root MuiButton-root MuiButton-text btnSecondary" - 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" - > - ecogesture.reinit - </span> - <WithStyles(memo) - center={false} - > - <ForwardRef(TouchRipple) - center={false} - classes={ - Object { - "child": "MuiTouchRipple-child", - "childLeaving": "MuiTouchRipple-childLeaving", - "childPulsate": "MuiTouchRipple-childPulsate", - "ripple": "MuiTouchRipple-ripple", - "ripplePulsate": "MuiTouchRipple-ripplePulsate", - "rippleVisible": "MuiTouchRipple-rippleVisible", - "root": "MuiTouchRipple-root", - } - } - > - <span - className="MuiTouchRipple-root" - > - <TransitionGroup - childFactory={[Function]} - component={null} - exit={true} - /> - </span> - </ForwardRef(TouchRipple)> - </WithStyles(memo)> - </button> - </ForwardRef(ButtonBase)> - </WithStyles(ForwardRef(ButtonBase))> - </ForwardRef(Button)> - </WithStyles(ForwardRef(Button))> - </div> - </div> - </EcogestureList> - </Router> - </BrowserRouter> -</Provider> + </svg> + <span + class="" + > + ecogesture.MENU_TITLE + </span> + </span> + <span + class="MuiTouchRipple-root" + /> + </button> + </div> + <div + class="ecogesture-content" + > + <mock-ecogesturecard + ecogesture="[object Object]" + /> + <mock-ecogesturecard + ecogesture="[object Object]" + /> + <mock-ecogesturecard + ecogesture="[object Object]" + /> + <button + class="MuiButtonBase-root MuiButton-root MuiButton-text btnSecondary" + tabindex="0" + type="button" + > + <span + class="MuiButton-label" + > + ecogesture.reinit + </span> + <span + class="MuiTouchRipple-root" + /> + </button> + </div> + </div> +</div> `; diff --git a/src/components/Ecogesture/EcogestureNotFound/EcogestureNotFound.spec.tsx b/src/components/Ecogesture/EcogestureNotFound/EcogestureNotFound.spec.tsx index 2fda3b550431c1b0b25d65a40c8bf539eb4e9ecb..60e0cfa1fac12399a020142ee9496d870dd7c837 100644 --- a/src/components/Ecogesture/EcogestureNotFound/EcogestureNotFound.spec.tsx +++ b/src/components/Ecogesture/EcogestureNotFound/EcogestureNotFound.spec.tsx @@ -1,6 +1,6 @@ import { Button } from '@material-ui/core' +import { render } from '@testing-library/react' import { mount } from 'enzyme' -import toJson from 'enzyme-to-json' import React from 'react' import EcogestureNotFound from './EcogestureNotFound' @@ -16,11 +16,10 @@ jest.mock('components/Content/Content', () => 'mock-content') describe('EcogestureNotFound component', () => { it('should be rendered correctly', async () => { - const wrapper = mount( + const { container } = render( <EcogestureNotFound text="test" returnPage="ecogestures" /> ) - - expect(toJson(wrapper)).toMatchSnapshot() + expect(container).toMatchSnapshot() }) it('should click on button and be redirected', () => { const wrapper = mount( diff --git a/src/components/Ecogesture/EcogestureNotFound/__snapshots__/EcogestureNotFound.spec.tsx.snap b/src/components/Ecogesture/EcogestureNotFound/__snapshots__/EcogestureNotFound.spec.tsx.snap index 3c2efdfc0cee38ccf7f38a71f72db085f1ff45f7..a991c215c20992f6faf548741dfa93c8fe97e850 100644 --- a/src/components/Ecogesture/EcogestureNotFound/__snapshots__/EcogestureNotFound.spec.tsx.snap +++ b/src/components/Ecogesture/EcogestureNotFound/__snapshots__/EcogestureNotFound.spec.tsx.snap @@ -1,189 +1,50 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP exports[`EcogestureNotFound component should be rendered correctly 1`] = ` -<EcogestureNotFound - returnPage="ecogestures" - text="test" -> +<div> <mock-cozybar - titleKey="error_page.main" + titlekey="error_page.main" /> <mock-header - desktopTitleKey="error_page.main" - setHeaderHeight={[Function]} + desktoptitlekey="error_page.main" /> <mock-content - heightOffset={0} + heightoffset="0" > <div - className="error-container" + class="error-container" > - <StyledIcon - className="profile-icon" - icon="test-file-stub" - size={250} + <svg + aria-hidden="true" + class="profile-icon styles__icon___23x3R" + height="250" + width="250" > - <Icon - aria-hidden={true} - className="profile-icon" - icon="test-file-stub" - size={250} - spin={false} - > - <Component - 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> + <use + xlink:href="#test-file-stub" + /> + </svg> <div - className="text-18-bold head" + class="text-18-bold head" > test </div> - <WithStyles(ForwardRef(Button)) + <button aria-label="error_page.back" - className="btnPrimary" - onClick={[Function]} + class="MuiButtonBase-root MuiButton-root MuiButton-text btnPrimary" + tabindex="0" + type="button" > - <ForwardRef(Button) - aria-label="error_page.back" - className="btnPrimary" - classes={ - Object { - "colorInherit": "MuiButton-colorInherit", - "contained": "MuiButton-contained", - "containedPrimary": "MuiButton-containedPrimary", - "containedSecondary": "MuiButton-containedSecondary", - "containedSizeLarge": "MuiButton-containedSizeLarge", - "containedSizeSmall": "MuiButton-containedSizeSmall", - "disableElevation": "MuiButton-disableElevation", - "disabled": "Mui-disabled", - "endIcon": "MuiButton-endIcon", - "focusVisible": "Mui-focusVisible", - "fullWidth": "MuiButton-fullWidth", - "iconSizeLarge": "MuiButton-iconSizeLarge", - "iconSizeMedium": "MuiButton-iconSizeMedium", - "iconSizeSmall": "MuiButton-iconSizeSmall", - "label": "MuiButton-label", - "outlined": "MuiButton-outlined", - "outlinedPrimary": "MuiButton-outlinedPrimary", - "outlinedSecondary": "MuiButton-outlinedSecondary", - "outlinedSizeLarge": "MuiButton-outlinedSizeLarge", - "outlinedSizeSmall": "MuiButton-outlinedSizeSmall", - "root": "MuiButton-root", - "sizeLarge": "MuiButton-sizeLarge", - "sizeSmall": "MuiButton-sizeSmall", - "startIcon": "MuiButton-startIcon", - "text": "MuiButton-text", - "textPrimary": "MuiButton-textPrimary", - "textSecondary": "MuiButton-textSecondary", - "textSizeLarge": "MuiButton-textSizeLarge", - "textSizeSmall": "MuiButton-textSizeSmall", - } - } - onClick={[Function]} + <span + class="MuiButton-label" > - <WithStyles(ForwardRef(ButtonBase)) - aria-label="error_page.back" - className="MuiButton-root MuiButton-text btnPrimary" - component="button" - disabled={false} - focusRipple={true} - focusVisibleClassName="Mui-focusVisible" - onClick={[Function]} - type="button" - > - <ForwardRef(ButtonBase) - aria-label="error_page.back" - className="MuiButton-root MuiButton-text btnPrimary" - classes={ - Object { - "disabled": "Mui-disabled", - "focusVisible": "Mui-focusVisible", - "root": "MuiButtonBase-root", - } - } - component="button" - disabled={false} - focusRipple={true} - focusVisibleClassName="Mui-focusVisible" - onClick={[Function]} - type="button" - > - <button - aria-label="error_page.back" - className="MuiButtonBase-root MuiButton-root MuiButton-text btnPrimary" - 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" - > - error_page.back - </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))> + error_page.back + </span> + <span + class="MuiTouchRipple-root" + /> + </button> </div> </mock-content> -</EcogestureNotFound> +</div> `; diff --git a/src/components/Ecogesture/EcogestureReinitModal/EcogestureReinitModal.spec.tsx b/src/components/Ecogesture/EcogestureReinitModal/EcogestureReinitModal.spec.tsx index 5f9148b0379bd6bb81982b521e23bd2b3e489304..a37d0c48f64a214b5eddc8553bfaa81331dc50c6 100644 --- a/src/components/Ecogesture/EcogestureReinitModal/EcogestureReinitModal.spec.tsx +++ b/src/components/Ecogesture/EcogestureReinitModal/EcogestureReinitModal.spec.tsx @@ -1,17 +1,16 @@ -import { mount } from 'enzyme' -import toJson from 'enzyme-to-json' +import { render } from '@testing-library/react' import React from 'react' import EcogestureReinitModal from './EcogestureReinitModal' describe('EcogestureReinitModal component', () => { it('should be rendered correctly', async () => { - const wrapper = mount( + const { baseElement } = render( <EcogestureReinitModal open={true} handleCloseClick={jest.fn()} handleLaunchReinit={jest.fn()} /> ) - expect(toJson(wrapper)).toMatchSnapshot() + expect(baseElement).toMatchSnapshot() }) }) diff --git a/src/components/Ecogesture/EcogestureReinitModal/__snapshots__/EcogestureReinitModal.spec.tsx.snap b/src/components/Ecogesture/EcogestureReinitModal/__snapshots__/EcogestureReinitModal.spec.tsx.snap index a34f440cd19320c31a7f4fe466f497b4b7f23970..18d92802a010d3557aee5ec1a19713867e41f0d7 100644 --- a/src/components/Ecogesture/EcogestureReinitModal/__snapshots__/EcogestureReinitModal.spec.tsx.snap +++ b/src/components/Ecogesture/EcogestureReinitModal/__snapshots__/EcogestureReinitModal.spec.tsx.snap @@ -1,1186 +1,150 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP exports[`EcogestureReinitModal component should be rendered correctly 1`] = ` -<EcogestureReinitModal - handleCloseClick={[MockFunction]} - handleLaunchReinit={[MockFunction]} - open={true} +<body + style="padding-right: 0px; overflow: hidden;" > - <WithStyles(ForwardRef(Dialog)) - aria-labelledby="accessibility-title" - classes={ - Object { - "paper": "modal-paper", - "root": "modal-root", - } - } - onClose={[MockFunction]} - open={true} + <div + aria-hidden="true" + /> + <div + class="MuiDialog-root modal-root" + role="presentation" + style="position: fixed; z-index: 1300; right: 0px; bottom: 0px; top: 0px; left: 0px;" > - <ForwardRef(Dialog) - aria-labelledby="accessibility-title" - classes={ - Object { - "container": "MuiDialog-container", - "paper": "MuiDialog-paper modal-paper", - "paperFullScreen": "MuiDialog-paperFullScreen", - "paperFullWidth": "MuiDialog-paperFullWidth", - "paperScrollBody": "MuiDialog-paperScrollBody", - "paperScrollPaper": "MuiDialog-paperScrollPaper", - "paperWidthFalse": "MuiDialog-paperWidthFalse", - "paperWidthLg": "MuiDialog-paperWidthLg", - "paperWidthMd": "MuiDialog-paperWidthMd", - "paperWidthSm": "MuiDialog-paperWidthSm", - "paperWidthXl": "MuiDialog-paperWidthXl", - "paperWidthXs": "MuiDialog-paperWidthXs", - "root": "MuiDialog-root modal-root", - "scrollBody": "MuiDialog-scrollBody", - "scrollPaper": "MuiDialog-scrollPaper", - } - } - onClose={[MockFunction]} - open={true} + <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" > - <ForwardRef(Modal) - BackdropComponent={ - Object { - "$$typeof": Symbol(react.forward_ref), - "Naked": Object { - "$$typeof": Symbol(react.forward_ref), - "propTypes": Object { - "children": [Function], - "className": [Function], - "classes": [Function], - "invisible": [Function], - "open": [Function], - "transitionDuration": [Function], - }, - "render": [Function], - }, - "displayName": "WithStyles(ForwardRef(Backdrop))", - "options": Object { - "defaultTheme": Object { - "breakpoints": Object { - "between": [Function], - "down": [Function], - "keys": Array [ - "xs", - "sm", - "md", - "lg", - "xl", - ], - "only": [Function], - "up": [Function], - "values": Object { - "lg": 1280, - "md": 960, - "sm": 600, - "xl": 1920, - "xs": 0, - }, - "width": [Function], - }, - "direction": "ltr", - "mixins": Object { - "gutters": [Function], - "toolbar": Object { - "@media (min-width:0px) and (orientation: landscape)": Object { - "minHeight": 48, - }, - "@media (min-width:600px)": Object { - "minHeight": 64, - }, - "minHeight": 56, - }, - }, - "overrides": Object {}, - "palette": Object { - "action": Object { - "activatedOpacity": 0.12, - "active": "rgba(0, 0, 0, 0.54)", - "disabled": "rgba(0, 0, 0, 0.26)", - "disabledBackground": "rgba(0, 0, 0, 0.12)", - "disabledOpacity": 0.38, - "focus": "rgba(0, 0, 0, 0.12)", - "focusOpacity": 0.12, - "hover": "rgba(0, 0, 0, 0.04)", - "hoverOpacity": 0.04, - "selected": "rgba(0, 0, 0, 0.08)", - "selectedOpacity": 0.08, - }, - "augmentColor": [Function], - "background": Object { - "default": "#fafafa", - "paper": "#fff", - }, - "common": Object { - "black": "#000", - "white": "#fff", - }, - "contrastThreshold": 3, - "divider": "rgba(0, 0, 0, 0.12)", - "error": Object { - "contrastText": "#fff", - "dark": "#d32f2f", - "light": "#e57373", - "main": "#f44336", - }, - "getContrastText": [Function], - "grey": Object { - "100": "#f5f5f5", - "200": "#eeeeee", - "300": "#e0e0e0", - "400": "#bdbdbd", - "50": "#fafafa", - "500": "#9e9e9e", - "600": "#757575", - "700": "#616161", - "800": "#424242", - "900": "#212121", - "A100": "#d5d5d5", - "A200": "#aaaaaa", - "A400": "#303030", - "A700": "#616161", - }, - "info": Object { - "contrastText": "#fff", - "dark": "#1976d2", - "light": "#64b5f6", - "main": "#2196f3", - }, - "primary": Object { - "contrastText": "#fff", - "dark": "#303f9f", - "light": "#7986cb", - "main": "#3f51b5", - }, - "secondary": Object { - "contrastText": "#fff", - "dark": "#c51162", - "light": "#ff4081", - "main": "#f50057", - }, - "success": Object { - "contrastText": "rgba(0, 0, 0, 0.87)", - "dark": "#388e3c", - "light": "#81c784", - "main": "#4caf50", - }, - "text": Object { - "disabled": "rgba(0, 0, 0, 0.38)", - "hint": "rgba(0, 0, 0, 0.38)", - "primary": "rgba(0, 0, 0, 0.87)", - "secondary": "rgba(0, 0, 0, 0.54)", - }, - "tonalOffset": 0.2, - "type": "light", - "warning": Object { - "contrastText": "rgba(0, 0, 0, 0.87)", - "dark": "#f57c00", - "light": "#ffb74d", - "main": "#ff9800", - }, - }, - "props": Object {}, - "shadows": Array [ - "none", - "0px 2px 1px -1px rgba(0,0,0,0.2),0px 1px 1px 0px rgba(0,0,0,0.14),0px 1px 3px 0px rgba(0,0,0,0.12)", - "0px 3px 1px -2px rgba(0,0,0,0.2),0px 2px 2px 0px rgba(0,0,0,0.14),0px 1px 5px 0px rgba(0,0,0,0.12)", - "0px 3px 3px -2px rgba(0,0,0,0.2),0px 3px 4px 0px rgba(0,0,0,0.14),0px 1px 8px 0px rgba(0,0,0,0.12)", - "0px 2px 4px -1px rgba(0,0,0,0.2),0px 4px 5px 0px rgba(0,0,0,0.14),0px 1px 10px 0px rgba(0,0,0,0.12)", - "0px 3px 5px -1px rgba(0,0,0,0.2),0px 5px 8px 0px rgba(0,0,0,0.14),0px 1px 14px 0px rgba(0,0,0,0.12)", - "0px 3px 5px -1px rgba(0,0,0,0.2),0px 6px 10px 0px rgba(0,0,0,0.14),0px 1px 18px 0px rgba(0,0,0,0.12)", - "0px 4px 5px -2px rgba(0,0,0,0.2),0px 7px 10px 1px rgba(0,0,0,0.14),0px 2px 16px 1px rgba(0,0,0,0.12)", - "0px 5px 5px -3px rgba(0,0,0,0.2),0px 8px 10px 1px rgba(0,0,0,0.14),0px 3px 14px 2px rgba(0,0,0,0.12)", - "0px 5px 6px -3px rgba(0,0,0,0.2),0px 9px 12px 1px rgba(0,0,0,0.14),0px 3px 16px 2px rgba(0,0,0,0.12)", - "0px 6px 6px -3px rgba(0,0,0,0.2),0px 10px 14px 1px rgba(0,0,0,0.14),0px 4px 18px 3px rgba(0,0,0,0.12)", - "0px 6px 7px -4px rgba(0,0,0,0.2),0px 11px 15px 1px rgba(0,0,0,0.14),0px 4px 20px 3px rgba(0,0,0,0.12)", - "0px 7px 8px -4px rgba(0,0,0,0.2),0px 12px 17px 2px rgba(0,0,0,0.14),0px 5px 22px 4px rgba(0,0,0,0.12)", - "0px 7px 8px -4px rgba(0,0,0,0.2),0px 13px 19px 2px rgba(0,0,0,0.14),0px 5px 24px 4px rgba(0,0,0,0.12)", - "0px 7px 9px -4px rgba(0,0,0,0.2),0px 14px 21px 2px rgba(0,0,0,0.14),0px 5px 26px 4px rgba(0,0,0,0.12)", - "0px 8px 9px -5px rgba(0,0,0,0.2),0px 15px 22px 2px rgba(0,0,0,0.14),0px 6px 28px 5px rgba(0,0,0,0.12)", - "0px 8px 10px -5px rgba(0,0,0,0.2),0px 16px 24px 2px rgba(0,0,0,0.14),0px 6px 30px 5px rgba(0,0,0,0.12)", - "0px 8px 11px -5px rgba(0,0,0,0.2),0px 17px 26px 2px rgba(0,0,0,0.14),0px 6px 32px 5px rgba(0,0,0,0.12)", - "0px 9px 11px -5px rgba(0,0,0,0.2),0px 18px 28px 2px rgba(0,0,0,0.14),0px 7px 34px 6px rgba(0,0,0,0.12)", - "0px 9px 12px -6px rgba(0,0,0,0.2),0px 19px 29px 2px rgba(0,0,0,0.14),0px 7px 36px 6px rgba(0,0,0,0.12)", - "0px 10px 13px -6px rgba(0,0,0,0.2),0px 20px 31px 3px rgba(0,0,0,0.14),0px 8px 38px 7px rgba(0,0,0,0.12)", - "0px 10px 13px -6px rgba(0,0,0,0.2),0px 21px 33px 3px rgba(0,0,0,0.14),0px 8px 40px 7px rgba(0,0,0,0.12)", - "0px 10px 14px -6px rgba(0,0,0,0.2),0px 22px 35px 3px rgba(0,0,0,0.14),0px 8px 42px 7px rgba(0,0,0,0.12)", - "0px 11px 14px -7px rgba(0,0,0,0.2),0px 23px 36px 3px rgba(0,0,0,0.14),0px 9px 44px 8px rgba(0,0,0,0.12)", - "0px 11px 15px -7px rgba(0,0,0,0.2),0px 24px 38px 3px rgba(0,0,0,0.14),0px 9px 46px 8px rgba(0,0,0,0.12)", - ], - "shape": Object { - "borderRadius": 4, - }, - "spacing": [Function], - "transitions": Object { - "create": [Function], - "duration": Object { - "complex": 375, - "enteringScreen": 225, - "leavingScreen": 195, - "short": 250, - "shorter": 200, - "shortest": 150, - "standard": 300, - }, - "easing": Object { - "easeIn": "cubic-bezier(0.4, 0, 1, 1)", - "easeInOut": "cubic-bezier(0.4, 0, 0.2, 1)", - "easeOut": "cubic-bezier(0.0, 0, 0.2, 1)", - "sharp": "cubic-bezier(0.4, 0, 0.6, 1)", - }, - "getAutoHeightDuration": [Function], - }, - "typography": Object { - "body1": Object { - "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif", - "fontSize": "1rem", - "fontWeight": 400, - "letterSpacing": "0.00938em", - "lineHeight": 1.5, - }, - "body2": Object { - "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif", - "fontSize": "0.875rem", - "fontWeight": 400, - "letterSpacing": "0.01071em", - "lineHeight": 1.43, - }, - "button": Object { - "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif", - "fontSize": "0.875rem", - "fontWeight": 500, - "letterSpacing": "0.02857em", - "lineHeight": 1.75, - "textTransform": "uppercase", - }, - "caption": Object { - "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif", - "fontSize": "0.75rem", - "fontWeight": 400, - "letterSpacing": "0.03333em", - "lineHeight": 1.66, - }, - "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif", - "fontSize": 14, - "fontWeightBold": 700, - "fontWeightLight": 300, - "fontWeightMedium": 500, - "fontWeightRegular": 400, - "h1": Object { - "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif", - "fontSize": "6rem", - "fontWeight": 300, - "letterSpacing": "-0.01562em", - "lineHeight": 1.167, - }, - "h2": Object { - "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif", - "fontSize": "3.75rem", - "fontWeight": 300, - "letterSpacing": "-0.00833em", - "lineHeight": 1.2, - }, - "h3": Object { - "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif", - "fontSize": "3rem", - "fontWeight": 400, - "letterSpacing": "0em", - "lineHeight": 1.167, - }, - "h4": Object { - "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif", - "fontSize": "2.125rem", - "fontWeight": 400, - "letterSpacing": "0.00735em", - "lineHeight": 1.235, - }, - "h5": Object { - "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif", - "fontSize": "1.5rem", - "fontWeight": 400, - "letterSpacing": "0em", - "lineHeight": 1.334, - }, - "h6": Object { - "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif", - "fontSize": "1.25rem", - "fontWeight": 500, - "letterSpacing": "0.0075em", - "lineHeight": 1.6, - }, - "htmlFontSize": 16, - "overline": Object { - "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif", - "fontSize": "0.75rem", - "fontWeight": 400, - "letterSpacing": "0.08333em", - "lineHeight": 2.66, - "textTransform": "uppercase", - }, - "pxToRem": [Function], - "round": [Function], - "subtitle1": Object { - "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif", - "fontSize": "1rem", - "fontWeight": 400, - "letterSpacing": "0.00938em", - "lineHeight": 1.75, - }, - "subtitle2": Object { - "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif", - "fontSize": "0.875rem", - "fontWeight": 500, - "letterSpacing": "0.00714em", - "lineHeight": 1.57, - }, - }, - "zIndex": Object { - "appBar": 1100, - "drawer": 1200, - "mobileStepper": 1000, - "modal": 1300, - "snackbar": 1400, - "speedDial": 1050, - "tooltip": 1500, - }, - }, - "name": "MuiBackdrop", - }, - "propTypes": Object { - "classes": [Function], - "innerRef": [Function], - }, - "render": [Function], - "useStyles": [Function], - } - } - BackdropProps={ - Object { - "transitionDuration": Object { - "enter": 225, - "exit": 195, - }, - } - } - className="MuiDialog-root modal-root" - closeAfterTransition={true} - disableEscapeKeyDown={false} - onClose={[MockFunction]} - open={true} + <div + aria-labelledby="accessibility-title" + class="MuiPaper-root MuiDialog-paper modal-paper MuiDialog-paperScrollPaper MuiDialog-paperWidthSm MuiPaper-elevation24 MuiPaper-rounded" + role="dialog" > - <ForwardRef(Portal) - disablePortal={false} + <div + id="accessibility-title" > - <Portal - containerInfo={ - <body - style="padding-right: 0px; overflow: hidden;" - > - <div - class="MuiDialog-root modal-root" - role="presentation" - style="position: fixed; z-index: 1300; right: 0px; bottom: 0px; top: 0px; left: 0px;" - > - <div - aria-hidden="true" - class="MuiBackdrop-root" - style="opacity: 1; webkit-transition: opacity 225ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; transition: opacity 225ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;" - /> - <div - data-test="sentinelStart" - tabindex="0" - /> - <div - class="MuiDialog-container MuiDialog-scrollPaper" - role="none presentation" - style="opacity: 1; webkit-transition: opacity 225ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; transition: opacity 225ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;" - tabindex="-1" - > - <div - aria-labelledby="accessibility-title" - class="MuiPaper-root MuiDialog-paper modal-paper MuiDialog-paperScrollPaper MuiDialog-paperWidthSm MuiPaper-elevation24 MuiPaper-rounded" - role="dialog" - > - <div - id="accessibility-title" - > - 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" - > - <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 MuiButton-text btnSecondary" - tabindex="0" - type="button" - > - <span - class="MuiButton-label" - > - ecogesture.reinitModal.btn1 - </span> - <span - class="MuiTouchRipple-root" - /> - </button> - <button - aria-label="ecogesture.reinitModal.btn2" - class="MuiButtonBase-root MuiButton-root MuiButton-text btnPrimary" - tabindex="0" - type="button" - > - <span - class="MuiButton-label" - > - ecogesture.reinitModal.btn2 - </span> - <span - class="MuiTouchRipple-root" - /> - </button> - </div> - </div> - </div> - </div> - <div - data-test="sentinelEnd" - tabindex="0" - /> - </div> - </body> - } + 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" > - <div - className="MuiDialog-root modal-root" - onKeyDown={[Function]} - role="presentation" - style={ - Object { - "bottom": 0, - "left": 0, - "position": "fixed", - "right": 0, - "top": 0, - "zIndex": 1300, - } - } + <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" + > + <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" > - <WithStyles(ForwardRef(Backdrop)) - onClick={[Function]} - open={true} - transitionDuration={ - Object { - "enter": 225, - "exit": 195, - } - } + 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 MuiButton-text btnSecondary" + tabindex="0" + type="button" + > + <span + class="MuiButton-label" > - <ForwardRef(Backdrop) - classes={ - Object { - "invisible": "MuiBackdrop-invisible", - "root": "MuiBackdrop-root", - } - } - onClick={[Function]} - open={true} - transitionDuration={ - Object { - "enter": 225, - "exit": 195, - } - } - > - <ForwardRef(Fade) - in={true} - onClick={[Function]} - timeout={ - Object { - "enter": 225, - "exit": 195, - } - } - > - <Transition - appear={true} - enter={true} - exit={true} - in={true} - mountOnEnter={false} - onClick={[Function]} - onEnter={[Function]} - onEntered={[Function]} - onEntering={[Function]} - onExit={[Function]} - onExited={[Function]} - onExiting={[Function]} - timeout={ - Object { - "enter": 225, - "exit": 195, - } - } - unmountOnExit={false} - > - <div - aria-hidden={true} - className="MuiBackdrop-root" - onClick={[Function]} - style={ - Object { - "opacity": 1, - "visibility": undefined, - } - } - /> - </Transition> - </ForwardRef(Fade)> - </ForwardRef(Backdrop)> - </WithStyles(ForwardRef(Backdrop))> - <Unstable_TrapFocus - disableAutoFocus={false} - disableEnforceFocus={false} - disableRestoreFocus={false} - getDoc={[Function]} - isEnabled={[Function]} - open={true} + ecogesture.reinitModal.btn1 + </span> + <span + class="MuiTouchRipple-root" + /> + </button> + <button + aria-label="ecogesture.reinitModal.btn2" + class="MuiButtonBase-root MuiButton-root MuiButton-text btnPrimary" + tabindex="0" + type="button" + > + <span + class="MuiButton-label" > - <div - data-test="sentinelStart" - tabIndex={0} - /> - <ForwardRef(Fade) - appear={true} - in={true} - onEnter={[Function]} - onExited={[Function]} - role="none presentation" - tabIndex="-1" - timeout={ - Object { - "enter": 225, - "exit": 195, - } - } - > - <Transition - appear={true} - enter={true} - exit={true} - in={true} - mountOnEnter={false} - onEnter={[Function]} - onEntered={[Function]} - onEntering={[Function]} - onExit={[Function]} - onExited={[Function]} - onExiting={[Function]} - role="none presentation" - tabIndex="-1" - timeout={ - Object { - "enter": 225, - "exit": 195, - } - } - unmountOnExit={false} - > - <div - className="MuiDialog-container MuiDialog-scrollPaper" - onMouseDown={[Function]} - onMouseUp={[Function]} - role="none presentation" - style={ - Object { - "opacity": 1, - "visibility": undefined, - } - } - tabIndex="-1" - > - <WithStyles(ForwardRef(Paper)) - aria-labelledby="accessibility-title" - className="MuiDialog-paper modal-paper MuiDialog-paperScrollPaper MuiDialog-paperWidthSm" - elevation={24} - role="dialog" - > - <ForwardRef(Paper) - aria-labelledby="accessibility-title" - className="MuiDialog-paper modal-paper MuiDialog-paperScrollPaper MuiDialog-paperWidthSm" - classes={ - Object { - "elevation0": "MuiPaper-elevation0", - "elevation1": "MuiPaper-elevation1", - "elevation10": "MuiPaper-elevation10", - "elevation11": "MuiPaper-elevation11", - "elevation12": "MuiPaper-elevation12", - "elevation13": "MuiPaper-elevation13", - "elevation14": "MuiPaper-elevation14", - "elevation15": "MuiPaper-elevation15", - "elevation16": "MuiPaper-elevation16", - "elevation17": "MuiPaper-elevation17", - "elevation18": "MuiPaper-elevation18", - "elevation19": "MuiPaper-elevation19", - "elevation2": "MuiPaper-elevation2", - "elevation20": "MuiPaper-elevation20", - "elevation21": "MuiPaper-elevation21", - "elevation22": "MuiPaper-elevation22", - "elevation23": "MuiPaper-elevation23", - "elevation24": "MuiPaper-elevation24", - "elevation3": "MuiPaper-elevation3", - "elevation4": "MuiPaper-elevation4", - "elevation5": "MuiPaper-elevation5", - "elevation6": "MuiPaper-elevation6", - "elevation7": "MuiPaper-elevation7", - "elevation8": "MuiPaper-elevation8", - "elevation9": "MuiPaper-elevation9", - "outlined": "MuiPaper-outlined", - "root": "MuiPaper-root", - "rounded": "MuiPaper-rounded", - } - } - elevation={24} - role="dialog" - > - <div - aria-labelledby="accessibility-title" - className="MuiPaper-root MuiDialog-paper modal-paper MuiDialog-paperScrollPaper MuiDialog-paperWidthSm MuiPaper-elevation24 MuiPaper-rounded" - role="dialog" - > - <div - id="accessibility-title" - > - 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]} - > - <WithStyles(ForwardRef(ButtonBase)) - aria-label="feedback.accessibility.button_close" - centerRipple={true} - className="MuiIconButton-root modal-paper-close-button" - disabled={false} - focusRipple={true} - onClick={[MockFunction]} - > - <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]} - > - <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" - > - <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="eg-reinit-modal" - > - <Icon - icon="test-file-stub" - size={63} - spin={false} - > - <Component - 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" - > - 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.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="btnSecondary" - onClick={[MockFunction]} - > - <ForwardRef(Button) - aria-label="ecogesture.reinitModal.btn1" - className="btnSecondary" - classes={ - Object { - "colorInherit": "MuiButton-colorInherit", - "contained": "MuiButton-contained", - "containedPrimary": "MuiButton-containedPrimary", - "containedSecondary": "MuiButton-containedSecondary", - "containedSizeLarge": "MuiButton-containedSizeLarge", - "containedSizeSmall": "MuiButton-containedSizeSmall", - "disableElevation": "MuiButton-disableElevation", - "disabled": "Mui-disabled", - "endIcon": "MuiButton-endIcon", - "focusVisible": "Mui-focusVisible", - "fullWidth": "MuiButton-fullWidth", - "iconSizeLarge": "MuiButton-iconSizeLarge", - "iconSizeMedium": "MuiButton-iconSizeMedium", - "iconSizeSmall": "MuiButton-iconSizeSmall", - "label": "MuiButton-label", - "outlined": "MuiButton-outlined", - "outlinedPrimary": "MuiButton-outlinedPrimary", - "outlinedSecondary": "MuiButton-outlinedSecondary", - "outlinedSizeLarge": "MuiButton-outlinedSizeLarge", - "outlinedSizeSmall": "MuiButton-outlinedSizeSmall", - "root": "MuiButton-root", - "sizeLarge": "MuiButton-sizeLarge", - "sizeSmall": "MuiButton-sizeSmall", - "startIcon": "MuiButton-startIcon", - "text": "MuiButton-text", - "textPrimary": "MuiButton-textPrimary", - "textSecondary": "MuiButton-textSecondary", - "textSizeLarge": "MuiButton-textSizeLarge", - "textSizeSmall": "MuiButton-textSizeSmall", - } - } - onClick={[MockFunction]} - > - <WithStyles(ForwardRef(ButtonBase)) - aria-label="ecogesture.reinitModal.btn1" - className="MuiButton-root MuiButton-text btnSecondary" - component="button" - disabled={false} - focusRipple={true} - focusVisibleClassName="Mui-focusVisible" - onClick={[MockFunction]} - type="button" - > - <ForwardRef(ButtonBase) - aria-label="ecogesture.reinitModal.btn1" - className="MuiButton-root MuiButton-text btnSecondary" - classes={ - Object { - "disabled": "Mui-disabled", - "focusVisible": "Mui-focusVisible", - "root": "MuiButtonBase-root", - } - } - component="button" - disabled={false} - focusRipple={true} - focusVisibleClassName="Mui-focusVisible" - onClick={[MockFunction]} - type="button" - > - <button - aria-label="ecogesture.reinitModal.btn1" - className="MuiButtonBase-root MuiButton-root MuiButton-text btnSecondary" - 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" - > - ecogesture.reinitModal.btn1 - </span> - <WithStyles(memo) - center={false} - > - <ForwardRef(TouchRipple) - center={false} - classes={ - Object { - "child": "MuiTouchRipple-child", - "childLeaving": "MuiTouchRipple-childLeaving", - "childPulsate": "MuiTouchRipple-childPulsate", - "ripple": "MuiTouchRipple-ripple", - "ripplePulsate": "MuiTouchRipple-ripplePulsate", - "rippleVisible": "MuiTouchRipple-rippleVisible", - "root": "MuiTouchRipple-root", - } - } - > - <span - className="MuiTouchRipple-root" - > - <TransitionGroup - childFactory={[Function]} - component={null} - exit={true} - /> - </span> - </ForwardRef(TouchRipple)> - </WithStyles(memo)> - </button> - </ForwardRef(ButtonBase)> - </WithStyles(ForwardRef(ButtonBase))> - </ForwardRef(Button)> - </WithStyles(ForwardRef(Button))> - <WithStyles(ForwardRef(Button)) - aria-label="ecogesture.reinitModal.btn2" - className="btnPrimary" - onClick={[MockFunction]} - > - <ForwardRef(Button) - aria-label="ecogesture.reinitModal.btn2" - className="btnPrimary" - classes={ - Object { - "colorInherit": "MuiButton-colorInherit", - "contained": "MuiButton-contained", - "containedPrimary": "MuiButton-containedPrimary", - "containedSecondary": "MuiButton-containedSecondary", - "containedSizeLarge": "MuiButton-containedSizeLarge", - "containedSizeSmall": "MuiButton-containedSizeSmall", - "disableElevation": "MuiButton-disableElevation", - "disabled": "Mui-disabled", - "endIcon": "MuiButton-endIcon", - "focusVisible": "Mui-focusVisible", - "fullWidth": "MuiButton-fullWidth", - "iconSizeLarge": "MuiButton-iconSizeLarge", - "iconSizeMedium": "MuiButton-iconSizeMedium", - "iconSizeSmall": "MuiButton-iconSizeSmall", - "label": "MuiButton-label", - "outlined": "MuiButton-outlined", - "outlinedPrimary": "MuiButton-outlinedPrimary", - "outlinedSecondary": "MuiButton-outlinedSecondary", - "outlinedSizeLarge": "MuiButton-outlinedSizeLarge", - "outlinedSizeSmall": "MuiButton-outlinedSizeSmall", - "root": "MuiButton-root", - "sizeLarge": "MuiButton-sizeLarge", - "sizeSmall": "MuiButton-sizeSmall", - "startIcon": "MuiButton-startIcon", - "text": "MuiButton-text", - "textPrimary": "MuiButton-textPrimary", - "textSecondary": "MuiButton-textSecondary", - "textSizeLarge": "MuiButton-textSizeLarge", - "textSizeSmall": "MuiButton-textSizeSmall", - } - } - onClick={[MockFunction]} - > - <WithStyles(ForwardRef(ButtonBase)) - aria-label="ecogesture.reinitModal.btn2" - className="MuiButton-root MuiButton-text btnPrimary" - component="button" - disabled={false} - focusRipple={true} - focusVisibleClassName="Mui-focusVisible" - onClick={[MockFunction]} - type="button" - > - <ForwardRef(ButtonBase) - aria-label="ecogesture.reinitModal.btn2" - className="MuiButton-root MuiButton-text btnPrimary" - 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.reinitModal.btn2" - className="MuiButtonBase-root MuiButton-root MuiButton-text btnPrimary" - 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" - > - ecogesture.reinitModal.btn2 - </span> - <WithStyles(memo) - center={false} - > - <ForwardRef(TouchRipple) - center={false} - classes={ - Object { - "child": "MuiTouchRipple-child", - "childLeaving": "MuiTouchRipple-childLeaving", - "childPulsate": "MuiTouchRipple-childPulsate", - "ripple": "MuiTouchRipple-ripple", - "ripplePulsate": "MuiTouchRipple-ripplePulsate", - "rippleVisible": "MuiTouchRipple-rippleVisible", - "root": "MuiTouchRipple-root", - } - } - > - <span - className="MuiTouchRipple-root" - > - <TransitionGroup - childFactory={[Function]} - component={null} - exit={true} - /> - </span> - </ForwardRef(TouchRipple)> - </WithStyles(memo)> - </button> - </ForwardRef(ButtonBase)> - </WithStyles(ForwardRef(ButtonBase))> - </ForwardRef(Button)> - </WithStyles(ForwardRef(Button))> - </div> - </div> - </div> - </ForwardRef(Paper)> - </WithStyles(ForwardRef(Paper))> - </div> - </Transition> - </ForwardRef(Fade)> - <div - data-test="sentinelEnd" - tabIndex={0} - /> - </Unstable_TrapFocus> - </div> - </Portal> - </ForwardRef(Portal)> - </ForwardRef(Modal)> - </ForwardRef(Dialog)> - </WithStyles(ForwardRef(Dialog))> -</EcogestureReinitModal> + ecogesture.reinitModal.btn2 + </span> + <span + class="MuiTouchRipple-root" + /> + </button> + </div> + </div> + </div> + </div> + <div + data-test="sentinelEnd" + tabindex="0" + /> + </div> +</body> `; diff --git a/src/components/Ecogesture/EcogestureTabsView.spec.tsx b/src/components/Ecogesture/EcogestureTabsView.spec.tsx index f9eb724daac10611df25dc09f03a69a68ea564eb..4f90bd9c3dc01bab95999eebcce39cf63909699a 100644 --- a/src/components/Ecogesture/EcogestureTabsView.spec.tsx +++ b/src/components/Ecogesture/EcogestureTabsView.spec.tsx @@ -1,7 +1,7 @@ import { IconButton, Tab } from '@material-ui/core' +import { render, screen, waitFor } from '@testing-library/react' import EcogestureTabsView from 'components/Ecogesture/EcogestureTabsView' import { mount } from 'enzyme' -import toJson from 'enzyme-to-json' import React from 'react' import { Provider } from 'react-redux' import * as profileActions from 'store/profile/profile.slice' @@ -50,15 +50,14 @@ describe('EcogestureView component', () => { const store = createMockEcolyoStore() it('should be rendered correctly', async () => { - const wrapper = mount( + const { container } = render( <Provider store={store}> <EcogestureTabsView /> </Provider> ) - await waitForComponentToPaint(wrapper) - - expect(wrapper.find(Tab).length).toBe(3) - expect(toJson(wrapper)).toMatchSnapshot() + await waitFor(() => null, { container }) + expect(screen.getAllByRole('button').length).toBe(3) + expect(container).toMatchSnapshot() }) it('should render ecogesture init modal', async () => { diff --git a/src/components/Ecogesture/EfficiencyRating/EfficiencyRating.spec.tsx b/src/components/Ecogesture/EfficiencyRating/EfficiencyRating.spec.tsx index 0ac6b73e5884385bfddb078699cf61d6c1a1de39..17445f0947099ba9f3abdc61e6da0e97300844ac 100644 --- a/src/components/Ecogesture/EfficiencyRating/EfficiencyRating.spec.tsx +++ b/src/components/Ecogesture/EfficiencyRating/EfficiencyRating.spec.tsx @@ -1,11 +1,10 @@ +import { render } from '@testing-library/react' import EfficiencyRating from 'components/Ecogesture/EfficiencyRating/EfficiencyRating' -import { mount } from 'enzyme' -import toJson from 'enzyme-to-json' import React from 'react' describe('EfficiencyRating component', () => { it('should be rendered correctly', () => { - const wrapper = mount(<EfficiencyRating result={3} />) - expect(toJson(wrapper)).toMatchSnapshot() + const { container } = render(<EfficiencyRating result={3} />) + expect(container).toMatchSnapshot() }) }) diff --git a/src/components/Ecogesture/EfficiencyRating/__snapshots__/EfficiencyRating.spec.tsx.snap b/src/components/Ecogesture/EfficiencyRating/__snapshots__/EfficiencyRating.spec.tsx.snap index 9b1d8405abc6fc7a30d13bd2375d2472bdd79414..8ffd02507109a5c68be5b8335ec138d4feb61564 100644 --- a/src/components/Ecogesture/EfficiencyRating/__snapshots__/EfficiencyRating.spec.tsx.snap +++ b/src/components/Ecogesture/EfficiencyRating/__snapshots__/EfficiencyRating.spec.tsx.snap @@ -1,182 +1,60 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP exports[`EfficiencyRating component should be rendered correctly 1`] = ` -<EfficiencyRating - result={3} -> +<div> <div - className="thunder" + class="thunder" > - <StyledIcon - className="star" - icon="test-file-stub" - key="1" - size={15} + <svg + aria-hidden="true" + class="star styles__icon___23x3R" + height="15" + width="15" > - <Icon - aria-hidden={true} - className="star" - icon="test-file-stub" - size={15} - spin={false} - > - <Component - 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 - className="star" - icon="test-file-stub" - key="2" - size={15} + <use + xlink:href="#test-file-stub" + /> + </svg> + <svg + aria-hidden="true" + class="star styles__icon___23x3R" + height="15" + width="15" > - <Icon - aria-hidden={true} - className="star" - icon="test-file-stub" - size={15} - spin={false} - > - <Component - 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 - className="star" - icon="test-file-stub" - key="3" - size={15} + <use + xlink:href="#test-file-stub" + /> + </svg> + <svg + aria-hidden="true" + class="star styles__icon___23x3R" + height="15" + width="15" > - <Icon - aria-hidden={true} - className="star" - icon="test-file-stub" - size={15} - spin={false} - > - <Component - 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 - className="star" - icon="test-file-stub" - key="4" - size={15} + <use + xlink:href="#test-file-stub" + /> + </svg> + <svg + aria-hidden="true" + class="star styles__icon___23x3R" + height="15" + width="15" > - <Icon - aria-hidden={true} - className="star" - icon="test-file-stub" - size={15} - spin={false} - > - <Component - 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 - className="star" - icon="test-file-stub" - key="5" - size={15} + <use + xlink:href="#test-file-stub" + /> + </svg> + <svg + aria-hidden="true" + class="star styles__icon___23x3R" + height="15" + width="15" > - <Icon - aria-hidden={true} - className="star" - icon="test-file-stub" - size={15} - spin={false} - > - <Component - 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> + <use + xlink:href="#test-file-stub" + /> + </svg> </div> -</EfficiencyRating> +</div> `; diff --git a/src/components/Ecogesture/SingleEcogestureView.spec.tsx b/src/components/Ecogesture/SingleEcogestureView.spec.tsx index 6f96223ab2bd6d147f16ddb66bb582b7065916d3..a2ec8525df0ca5410f63b68d8e0ec084b25277c6 100644 --- a/src/components/Ecogesture/SingleEcogestureView.spec.tsx +++ b/src/components/Ecogesture/SingleEcogestureView.spec.tsx @@ -1,5 +1,5 @@ +import { render, waitFor } from '@testing-library/react' import { mount } from 'enzyme' -import toJson from 'enzyme-to-json' import React from 'react' import { Provider } from 'react-redux' import { mockedEcogesturesData } from 'tests/__mocks__/ecogesturesData.mock' @@ -28,13 +28,13 @@ describe('SingleEcogesture component', () => { const store = createMockEcolyoStore() it('should be rendered correctly', async () => { mockGetEcogesturesByIds.mockResolvedValue([mockedEcogesturesData[0]]) - const wrapper = mount( + const { container } = render( <Provider store={store}> <SingleEcogestureView /> </Provider> ) - await waitForComponentToPaint(wrapper) - expect(toJson(wrapper)).toMatchSnapshot() + await waitFor(() => null, { container }) + expect(container).toMatchSnapshot() }) it('should change doing status', async () => { diff --git a/src/components/Ecogesture/__snapshots__/EcogestureTabsView.spec.tsx.snap b/src/components/Ecogesture/__snapshots__/EcogestureTabsView.spec.tsx.snap index ba9558c108d3adb28241bdad7ffd4fecbf231eeb..e8cc3b0ab9978a7ae15890857254b607675de568 100644 --- a/src/components/Ecogesture/__snapshots__/EcogestureTabsView.spec.tsx.snap +++ b/src/components/Ecogesture/__snapshots__/EcogestureTabsView.spec.tsx.snap @@ -1,2356 +1,241 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP exports[`EcogestureView component should be rendered correctly 1`] = ` -<Provider - store={ - Object { - "clearActions": [Function], - "dispatch": [Function], - "getActions": [Function], - "getState": [Function], - "replaceReducer": [Function], - "subscribe": [Function], - } - } +<div + aria-hidden="true" > - <EcogestureTabsView> - <mock-cozybar - titleKey="common.title_ecogestures" - /> - <mock-header - desktopTitleKey="common.title_ecogestures" - setHeaderHeight={[Function]} + <mock-cozybar + titlekey="common.title_ecogestures" + /> + <mock-header + desktoptitlekey="common.title_ecogestures" + > + <div + class="MuiTabs-root ecogestures-tabs" > - <WithStyles(ForwardRef(Tabs)) - TabIndicatorProps={ - Object { - "className": "indicator-tab", - } - } - aria-label="ecogestures-tabs" - centered={true} - className="ecogestures-tabs" - onChange={[Function]} - value={0} + <div + class="MuiTabs-scroller MuiTabs-fixed" + style="overflow: hidden;" > - <ForwardRef(Tabs) - TabIndicatorProps={ - Object { - "className": "indicator-tab", - } - } + <div aria-label="ecogestures-tabs" - centered={true} - className="ecogestures-tabs" - classes={ - Object { - "centered": "MuiTabs-centered", - "fixed": "MuiTabs-fixed", - "flexContainer": "MuiTabs-flexContainer", - "flexContainerVertical": "MuiTabs-flexContainerVertical", - "indicator": "MuiTabs-indicator", - "root": "MuiTabs-root", - "scrollButtons": "MuiTabs-scrollButtons", - "scrollButtonsDesktop": "MuiTabs-scrollButtonsDesktop", - "scrollable": "MuiTabs-scrollable", - "scroller": "MuiTabs-scroller", - "vertical": "MuiTabs-vertical", - } - } - onChange={[Function]} - value={0} + class="MuiTabs-flexContainer MuiTabs-centered" + role="tablist" > - <div - className="MuiTabs-root ecogestures-tabs" + <button + aria-controls="simple-tabpanel-0" + aria-selected="true" + class="MuiButtonBase-root MuiTab-root MuiTab-textColorInherit single-tab active Mui-selected" + id="simple-tab-0" + role="tab" + tabindex="0" + type="button" > - <div - className="MuiTabs-scroller MuiTabs-fixed" - onScroll={[Function]} - style={ - Object { - "marginBottom": null, - "overflow": "hidden", - } - } + <span + class="MuiTab-wrapper" > - <div - aria-label="ecogestures-tabs" - className="MuiTabs-flexContainer MuiTabs-centered" - onKeyDown={[Function]} - role="tablist" - > - <WithStyles(ForwardRef(Tab)) - aria-controls="simple-tabpanel-0" - className="single-tab active" - fullWidth={false} - id="simple-tab-0" - indicator={false} - key=".0" - label={ - <React.Fragment> - ecogesture.title_tab_0 - <br /> - (0) - </React.Fragment> - } - onChange={[Function]} - selected={true} - tabIndex={0} - textColor="inherit" - value={0} - > - <ForwardRef(Tab) - aria-controls="simple-tabpanel-0" - className="single-tab active" - classes={ - Object { - "disabled": "Mui-disabled", - "fullWidth": "MuiTab-fullWidth", - "labelIcon": "MuiTab-labelIcon", - "root": "MuiTab-root", - "selected": "Mui-selected", - "textColorInherit": "MuiTab-textColorInherit", - "textColorPrimary": "MuiTab-textColorPrimary", - "textColorSecondary": "MuiTab-textColorSecondary", - "wrapped": "MuiTab-wrapped", - "wrapper": "MuiTab-wrapper", - } - } - fullWidth={false} - id="simple-tab-0" - indicator={false} - label={ - <React.Fragment> - ecogesture.title_tab_0 - <br /> - (0) - </React.Fragment> - } - onChange={[Function]} - selected={true} - tabIndex={0} - textColor="inherit" - value={0} - > - <WithStyles(ForwardRef(ButtonBase)) - aria-controls="simple-tabpanel-0" - aria-selected={true} - className="MuiTab-root MuiTab-textColorInherit single-tab active Mui-selected" - disabled={false} - focusRipple={true} - id="simple-tab-0" - onClick={[Function]} - onFocus={[Function]} - role="tab" - tabIndex={0} - > - <ForwardRef(ButtonBase) - aria-controls="simple-tabpanel-0" - aria-selected={true} - className="MuiTab-root MuiTab-textColorInherit single-tab active Mui-selected" - classes={ - Object { - "disabled": "Mui-disabled", - "focusVisible": "Mui-focusVisible", - "root": "MuiButtonBase-root", - } - } - disabled={false} - focusRipple={true} - id="simple-tab-0" - onClick={[Function]} - onFocus={[Function]} - role="tab" - tabIndex={0} - > - <button - aria-controls="simple-tabpanel-0" - aria-selected={true} - className="MuiButtonBase-root MuiTab-root MuiTab-textColorInherit single-tab active Mui-selected" - disabled={false} - id="simple-tab-0" - 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="tab" - tabIndex={0} - type="button" - > - <span - className="MuiTab-wrapper" - > - ecogesture.title_tab_0 - <br /> - (0) - </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(Tab)> - </WithStyles(ForwardRef(Tab))> - <WithStyles(ForwardRef(Tab)) - aria-controls="simple-tabpanel-1" - className="single-tab" - fullWidth={false} - id="simple-tab-1" - indicator={false} - key=".1" - label={ - <React.Fragment> - ecogesture.title_tab_1 - <br /> - (0) - </React.Fragment> - } - onChange={[Function]} - selected={false} - tabIndex={0} - textColor="inherit" - value={1} - > - <ForwardRef(Tab) - aria-controls="simple-tabpanel-1" - className="single-tab" - classes={ - Object { - "disabled": "Mui-disabled", - "fullWidth": "MuiTab-fullWidth", - "labelIcon": "MuiTab-labelIcon", - "root": "MuiTab-root", - "selected": "Mui-selected", - "textColorInherit": "MuiTab-textColorInherit", - "textColorPrimary": "MuiTab-textColorPrimary", - "textColorSecondary": "MuiTab-textColorSecondary", - "wrapped": "MuiTab-wrapped", - "wrapper": "MuiTab-wrapper", - } - } - fullWidth={false} - id="simple-tab-1" - indicator={false} - label={ - <React.Fragment> - ecogesture.title_tab_1 - <br /> - (0) - </React.Fragment> - } - onChange={[Function]} - selected={false} - tabIndex={0} - textColor="inherit" - value={1} - > - <WithStyles(ForwardRef(ButtonBase)) - aria-controls="simple-tabpanel-1" - aria-selected={false} - className="MuiTab-root MuiTab-textColorInherit single-tab" - disabled={false} - focusRipple={true} - id="simple-tab-1" - onClick={[Function]} - onFocus={[Function]} - role="tab" - tabIndex={0} - > - <ForwardRef(ButtonBase) - aria-controls="simple-tabpanel-1" - aria-selected={false} - className="MuiTab-root MuiTab-textColorInherit single-tab" - classes={ - Object { - "disabled": "Mui-disabled", - "focusVisible": "Mui-focusVisible", - "root": "MuiButtonBase-root", - } - } - disabled={false} - focusRipple={true} - id="simple-tab-1" - onClick={[Function]} - onFocus={[Function]} - role="tab" - tabIndex={0} - > - <button - aria-controls="simple-tabpanel-1" - aria-selected={false} - className="MuiButtonBase-root MuiTab-root MuiTab-textColorInherit single-tab" - disabled={false} - id="simple-tab-1" - 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="tab" - tabIndex={0} - type="button" - > - <span - className="MuiTab-wrapper" - > - ecogesture.title_tab_1 - <br /> - (0) - </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(Tab)> - </WithStyles(ForwardRef(Tab))> - <WithStyles(ForwardRef(Tab)) - aria-controls="simple-tabpanel-2" - className="single-tab" - fullWidth={false} - id="simple-tab-2" - indicator={false} - key=".2" - label={ - <React.Fragment> - ecogesture.title_tab_2 - <br /> - (0) - </React.Fragment> - } - onChange={[Function]} - selected={false} - tabIndex={0} - textColor="inherit" - value={2} - > - <ForwardRef(Tab) - aria-controls="simple-tabpanel-2" - className="single-tab" - classes={ - Object { - "disabled": "Mui-disabled", - "fullWidth": "MuiTab-fullWidth", - "labelIcon": "MuiTab-labelIcon", - "root": "MuiTab-root", - "selected": "Mui-selected", - "textColorInherit": "MuiTab-textColorInherit", - "textColorPrimary": "MuiTab-textColorPrimary", - "textColorSecondary": "MuiTab-textColorSecondary", - "wrapped": "MuiTab-wrapped", - "wrapper": "MuiTab-wrapper", - } - } - fullWidth={false} - id="simple-tab-2" - indicator={false} - label={ - <React.Fragment> - ecogesture.title_tab_2 - <br /> - (0) - </React.Fragment> - } - onChange={[Function]} - selected={false} - tabIndex={0} - textColor="inherit" - value={2} - > - <WithStyles(ForwardRef(ButtonBase)) - aria-controls="simple-tabpanel-2" - aria-selected={false} - className="MuiTab-root MuiTab-textColorInherit single-tab" - disabled={false} - focusRipple={true} - id="simple-tab-2" - onClick={[Function]} - onFocus={[Function]} - role="tab" - tabIndex={0} - > - <ForwardRef(ButtonBase) - aria-controls="simple-tabpanel-2" - aria-selected={false} - className="MuiTab-root MuiTab-textColorInherit single-tab" - classes={ - Object { - "disabled": "Mui-disabled", - "focusVisible": "Mui-focusVisible", - "root": "MuiButtonBase-root", - } - } - disabled={false} - focusRipple={true} - id="simple-tab-2" - onClick={[Function]} - onFocus={[Function]} - role="tab" - tabIndex={0} - > - <button - aria-controls="simple-tabpanel-2" - aria-selected={false} - className="MuiButtonBase-root MuiTab-root MuiTab-textColorInherit single-tab" - disabled={false} - id="simple-tab-2" - 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="tab" - tabIndex={0} - type="button" - > - <span - className="MuiTab-wrapper" - > - ecogesture.title_tab_2 - <br /> - (0) - </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(Tab)> - </WithStyles(ForwardRef(Tab))> - </div> - <WithStyles(ForwardRef(TabIndicator)) - className="indicator-tab" - color="secondary" - orientation="horizontal" - style={ - Object { - "left": 0, - "width": 0, - } - } - > - <ForwardRef(TabIndicator) - className="indicator-tab" - classes={ - Object { - "colorPrimary": "PrivateTabIndicator-colorPrimary-2", - "colorSecondary": "PrivateTabIndicator-colorSecondary-3", - "root": "PrivateTabIndicator-root-1", - "vertical": "PrivateTabIndicator-vertical-4", - } - } - color="secondary" - orientation="horizontal" - style={ - Object { - "left": 0, - "width": 0, - } - } - > - <span - className="PrivateTabIndicator-root-1 PrivateTabIndicator-colorSecondary-3 indicator-tab" - style={ - Object { - "left": 0, - "width": 0, - } - } - /> - </ForwardRef(TabIndicator)> - </WithStyles(ForwardRef(TabIndicator))> - </div> - </div> - </ForwardRef(Tabs)> - </WithStyles(ForwardRef(Tabs))> - </mock-header> - <mock-content - heightOffset={0} - > - <TabPanel - tab={0} - value={0} - > - <div - aria-labelledby="simple-tab-0" - hidden={false} - id="simple-tabpanel-0" - role="tabpanel" - > - <EcogestureEmptyList - handleReinitClick={[Function]} - isObjective={true} - isSelectionDone={false} - setTab={[Function]} + ecogesture.title_tab_0 + <br /> + (0) + </span> + <span + class="MuiTouchRipple-root" + /> + </button> + <button + aria-controls="simple-tabpanel-1" + aria-selected="false" + class="MuiButtonBase-root MuiTab-root MuiTab-textColorInherit single-tab" + id="simple-tab-1" + role="tab" + tabindex="0" + type="button" > - <div - className="ec-empty-container" + <span + class="MuiTab-wrapper" > - <div - className="ec-empty-content" - > - <StyledIcon - className="icon-big" - icon="test-file-stub" - size={150} - > - <Icon - aria-hidden={true} - className="icon-big" - icon="test-file-stub" - size={150} - spin={false} - > - <Component - 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" - > - ecogesture.emptyList.obj1 - </div> - <div - className="text-16-normal" - > - ecogesture.emptyList.obj2 - </div> - <div - className="buttons" - > - <WithStyles(ForwardRef(Button)) - aria-label="ecogesture.emptyList.btn1" - className="btnSecondary" - onClick={[Function]} - > - <ForwardRef(Button) - aria-label="ecogesture.emptyList.btn1" - className="btnSecondary" - classes={ - Object { - "colorInherit": "MuiButton-colorInherit", - "contained": "MuiButton-contained", - "containedPrimary": "MuiButton-containedPrimary", - "containedSecondary": "MuiButton-containedSecondary", - "containedSizeLarge": "MuiButton-containedSizeLarge", - "containedSizeSmall": "MuiButton-containedSizeSmall", - "disableElevation": "MuiButton-disableElevation", - "disabled": "Mui-disabled", - "endIcon": "MuiButton-endIcon", - "focusVisible": "Mui-focusVisible", - "fullWidth": "MuiButton-fullWidth", - "iconSizeLarge": "MuiButton-iconSizeLarge", - "iconSizeMedium": "MuiButton-iconSizeMedium", - "iconSizeSmall": "MuiButton-iconSizeSmall", - "label": "MuiButton-label", - "outlined": "MuiButton-outlined", - "outlinedPrimary": "MuiButton-outlinedPrimary", - "outlinedSecondary": "MuiButton-outlinedSecondary", - "outlinedSizeLarge": "MuiButton-outlinedSizeLarge", - "outlinedSizeSmall": "MuiButton-outlinedSizeSmall", - "root": "MuiButton-root", - "sizeLarge": "MuiButton-sizeLarge", - "sizeSmall": "MuiButton-sizeSmall", - "startIcon": "MuiButton-startIcon", - "text": "MuiButton-text", - "textPrimary": "MuiButton-textPrimary", - "textSecondary": "MuiButton-textSecondary", - "textSizeLarge": "MuiButton-textSizeLarge", - "textSizeSmall": "MuiButton-textSizeSmall", - } - } - onClick={[Function]} - > - <WithStyles(ForwardRef(ButtonBase)) - aria-label="ecogesture.emptyList.btn1" - className="MuiButton-root MuiButton-text btnSecondary" - component="button" - disabled={false} - focusRipple={true} - focusVisibleClassName="Mui-focusVisible" - onClick={[Function]} - type="button" - > - <ForwardRef(ButtonBase) - aria-label="ecogesture.emptyList.btn1" - className="MuiButton-root MuiButton-text btnSecondary" - classes={ - Object { - "disabled": "Mui-disabled", - "focusVisible": "Mui-focusVisible", - "root": "MuiButtonBase-root", - } - } - component="button" - disabled={false} - focusRipple={true} - focusVisibleClassName="Mui-focusVisible" - onClick={[Function]} - type="button" - > - <button - aria-label="ecogesture.emptyList.btn1" - className="MuiButtonBase-root MuiButton-root MuiButton-text btnSecondary" - disabled={false} - onBlur={[Function]} - onClick={[Function]} - onDragLeave={[Function]} - onFocus={[Function]} - onKeyDown={[Function]} - onKeyUp={[Function]} - onMouseDown={[Function]} - onMouseLeave={[Function]} - onMouseUp={[Function]} - onTouchEnd={[Function]} - onTouchMove={[Function]} - onTouchStart={[Function]} - tabIndex={0} - type="button" - > - <span - className="MuiButton-label" - > - ecogesture.emptyList.btn1 - </span> - <WithStyles(memo) - center={false} - > - <ForwardRef(TouchRipple) - center={false} - classes={ - Object { - "child": "MuiTouchRipple-child", - "childLeaving": "MuiTouchRipple-childLeaving", - "childPulsate": "MuiTouchRipple-childPulsate", - "ripple": "MuiTouchRipple-ripple", - "ripplePulsate": "MuiTouchRipple-ripplePulsate", - "rippleVisible": "MuiTouchRipple-rippleVisible", - "root": "MuiTouchRipple-root", - } - } - > - <span - className="MuiTouchRipple-root" - > - <TransitionGroup - childFactory={[Function]} - component={null} - exit={true} - /> - </span> - </ForwardRef(TouchRipple)> - </WithStyles(memo)> - </button> - </ForwardRef(ButtonBase)> - </WithStyles(ForwardRef(ButtonBase))> - </ForwardRef(Button)> - </WithStyles(ForwardRef(Button))> - <WithStyles(ForwardRef(Button)) - aria-label="ecogesture.emptyList.btn2" - className="btnPrimary" - onClick={[Function]} - > - <ForwardRef(Button) - aria-label="ecogesture.emptyList.btn2" - className="btnPrimary" - classes={ - Object { - "colorInherit": "MuiButton-colorInherit", - "contained": "MuiButton-contained", - "containedPrimary": "MuiButton-containedPrimary", - "containedSecondary": "MuiButton-containedSecondary", - "containedSizeLarge": "MuiButton-containedSizeLarge", - "containedSizeSmall": "MuiButton-containedSizeSmall", - "disableElevation": "MuiButton-disableElevation", - "disabled": "Mui-disabled", - "endIcon": "MuiButton-endIcon", - "focusVisible": "Mui-focusVisible", - "fullWidth": "MuiButton-fullWidth", - "iconSizeLarge": "MuiButton-iconSizeLarge", - "iconSizeMedium": "MuiButton-iconSizeMedium", - "iconSizeSmall": "MuiButton-iconSizeSmall", - "label": "MuiButton-label", - "outlined": "MuiButton-outlined", - "outlinedPrimary": "MuiButton-outlinedPrimary", - "outlinedSecondary": "MuiButton-outlinedSecondary", - "outlinedSizeLarge": "MuiButton-outlinedSizeLarge", - "outlinedSizeSmall": "MuiButton-outlinedSizeSmall", - "root": "MuiButton-root", - "sizeLarge": "MuiButton-sizeLarge", - "sizeSmall": "MuiButton-sizeSmall", - "startIcon": "MuiButton-startIcon", - "text": "MuiButton-text", - "textPrimary": "MuiButton-textPrimary", - "textSecondary": "MuiButton-textSecondary", - "textSizeLarge": "MuiButton-textSizeLarge", - "textSizeSmall": "MuiButton-textSizeSmall", - } - } - onClick={[Function]} - > - <WithStyles(ForwardRef(ButtonBase)) - aria-label="ecogesture.emptyList.btn2" - className="MuiButton-root MuiButton-text btnPrimary" - component="button" - disabled={false} - focusRipple={true} - focusVisibleClassName="Mui-focusVisible" - onClick={[Function]} - type="button" - > - <ForwardRef(ButtonBase) - aria-label="ecogesture.emptyList.btn2" - className="MuiButton-root MuiButton-text btnPrimary" - classes={ - Object { - "disabled": "Mui-disabled", - "focusVisible": "Mui-focusVisible", - "root": "MuiButtonBase-root", - } - } - component="button" - disabled={false} - focusRipple={true} - focusVisibleClassName="Mui-focusVisible" - onClick={[Function]} - type="button" - > - <button - aria-label="ecogesture.emptyList.btn2" - className="MuiButtonBase-root MuiButton-root MuiButton-text btnPrimary" - 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" - > - ecogesture.emptyList.btn2 - </span> - <WithStyles(memo) - center={false} - > - <ForwardRef(TouchRipple) - center={false} - classes={ - Object { - "child": "MuiTouchRipple-child", - "childLeaving": "MuiTouchRipple-childLeaving", - "childPulsate": "MuiTouchRipple-childPulsate", - "ripple": "MuiTouchRipple-ripple", - "ripplePulsate": "MuiTouchRipple-ripplePulsate", - "rippleVisible": "MuiTouchRipple-rippleVisible", - "root": "MuiTouchRipple-root", - } - } - > - <span - className="MuiTouchRipple-root" - > - <TransitionGroup - childFactory={[Function]} - component={null} - exit={true} - /> - </span> - </ForwardRef(TouchRipple)> - </WithStyles(memo)> - </button> - </ForwardRef(ButtonBase)> - </WithStyles(ForwardRef(ButtonBase))> - </ForwardRef(Button)> - </WithStyles(ForwardRef(Button))> - </div> - </div> - </div> - </EcogestureEmptyList> + ecogesture.title_tab_1 + <br /> + (0) + </span> + <span + class="MuiTouchRipple-root" + /> + </button> + <button + aria-controls="simple-tabpanel-2" + aria-selected="false" + class="MuiButtonBase-root MuiTab-root MuiTab-textColorInherit single-tab" + id="simple-tab-2" + role="tab" + tabindex="0" + type="button" + > + <span + class="MuiTab-wrapper" + > + ecogesture.title_tab_2 + <br /> + (0) + </span> + <span + class="MuiTouchRipple-root" + /> + </button> </div> - </TabPanel> - <TabPanel - tab={1} - value={0} + <span + class="PrivateTabIndicator-root-1 PrivateTabIndicator-colorSecondary-3 indicator-tab" + style="left: 0px; width: 0px;" + /> + </div> + </div> + </mock-header> + <mock-content + heightoffset="0" + > + <div + aria-labelledby="simple-tab-0" + id="simple-tabpanel-0" + role="tabpanel" + > + <div + class="ec-empty-container" > <div - aria-labelledby="simple-tab-1" - hidden={true} - id="simple-tabpanel-1" - role="tabpanel" + class="ec-empty-content" > - <EcogestureEmptyList - handleReinitClick={[Function]} - isObjective={false} - isSelectionDone={false} - setTab={[Function]} + <svg + aria-hidden="true" + class="icon-big styles__icon___23x3R" + height="150" + width="150" + > + <use + xlink:href="#test-file-stub" + /> + </svg> + <div + class="text-16-normal" + > + ecogesture.emptyList.obj1 + </div> + <div + class="text-16-normal" + > + ecogesture.emptyList.obj2 + </div> + <div + class="buttons" > - <div - className="ec-empty-container" + <button + aria-label="ecogesture.emptyList.btn1" + class="MuiButtonBase-root MuiButton-root MuiButton-text btnSecondary" + tabindex="0" + type="button" + > + <span + class="MuiButton-label" + > + ecogesture.emptyList.btn1 + </span> + <span + class="MuiTouchRipple-root" + /> + </button> + <button + aria-label="ecogesture.emptyList.btn2" + class="MuiButtonBase-root MuiButton-root MuiButton-text btnPrimary" + tabindex="0" + type="button" > - <div - className="ec-empty-content" + <span + class="MuiButton-label" > - <StyledIcon - className="icon-big" - icon="test-file-stub" - size={150} - > - <Icon - aria-hidden={true} - className="icon-big" - icon="test-file-stub" - size={150} - spin={false} - > - <Component - 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" - > - ecogesture.emptyList.doing1 - </div> - <div - className="text-16-normal" - > - ecogesture.emptyList.doing2 - </div> - <div - className="buttons" - > - <WithStyles(ForwardRef(Button)) - aria-label="ecogesture.emptyList.btn1" - className="btnSecondary" - onClick={[Function]} - > - <ForwardRef(Button) - aria-label="ecogesture.emptyList.btn1" - className="btnSecondary" - classes={ - Object { - "colorInherit": "MuiButton-colorInherit", - "contained": "MuiButton-contained", - "containedPrimary": "MuiButton-containedPrimary", - "containedSecondary": "MuiButton-containedSecondary", - "containedSizeLarge": "MuiButton-containedSizeLarge", - "containedSizeSmall": "MuiButton-containedSizeSmall", - "disableElevation": "MuiButton-disableElevation", - "disabled": "Mui-disabled", - "endIcon": "MuiButton-endIcon", - "focusVisible": "Mui-focusVisible", - "fullWidth": "MuiButton-fullWidth", - "iconSizeLarge": "MuiButton-iconSizeLarge", - "iconSizeMedium": "MuiButton-iconSizeMedium", - "iconSizeSmall": "MuiButton-iconSizeSmall", - "label": "MuiButton-label", - "outlined": "MuiButton-outlined", - "outlinedPrimary": "MuiButton-outlinedPrimary", - "outlinedSecondary": "MuiButton-outlinedSecondary", - "outlinedSizeLarge": "MuiButton-outlinedSizeLarge", - "outlinedSizeSmall": "MuiButton-outlinedSizeSmall", - "root": "MuiButton-root", - "sizeLarge": "MuiButton-sizeLarge", - "sizeSmall": "MuiButton-sizeSmall", - "startIcon": "MuiButton-startIcon", - "text": "MuiButton-text", - "textPrimary": "MuiButton-textPrimary", - "textSecondary": "MuiButton-textSecondary", - "textSizeLarge": "MuiButton-textSizeLarge", - "textSizeSmall": "MuiButton-textSizeSmall", - } - } - onClick={[Function]} - > - <WithStyles(ForwardRef(ButtonBase)) - aria-label="ecogesture.emptyList.btn1" - className="MuiButton-root MuiButton-text btnSecondary" - component="button" - disabled={false} - focusRipple={true} - focusVisibleClassName="Mui-focusVisible" - onClick={[Function]} - type="button" - > - <ForwardRef(ButtonBase) - aria-label="ecogesture.emptyList.btn1" - className="MuiButton-root MuiButton-text btnSecondary" - classes={ - Object { - "disabled": "Mui-disabled", - "focusVisible": "Mui-focusVisible", - "root": "MuiButtonBase-root", - } - } - component="button" - disabled={false} - focusRipple={true} - focusVisibleClassName="Mui-focusVisible" - onClick={[Function]} - type="button" - > - <button - aria-label="ecogesture.emptyList.btn1" - className="MuiButtonBase-root MuiButton-root MuiButton-text btnSecondary" - disabled={false} - onBlur={[Function]} - onClick={[Function]} - onDragLeave={[Function]} - onFocus={[Function]} - onKeyDown={[Function]} - onKeyUp={[Function]} - onMouseDown={[Function]} - onMouseLeave={[Function]} - onMouseUp={[Function]} - onTouchEnd={[Function]} - onTouchMove={[Function]} - onTouchStart={[Function]} - tabIndex={0} - type="button" - > - <span - className="MuiButton-label" - > - ecogesture.emptyList.btn1 - </span> - <WithStyles(memo) - center={false} - > - <ForwardRef(TouchRipple) - center={false} - classes={ - Object { - "child": "MuiTouchRipple-child", - "childLeaving": "MuiTouchRipple-childLeaving", - "childPulsate": "MuiTouchRipple-childPulsate", - "ripple": "MuiTouchRipple-ripple", - "ripplePulsate": "MuiTouchRipple-ripplePulsate", - "rippleVisible": "MuiTouchRipple-rippleVisible", - "root": "MuiTouchRipple-root", - } - } - > - <span - className="MuiTouchRipple-root" - > - <TransitionGroup - childFactory={[Function]} - component={null} - exit={true} - /> - </span> - </ForwardRef(TouchRipple)> - </WithStyles(memo)> - </button> - </ForwardRef(ButtonBase)> - </WithStyles(ForwardRef(ButtonBase))> - </ForwardRef(Button)> - </WithStyles(ForwardRef(Button))> - <WithStyles(ForwardRef(Button)) - aria-label="ecogesture.emptyList.btn2" - className="btnPrimary" - onClick={[Function]} - > - <ForwardRef(Button) - aria-label="ecogesture.emptyList.btn2" - className="btnPrimary" - classes={ - Object { - "colorInherit": "MuiButton-colorInherit", - "contained": "MuiButton-contained", - "containedPrimary": "MuiButton-containedPrimary", - "containedSecondary": "MuiButton-containedSecondary", - "containedSizeLarge": "MuiButton-containedSizeLarge", - "containedSizeSmall": "MuiButton-containedSizeSmall", - "disableElevation": "MuiButton-disableElevation", - "disabled": "Mui-disabled", - "endIcon": "MuiButton-endIcon", - "focusVisible": "Mui-focusVisible", - "fullWidth": "MuiButton-fullWidth", - "iconSizeLarge": "MuiButton-iconSizeLarge", - "iconSizeMedium": "MuiButton-iconSizeMedium", - "iconSizeSmall": "MuiButton-iconSizeSmall", - "label": "MuiButton-label", - "outlined": "MuiButton-outlined", - "outlinedPrimary": "MuiButton-outlinedPrimary", - "outlinedSecondary": "MuiButton-outlinedSecondary", - "outlinedSizeLarge": "MuiButton-outlinedSizeLarge", - "outlinedSizeSmall": "MuiButton-outlinedSizeSmall", - "root": "MuiButton-root", - "sizeLarge": "MuiButton-sizeLarge", - "sizeSmall": "MuiButton-sizeSmall", - "startIcon": "MuiButton-startIcon", - "text": "MuiButton-text", - "textPrimary": "MuiButton-textPrimary", - "textSecondary": "MuiButton-textSecondary", - "textSizeLarge": "MuiButton-textSizeLarge", - "textSizeSmall": "MuiButton-textSizeSmall", - } - } - onClick={[Function]} - > - <WithStyles(ForwardRef(ButtonBase)) - aria-label="ecogesture.emptyList.btn2" - className="MuiButton-root MuiButton-text btnPrimary" - component="button" - disabled={false} - focusRipple={true} - focusVisibleClassName="Mui-focusVisible" - onClick={[Function]} - type="button" - > - <ForwardRef(ButtonBase) - aria-label="ecogesture.emptyList.btn2" - className="MuiButton-root MuiButton-text btnPrimary" - classes={ - Object { - "disabled": "Mui-disabled", - "focusVisible": "Mui-focusVisible", - "root": "MuiButtonBase-root", - } - } - component="button" - disabled={false} - focusRipple={true} - focusVisibleClassName="Mui-focusVisible" - onClick={[Function]} - type="button" - > - <button - aria-label="ecogesture.emptyList.btn2" - className="MuiButtonBase-root MuiButton-root MuiButton-text btnPrimary" - 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" - > - ecogesture.emptyList.btn2 - </span> - <WithStyles(memo) - center={false} - > - <ForwardRef(TouchRipple) - center={false} - classes={ - Object { - "child": "MuiTouchRipple-child", - "childLeaving": "MuiTouchRipple-childLeaving", - "childPulsate": "MuiTouchRipple-childPulsate", - "ripple": "MuiTouchRipple-ripple", - "ripplePulsate": "MuiTouchRipple-ripplePulsate", - "rippleVisible": "MuiTouchRipple-rippleVisible", - "root": "MuiTouchRipple-root", - } - } - > - <span - className="MuiTouchRipple-root" - > - <TransitionGroup - childFactory={[Function]} - component={null} - exit={true} - /> - </span> - </ForwardRef(TouchRipple)> - </WithStyles(memo)> - </button> - </ForwardRef(ButtonBase)> - </WithStyles(ForwardRef(ButtonBase))> - </ForwardRef(Button)> - </WithStyles(ForwardRef(Button))> - </div> - </div> - </div> - </EcogestureEmptyList> + ecogesture.emptyList.btn2 + </span> + <span + class="MuiTouchRipple-root" + /> + </button> + </div> </div> - </TabPanel> - <TabPanel - tab={2} - value={0} + </div> + </div> + <div + aria-labelledby="simple-tab-1" + hidden="" + id="simple-tabpanel-1" + role="tabpanel" + > + <div + class="ec-empty-container" > <div - aria-labelledby="simple-tab-2" - hidden={true} - id="simple-tabpanel-2" - role="tabpanel" - /> - </TabPanel> - <EcogestureInitModal - handleCloseClick={[Function]} - handleLaunchForm={[Function]} - open={true} - > - <WithStyles(ForwardRef(Dialog)) - aria-labelledby="accessibility-title" - classes={ - Object { - "paper": "modal-paper", - "root": "modal-root", - } - } - onClose={[Function]} - open={true} + class="ec-empty-content" > - <ForwardRef(Dialog) - aria-labelledby="accessibility-title" - classes={ - Object { - "container": "MuiDialog-container", - "paper": "MuiDialog-paper modal-paper", - "paperFullScreen": "MuiDialog-paperFullScreen", - "paperFullWidth": "MuiDialog-paperFullWidth", - "paperScrollBody": "MuiDialog-paperScrollBody", - "paperScrollPaper": "MuiDialog-paperScrollPaper", - "paperWidthFalse": "MuiDialog-paperWidthFalse", - "paperWidthLg": "MuiDialog-paperWidthLg", - "paperWidthMd": "MuiDialog-paperWidthMd", - "paperWidthSm": "MuiDialog-paperWidthSm", - "paperWidthXl": "MuiDialog-paperWidthXl", - "paperWidthXs": "MuiDialog-paperWidthXs", - "root": "MuiDialog-root modal-root", - "scrollBody": "MuiDialog-scrollBody", - "scrollPaper": "MuiDialog-scrollPaper", - } - } - onClose={[Function]} - open={true} + <svg + aria-hidden="true" + class="icon-big styles__icon___23x3R" + height="150" + width="150" > - <ForwardRef(Modal) - BackdropComponent={ - Object { - "$$typeof": Symbol(react.forward_ref), - "Naked": Object { - "$$typeof": Symbol(react.forward_ref), - "propTypes": Object { - "children": [Function], - "className": [Function], - "classes": [Function], - "invisible": [Function], - "open": [Function], - "transitionDuration": [Function], - }, - "render": [Function], - }, - "displayName": "WithStyles(ForwardRef(Backdrop))", - "options": Object { - "defaultTheme": Object { - "breakpoints": Object { - "between": [Function], - "down": [Function], - "keys": Array [ - "xs", - "sm", - "md", - "lg", - "xl", - ], - "only": [Function], - "up": [Function], - "values": Object { - "lg": 1280, - "md": 960, - "sm": 600, - "xl": 1920, - "xs": 0, - }, - "width": [Function], - }, - "direction": "ltr", - "mixins": Object { - "gutters": [Function], - "toolbar": Object { - "@media (min-width:0px) and (orientation: landscape)": Object { - "minHeight": 48, - }, - "@media (min-width:600px)": Object { - "minHeight": 64, - }, - "minHeight": 56, - }, - }, - "overrides": Object {}, - "palette": Object { - "action": Object { - "activatedOpacity": 0.12, - "active": "rgba(0, 0, 0, 0.54)", - "disabled": "rgba(0, 0, 0, 0.26)", - "disabledBackground": "rgba(0, 0, 0, 0.12)", - "disabledOpacity": 0.38, - "focus": "rgba(0, 0, 0, 0.12)", - "focusOpacity": 0.12, - "hover": "rgba(0, 0, 0, 0.04)", - "hoverOpacity": 0.04, - "selected": "rgba(0, 0, 0, 0.08)", - "selectedOpacity": 0.08, - }, - "augmentColor": [Function], - "background": Object { - "default": "#fafafa", - "paper": "#fff", - }, - "common": Object { - "black": "#000", - "white": "#fff", - }, - "contrastThreshold": 3, - "divider": "rgba(0, 0, 0, 0.12)", - "error": Object { - "contrastText": "#fff", - "dark": "#d32f2f", - "light": "#e57373", - "main": "#f44336", - }, - "getContrastText": [Function], - "grey": Object { - "100": "#f5f5f5", - "200": "#eeeeee", - "300": "#e0e0e0", - "400": "#bdbdbd", - "50": "#fafafa", - "500": "#9e9e9e", - "600": "#757575", - "700": "#616161", - "800": "#424242", - "900": "#212121", - "A100": "#d5d5d5", - "A200": "#aaaaaa", - "A400": "#303030", - "A700": "#616161", - }, - "info": Object { - "contrastText": "#fff", - "dark": "#1976d2", - "light": "#64b5f6", - "main": "#2196f3", - }, - "primary": Object { - "contrastText": "#fff", - "dark": "#303f9f", - "light": "#7986cb", - "main": "#3f51b5", - }, - "secondary": Object { - "contrastText": "#fff", - "dark": "#c51162", - "light": "#ff4081", - "main": "#f50057", - }, - "success": Object { - "contrastText": "rgba(0, 0, 0, 0.87)", - "dark": "#388e3c", - "light": "#81c784", - "main": "#4caf50", - }, - "text": Object { - "disabled": "rgba(0, 0, 0, 0.38)", - "hint": "rgba(0, 0, 0, 0.38)", - "primary": "rgba(0, 0, 0, 0.87)", - "secondary": "rgba(0, 0, 0, 0.54)", - }, - "tonalOffset": 0.2, - "type": "light", - "warning": Object { - "contrastText": "rgba(0, 0, 0, 0.87)", - "dark": "#f57c00", - "light": "#ffb74d", - "main": "#ff9800", - }, - }, - "props": Object {}, - "shadows": Array [ - "none", - "0px 2px 1px -1px rgba(0,0,0,0.2),0px 1px 1px 0px rgba(0,0,0,0.14),0px 1px 3px 0px rgba(0,0,0,0.12)", - "0px 3px 1px -2px rgba(0,0,0,0.2),0px 2px 2px 0px rgba(0,0,0,0.14),0px 1px 5px 0px rgba(0,0,0,0.12)", - "0px 3px 3px -2px rgba(0,0,0,0.2),0px 3px 4px 0px rgba(0,0,0,0.14),0px 1px 8px 0px rgba(0,0,0,0.12)", - "0px 2px 4px -1px rgba(0,0,0,0.2),0px 4px 5px 0px rgba(0,0,0,0.14),0px 1px 10px 0px rgba(0,0,0,0.12)", - "0px 3px 5px -1px rgba(0,0,0,0.2),0px 5px 8px 0px rgba(0,0,0,0.14),0px 1px 14px 0px rgba(0,0,0,0.12)", - "0px 3px 5px -1px rgba(0,0,0,0.2),0px 6px 10px 0px rgba(0,0,0,0.14),0px 1px 18px 0px rgba(0,0,0,0.12)", - "0px 4px 5px -2px rgba(0,0,0,0.2),0px 7px 10px 1px rgba(0,0,0,0.14),0px 2px 16px 1px rgba(0,0,0,0.12)", - "0px 5px 5px -3px rgba(0,0,0,0.2),0px 8px 10px 1px rgba(0,0,0,0.14),0px 3px 14px 2px rgba(0,0,0,0.12)", - "0px 5px 6px -3px rgba(0,0,0,0.2),0px 9px 12px 1px rgba(0,0,0,0.14),0px 3px 16px 2px rgba(0,0,0,0.12)", - "0px 6px 6px -3px rgba(0,0,0,0.2),0px 10px 14px 1px rgba(0,0,0,0.14),0px 4px 18px 3px rgba(0,0,0,0.12)", - "0px 6px 7px -4px rgba(0,0,0,0.2),0px 11px 15px 1px rgba(0,0,0,0.14),0px 4px 20px 3px rgba(0,0,0,0.12)", - "0px 7px 8px -4px rgba(0,0,0,0.2),0px 12px 17px 2px rgba(0,0,0,0.14),0px 5px 22px 4px rgba(0,0,0,0.12)", - "0px 7px 8px -4px rgba(0,0,0,0.2),0px 13px 19px 2px rgba(0,0,0,0.14),0px 5px 24px 4px rgba(0,0,0,0.12)", - "0px 7px 9px -4px rgba(0,0,0,0.2),0px 14px 21px 2px rgba(0,0,0,0.14),0px 5px 26px 4px rgba(0,0,0,0.12)", - "0px 8px 9px -5px rgba(0,0,0,0.2),0px 15px 22px 2px rgba(0,0,0,0.14),0px 6px 28px 5px rgba(0,0,0,0.12)", - "0px 8px 10px -5px rgba(0,0,0,0.2),0px 16px 24px 2px rgba(0,0,0,0.14),0px 6px 30px 5px rgba(0,0,0,0.12)", - "0px 8px 11px -5px rgba(0,0,0,0.2),0px 17px 26px 2px rgba(0,0,0,0.14),0px 6px 32px 5px rgba(0,0,0,0.12)", - "0px 9px 11px -5px rgba(0,0,0,0.2),0px 18px 28px 2px rgba(0,0,0,0.14),0px 7px 34px 6px rgba(0,0,0,0.12)", - "0px 9px 12px -6px rgba(0,0,0,0.2),0px 19px 29px 2px rgba(0,0,0,0.14),0px 7px 36px 6px rgba(0,0,0,0.12)", - "0px 10px 13px -6px rgba(0,0,0,0.2),0px 20px 31px 3px rgba(0,0,0,0.14),0px 8px 38px 7px rgba(0,0,0,0.12)", - "0px 10px 13px -6px rgba(0,0,0,0.2),0px 21px 33px 3px rgba(0,0,0,0.14),0px 8px 40px 7px rgba(0,0,0,0.12)", - "0px 10px 14px -6px rgba(0,0,0,0.2),0px 22px 35px 3px rgba(0,0,0,0.14),0px 8px 42px 7px rgba(0,0,0,0.12)", - "0px 11px 14px -7px rgba(0,0,0,0.2),0px 23px 36px 3px rgba(0,0,0,0.14),0px 9px 44px 8px rgba(0,0,0,0.12)", - "0px 11px 15px -7px rgba(0,0,0,0.2),0px 24px 38px 3px rgba(0,0,0,0.14),0px 9px 46px 8px rgba(0,0,0,0.12)", - ], - "shape": Object { - "borderRadius": 4, - }, - "spacing": [Function], - "transitions": Object { - "create": [Function], - "duration": Object { - "complex": 375, - "enteringScreen": 225, - "leavingScreen": 195, - "short": 250, - "shorter": 200, - "shortest": 150, - "standard": 300, - }, - "easing": Object { - "easeIn": "cubic-bezier(0.4, 0, 1, 1)", - "easeInOut": "cubic-bezier(0.4, 0, 0.2, 1)", - "easeOut": "cubic-bezier(0.0, 0, 0.2, 1)", - "sharp": "cubic-bezier(0.4, 0, 0.6, 1)", - }, - "getAutoHeightDuration": [Function], - }, - "typography": Object { - "body1": Object { - "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif", - "fontSize": "1rem", - "fontWeight": 400, - "letterSpacing": "0.00938em", - "lineHeight": 1.5, - }, - "body2": Object { - "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif", - "fontSize": "0.875rem", - "fontWeight": 400, - "letterSpacing": "0.01071em", - "lineHeight": 1.43, - }, - "button": Object { - "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif", - "fontSize": "0.875rem", - "fontWeight": 500, - "letterSpacing": "0.02857em", - "lineHeight": 1.75, - "textTransform": "uppercase", - }, - "caption": Object { - "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif", - "fontSize": "0.75rem", - "fontWeight": 400, - "letterSpacing": "0.03333em", - "lineHeight": 1.66, - }, - "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif", - "fontSize": 14, - "fontWeightBold": 700, - "fontWeightLight": 300, - "fontWeightMedium": 500, - "fontWeightRegular": 400, - "h1": Object { - "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif", - "fontSize": "6rem", - "fontWeight": 300, - "letterSpacing": "-0.01562em", - "lineHeight": 1.167, - }, - "h2": Object { - "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif", - "fontSize": "3.75rem", - "fontWeight": 300, - "letterSpacing": "-0.00833em", - "lineHeight": 1.2, - }, - "h3": Object { - "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif", - "fontSize": "3rem", - "fontWeight": 400, - "letterSpacing": "0em", - "lineHeight": 1.167, - }, - "h4": Object { - "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif", - "fontSize": "2.125rem", - "fontWeight": 400, - "letterSpacing": "0.00735em", - "lineHeight": 1.235, - }, - "h5": Object { - "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif", - "fontSize": "1.5rem", - "fontWeight": 400, - "letterSpacing": "0em", - "lineHeight": 1.334, - }, - "h6": Object { - "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif", - "fontSize": "1.25rem", - "fontWeight": 500, - "letterSpacing": "0.0075em", - "lineHeight": 1.6, - }, - "htmlFontSize": 16, - "overline": Object { - "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif", - "fontSize": "0.75rem", - "fontWeight": 400, - "letterSpacing": "0.08333em", - "lineHeight": 2.66, - "textTransform": "uppercase", - }, - "pxToRem": [Function], - "round": [Function], - "subtitle1": Object { - "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif", - "fontSize": "1rem", - "fontWeight": 400, - "letterSpacing": "0.00938em", - "lineHeight": 1.75, - }, - "subtitle2": Object { - "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif", - "fontSize": "0.875rem", - "fontWeight": 500, - "letterSpacing": "0.00714em", - "lineHeight": 1.57, - }, - }, - "zIndex": Object { - "appBar": 1100, - "drawer": 1200, - "mobileStepper": 1000, - "modal": 1300, - "snackbar": 1400, - "speedDial": 1050, - "tooltip": 1500, - }, - }, - "name": "MuiBackdrop", - }, - "propTypes": Object { - "classes": [Function], - "innerRef": [Function], - }, - "render": [Function], - "useStyles": [Function], - } - } - BackdropProps={ - Object { - "transitionDuration": Object { - "enter": 225, - "exit": 195, - }, - } - } - className="MuiDialog-root modal-root" - closeAfterTransition={true} - disableEscapeKeyDown={false} - onClose={[Function]} - open={true} + <use + xlink:href="#test-file-stub" + /> + </svg> + <div + class="text-16-normal" + > + ecogesture.emptyList.doing1 + </div> + <div + class="text-16-normal" + > + ecogesture.emptyList.doing2 + </div> + <div + class="buttons" + > + <button + aria-label="ecogesture.emptyList.btn1" + class="MuiButtonBase-root MuiButton-root MuiButton-text btnSecondary" + tabindex="0" + type="button" > - <ForwardRef(Portal) - disablePortal={false} + <span + class="MuiButton-label" > - <Portal - containerInfo={ - <body - style="padding-right: 0px; overflow: hidden;" - > - <div - class="MuiDialog-root modal-root" - role="presentation" - style="position: fixed; z-index: 1300; right: 0px; bottom: 0px; top: 0px; left: 0px;" - > - <div - aria-hidden="true" - class="MuiBackdrop-root" - style="opacity: 1; webkit-transition: opacity 225ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; transition: opacity 225ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;" - /> - <div - data-test="sentinelStart" - tabindex="0" - /> - <div - class="MuiDialog-container MuiDialog-scrollPaper" - role="none presentation" - style="opacity: 1; webkit-transition: opacity 225ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; transition: opacity 225ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;" - tabindex="-1" - > - <div - aria-labelledby="accessibility-title" - class="MuiPaper-root MuiDialog-paper modal-paper MuiDialog-paperScrollPaper MuiDialog-paperWidthSm MuiPaper-elevation24 MuiPaper-rounded" - role="dialog" - > - <div - id="accessibility-title" - > - 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 - class="title text-20-bold" - > - ecogesture.initModal.title - </div> - <div - class="text-16-normal" - > - ecogesture.initModal.text1 - </div> - <div - class="text-16-normal" - > - ecogesture.initModal.text2 - </div> - <div - class="buttons-container" - > - <button - aria-label="ecogesture.initModal.btn1" - class="MuiButtonBase-root MuiButton-root MuiButton-text btnSecondary" - tabindex="0" - type="button" - > - <span - class="MuiButton-label" - > - ecogesture.initModal.btn1 - </span> - <span - class="MuiTouchRipple-root" - /> - </button> - <button - aria-label="ecogesture.initModal.btn2" - class="MuiButtonBase-root MuiButton-root MuiButton-text btnPrimary" - tabindex="0" - type="button" - > - <span - class="MuiButton-label" - > - ecogesture.initModal.btn2 - </span> - <span - class="MuiTouchRipple-root" - /> - </button> - </div> - </div> - </div> - </div> - <div - data-test="sentinelEnd" - tabindex="0" - /> - </div> - </body> - } - > - <div - className="MuiDialog-root modal-root" - onKeyDown={[Function]} - role="presentation" - style={ - Object { - "bottom": 0, - "left": 0, - "position": "fixed", - "right": 0, - "top": 0, - "zIndex": 1300, - } - } - > - <WithStyles(ForwardRef(Backdrop)) - onClick={[Function]} - open={true} - transitionDuration={ - Object { - "enter": 225, - "exit": 195, - } - } - > - <ForwardRef(Backdrop) - classes={ - Object { - "invisible": "MuiBackdrop-invisible", - "root": "MuiBackdrop-root", - } - } - onClick={[Function]} - open={true} - transitionDuration={ - Object { - "enter": 225, - "exit": 195, - } - } - > - <ForwardRef(Fade) - in={true} - onClick={[Function]} - timeout={ - Object { - "enter": 225, - "exit": 195, - } - } - > - <Transition - appear={true} - enter={true} - exit={true} - in={true} - mountOnEnter={false} - onClick={[Function]} - onEnter={[Function]} - onEntered={[Function]} - onEntering={[Function]} - onExit={[Function]} - onExited={[Function]} - onExiting={[Function]} - timeout={ - Object { - "enter": 225, - "exit": 195, - } - } - unmountOnExit={false} - > - <div - aria-hidden={true} - className="MuiBackdrop-root" - onClick={[Function]} - style={ - Object { - "opacity": 1, - "visibility": undefined, - } - } - /> - </Transition> - </ForwardRef(Fade)> - </ForwardRef(Backdrop)> - </WithStyles(ForwardRef(Backdrop))> - <Unstable_TrapFocus - disableAutoFocus={false} - disableEnforceFocus={false} - disableRestoreFocus={false} - getDoc={[Function]} - isEnabled={[Function]} - open={true} - > - <div - data-test="sentinelStart" - tabIndex={0} - /> - <ForwardRef(Fade) - appear={true} - in={true} - onEnter={[Function]} - onExited={[Function]} - role="none presentation" - tabIndex="-1" - timeout={ - Object { - "enter": 225, - "exit": 195, - } - } - > - <Transition - appear={true} - enter={true} - exit={true} - in={true} - mountOnEnter={false} - onEnter={[Function]} - onEntered={[Function]} - onEntering={[Function]} - onExit={[Function]} - onExited={[Function]} - onExiting={[Function]} - role="none presentation" - tabIndex="-1" - timeout={ - Object { - "enter": 225, - "exit": 195, - } - } - unmountOnExit={false} - > - <div - className="MuiDialog-container MuiDialog-scrollPaper" - onMouseDown={[Function]} - onMouseUp={[Function]} - role="none presentation" - style={ - Object { - "opacity": 1, - "visibility": undefined, - } - } - tabIndex="-1" - > - <WithStyles(ForwardRef(Paper)) - aria-labelledby="accessibility-title" - className="MuiDialog-paper modal-paper MuiDialog-paperScrollPaper MuiDialog-paperWidthSm" - elevation={24} - role="dialog" - > - <ForwardRef(Paper) - aria-labelledby="accessibility-title" - className="MuiDialog-paper modal-paper MuiDialog-paperScrollPaper MuiDialog-paperWidthSm" - classes={ - Object { - "elevation0": "MuiPaper-elevation0", - "elevation1": "MuiPaper-elevation1", - "elevation10": "MuiPaper-elevation10", - "elevation11": "MuiPaper-elevation11", - "elevation12": "MuiPaper-elevation12", - "elevation13": "MuiPaper-elevation13", - "elevation14": "MuiPaper-elevation14", - "elevation15": "MuiPaper-elevation15", - "elevation16": "MuiPaper-elevation16", - "elevation17": "MuiPaper-elevation17", - "elevation18": "MuiPaper-elevation18", - "elevation19": "MuiPaper-elevation19", - "elevation2": "MuiPaper-elevation2", - "elevation20": "MuiPaper-elevation20", - "elevation21": "MuiPaper-elevation21", - "elevation22": "MuiPaper-elevation22", - "elevation23": "MuiPaper-elevation23", - "elevation24": "MuiPaper-elevation24", - "elevation3": "MuiPaper-elevation3", - "elevation4": "MuiPaper-elevation4", - "elevation5": "MuiPaper-elevation5", - "elevation6": "MuiPaper-elevation6", - "elevation7": "MuiPaper-elevation7", - "elevation8": "MuiPaper-elevation8", - "elevation9": "MuiPaper-elevation9", - "outlined": "MuiPaper-outlined", - "root": "MuiPaper-root", - "rounded": "MuiPaper-rounded", - } - } - elevation={24} - role="dialog" - > - <div - aria-labelledby="accessibility-title" - className="MuiPaper-root MuiDialog-paper modal-paper MuiDialog-paperScrollPaper MuiDialog-paperWidthSm MuiPaper-elevation24 MuiPaper-rounded" - role="dialog" - > - <div - id="accessibility-title" - > - 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]} - > - <WithStyles(ForwardRef(ButtonBase)) - aria-label="feedback.accessibility.button_close" - 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="eg-init-modal" - > - <div - className="title text-20-bold" - > - ecogesture.initModal.title - </div> - <div - className="text-16-normal" - > - ecogesture.initModal.text1 - </div> - <div - className="text-16-normal" - > - ecogesture.initModal.text2 - </div> - <div - className="buttons-container" - > - <WithStyles(ForwardRef(Button)) - aria-label="ecogesture.initModal.btn1" - className="btnSecondary" - onClick={[Function]} - > - <ForwardRef(Button) - aria-label="ecogesture.initModal.btn1" - className="btnSecondary" - classes={ - Object { - "colorInherit": "MuiButton-colorInherit", - "contained": "MuiButton-contained", - "containedPrimary": "MuiButton-containedPrimary", - "containedSecondary": "MuiButton-containedSecondary", - "containedSizeLarge": "MuiButton-containedSizeLarge", - "containedSizeSmall": "MuiButton-containedSizeSmall", - "disableElevation": "MuiButton-disableElevation", - "disabled": "Mui-disabled", - "endIcon": "MuiButton-endIcon", - "focusVisible": "Mui-focusVisible", - "fullWidth": "MuiButton-fullWidth", - "iconSizeLarge": "MuiButton-iconSizeLarge", - "iconSizeMedium": "MuiButton-iconSizeMedium", - "iconSizeSmall": "MuiButton-iconSizeSmall", - "label": "MuiButton-label", - "outlined": "MuiButton-outlined", - "outlinedPrimary": "MuiButton-outlinedPrimary", - "outlinedSecondary": "MuiButton-outlinedSecondary", - "outlinedSizeLarge": "MuiButton-outlinedSizeLarge", - "outlinedSizeSmall": "MuiButton-outlinedSizeSmall", - "root": "MuiButton-root", - "sizeLarge": "MuiButton-sizeLarge", - "sizeSmall": "MuiButton-sizeSmall", - "startIcon": "MuiButton-startIcon", - "text": "MuiButton-text", - "textPrimary": "MuiButton-textPrimary", - "textSecondary": "MuiButton-textSecondary", - "textSizeLarge": "MuiButton-textSizeLarge", - "textSizeSmall": "MuiButton-textSizeSmall", - } - } - onClick={[Function]} - > - <WithStyles(ForwardRef(ButtonBase)) - aria-label="ecogesture.initModal.btn1" - className="MuiButton-root MuiButton-text btnSecondary" - component="button" - disabled={false} - focusRipple={true} - focusVisibleClassName="Mui-focusVisible" - onClick={[Function]} - type="button" - > - <ForwardRef(ButtonBase) - aria-label="ecogesture.initModal.btn1" - className="MuiButton-root MuiButton-text btnSecondary" - classes={ - Object { - "disabled": "Mui-disabled", - "focusVisible": "Mui-focusVisible", - "root": "MuiButtonBase-root", - } - } - component="button" - disabled={false} - focusRipple={true} - focusVisibleClassName="Mui-focusVisible" - onClick={[Function]} - type="button" - > - <button - aria-label="ecogesture.initModal.btn1" - className="MuiButtonBase-root MuiButton-root MuiButton-text btnSecondary" - disabled={false} - onBlur={[Function]} - onClick={[Function]} - onDragLeave={[Function]} - onFocus={[Function]} - onKeyDown={[Function]} - onKeyUp={[Function]} - onMouseDown={[Function]} - onMouseLeave={[Function]} - onMouseUp={[Function]} - onTouchEnd={[Function]} - onTouchMove={[Function]} - onTouchStart={[Function]} - tabIndex={0} - type="button" - > - <span - className="MuiButton-label" - > - ecogesture.initModal.btn1 - </span> - <WithStyles(memo) - center={false} - > - <ForwardRef(TouchRipple) - center={false} - classes={ - Object { - "child": "MuiTouchRipple-child", - "childLeaving": "MuiTouchRipple-childLeaving", - "childPulsate": "MuiTouchRipple-childPulsate", - "ripple": "MuiTouchRipple-ripple", - "ripplePulsate": "MuiTouchRipple-ripplePulsate", - "rippleVisible": "MuiTouchRipple-rippleVisible", - "root": "MuiTouchRipple-root", - } - } - > - <span - className="MuiTouchRipple-root" - > - <TransitionGroup - childFactory={[Function]} - component={null} - exit={true} - /> - </span> - </ForwardRef(TouchRipple)> - </WithStyles(memo)> - </button> - </ForwardRef(ButtonBase)> - </WithStyles(ForwardRef(ButtonBase))> - </ForwardRef(Button)> - </WithStyles(ForwardRef(Button))> - <WithStyles(ForwardRef(Button)) - aria-label="ecogesture.initModal.btn2" - className="btnPrimary" - onClick={[Function]} - > - <ForwardRef(Button) - aria-label="ecogesture.initModal.btn2" - className="btnPrimary" - classes={ - Object { - "colorInherit": "MuiButton-colorInherit", - "contained": "MuiButton-contained", - "containedPrimary": "MuiButton-containedPrimary", - "containedSecondary": "MuiButton-containedSecondary", - "containedSizeLarge": "MuiButton-containedSizeLarge", - "containedSizeSmall": "MuiButton-containedSizeSmall", - "disableElevation": "MuiButton-disableElevation", - "disabled": "Mui-disabled", - "endIcon": "MuiButton-endIcon", - "focusVisible": "Mui-focusVisible", - "fullWidth": "MuiButton-fullWidth", - "iconSizeLarge": "MuiButton-iconSizeLarge", - "iconSizeMedium": "MuiButton-iconSizeMedium", - "iconSizeSmall": "MuiButton-iconSizeSmall", - "label": "MuiButton-label", - "outlined": "MuiButton-outlined", - "outlinedPrimary": "MuiButton-outlinedPrimary", - "outlinedSecondary": "MuiButton-outlinedSecondary", - "outlinedSizeLarge": "MuiButton-outlinedSizeLarge", - "outlinedSizeSmall": "MuiButton-outlinedSizeSmall", - "root": "MuiButton-root", - "sizeLarge": "MuiButton-sizeLarge", - "sizeSmall": "MuiButton-sizeSmall", - "startIcon": "MuiButton-startIcon", - "text": "MuiButton-text", - "textPrimary": "MuiButton-textPrimary", - "textSecondary": "MuiButton-textSecondary", - "textSizeLarge": "MuiButton-textSizeLarge", - "textSizeSmall": "MuiButton-textSizeSmall", - } - } - onClick={[Function]} - > - <WithStyles(ForwardRef(ButtonBase)) - aria-label="ecogesture.initModal.btn2" - className="MuiButton-root MuiButton-text btnPrimary" - component="button" - disabled={false} - focusRipple={true} - focusVisibleClassName="Mui-focusVisible" - onClick={[Function]} - type="button" - > - <ForwardRef(ButtonBase) - aria-label="ecogesture.initModal.btn2" - className="MuiButton-root MuiButton-text btnPrimary" - classes={ - Object { - "disabled": "Mui-disabled", - "focusVisible": "Mui-focusVisible", - "root": "MuiButtonBase-root", - } - } - component="button" - disabled={false} - focusRipple={true} - focusVisibleClassName="Mui-focusVisible" - onClick={[Function]} - type="button" - > - <button - aria-label="ecogesture.initModal.btn2" - className="MuiButtonBase-root MuiButton-root MuiButton-text btnPrimary" - 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" - > - ecogesture.initModal.btn2 - </span> - <WithStyles(memo) - center={false} - > - <ForwardRef(TouchRipple) - center={false} - classes={ - Object { - "child": "MuiTouchRipple-child", - "childLeaving": "MuiTouchRipple-childLeaving", - "childPulsate": "MuiTouchRipple-childPulsate", - "ripple": "MuiTouchRipple-ripple", - "ripplePulsate": "MuiTouchRipple-ripplePulsate", - "rippleVisible": "MuiTouchRipple-rippleVisible", - "root": "MuiTouchRipple-root", - } - } - > - <span - className="MuiTouchRipple-root" - > - <TransitionGroup - childFactory={[Function]} - component={null} - exit={true} - /> - </span> - </ForwardRef(TouchRipple)> - </WithStyles(memo)> - </button> - </ForwardRef(ButtonBase)> - </WithStyles(ForwardRef(ButtonBase))> - </ForwardRef(Button)> - </WithStyles(ForwardRef(Button))> - </div> - </div> - </div> - </ForwardRef(Paper)> - </WithStyles(ForwardRef(Paper))> - </div> - </Transition> - </ForwardRef(Fade)> - <div - data-test="sentinelEnd" - tabIndex={0} - /> - </Unstable_TrapFocus> - </div> - </Portal> - </ForwardRef(Portal)> - </ForwardRef(Modal)> - </ForwardRef(Dialog)> - </WithStyles(ForwardRef(Dialog))> - </EcogestureInitModal> - </mock-content> - </EcogestureTabsView> -</Provider> + ecogesture.emptyList.btn1 + </span> + <span + class="MuiTouchRipple-root" + /> + </button> + <button + aria-label="ecogesture.emptyList.btn2" + class="MuiButtonBase-root MuiButton-root MuiButton-text btnPrimary" + tabindex="0" + type="button" + > + <span + class="MuiButton-label" + > + ecogesture.emptyList.btn2 + </span> + <span + class="MuiTouchRipple-root" + /> + </button> + </div> + </div> + </div> + </div> + <div + aria-labelledby="simple-tab-2" + hidden="" + id="simple-tabpanel-2" + role="tabpanel" + /> + </mock-content> +</div> `; diff --git a/src/components/Ecogesture/__snapshots__/SingleEcogestureView.spec.tsx.snap b/src/components/Ecogesture/__snapshots__/SingleEcogestureView.spec.tsx.snap index 11cde2636f8c516de913509411a4034767bae5dd..ef9a7d029c57ed922153d936c662b93acdba7e00 100644 --- a/src/components/Ecogesture/__snapshots__/SingleEcogestureView.spec.tsx.snap +++ b/src/components/Ecogesture/__snapshots__/SingleEcogestureView.spec.tsx.snap @@ -1,555 +1,154 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP exports[`SingleEcogesture component should be rendered correctly 1`] = ` -<Provider - store={ - Object { - "clearActions": [Function], - "dispatch": [Function], - "getActions": [Function], - "getState": [Function], - "replaceReducer": [Function], - "subscribe": [Function], - } - } -> - <SingleEcogestureView> - <mock-cozybar - displayBackArrow={true} - titleKey="common.title_ecogesture" - /> - <mock-header - desktopTitleKey="common.title_ecogesture" - displayBackArrow={true} - setHeaderHeight={[Function]} - /> - <mock-content - heightOffset={0} +<div> + <mock-cozybar + displaybackarrow="true" + titlekey="common.title_ecogesture" + /> + <mock-header + desktoptitlekey="common.title_ecogesture" + displaybackarrow="true" + /> + <mock-content + heightoffset="0" + > + <div + class="single-ecogesture" > <div - className="single-ecogesture" + class="icon-container" + > + <svg + aria-hidden="true" + class="icon-big styles__icon___23x3R" + height="220" + width="220" + > + <use + xlink:href="#test-file-stub" + /> + </svg> + </div> + <div + class="details" > <div - className="icon-container" + class="text-22-bold title" > - <StyledIcon - className="icon-big" - icon="test-file-stub" - size={220} - > - <Icon - aria-hidden={true} - className="icon-big" - icon="test-file-stub" - size={220} - spin={false} - > - <Component - aria-hidden={true} - className="icon-big styles__icon___23x3R" - height={220} - style={Object {}} - width={220} - > - <svg - aria-hidden={true} - className="icon-big styles__icon___23x3R" - height={220} - style={Object {}} - width={220} - > - <use - xlinkHref="#test-file-stub" - /> - </svg> - </Component> - </Icon> - </StyledIcon> + Bonhomme de neige </div> <div - className="details" + class="efficiency" > - <div - className="text-22-bold title" + <span + class="text-14-normal" > - Bonhomme de neige - </div> - <div - className="efficiency" - > - <span - className="text-14-normal" - > - ecogesture_modal.efficiency - </span> - <mock-EfficiencyRating - result={4} - /> - </div> + ecogesture_modal.efficiency + </span> + <mock-efficiencyrating + result="4" + /> </div> + </div> + <div + class="styled-container" + > <div - className="styled-container" + class="long-name text-18-bold" > - <div - className="long-name text-18-bold" - > - Je baisse le chauffage en mode hors gel lorsque je m'absente plus de 2 jours. - </div> - <WithStyles(ForwardRef(Button)) - classes={ - Object { - "label": "text-15-normal", - "root": "btnText showMore", - } - } - onClick={[Function]} + Je baisse le chauffage en mode hors gel lorsque je m'absente plus de 2 jours. + </div> + <button + class="MuiButtonBase-root MuiButton-root btnText showMore MuiButton-text" + tabindex="0" + type="button" + > + <span + class="MuiButton-label text-15-normal" > - <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-15-normal", - "outlined": "MuiButton-outlined", - "outlinedPrimary": "MuiButton-outlinedPrimary", - "outlinedSecondary": "MuiButton-outlinedSecondary", - "outlinedSizeLarge": "MuiButton-outlinedSizeLarge", - "outlinedSizeSmall": "MuiButton-outlinedSizeSmall", - "root": "MuiButton-root btnText showMore", - "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 btnText showMore MuiButton-text" - component="button" - disabled={false} - focusRipple={true} - focusVisibleClassName="Mui-focusVisible" - onClick={[Function]} - type="button" - > - <ForwardRef(ButtonBase) - className="MuiButton-root btnText showMore 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 btnText showMore 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-15-normal" - > - ecogesture_modal.show_more - </span> - <WithStyles(memo) - center={false} - > - <ForwardRef(TouchRipple) - center={false} - classes={ - Object { - "child": "MuiTouchRipple-child", - "childLeaving": "MuiTouchRipple-childLeaving", - "childPulsate": "MuiTouchRipple-childPulsate", - "ripple": "MuiTouchRipple-ripple", - "ripplePulsate": "MuiTouchRipple-ripplePulsate", - "rippleVisible": "MuiTouchRipple-rippleVisible", - "root": "MuiTouchRipple-root", - } - } - > - <span - className="MuiTouchRipple-root" - > - <TransitionGroup - childFactory={[Function]} - component={null} - exit={true} - /> - </span> - </ForwardRef(TouchRipple)> - </WithStyles(memo)> - </button> - </ForwardRef(ButtonBase)> - </WithStyles(ForwardRef(ButtonBase))> - </ForwardRef(Button)> - </WithStyles(ForwardRef(Button))> - <WithStyles(ForwardRef(Collapse)) - in={false} + ecogesture_modal.show_more + </span> + <span + class="MuiTouchRipple-root" + /> + </button> + <div + class="MuiCollapse-root MuiCollapse-hidden" + style="min-height: 0px;" + > + <div + class="MuiCollapse-wrapper" > - <ForwardRef(Collapse) - classes={ - Object { - "entered": "MuiCollapse-entered", - "hidden": "MuiCollapse-hidden", - "root": "MuiCollapse-root", - "wrapper": "MuiCollapse-wrapper", - "wrapperInner": "MuiCollapse-wrapperInner", - } - } - in={false} + <div + class="MuiCollapse-wrapperInner" > - <Transition - addEndListener={[Function]} - appear={false} - enter={true} - exit={true} - in={false} - mountOnEnter={false} - onEnter={[Function]} - onEntered={[Function]} - onEntering={[Function]} - onExit={[Function]} - onExited={[Function]} - onExiting={[Function]} - timeout={300} - unmountOnExit={false} + <div + class="longDescription text-16-normal-150" > - <div - className="MuiCollapse-root MuiCollapse-hidden" - style={ - Object { - "minHeight": "0px", - } - } - > - <div - className="MuiCollapse-wrapper" - > - <div - className="MuiCollapse-wrapperInner" - > - <div - className="longDescription text-16-normal-150" - > - 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… - </div> - </div> - </div> - </div> - </Transition> - </ForwardRef(Collapse)> - </WithStyles(ForwardRef(Collapse))> + 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… + </div> + </div> + </div> </div> - <div - className="buttons-selection" + </div> + <div + class="buttons-selection" + > + <button + aria-label="ecogesture.objective" + class="MuiButtonBase-root MuiIconButton-root btnSecondary objective-btn false" + tabindex="0" + type="button" > - <WithStyles(ForwardRef(IconButton)) - aria-label="ecogesture.objective" - classes={ - Object { - "label": "text-15-normal", - "root": "btnSecondary objective-btn false", - } - } - onClick={[Function]} + <span + class="MuiIconButton-label text-15-normal" > - <ForwardRef(IconButton) - aria-label="ecogesture.objective" - classes={ - Object { - "colorInherit": "MuiIconButton-colorInherit", - "colorPrimary": "MuiIconButton-colorPrimary", - "colorSecondary": "MuiIconButton-colorSecondary", - "disabled": "Mui-disabled", - "edgeEnd": "MuiIconButton-edgeEnd", - "edgeStart": "MuiIconButton-edgeStart", - "label": "MuiIconButton-label text-15-normal", - "root": "MuiIconButton-root btnSecondary objective-btn false", - "sizeSmall": "MuiIconButton-sizeSmall", - } - } - onClick={[Function]} + <svg + class="status-icon styles__icon___23x3R" + height="40" + width="40" > - <WithStyles(ForwardRef(ButtonBase)) - aria-label="ecogesture.objective" - centerRipple={true} - className="MuiIconButton-root btnSecondary objective-btn false" - disabled={false} - focusRipple={true} - onClick={[Function]} - > - <ForwardRef(ButtonBase) - aria-label="ecogesture.objective" - centerRipple={true} - className="MuiIconButton-root btnSecondary objective-btn false" - classes={ - Object { - "disabled": "Mui-disabled", - "focusVisible": "Mui-focusVisible", - "root": "MuiButtonBase-root", - } - } - disabled={false} - focusRipple={true} - onClick={[Function]} - > - <button - aria-label="ecogesture.objective" - className="MuiButtonBase-root MuiIconButton-root btnSecondary objective-btn false" - 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 text-15-normal" - > - <Icon - className="status-icon" - icon="test-file-stub" - size={40} - spin={false} - > - <Component - className="status-icon styles__icon___23x3R" - height={40} - style={Object {}} - width={40} - > - <svg - className="status-icon styles__icon___23x3R" - height={40} - style={Object {}} - width={40} - > - <use - xlinkHref="#test-file-stub" - /> - </svg> - </Component> - </Icon> - <span> - ecogesture.objective - </span> - </span> - <WithStyles(memo) - center={true} - > - <ForwardRef(TouchRipple) - center={true} - classes={ - Object { - "child": "MuiTouchRipple-child", - "childLeaving": "MuiTouchRipple-childLeaving", - "childPulsate": "MuiTouchRipple-childPulsate", - "ripple": "MuiTouchRipple-ripple", - "ripplePulsate": "MuiTouchRipple-ripplePulsate", - "rippleVisible": "MuiTouchRipple-rippleVisible", - "root": "MuiTouchRipple-root", - } - } - > - <span - className="MuiTouchRipple-root" - > - <TransitionGroup - childFactory={[Function]} - component={null} - exit={true} - /> - </span> - </ForwardRef(TouchRipple)> - </WithStyles(memo)> - </button> - </ForwardRef(ButtonBase)> - </WithStyles(ForwardRef(ButtonBase))> - </ForwardRef(IconButton)> - </WithStyles(ForwardRef(IconButton))> - <WithStyles(ForwardRef(IconButton)) - aria-label="ecogesture.doing" - classes={ - Object { - "label": "text-15-normal", - "root": "btnSecondary doing-btn false", - } - } - onClick={[Function]} + <use + xlink:href="#test-file-stub" + /> + </svg> + <span> + ecogesture.objective + </span> + </span> + <span + class="MuiTouchRipple-root" + /> + </button> + <button + aria-label="ecogesture.doing" + class="MuiButtonBase-root MuiIconButton-root btnSecondary doing-btn false" + tabindex="0" + type="button" + > + <span + class="MuiIconButton-label text-15-normal" > - <ForwardRef(IconButton) - aria-label="ecogesture.doing" - classes={ - Object { - "colorInherit": "MuiIconButton-colorInherit", - "colorPrimary": "MuiIconButton-colorPrimary", - "colorSecondary": "MuiIconButton-colorSecondary", - "disabled": "Mui-disabled", - "edgeEnd": "MuiIconButton-edgeEnd", - "edgeStart": "MuiIconButton-edgeStart", - "label": "MuiIconButton-label text-15-normal", - "root": "MuiIconButton-root btnSecondary doing-btn false", - "sizeSmall": "MuiIconButton-sizeSmall", - } - } - onClick={[Function]} + <svg + class="status-icon styles__icon___23x3R" + height="40" + width="40" > - <WithStyles(ForwardRef(ButtonBase)) - aria-label="ecogesture.doing" - centerRipple={true} - className="MuiIconButton-root btnSecondary doing-btn false" - disabled={false} - focusRipple={true} - onClick={[Function]} - > - <ForwardRef(ButtonBase) - aria-label="ecogesture.doing" - centerRipple={true} - className="MuiIconButton-root btnSecondary doing-btn false" - classes={ - Object { - "disabled": "Mui-disabled", - "focusVisible": "Mui-focusVisible", - "root": "MuiButtonBase-root", - } - } - disabled={false} - focusRipple={true} - onClick={[Function]} - > - <button - aria-label="ecogesture.doing" - className="MuiButtonBase-root MuiIconButton-root btnSecondary doing-btn false" - 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 text-15-normal" - > - <Icon - className="status-icon" - icon="test-file-stub" - size={40} - spin={false} - > - <Component - className="status-icon styles__icon___23x3R" - height={40} - style={Object {}} - width={40} - > - <svg - className="status-icon styles__icon___23x3R" - height={40} - style={Object {}} - width={40} - > - <use - xlinkHref="#test-file-stub" - /> - </svg> - </Component> - </Icon> - <span> - ecogesture.doing - </span> - </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> + <use + xlink:href="#test-file-stub" + /> + </svg> + <span> + ecogesture.doing + </span> + </span> + <span + class="MuiTouchRipple-root" + /> + </button> </div> - </mock-content> - </SingleEcogestureView> -</Provider> + </div> + </mock-content> +</div> `; diff --git a/src/components/EcogestureForm/EcogestureFormEquipment/EcogestureFormEquipment.spec.tsx b/src/components/EcogestureForm/EcogestureFormEquipment/EcogestureFormEquipment.spec.tsx index e90b2a64530163110d9cf23f69ba7bdb440e657c..3d073c2f2fd58b67cd29d33dd259a2cb9cd9cb4b 100644 --- a/src/components/EcogestureForm/EcogestureFormEquipment/EcogestureFormEquipment.spec.tsx +++ b/src/components/EcogestureForm/EcogestureFormEquipment/EcogestureFormEquipment.spec.tsx @@ -2,7 +2,6 @@ import { Button } from '@material-ui/core' import { render, screen, waitFor } from '@testing-library/react' import { EquipmentType } from 'enums' import { mount } from 'enzyme' -import toJson from 'enzyme-to-json' import React from 'react' import { Provider } from 'react-redux' import { mockProfileEcogesture } from 'tests/__mocks__/profileEcogesture.mock' @@ -18,7 +17,7 @@ jest.mock('../EquipmentIcon/EquipmentIcon', () => 'mock-equipment-icon') describe('EcogestureFormEquipment component', () => { const store = createMockEcolyoStore() it('should be rendered correctly', async () => { - const wrapper = mount( + const { container } = render( <Provider store={store}> <EcogestureFormEquipment currentProfileEcogesture={mockProfileEcogesture} @@ -28,8 +27,7 @@ describe('EcogestureFormEquipment component', () => { /> </Provider> ) - await waitForComponentToPaint(wrapper) - expect(toJson(wrapper)).toMatchSnapshot() + expect(container).toMatchSnapshot() }) it('should find X equipments', async () => { diff --git a/src/components/EcogestureForm/EcogestureFormEquipment/__snapshots__/EcogestureFormEquipment.spec.tsx.snap b/src/components/EcogestureForm/EcogestureFormEquipment/__snapshots__/EcogestureFormEquipment.spec.tsx.snap index b15399a11483d25721a0d9e1e8f73970599b1fb8..ed0bc90c23394c74c1afea2438180aa81028d0e0 100644 --- a/src/components/EcogestureForm/EcogestureFormEquipment/__snapshots__/EcogestureFormEquipment.spec.tsx.snap +++ b/src/components/EcogestureForm/EcogestureFormEquipment/__snapshots__/EcogestureFormEquipment.spec.tsx.snap @@ -1,2247 +1,343 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP exports[`EcogestureFormEquipment component should be rendered correctly 1`] = ` -<Provider - store={ - Object { - "clearActions": [Function], - "dispatch": [Function], - "getActions": [Function], - "getState": [Function], - "replaceReducer": [Function], - "subscribe": [Function], - } - } -> - <EcogestureFormEquipment - currentProfileEcogesture={ - Object { - "equipments": Array [], - "heating": "individual", - "hotWater": "individual", - "warmingFluid": 0, - } - } - setNextStepEcogestureForm={[MockFunction]} - setPreviousStep={[MockFunction]} - step={0} +<div> + <div + class="ecogesture-profile-container" > <div - className="ecogesture-profile-container" + class="equipment-form-container" > <div - className="equipment-form-container" + class="equipment-label text-22-normal" > - <div - className="equipment-label text-22-normal" - > - ecogesture_profile.equipments.question - </div> - <div - className="equipment-hint text-16-normal" - > - ecogesture_profile.equipments.hint - </div> - <div - className="icons-container" + ecogesture_profile.equipments.question + </div> + <div + class="equipment-hint text-16-normal" + > + ecogesture_profile.equipments.hint + </div> + <div + class="icons-container" + > + <button + aria-label="ecogesture_profile.equipments.accessible_label" + class="MuiButtonBase-root MuiIconButton-root checkbox-equipment" + style="border-radius: 5px;" + tabindex="0" + type="button" > - <WithStyles(ForwardRef(IconButton)) - aria-label="ecogesture_profile.equipments.accessible_label" - className="checkbox-equipment" - key="AIR_CONDITIONING" - onClick={[Function]} - style={ - Object { - "borderRadius": "5px", - } - } + <span + class="MuiIconButton-label" > - <ForwardRef(IconButton) - aria-label="ecogesture_profile.equipments.accessible_label" - className="checkbox-equipment" - 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]} - style={ - Object { - "borderRadius": "5px", - } - } - > - <WithStyles(ForwardRef(ButtonBase)) - aria-label="ecogesture_profile.equipments.accessible_label" - centerRipple={true} - className="MuiIconButton-root checkbox-equipment" - disabled={false} - focusRipple={true} - onClick={[Function]} - style={ - Object { - "borderRadius": "5px", - } - } - > - <ForwardRef(ButtonBase) - aria-label="ecogesture_profile.equipments.accessible_label" - centerRipple={true} - className="MuiIconButton-root checkbox-equipment" - classes={ - Object { - "disabled": "Mui-disabled", - "focusVisible": "Mui-focusVisible", - "root": "MuiButtonBase-root", - } - } - disabled={false} - focusRipple={true} - onClick={[Function]} - style={ - Object { - "borderRadius": "5px", - } - } - > - <button - aria-label="ecogesture_profile.equipments.accessible_label" - className="MuiButtonBase-root MuiIconButton-root checkbox-equipment" - 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]} - style={ - Object { - "borderRadius": "5px", - } - } - tabIndex={0} - type="button" - > - <span - className="MuiIconButton-label" - > - <mock-equipment-icon - equipment="AIR_CONDITIONING" - isChecked={false} - /> - </span> - <WithStyles(memo) - center={true} - > - <ForwardRef(TouchRipple) - center={true} - classes={ - Object { - "child": "MuiTouchRipple-child", - "childLeaving": "MuiTouchRipple-childLeaving", - "childPulsate": "MuiTouchRipple-childPulsate", - "ripple": "MuiTouchRipple-ripple", - "ripplePulsate": "MuiTouchRipple-ripplePulsate", - "rippleVisible": "MuiTouchRipple-rippleVisible", - "root": "MuiTouchRipple-root", - } - } - > - <span - className="MuiTouchRipple-root" - > - <TransitionGroup - childFactory={[Function]} - component={null} - exit={true} - /> - </span> - </ForwardRef(TouchRipple)> - </WithStyles(memo)> - </button> - </ForwardRef(ButtonBase)> - </WithStyles(ForwardRef(ButtonBase))> - </ForwardRef(IconButton)> - </WithStyles(ForwardRef(IconButton))> - <WithStyles(ForwardRef(IconButton)) - aria-label="ecogesture_profile.equipments.accessible_label" - className="checkbox-equipment" - key="COMPUTER" - onClick={[Function]} - style={ - Object { - "borderRadius": "5px", - } - } + <mock-equipment-icon + equipment="AIR_CONDITIONING" + ischecked="false" + /> + </span> + <span + class="MuiTouchRipple-root" + /> + </button> + <button + aria-label="ecogesture_profile.equipments.accessible_label" + class="MuiButtonBase-root MuiIconButton-root checkbox-equipment" + style="border-radius: 5px;" + tabindex="0" + type="button" + > + <span + class="MuiIconButton-label" > - <ForwardRef(IconButton) - aria-label="ecogesture_profile.equipments.accessible_label" - className="checkbox-equipment" - 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]} - style={ - Object { - "borderRadius": "5px", - } - } - > - <WithStyles(ForwardRef(ButtonBase)) - aria-label="ecogesture_profile.equipments.accessible_label" - centerRipple={true} - className="MuiIconButton-root checkbox-equipment" - disabled={false} - focusRipple={true} - onClick={[Function]} - style={ - Object { - "borderRadius": "5px", - } - } - > - <ForwardRef(ButtonBase) - aria-label="ecogesture_profile.equipments.accessible_label" - centerRipple={true} - className="MuiIconButton-root checkbox-equipment" - classes={ - Object { - "disabled": "Mui-disabled", - "focusVisible": "Mui-focusVisible", - "root": "MuiButtonBase-root", - } - } - disabled={false} - focusRipple={true} - onClick={[Function]} - style={ - Object { - "borderRadius": "5px", - } - } - > - <button - aria-label="ecogesture_profile.equipments.accessible_label" - className="MuiButtonBase-root MuiIconButton-root checkbox-equipment" - 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]} - style={ - Object { - "borderRadius": "5px", - } - } - tabIndex={0} - type="button" - > - <span - className="MuiIconButton-label" - > - <mock-equipment-icon - equipment="COMPUTER" - isChecked={false} - /> - </span> - <WithStyles(memo) - center={true} - > - <ForwardRef(TouchRipple) - center={true} - classes={ - Object { - "child": "MuiTouchRipple-child", - "childLeaving": "MuiTouchRipple-childLeaving", - "childPulsate": "MuiTouchRipple-childPulsate", - "ripple": "MuiTouchRipple-ripple", - "ripplePulsate": "MuiTouchRipple-ripplePulsate", - "rippleVisible": "MuiTouchRipple-rippleVisible", - "root": "MuiTouchRipple-root", - } - } - > - <span - className="MuiTouchRipple-root" - > - <TransitionGroup - childFactory={[Function]} - component={null} - exit={true} - /> - </span> - </ForwardRef(TouchRipple)> - </WithStyles(memo)> - </button> - </ForwardRef(ButtonBase)> - </WithStyles(ForwardRef(ButtonBase))> - </ForwardRef(IconButton)> - </WithStyles(ForwardRef(IconButton))> - <WithStyles(ForwardRef(IconButton)) - aria-label="ecogesture_profile.equipments.accessible_label" - className="checkbox-equipment" - key="MICROWAVE" - onClick={[Function]} - style={ - Object { - "borderRadius": "5px", - } - } + <mock-equipment-icon + equipment="COMPUTER" + ischecked="false" + /> + </span> + <span + class="MuiTouchRipple-root" + /> + </button> + <button + aria-label="ecogesture_profile.equipments.accessible_label" + class="MuiButtonBase-root MuiIconButton-root checkbox-equipment" + style="border-radius: 5px;" + tabindex="0" + type="button" + > + <span + class="MuiIconButton-label" > - <ForwardRef(IconButton) - aria-label="ecogesture_profile.equipments.accessible_label" - className="checkbox-equipment" - 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]} - style={ - Object { - "borderRadius": "5px", - } - } - > - <WithStyles(ForwardRef(ButtonBase)) - aria-label="ecogesture_profile.equipments.accessible_label" - centerRipple={true} - className="MuiIconButton-root checkbox-equipment" - disabled={false} - focusRipple={true} - onClick={[Function]} - style={ - Object { - "borderRadius": "5px", - } - } - > - <ForwardRef(ButtonBase) - aria-label="ecogesture_profile.equipments.accessible_label" - centerRipple={true} - className="MuiIconButton-root checkbox-equipment" - classes={ - Object { - "disabled": "Mui-disabled", - "focusVisible": "Mui-focusVisible", - "root": "MuiButtonBase-root", - } - } - disabled={false} - focusRipple={true} - onClick={[Function]} - style={ - Object { - "borderRadius": "5px", - } - } - > - <button - aria-label="ecogesture_profile.equipments.accessible_label" - className="MuiButtonBase-root MuiIconButton-root checkbox-equipment" - 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]} - style={ - Object { - "borderRadius": "5px", - } - } - tabIndex={0} - type="button" - > - <span - className="MuiIconButton-label" - > - <mock-equipment-icon - equipment="MICROWAVE" - isChecked={false} - /> - </span> - <WithStyles(memo) - center={true} - > - <ForwardRef(TouchRipple) - center={true} - classes={ - Object { - "child": "MuiTouchRipple-child", - "childLeaving": "MuiTouchRipple-childLeaving", - "childPulsate": "MuiTouchRipple-childPulsate", - "ripple": "MuiTouchRipple-ripple", - "ripplePulsate": "MuiTouchRipple-ripplePulsate", - "rippleVisible": "MuiTouchRipple-rippleVisible", - "root": "MuiTouchRipple-root", - } - } - > - <span - className="MuiTouchRipple-root" - > - <TransitionGroup - childFactory={[Function]} - component={null} - exit={true} - /> - </span> - </ForwardRef(TouchRipple)> - </WithStyles(memo)> - </button> - </ForwardRef(ButtonBase)> - </WithStyles(ForwardRef(ButtonBase))> - </ForwardRef(IconButton)> - </WithStyles(ForwardRef(IconButton))> - <WithStyles(ForwardRef(IconButton)) - aria-label="ecogesture_profile.equipments.accessible_label" - className="checkbox-equipment" - key="WASHING_MACHINE" - onClick={[Function]} - style={ - Object { - "borderRadius": "5px", - } - } + <mock-equipment-icon + equipment="MICROWAVE" + ischecked="false" + /> + </span> + <span + class="MuiTouchRipple-root" + /> + </button> + <button + aria-label="ecogesture_profile.equipments.accessible_label" + class="MuiButtonBase-root MuiIconButton-root checkbox-equipment" + style="border-radius: 5px;" + tabindex="0" + type="button" + > + <span + class="MuiIconButton-label" > - <ForwardRef(IconButton) - aria-label="ecogesture_profile.equipments.accessible_label" - className="checkbox-equipment" - 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]} - style={ - Object { - "borderRadius": "5px", - } - } - > - <WithStyles(ForwardRef(ButtonBase)) - aria-label="ecogesture_profile.equipments.accessible_label" - centerRipple={true} - className="MuiIconButton-root checkbox-equipment" - disabled={false} - focusRipple={true} - onClick={[Function]} - style={ - Object { - "borderRadius": "5px", - } - } - > - <ForwardRef(ButtonBase) - aria-label="ecogesture_profile.equipments.accessible_label" - centerRipple={true} - className="MuiIconButton-root checkbox-equipment" - classes={ - Object { - "disabled": "Mui-disabled", - "focusVisible": "Mui-focusVisible", - "root": "MuiButtonBase-root", - } - } - disabled={false} - focusRipple={true} - onClick={[Function]} - style={ - Object { - "borderRadius": "5px", - } - } - > - <button - aria-label="ecogesture_profile.equipments.accessible_label" - className="MuiButtonBase-root MuiIconButton-root checkbox-equipment" - 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]} - style={ - Object { - "borderRadius": "5px", - } - } - tabIndex={0} - type="button" - > - <span - className="MuiIconButton-label" - > - <mock-equipment-icon - equipment="WASHING_MACHINE" - isChecked={false} - /> - </span> - <WithStyles(memo) - center={true} - > - <ForwardRef(TouchRipple) - center={true} - classes={ - Object { - "child": "MuiTouchRipple-child", - "childLeaving": "MuiTouchRipple-childLeaving", - "childPulsate": "MuiTouchRipple-childPulsate", - "ripple": "MuiTouchRipple-ripple", - "ripplePulsate": "MuiTouchRipple-ripplePulsate", - "rippleVisible": "MuiTouchRipple-rippleVisible", - "root": "MuiTouchRipple-root", - } - } - > - <span - className="MuiTouchRipple-root" - > - <TransitionGroup - childFactory={[Function]} - component={null} - exit={true} - /> - </span> - </ForwardRef(TouchRipple)> - </WithStyles(memo)> - </button> - </ForwardRef(ButtonBase)> - </WithStyles(ForwardRef(ButtonBase))> - </ForwardRef(IconButton)> - </WithStyles(ForwardRef(IconButton))> - <WithStyles(ForwardRef(IconButton)) - aria-label="ecogesture_profile.equipments.accessible_label" - className="checkbox-equipment" - key="DISHWASHER" - onClick={[Function]} - style={ - Object { - "borderRadius": "5px", - } - } + <mock-equipment-icon + equipment="WASHING_MACHINE" + ischecked="false" + /> + </span> + <span + class="MuiTouchRipple-root" + /> + </button> + <button + aria-label="ecogesture_profile.equipments.accessible_label" + class="MuiButtonBase-root MuiIconButton-root checkbox-equipment" + style="border-radius: 5px;" + tabindex="0" + type="button" + > + <span + class="MuiIconButton-label" > - <ForwardRef(IconButton) - aria-label="ecogesture_profile.equipments.accessible_label" - className="checkbox-equipment" - 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]} - style={ - Object { - "borderRadius": "5px", - } - } - > - <WithStyles(ForwardRef(ButtonBase)) - aria-label="ecogesture_profile.equipments.accessible_label" - centerRipple={true} - className="MuiIconButton-root checkbox-equipment" - disabled={false} - focusRipple={true} - onClick={[Function]} - style={ - Object { - "borderRadius": "5px", - } - } - > - <ForwardRef(ButtonBase) - aria-label="ecogesture_profile.equipments.accessible_label" - centerRipple={true} - className="MuiIconButton-root checkbox-equipment" - classes={ - Object { - "disabled": "Mui-disabled", - "focusVisible": "Mui-focusVisible", - "root": "MuiButtonBase-root", - } - } - disabled={false} - focusRipple={true} - onClick={[Function]} - style={ - Object { - "borderRadius": "5px", - } - } - > - <button - aria-label="ecogesture_profile.equipments.accessible_label" - className="MuiButtonBase-root MuiIconButton-root checkbox-equipment" - 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]} - style={ - Object { - "borderRadius": "5px", - } - } - tabIndex={0} - type="button" - > - <span - className="MuiIconButton-label" - > - <mock-equipment-icon - equipment="DISHWASHER" - isChecked={false} - /> - </span> - <WithStyles(memo) - center={true} - > - <ForwardRef(TouchRipple) - center={true} - classes={ - Object { - "child": "MuiTouchRipple-child", - "childLeaving": "MuiTouchRipple-childLeaving", - "childPulsate": "MuiTouchRipple-childPulsate", - "ripple": "MuiTouchRipple-ripple", - "ripplePulsate": "MuiTouchRipple-ripplePulsate", - "rippleVisible": "MuiTouchRipple-rippleVisible", - "root": "MuiTouchRipple-root", - } - } - > - <span - className="MuiTouchRipple-root" - > - <TransitionGroup - childFactory={[Function]} - component={null} - exit={true} - /> - </span> - </ForwardRef(TouchRipple)> - </WithStyles(memo)> - </button> - </ForwardRef(ButtonBase)> - </WithStyles(ForwardRef(ButtonBase))> - </ForwardRef(IconButton)> - </WithStyles(ForwardRef(IconButton))> - <WithStyles(ForwardRef(IconButton)) - aria-label="ecogesture_profile.equipments.accessible_label" - className="checkbox-equipment" - key="COOKING_PLATES" - onClick={[Function]} - style={ - Object { - "borderRadius": "5px", - } - } + <mock-equipment-icon + equipment="DISHWASHER" + ischecked="false" + /> + </span> + <span + class="MuiTouchRipple-root" + /> + </button> + <button + aria-label="ecogesture_profile.equipments.accessible_label" + class="MuiButtonBase-root MuiIconButton-root checkbox-equipment" + style="border-radius: 5px;" + tabindex="0" + type="button" + > + <span + class="MuiIconButton-label" > - <ForwardRef(IconButton) - aria-label="ecogesture_profile.equipments.accessible_label" - className="checkbox-equipment" - 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]} - style={ - Object { - "borderRadius": "5px", - } - } - > - <WithStyles(ForwardRef(ButtonBase)) - aria-label="ecogesture_profile.equipments.accessible_label" - centerRipple={true} - className="MuiIconButton-root checkbox-equipment" - disabled={false} - focusRipple={true} - onClick={[Function]} - style={ - Object { - "borderRadius": "5px", - } - } - > - <ForwardRef(ButtonBase) - aria-label="ecogesture_profile.equipments.accessible_label" - centerRipple={true} - className="MuiIconButton-root checkbox-equipment" - classes={ - Object { - "disabled": "Mui-disabled", - "focusVisible": "Mui-focusVisible", - "root": "MuiButtonBase-root", - } - } - disabled={false} - focusRipple={true} - onClick={[Function]} - style={ - Object { - "borderRadius": "5px", - } - } - > - <button - aria-label="ecogesture_profile.equipments.accessible_label" - className="MuiButtonBase-root MuiIconButton-root checkbox-equipment" - 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]} - style={ - Object { - "borderRadius": "5px", - } - } - tabIndex={0} - type="button" - > - <span - className="MuiIconButton-label" - > - <mock-equipment-icon - equipment="COOKING_PLATES" - isChecked={false} - /> - </span> - <WithStyles(memo) - center={true} - > - <ForwardRef(TouchRipple) - center={true} - classes={ - Object { - "child": "MuiTouchRipple-child", - "childLeaving": "MuiTouchRipple-childLeaving", - "childPulsate": "MuiTouchRipple-childPulsate", - "ripple": "MuiTouchRipple-ripple", - "ripplePulsate": "MuiTouchRipple-ripplePulsate", - "rippleVisible": "MuiTouchRipple-rippleVisible", - "root": "MuiTouchRipple-root", - } - } - > - <span - className="MuiTouchRipple-root" - > - <TransitionGroup - childFactory={[Function]} - component={null} - exit={true} - /> - </span> - </ForwardRef(TouchRipple)> - </WithStyles(memo)> - </button> - </ForwardRef(ButtonBase)> - </WithStyles(ForwardRef(ButtonBase))> - </ForwardRef(IconButton)> - </WithStyles(ForwardRef(IconButton))> - <WithStyles(ForwardRef(IconButton)) - aria-label="ecogesture_profile.equipments.accessible_label" - className="checkbox-equipment" - key="DRYER" - onClick={[Function]} - style={ - Object { - "borderRadius": "5px", - } - } + <mock-equipment-icon + equipment="COOKING_PLATES" + ischecked="false" + /> + </span> + <span + class="MuiTouchRipple-root" + /> + </button> + <button + aria-label="ecogesture_profile.equipments.accessible_label" + class="MuiButtonBase-root MuiIconButton-root checkbox-equipment" + style="border-radius: 5px;" + tabindex="0" + type="button" + > + <span + class="MuiIconButton-label" > - <ForwardRef(IconButton) - aria-label="ecogesture_profile.equipments.accessible_label" - className="checkbox-equipment" - 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]} - style={ - Object { - "borderRadius": "5px", - } - } - > - <WithStyles(ForwardRef(ButtonBase)) - aria-label="ecogesture_profile.equipments.accessible_label" - centerRipple={true} - className="MuiIconButton-root checkbox-equipment" - disabled={false} - focusRipple={true} - onClick={[Function]} - style={ - Object { - "borderRadius": "5px", - } - } - > - <ForwardRef(ButtonBase) - aria-label="ecogesture_profile.equipments.accessible_label" - centerRipple={true} - className="MuiIconButton-root checkbox-equipment" - classes={ - Object { - "disabled": "Mui-disabled", - "focusVisible": "Mui-focusVisible", - "root": "MuiButtonBase-root", - } - } - disabled={false} - focusRipple={true} - onClick={[Function]} - style={ - Object { - "borderRadius": "5px", - } - } - > - <button - aria-label="ecogesture_profile.equipments.accessible_label" - className="MuiButtonBase-root MuiIconButton-root checkbox-equipment" - 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]} - style={ - Object { - "borderRadius": "5px", - } - } - tabIndex={0} - type="button" - > - <span - className="MuiIconButton-label" - > - <mock-equipment-icon - equipment="DRYER" - isChecked={false} - /> - </span> - <WithStyles(memo) - center={true} - > - <ForwardRef(TouchRipple) - center={true} - classes={ - Object { - "child": "MuiTouchRipple-child", - "childLeaving": "MuiTouchRipple-childLeaving", - "childPulsate": "MuiTouchRipple-childPulsate", - "ripple": "MuiTouchRipple-ripple", - "ripplePulsate": "MuiTouchRipple-ripplePulsate", - "rippleVisible": "MuiTouchRipple-rippleVisible", - "root": "MuiTouchRipple-root", - } - } - > - <span - className="MuiTouchRipple-root" - > - <TransitionGroup - childFactory={[Function]} - component={null} - exit={true} - /> - </span> - </ForwardRef(TouchRipple)> - </WithStyles(memo)> - </button> - </ForwardRef(ButtonBase)> - </WithStyles(ForwardRef(ButtonBase))> - </ForwardRef(IconButton)> - </WithStyles(ForwardRef(IconButton))> - <WithStyles(ForwardRef(IconButton)) - aria-label="ecogesture_profile.equipments.accessible_label" - className="checkbox-equipment" - key="REFREGIRATOR" - onClick={[Function]} - style={ - Object { - "borderRadius": "5px", - } - } + <mock-equipment-icon + equipment="DRYER" + ischecked="false" + /> + </span> + <span + class="MuiTouchRipple-root" + /> + </button> + <button + aria-label="ecogesture_profile.equipments.accessible_label" + class="MuiButtonBase-root MuiIconButton-root checkbox-equipment" + style="border-radius: 5px;" + tabindex="0" + type="button" + > + <span + class="MuiIconButton-label" > - <ForwardRef(IconButton) - aria-label="ecogesture_profile.equipments.accessible_label" - className="checkbox-equipment" - 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]} - style={ - Object { - "borderRadius": "5px", - } - } - > - <WithStyles(ForwardRef(ButtonBase)) - aria-label="ecogesture_profile.equipments.accessible_label" - centerRipple={true} - className="MuiIconButton-root checkbox-equipment" - disabled={false} - focusRipple={true} - onClick={[Function]} - style={ - Object { - "borderRadius": "5px", - } - } - > - <ForwardRef(ButtonBase) - aria-label="ecogesture_profile.equipments.accessible_label" - centerRipple={true} - className="MuiIconButton-root checkbox-equipment" - classes={ - Object { - "disabled": "Mui-disabled", - "focusVisible": "Mui-focusVisible", - "root": "MuiButtonBase-root", - } - } - disabled={false} - focusRipple={true} - onClick={[Function]} - style={ - Object { - "borderRadius": "5px", - } - } - > - <button - aria-label="ecogesture_profile.equipments.accessible_label" - className="MuiButtonBase-root MuiIconButton-root checkbox-equipment" - 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]} - style={ - Object { - "borderRadius": "5px", - } - } - tabIndex={0} - type="button" - > - <span - className="MuiIconButton-label" - > - <mock-equipment-icon - equipment="REFREGIRATOR" - isChecked={false} - /> - </span> - <WithStyles(memo) - center={true} - > - <ForwardRef(TouchRipple) - center={true} - classes={ - Object { - "child": "MuiTouchRipple-child", - "childLeaving": "MuiTouchRipple-childLeaving", - "childPulsate": "MuiTouchRipple-childPulsate", - "ripple": "MuiTouchRipple-ripple", - "ripplePulsate": "MuiTouchRipple-ripplePulsate", - "rippleVisible": "MuiTouchRipple-rippleVisible", - "root": "MuiTouchRipple-root", - } - } - > - <span - className="MuiTouchRipple-root" - > - <TransitionGroup - childFactory={[Function]} - component={null} - exit={true} - /> - </span> - </ForwardRef(TouchRipple)> - </WithStyles(memo)> - </button> - </ForwardRef(ButtonBase)> - </WithStyles(ForwardRef(ButtonBase))> - </ForwardRef(IconButton)> - </WithStyles(ForwardRef(IconButton))> - <WithStyles(ForwardRef(IconButton)) - aria-label="ecogesture_profile.equipments.accessible_label" - className="checkbox-equipment" - key="FAN" - onClick={[Function]} - style={ - Object { - "borderRadius": "5px", - } - } + <mock-equipment-icon + equipment="REFREGIRATOR" + ischecked="false" + /> + </span> + <span + class="MuiTouchRipple-root" + /> + </button> + <button + aria-label="ecogesture_profile.equipments.accessible_label" + class="MuiButtonBase-root MuiIconButton-root checkbox-equipment" + style="border-radius: 5px;" + tabindex="0" + type="button" + > + <span + class="MuiIconButton-label" > - <ForwardRef(IconButton) - aria-label="ecogesture_profile.equipments.accessible_label" - className="checkbox-equipment" - 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]} - style={ - Object { - "borderRadius": "5px", - } - } - > - <WithStyles(ForwardRef(ButtonBase)) - aria-label="ecogesture_profile.equipments.accessible_label" - centerRipple={true} - className="MuiIconButton-root checkbox-equipment" - disabled={false} - focusRipple={true} - onClick={[Function]} - style={ - Object { - "borderRadius": "5px", - } - } - > - <ForwardRef(ButtonBase) - aria-label="ecogesture_profile.equipments.accessible_label" - centerRipple={true} - className="MuiIconButton-root checkbox-equipment" - classes={ - Object { - "disabled": "Mui-disabled", - "focusVisible": "Mui-focusVisible", - "root": "MuiButtonBase-root", - } - } - disabled={false} - focusRipple={true} - onClick={[Function]} - style={ - Object { - "borderRadius": "5px", - } - } - > - <button - aria-label="ecogesture_profile.equipments.accessible_label" - className="MuiButtonBase-root MuiIconButton-root checkbox-equipment" - 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]} - style={ - Object { - "borderRadius": "5px", - } - } - tabIndex={0} - type="button" - > - <span - className="MuiIconButton-label" - > - <mock-equipment-icon - equipment="FAN" - isChecked={false} - /> - </span> - <WithStyles(memo) - center={true} - > - <ForwardRef(TouchRipple) - center={true} - classes={ - Object { - "child": "MuiTouchRipple-child", - "childLeaving": "MuiTouchRipple-childLeaving", - "childPulsate": "MuiTouchRipple-childPulsate", - "ripple": "MuiTouchRipple-ripple", - "ripplePulsate": "MuiTouchRipple-ripplePulsate", - "rippleVisible": "MuiTouchRipple-rippleVisible", - "root": "MuiTouchRipple-root", - } - } - > - <span - className="MuiTouchRipple-root" - > - <TransitionGroup - childFactory={[Function]} - component={null} - exit={true} - /> - </span> - </ForwardRef(TouchRipple)> - </WithStyles(memo)> - </button> - </ForwardRef(ButtonBase)> - </WithStyles(ForwardRef(ButtonBase))> - </ForwardRef(IconButton)> - </WithStyles(ForwardRef(IconButton))> - <WithStyles(ForwardRef(IconButton)) - aria-label="ecogesture_profile.equipments.accessible_label" - className="checkbox-equipment" - key="CURTAIN" - onClick={[Function]} - style={ - Object { - "borderRadius": "5px", - } - } + <mock-equipment-icon + equipment="FAN" + ischecked="false" + /> + </span> + <span + class="MuiTouchRipple-root" + /> + </button> + <button + aria-label="ecogesture_profile.equipments.accessible_label" + class="MuiButtonBase-root MuiIconButton-root checkbox-equipment" + style="border-radius: 5px;" + tabindex="0" + type="button" + > + <span + class="MuiIconButton-label" > - <ForwardRef(IconButton) - aria-label="ecogesture_profile.equipments.accessible_label" - className="checkbox-equipment" - 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]} - style={ - Object { - "borderRadius": "5px", - } - } - > - <WithStyles(ForwardRef(ButtonBase)) - aria-label="ecogesture_profile.equipments.accessible_label" - centerRipple={true} - className="MuiIconButton-root checkbox-equipment" - disabled={false} - focusRipple={true} - onClick={[Function]} - style={ - Object { - "borderRadius": "5px", - } - } - > - <ForwardRef(ButtonBase) - aria-label="ecogesture_profile.equipments.accessible_label" - centerRipple={true} - className="MuiIconButton-root checkbox-equipment" - classes={ - Object { - "disabled": "Mui-disabled", - "focusVisible": "Mui-focusVisible", - "root": "MuiButtonBase-root", - } - } - disabled={false} - focusRipple={true} - onClick={[Function]} - style={ - Object { - "borderRadius": "5px", - } - } - > - <button - aria-label="ecogesture_profile.equipments.accessible_label" - className="MuiButtonBase-root MuiIconButton-root checkbox-equipment" - 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]} - style={ - Object { - "borderRadius": "5px", - } - } - tabIndex={0} - type="button" - > - <span - className="MuiIconButton-label" - > - <mock-equipment-icon - equipment="CURTAIN" - isChecked={false} - /> - </span> - <WithStyles(memo) - center={true} - > - <ForwardRef(TouchRipple) - center={true} - classes={ - Object { - "child": "MuiTouchRipple-child", - "childLeaving": "MuiTouchRipple-childLeaving", - "childPulsate": "MuiTouchRipple-childPulsate", - "ripple": "MuiTouchRipple-ripple", - "ripplePulsate": "MuiTouchRipple-ripplePulsate", - "rippleVisible": "MuiTouchRipple-rippleVisible", - "root": "MuiTouchRipple-root", - } - } - > - <span - className="MuiTouchRipple-root" - > - <TransitionGroup - childFactory={[Function]} - component={null} - exit={true} - /> - </span> - </ForwardRef(TouchRipple)> - </WithStyles(memo)> - </button> - </ForwardRef(ButtonBase)> - </WithStyles(ForwardRef(ButtonBase))> - </ForwardRef(IconButton)> - </WithStyles(ForwardRef(IconButton))> - <WithStyles(ForwardRef(IconButton)) - aria-label="ecogesture_profile.equipments.accessible_label" - className="checkbox-equipment" - key="INTERNET_BOX" - onClick={[Function]} - style={ - Object { - "borderRadius": "5px", - } - } + <mock-equipment-icon + equipment="CURTAIN" + ischecked="false" + /> + </span> + <span + class="MuiTouchRipple-root" + /> + </button> + <button + aria-label="ecogesture_profile.equipments.accessible_label" + class="MuiButtonBase-root MuiIconButton-root checkbox-equipment" + style="border-radius: 5px;" + tabindex="0" + type="button" + > + <span + class="MuiIconButton-label" > - <ForwardRef(IconButton) - aria-label="ecogesture_profile.equipments.accessible_label" - className="checkbox-equipment" - 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]} - style={ - Object { - "borderRadius": "5px", - } - } - > - <WithStyles(ForwardRef(ButtonBase)) - aria-label="ecogesture_profile.equipments.accessible_label" - centerRipple={true} - className="MuiIconButton-root checkbox-equipment" - disabled={false} - focusRipple={true} - onClick={[Function]} - style={ - Object { - "borderRadius": "5px", - } - } - > - <ForwardRef(ButtonBase) - aria-label="ecogesture_profile.equipments.accessible_label" - centerRipple={true} - className="MuiIconButton-root checkbox-equipment" - classes={ - Object { - "disabled": "Mui-disabled", - "focusVisible": "Mui-focusVisible", - "root": "MuiButtonBase-root", - } - } - disabled={false} - focusRipple={true} - onClick={[Function]} - style={ - Object { - "borderRadius": "5px", - } - } - > - <button - aria-label="ecogesture_profile.equipments.accessible_label" - className="MuiButtonBase-root MuiIconButton-root checkbox-equipment" - 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]} - style={ - Object { - "borderRadius": "5px", - } - } - tabIndex={0} - type="button" - > - <span - className="MuiIconButton-label" - > - <mock-equipment-icon - equipment="INTERNET_BOX" - isChecked={false} - /> - </span> - <WithStyles(memo) - center={true} - > - <ForwardRef(TouchRipple) - center={true} - classes={ - Object { - "child": "MuiTouchRipple-child", - "childLeaving": "MuiTouchRipple-childLeaving", - "childPulsate": "MuiTouchRipple-childPulsate", - "ripple": "MuiTouchRipple-ripple", - "ripplePulsate": "MuiTouchRipple-ripplePulsate", - "rippleVisible": "MuiTouchRipple-rippleVisible", - "root": "MuiTouchRipple-root", - } - } - > - <span - className="MuiTouchRipple-root" - > - <TransitionGroup - childFactory={[Function]} - component={null} - exit={true} - /> - </span> - </ForwardRef(TouchRipple)> - </WithStyles(memo)> - </button> - </ForwardRef(ButtonBase)> - </WithStyles(ForwardRef(ButtonBase))> - </ForwardRef(IconButton)> - </WithStyles(ForwardRef(IconButton))> - <WithStyles(ForwardRef(IconButton)) - aria-label="ecogesture_profile.equipments.accessible_label" - className="checkbox-equipment" - key="VENTILATION" - onClick={[Function]} - style={ - Object { - "borderRadius": "5px", - } - } + <mock-equipment-icon + equipment="INTERNET_BOX" + ischecked="false" + /> + </span> + <span + class="MuiTouchRipple-root" + /> + </button> + <button + aria-label="ecogesture_profile.equipments.accessible_label" + class="MuiButtonBase-root MuiIconButton-root checkbox-equipment" + style="border-radius: 5px;" + tabindex="0" + type="button" + > + <span + class="MuiIconButton-label" > - <ForwardRef(IconButton) - aria-label="ecogesture_profile.equipments.accessible_label" - className="checkbox-equipment" - 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]} - style={ - Object { - "borderRadius": "5px", - } - } - > - <WithStyles(ForwardRef(ButtonBase)) - aria-label="ecogesture_profile.equipments.accessible_label" - centerRipple={true} - className="MuiIconButton-root checkbox-equipment" - disabled={false} - focusRipple={true} - onClick={[Function]} - style={ - Object { - "borderRadius": "5px", - } - } - > - <ForwardRef(ButtonBase) - aria-label="ecogesture_profile.equipments.accessible_label" - centerRipple={true} - className="MuiIconButton-root checkbox-equipment" - classes={ - Object { - "disabled": "Mui-disabled", - "focusVisible": "Mui-focusVisible", - "root": "MuiButtonBase-root", - } - } - disabled={false} - focusRipple={true} - onClick={[Function]} - style={ - Object { - "borderRadius": "5px", - } - } - > - <button - aria-label="ecogesture_profile.equipments.accessible_label" - className="MuiButtonBase-root MuiIconButton-root checkbox-equipment" - 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]} - style={ - Object { - "borderRadius": "5px", - } - } - tabIndex={0} - type="button" - > - <span - className="MuiIconButton-label" - > - <mock-equipment-icon - equipment="VENTILATION" - isChecked={false} - /> - </span> - <WithStyles(memo) - center={true} - > - <ForwardRef(TouchRipple) - center={true} - classes={ - Object { - "child": "MuiTouchRipple-child", - "childLeaving": "MuiTouchRipple-childLeaving", - "childPulsate": "MuiTouchRipple-childPulsate", - "ripple": "MuiTouchRipple-ripple", - "ripplePulsate": "MuiTouchRipple-ripplePulsate", - "rippleVisible": "MuiTouchRipple-rippleVisible", - "root": "MuiTouchRipple-root", - } - } - > - <span - className="MuiTouchRipple-root" - > - <TransitionGroup - childFactory={[Function]} - component={null} - exit={true} - /> - </span> - </ForwardRef(TouchRipple)> - </WithStyles(memo)> - </button> - </ForwardRef(ButtonBase)> - </WithStyles(ForwardRef(ButtonBase))> - </ForwardRef(IconButton)> - </WithStyles(ForwardRef(IconButton))> - <WithStyles(ForwardRef(IconButton)) - aria-label="ecogesture_profile.equipments.accessible_label" - className="checkbox-equipment" - key="FREEZER" - onClick={[Function]} - style={ - Object { - "borderRadius": "5px", - } - } + <mock-equipment-icon + equipment="VENTILATION" + ischecked="false" + /> + </span> + <span + class="MuiTouchRipple-root" + /> + </button> + <button + aria-label="ecogesture_profile.equipments.accessible_label" + class="MuiButtonBase-root MuiIconButton-root checkbox-equipment" + style="border-radius: 5px;" + tabindex="0" + type="button" + > + <span + class="MuiIconButton-label" > - <ForwardRef(IconButton) - aria-label="ecogesture_profile.equipments.accessible_label" - className="checkbox-equipment" - 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]} - style={ - Object { - "borderRadius": "5px", - } - } - > - <WithStyles(ForwardRef(ButtonBase)) - aria-label="ecogesture_profile.equipments.accessible_label" - centerRipple={true} - className="MuiIconButton-root checkbox-equipment" - disabled={false} - focusRipple={true} - onClick={[Function]} - style={ - Object { - "borderRadius": "5px", - } - } - > - <ForwardRef(ButtonBase) - aria-label="ecogesture_profile.equipments.accessible_label" - centerRipple={true} - className="MuiIconButton-root checkbox-equipment" - classes={ - Object { - "disabled": "Mui-disabled", - "focusVisible": "Mui-focusVisible", - "root": "MuiButtonBase-root", - } - } - disabled={false} - focusRipple={true} - onClick={[Function]} - style={ - Object { - "borderRadius": "5px", - } - } - > - <button - aria-label="ecogesture_profile.equipments.accessible_label" - className="MuiButtonBase-root MuiIconButton-root checkbox-equipment" - 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]} - style={ - Object { - "borderRadius": "5px", - } - } - tabIndex={0} - type="button" - > - <span - className="MuiIconButton-label" - > - <mock-equipment-icon - equipment="FREEZER" - isChecked={false} - /> - </span> - <WithStyles(memo) - center={true} - > - <ForwardRef(TouchRipple) - center={true} - classes={ - Object { - "child": "MuiTouchRipple-child", - "childLeaving": "MuiTouchRipple-childLeaving", - "childPulsate": "MuiTouchRipple-childPulsate", - "ripple": "MuiTouchRipple-ripple", - "ripplePulsate": "MuiTouchRipple-ripplePulsate", - "rippleVisible": "MuiTouchRipple-rippleVisible", - "root": "MuiTouchRipple-root", - } - } - > - <span - className="MuiTouchRipple-root" - > - <TransitionGroup - childFactory={[Function]} - component={null} - exit={true} - /> - </span> - </ForwardRef(TouchRipple)> - </WithStyles(memo)> - </button> - </ForwardRef(ButtonBase)> - </WithStyles(ForwardRef(ButtonBase))> - </ForwardRef(IconButton)> - </WithStyles(ForwardRef(IconButton))> - <WithStyles(ForwardRef(IconButton)) - aria-label="ecogesture_profile.equipments.accessible_label" - className="checkbox-equipment" - key="BOILER" - onClick={[Function]} - style={ - Object { - "borderRadius": "5px", - } - } + <mock-equipment-icon + equipment="FREEZER" + ischecked="false" + /> + </span> + <span + class="MuiTouchRipple-root" + /> + </button> + <button + aria-label="ecogesture_profile.equipments.accessible_label" + class="MuiButtonBase-root MuiIconButton-root checkbox-equipment" + style="border-radius: 5px;" + tabindex="0" + type="button" + > + <span + class="MuiIconButton-label" > - <ForwardRef(IconButton) - aria-label="ecogesture_profile.equipments.accessible_label" - className="checkbox-equipment" - 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]} - style={ - Object { - "borderRadius": "5px", - } - } - > - <WithStyles(ForwardRef(ButtonBase)) - aria-label="ecogesture_profile.equipments.accessible_label" - centerRipple={true} - className="MuiIconButton-root checkbox-equipment" - disabled={false} - focusRipple={true} - onClick={[Function]} - style={ - Object { - "borderRadius": "5px", - } - } - > - <ForwardRef(ButtonBase) - aria-label="ecogesture_profile.equipments.accessible_label" - centerRipple={true} - className="MuiIconButton-root checkbox-equipment" - classes={ - Object { - "disabled": "Mui-disabled", - "focusVisible": "Mui-focusVisible", - "root": "MuiButtonBase-root", - } - } - disabled={false} - focusRipple={true} - onClick={[Function]} - style={ - Object { - "borderRadius": "5px", - } - } - > - <button - aria-label="ecogesture_profile.equipments.accessible_label" - className="MuiButtonBase-root MuiIconButton-root checkbox-equipment" - 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]} - style={ - Object { - "borderRadius": "5px", - } - } - tabIndex={0} - type="button" - > - <span - className="MuiIconButton-label" - > - <mock-equipment-icon - equipment="BOILER" - isChecked={false} - /> - </span> - <WithStyles(memo) - center={true} - > - <ForwardRef(TouchRipple) - center={true} - classes={ - Object { - "child": "MuiTouchRipple-child", - "childLeaving": "MuiTouchRipple-childLeaving", - "childPulsate": "MuiTouchRipple-childPulsate", - "ripple": "MuiTouchRipple-ripple", - "ripplePulsate": "MuiTouchRipple-ripplePulsate", - "rippleVisible": "MuiTouchRipple-rippleVisible", - "root": "MuiTouchRipple-root", - } - } - > - <span - className="MuiTouchRipple-root" - > - <TransitionGroup - childFactory={[Function]} - component={null} - exit={true} - /> - </span> - </ForwardRef(TouchRipple)> - </WithStyles(memo)> - </button> - </ForwardRef(ButtonBase)> - </WithStyles(ForwardRef(ButtonBase))> - </ForwardRef(IconButton)> - </WithStyles(ForwardRef(IconButton))> - <WithStyles(ForwardRef(IconButton)) - aria-label="ecogesture_profile.equipments.accessible_label" - className="checkbox-equipment" - key="HYDRAULIC_HEATING" - onClick={[Function]} - style={ - Object { - "borderRadius": "5px", - } - } + <mock-equipment-icon + equipment="BOILER" + ischecked="false" + /> + </span> + <span + class="MuiTouchRipple-root" + /> + </button> + <button + aria-label="ecogesture_profile.equipments.accessible_label" + class="MuiButtonBase-root MuiIconButton-root checkbox-equipment" + style="border-radius: 5px;" + tabindex="0" + type="button" + > + <span + class="MuiIconButton-label" > - <ForwardRef(IconButton) - aria-label="ecogesture_profile.equipments.accessible_label" - className="checkbox-equipment" - 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]} - style={ - Object { - "borderRadius": "5px", - } - } - > - <WithStyles(ForwardRef(ButtonBase)) - aria-label="ecogesture_profile.equipments.accessible_label" - centerRipple={true} - className="MuiIconButton-root checkbox-equipment" - disabled={false} - focusRipple={true} - onClick={[Function]} - style={ - Object { - "borderRadius": "5px", - } - } - > - <ForwardRef(ButtonBase) - aria-label="ecogesture_profile.equipments.accessible_label" - centerRipple={true} - className="MuiIconButton-root checkbox-equipment" - classes={ - Object { - "disabled": "Mui-disabled", - "focusVisible": "Mui-focusVisible", - "root": "MuiButtonBase-root", - } - } - disabled={false} - focusRipple={true} - onClick={[Function]} - style={ - Object { - "borderRadius": "5px", - } - } - > - <button - aria-label="ecogesture_profile.equipments.accessible_label" - className="MuiButtonBase-root MuiIconButton-root checkbox-equipment" - 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]} - style={ - Object { - "borderRadius": "5px", - } - } - tabIndex={0} - type="button" - > - <span - className="MuiIconButton-label" - > - <mock-equipment-icon - equipment="HYDRAULIC_HEATING" - isChecked={false} - /> - </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> + <mock-equipment-icon + equipment="HYDRAULIC_HEATING" + ischecked="false" + /> + </span> + <span + class="MuiTouchRipple-root" + /> + </button> </div> </div> - <FormNavigation - disableNextButton={true} - handleNext={[Function]} - handlePrevious={[Function]} - isEcogesture={true} - step={0} + </div> + <div + class="profile-navigation" + > + <button + aria-label="profile_type.accessibility.button_previous" + class="MuiButtonBase-root MuiButton-root MuiButton-text btnSecondary Mui-disabled Mui-disabled" + disabled="" + tabindex="-1" + type="button" > - <div - className="profile-navigation" + <span + class="MuiButton-label" > - <WithStyles(ForwardRef(Button)) - aria-label="profile_type.accessibility.button_previous" - className="btnSecondary" - disabled={true} - onClick={[Function]} - > - <ForwardRef(Button) - aria-label="profile_type.accessibility.button_previous" - className="btnSecondary" - classes={ - Object { - "colorInherit": "MuiButton-colorInherit", - "contained": "MuiButton-contained", - "containedPrimary": "MuiButton-containedPrimary", - "containedSecondary": "MuiButton-containedSecondary", - "containedSizeLarge": "MuiButton-containedSizeLarge", - "containedSizeSmall": "MuiButton-containedSizeSmall", - "disableElevation": "MuiButton-disableElevation", - "disabled": "Mui-disabled", - "endIcon": "MuiButton-endIcon", - "focusVisible": "Mui-focusVisible", - "fullWidth": "MuiButton-fullWidth", - "iconSizeLarge": "MuiButton-iconSizeLarge", - "iconSizeMedium": "MuiButton-iconSizeMedium", - "iconSizeSmall": "MuiButton-iconSizeSmall", - "label": "MuiButton-label", - "outlined": "MuiButton-outlined", - "outlinedPrimary": "MuiButton-outlinedPrimary", - "outlinedSecondary": "MuiButton-outlinedSecondary", - "outlinedSizeLarge": "MuiButton-outlinedSizeLarge", - "outlinedSizeSmall": "MuiButton-outlinedSizeSmall", - "root": "MuiButton-root", - "sizeLarge": "MuiButton-sizeLarge", - "sizeSmall": "MuiButton-sizeSmall", - "startIcon": "MuiButton-startIcon", - "text": "MuiButton-text", - "textPrimary": "MuiButton-textPrimary", - "textSecondary": "MuiButton-textSecondary", - "textSizeLarge": "MuiButton-textSizeLarge", - "textSizeSmall": "MuiButton-textSizeSmall", - } - } - disabled={true} - onClick={[Function]} - > - <WithStyles(ForwardRef(ButtonBase)) - aria-label="profile_type.accessibility.button_previous" - className="MuiButton-root MuiButton-text btnSecondary Mui-disabled" - component="button" - disabled={true} - focusRipple={true} - focusVisibleClassName="Mui-focusVisible" - onClick={[Function]} - type="button" - > - <ForwardRef(ButtonBase) - aria-label="profile_type.accessibility.button_previous" - className="MuiButton-root MuiButton-text btnSecondary Mui-disabled" - classes={ - Object { - "disabled": "Mui-disabled", - "focusVisible": "Mui-focusVisible", - "root": "MuiButtonBase-root", - } - } - component="button" - disabled={true} - focusRipple={true} - focusVisibleClassName="Mui-focusVisible" - onClick={[Function]} - type="button" - > - <button - aria-label="profile_type.accessibility.button_previous" - className="MuiButtonBase-root MuiButton-root MuiButton-text btnSecondary Mui-disabled Mui-disabled" - disabled={true} - 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={-1} - type="button" - > - <span - className="MuiButton-label" - > - profile_type.form.button_previous - </span> - </button> - </ForwardRef(ButtonBase)> - </WithStyles(ForwardRef(ButtonBase))> - </ForwardRef(Button)> - </WithStyles(ForwardRef(Button))> - <WithStyles(ForwardRef(Button)) - aria-label="profile_type.accessibility.button_next" - className="btnPrimary" - disabled={true} - onClick={[Function]} - > - <ForwardRef(Button) - aria-label="profile_type.accessibility.button_next" - className="btnPrimary" - classes={ - Object { - "colorInherit": "MuiButton-colorInherit", - "contained": "MuiButton-contained", - "containedPrimary": "MuiButton-containedPrimary", - "containedSecondary": "MuiButton-containedSecondary", - "containedSizeLarge": "MuiButton-containedSizeLarge", - "containedSizeSmall": "MuiButton-containedSizeSmall", - "disableElevation": "MuiButton-disableElevation", - "disabled": "Mui-disabled", - "endIcon": "MuiButton-endIcon", - "focusVisible": "Mui-focusVisible", - "fullWidth": "MuiButton-fullWidth", - "iconSizeLarge": "MuiButton-iconSizeLarge", - "iconSizeMedium": "MuiButton-iconSizeMedium", - "iconSizeSmall": "MuiButton-iconSizeSmall", - "label": "MuiButton-label", - "outlined": "MuiButton-outlined", - "outlinedPrimary": "MuiButton-outlinedPrimary", - "outlinedSecondary": "MuiButton-outlinedSecondary", - "outlinedSizeLarge": "MuiButton-outlinedSizeLarge", - "outlinedSizeSmall": "MuiButton-outlinedSizeSmall", - "root": "MuiButton-root", - "sizeLarge": "MuiButton-sizeLarge", - "sizeSmall": "MuiButton-sizeSmall", - "startIcon": "MuiButton-startIcon", - "text": "MuiButton-text", - "textPrimary": "MuiButton-textPrimary", - "textSecondary": "MuiButton-textSecondary", - "textSizeLarge": "MuiButton-textSizeLarge", - "textSizeSmall": "MuiButton-textSizeSmall", - } - } - disabled={true} - onClick={[Function]} - > - <WithStyles(ForwardRef(ButtonBase)) - aria-label="profile_type.accessibility.button_next" - className="MuiButton-root MuiButton-text btnPrimary Mui-disabled" - component="button" - disabled={true} - focusRipple={true} - focusVisibleClassName="Mui-focusVisible" - onClick={[Function]} - type="button" - > - <ForwardRef(ButtonBase) - aria-label="profile_type.accessibility.button_next" - className="MuiButton-root MuiButton-text btnPrimary Mui-disabled" - classes={ - Object { - "disabled": "Mui-disabled", - "focusVisible": "Mui-focusVisible", - "root": "MuiButtonBase-root", - } - } - component="button" - disabled={true} - focusRipple={true} - focusVisibleClassName="Mui-focusVisible" - onClick={[Function]} - type="button" - > - <button - aria-label="profile_type.accessibility.button_next" - className="MuiButtonBase-root MuiButton-root MuiButton-text btnPrimary Mui-disabled Mui-disabled" - disabled={true} - 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={-1} - type="button" - > - <span - className="MuiButton-label" - > - profile_type.form.button_next - </span> - </button> - </ForwardRef(ButtonBase)> - </WithStyles(ForwardRef(ButtonBase))> - </ForwardRef(Button)> - </WithStyles(ForwardRef(Button))> - </div> - </FormNavigation> - </EcogestureFormEquipment> -</Provider> + profile_type.form.button_previous + </span> + </button> + <button + aria-label="profile_type.accessibility.button_next" + class="MuiButtonBase-root MuiButton-root MuiButton-text btnPrimary Mui-disabled Mui-disabled" + disabled="" + tabindex="-1" + type="button" + > + <span + class="MuiButton-label" + > + profile_type.form.button_next + </span> + </button> + </div> +</div> `; diff --git a/src/components/EcogestureForm/EcogestureFormSingleChoice/EcogestureFormSingleChoice.spec.tsx b/src/components/EcogestureForm/EcogestureFormSingleChoice/EcogestureFormSingleChoice.spec.tsx index 3d97bafc6e7d1818a5eb16eaa519467f1ae1e7b6..618a3ee2b2f056904e9b942fc546e356c58579ac 100644 --- a/src/components/EcogestureForm/EcogestureFormSingleChoice/EcogestureFormSingleChoice.spec.tsx +++ b/src/components/EcogestureForm/EcogestureFormSingleChoice/EcogestureFormSingleChoice.spec.tsx @@ -1,6 +1,6 @@ import { Button } from '@material-ui/core' +import { render } from '@testing-library/react' import { mount } from 'enzyme' -import toJson from 'enzyme-to-json' import React from 'react' import { Provider } from 'react-redux' import { @@ -22,7 +22,7 @@ describe('EcogestureFormSingleChoice component', () => { const store = createMockEcolyoStore() it('should be rendered correctly', async () => { - const wrapper = mount( + const { container } = render( <Provider store={store}> <EcogestureFormSingleChoice step={0} @@ -34,8 +34,7 @@ describe('EcogestureFormSingleChoice component', () => { /> </Provider> ) - await waitForComponentToPaint(wrapper) - expect(toJson(wrapper)).toMatchSnapshot() + expect(container).toMatchSnapshot() }) it('should click on disabled button', async () => { const wrapper = mount( diff --git a/src/components/EcogestureForm/EcogestureFormSingleChoice/__snapshots__/EcogestureFormSingleChoice.spec.tsx.snap b/src/components/EcogestureForm/EcogestureFormSingleChoice/__snapshots__/EcogestureFormSingleChoice.spec.tsx.snap index 05bb4e6800a6069295cf4d642860c93be893dc93..cc1a100279b74d343909aae9111fc9fb8203cc6b 100644 --- a/src/components/EcogestureForm/EcogestureFormSingleChoice/__snapshots__/EcogestureFormSingleChoice.spec.tsx.snap +++ b/src/components/EcogestureForm/EcogestureFormSingleChoice/__snapshots__/EcogestureFormSingleChoice.spec.tsx.snap @@ -1,325 +1,74 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP exports[`EcogestureFormSingleChoice component should be rendered correctly 1`] = ` -<Provider - store={ - Object { - "clearActions": [Function], - "dispatch": [Function], - "getActions": [Function], - "getState": [Function], - "replaceReducer": [Function], - "subscribe": [Function], - } - } -> - <EcogestureFormSingleChoice - answerType={ - Object { - "attribute": "heating", - "choices": Array [ - "individual", - "collective", - ], - "type": 0, - } - } - currentProfileEcogesture={ - Object { - "equipments": Array [], - "heating": "individual", - "hotWater": "individual", - "warmingFluid": 0, - } - } - setNextStep={[MockFunction]} - setPreviousStep={[MockFunction]} - step={0} - viewedStep={1} +<div> + <div + class="ecogesture-profile-container" > <div - className="ecogesture-profile-container" + class="profile-form-container ecogesture-form-single" > <div - className="profile-form-container ecogesture-form-single" + class="profile-question-label" > - <div - className="profile-question-label" - > - ecogesture_form.heating_type.question - </div> - <label - className="radio_short answer-checked" - key="individual" - > - <input - checked={true} - className="checked-input" - name="individual" - onChange={[Function]} - type="radio" - value="individual" - /> - ecogesture_form.heating_type.individual - </label> - <label - className="radio_short" - key="collective" - > - <input - checked={false} - className="" - name="collective" - onChange={[Function]} - type="radio" - value="collective" - /> - ecogesture_form.heating_type.collective - </label> + ecogesture_form.heating_type.question </div> - <FormNavigation - disableNextButton={false} - handleNext={[Function]} - handlePrevious={[Function]} - isEcogesture={true} - step={0} + <label + class="radio_short answer-checked" + > + <input + checked="" + class="checked-input" + name="individual" + type="radio" + value="individual" + /> + ecogesture_form.heating_type.individual + </label> + <label + class="radio_short" + > + <input + class="" + name="collective" + type="radio" + value="collective" + /> + ecogesture_form.heating_type.collective + </label> + </div> + <div + class="profile-navigation" + > + <button + aria-label="profile_type.accessibility.button_previous" + class="MuiButtonBase-root MuiButton-root MuiButton-text btnSecondary Mui-disabled Mui-disabled" + disabled="" + tabindex="-1" + type="button" + > + <span + class="MuiButton-label" + > + profile_type.form.button_previous + </span> + </button> + <button + aria-label="profile_type.accessibility.button_next" + class="MuiButtonBase-root MuiButton-root MuiButton-text btnPrimary" + tabindex="0" + type="button" > - <div - className="profile-navigation" + <span + class="MuiButton-label" > - <WithStyles(ForwardRef(Button)) - aria-label="profile_type.accessibility.button_previous" - className="btnSecondary" - disabled={true} - onClick={[Function]} - > - <ForwardRef(Button) - aria-label="profile_type.accessibility.button_previous" - className="btnSecondary" - classes={ - Object { - "colorInherit": "MuiButton-colorInherit", - "contained": "MuiButton-contained", - "containedPrimary": "MuiButton-containedPrimary", - "containedSecondary": "MuiButton-containedSecondary", - "containedSizeLarge": "MuiButton-containedSizeLarge", - "containedSizeSmall": "MuiButton-containedSizeSmall", - "disableElevation": "MuiButton-disableElevation", - "disabled": "Mui-disabled", - "endIcon": "MuiButton-endIcon", - "focusVisible": "Mui-focusVisible", - "fullWidth": "MuiButton-fullWidth", - "iconSizeLarge": "MuiButton-iconSizeLarge", - "iconSizeMedium": "MuiButton-iconSizeMedium", - "iconSizeSmall": "MuiButton-iconSizeSmall", - "label": "MuiButton-label", - "outlined": "MuiButton-outlined", - "outlinedPrimary": "MuiButton-outlinedPrimary", - "outlinedSecondary": "MuiButton-outlinedSecondary", - "outlinedSizeLarge": "MuiButton-outlinedSizeLarge", - "outlinedSizeSmall": "MuiButton-outlinedSizeSmall", - "root": "MuiButton-root", - "sizeLarge": "MuiButton-sizeLarge", - "sizeSmall": "MuiButton-sizeSmall", - "startIcon": "MuiButton-startIcon", - "text": "MuiButton-text", - "textPrimary": "MuiButton-textPrimary", - "textSecondary": "MuiButton-textSecondary", - "textSizeLarge": "MuiButton-textSizeLarge", - "textSizeSmall": "MuiButton-textSizeSmall", - } - } - disabled={true} - onClick={[Function]} - > - <WithStyles(ForwardRef(ButtonBase)) - aria-label="profile_type.accessibility.button_previous" - className="MuiButton-root MuiButton-text btnSecondary Mui-disabled" - component="button" - disabled={true} - focusRipple={true} - focusVisibleClassName="Mui-focusVisible" - onClick={[Function]} - type="button" - > - <ForwardRef(ButtonBase) - aria-label="profile_type.accessibility.button_previous" - className="MuiButton-root MuiButton-text btnSecondary Mui-disabled" - classes={ - Object { - "disabled": "Mui-disabled", - "focusVisible": "Mui-focusVisible", - "root": "MuiButtonBase-root", - } - } - component="button" - disabled={true} - focusRipple={true} - focusVisibleClassName="Mui-focusVisible" - onClick={[Function]} - type="button" - > - <button - aria-label="profile_type.accessibility.button_previous" - className="MuiButtonBase-root MuiButton-root MuiButton-text btnSecondary Mui-disabled Mui-disabled" - disabled={true} - 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={-1} - type="button" - > - <span - className="MuiButton-label" - > - profile_type.form.button_previous - </span> - </button> - </ForwardRef(ButtonBase)> - </WithStyles(ForwardRef(ButtonBase))> - </ForwardRef(Button)> - </WithStyles(ForwardRef(Button))> - <WithStyles(ForwardRef(Button)) - aria-label="profile_type.accessibility.button_next" - className="btnPrimary" - disabled={false} - onClick={[Function]} - > - <ForwardRef(Button) - aria-label="profile_type.accessibility.button_next" - className="btnPrimary" - classes={ - Object { - "colorInherit": "MuiButton-colorInherit", - "contained": "MuiButton-contained", - "containedPrimary": "MuiButton-containedPrimary", - "containedSecondary": "MuiButton-containedSecondary", - "containedSizeLarge": "MuiButton-containedSizeLarge", - "containedSizeSmall": "MuiButton-containedSizeSmall", - "disableElevation": "MuiButton-disableElevation", - "disabled": "Mui-disabled", - "endIcon": "MuiButton-endIcon", - "focusVisible": "Mui-focusVisible", - "fullWidth": "MuiButton-fullWidth", - "iconSizeLarge": "MuiButton-iconSizeLarge", - "iconSizeMedium": "MuiButton-iconSizeMedium", - "iconSizeSmall": "MuiButton-iconSizeSmall", - "label": "MuiButton-label", - "outlined": "MuiButton-outlined", - "outlinedPrimary": "MuiButton-outlinedPrimary", - "outlinedSecondary": "MuiButton-outlinedSecondary", - "outlinedSizeLarge": "MuiButton-outlinedSizeLarge", - "outlinedSizeSmall": "MuiButton-outlinedSizeSmall", - "root": "MuiButton-root", - "sizeLarge": "MuiButton-sizeLarge", - "sizeSmall": "MuiButton-sizeSmall", - "startIcon": "MuiButton-startIcon", - "text": "MuiButton-text", - "textPrimary": "MuiButton-textPrimary", - "textSecondary": "MuiButton-textSecondary", - "textSizeLarge": "MuiButton-textSizeLarge", - "textSizeSmall": "MuiButton-textSizeSmall", - } - } - disabled={false} - onClick={[Function]} - > - <WithStyles(ForwardRef(ButtonBase)) - aria-label="profile_type.accessibility.button_next" - className="MuiButton-root MuiButton-text btnPrimary" - component="button" - disabled={false} - focusRipple={true} - focusVisibleClassName="Mui-focusVisible" - onClick={[Function]} - type="button" - > - <ForwardRef(ButtonBase) - aria-label="profile_type.accessibility.button_next" - className="MuiButton-root MuiButton-text btnPrimary" - classes={ - Object { - "disabled": "Mui-disabled", - "focusVisible": "Mui-focusVisible", - "root": "MuiButtonBase-root", - } - } - component="button" - disabled={false} - focusRipple={true} - focusVisibleClassName="Mui-focusVisible" - onClick={[Function]} - type="button" - > - <button - aria-label="profile_type.accessibility.button_next" - className="MuiButtonBase-root MuiButton-root MuiButton-text btnPrimary" - 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" - > - profile_type.form.button_next - </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> - </FormNavigation> + profile_type.form.button_next + </span> + <span + class="MuiTouchRipple-root" + /> + </button> </div> - </EcogestureFormSingleChoice> -</Provider> + </div> +</div> `; diff --git a/src/components/EcogestureForm/EcogestureFormView.spec.tsx b/src/components/EcogestureForm/EcogestureFormView.spec.tsx index 35e92dd4a31b2bd8a576fcc79410f1666991adb7..dd3ed4485af7b9e6363416c9250f93aca1ec3ff7 100644 --- a/src/components/EcogestureForm/EcogestureFormView.spec.tsx +++ b/src/components/EcogestureForm/EcogestureFormView.spec.tsx @@ -1,6 +1,6 @@ import { Button } from '@material-ui/core' +import { render } from '@testing-library/react' import { mount } from 'enzyme' -import toJson from 'enzyme-to-json' import React from 'react' import { Provider } from 'react-redux' import * as storeHooks from 'store/hooks' @@ -33,13 +33,12 @@ describe('EcogestureFormView component', () => { }) it('should be rendered correctly', async () => { - const wrapper = mount( + const { container } = render( <Provider store={store}> <EcogestureFormView /> </Provider> ) - await waitForComponentToPaint(wrapper) - expect(toJson(wrapper)).toMatchSnapshot() + expect(container).toMatchSnapshot() }) it('should render singleChoice', async () => { const wrapper = mount( diff --git a/src/components/EcogestureForm/EcogestureLaunchFormModal/EcogestureLaunchFormModal.spec.tsx b/src/components/EcogestureForm/EcogestureLaunchFormModal/EcogestureLaunchFormModal.spec.tsx index 1efe25a5ee1b77c66b2e72a4ea8a45bdbfa06bcc..c5227952872c6ae05f3dc3d024a3a6d224d0093b 100644 --- a/src/components/EcogestureForm/EcogestureLaunchFormModal/EcogestureLaunchFormModal.spec.tsx +++ b/src/components/EcogestureForm/EcogestureLaunchFormModal/EcogestureLaunchFormModal.spec.tsx @@ -1,19 +1,19 @@ import { Button } from '@material-ui/core' +import { render } from '@testing-library/react' import { mount } from 'enzyme' -import toJson from 'enzyme-to-json' import React from 'react' import EcogestureLaunchFormModal from './EcogestureLaunchFormModal' const mockHandleClose = jest.fn() describe('EcogestureLaunchFormModal component', () => { it('should be rendered correctly', () => { - const wrapper = mount( + const { baseElement } = render( <EcogestureLaunchFormModal open={true} handleCloseClick={mockHandleClose} /> ) - expect(toJson(wrapper)).toMatchSnapshot() + expect(baseElement).toMatchSnapshot() }) it('should close modal', async () => { const wrapper = mount( diff --git a/src/components/EcogestureForm/EcogestureLaunchFormModal/__snapshots__/EcogestureLaunchFormModal.spec.tsx.snap b/src/components/EcogestureForm/EcogestureLaunchFormModal/__snapshots__/EcogestureLaunchFormModal.spec.tsx.snap index ca980750bd1ba733062e700ba25b2b758063bf9e..2516ca2ce6b53497a0feee3ebf63e36e4f00bcda 100644 --- a/src/components/EcogestureForm/EcogestureLaunchFormModal/__snapshots__/EcogestureLaunchFormModal.spec.tsx.snap +++ b/src/components/EcogestureForm/EcogestureLaunchFormModal/__snapshots__/EcogestureLaunchFormModal.spec.tsx.snap @@ -1,959 +1,100 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP exports[`EcogestureLaunchFormModal component should be rendered correctly 1`] = ` -<EcogestureLaunchFormModal - handleCloseClick={[MockFunction]} - open={true} +<body + style="padding-right: 0px; overflow: hidden;" > - <WithStyles(ForwardRef(Dialog)) - aria-labelledby="accessibility-title" - classes={ - Object { - "paper": "modal-paper", - "root": "modal-root", - } - } - onClose={[MockFunction]} - open={true} + <div + aria-hidden="true" + /> + <div + class="MuiDialog-root modal-root" + role="presentation" + style="position: fixed; z-index: 1300; right: 0px; bottom: 0px; top: 0px; left: 0px;" > - <ForwardRef(Dialog) - aria-labelledby="accessibility-title" - classes={ - Object { - "container": "MuiDialog-container", - "paper": "MuiDialog-paper modal-paper", - "paperFullScreen": "MuiDialog-paperFullScreen", - "paperFullWidth": "MuiDialog-paperFullWidth", - "paperScrollBody": "MuiDialog-paperScrollBody", - "paperScrollPaper": "MuiDialog-paperScrollPaper", - "paperWidthFalse": "MuiDialog-paperWidthFalse", - "paperWidthLg": "MuiDialog-paperWidthLg", - "paperWidthMd": "MuiDialog-paperWidthMd", - "paperWidthSm": "MuiDialog-paperWidthSm", - "paperWidthXl": "MuiDialog-paperWidthXl", - "paperWidthXs": "MuiDialog-paperWidthXs", - "root": "MuiDialog-root modal-root", - "scrollBody": "MuiDialog-scrollBody", - "scrollPaper": "MuiDialog-scrollPaper", - } - } - onClose={[MockFunction]} - open={true} + <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" > - <ForwardRef(Modal) - BackdropComponent={ - Object { - "$$typeof": Symbol(react.forward_ref), - "Naked": Object { - "$$typeof": Symbol(react.forward_ref), - "propTypes": Object { - "children": [Function], - "className": [Function], - "classes": [Function], - "invisible": [Function], - "open": [Function], - "transitionDuration": [Function], - }, - "render": [Function], - }, - "displayName": "WithStyles(ForwardRef(Backdrop))", - "options": Object { - "defaultTheme": Object { - "breakpoints": Object { - "between": [Function], - "down": [Function], - "keys": Array [ - "xs", - "sm", - "md", - "lg", - "xl", - ], - "only": [Function], - "up": [Function], - "values": Object { - "lg": 1280, - "md": 960, - "sm": 600, - "xl": 1920, - "xs": 0, - }, - "width": [Function], - }, - "direction": "ltr", - "mixins": Object { - "gutters": [Function], - "toolbar": Object { - "@media (min-width:0px) and (orientation: landscape)": Object { - "minHeight": 48, - }, - "@media (min-width:600px)": Object { - "minHeight": 64, - }, - "minHeight": 56, - }, - }, - "overrides": Object {}, - "palette": Object { - "action": Object { - "activatedOpacity": 0.12, - "active": "rgba(0, 0, 0, 0.54)", - "disabled": "rgba(0, 0, 0, 0.26)", - "disabledBackground": "rgba(0, 0, 0, 0.12)", - "disabledOpacity": 0.38, - "focus": "rgba(0, 0, 0, 0.12)", - "focusOpacity": 0.12, - "hover": "rgba(0, 0, 0, 0.04)", - "hoverOpacity": 0.04, - "selected": "rgba(0, 0, 0, 0.08)", - "selectedOpacity": 0.08, - }, - "augmentColor": [Function], - "background": Object { - "default": "#fafafa", - "paper": "#fff", - }, - "common": Object { - "black": "#000", - "white": "#fff", - }, - "contrastThreshold": 3, - "divider": "rgba(0, 0, 0, 0.12)", - "error": Object { - "contrastText": "#fff", - "dark": "#d32f2f", - "light": "#e57373", - "main": "#f44336", - }, - "getContrastText": [Function], - "grey": Object { - "100": "#f5f5f5", - "200": "#eeeeee", - "300": "#e0e0e0", - "400": "#bdbdbd", - "50": "#fafafa", - "500": "#9e9e9e", - "600": "#757575", - "700": "#616161", - "800": "#424242", - "900": "#212121", - "A100": "#d5d5d5", - "A200": "#aaaaaa", - "A400": "#303030", - "A700": "#616161", - }, - "info": Object { - "contrastText": "#fff", - "dark": "#1976d2", - "light": "#64b5f6", - "main": "#2196f3", - }, - "primary": Object { - "contrastText": "#fff", - "dark": "#303f9f", - "light": "#7986cb", - "main": "#3f51b5", - }, - "secondary": Object { - "contrastText": "#fff", - "dark": "#c51162", - "light": "#ff4081", - "main": "#f50057", - }, - "success": Object { - "contrastText": "rgba(0, 0, 0, 0.87)", - "dark": "#388e3c", - "light": "#81c784", - "main": "#4caf50", - }, - "text": Object { - "disabled": "rgba(0, 0, 0, 0.38)", - "hint": "rgba(0, 0, 0, 0.38)", - "primary": "rgba(0, 0, 0, 0.87)", - "secondary": "rgba(0, 0, 0, 0.54)", - }, - "tonalOffset": 0.2, - "type": "light", - "warning": Object { - "contrastText": "rgba(0, 0, 0, 0.87)", - "dark": "#f57c00", - "light": "#ffb74d", - "main": "#ff9800", - }, - }, - "props": Object {}, - "shadows": Array [ - "none", - "0px 2px 1px -1px rgba(0,0,0,0.2),0px 1px 1px 0px rgba(0,0,0,0.14),0px 1px 3px 0px rgba(0,0,0,0.12)", - "0px 3px 1px -2px rgba(0,0,0,0.2),0px 2px 2px 0px rgba(0,0,0,0.14),0px 1px 5px 0px rgba(0,0,0,0.12)", - "0px 3px 3px -2px rgba(0,0,0,0.2),0px 3px 4px 0px rgba(0,0,0,0.14),0px 1px 8px 0px rgba(0,0,0,0.12)", - "0px 2px 4px -1px rgba(0,0,0,0.2),0px 4px 5px 0px rgba(0,0,0,0.14),0px 1px 10px 0px rgba(0,0,0,0.12)", - "0px 3px 5px -1px rgba(0,0,0,0.2),0px 5px 8px 0px rgba(0,0,0,0.14),0px 1px 14px 0px rgba(0,0,0,0.12)", - "0px 3px 5px -1px rgba(0,0,0,0.2),0px 6px 10px 0px rgba(0,0,0,0.14),0px 1px 18px 0px rgba(0,0,0,0.12)", - "0px 4px 5px -2px rgba(0,0,0,0.2),0px 7px 10px 1px rgba(0,0,0,0.14),0px 2px 16px 1px rgba(0,0,0,0.12)", - "0px 5px 5px -3px rgba(0,0,0,0.2),0px 8px 10px 1px rgba(0,0,0,0.14),0px 3px 14px 2px rgba(0,0,0,0.12)", - "0px 5px 6px -3px rgba(0,0,0,0.2),0px 9px 12px 1px rgba(0,0,0,0.14),0px 3px 16px 2px rgba(0,0,0,0.12)", - "0px 6px 6px -3px rgba(0,0,0,0.2),0px 10px 14px 1px rgba(0,0,0,0.14),0px 4px 18px 3px rgba(0,0,0,0.12)", - "0px 6px 7px -4px rgba(0,0,0,0.2),0px 11px 15px 1px rgba(0,0,0,0.14),0px 4px 20px 3px rgba(0,0,0,0.12)", - "0px 7px 8px -4px rgba(0,0,0,0.2),0px 12px 17px 2px rgba(0,0,0,0.14),0px 5px 22px 4px rgba(0,0,0,0.12)", - "0px 7px 8px -4px rgba(0,0,0,0.2),0px 13px 19px 2px rgba(0,0,0,0.14),0px 5px 24px 4px rgba(0,0,0,0.12)", - "0px 7px 9px -4px rgba(0,0,0,0.2),0px 14px 21px 2px rgba(0,0,0,0.14),0px 5px 26px 4px rgba(0,0,0,0.12)", - "0px 8px 9px -5px rgba(0,0,0,0.2),0px 15px 22px 2px rgba(0,0,0,0.14),0px 6px 28px 5px rgba(0,0,0,0.12)", - "0px 8px 10px -5px rgba(0,0,0,0.2),0px 16px 24px 2px rgba(0,0,0,0.14),0px 6px 30px 5px rgba(0,0,0,0.12)", - "0px 8px 11px -5px rgba(0,0,0,0.2),0px 17px 26px 2px rgba(0,0,0,0.14),0px 6px 32px 5px rgba(0,0,0,0.12)", - "0px 9px 11px -5px rgba(0,0,0,0.2),0px 18px 28px 2px rgba(0,0,0,0.14),0px 7px 34px 6px rgba(0,0,0,0.12)", - "0px 9px 12px -6px rgba(0,0,0,0.2),0px 19px 29px 2px rgba(0,0,0,0.14),0px 7px 36px 6px rgba(0,0,0,0.12)", - "0px 10px 13px -6px rgba(0,0,0,0.2),0px 20px 31px 3px rgba(0,0,0,0.14),0px 8px 38px 7px rgba(0,0,0,0.12)", - "0px 10px 13px -6px rgba(0,0,0,0.2),0px 21px 33px 3px rgba(0,0,0,0.14),0px 8px 40px 7px rgba(0,0,0,0.12)", - "0px 10px 14px -6px rgba(0,0,0,0.2),0px 22px 35px 3px rgba(0,0,0,0.14),0px 8px 42px 7px rgba(0,0,0,0.12)", - "0px 11px 14px -7px rgba(0,0,0,0.2),0px 23px 36px 3px rgba(0,0,0,0.14),0px 9px 44px 8px rgba(0,0,0,0.12)", - "0px 11px 15px -7px rgba(0,0,0,0.2),0px 24px 38px 3px rgba(0,0,0,0.14),0px 9px 46px 8px rgba(0,0,0,0.12)", - ], - "shape": Object { - "borderRadius": 4, - }, - "spacing": [Function], - "transitions": Object { - "create": [Function], - "duration": Object { - "complex": 375, - "enteringScreen": 225, - "leavingScreen": 195, - "short": 250, - "shorter": 200, - "shortest": 150, - "standard": 300, - }, - "easing": Object { - "easeIn": "cubic-bezier(0.4, 0, 1, 1)", - "easeInOut": "cubic-bezier(0.4, 0, 0.2, 1)", - "easeOut": "cubic-bezier(0.0, 0, 0.2, 1)", - "sharp": "cubic-bezier(0.4, 0, 0.6, 1)", - }, - "getAutoHeightDuration": [Function], - }, - "typography": Object { - "body1": Object { - "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif", - "fontSize": "1rem", - "fontWeight": 400, - "letterSpacing": "0.00938em", - "lineHeight": 1.5, - }, - "body2": Object { - "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif", - "fontSize": "0.875rem", - "fontWeight": 400, - "letterSpacing": "0.01071em", - "lineHeight": 1.43, - }, - "button": Object { - "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif", - "fontSize": "0.875rem", - "fontWeight": 500, - "letterSpacing": "0.02857em", - "lineHeight": 1.75, - "textTransform": "uppercase", - }, - "caption": Object { - "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif", - "fontSize": "0.75rem", - "fontWeight": 400, - "letterSpacing": "0.03333em", - "lineHeight": 1.66, - }, - "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif", - "fontSize": 14, - "fontWeightBold": 700, - "fontWeightLight": 300, - "fontWeightMedium": 500, - "fontWeightRegular": 400, - "h1": Object { - "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif", - "fontSize": "6rem", - "fontWeight": 300, - "letterSpacing": "-0.01562em", - "lineHeight": 1.167, - }, - "h2": Object { - "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif", - "fontSize": "3.75rem", - "fontWeight": 300, - "letterSpacing": "-0.00833em", - "lineHeight": 1.2, - }, - "h3": Object { - "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif", - "fontSize": "3rem", - "fontWeight": 400, - "letterSpacing": "0em", - "lineHeight": 1.167, - }, - "h4": Object { - "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif", - "fontSize": "2.125rem", - "fontWeight": 400, - "letterSpacing": "0.00735em", - "lineHeight": 1.235, - }, - "h5": Object { - "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif", - "fontSize": "1.5rem", - "fontWeight": 400, - "letterSpacing": "0em", - "lineHeight": 1.334, - }, - "h6": Object { - "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif", - "fontSize": "1.25rem", - "fontWeight": 500, - "letterSpacing": "0.0075em", - "lineHeight": 1.6, - }, - "htmlFontSize": 16, - "overline": Object { - "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif", - "fontSize": "0.75rem", - "fontWeight": 400, - "letterSpacing": "0.08333em", - "lineHeight": 2.66, - "textTransform": "uppercase", - }, - "pxToRem": [Function], - "round": [Function], - "subtitle1": Object { - "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif", - "fontSize": "1rem", - "fontWeight": 400, - "letterSpacing": "0.00938em", - "lineHeight": 1.75, - }, - "subtitle2": Object { - "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif", - "fontSize": "0.875rem", - "fontWeight": 500, - "letterSpacing": "0.00714em", - "lineHeight": 1.57, - }, - }, - "zIndex": Object { - "appBar": 1100, - "drawer": 1200, - "mobileStepper": 1000, - "modal": 1300, - "snackbar": 1400, - "speedDial": 1050, - "tooltip": 1500, - }, - }, - "name": "MuiBackdrop", - }, - "propTypes": Object { - "classes": [Function], - "innerRef": [Function], - }, - "render": [Function], - "useStyles": [Function], - } - } - BackdropProps={ - Object { - "transitionDuration": Object { - "enter": 225, - "exit": 195, - }, - } - } - className="MuiDialog-root modal-root" - closeAfterTransition={true} - disableEscapeKeyDown={false} - onClose={[MockFunction]} - open={true} + <div + aria-labelledby="accessibility-title" + class="MuiPaper-root MuiDialog-paper modal-paper MuiDialog-paperScrollPaper MuiDialog-paperWidthSm MuiPaper-elevation24 MuiPaper-rounded" + role="dialog" > - <ForwardRef(Portal) - disablePortal={false} + <div + id="accessibility-title" > - <Portal - containerInfo={ - <body - style="padding-right: 0px; overflow: hidden;" - > - <div - class="MuiDialog-root modal-root" - role="presentation" - style="position: fixed; z-index: 1300; right: 0px; bottom: 0px; top: 0px; left: 0px;" - > - <div - aria-hidden="true" - class="MuiBackdrop-root" - style="opacity: 1; webkit-transition: opacity 225ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; transition: opacity 225ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;" - /> - <div - data-test="sentinelStart" - tabindex="0" - /> - <div - class="MuiDialog-container MuiDialog-scrollPaper" - role="none presentation" - style="opacity: 1; webkit-transition: opacity 225ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; transition: opacity 225ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;" - tabindex="-1" - > - <div - aria-labelledby="accessibility-title" - class="MuiPaper-root MuiDialog-paper modal-paper MuiDialog-paperScrollPaper MuiDialog-paperWidthSm MuiPaper-elevation24 MuiPaper-rounded" - role="dialog" - > - <div - id="accessibility-title" - > - 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 - class="title text-20-bold" - > - ecogesture.initModal.title - </div> - <div - class="text-16-normal text" - > - ecogesture.initModal.text3 - </div> - <button - aria-label="ecogesture.initModal.btn2" - class="MuiButtonBase-root MuiButton-root MuiButton-text btnPrimary" - tabindex="0" - type="button" - > - <span - class="MuiButton-label" - > - ecogesture.initModal.btn2 - </span> - <span - class="MuiTouchRipple-root" - /> - </button> - </div> - </div> - </div> - <div - data-test="sentinelEnd" - tabindex="0" - /> - </div> - </body> - } + 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 + class="title text-20-bold" + > + ecogesture.initModal.title + </div> + <div + class="text-16-normal text" + > + ecogesture.initModal.text3 + </div> + <button + aria-label="ecogesture.initModal.btn2" + class="MuiButtonBase-root MuiButton-root MuiButton-text btnPrimary" + tabindex="0" + type="button" > - <div - className="MuiDialog-root modal-root" - onKeyDown={[Function]} - role="presentation" - style={ - Object { - "bottom": 0, - "left": 0, - "position": "fixed", - "right": 0, - "top": 0, - "zIndex": 1300, - } - } + <span + class="MuiButton-label" > - <WithStyles(ForwardRef(Backdrop)) - onClick={[Function]} - open={true} - transitionDuration={ - Object { - "enter": 225, - "exit": 195, - } - } - > - <ForwardRef(Backdrop) - classes={ - Object { - "invisible": "MuiBackdrop-invisible", - "root": "MuiBackdrop-root", - } - } - onClick={[Function]} - open={true} - transitionDuration={ - Object { - "enter": 225, - "exit": 195, - } - } - > - <ForwardRef(Fade) - in={true} - onClick={[Function]} - timeout={ - Object { - "enter": 225, - "exit": 195, - } - } - > - <Transition - appear={true} - enter={true} - exit={true} - in={true} - mountOnEnter={false} - onClick={[Function]} - onEnter={[Function]} - onEntered={[Function]} - onEntering={[Function]} - onExit={[Function]} - onExited={[Function]} - onExiting={[Function]} - timeout={ - Object { - "enter": 225, - "exit": 195, - } - } - unmountOnExit={false} - > - <div - aria-hidden={true} - className="MuiBackdrop-root" - onClick={[Function]} - style={ - Object { - "opacity": 1, - "visibility": undefined, - } - } - /> - </Transition> - </ForwardRef(Fade)> - </ForwardRef(Backdrop)> - </WithStyles(ForwardRef(Backdrop))> - <Unstable_TrapFocus - disableAutoFocus={false} - disableEnforceFocus={false} - disableRestoreFocus={false} - getDoc={[Function]} - isEnabled={[Function]} - open={true} - > - <div - data-test="sentinelStart" - tabIndex={0} - /> - <ForwardRef(Fade) - appear={true} - in={true} - onEnter={[Function]} - onExited={[Function]} - role="none presentation" - tabIndex="-1" - timeout={ - Object { - "enter": 225, - "exit": 195, - } - } - > - <Transition - appear={true} - enter={true} - exit={true} - in={true} - mountOnEnter={false} - onEnter={[Function]} - onEntered={[Function]} - onEntering={[Function]} - onExit={[Function]} - onExited={[Function]} - onExiting={[Function]} - role="none presentation" - tabIndex="-1" - timeout={ - Object { - "enter": 225, - "exit": 195, - } - } - unmountOnExit={false} - > - <div - className="MuiDialog-container MuiDialog-scrollPaper" - onMouseDown={[Function]} - onMouseUp={[Function]} - role="none presentation" - style={ - Object { - "opacity": 1, - "visibility": undefined, - } - } - tabIndex="-1" - > - <WithStyles(ForwardRef(Paper)) - aria-labelledby="accessibility-title" - className="MuiDialog-paper modal-paper MuiDialog-paperScrollPaper MuiDialog-paperWidthSm" - elevation={24} - role="dialog" - > - <ForwardRef(Paper) - aria-labelledby="accessibility-title" - className="MuiDialog-paper modal-paper MuiDialog-paperScrollPaper MuiDialog-paperWidthSm" - classes={ - Object { - "elevation0": "MuiPaper-elevation0", - "elevation1": "MuiPaper-elevation1", - "elevation10": "MuiPaper-elevation10", - "elevation11": "MuiPaper-elevation11", - "elevation12": "MuiPaper-elevation12", - "elevation13": "MuiPaper-elevation13", - "elevation14": "MuiPaper-elevation14", - "elevation15": "MuiPaper-elevation15", - "elevation16": "MuiPaper-elevation16", - "elevation17": "MuiPaper-elevation17", - "elevation18": "MuiPaper-elevation18", - "elevation19": "MuiPaper-elevation19", - "elevation2": "MuiPaper-elevation2", - "elevation20": "MuiPaper-elevation20", - "elevation21": "MuiPaper-elevation21", - "elevation22": "MuiPaper-elevation22", - "elevation23": "MuiPaper-elevation23", - "elevation24": "MuiPaper-elevation24", - "elevation3": "MuiPaper-elevation3", - "elevation4": "MuiPaper-elevation4", - "elevation5": "MuiPaper-elevation5", - "elevation6": "MuiPaper-elevation6", - "elevation7": "MuiPaper-elevation7", - "elevation8": "MuiPaper-elevation8", - "elevation9": "MuiPaper-elevation9", - "outlined": "MuiPaper-outlined", - "root": "MuiPaper-root", - "rounded": "MuiPaper-rounded", - } - } - elevation={24} - role="dialog" - > - <div - aria-labelledby="accessibility-title" - className="MuiPaper-root MuiDialog-paper modal-paper MuiDialog-paperScrollPaper MuiDialog-paperWidthSm MuiPaper-elevation24 MuiPaper-rounded" - role="dialog" - > - <div - id="accessibility-title" - > - 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]} - > - <WithStyles(ForwardRef(ButtonBase)) - aria-label="feedback.accessibility.button_close" - centerRipple={true} - className="MuiIconButton-root modal-paper-close-button" - disabled={false} - focusRipple={true} - onClick={[MockFunction]} - > - <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]} - > - <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" - > - <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="eg-init-modal" - > - <div - className="title text-20-bold" - > - ecogesture.initModal.title - </div> - <div - className="text-16-normal text" - > - ecogesture.initModal.text3 - </div> - <WithStyles(ForwardRef(Button)) - aria-label="ecogesture.initModal.btn2" - className="btnPrimary" - onClick={[MockFunction]} - > - <ForwardRef(Button) - aria-label="ecogesture.initModal.btn2" - className="btnPrimary" - classes={ - Object { - "colorInherit": "MuiButton-colorInherit", - "contained": "MuiButton-contained", - "containedPrimary": "MuiButton-containedPrimary", - "containedSecondary": "MuiButton-containedSecondary", - "containedSizeLarge": "MuiButton-containedSizeLarge", - "containedSizeSmall": "MuiButton-containedSizeSmall", - "disableElevation": "MuiButton-disableElevation", - "disabled": "Mui-disabled", - "endIcon": "MuiButton-endIcon", - "focusVisible": "Mui-focusVisible", - "fullWidth": "MuiButton-fullWidth", - "iconSizeLarge": "MuiButton-iconSizeLarge", - "iconSizeMedium": "MuiButton-iconSizeMedium", - "iconSizeSmall": "MuiButton-iconSizeSmall", - "label": "MuiButton-label", - "outlined": "MuiButton-outlined", - "outlinedPrimary": "MuiButton-outlinedPrimary", - "outlinedSecondary": "MuiButton-outlinedSecondary", - "outlinedSizeLarge": "MuiButton-outlinedSizeLarge", - "outlinedSizeSmall": "MuiButton-outlinedSizeSmall", - "root": "MuiButton-root", - "sizeLarge": "MuiButton-sizeLarge", - "sizeSmall": "MuiButton-sizeSmall", - "startIcon": "MuiButton-startIcon", - "text": "MuiButton-text", - "textPrimary": "MuiButton-textPrimary", - "textSecondary": "MuiButton-textSecondary", - "textSizeLarge": "MuiButton-textSizeLarge", - "textSizeSmall": "MuiButton-textSizeSmall", - } - } - onClick={[MockFunction]} - > - <WithStyles(ForwardRef(ButtonBase)) - aria-label="ecogesture.initModal.btn2" - className="MuiButton-root MuiButton-text btnPrimary" - component="button" - disabled={false} - focusRipple={true} - focusVisibleClassName="Mui-focusVisible" - onClick={[MockFunction]} - type="button" - > - <ForwardRef(ButtonBase) - aria-label="ecogesture.initModal.btn2" - className="MuiButton-root MuiButton-text btnPrimary" - 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.initModal.btn2" - className="MuiButtonBase-root MuiButton-root MuiButton-text btnPrimary" - 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" - > - ecogesture.initModal.btn2 - </span> - <WithStyles(memo) - center={false} - > - <ForwardRef(TouchRipple) - center={false} - classes={ - Object { - "child": "MuiTouchRipple-child", - "childLeaving": "MuiTouchRipple-childLeaving", - "childPulsate": "MuiTouchRipple-childPulsate", - "ripple": "MuiTouchRipple-ripple", - "ripplePulsate": "MuiTouchRipple-ripplePulsate", - "rippleVisible": "MuiTouchRipple-rippleVisible", - "root": "MuiTouchRipple-root", - } - } - > - <span - className="MuiTouchRipple-root" - > - <TransitionGroup - childFactory={[Function]} - component={null} - exit={true} - /> - </span> - </ForwardRef(TouchRipple)> - </WithStyles(memo)> - </button> - </ForwardRef(ButtonBase)> - </WithStyles(ForwardRef(ButtonBase))> - </ForwardRef(Button)> - </WithStyles(ForwardRef(Button))> - </div> - </div> - </ForwardRef(Paper)> - </WithStyles(ForwardRef(Paper))> - </div> - </Transition> - </ForwardRef(Fade)> - <div - data-test="sentinelEnd" - tabIndex={0} - /> - </Unstable_TrapFocus> - </div> - </Portal> - </ForwardRef(Portal)> - </ForwardRef(Modal)> - </ForwardRef(Dialog)> - </WithStyles(ForwardRef(Dialog))> -</EcogestureLaunchFormModal> + ecogesture.initModal.btn2 + </span> + <span + class="MuiTouchRipple-root" + /> + </button> + </div> + </div> + </div> + <div + data-test="sentinelEnd" + tabindex="0" + /> + </div> +</body> `; diff --git a/src/components/EcogestureForm/EquipmentIcon/EquipmentIcon.spec.tsx b/src/components/EcogestureForm/EquipmentIcon/EquipmentIcon.spec.tsx index 7fe4d6d3dd1aac6b228b84a22d18eaba53b582ed..f4eae1aace82f544593acf00b770f70764e20d5c 100644 --- a/src/components/EcogestureForm/EquipmentIcon/EquipmentIcon.spec.tsx +++ b/src/components/EcogestureForm/EquipmentIcon/EquipmentIcon.spec.tsx @@ -1,17 +1,17 @@ +import { render, waitFor } from '@testing-library/react' import { EquipmentType } from 'enums' import { mount } from 'enzyme' -import toJson from 'enzyme-to-json' import React from 'react' import { waitForComponentToPaint } from 'tests/__mocks__/testUtils' import EquipmentIcon from './EquipmentIcon' describe('EcogestureFormSingleChoice component', () => { it('should be rendered correctly', async () => { - const wrapper = mount( + const { container } = render( <EquipmentIcon equipment={EquipmentType.BOILER} isChecked={false} /> ) - await waitForComponentToPaint(wrapper) - expect(toJson(wrapper)).toMatchSnapshot() + await waitFor(() => null, { container }) + expect(container).toMatchSnapshot() }) it('should render checked icon', async () => { const wrapper = mount( diff --git a/src/components/EcogestureForm/EquipmentIcon/__snapshots__/EquipmentIcon.spec.tsx.snap b/src/components/EcogestureForm/EquipmentIcon/__snapshots__/EquipmentIcon.spec.tsx.snap index e5aad8d5b7684e4a75598a6dcfcb42816eb8b15c..342bc0c025ce91c3e8d85b98639d66b4aea0bde0 100644 --- a/src/components/EcogestureForm/EquipmentIcon/__snapshots__/EquipmentIcon.spec.tsx.snap +++ b/src/components/EcogestureForm/EquipmentIcon/__snapshots__/EquipmentIcon.spec.tsx.snap @@ -1,42 +1,24 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP exports[`EcogestureFormSingleChoice component should be rendered correctly 1`] = ` -<EquipmentIcon - equipment="BOILER" - isChecked={false} -> +<div> <div - className="equipment-icon-container " + class="equipment-icon-container " > - <Icon - className="equipmentIcon " - icon="test-file-stub" - size={40} - spin={false} + <svg + class="equipmentIcon styles__icon___23x3R" + height="40" + width="40" > - <Component - className="equipmentIcon styles__icon___23x3R" - height={40} - style={Object {}} - width={40} - > - <svg - className="equipmentIcon styles__icon___23x3R" - height={40} - style={Object {}} - width={40} - > - <use - xlinkHref="#test-file-stub" - /> - </svg> - </Component> - </Icon> + <use + xlink:href="#test-file-stub" + /> + </svg> </div> <div - className="text text-14-normal" + class="text text-14-normal" > ecogesture_profile.equipments.boiler </div> -</EquipmentIcon> +</div> `; diff --git a/src/components/EcogestureForm/__snapshots__/EcogestureFormView.spec.tsx.snap b/src/components/EcogestureForm/__snapshots__/EcogestureFormView.spec.tsx.snap index 2c57d7f963939e01b5df8e1d90042f9bd43206ea..b759c1dabdb8f7bb39bb2352dfd9b5ce5e328f6a 100644 --- a/src/components/EcogestureForm/__snapshots__/EcogestureFormView.spec.tsx.snap +++ b/src/components/EcogestureForm/__snapshots__/EcogestureFormView.spec.tsx.snap @@ -1,314 +1,84 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP exports[`EcogestureFormView component should be rendered correctly 1`] = ` -<Provider - store={ - Object { - "clearActions": [Function], - "dispatch": [Function], - "getActions": [Function], - "getState": [Function], - "replaceReducer": [Function], - "subscribe": [Function], - } - } -> - <EcogestureFormView> - <mock-cozybar - titleKey="common.title_ecogestures" - /> - <mock-header - desktopTitleKey="common.title_ecogestures" - setHeaderHeight={[Function]} - /> - <mock-content - heightOffset={0} +<div> + <mock-cozybar + titlekey="common.title_ecogestures" + /> + <mock-header + desktoptitlekey="common.title_ecogestures" + /> + <mock-content + heightoffset="0" + > + <div + class="ecogesture-profile-container" > - <EcogestureFormSingleChoice - answerType={ - Object { - "attribute": "heating", - "choices": Array [ - "individual", - "collective", - ], - "type": 0, - } - } - currentProfileEcogesture={ - Object { - "equipments": Array [], - "heating": "individual", - "hotWater": "individual", - "warmingFluid": 0, - } - } - setNextStep={[Function]} - setPreviousStep={[Function]} - step={0} - viewedStep={-1} + <div + class="profile-form-container ecogesture-form-single" > <div - className="ecogesture-profile-container" + class="profile-question-label" > - <div - className="profile-form-container ecogesture-form-single" + ecogesture_form.heating_type.question + </div> + <label + class="radio_short" + > + <input + class="" + name="individual" + type="radio" + value="individual" + /> + ecogesture_form.heating_type.individual + </label> + <label + class="radio_short" + > + <input + class="" + name="collective" + type="radio" + value="collective" + /> + ecogesture_form.heating_type.collective + </label> + </div> + <div + class="profile-navigation" + > + <button + aria-label="profile_type.accessibility.button_previous" + class="MuiButtonBase-root MuiButton-root MuiButton-text btnSecondary Mui-disabled Mui-disabled" + disabled="" + tabindex="-1" + type="button" + > + <span + class="MuiButton-label" > - <div - className="profile-question-label" - > - ecogesture_form.heating_type.question - </div> - <label - className="radio_short" - key="individual" - > - <input - checked={false} - className="" - name="individual" - onChange={[Function]} - type="radio" - value="individual" - /> - ecogesture_form.heating_type.individual - </label> - <label - className="radio_short" - key="collective" - > - <input - checked={false} - className="" - name="collective" - onChange={[Function]} - type="radio" - value="collective" - /> - ecogesture_form.heating_type.collective - </label> - </div> - <FormNavigation - disableNextButton={true} - handleNext={[Function]} - handlePrevious={[Function]} - isEcogesture={true} - step={0} + profile_type.form.button_previous + </span> + </button> + <button + aria-label="profile_type.accessibility.button_next" + class="MuiButtonBase-root MuiButton-root MuiButton-text btnPrimary Mui-disabled Mui-disabled" + disabled="" + tabindex="-1" + type="button" + > + <span + class="MuiButton-label" > - <div - className="profile-navigation" - > - <WithStyles(ForwardRef(Button)) - aria-label="profile_type.accessibility.button_previous" - className="btnSecondary" - disabled={true} - onClick={[Function]} - > - <ForwardRef(Button) - aria-label="profile_type.accessibility.button_previous" - className="btnSecondary" - classes={ - Object { - "colorInherit": "MuiButton-colorInherit", - "contained": "MuiButton-contained", - "containedPrimary": "MuiButton-containedPrimary", - "containedSecondary": "MuiButton-containedSecondary", - "containedSizeLarge": "MuiButton-containedSizeLarge", - "containedSizeSmall": "MuiButton-containedSizeSmall", - "disableElevation": "MuiButton-disableElevation", - "disabled": "Mui-disabled", - "endIcon": "MuiButton-endIcon", - "focusVisible": "Mui-focusVisible", - "fullWidth": "MuiButton-fullWidth", - "iconSizeLarge": "MuiButton-iconSizeLarge", - "iconSizeMedium": "MuiButton-iconSizeMedium", - "iconSizeSmall": "MuiButton-iconSizeSmall", - "label": "MuiButton-label", - "outlined": "MuiButton-outlined", - "outlinedPrimary": "MuiButton-outlinedPrimary", - "outlinedSecondary": "MuiButton-outlinedSecondary", - "outlinedSizeLarge": "MuiButton-outlinedSizeLarge", - "outlinedSizeSmall": "MuiButton-outlinedSizeSmall", - "root": "MuiButton-root", - "sizeLarge": "MuiButton-sizeLarge", - "sizeSmall": "MuiButton-sizeSmall", - "startIcon": "MuiButton-startIcon", - "text": "MuiButton-text", - "textPrimary": "MuiButton-textPrimary", - "textSecondary": "MuiButton-textSecondary", - "textSizeLarge": "MuiButton-textSizeLarge", - "textSizeSmall": "MuiButton-textSizeSmall", - } - } - disabled={true} - onClick={[Function]} - > - <WithStyles(ForwardRef(ButtonBase)) - aria-label="profile_type.accessibility.button_previous" - className="MuiButton-root MuiButton-text btnSecondary Mui-disabled" - component="button" - disabled={true} - focusRipple={true} - focusVisibleClassName="Mui-focusVisible" - onClick={[Function]} - type="button" - > - <ForwardRef(ButtonBase) - aria-label="profile_type.accessibility.button_previous" - className="MuiButton-root MuiButton-text btnSecondary Mui-disabled" - classes={ - Object { - "disabled": "Mui-disabled", - "focusVisible": "Mui-focusVisible", - "root": "MuiButtonBase-root", - } - } - component="button" - disabled={true} - focusRipple={true} - focusVisibleClassName="Mui-focusVisible" - onClick={[Function]} - type="button" - > - <button - aria-label="profile_type.accessibility.button_previous" - className="MuiButtonBase-root MuiButton-root MuiButton-text btnSecondary Mui-disabled Mui-disabled" - disabled={true} - 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={-1} - type="button" - > - <span - className="MuiButton-label" - > - profile_type.form.button_previous - </span> - </button> - </ForwardRef(ButtonBase)> - </WithStyles(ForwardRef(ButtonBase))> - </ForwardRef(Button)> - </WithStyles(ForwardRef(Button))> - <WithStyles(ForwardRef(Button)) - aria-label="profile_type.accessibility.button_next" - className="btnPrimary" - disabled={true} - onClick={[Function]} - > - <ForwardRef(Button) - aria-label="profile_type.accessibility.button_next" - className="btnPrimary" - classes={ - Object { - "colorInherit": "MuiButton-colorInherit", - "contained": "MuiButton-contained", - "containedPrimary": "MuiButton-containedPrimary", - "containedSecondary": "MuiButton-containedSecondary", - "containedSizeLarge": "MuiButton-containedSizeLarge", - "containedSizeSmall": "MuiButton-containedSizeSmall", - "disableElevation": "MuiButton-disableElevation", - "disabled": "Mui-disabled", - "endIcon": "MuiButton-endIcon", - "focusVisible": "Mui-focusVisible", - "fullWidth": "MuiButton-fullWidth", - "iconSizeLarge": "MuiButton-iconSizeLarge", - "iconSizeMedium": "MuiButton-iconSizeMedium", - "iconSizeSmall": "MuiButton-iconSizeSmall", - "label": "MuiButton-label", - "outlined": "MuiButton-outlined", - "outlinedPrimary": "MuiButton-outlinedPrimary", - "outlinedSecondary": "MuiButton-outlinedSecondary", - "outlinedSizeLarge": "MuiButton-outlinedSizeLarge", - "outlinedSizeSmall": "MuiButton-outlinedSizeSmall", - "root": "MuiButton-root", - "sizeLarge": "MuiButton-sizeLarge", - "sizeSmall": "MuiButton-sizeSmall", - "startIcon": "MuiButton-startIcon", - "text": "MuiButton-text", - "textPrimary": "MuiButton-textPrimary", - "textSecondary": "MuiButton-textSecondary", - "textSizeLarge": "MuiButton-textSizeLarge", - "textSizeSmall": "MuiButton-textSizeSmall", - } - } - disabled={true} - onClick={[Function]} - > - <WithStyles(ForwardRef(ButtonBase)) - aria-label="profile_type.accessibility.button_next" - className="MuiButton-root MuiButton-text btnPrimary Mui-disabled" - component="button" - disabled={true} - focusRipple={true} - focusVisibleClassName="Mui-focusVisible" - onClick={[Function]} - type="button" - > - <ForwardRef(ButtonBase) - aria-label="profile_type.accessibility.button_next" - className="MuiButton-root MuiButton-text btnPrimary Mui-disabled" - classes={ - Object { - "disabled": "Mui-disabled", - "focusVisible": "Mui-focusVisible", - "root": "MuiButtonBase-root", - } - } - component="button" - disabled={true} - focusRipple={true} - focusVisibleClassName="Mui-focusVisible" - onClick={[Function]} - type="button" - > - <button - aria-label="profile_type.accessibility.button_next" - className="MuiButtonBase-root MuiButton-root MuiButton-text btnPrimary Mui-disabled Mui-disabled" - disabled={true} - 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={-1} - type="button" - > - <span - className="MuiButton-label" - > - profile_type.form.button_next - </span> - </button> - </ForwardRef(ButtonBase)> - </WithStyles(ForwardRef(ButtonBase))> - </ForwardRef(Button)> - </WithStyles(ForwardRef(Button))> - </div> - </FormNavigation> - </div> - </EcogestureFormSingleChoice> - </mock-content> - <mock-ecogesturelaunchmodal - handleCloseClick={[Function]} - open={true} - /> - </EcogestureFormView> -</Provider> + profile_type.form.button_next + </span> + </button> + </div> + </div> + </mock-content> + <mock-ecogesturelaunchmodal + open="true" + /> +</div> `; diff --git a/src/components/EcogestureSelection/EcogestureSelectionDetail/EcogestureSelectionDetail.spec.tsx b/src/components/EcogestureSelection/EcogestureSelectionDetail/EcogestureSelectionDetail.spec.tsx index 4b3e8cc5e54204eb1b43ff03a299bd7faab765f5..98fd1a4772a1e78c1d384f53d8ec9f24bc1f8da8 100644 --- a/src/components/EcogestureSelection/EcogestureSelectionDetail/EcogestureSelectionDetail.spec.tsx +++ b/src/components/EcogestureSelection/EcogestureSelectionDetail/EcogestureSelectionDetail.spec.tsx @@ -1,5 +1,5 @@ +import { render, waitFor } from '@testing-library/react' import { mount } from 'enzyme' -import toJson from 'enzyme-to-json' import React from 'react' import { mockedEcogesturesData } from 'tests/__mocks__/ecogesturesData.mock' import { waitForComponentToPaint } from 'tests/__mocks__/testUtils' @@ -9,15 +9,16 @@ const mockValidate = jest.fn() describe('EcogestureSelectionDetail component', () => { it('should be rendered correctly', async () => { - const wrapper = mount( + const { container } = render( <EcogestureSelectionDetail ecogesture={mockedEcogesturesData[0]} validate={mockValidate} title={mockedEcogesturesData[0].shortName} /> ) - await waitForComponentToPaint(wrapper) - expect(toJson(wrapper)).toMatchSnapshot() + await waitFor(() => null, { container }) + // await waitForComponentToPaint(wrapper) + expect(container).toMatchSnapshot() }) it('should toggle more details', async () => { diff --git a/src/components/EcogestureSelection/EcogestureSelectionDetail/__snapshots__/EcogestureSelectionDetail.spec.tsx.snap b/src/components/EcogestureSelection/EcogestureSelectionDetail/__snapshots__/EcogestureSelectionDetail.spec.tsx.snap index 1dbe3c0aa92185118481bbf67340a31ba4e912bf..7e62bb3a0b57a0b4d8cfc62db57e2ad186b16971 100644 --- a/src/components/EcogestureSelection/EcogestureSelectionDetail/__snapshots__/EcogestureSelectionDetail.spec.tsx.snap +++ b/src/components/EcogestureSelection/EcogestureSelectionDetail/__snapshots__/EcogestureSelectionDetail.spec.tsx.snap @@ -1,771 +1,149 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP exports[`EcogestureSelectionDetail component should be rendered correctly 1`] = ` -<EcogestureSelectionDetail - 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, - } - } - title="Bonhomme de neige" - validate={[MockFunction]} -> +<div> <div - className="eg-selection-detail-container" + class="eg-selection-detail-container" > <div - className="content" + class="content" > <div - className="iconContainer" + class="iconContainer" > - <StyledIcon - className="icon" - icon="test-file-stub" - size={240} + <svg + aria-hidden="true" + class="icon styles__icon___23x3R" + height="240" + width="240" > - <Icon - aria-hidden={true} - className="icon" - icon="test-file-stub" - size={240} - spin={false} - > - <Component - aria-hidden={true} - className="icon styles__icon___23x3R" - height={240} - style={Object {}} - width={240} - > - <svg - aria-hidden={true} - className="icon styles__icon___23x3R" - height={240} - style={Object {}} - width={240} - > - <use - xlinkHref="#test-file-stub" - /> - </svg> - </Component> - </Icon> - </StyledIcon> + <use + xlink:href="#test-file-stub" + /> + </svg> </div> <div - className="text-22 title" + class="text-22 title" > Bonhomme de neige </div> <div - className="text-18-bold" + class="text-18-bold" > Je baisse le chauffage en mode hors gel lorsque je m'absente plus de 2 jours. </div> - <WithStyles(ForwardRef(Button)) - classes={ - Object { - "label": "text-15-normal", - "root": "btnText showMore", - } - } - onClick={[Function]} + <button + class="MuiButtonBase-root MuiButton-root btnText showMore MuiButton-text" + tabindex="0" + type="button" > - <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-15-normal", - "outlined": "MuiButton-outlined", - "outlinedPrimary": "MuiButton-outlinedPrimary", - "outlinedSecondary": "MuiButton-outlinedSecondary", - "outlinedSizeLarge": "MuiButton-outlinedSizeLarge", - "outlinedSizeSmall": "MuiButton-outlinedSizeSmall", - "root": "MuiButton-root btnText showMore", - "sizeLarge": "MuiButton-sizeLarge", - "sizeSmall": "MuiButton-sizeSmall", - "startIcon": "MuiButton-startIcon", - "text": "MuiButton-text", - "textPrimary": "MuiButton-textPrimary", - "textSecondary": "MuiButton-textSecondary", - "textSizeLarge": "MuiButton-textSizeLarge", - "textSizeSmall": "MuiButton-textSizeSmall", - } - } - onClick={[Function]} + <span + class="MuiButton-label text-15-normal" > - <WithStyles(ForwardRef(ButtonBase)) - className="MuiButton-root btnText showMore MuiButton-text" - component="button" - disabled={false} - focusRipple={true} - focusVisibleClassName="Mui-focusVisible" - onClick={[Function]} - type="button" - > - <ForwardRef(ButtonBase) - className="MuiButton-root btnText showMore 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 btnText showMore 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-15-normal" - > - ecogesture_modal.show_more - </span> - <WithStyles(memo) - center={false} - > - <ForwardRef(TouchRipple) - center={false} - classes={ - Object { - "child": "MuiTouchRipple-child", - "childLeaving": "MuiTouchRipple-childLeaving", - "childPulsate": "MuiTouchRipple-childPulsate", - "ripple": "MuiTouchRipple-ripple", - "ripplePulsate": "MuiTouchRipple-ripplePulsate", - "rippleVisible": "MuiTouchRipple-rippleVisible", - "root": "MuiTouchRipple-root", - } - } - > - <span - className="MuiTouchRipple-root" - > - <TransitionGroup - childFactory={[Function]} - component={null} - exit={true} - /> - </span> - </ForwardRef(TouchRipple)> - </WithStyles(memo)> - </button> - </ForwardRef(ButtonBase)> - </WithStyles(ForwardRef(ButtonBase))> - </ForwardRef(Button)> - </WithStyles(ForwardRef(Button))> - <WithStyles(ForwardRef(Collapse)) - exit={false} - in={false} + ecogesture_modal.show_more + </span> + <span + class="MuiTouchRipple-root" + /> + </button> + <div + class="MuiCollapse-root MuiCollapse-hidden" + style="min-height: 0px;" > - <ForwardRef(Collapse) - classes={ - Object { - "entered": "MuiCollapse-entered", - "hidden": "MuiCollapse-hidden", - "root": "MuiCollapse-root", - "wrapper": "MuiCollapse-wrapper", - "wrapperInner": "MuiCollapse-wrapperInner", - } - } - exit={false} - in={false} + <div + class="MuiCollapse-wrapper" > - <Transition - addEndListener={[Function]} - appear={false} - enter={true} - exit={false} - in={false} - mountOnEnter={false} - onEnter={[Function]} - onEntered={[Function]} - onEntering={[Function]} - onExit={[Function]} - onExited={[Function]} - onExiting={[Function]} - timeout={300} - unmountOnExit={false} + <div + class="MuiCollapse-wrapperInner" > <div - className="MuiCollapse-root MuiCollapse-hidden" - style={ - Object { - "minHeight": "0px", - } - } + class="longDescription text-16-normal-150" > - <div - className="MuiCollapse-wrapper" - > - <div - className="MuiCollapse-wrapperInner" - > - <div - className="longDescription text-16-normal-150" - > - 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… - </div> - </div> - </div> + 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… </div> - </Transition> - </ForwardRef(Collapse)> - </WithStyles(ForwardRef(Collapse))> + </div> + </div> + </div> </div> <div - className="buttons" + class="buttons" > - <WithStyles(ForwardRef(Button)) + <button aria-label="ecogesture_selection.button_objective" - classes={ - Object { - "label": "text-14-bold", - "root": "btnSecondary btnObjective", - } - } - onClick={[Function]} + class="MuiButtonBase-root MuiButton-root btnSecondary btnObjective MuiButton-text" + tabindex="0" + type="button" > - <ForwardRef(Button) - aria-label="ecogesture_selection.button_objective" - 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-bold", - "outlined": "MuiButton-outlined", - "outlinedPrimary": "MuiButton-outlinedPrimary", - "outlinedSecondary": "MuiButton-outlinedSecondary", - "outlinedSizeLarge": "MuiButton-outlinedSizeLarge", - "outlinedSizeSmall": "MuiButton-outlinedSizeSmall", - "root": "MuiButton-root btnSecondary btnObjective", - "sizeLarge": "MuiButton-sizeLarge", - "sizeSmall": "MuiButton-sizeSmall", - "startIcon": "MuiButton-startIcon", - "text": "MuiButton-text", - "textPrimary": "MuiButton-textPrimary", - "textSecondary": "MuiButton-textSecondary", - "textSizeLarge": "MuiButton-textSizeLarge", - "textSizeSmall": "MuiButton-textSizeSmall", - } - } - onClick={[Function]} + <span + class="MuiButton-label text-14-bold" > - <WithStyles(ForwardRef(ButtonBase)) - aria-label="ecogesture_selection.button_objective" - className="MuiButton-root btnSecondary btnObjective MuiButton-text" - component="button" - disabled={false} - focusRipple={true} - focusVisibleClassName="Mui-focusVisible" - onClick={[Function]} - type="button" + <svg + aria-hidden="true" + class="styles__icon___23x3R" + height="60" + width="60" > - <ForwardRef(ButtonBase) - aria-label="ecogesture_selection.button_objective" - className="MuiButton-root btnSecondary btnObjective MuiButton-text" - classes={ - Object { - "disabled": "Mui-disabled", - "focusVisible": "Mui-focusVisible", - "root": "MuiButtonBase-root", - } - } - component="button" - disabled={false} - focusRipple={true} - focusVisibleClassName="Mui-focusVisible" - onClick={[Function]} - type="button" - > - <button - aria-label="ecogesture_selection.button_objective" - className="MuiButtonBase-root MuiButton-root btnSecondary btnObjective 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-14-bold" - > - <StyledIcon - icon="test-file-stub" - size={60} - > - <Icon - aria-hidden={true} - icon="test-file-stub" - size={60} - spin={false} - > - <Component - aria-hidden={true} - className="styles__icon___23x3R" - height={60} - style={Object {}} - width={60} - > - <svg - aria-hidden={true} - className="styles__icon___23x3R" - height={60} - style={Object {}} - width={60} - > - <use - xlinkHref="#test-file-stub" - /> - </svg> - </Component> - </Icon> - </StyledIcon> - ecogesture_selection.button_objective - </span> - <WithStyles(memo) - center={false} - > - <ForwardRef(TouchRipple) - center={false} - classes={ - Object { - "child": "MuiTouchRipple-child", - "childLeaving": "MuiTouchRipple-childLeaving", - "childPulsate": "MuiTouchRipple-childPulsate", - "ripple": "MuiTouchRipple-ripple", - "ripplePulsate": "MuiTouchRipple-ripplePulsate", - "rippleVisible": "MuiTouchRipple-rippleVisible", - "root": "MuiTouchRipple-root", - } - } - > - <span - className="MuiTouchRipple-root" - > - <TransitionGroup - childFactory={[Function]} - component={null} - exit={true} - /> - </span> - </ForwardRef(TouchRipple)> - </WithStyles(memo)> - </button> - </ForwardRef(ButtonBase)> - </WithStyles(ForwardRef(ButtonBase))> - </ForwardRef(Button)> - </WithStyles(ForwardRef(Button))> - <WithStyles(ForwardRef(Button)) + <use + xlink:href="#test-file-stub" + /> + </svg> + ecogesture_selection.button_objective + </span> + <span + class="MuiTouchRipple-root" + /> + </button> + <button aria-label="ecogesture_selection.button_doing" - classes={ - Object { - "label": "text-14-bold", - "root": "btnSecondary btnDoing", - } - } - onClick={[Function]} + class="MuiButtonBase-root MuiButton-root btnSecondary btnDoing MuiButton-text" + tabindex="0" + type="button" > - <ForwardRef(Button) - aria-label="ecogesture_selection.button_doing" - 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-bold", - "outlined": "MuiButton-outlined", - "outlinedPrimary": "MuiButton-outlinedPrimary", - "outlinedSecondary": "MuiButton-outlinedSecondary", - "outlinedSizeLarge": "MuiButton-outlinedSizeLarge", - "outlinedSizeSmall": "MuiButton-outlinedSizeSmall", - "root": "MuiButton-root btnSecondary btnDoing", - "sizeLarge": "MuiButton-sizeLarge", - "sizeSmall": "MuiButton-sizeSmall", - "startIcon": "MuiButton-startIcon", - "text": "MuiButton-text", - "textPrimary": "MuiButton-textPrimary", - "textSecondary": "MuiButton-textSecondary", - "textSizeLarge": "MuiButton-textSizeLarge", - "textSizeSmall": "MuiButton-textSizeSmall", - } - } - onClick={[Function]} + <span + class="MuiButton-label text-14-bold" > - <WithStyles(ForwardRef(ButtonBase)) - aria-label="ecogesture_selection.button_doing" - className="MuiButton-root btnSecondary btnDoing MuiButton-text" - component="button" - disabled={false} - focusRipple={true} - focusVisibleClassName="Mui-focusVisible" - onClick={[Function]} - type="button" + <svg + aria-hidden="true" + class="styles__icon___23x3R" + height="60" + width="60" > - <ForwardRef(ButtonBase) - aria-label="ecogesture_selection.button_doing" - className="MuiButton-root btnSecondary btnDoing MuiButton-text" - classes={ - Object { - "disabled": "Mui-disabled", - "focusVisible": "Mui-focusVisible", - "root": "MuiButtonBase-root", - } - } - component="button" - disabled={false} - focusRipple={true} - focusVisibleClassName="Mui-focusVisible" - onClick={[Function]} - type="button" - > - <button - aria-label="ecogesture_selection.button_doing" - className="MuiButtonBase-root MuiButton-root btnSecondary btnDoing 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-14-bold" - > - <StyledIcon - icon="test-file-stub" - size={60} - > - <Icon - aria-hidden={true} - icon="test-file-stub" - size={60} - spin={false} - > - <Component - aria-hidden={true} - className="styles__icon___23x3R" - height={60} - style={Object {}} - width={60} - > - <svg - aria-hidden={true} - className="styles__icon___23x3R" - height={60} - style={Object {}} - width={60} - > - <use - xlinkHref="#test-file-stub" - /> - </svg> - </Component> - </Icon> - </StyledIcon> - ecogesture_selection.button_doing - </span> - <WithStyles(memo) - center={false} - > - <ForwardRef(TouchRipple) - center={false} - classes={ - Object { - "child": "MuiTouchRipple-child", - "childLeaving": "MuiTouchRipple-childLeaving", - "childPulsate": "MuiTouchRipple-childPulsate", - "ripple": "MuiTouchRipple-ripple", - "ripplePulsate": "MuiTouchRipple-ripplePulsate", - "rippleVisible": "MuiTouchRipple-rippleVisible", - "root": "MuiTouchRipple-root", - } - } - > - <span - className="MuiTouchRipple-root" - > - <TransitionGroup - childFactory={[Function]} - component={null} - exit={true} - /> - </span> - </ForwardRef(TouchRipple)> - </WithStyles(memo)> - </button> - </ForwardRef(ButtonBase)> - </WithStyles(ForwardRef(ButtonBase))> - </ForwardRef(Button)> - </WithStyles(ForwardRef(Button))> - <WithStyles(ForwardRef(Button)) + <use + xlink:href="#test-file-stub" + /> + </svg> + ecogesture_selection.button_doing + </span> + <span + class="MuiTouchRipple-root" + /> + </button> + <button aria-label="ecogesture_selection.button_skip" - classes={ - Object { - "label": "text-14-bold", - "root": "btnSecondary btnSkip", - } - } - onClick={[Function]} + class="MuiButtonBase-root MuiButton-root btnSecondary btnSkip MuiButton-text" + tabindex="0" + type="button" > - <ForwardRef(Button) - aria-label="ecogesture_selection.button_skip" - 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-bold", - "outlined": "MuiButton-outlined", - "outlinedPrimary": "MuiButton-outlinedPrimary", - "outlinedSecondary": "MuiButton-outlinedSecondary", - "outlinedSizeLarge": "MuiButton-outlinedSizeLarge", - "outlinedSizeSmall": "MuiButton-outlinedSizeSmall", - "root": "MuiButton-root btnSecondary btnSkip", - "sizeLarge": "MuiButton-sizeLarge", - "sizeSmall": "MuiButton-sizeSmall", - "startIcon": "MuiButton-startIcon", - "text": "MuiButton-text", - "textPrimary": "MuiButton-textPrimary", - "textSecondary": "MuiButton-textSecondary", - "textSizeLarge": "MuiButton-textSizeLarge", - "textSizeSmall": "MuiButton-textSizeSmall", - } - } - onClick={[Function]} + <span + class="MuiButton-label text-14-bold" > - <WithStyles(ForwardRef(ButtonBase)) - aria-label="ecogesture_selection.button_skip" - className="MuiButton-root btnSecondary btnSkip MuiButton-text" - component="button" - disabled={false} - focusRipple={true} - focusVisibleClassName="Mui-focusVisible" - onClick={[Function]} - type="button" + <svg + aria-hidden="true" + class="styles__icon___23x3R" + height="60" + width="60" > - <ForwardRef(ButtonBase) - aria-label="ecogesture_selection.button_skip" - className="MuiButton-root btnSecondary btnSkip MuiButton-text" - classes={ - Object { - "disabled": "Mui-disabled", - "focusVisible": "Mui-focusVisible", - "root": "MuiButtonBase-root", - } - } - component="button" - disabled={false} - focusRipple={true} - focusVisibleClassName="Mui-focusVisible" - onClick={[Function]} - type="button" - > - <button - aria-label="ecogesture_selection.button_skip" - className="MuiButtonBase-root MuiButton-root btnSecondary btnSkip 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-14-bold" - > - <StyledIcon - icon="test-file-stub" - size={60} - > - <Icon - aria-hidden={true} - icon="test-file-stub" - size={60} - spin={false} - > - <Component - aria-hidden={true} - className="styles__icon___23x3R" - height={60} - style={Object {}} - width={60} - > - <svg - aria-hidden={true} - className="styles__icon___23x3R" - height={60} - style={Object {}} - width={60} - > - <use - xlinkHref="#test-file-stub" - /> - </svg> - </Component> - </Icon> - </StyledIcon> - ecogesture_selection.button_skip - </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))> + <use + xlink:href="#test-file-stub" + /> + </svg> + ecogesture_selection.button_skip + </span> + <span + class="MuiTouchRipple-root" + /> + </button> </div> </div> -</EcogestureSelectionDetail> +</div> `; diff --git a/src/components/EcogestureSelection/EcogestureSelectionEnd/EcogestureSelectionEnd.spec.tsx b/src/components/EcogestureSelection/EcogestureSelectionEnd/EcogestureSelectionEnd.spec.tsx index b6359dd88ff4b2d0f1e63d9615ab7c7b94247a6f..31f5647c2e6f50b682861331b4d8842fee19a98a 100644 --- a/src/components/EcogestureSelection/EcogestureSelectionEnd/EcogestureSelectionEnd.spec.tsx +++ b/src/components/EcogestureSelection/EcogestureSelectionEnd/EcogestureSelectionEnd.spec.tsx @@ -1,6 +1,6 @@ import { Button } from '@material-ui/core' +import { render } from '@testing-library/react' import { mount } from 'enzyme' -import toJson from 'enzyme-to-json' import React from 'react' import EcogestureSelectionEnd from './EcogestureSelectionEnd' @@ -16,8 +16,8 @@ describe('EcogestureSelectionEnd component', () => { }) it('should be rendered correctly', () => { - const wrapper = mount(<EcogestureSelectionEnd />) - expect(toJson(wrapper)).toMatchSnapshot() + const { container } = render(<EcogestureSelectionEnd />) + expect(container).toMatchSnapshot() }) it('should close modal and update profile', () => { diff --git a/src/components/EcogestureSelection/EcogestureSelectionEnd/__snapshots__/EcogestureSelectionEnd.spec.tsx.snap b/src/components/EcogestureSelection/EcogestureSelectionEnd/__snapshots__/EcogestureSelectionEnd.spec.tsx.snap index 0879e9c3a9849a1e8481858f7a81df32433e87ef..c7fc88998876786bb89e34bad58ddc59bfef458f 100644 --- a/src/components/EcogestureSelection/EcogestureSelectionEnd/__snapshots__/EcogestureSelectionEnd.spec.tsx.snap +++ b/src/components/EcogestureSelection/EcogestureSelectionEnd/__snapshots__/EcogestureSelectionEnd.spec.tsx.snap @@ -1,191 +1,58 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP exports[`EcogestureSelectionEnd component should be rendered correctly 1`] = ` -<EcogestureSelectionEnd> +<div> <div - className="eg-selection-end-container" + class="eg-selection-end-container" > <div - className="content" + class="content" > <div - className="title text-28-bold" + class="title text-28-bold" > ecogesture_selection.title_final </div> - <StyledIcon - icon="test-file-stub" - size={120} + <svg + aria-hidden="true" + class="styles__icon___23x3R" + height="120" + width="120" > - <Icon - aria-hidden={true} - icon="test-file-stub" - size={120} - spin={false} - > - <Component - aria-hidden={true} - className="styles__icon___23x3R" - height={120} - style={Object {}} - width={120} - > - <svg - aria-hidden={true} - className="styles__icon___23x3R" - height={120} - style={Object {}} - width={120} - > - <use - xlinkHref="#test-file-stub" - /> - </svg> - </Component> - </Icon> - </StyledIcon> + <use + xlink:href="#test-file-stub" + /> + </svg> <div - className="text text-16-normal" + class="text text-16-normal" > ecogesture_selection.text_final_1 </div> <div - className="text text-16-normal" + class="text text-16-normal" > ecogesture_selection.text_final_2 </div> </div> <div - className="buttons" + class="buttons" > - <WithStyles(ForwardRef(Button)) + <button aria-label="ecogesture_selection.accessibility.button_ok" - className="btnPrimary" - onClick={[Function]} + class="MuiButtonBase-root MuiButton-root MuiButton-text btnPrimary" + tabindex="0" + type="button" > - <ForwardRef(Button) - aria-label="ecogesture_selection.accessibility.button_ok" - className="btnPrimary" - classes={ - Object { - "colorInherit": "MuiButton-colorInherit", - "contained": "MuiButton-contained", - "containedPrimary": "MuiButton-containedPrimary", - "containedSecondary": "MuiButton-containedSecondary", - "containedSizeLarge": "MuiButton-containedSizeLarge", - "containedSizeSmall": "MuiButton-containedSizeSmall", - "disableElevation": "MuiButton-disableElevation", - "disabled": "Mui-disabled", - "endIcon": "MuiButton-endIcon", - "focusVisible": "Mui-focusVisible", - "fullWidth": "MuiButton-fullWidth", - "iconSizeLarge": "MuiButton-iconSizeLarge", - "iconSizeMedium": "MuiButton-iconSizeMedium", - "iconSizeSmall": "MuiButton-iconSizeSmall", - "label": "MuiButton-label", - "outlined": "MuiButton-outlined", - "outlinedPrimary": "MuiButton-outlinedPrimary", - "outlinedSecondary": "MuiButton-outlinedSecondary", - "outlinedSizeLarge": "MuiButton-outlinedSizeLarge", - "outlinedSizeSmall": "MuiButton-outlinedSizeSmall", - "root": "MuiButton-root", - "sizeLarge": "MuiButton-sizeLarge", - "sizeSmall": "MuiButton-sizeSmall", - "startIcon": "MuiButton-startIcon", - "text": "MuiButton-text", - "textPrimary": "MuiButton-textPrimary", - "textSecondary": "MuiButton-textSecondary", - "textSizeLarge": "MuiButton-textSizeLarge", - "textSizeSmall": "MuiButton-textSizeSmall", - } - } - onClick={[Function]} + <span + class="MuiButton-label" > - <WithStyles(ForwardRef(ButtonBase)) - aria-label="ecogesture_selection.accessibility.button_ok" - className="MuiButton-root MuiButton-text btnPrimary" - component="button" - disabled={false} - focusRipple={true} - focusVisibleClassName="Mui-focusVisible" - onClick={[Function]} - type="button" - > - <ForwardRef(ButtonBase) - aria-label="ecogesture_selection.accessibility.button_ok" - className="MuiButton-root MuiButton-text btnPrimary" - classes={ - Object { - "disabled": "Mui-disabled", - "focusVisible": "Mui-focusVisible", - "root": "MuiButtonBase-root", - } - } - component="button" - disabled={false} - focusRipple={true} - focusVisibleClassName="Mui-focusVisible" - onClick={[Function]} - type="button" - > - <button - aria-label="ecogesture_selection.accessibility.button_ok" - className="MuiButtonBase-root MuiButton-root MuiButton-text btnPrimary" - 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" - > - ecogesture_selection.button_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))> + ecogesture_selection.button_ok + </span> + <span + class="MuiTouchRipple-root" + /> + </button> </div> </div> -</EcogestureSelectionEnd> +</div> `; diff --git a/src/components/EcogestureSelection/EcogestureSelectionModal/EcogestureSelectionModal.spec.tsx b/src/components/EcogestureSelection/EcogestureSelectionModal/EcogestureSelectionModal.spec.tsx index b2f3141ca6eaacce91aa0cd11a60e755297fc0ea..a8d883f8a75c6a25807eaf97bf702432d57073c2 100644 --- a/src/components/EcogestureSelection/EcogestureSelectionModal/EcogestureSelectionModal.spec.tsx +++ b/src/components/EcogestureSelection/EcogestureSelectionModal/EcogestureSelectionModal.spec.tsx @@ -1,19 +1,19 @@ import { Button } from '@material-ui/core' +import { render } from '@testing-library/react' import { mount } from 'enzyme' -import toJson from 'enzyme-to-json' import React from 'react' import EcogestureSelectionModal from './EcogestureSelectionModal' const mockHandleClose = jest.fn() describe('EcogestureInitModal component', () => { it('should be rendered correctly', () => { - const wrapper = mount( + const { baseElement } = render( <EcogestureSelectionModal open={true} handleCloseClick={mockHandleClose} /> ) - expect(toJson(wrapper)).toMatchSnapshot() + expect(baseElement).toMatchSnapshot() }) it('should close modal and update profile', async () => { diff --git a/src/components/EcogestureSelection/EcogestureSelectionModal/__snapshots__/EcogestureSelectionModal.spec.tsx.snap b/src/components/EcogestureSelection/EcogestureSelectionModal/__snapshots__/EcogestureSelectionModal.spec.tsx.snap index c15aa65d3e0aa1778834ae74bde5cdcb1a7f9c6b..e51d81a0ecf1718cd6adf3bb6b96b7305fde85aa 100644 --- a/src/components/EcogestureSelection/EcogestureSelectionModal/__snapshots__/EcogestureSelectionModal.spec.tsx.snap +++ b/src/components/EcogestureSelection/EcogestureSelectionModal/__snapshots__/EcogestureSelectionModal.spec.tsx.snap @@ -1,959 +1,100 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP exports[`EcogestureInitModal component should be rendered correctly 1`] = ` -<EcogestureSelectionModal - handleCloseClick={[MockFunction]} - open={true} +<body + style="padding-right: 0px; overflow: hidden;" > - <WithStyles(ForwardRef(Dialog)) - aria-labelledby="accessibility-title" - classes={ - Object { - "paper": "modal-paper", - "root": "modal-root", - } - } - onClose={[MockFunction]} - open={true} + <div + aria-hidden="true" + /> + <div + class="MuiDialog-root modal-root" + role="presentation" + style="position: fixed; z-index: 1300; right: 0px; bottom: 0px; top: 0px; left: 0px;" > - <ForwardRef(Dialog) - aria-labelledby="accessibility-title" - classes={ - Object { - "container": "MuiDialog-container", - "paper": "MuiDialog-paper modal-paper", - "paperFullScreen": "MuiDialog-paperFullScreen", - "paperFullWidth": "MuiDialog-paperFullWidth", - "paperScrollBody": "MuiDialog-paperScrollBody", - "paperScrollPaper": "MuiDialog-paperScrollPaper", - "paperWidthFalse": "MuiDialog-paperWidthFalse", - "paperWidthLg": "MuiDialog-paperWidthLg", - "paperWidthMd": "MuiDialog-paperWidthMd", - "paperWidthSm": "MuiDialog-paperWidthSm", - "paperWidthXl": "MuiDialog-paperWidthXl", - "paperWidthXs": "MuiDialog-paperWidthXs", - "root": "MuiDialog-root modal-root", - "scrollBody": "MuiDialog-scrollBody", - "scrollPaper": "MuiDialog-scrollPaper", - } - } - onClose={[MockFunction]} - open={true} + <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" > - <ForwardRef(Modal) - BackdropComponent={ - Object { - "$$typeof": Symbol(react.forward_ref), - "Naked": Object { - "$$typeof": Symbol(react.forward_ref), - "propTypes": Object { - "children": [Function], - "className": [Function], - "classes": [Function], - "invisible": [Function], - "open": [Function], - "transitionDuration": [Function], - }, - "render": [Function], - }, - "displayName": "WithStyles(ForwardRef(Backdrop))", - "options": Object { - "defaultTheme": Object { - "breakpoints": Object { - "between": [Function], - "down": [Function], - "keys": Array [ - "xs", - "sm", - "md", - "lg", - "xl", - ], - "only": [Function], - "up": [Function], - "values": Object { - "lg": 1280, - "md": 960, - "sm": 600, - "xl": 1920, - "xs": 0, - }, - "width": [Function], - }, - "direction": "ltr", - "mixins": Object { - "gutters": [Function], - "toolbar": Object { - "@media (min-width:0px) and (orientation: landscape)": Object { - "minHeight": 48, - }, - "@media (min-width:600px)": Object { - "minHeight": 64, - }, - "minHeight": 56, - }, - }, - "overrides": Object {}, - "palette": Object { - "action": Object { - "activatedOpacity": 0.12, - "active": "rgba(0, 0, 0, 0.54)", - "disabled": "rgba(0, 0, 0, 0.26)", - "disabledBackground": "rgba(0, 0, 0, 0.12)", - "disabledOpacity": 0.38, - "focus": "rgba(0, 0, 0, 0.12)", - "focusOpacity": 0.12, - "hover": "rgba(0, 0, 0, 0.04)", - "hoverOpacity": 0.04, - "selected": "rgba(0, 0, 0, 0.08)", - "selectedOpacity": 0.08, - }, - "augmentColor": [Function], - "background": Object { - "default": "#fafafa", - "paper": "#fff", - }, - "common": Object { - "black": "#000", - "white": "#fff", - }, - "contrastThreshold": 3, - "divider": "rgba(0, 0, 0, 0.12)", - "error": Object { - "contrastText": "#fff", - "dark": "#d32f2f", - "light": "#e57373", - "main": "#f44336", - }, - "getContrastText": [Function], - "grey": Object { - "100": "#f5f5f5", - "200": "#eeeeee", - "300": "#e0e0e0", - "400": "#bdbdbd", - "50": "#fafafa", - "500": "#9e9e9e", - "600": "#757575", - "700": "#616161", - "800": "#424242", - "900": "#212121", - "A100": "#d5d5d5", - "A200": "#aaaaaa", - "A400": "#303030", - "A700": "#616161", - }, - "info": Object { - "contrastText": "#fff", - "dark": "#1976d2", - "light": "#64b5f6", - "main": "#2196f3", - }, - "primary": Object { - "contrastText": "#fff", - "dark": "#303f9f", - "light": "#7986cb", - "main": "#3f51b5", - }, - "secondary": Object { - "contrastText": "#fff", - "dark": "#c51162", - "light": "#ff4081", - "main": "#f50057", - }, - "success": Object { - "contrastText": "rgba(0, 0, 0, 0.87)", - "dark": "#388e3c", - "light": "#81c784", - "main": "#4caf50", - }, - "text": Object { - "disabled": "rgba(0, 0, 0, 0.38)", - "hint": "rgba(0, 0, 0, 0.38)", - "primary": "rgba(0, 0, 0, 0.87)", - "secondary": "rgba(0, 0, 0, 0.54)", - }, - "tonalOffset": 0.2, - "type": "light", - "warning": Object { - "contrastText": "rgba(0, 0, 0, 0.87)", - "dark": "#f57c00", - "light": "#ffb74d", - "main": "#ff9800", - }, - }, - "props": Object {}, - "shadows": Array [ - "none", - "0px 2px 1px -1px rgba(0,0,0,0.2),0px 1px 1px 0px rgba(0,0,0,0.14),0px 1px 3px 0px rgba(0,0,0,0.12)", - "0px 3px 1px -2px rgba(0,0,0,0.2),0px 2px 2px 0px rgba(0,0,0,0.14),0px 1px 5px 0px rgba(0,0,0,0.12)", - "0px 3px 3px -2px rgba(0,0,0,0.2),0px 3px 4px 0px rgba(0,0,0,0.14),0px 1px 8px 0px rgba(0,0,0,0.12)", - "0px 2px 4px -1px rgba(0,0,0,0.2),0px 4px 5px 0px rgba(0,0,0,0.14),0px 1px 10px 0px rgba(0,0,0,0.12)", - "0px 3px 5px -1px rgba(0,0,0,0.2),0px 5px 8px 0px rgba(0,0,0,0.14),0px 1px 14px 0px rgba(0,0,0,0.12)", - "0px 3px 5px -1px rgba(0,0,0,0.2),0px 6px 10px 0px rgba(0,0,0,0.14),0px 1px 18px 0px rgba(0,0,0,0.12)", - "0px 4px 5px -2px rgba(0,0,0,0.2),0px 7px 10px 1px rgba(0,0,0,0.14),0px 2px 16px 1px rgba(0,0,0,0.12)", - "0px 5px 5px -3px rgba(0,0,0,0.2),0px 8px 10px 1px rgba(0,0,0,0.14),0px 3px 14px 2px rgba(0,0,0,0.12)", - "0px 5px 6px -3px rgba(0,0,0,0.2),0px 9px 12px 1px rgba(0,0,0,0.14),0px 3px 16px 2px rgba(0,0,0,0.12)", - "0px 6px 6px -3px rgba(0,0,0,0.2),0px 10px 14px 1px rgba(0,0,0,0.14),0px 4px 18px 3px rgba(0,0,0,0.12)", - "0px 6px 7px -4px rgba(0,0,0,0.2),0px 11px 15px 1px rgba(0,0,0,0.14),0px 4px 20px 3px rgba(0,0,0,0.12)", - "0px 7px 8px -4px rgba(0,0,0,0.2),0px 12px 17px 2px rgba(0,0,0,0.14),0px 5px 22px 4px rgba(0,0,0,0.12)", - "0px 7px 8px -4px rgba(0,0,0,0.2),0px 13px 19px 2px rgba(0,0,0,0.14),0px 5px 24px 4px rgba(0,0,0,0.12)", - "0px 7px 9px -4px rgba(0,0,0,0.2),0px 14px 21px 2px rgba(0,0,0,0.14),0px 5px 26px 4px rgba(0,0,0,0.12)", - "0px 8px 9px -5px rgba(0,0,0,0.2),0px 15px 22px 2px rgba(0,0,0,0.14),0px 6px 28px 5px rgba(0,0,0,0.12)", - "0px 8px 10px -5px rgba(0,0,0,0.2),0px 16px 24px 2px rgba(0,0,0,0.14),0px 6px 30px 5px rgba(0,0,0,0.12)", - "0px 8px 11px -5px rgba(0,0,0,0.2),0px 17px 26px 2px rgba(0,0,0,0.14),0px 6px 32px 5px rgba(0,0,0,0.12)", - "0px 9px 11px -5px rgba(0,0,0,0.2),0px 18px 28px 2px rgba(0,0,0,0.14),0px 7px 34px 6px rgba(0,0,0,0.12)", - "0px 9px 12px -6px rgba(0,0,0,0.2),0px 19px 29px 2px rgba(0,0,0,0.14),0px 7px 36px 6px rgba(0,0,0,0.12)", - "0px 10px 13px -6px rgba(0,0,0,0.2),0px 20px 31px 3px rgba(0,0,0,0.14),0px 8px 38px 7px rgba(0,0,0,0.12)", - "0px 10px 13px -6px rgba(0,0,0,0.2),0px 21px 33px 3px rgba(0,0,0,0.14),0px 8px 40px 7px rgba(0,0,0,0.12)", - "0px 10px 14px -6px rgba(0,0,0,0.2),0px 22px 35px 3px rgba(0,0,0,0.14),0px 8px 42px 7px rgba(0,0,0,0.12)", - "0px 11px 14px -7px rgba(0,0,0,0.2),0px 23px 36px 3px rgba(0,0,0,0.14),0px 9px 44px 8px rgba(0,0,0,0.12)", - "0px 11px 15px -7px rgba(0,0,0,0.2),0px 24px 38px 3px rgba(0,0,0,0.14),0px 9px 46px 8px rgba(0,0,0,0.12)", - ], - "shape": Object { - "borderRadius": 4, - }, - "spacing": [Function], - "transitions": Object { - "create": [Function], - "duration": Object { - "complex": 375, - "enteringScreen": 225, - "leavingScreen": 195, - "short": 250, - "shorter": 200, - "shortest": 150, - "standard": 300, - }, - "easing": Object { - "easeIn": "cubic-bezier(0.4, 0, 1, 1)", - "easeInOut": "cubic-bezier(0.4, 0, 0.2, 1)", - "easeOut": "cubic-bezier(0.0, 0, 0.2, 1)", - "sharp": "cubic-bezier(0.4, 0, 0.6, 1)", - }, - "getAutoHeightDuration": [Function], - }, - "typography": Object { - "body1": Object { - "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif", - "fontSize": "1rem", - "fontWeight": 400, - "letterSpacing": "0.00938em", - "lineHeight": 1.5, - }, - "body2": Object { - "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif", - "fontSize": "0.875rem", - "fontWeight": 400, - "letterSpacing": "0.01071em", - "lineHeight": 1.43, - }, - "button": Object { - "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif", - "fontSize": "0.875rem", - "fontWeight": 500, - "letterSpacing": "0.02857em", - "lineHeight": 1.75, - "textTransform": "uppercase", - }, - "caption": Object { - "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif", - "fontSize": "0.75rem", - "fontWeight": 400, - "letterSpacing": "0.03333em", - "lineHeight": 1.66, - }, - "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif", - "fontSize": 14, - "fontWeightBold": 700, - "fontWeightLight": 300, - "fontWeightMedium": 500, - "fontWeightRegular": 400, - "h1": Object { - "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif", - "fontSize": "6rem", - "fontWeight": 300, - "letterSpacing": "-0.01562em", - "lineHeight": 1.167, - }, - "h2": Object { - "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif", - "fontSize": "3.75rem", - "fontWeight": 300, - "letterSpacing": "-0.00833em", - "lineHeight": 1.2, - }, - "h3": Object { - "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif", - "fontSize": "3rem", - "fontWeight": 400, - "letterSpacing": "0em", - "lineHeight": 1.167, - }, - "h4": Object { - "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif", - "fontSize": "2.125rem", - "fontWeight": 400, - "letterSpacing": "0.00735em", - "lineHeight": 1.235, - }, - "h5": Object { - "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif", - "fontSize": "1.5rem", - "fontWeight": 400, - "letterSpacing": "0em", - "lineHeight": 1.334, - }, - "h6": Object { - "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif", - "fontSize": "1.25rem", - "fontWeight": 500, - "letterSpacing": "0.0075em", - "lineHeight": 1.6, - }, - "htmlFontSize": 16, - "overline": Object { - "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif", - "fontSize": "0.75rem", - "fontWeight": 400, - "letterSpacing": "0.08333em", - "lineHeight": 2.66, - "textTransform": "uppercase", - }, - "pxToRem": [Function], - "round": [Function], - "subtitle1": Object { - "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif", - "fontSize": "1rem", - "fontWeight": 400, - "letterSpacing": "0.00938em", - "lineHeight": 1.75, - }, - "subtitle2": Object { - "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif", - "fontSize": "0.875rem", - "fontWeight": 500, - "letterSpacing": "0.00714em", - "lineHeight": 1.57, - }, - }, - "zIndex": Object { - "appBar": 1100, - "drawer": 1200, - "mobileStepper": 1000, - "modal": 1300, - "snackbar": 1400, - "speedDial": 1050, - "tooltip": 1500, - }, - }, - "name": "MuiBackdrop", - }, - "propTypes": Object { - "classes": [Function], - "innerRef": [Function], - }, - "render": [Function], - "useStyles": [Function], - } - } - BackdropProps={ - Object { - "transitionDuration": Object { - "enter": 225, - "exit": 195, - }, - } - } - className="MuiDialog-root modal-root" - closeAfterTransition={true} - disableEscapeKeyDown={false} - onClose={[MockFunction]} - open={true} + <div + aria-labelledby="accessibility-title" + class="MuiPaper-root MuiDialog-paper modal-paper MuiDialog-paperScrollPaper MuiDialog-paperWidthSm MuiPaper-elevation24 MuiPaper-rounded" + role="dialog" > - <ForwardRef(Portal) - disablePortal={false} + <div + id="accessibility-title" > - <Portal - containerInfo={ - <body - style="padding-right: 0px; overflow: hidden;" - > - <div - class="MuiDialog-root modal-root" - role="presentation" - style="position: fixed; z-index: 1300; right: 0px; bottom: 0px; top: 0px; left: 0px;" - > - <div - aria-hidden="true" - class="MuiBackdrop-root" - style="opacity: 1; webkit-transition: opacity 225ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; transition: opacity 225ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;" - /> - <div - data-test="sentinelStart" - tabindex="0" - /> - <div - class="MuiDialog-container MuiDialog-scrollPaper" - role="none presentation" - style="opacity: 1; webkit-transition: opacity 225ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; transition: opacity 225ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;" - tabindex="-1" - > - <div - aria-labelledby="accessibility-title" - class="MuiPaper-root MuiDialog-paper modal-paper MuiDialog-paperScrollPaper MuiDialog-paperWidthSm MuiPaper-elevation24 MuiPaper-rounded" - role="dialog" - > - <div - id="accessibility-title" - > - ecogesture_selection.accessibility.window_title - </div> - <button - aria-label="ecogesture_selection.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-selection-modal" - > - <div - class="title text-20-bold" - > - ecogesture_selection.selectionModal.title - </div> - <div - class="text text-16-normal" - > - ecogesture_selection.selectionModal.text - </div> - <button - aria-label="ecogesture_selection.selectionModal.button_close" - class="MuiButtonBase-root MuiButton-root MuiButton-text btnPrimary" - tabindex="0" - type="button" - > - <span - class="MuiButton-label" - > - ecogesture_selection.selectionModal.button_close - </span> - <span - class="MuiTouchRipple-root" - /> - </button> - </div> - </div> - </div> - <div - data-test="sentinelEnd" - tabindex="0" - /> - </div> - </body> - } + ecogesture_selection.accessibility.window_title + </div> + <button + aria-label="ecogesture_selection.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-selection-modal" + > + <div + class="title text-20-bold" + > + ecogesture_selection.selectionModal.title + </div> + <div + class="text text-16-normal" + > + ecogesture_selection.selectionModal.text + </div> + <button + aria-label="ecogesture_selection.selectionModal.button_close" + class="MuiButtonBase-root MuiButton-root MuiButton-text btnPrimary" + tabindex="0" + type="button" > - <div - className="MuiDialog-root modal-root" - onKeyDown={[Function]} - role="presentation" - style={ - Object { - "bottom": 0, - "left": 0, - "position": "fixed", - "right": 0, - "top": 0, - "zIndex": 1300, - } - } + <span + class="MuiButton-label" > - <WithStyles(ForwardRef(Backdrop)) - onClick={[Function]} - open={true} - transitionDuration={ - Object { - "enter": 225, - "exit": 195, - } - } - > - <ForwardRef(Backdrop) - classes={ - Object { - "invisible": "MuiBackdrop-invisible", - "root": "MuiBackdrop-root", - } - } - onClick={[Function]} - open={true} - transitionDuration={ - Object { - "enter": 225, - "exit": 195, - } - } - > - <ForwardRef(Fade) - in={true} - onClick={[Function]} - timeout={ - Object { - "enter": 225, - "exit": 195, - } - } - > - <Transition - appear={true} - enter={true} - exit={true} - in={true} - mountOnEnter={false} - onClick={[Function]} - onEnter={[Function]} - onEntered={[Function]} - onEntering={[Function]} - onExit={[Function]} - onExited={[Function]} - onExiting={[Function]} - timeout={ - Object { - "enter": 225, - "exit": 195, - } - } - unmountOnExit={false} - > - <div - aria-hidden={true} - className="MuiBackdrop-root" - onClick={[Function]} - style={ - Object { - "opacity": 1, - "visibility": undefined, - } - } - /> - </Transition> - </ForwardRef(Fade)> - </ForwardRef(Backdrop)> - </WithStyles(ForwardRef(Backdrop))> - <Unstable_TrapFocus - disableAutoFocus={false} - disableEnforceFocus={false} - disableRestoreFocus={false} - getDoc={[Function]} - isEnabled={[Function]} - open={true} - > - <div - data-test="sentinelStart" - tabIndex={0} - /> - <ForwardRef(Fade) - appear={true} - in={true} - onEnter={[Function]} - onExited={[Function]} - role="none presentation" - tabIndex="-1" - timeout={ - Object { - "enter": 225, - "exit": 195, - } - } - > - <Transition - appear={true} - enter={true} - exit={true} - in={true} - mountOnEnter={false} - onEnter={[Function]} - onEntered={[Function]} - onEntering={[Function]} - onExit={[Function]} - onExited={[Function]} - onExiting={[Function]} - role="none presentation" - tabIndex="-1" - timeout={ - Object { - "enter": 225, - "exit": 195, - } - } - unmountOnExit={false} - > - <div - className="MuiDialog-container MuiDialog-scrollPaper" - onMouseDown={[Function]} - onMouseUp={[Function]} - role="none presentation" - style={ - Object { - "opacity": 1, - "visibility": undefined, - } - } - tabIndex="-1" - > - <WithStyles(ForwardRef(Paper)) - aria-labelledby="accessibility-title" - className="MuiDialog-paper modal-paper MuiDialog-paperScrollPaper MuiDialog-paperWidthSm" - elevation={24} - role="dialog" - > - <ForwardRef(Paper) - aria-labelledby="accessibility-title" - className="MuiDialog-paper modal-paper MuiDialog-paperScrollPaper MuiDialog-paperWidthSm" - classes={ - Object { - "elevation0": "MuiPaper-elevation0", - "elevation1": "MuiPaper-elevation1", - "elevation10": "MuiPaper-elevation10", - "elevation11": "MuiPaper-elevation11", - "elevation12": "MuiPaper-elevation12", - "elevation13": "MuiPaper-elevation13", - "elevation14": "MuiPaper-elevation14", - "elevation15": "MuiPaper-elevation15", - "elevation16": "MuiPaper-elevation16", - "elevation17": "MuiPaper-elevation17", - "elevation18": "MuiPaper-elevation18", - "elevation19": "MuiPaper-elevation19", - "elevation2": "MuiPaper-elevation2", - "elevation20": "MuiPaper-elevation20", - "elevation21": "MuiPaper-elevation21", - "elevation22": "MuiPaper-elevation22", - "elevation23": "MuiPaper-elevation23", - "elevation24": "MuiPaper-elevation24", - "elevation3": "MuiPaper-elevation3", - "elevation4": "MuiPaper-elevation4", - "elevation5": "MuiPaper-elevation5", - "elevation6": "MuiPaper-elevation6", - "elevation7": "MuiPaper-elevation7", - "elevation8": "MuiPaper-elevation8", - "elevation9": "MuiPaper-elevation9", - "outlined": "MuiPaper-outlined", - "root": "MuiPaper-root", - "rounded": "MuiPaper-rounded", - } - } - elevation={24} - role="dialog" - > - <div - aria-labelledby="accessibility-title" - className="MuiPaper-root MuiDialog-paper modal-paper MuiDialog-paperScrollPaper MuiDialog-paperWidthSm MuiPaper-elevation24 MuiPaper-rounded" - role="dialog" - > - <div - id="accessibility-title" - > - ecogesture_selection.accessibility.window_title - </div> - <WithStyles(ForwardRef(IconButton)) - aria-label="ecogesture_selection.accessibility.button_close" - className="modal-paper-close-button" - onClick={[MockFunction]} - > - <ForwardRef(IconButton) - aria-label="ecogesture_selection.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]} - > - <WithStyles(ForwardRef(ButtonBase)) - aria-label="ecogesture_selection.accessibility.button_close" - centerRipple={true} - className="MuiIconButton-root modal-paper-close-button" - disabled={false} - focusRipple={true} - onClick={[MockFunction]} - > - <ForwardRef(ButtonBase) - aria-label="ecogesture_selection.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]} - > - <button - aria-label="ecogesture_selection.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" - > - <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="eg-selection-modal" - > - <div - className="title text-20-bold" - > - ecogesture_selection.selectionModal.title - </div> - <div - className="text text-16-normal" - > - ecogesture_selection.selectionModal.text - </div> - <WithStyles(ForwardRef(Button)) - aria-label="ecogesture_selection.selectionModal.button_close" - className="btnPrimary" - onClick={[MockFunction]} - > - <ForwardRef(Button) - aria-label="ecogesture_selection.selectionModal.button_close" - className="btnPrimary" - classes={ - Object { - "colorInherit": "MuiButton-colorInherit", - "contained": "MuiButton-contained", - "containedPrimary": "MuiButton-containedPrimary", - "containedSecondary": "MuiButton-containedSecondary", - "containedSizeLarge": "MuiButton-containedSizeLarge", - "containedSizeSmall": "MuiButton-containedSizeSmall", - "disableElevation": "MuiButton-disableElevation", - "disabled": "Mui-disabled", - "endIcon": "MuiButton-endIcon", - "focusVisible": "Mui-focusVisible", - "fullWidth": "MuiButton-fullWidth", - "iconSizeLarge": "MuiButton-iconSizeLarge", - "iconSizeMedium": "MuiButton-iconSizeMedium", - "iconSizeSmall": "MuiButton-iconSizeSmall", - "label": "MuiButton-label", - "outlined": "MuiButton-outlined", - "outlinedPrimary": "MuiButton-outlinedPrimary", - "outlinedSecondary": "MuiButton-outlinedSecondary", - "outlinedSizeLarge": "MuiButton-outlinedSizeLarge", - "outlinedSizeSmall": "MuiButton-outlinedSizeSmall", - "root": "MuiButton-root", - "sizeLarge": "MuiButton-sizeLarge", - "sizeSmall": "MuiButton-sizeSmall", - "startIcon": "MuiButton-startIcon", - "text": "MuiButton-text", - "textPrimary": "MuiButton-textPrimary", - "textSecondary": "MuiButton-textSecondary", - "textSizeLarge": "MuiButton-textSizeLarge", - "textSizeSmall": "MuiButton-textSizeSmall", - } - } - onClick={[MockFunction]} - > - <WithStyles(ForwardRef(ButtonBase)) - aria-label="ecogesture_selection.selectionModal.button_close" - className="MuiButton-root MuiButton-text btnPrimary" - component="button" - disabled={false} - focusRipple={true} - focusVisibleClassName="Mui-focusVisible" - onClick={[MockFunction]} - type="button" - > - <ForwardRef(ButtonBase) - aria-label="ecogesture_selection.selectionModal.button_close" - className="MuiButton-root MuiButton-text btnPrimary" - 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_selection.selectionModal.button_close" - className="MuiButtonBase-root MuiButton-root MuiButton-text btnPrimary" - 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" - > - ecogesture_selection.selectionModal.button_close - </span> - <WithStyles(memo) - center={false} - > - <ForwardRef(TouchRipple) - center={false} - classes={ - Object { - "child": "MuiTouchRipple-child", - "childLeaving": "MuiTouchRipple-childLeaving", - "childPulsate": "MuiTouchRipple-childPulsate", - "ripple": "MuiTouchRipple-ripple", - "ripplePulsate": "MuiTouchRipple-ripplePulsate", - "rippleVisible": "MuiTouchRipple-rippleVisible", - "root": "MuiTouchRipple-root", - } - } - > - <span - className="MuiTouchRipple-root" - > - <TransitionGroup - childFactory={[Function]} - component={null} - exit={true} - /> - </span> - </ForwardRef(TouchRipple)> - </WithStyles(memo)> - </button> - </ForwardRef(ButtonBase)> - </WithStyles(ForwardRef(ButtonBase))> - </ForwardRef(Button)> - </WithStyles(ForwardRef(Button))> - </div> - </div> - </ForwardRef(Paper)> - </WithStyles(ForwardRef(Paper))> - </div> - </Transition> - </ForwardRef(Fade)> - <div - data-test="sentinelEnd" - tabIndex={0} - /> - </Unstable_TrapFocus> - </div> - </Portal> - </ForwardRef(Portal)> - </ForwardRef(Modal)> - </ForwardRef(Dialog)> - </WithStyles(ForwardRef(Dialog))> -</EcogestureSelectionModal> + ecogesture_selection.selectionModal.button_close + </span> + <span + class="MuiTouchRipple-root" + /> + </button> + </div> + </div> + </div> + <div + data-test="sentinelEnd" + tabindex="0" + /> + </div> +</body> `; diff --git a/src/components/EcogestureSelection/EcogestureSelectionRestart/EcogestureSelectionRestart.spec.tsx b/src/components/EcogestureSelection/EcogestureSelectionRestart/EcogestureSelectionRestart.spec.tsx index 08bc2048c80cd920cf7ec6c4291944c56f159bd5..45ff77212fc8838f0c2589e9c11e6360115e1033 100644 --- a/src/components/EcogestureSelection/EcogestureSelectionRestart/EcogestureSelectionRestart.spec.tsx +++ b/src/components/EcogestureSelection/EcogestureSelectionRestart/EcogestureSelectionRestart.spec.tsx @@ -1,6 +1,6 @@ import { Button } from '@material-ui/core' +import { render } from '@testing-library/react' import { mount } from 'enzyme' -import toJson from 'enzyme-to-json' import React from 'react' import EcogestureSelectionRestart from './EcogestureSelectionRestart' @@ -13,10 +13,10 @@ const mockRestart = jest.fn() describe('EcogestureSelectionRestart component', () => { it('should be rendered correctly', () => { - const wrapper = mount( + const { container } = render( <EcogestureSelectionRestart listLength={10} restart={mockRestart} /> ) - expect(toJson(wrapper)).toMatchSnapshot() + expect(container).toMatchSnapshot() }) it('should call go to the ecogesture view when user click on the button', () => { diff --git a/src/components/EcogestureSelection/EcogestureSelectionRestart/__snapshots__/EcogestureSelectionRestart.spec.tsx.snap b/src/components/EcogestureSelection/EcogestureSelectionRestart/__snapshots__/EcogestureSelectionRestart.spec.tsx.snap index fb482cd559b92f73ae0d29fe017aae4e545b4e22..36c87d8590df0943512b3b35d15da28e1fd36bd3 100644 --- a/src/components/EcogestureSelection/EcogestureSelectionRestart/__snapshots__/EcogestureSelectionRestart.spec.tsx.snap +++ b/src/components/EcogestureSelection/EcogestureSelectionRestart/__snapshots__/EcogestureSelectionRestart.spec.tsx.snap @@ -1,316 +1,68 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP exports[`EcogestureSelectionRestart component should be rendered correctly 1`] = ` -<EcogestureSelectionRestart - listLength={10} - restart={[MockFunction]} -> +<div> <div - className="eg-selection-restart-container" + class="eg-selection-restart-container" > <div - className="content" + class="content" > <div - className="title text-21-bold" + class="title text-21-bold" > ecogesture_selection.title </div> - <StyledIcon - icon="test-file-stub" - size={120} + <svg + aria-hidden="true" + class="styles__icon___23x3R" + height="120" + width="120" > - <Icon - aria-hidden={true} - icon="test-file-stub" - size={120} - spin={false} - > - <Component - aria-hidden={true} - className="styles__icon___23x3R" - height={120} - style={Object {}} - width={120} - > - <svg - aria-hidden={true} - className="styles__icon___23x3R" - height={120} - style={Object {}} - width={120} - > - <use - xlinkHref="#test-file-stub" - /> - </svg> - </Component> - </Icon> - </StyledIcon> + <use + xlink:href="#test-file-stub" + /> + </svg> <div - className="text text-16-normal" + class="text text-16-normal" > ecogesture_selection.text </div> </div> <div - className="buttons" + class="buttons" > - <WithStyles(ForwardRef(Button)) + <button aria-label="ecogesture_selection.accessibility.button_go_to_ecogesture" - className="btnSecondary" - onClick={[Function]} + class="MuiButtonBase-root MuiButton-root MuiButton-text btnSecondary" + tabindex="0" + type="button" > - <ForwardRef(Button) - aria-label="ecogesture_selection.accessibility.button_go_to_ecogesture" - className="btnSecondary" - classes={ - Object { - "colorInherit": "MuiButton-colorInherit", - "contained": "MuiButton-contained", - "containedPrimary": "MuiButton-containedPrimary", - "containedSecondary": "MuiButton-containedSecondary", - "containedSizeLarge": "MuiButton-containedSizeLarge", - "containedSizeSmall": "MuiButton-containedSizeSmall", - "disableElevation": "MuiButton-disableElevation", - "disabled": "Mui-disabled", - "endIcon": "MuiButton-endIcon", - "focusVisible": "Mui-focusVisible", - "fullWidth": "MuiButton-fullWidth", - "iconSizeLarge": "MuiButton-iconSizeLarge", - "iconSizeMedium": "MuiButton-iconSizeMedium", - "iconSizeSmall": "MuiButton-iconSizeSmall", - "label": "MuiButton-label", - "outlined": "MuiButton-outlined", - "outlinedPrimary": "MuiButton-outlinedPrimary", - "outlinedSecondary": "MuiButton-outlinedSecondary", - "outlinedSizeLarge": "MuiButton-outlinedSizeLarge", - "outlinedSizeSmall": "MuiButton-outlinedSizeSmall", - "root": "MuiButton-root", - "sizeLarge": "MuiButton-sizeLarge", - "sizeSmall": "MuiButton-sizeSmall", - "startIcon": "MuiButton-startIcon", - "text": "MuiButton-text", - "textPrimary": "MuiButton-textPrimary", - "textSecondary": "MuiButton-textSecondary", - "textSizeLarge": "MuiButton-textSizeLarge", - "textSizeSmall": "MuiButton-textSizeSmall", - } - } - onClick={[Function]} + <span + class="MuiButton-label" > - <WithStyles(ForwardRef(ButtonBase)) - aria-label="ecogesture_selection.accessibility.button_go_to_ecogesture" - className="MuiButton-root MuiButton-text btnSecondary" - component="button" - disabled={false} - focusRipple={true} - focusVisibleClassName="Mui-focusVisible" - onClick={[Function]} - type="button" - > - <ForwardRef(ButtonBase) - aria-label="ecogesture_selection.accessibility.button_go_to_ecogesture" - className="MuiButton-root MuiButton-text btnSecondary" - classes={ - Object { - "disabled": "Mui-disabled", - "focusVisible": "Mui-focusVisible", - "root": "MuiButtonBase-root", - } - } - component="button" - disabled={false} - focusRipple={true} - focusVisibleClassName="Mui-focusVisible" - onClick={[Function]} - type="button" - > - <button - aria-label="ecogesture_selection.accessibility.button_go_to_ecogesture" - className="MuiButtonBase-root MuiButton-root MuiButton-text btnSecondary" - disabled={false} - onBlur={[Function]} - onClick={[Function]} - onDragLeave={[Function]} - onFocus={[Function]} - onKeyDown={[Function]} - onKeyUp={[Function]} - onMouseDown={[Function]} - onMouseLeave={[Function]} - onMouseUp={[Function]} - onTouchEnd={[Function]} - onTouchMove={[Function]} - onTouchStart={[Function]} - tabIndex={0} - type="button" - > - <span - className="MuiButton-label" - > - ecogesture_selection.button_go_to_ecogesture - </span> - <WithStyles(memo) - center={false} - > - <ForwardRef(TouchRipple) - center={false} - classes={ - Object { - "child": "MuiTouchRipple-child", - "childLeaving": "MuiTouchRipple-childLeaving", - "childPulsate": "MuiTouchRipple-childPulsate", - "ripple": "MuiTouchRipple-ripple", - "ripplePulsate": "MuiTouchRipple-ripplePulsate", - "rippleVisible": "MuiTouchRipple-rippleVisible", - "root": "MuiTouchRipple-root", - } - } - > - <span - className="MuiTouchRipple-root" - > - <TransitionGroup - childFactory={[Function]} - component={null} - exit={true} - /> - </span> - </ForwardRef(TouchRipple)> - </WithStyles(memo)> - </button> - </ForwardRef(ButtonBase)> - </WithStyles(ForwardRef(ButtonBase))> - </ForwardRef(Button)> - </WithStyles(ForwardRef(Button))> - <WithStyles(ForwardRef(Button)) + ecogesture_selection.button_go_to_ecogesture + </span> + <span + class="MuiTouchRipple-root" + /> + </button> + <button aria-label="ecogesture_selection.accessibility.button_continue" - className="btnPrimary" - onClick={[MockFunction]} + class="MuiButtonBase-root MuiButton-root MuiButton-text btnPrimary" + tabindex="0" + type="button" > - <ForwardRef(Button) - aria-label="ecogesture_selection.accessibility.button_continue" - className="btnPrimary" - classes={ - Object { - "colorInherit": "MuiButton-colorInherit", - "contained": "MuiButton-contained", - "containedPrimary": "MuiButton-containedPrimary", - "containedSecondary": "MuiButton-containedSecondary", - "containedSizeLarge": "MuiButton-containedSizeLarge", - "containedSizeSmall": "MuiButton-containedSizeSmall", - "disableElevation": "MuiButton-disableElevation", - "disabled": "Mui-disabled", - "endIcon": "MuiButton-endIcon", - "focusVisible": "Mui-focusVisible", - "fullWidth": "MuiButton-fullWidth", - "iconSizeLarge": "MuiButton-iconSizeLarge", - "iconSizeMedium": "MuiButton-iconSizeMedium", - "iconSizeSmall": "MuiButton-iconSizeSmall", - "label": "MuiButton-label", - "outlined": "MuiButton-outlined", - "outlinedPrimary": "MuiButton-outlinedPrimary", - "outlinedSecondary": "MuiButton-outlinedSecondary", - "outlinedSizeLarge": "MuiButton-outlinedSizeLarge", - "outlinedSizeSmall": "MuiButton-outlinedSizeSmall", - "root": "MuiButton-root", - "sizeLarge": "MuiButton-sizeLarge", - "sizeSmall": "MuiButton-sizeSmall", - "startIcon": "MuiButton-startIcon", - "text": "MuiButton-text", - "textPrimary": "MuiButton-textPrimary", - "textSecondary": "MuiButton-textSecondary", - "textSizeLarge": "MuiButton-textSizeLarge", - "textSizeSmall": "MuiButton-textSizeSmall", - } - } - onClick={[MockFunction]} + <span + class="MuiButton-label" > - <WithStyles(ForwardRef(ButtonBase)) - aria-label="ecogesture_selection.accessibility.button_continue" - className="MuiButton-root MuiButton-text btnPrimary" - component="button" - disabled={false} - focusRipple={true} - focusVisibleClassName="Mui-focusVisible" - onClick={[MockFunction]} - type="button" - > - <ForwardRef(ButtonBase) - aria-label="ecogesture_selection.accessibility.button_continue" - className="MuiButton-root MuiButton-text btnPrimary" - 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_selection.accessibility.button_continue" - className="MuiButtonBase-root MuiButton-root MuiButton-text btnPrimary" - 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" - > - ecogesture_selection.button_continue - </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))> + ecogesture_selection.button_continue + </span> + <span + class="MuiTouchRipple-root" + /> + </button> </div> </div> -</EcogestureSelectionRestart> +</div> `; diff --git a/src/components/EcogestureSelection/EcogestureSelectionView.spec.tsx b/src/components/EcogestureSelection/EcogestureSelectionView.spec.tsx index ad65360fb1bfdb70f3a60b985b10d2ce9489114d..7c2706b21977e7827241f122b20d859d03af0449 100644 --- a/src/components/EcogestureSelection/EcogestureSelectionView.spec.tsx +++ b/src/components/EcogestureSelection/EcogestureSelectionView.spec.tsx @@ -1,5 +1,5 @@ +import { render, waitFor } from '@testing-library/react' import { mount } from 'enzyme' -import toJson from 'enzyme-to-json' import React from 'react' import { Provider } from 'react-redux' import { mockedEcogesturesData } from 'tests/__mocks__/ecogesturesData.mock' @@ -42,13 +42,13 @@ describe('EcogestureSelection component', () => { it('should be rendered correctly', async () => { mockGetEcogestureListByProfile.mockResolvedValue([mockedEcogesturesData[0]]) - const wrapper = mount( + const { container } = render( <Provider store={store}> <EcogestureSelectionView /> </Provider> ) - await waitForComponentToPaint(wrapper) - expect(toJson(wrapper)).toMatchSnapshot() + await waitFor(() => null, { container }) + expect(container).toMatchSnapshot() }) it('should render with the EcogestureSelectionModal', async () => { mockGetEcogestureListByProfile.mockResolvedValue([mockedEcogesturesData[0]]) diff --git a/src/components/EcogestureSelection/__snapshots__/EcogestureSelectionView.spec.tsx.snap b/src/components/EcogestureSelection/__snapshots__/EcogestureSelectionView.spec.tsx.snap index ed9d0311c8a6b5491e0c668cb785fb5a4c43aafb..d27b25cb74a62bbd1fb43d742645ba4059225031 100644 --- a/src/components/EcogestureSelection/__snapshots__/EcogestureSelectionView.spec.tsx.snap +++ b/src/components/EcogestureSelection/__snapshots__/EcogestureSelectionView.spec.tsx.snap @@ -1,80 +1,31 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP exports[`EcogestureSelection component should be rendered correctly 1`] = ` -<Provider - store={ - Object { - "clearActions": [Function], - "dispatch": [Function], - "getActions": [Function], - "getState": [Function], - "replaceReducer": [Function], - "subscribe": [Function], - } - } -> - <EcogestureSelectionView> - <mock-cozybar - backFunction={[Function]} - displayBackArrow={true} - titleKey="common.title_ecogestures_choice" - /> - <mock-header - desktopTitleKey="common.title_ecogestures_choice" - displayBackArrow={true} - setHeaderHeight={[Function]} - > - <div - className="eg-selection-header" - > - 1/1 - </div> - </mock-header> - <mock-content - heightOffset={0} +<div> + <mock-cozybar + displaybackarrow="true" + titlekey="common.title_ecogestures_choice" + /> + <mock-header + desktoptitlekey="common.title_ecogestures_choice" + displaybackarrow="true" + > + <div + class="eg-selection-header" > - <mock-ecogestureSelectionDetail - 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, - } - } - title="Bonhomme de neige" - validate={[Function]} - /> - <mock-ecogestureSelectionModal - handleCloseClick={[Function]} - open={true} - /> - </mock-content> - </EcogestureSelectionView> -</Provider> + 1/1 + </div> + </mock-header> + <mock-content + heightoffset="0" + > + <mock-ecogestureselectiondetail + ecogesture="[object Object]" + title="Bonhomme de neige" + /> + <mock-ecogestureselectionmodal + open="true" + /> + </mock-content> +</div> `; diff --git a/src/components/Exploration/ExplorationError.spec.tsx b/src/components/Exploration/ExplorationError.spec.tsx index 4ea8699db42cada633e20108310d45a64d088909..aad23a7e21b7e57eb2a1091110e117ff53e47b54 100644 --- a/src/components/Exploration/ExplorationError.spec.tsx +++ b/src/components/Exploration/ExplorationError.spec.tsx @@ -1,11 +1,10 @@ +import { render } from '@testing-library/react' import ExplorationError from 'components/Exploration/ExplorationError' -import { shallow } from 'enzyme' import React from 'react' describe('ExplorationError component', () => { it('should be rendered correctly', () => { - const component = shallow(<ExplorationError />).getElement - // TODO fix empty snapshot - expect(component).toMatchSnapshot() + const { container } = render(<ExplorationError />) + expect(container).toMatchSnapshot() }) }) diff --git a/src/components/Exploration/__snapshots__/ExplorationError.spec.tsx.snap b/src/components/Exploration/__snapshots__/ExplorationError.spec.tsx.snap index 0a84c75a215fe1573be84f848d393de35ebaa1cd..da3fe125efdcba7f6a4f7072aca15adcf4dc16b4 100644 --- a/src/components/Exploration/__snapshots__/ExplorationError.spec.tsx.snap +++ b/src/components/Exploration/__snapshots__/ExplorationError.spec.tsx.snap @@ -1,3 +1,34 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP -exports[`ExplorationError component should be rendered correctly 1`] = `[Function]`; +exports[`ExplorationError component should be rendered correctly 1`] = ` +<div> + <div + class="exploration-error-container" + > + <div + class="exploration-error-message" + > + exploration.global_error + </div> + <div + class="exploration-error-button" + > + <button + aria-label="exploration.accessibility.button_go_back" + class="MuiButtonBase-root MuiButton-root MuiButton-text btnSecondary" + tabindex="0" + type="button" + > + <span + class="MuiButton-label" + > + exploration.button_go_back + </span> + <span + class="MuiTouchRipple-root" + /> + </button> + </div> + </div> +</div> +`; diff --git a/src/components/Feedback/FeedbackModal.spec.tsx b/src/components/Feedback/FeedbackModal.spec.tsx index 3bbc892cb93250ba5d3110f76263d053c4d19e3a..3efbb966a636928f2319a6ce8d1e9190cf53a5e8 100644 --- a/src/components/Feedback/FeedbackModal.spec.tsx +++ b/src/components/Feedback/FeedbackModal.spec.tsx @@ -1,8 +1,6 @@ import { render, screen } from '@testing-library/react' import userEvent from '@testing-library/user-event' import FeedbackModal from 'components/Feedback/FeedbackModal' -import { mount } from 'enzyme' -import toJson from 'enzyme-to-json' import React from 'react' import { Provider } from 'react-redux' import * as storeHooks from 'store/hooks' @@ -27,12 +25,12 @@ describe('FeedbackModal component', () => { jest.clearAllMocks() }) it('should render the component', () => { - const component = mount( + const { baseElement } = render( <Provider store={store}> <FeedbackModal /> </Provider> ) - expect(toJson(component)).toMatchSnapshot() + expect(baseElement).toMatchSnapshot() }) describe('FeedbackModal functionalities', () => { diff --git a/src/components/Feedback/__snapshots__/FeedbackModal.spec.tsx.snap b/src/components/Feedback/__snapshots__/FeedbackModal.spec.tsx.snap index 988d984a7922e0dd5da5e7447e105ae15c749738..9a26cb883362f15852a5aa683b0a4dab56d83bb9 100644 --- a/src/components/Feedback/__snapshots__/FeedbackModal.spec.tsx.snap +++ b/src/components/Feedback/__snapshots__/FeedbackModal.spec.tsx.snap @@ -1,1170 +1,134 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP exports[`FeedbackModal component should render the component 1`] = ` -<Provider - store={ - Object { - "clearActions": [Function], - "dispatch": [Function], - "getActions": [Function], - "getState": [Function], - "replaceReducer": [Function], - "subscribe": [Function], - } - } +<body + style="padding-right: 0px; overflow: hidden;" > - <FeedbackModal> - <WithStyles(ForwardRef(Dialog)) - aria-labelledby="accessibility-title" - classes={ - Object { - "paper": "modal-paper yellow-border", - "root": "modal-root", - } - } - onClose={[Function]} - open={true} + <div + aria-hidden="true" + /> + <div + class="MuiDialog-root modal-root" + role="presentation" + style="position: fixed; z-index: 1300; right: 0px; bottom: 0px; top: 0px; left: 0px;" + > + <div + aria-hidden="true" + class="MuiBackdrop-root" + style="opacity: 1; webkit-transition: opacity 225ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; transition: opacity 225ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;" + /> + <div + data-test="sentinelStart" + tabindex="0" + /> + <div + class="MuiDialog-container MuiDialog-scrollPaper" + role="none presentation" + style="opacity: 1; webkit-transition: opacity 225ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; transition: opacity 225ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;" + tabindex="-1" > - <ForwardRef(Dialog) + <div aria-labelledby="accessibility-title" - classes={ - Object { - "container": "MuiDialog-container", - "paper": "MuiDialog-paper modal-paper yellow-border", - "paperFullScreen": "MuiDialog-paperFullScreen", - "paperFullWidth": "MuiDialog-paperFullWidth", - "paperScrollBody": "MuiDialog-paperScrollBody", - "paperScrollPaper": "MuiDialog-paperScrollPaper", - "paperWidthFalse": "MuiDialog-paperWidthFalse", - "paperWidthLg": "MuiDialog-paperWidthLg", - "paperWidthMd": "MuiDialog-paperWidthMd", - "paperWidthSm": "MuiDialog-paperWidthSm", - "paperWidthXl": "MuiDialog-paperWidthXl", - "paperWidthXs": "MuiDialog-paperWidthXs", - "root": "MuiDialog-root modal-root", - "scrollBody": "MuiDialog-scrollBody", - "scrollPaper": "MuiDialog-scrollPaper", - } - } - onClose={[Function]} - open={true} + class="MuiPaper-root MuiDialog-paper modal-paper yellow-border MuiDialog-paperScrollPaper MuiDialog-paperWidthSm MuiPaper-elevation24 MuiPaper-rounded" + role="dialog" > - <ForwardRef(Modal) - BackdropComponent={ - Object { - "$$typeof": Symbol(react.forward_ref), - "Naked": Object { - "$$typeof": Symbol(react.forward_ref), - "propTypes": Object { - "children": [Function], - "className": [Function], - "classes": [Function], - "invisible": [Function], - "open": [Function], - "transitionDuration": [Function], - }, - "render": [Function], - }, - "displayName": "WithStyles(ForwardRef(Backdrop))", - "options": Object { - "defaultTheme": Object { - "breakpoints": Object { - "between": [Function], - "down": [Function], - "keys": Array [ - "xs", - "sm", - "md", - "lg", - "xl", - ], - "only": [Function], - "up": [Function], - "values": Object { - "lg": 1280, - "md": 960, - "sm": 600, - "xl": 1920, - "xs": 0, - }, - "width": [Function], - }, - "direction": "ltr", - "mixins": Object { - "gutters": [Function], - "toolbar": Object { - "@media (min-width:0px) and (orientation: landscape)": Object { - "minHeight": 48, - }, - "@media (min-width:600px)": Object { - "minHeight": 64, - }, - "minHeight": 56, - }, - }, - "overrides": Object {}, - "palette": Object { - "action": Object { - "activatedOpacity": 0.12, - "active": "rgba(0, 0, 0, 0.54)", - "disabled": "rgba(0, 0, 0, 0.26)", - "disabledBackground": "rgba(0, 0, 0, 0.12)", - "disabledOpacity": 0.38, - "focus": "rgba(0, 0, 0, 0.12)", - "focusOpacity": 0.12, - "hover": "rgba(0, 0, 0, 0.04)", - "hoverOpacity": 0.04, - "selected": "rgba(0, 0, 0, 0.08)", - "selectedOpacity": 0.08, - }, - "augmentColor": [Function], - "background": Object { - "default": "#fafafa", - "paper": "#fff", - }, - "common": Object { - "black": "#000", - "white": "#fff", - }, - "contrastThreshold": 3, - "divider": "rgba(0, 0, 0, 0.12)", - "error": Object { - "contrastText": "#fff", - "dark": "#d32f2f", - "light": "#e57373", - "main": "#f44336", - }, - "getContrastText": [Function], - "grey": Object { - "100": "#f5f5f5", - "200": "#eeeeee", - "300": "#e0e0e0", - "400": "#bdbdbd", - "50": "#fafafa", - "500": "#9e9e9e", - "600": "#757575", - "700": "#616161", - "800": "#424242", - "900": "#212121", - "A100": "#d5d5d5", - "A200": "#aaaaaa", - "A400": "#303030", - "A700": "#616161", - }, - "info": Object { - "contrastText": "#fff", - "dark": "#1976d2", - "light": "#64b5f6", - "main": "#2196f3", - }, - "primary": Object { - "contrastText": "#fff", - "dark": "#303f9f", - "light": "#7986cb", - "main": "#3f51b5", - }, - "secondary": Object { - "contrastText": "#fff", - "dark": "#c51162", - "light": "#ff4081", - "main": "#f50057", - }, - "success": Object { - "contrastText": "rgba(0, 0, 0, 0.87)", - "dark": "#388e3c", - "light": "#81c784", - "main": "#4caf50", - }, - "text": Object { - "disabled": "rgba(0, 0, 0, 0.38)", - "hint": "rgba(0, 0, 0, 0.38)", - "primary": "rgba(0, 0, 0, 0.87)", - "secondary": "rgba(0, 0, 0, 0.54)", - }, - "tonalOffset": 0.2, - "type": "light", - "warning": Object { - "contrastText": "rgba(0, 0, 0, 0.87)", - "dark": "#f57c00", - "light": "#ffb74d", - "main": "#ff9800", - }, - }, - "props": Object {}, - "shadows": Array [ - "none", - "0px 2px 1px -1px rgba(0,0,0,0.2),0px 1px 1px 0px rgba(0,0,0,0.14),0px 1px 3px 0px rgba(0,0,0,0.12)", - "0px 3px 1px -2px rgba(0,0,0,0.2),0px 2px 2px 0px rgba(0,0,0,0.14),0px 1px 5px 0px rgba(0,0,0,0.12)", - "0px 3px 3px -2px rgba(0,0,0,0.2),0px 3px 4px 0px rgba(0,0,0,0.14),0px 1px 8px 0px rgba(0,0,0,0.12)", - "0px 2px 4px -1px rgba(0,0,0,0.2),0px 4px 5px 0px rgba(0,0,0,0.14),0px 1px 10px 0px rgba(0,0,0,0.12)", - "0px 3px 5px -1px rgba(0,0,0,0.2),0px 5px 8px 0px rgba(0,0,0,0.14),0px 1px 14px 0px rgba(0,0,0,0.12)", - "0px 3px 5px -1px rgba(0,0,0,0.2),0px 6px 10px 0px rgba(0,0,0,0.14),0px 1px 18px 0px rgba(0,0,0,0.12)", - "0px 4px 5px -2px rgba(0,0,0,0.2),0px 7px 10px 1px rgba(0,0,0,0.14),0px 2px 16px 1px rgba(0,0,0,0.12)", - "0px 5px 5px -3px rgba(0,0,0,0.2),0px 8px 10px 1px rgba(0,0,0,0.14),0px 3px 14px 2px rgba(0,0,0,0.12)", - "0px 5px 6px -3px rgba(0,0,0,0.2),0px 9px 12px 1px rgba(0,0,0,0.14),0px 3px 16px 2px rgba(0,0,0,0.12)", - "0px 6px 6px -3px rgba(0,0,0,0.2),0px 10px 14px 1px rgba(0,0,0,0.14),0px 4px 18px 3px rgba(0,0,0,0.12)", - "0px 6px 7px -4px rgba(0,0,0,0.2),0px 11px 15px 1px rgba(0,0,0,0.14),0px 4px 20px 3px rgba(0,0,0,0.12)", - "0px 7px 8px -4px rgba(0,0,0,0.2),0px 12px 17px 2px rgba(0,0,0,0.14),0px 5px 22px 4px rgba(0,0,0,0.12)", - "0px 7px 8px -4px rgba(0,0,0,0.2),0px 13px 19px 2px rgba(0,0,0,0.14),0px 5px 24px 4px rgba(0,0,0,0.12)", - "0px 7px 9px -4px rgba(0,0,0,0.2),0px 14px 21px 2px rgba(0,0,0,0.14),0px 5px 26px 4px rgba(0,0,0,0.12)", - "0px 8px 9px -5px rgba(0,0,0,0.2),0px 15px 22px 2px rgba(0,0,0,0.14),0px 6px 28px 5px rgba(0,0,0,0.12)", - "0px 8px 10px -5px rgba(0,0,0,0.2),0px 16px 24px 2px rgba(0,0,0,0.14),0px 6px 30px 5px rgba(0,0,0,0.12)", - "0px 8px 11px -5px rgba(0,0,0,0.2),0px 17px 26px 2px rgba(0,0,0,0.14),0px 6px 32px 5px rgba(0,0,0,0.12)", - "0px 9px 11px -5px rgba(0,0,0,0.2),0px 18px 28px 2px rgba(0,0,0,0.14),0px 7px 34px 6px rgba(0,0,0,0.12)", - "0px 9px 12px -6px rgba(0,0,0,0.2),0px 19px 29px 2px rgba(0,0,0,0.14),0px 7px 36px 6px rgba(0,0,0,0.12)", - "0px 10px 13px -6px rgba(0,0,0,0.2),0px 20px 31px 3px rgba(0,0,0,0.14),0px 8px 38px 7px rgba(0,0,0,0.12)", - "0px 10px 13px -6px rgba(0,0,0,0.2),0px 21px 33px 3px rgba(0,0,0,0.14),0px 8px 40px 7px rgba(0,0,0,0.12)", - "0px 10px 14px -6px rgba(0,0,0,0.2),0px 22px 35px 3px rgba(0,0,0,0.14),0px 8px 42px 7px rgba(0,0,0,0.12)", - "0px 11px 14px -7px rgba(0,0,0,0.2),0px 23px 36px 3px rgba(0,0,0,0.14),0px 9px 44px 8px rgba(0,0,0,0.12)", - "0px 11px 15px -7px rgba(0,0,0,0.2),0px 24px 38px 3px rgba(0,0,0,0.14),0px 9px 46px 8px rgba(0,0,0,0.12)", - ], - "shape": Object { - "borderRadius": 4, - }, - "spacing": [Function], - "transitions": Object { - "create": [Function], - "duration": Object { - "complex": 375, - "enteringScreen": 225, - "leavingScreen": 195, - "short": 250, - "shorter": 200, - "shortest": 150, - "standard": 300, - }, - "easing": Object { - "easeIn": "cubic-bezier(0.4, 0, 1, 1)", - "easeInOut": "cubic-bezier(0.4, 0, 0.2, 1)", - "easeOut": "cubic-bezier(0.0, 0, 0.2, 1)", - "sharp": "cubic-bezier(0.4, 0, 0.6, 1)", - }, - "getAutoHeightDuration": [Function], - }, - "typography": Object { - "body1": Object { - "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif", - "fontSize": "1rem", - "fontWeight": 400, - "letterSpacing": "0.00938em", - "lineHeight": 1.5, - }, - "body2": Object { - "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif", - "fontSize": "0.875rem", - "fontWeight": 400, - "letterSpacing": "0.01071em", - "lineHeight": 1.43, - }, - "button": Object { - "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif", - "fontSize": "0.875rem", - "fontWeight": 500, - "letterSpacing": "0.02857em", - "lineHeight": 1.75, - "textTransform": "uppercase", - }, - "caption": Object { - "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif", - "fontSize": "0.75rem", - "fontWeight": 400, - "letterSpacing": "0.03333em", - "lineHeight": 1.66, - }, - "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif", - "fontSize": 14, - "fontWeightBold": 700, - "fontWeightLight": 300, - "fontWeightMedium": 500, - "fontWeightRegular": 400, - "h1": Object { - "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif", - "fontSize": "6rem", - "fontWeight": 300, - "letterSpacing": "-0.01562em", - "lineHeight": 1.167, - }, - "h2": Object { - "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif", - "fontSize": "3.75rem", - "fontWeight": 300, - "letterSpacing": "-0.00833em", - "lineHeight": 1.2, - }, - "h3": Object { - "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif", - "fontSize": "3rem", - "fontWeight": 400, - "letterSpacing": "0em", - "lineHeight": 1.167, - }, - "h4": Object { - "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif", - "fontSize": "2.125rem", - "fontWeight": 400, - "letterSpacing": "0.00735em", - "lineHeight": 1.235, - }, - "h5": Object { - "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif", - "fontSize": "1.5rem", - "fontWeight": 400, - "letterSpacing": "0em", - "lineHeight": 1.334, - }, - "h6": Object { - "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif", - "fontSize": "1.25rem", - "fontWeight": 500, - "letterSpacing": "0.0075em", - "lineHeight": 1.6, - }, - "htmlFontSize": 16, - "overline": Object { - "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif", - "fontSize": "0.75rem", - "fontWeight": 400, - "letterSpacing": "0.08333em", - "lineHeight": 2.66, - "textTransform": "uppercase", - }, - "pxToRem": [Function], - "round": [Function], - "subtitle1": Object { - "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif", - "fontSize": "1rem", - "fontWeight": 400, - "letterSpacing": "0.00938em", - "lineHeight": 1.75, - }, - "subtitle2": Object { - "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif", - "fontSize": "0.875rem", - "fontWeight": 500, - "letterSpacing": "0.00714em", - "lineHeight": 1.57, - }, - }, - "zIndex": Object { - "appBar": 1100, - "drawer": 1200, - "mobileStepper": 1000, - "modal": 1300, - "snackbar": 1400, - "speedDial": 1050, - "tooltip": 1500, - }, - }, - "name": "MuiBackdrop", - }, - "propTypes": Object { - "classes": [Function], - "innerRef": [Function], - }, - "render": [Function], - "useStyles": [Function], - } - } - BackdropProps={ - Object { - "transitionDuration": Object { - "enter": 225, - "exit": 195, - }, - } - } - className="MuiDialog-root modal-root" - closeAfterTransition={true} - disableEscapeKeyDown={false} - onClose={[Function]} - open={true} + <div + id="accessibility-title" > - <ForwardRef(Portal) - disablePortal={false} + 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="fb-root" + > + <svg + aria-hidden="true" + class="styles__icon___23x3R" + height="80" + width="80" + > + <use + xlink:href="#test-file-stub" + /> + </svg> + <p + class="title" > - <Portal - containerInfo={ - <body - style="padding-right: 0px; overflow: hidden;" - > - <div - class="MuiDialog-root modal-root" - role="presentation" - style="position: fixed; z-index: 1300; right: 0px; bottom: 0px; top: 0px; left: 0px;" - > - <div - aria-hidden="true" - class="MuiBackdrop-root" - style="opacity: 1; webkit-transition: opacity 225ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; transition: opacity 225ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;" - /> - <div - data-test="sentinelStart" - tabindex="0" - /> - <div - class="MuiDialog-container MuiDialog-scrollPaper" - role="none presentation" - style="opacity: 1; webkit-transition: opacity 225ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; transition: opacity 225ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;" - tabindex="-1" - > - <div - aria-labelledby="accessibility-title" - class="MuiPaper-root MuiDialog-paper modal-paper yellow-border MuiDialog-paperScrollPaper MuiDialog-paperWidthSm MuiPaper-elevation24 MuiPaper-rounded" - role="dialog" - > - <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="fb-root" - > - <svg - aria-hidden="true" - class="styles__icon___23x3R" - height="80" - width="80" - > - <use - xlink:href="#test-file-stub" - /> - </svg> - <p - class="title" - > - feedback.title - </p> - <p - class="text" - > - feedback.text1 - </p> - <p - class="text" - > - feedback.text2 - </p> - <div - class="actions" - > - <button - aria-label="feedback.later" - class="MuiButtonBase-root MuiButton-root MuiButton-text btnSecondary" - tabindex="0" - type="button" - > - <span - class="MuiButton-label" - > - feedback.later - </span> - <span - class="MuiTouchRipple-root" - /> - </button> - <button - aria-label="feedback.lets_go" - class="MuiButtonBase-root MuiButton-root MuiButton-text btnPrimary" - tabindex="0" - type="button" - > - <span - class="MuiButton-label" - > - feedback.lets_go - </span> - <span - class="MuiTouchRipple-root" - /> - </button> - </div> - </div> - </div> - </div> - <div - data-test="sentinelEnd" - tabindex="0" - /> - </div> - </body> - } + feedback.title + </p> + <p + class="text" + > + feedback.text1 + </p> + <p + class="text" + > + feedback.text2 + </p> + <div + class="actions" + > + <button + aria-label="feedback.later" + class="MuiButtonBase-root MuiButton-root MuiButton-text btnSecondary" + tabindex="0" + type="button" + > + <span + class="MuiButton-label" + > + feedback.later + </span> + <span + class="MuiTouchRipple-root" + /> + </button> + <button + aria-label="feedback.lets_go" + class="MuiButtonBase-root MuiButton-root MuiButton-text btnPrimary" + tabindex="0" + type="button" > - <div - className="MuiDialog-root modal-root" - onKeyDown={[Function]} - role="presentation" - style={ - Object { - "bottom": 0, - "left": 0, - "position": "fixed", - "right": 0, - "top": 0, - "zIndex": 1300, - } - } + <span + class="MuiButton-label" > - <WithStyles(ForwardRef(Backdrop)) - onClick={[Function]} - open={true} - transitionDuration={ - Object { - "enter": 225, - "exit": 195, - } - } - > - <ForwardRef(Backdrop) - classes={ - Object { - "invisible": "MuiBackdrop-invisible", - "root": "MuiBackdrop-root", - } - } - onClick={[Function]} - open={true} - transitionDuration={ - Object { - "enter": 225, - "exit": 195, - } - } - > - <ForwardRef(Fade) - in={true} - onClick={[Function]} - timeout={ - Object { - "enter": 225, - "exit": 195, - } - } - > - <Transition - appear={true} - enter={true} - exit={true} - in={true} - mountOnEnter={false} - onClick={[Function]} - onEnter={[Function]} - onEntered={[Function]} - onEntering={[Function]} - onExit={[Function]} - onExited={[Function]} - onExiting={[Function]} - timeout={ - Object { - "enter": 225, - "exit": 195, - } - } - unmountOnExit={false} - > - <div - aria-hidden={true} - className="MuiBackdrop-root" - onClick={[Function]} - style={ - Object { - "opacity": 1, - "visibility": undefined, - } - } - /> - </Transition> - </ForwardRef(Fade)> - </ForwardRef(Backdrop)> - </WithStyles(ForwardRef(Backdrop))> - <Unstable_TrapFocus - disableAutoFocus={false} - disableEnforceFocus={false} - disableRestoreFocus={false} - getDoc={[Function]} - isEnabled={[Function]} - open={true} - > - <div - data-test="sentinelStart" - tabIndex={0} - /> - <ForwardRef(Fade) - appear={true} - in={true} - onEnter={[Function]} - onExited={[Function]} - role="none presentation" - tabIndex="-1" - timeout={ - Object { - "enter": 225, - "exit": 195, - } - } - > - <Transition - appear={true} - enter={true} - exit={true} - in={true} - mountOnEnter={false} - onEnter={[Function]} - onEntered={[Function]} - onEntering={[Function]} - onExit={[Function]} - onExited={[Function]} - onExiting={[Function]} - role="none presentation" - tabIndex="-1" - timeout={ - Object { - "enter": 225, - "exit": 195, - } - } - unmountOnExit={false} - > - <div - className="MuiDialog-container MuiDialog-scrollPaper" - onMouseDown={[Function]} - onMouseUp={[Function]} - role="none presentation" - style={ - Object { - "opacity": 1, - "visibility": undefined, - } - } - tabIndex="-1" - > - <WithStyles(ForwardRef(Paper)) - aria-labelledby="accessibility-title" - className="MuiDialog-paper modal-paper yellow-border MuiDialog-paperScrollPaper MuiDialog-paperWidthSm" - elevation={24} - role="dialog" - > - <ForwardRef(Paper) - aria-labelledby="accessibility-title" - className="MuiDialog-paper modal-paper yellow-border MuiDialog-paperScrollPaper MuiDialog-paperWidthSm" - classes={ - Object { - "elevation0": "MuiPaper-elevation0", - "elevation1": "MuiPaper-elevation1", - "elevation10": "MuiPaper-elevation10", - "elevation11": "MuiPaper-elevation11", - "elevation12": "MuiPaper-elevation12", - "elevation13": "MuiPaper-elevation13", - "elevation14": "MuiPaper-elevation14", - "elevation15": "MuiPaper-elevation15", - "elevation16": "MuiPaper-elevation16", - "elevation17": "MuiPaper-elevation17", - "elevation18": "MuiPaper-elevation18", - "elevation19": "MuiPaper-elevation19", - "elevation2": "MuiPaper-elevation2", - "elevation20": "MuiPaper-elevation20", - "elevation21": "MuiPaper-elevation21", - "elevation22": "MuiPaper-elevation22", - "elevation23": "MuiPaper-elevation23", - "elevation24": "MuiPaper-elevation24", - "elevation3": "MuiPaper-elevation3", - "elevation4": "MuiPaper-elevation4", - "elevation5": "MuiPaper-elevation5", - "elevation6": "MuiPaper-elevation6", - "elevation7": "MuiPaper-elevation7", - "elevation8": "MuiPaper-elevation8", - "elevation9": "MuiPaper-elevation9", - "outlined": "MuiPaper-outlined", - "root": "MuiPaper-root", - "rounded": "MuiPaper-rounded", - } - } - elevation={24} - role="dialog" - > - <div - aria-labelledby="accessibility-title" - className="MuiPaper-root MuiDialog-paper modal-paper yellow-border MuiDialog-paperScrollPaper MuiDialog-paperWidthSm MuiPaper-elevation24 MuiPaper-rounded" - role="dialog" - > - <div - id="accessibility-title" - > - 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]} - > - <WithStyles(ForwardRef(ButtonBase)) - aria-label="feedback.accessibility.button_close" - 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="fb-root" - > - <StyledIcon - icon="test-file-stub" - size={80} - > - <Icon - aria-hidden={true} - icon="test-file-stub" - size={80} - spin={false} - > - <Component - aria-hidden={true} - className="styles__icon___23x3R" - height={80} - style={Object {}} - width={80} - > - <svg - aria-hidden={true} - className="styles__icon___23x3R" - height={80} - style={Object {}} - width={80} - > - <use - xlinkHref="#test-file-stub" - /> - </svg> - </Component> - </Icon> - </StyledIcon> - <p - className="title" - > - feedback.title - </p> - <p - className="text" - > - feedback.text1 - </p> - <p - className="text" - > - feedback.text2 - </p> - <div - className="actions" - > - <WithStyles(ForwardRef(Button)) - aria-label="feedback.later" - className="btnSecondary" - onClick={[Function]} - > - <ForwardRef(Button) - aria-label="feedback.later" - className="btnSecondary" - classes={ - Object { - "colorInherit": "MuiButton-colorInherit", - "contained": "MuiButton-contained", - "containedPrimary": "MuiButton-containedPrimary", - "containedSecondary": "MuiButton-containedSecondary", - "containedSizeLarge": "MuiButton-containedSizeLarge", - "containedSizeSmall": "MuiButton-containedSizeSmall", - "disableElevation": "MuiButton-disableElevation", - "disabled": "Mui-disabled", - "endIcon": "MuiButton-endIcon", - "focusVisible": "Mui-focusVisible", - "fullWidth": "MuiButton-fullWidth", - "iconSizeLarge": "MuiButton-iconSizeLarge", - "iconSizeMedium": "MuiButton-iconSizeMedium", - "iconSizeSmall": "MuiButton-iconSizeSmall", - "label": "MuiButton-label", - "outlined": "MuiButton-outlined", - "outlinedPrimary": "MuiButton-outlinedPrimary", - "outlinedSecondary": "MuiButton-outlinedSecondary", - "outlinedSizeLarge": "MuiButton-outlinedSizeLarge", - "outlinedSizeSmall": "MuiButton-outlinedSizeSmall", - "root": "MuiButton-root", - "sizeLarge": "MuiButton-sizeLarge", - "sizeSmall": "MuiButton-sizeSmall", - "startIcon": "MuiButton-startIcon", - "text": "MuiButton-text", - "textPrimary": "MuiButton-textPrimary", - "textSecondary": "MuiButton-textSecondary", - "textSizeLarge": "MuiButton-textSizeLarge", - "textSizeSmall": "MuiButton-textSizeSmall", - } - } - onClick={[Function]} - > - <WithStyles(ForwardRef(ButtonBase)) - aria-label="feedback.later" - className="MuiButton-root MuiButton-text btnSecondary" - component="button" - disabled={false} - focusRipple={true} - focusVisibleClassName="Mui-focusVisible" - onClick={[Function]} - type="button" - > - <ForwardRef(ButtonBase) - aria-label="feedback.later" - className="MuiButton-root MuiButton-text btnSecondary" - classes={ - Object { - "disabled": "Mui-disabled", - "focusVisible": "Mui-focusVisible", - "root": "MuiButtonBase-root", - } - } - component="button" - disabled={false} - focusRipple={true} - focusVisibleClassName="Mui-focusVisible" - onClick={[Function]} - type="button" - > - <button - aria-label="feedback.later" - className="MuiButtonBase-root MuiButton-root MuiButton-text btnSecondary" - disabled={false} - onBlur={[Function]} - onClick={[Function]} - onDragLeave={[Function]} - onFocus={[Function]} - onKeyDown={[Function]} - onKeyUp={[Function]} - onMouseDown={[Function]} - onMouseLeave={[Function]} - onMouseUp={[Function]} - onTouchEnd={[Function]} - onTouchMove={[Function]} - onTouchStart={[Function]} - tabIndex={0} - type="button" - > - <span - className="MuiButton-label" - > - feedback.later - </span> - <WithStyles(memo) - center={false} - > - <ForwardRef(TouchRipple) - center={false} - classes={ - Object { - "child": "MuiTouchRipple-child", - "childLeaving": "MuiTouchRipple-childLeaving", - "childPulsate": "MuiTouchRipple-childPulsate", - "ripple": "MuiTouchRipple-ripple", - "ripplePulsate": "MuiTouchRipple-ripplePulsate", - "rippleVisible": "MuiTouchRipple-rippleVisible", - "root": "MuiTouchRipple-root", - } - } - > - <span - className="MuiTouchRipple-root" - > - <TransitionGroup - childFactory={[Function]} - component={null} - exit={true} - /> - </span> - </ForwardRef(TouchRipple)> - </WithStyles(memo)> - </button> - </ForwardRef(ButtonBase)> - </WithStyles(ForwardRef(ButtonBase))> - </ForwardRef(Button)> - </WithStyles(ForwardRef(Button))> - <WithStyles(ForwardRef(Button)) - aria-label="feedback.lets_go" - className="btnPrimary" - onClick={[Function]} - > - <ForwardRef(Button) - aria-label="feedback.lets_go" - className="btnPrimary" - classes={ - Object { - "colorInherit": "MuiButton-colorInherit", - "contained": "MuiButton-contained", - "containedPrimary": "MuiButton-containedPrimary", - "containedSecondary": "MuiButton-containedSecondary", - "containedSizeLarge": "MuiButton-containedSizeLarge", - "containedSizeSmall": "MuiButton-containedSizeSmall", - "disableElevation": "MuiButton-disableElevation", - "disabled": "Mui-disabled", - "endIcon": "MuiButton-endIcon", - "focusVisible": "Mui-focusVisible", - "fullWidth": "MuiButton-fullWidth", - "iconSizeLarge": "MuiButton-iconSizeLarge", - "iconSizeMedium": "MuiButton-iconSizeMedium", - "iconSizeSmall": "MuiButton-iconSizeSmall", - "label": "MuiButton-label", - "outlined": "MuiButton-outlined", - "outlinedPrimary": "MuiButton-outlinedPrimary", - "outlinedSecondary": "MuiButton-outlinedSecondary", - "outlinedSizeLarge": "MuiButton-outlinedSizeLarge", - "outlinedSizeSmall": "MuiButton-outlinedSizeSmall", - "root": "MuiButton-root", - "sizeLarge": "MuiButton-sizeLarge", - "sizeSmall": "MuiButton-sizeSmall", - "startIcon": "MuiButton-startIcon", - "text": "MuiButton-text", - "textPrimary": "MuiButton-textPrimary", - "textSecondary": "MuiButton-textSecondary", - "textSizeLarge": "MuiButton-textSizeLarge", - "textSizeSmall": "MuiButton-textSizeSmall", - } - } - onClick={[Function]} - > - <WithStyles(ForwardRef(ButtonBase)) - aria-label="feedback.lets_go" - className="MuiButton-root MuiButton-text btnPrimary" - component="button" - disabled={false} - focusRipple={true} - focusVisibleClassName="Mui-focusVisible" - onClick={[Function]} - type="button" - > - <ForwardRef(ButtonBase) - aria-label="feedback.lets_go" - className="MuiButton-root MuiButton-text btnPrimary" - classes={ - Object { - "disabled": "Mui-disabled", - "focusVisible": "Mui-focusVisible", - "root": "MuiButtonBase-root", - } - } - component="button" - disabled={false} - focusRipple={true} - focusVisibleClassName="Mui-focusVisible" - onClick={[Function]} - type="button" - > - <button - aria-label="feedback.lets_go" - className="MuiButtonBase-root MuiButton-root MuiButton-text btnPrimary" - 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" - > - feedback.lets_go - </span> - <WithStyles(memo) - center={false} - > - <ForwardRef(TouchRipple) - center={false} - classes={ - Object { - "child": "MuiTouchRipple-child", - "childLeaving": "MuiTouchRipple-childLeaving", - "childPulsate": "MuiTouchRipple-childPulsate", - "ripple": "MuiTouchRipple-ripple", - "ripplePulsate": "MuiTouchRipple-ripplePulsate", - "rippleVisible": "MuiTouchRipple-rippleVisible", - "root": "MuiTouchRipple-root", - } - } - > - <span - className="MuiTouchRipple-root" - > - <TransitionGroup - childFactory={[Function]} - component={null} - exit={true} - /> - </span> - </ForwardRef(TouchRipple)> - </WithStyles(memo)> - </button> - </ForwardRef(ButtonBase)> - </WithStyles(ForwardRef(ButtonBase))> - </ForwardRef(Button)> - </WithStyles(ForwardRef(Button))> - </div> - </div> - </div> - </ForwardRef(Paper)> - </WithStyles(ForwardRef(Paper))> - </div> - </Transition> - </ForwardRef(Fade)> - <div - data-test="sentinelEnd" - tabIndex={0} - /> - </Unstable_TrapFocus> - </div> - </Portal> - </ForwardRef(Portal)> - </ForwardRef(Modal)> - </ForwardRef(Dialog)> - </WithStyles(ForwardRef(Dialog))> - </FeedbackModal> -</Provider> + feedback.lets_go + </span> + <span + class="MuiTouchRipple-root" + /> + </button> + </div> + </div> + </div> + </div> + <div + data-test="sentinelEnd" + tabindex="0" + /> + </div> +</body> `; diff --git a/src/components/FluidChart/HalfHourNoData/HalfHourNoData.spec.tsx b/src/components/FluidChart/HalfHourNoData/HalfHourNoData.spec.tsx index 5b817591bf6040deab0540b88f806542e5078fb4..1537a11b753767682c686bbb366a335502d47520 100644 --- a/src/components/FluidChart/HalfHourNoData/HalfHourNoData.spec.tsx +++ b/src/components/FluidChart/HalfHourNoData/HalfHourNoData.spec.tsx @@ -1,10 +1,10 @@ -import { mount } from 'enzyme' +import { render } from '@testing-library/react' import React from 'react' import HalfHourNoData from './HalfHourNoData' describe('HalfHourNoData component', () => { it('should render correctly HalfHourNoData', () => { - const component = mount(<HalfHourNoData />) - expect(component).toMatchSnapshot() + const { container } = render(<HalfHourNoData />) + expect(container).toMatchSnapshot() }) }) diff --git a/src/components/FluidChart/HalfHourNoData/__snapshots__/HalfHourNoData.spec.tsx.snap b/src/components/FluidChart/HalfHourNoData/__snapshots__/HalfHourNoData.spec.tsx.snap index ef55e75a7baa649a8a4924df51b3b59c2da6b06b..af114a46a58eb8a87647400a2fbfe1ee201f4751 100644 --- a/src/components/FluidChart/HalfHourNoData/__snapshots__/HalfHourNoData.spec.tsx.snap +++ b/src/components/FluidChart/HalfHourNoData/__snapshots__/HalfHourNoData.spec.tsx.snap @@ -1,3 +1,16 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP -exports[`HalfHourNoData component should render correctly HalfHourNoData 1`] = `ReactWrapper {}`; +exports[`HalfHourNoData component should render correctly HalfHourNoData 1`] = ` +<div> + <div + class="halfHour" + > + <h2> + timestep.half_an_hour.gather_data_title + </h2> + <p> + timestep.half_an_hour.gather_data_subtitle + </p> + </div> +</div> +`; diff --git a/src/components/FluidChart/TimeStepSelector/TimeStepSelector.spec.tsx b/src/components/FluidChart/TimeStepSelector/TimeStepSelector.spec.tsx index 25c2672cc2540a55bcbb7044a777cb6cf651487e..39da0b310d1e26b7560cb800cd3641f2d58e963e 100644 --- a/src/components/FluidChart/TimeStepSelector/TimeStepSelector.spec.tsx +++ b/src/components/FluidChart/TimeStepSelector/TimeStepSelector.spec.tsx @@ -1,15 +1,14 @@ import { Button } from '@material-ui/core' +import { render, screen } from '@testing-library/react' import TimeStepSelector from 'components/FluidChart/TimeStepSelector/TimeStepSelector' import { FluidType, TimeStep } from 'enums' import { mount } from 'enzyme' -import toJson from 'enzyme-to-json' import { DateTime } from 'luxon' import React from 'react' import { Provider } from 'react-redux' import UsageEventService from 'services/usageEvent.service' import * as chartActions from 'store/chart/chart.slice' import { createMockEcolyoStore } from 'tests/__mocks__/store' -import { waitForComponentToPaint } from 'tests/__mocks__/testUtils' jest.mock('services/usageEvent.service') const mockAddEvent = jest.fn() @@ -33,15 +32,13 @@ describe('TimeStepSelector component', () => { }), }, }) - const wrapper = mount( + const { container } = render( <Provider store={store}> <TimeStepSelector fluidType={FluidType.WATER} /> </Provider> ) - expect(wrapper.find('.circle').at(3).exists()).toBeTruthy() - expect(wrapper.find('.circle').at(4).exists()).toBeFalsy() - await waitForComponentToPaint(wrapper) - expect(toJson(wrapper)).toMatchSnapshot() + expect(screen.getAllByRole('listitem').length).toBe(8) + expect(container).toMatchSnapshot() }) it('should render component properly with 5 timesteps', () => { diff --git a/src/components/FluidChart/TimeStepSelector/TimeStepSelector.tsx b/src/components/FluidChart/TimeStepSelector/TimeStepSelector.tsx index 06bdfd8b036b573d83baf595b0e9a71f28e12e98..d5d59d5340e20443334a3691e49a9c30efc6b04c 100644 --- a/src/components/FluidChart/TimeStepSelector/TimeStepSelector.tsx +++ b/src/components/FluidChart/TimeStepSelector/TimeStepSelector.tsx @@ -96,7 +96,6 @@ const TimeStepSelector = ({ fluidType }: { fluidType: FluidType }) => { }} id={TimeStep[step].toLowerCase()} tabIndex={0} - role="menuitem" > <span className="clickable-area" /> <span className="text text-14-normal"> diff --git a/src/components/FluidChart/TimeStepSelector/__snapshots__/TimeStepSelector.spec.tsx.snap b/src/components/FluidChart/TimeStepSelector/__snapshots__/TimeStepSelector.spec.tsx.snap index 1ab4cc18035281f2f939e45c009c1f4d334db722..bd50699f8e15615f0e591ab144c1b29a4992c0f8 100644 --- a/src/components/FluidChart/TimeStepSelector/__snapshots__/TimeStepSelector.spec.tsx.snap +++ b/src/components/FluidChart/TimeStepSelector/__snapshots__/TimeStepSelector.spec.tsx.snap @@ -1,241 +1,100 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP exports[`TimeStepSelector component should render component properly with 4 timesteps 1`] = ` -<Provider - store={ - Object { - "clearActions": [Function], - "dispatch": [Function], - "getActions": [Function], - "getState": [Function], - "replaceReducer": [Function], - "subscribe": [Function], - } - } -> - <TimeStepSelector - fluidType={1} +<div> + <div + class="timestep-selector" > + <button + class="MuiButtonBase-root MuiButton-root btnSecondary MuiButton-text MuiButton-textSizeLarge MuiButton-sizeLarge" + tabindex="0" + type="button" + > + <span + class="MuiButton-label text-13-normal" + > + timestep.today + </span> + <span + class="MuiTouchRipple-root" + /> + </button> <div - className="timestep-selector" + class="timestep-container" > - <WithStyles(ForwardRef(Button)) - classes={ - Object { - "label": "text-13-normal", - "root": "btnSecondary", - } - } - onClick={[Function]} - size="large" + <ul + class="timestep-bar false" > - <ForwardRef(Button) - classes={ - Object { - "colorInherit": "MuiButton-colorInherit", - "contained": "MuiButton-contained", - "containedPrimary": "MuiButton-containedPrimary", - "containedSecondary": "MuiButton-containedSecondary", - "containedSizeLarge": "MuiButton-containedSizeLarge", - "containedSizeSmall": "MuiButton-containedSizeSmall", - "disableElevation": "MuiButton-disableElevation", - "disabled": "Mui-disabled", - "endIcon": "MuiButton-endIcon", - "focusVisible": "Mui-focusVisible", - "fullWidth": "MuiButton-fullWidth", - "iconSizeLarge": "MuiButton-iconSizeLarge", - "iconSizeMedium": "MuiButton-iconSizeMedium", - "iconSizeSmall": "MuiButton-iconSizeSmall", - "label": "MuiButton-label text-13-normal", - "outlined": "MuiButton-outlined", - "outlinedPrimary": "MuiButton-outlinedPrimary", - "outlinedSecondary": "MuiButton-outlinedSecondary", - "outlinedSizeLarge": "MuiButton-outlinedSizeLarge", - "outlinedSizeSmall": "MuiButton-outlinedSizeSmall", - "root": "MuiButton-root btnSecondary", - "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]} - size="large" + <li + class="circle" + id="week" + tabindex="0" > - <WithStyles(ForwardRef(ButtonBase)) - className="MuiButton-root btnSecondary MuiButton-text MuiButton-textSizeLarge MuiButton-sizeLarge" - component="button" - disabled={false} - focusRipple={true} - focusVisibleClassName="Mui-focusVisible" - onClick={[Function]} - type="button" + <span + class="clickable-area" + /> + <span + class="text text-14-normal" > - <ForwardRef(ButtonBase) - className="MuiButton-root btnSecondary MuiButton-text MuiButton-textSizeLarge MuiButton-sizeLarge" - 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 btnSecondary MuiButton-text MuiButton-textSizeLarge MuiButton-sizeLarge" - disabled={false} - onBlur={[Function]} - onClick={[Function]} - onDragLeave={[Function]} - onFocus={[Function]} - onKeyDown={[Function]} - onKeyUp={[Function]} - onMouseDown={[Function]} - onMouseLeave={[Function]} - onMouseUp={[Function]} - onTouchEnd={[Function]} - onTouchMove={[Function]} - onTouchStart={[Function]} - tabIndex={0} - type="button" - > - <span - className="MuiButton-label text-13-normal" - > - timestep.today - </span> - <WithStyles(memo) - center={false} - > - <ForwardRef(TouchRipple) - center={false} - classes={ - Object { - "child": "MuiTouchRipple-child", - "childLeaving": "MuiTouchRipple-childLeaving", - "childPulsate": "MuiTouchRipple-childPulsate", - "ripple": "MuiTouchRipple-ripple", - "ripplePulsate": "MuiTouchRipple-ripplePulsate", - "rippleVisible": "MuiTouchRipple-rippleVisible", - "root": "MuiTouchRipple-root", - } - } - > - <span - className="MuiTouchRipple-root" - > - <TransitionGroup - childFactory={[Function]} - component={null} - exit={true} - /> - </span> - </ForwardRef(TouchRipple)> - </WithStyles(memo)> - </button> - </ForwardRef(ButtonBase)> - </WithStyles(ForwardRef(ButtonBase))> - </ForwardRef(Button)> - </WithStyles(ForwardRef(Button))> - <div - className="timestep-container" - > - <ul - className="timestep-bar false" + timestep.week.period + </span> + </li> + <li + class="bar" + /> + <li + class="active circle" + id="day" + tabindex="0" > - <li - className="circle" - id="week" - onClick={[Function]} - onKeyDown={[Function]} - role="menuitem" - tabIndex={0} - > - <span - className="clickable-area" - /> - <span - className="text text-14-normal" - > - timestep.week.period - </span> - </li> - <li - className="bar" + <span + class="clickable-area" /> - <li - className="active circle" - id="day" - onClick={[Function]} - onKeyDown={[Function]} - role="menuitem" - tabIndex={0} + <span + class="text text-14-normal" > - <span - className="clickable-area" - /> - <span - className="text text-14-normal" - > - timestep.day.period - </span> - </li> - <li - className="bar" + timestep.day.period + </span> + </li> + <li + class="bar" + /> + <li + class="circle" + id="month" + tabindex="0" + > + <span + class="clickable-area" /> - <li - className="circle" - id="month" - onClick={[Function]} - onKeyDown={[Function]} - role="menuitem" - tabIndex={0} + <span + class="text text-14-normal" > - <span - className="clickable-area" - /> - <span - className="text text-14-normal" - > - timestep.month.period - </span> - </li> - <li - className="bar" + timestep.month.period + </span> + </li> + <li + class="bar" + /> + <li + class="circle" + id="year" + tabindex="0" + > + <span + class="clickable-area" /> - <li - className="circle" - id="year" - onClick={[Function]} - onKeyDown={[Function]} - role="menuitem" - tabIndex={0} + <span + class="text text-14-normal" > - <span - className="clickable-area" - /> - <span - className="text text-14-normal" - > - timestep.year.period - </span> - </li> - <li - className="bar" - /> - </ul> - </div> + timestep.year.period + </span> + </li> + <li + class="bar" + /> + </ul> </div> - </TimeStepSelector> -</Provider> + </div> +</div> `; diff --git a/src/components/Header/CozyBar.spec.tsx b/src/components/Header/CozyBar.spec.tsx index 274a14b02a7b75dd088148174d95780760d286bd..3f747796d146ce793df13cf8de468e548830188a 100644 --- a/src/components/Header/CozyBar.spec.tsx +++ b/src/components/Header/CozyBar.spec.tsx @@ -1,7 +1,7 @@ +import { render, screen } from '@testing-library/react' +import { userEvent } from '@testing-library/user-event' import CozyBar from 'components/Header/CozyBar' import { ScreenType } from 'enums' -import { mount } from 'enzyme' -import toJson from 'enzyme-to-json' import React from 'react' import { Provider } from 'react-redux' import * as ModalAction from 'store/modal/modal.slice' @@ -28,49 +28,47 @@ jest.mock('react-router-dom', () => ({ describe('CozyBar component', () => { const store = createMockEcolyoStore() it('should be rendered correctly without without left arrow', () => { - const wrapper = mount( + const { container } = render( <Provider store={store}> <CozyBar /> </Provider> ) - expect(toJson(wrapper)).toMatchSnapshot() + expect(container).toMatchSnapshot() }) describe('should test displayBackArrow', () => { - it('should call navigate(-1) when back button is clicked and no function is provided', () => { - const wrapper = mount( + it('should call navigate(-1) when back button is clicked and no function is provided', async () => { + const { container } = render( <Provider store={store}> <CozyBar displayBackArrow={true} /> </Provider> ) - expect(toJson(wrapper)).toMatchSnapshot() - expect(wrapper.find('BarLeft')).toHaveLength(1) - wrapper.find('BarLeft').find('.cv-button').first().simulate('click') + expect(container).toMatchSnapshot() + await userEvent.click(screen.getAllByRole('button')[0]) expect(mockedNavigate).toHaveBeenCalled() }) - it('should call backFunction() when back button is clicked and function is provided', () => { + it('should call backFunction() when back button is clicked and function is provided', async () => { const mockBackFunction = jest.fn() - const wrapper = mount( + const { container } = render( <Provider store={store}> <CozyBar displayBackArrow={true} backFunction={mockBackFunction} /> </Provider> ) - expect(toJson(wrapper)).toMatchSnapshot() - expect(wrapper.find('BarLeft')).toHaveLength(1) - wrapper.find('BarLeft').find('.cv-button').first().simulate('click') + expect(container).toMatchSnapshot() + await userEvent.click(screen.getAllByRole('button')[0]) expect(mockBackFunction).toHaveBeenCalled() }) }) - it('should call handleClickFeedbacks when feedback button is clicked', () => { - const wrapper = mount( + it('should call handleClickFeedbacks when feedback button is clicked', async () => { + render( <Provider store={store}> <CozyBar /> </Provider> ) const updateModalSpy = jest.spyOn(ModalAction, 'openFeedbackModal') - wrapper.find('BarRight').find('.cv-button').first().simulate('click') + await userEvent.click(screen.getByRole('button')) expect(updateModalSpy).toHaveBeenCalledWith(true) }) @@ -78,12 +76,11 @@ describe('CozyBar component', () => { const store = createMockEcolyoStore({ global: { screenType: ScreenType.DESKTOP }, }) - const wrapper = mount( + const { container } = render( <Provider store={store}> <CozyBar /> </Provider> ) - // Snapshot should be empty - expect(toJson(wrapper)).toMatchSnapshot() + expect(container.firstChild).toBeNull() }) }) diff --git a/src/components/Header/__snapshots__/CozyBar.spec.tsx.snap b/src/components/Header/__snapshots__/CozyBar.spec.tsx.snap index 203c46d610d5c449180df735cdf3d35d193f911e..62521bfb18e6bd75e9438a5e7a5c2d1dce331a96 100644 --- a/src/components/Header/__snapshots__/CozyBar.spec.tsx.snap +++ b/src/components/Header/__snapshots__/CozyBar.spec.tsx.snap @@ -1,878 +1,163 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP exports[`CozyBar component should be rendered correctly without without left arrow 1`] = ` -<Provider - store={ - Object { - "clearActions": [Function], - "dispatch": [Function], - "getActions": [Function], - "getState": [Function], - "replaceReducer": [Function], - "subscribe": [Function], - } - } -> - <CozyBar> - <BarCenter> - <div - className="cozy-bar" - > - <span - className="app-title" - > - common.title_app - </span> - </div> - </BarCenter> - <BarRight> - <StyledIconButton - aria-label="header.accessibility.button_open_feedbacks" - className="cv-button" - icon="test-file-stub" - onClick={[Function]} - sized={22} +<div> + <div + class="cozy-bar" + > + <span + class="app-title" + > + common.title_app + </span> + </div> + <button + aria-label="header.accessibility.button_open_feedbacks" + class="MuiButtonBase-root MuiIconButton-root WithStyles(ForwardRef(IconButton))-root-1 cv-button" + tabindex="0" + type="button" + > + <span + class="MuiIconButton-label" + > + <svg + aria-hidden="true" + class="styles__icon___23x3R" + height="22" + width="22" > - <WithStyles(WithStyles(ForwardRef(IconButton))) - aria-label="header.accessibility.button_open_feedbacks" - className="cv-button" - onClick={[Function]} - > - <WithStyles(ForwardRef(IconButton)) - aria-label="header.accessibility.button_open_feedbacks" - className="cv-button" - classes={ - Object { - "root": "WithStyles(ForwardRef(IconButton))-root-1", - } - } - onClick={[Function]} - > - <ForwardRef(IconButton) - aria-label="header.accessibility.button_open_feedbacks" - className="cv-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 WithStyles(ForwardRef(IconButton))-root-1", - "sizeSmall": "MuiIconButton-sizeSmall", - } - } - onClick={[Function]} - > - <WithStyles(ForwardRef(ButtonBase)) - aria-label="header.accessibility.button_open_feedbacks" - centerRipple={true} - className="MuiIconButton-root WithStyles(ForwardRef(IconButton))-root-1 cv-button" - disabled={false} - focusRipple={true} - onClick={[Function]} - > - <ForwardRef(ButtonBase) - aria-label="header.accessibility.button_open_feedbacks" - centerRipple={true} - className="MuiIconButton-root WithStyles(ForwardRef(IconButton))-root-1 cv-button" - classes={ - Object { - "disabled": "Mui-disabled", - "focusVisible": "Mui-focusVisible", - "root": "MuiButtonBase-root", - } - } - disabled={false} - focusRipple={true} - onClick={[Function]} - > - <button - aria-label="header.accessibility.button_open_feedbacks" - className="MuiButtonBase-root MuiIconButton-root WithStyles(ForwardRef(IconButton))-root-1 cv-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" - > - <StyledIcon - icon="test-file-stub" - size={22} - > - <Icon - aria-hidden={true} - icon="test-file-stub" - size={22} - spin={false} - > - <Component - aria-hidden={true} - className="styles__icon___23x3R" - height={22} - style={Object {}} - width={22} - > - <svg - aria-hidden={true} - className="styles__icon___23x3R" - height={22} - style={Object {}} - width={22} - > - <use - xlinkHref="#test-file-stub" - /> - </svg> - </Component> - </Icon> - </StyledIcon> - </span> - <WithStyles(memo) - center={true} - > - <ForwardRef(TouchRipple) - center={true} - classes={ - Object { - "child": "MuiTouchRipple-child", - "childLeaving": "MuiTouchRipple-childLeaving", - "childPulsate": "MuiTouchRipple-childPulsate", - "ripple": "MuiTouchRipple-ripple", - "ripplePulsate": "MuiTouchRipple-ripplePulsate", - "rippleVisible": "MuiTouchRipple-rippleVisible", - "root": "MuiTouchRipple-root", - } - } - > - <span - className="MuiTouchRipple-root" - > - <TransitionGroup - childFactory={[Function]} - component={null} - exit={true} - /> - </span> - </ForwardRef(TouchRipple)> - </WithStyles(memo)> - </button> - </ForwardRef(ButtonBase)> - </WithStyles(ForwardRef(ButtonBase))> - </ForwardRef(IconButton)> - </WithStyles(ForwardRef(IconButton))> - </WithStyles(WithStyles(ForwardRef(IconButton)))> - </StyledIconButton> - </BarRight> - </CozyBar> -</Provider> -`; - -exports[`CozyBar component should not be rendered with screen type different from mobile 1`] = ` -<Provider - store={ - Object { - "clearActions": [Function], - "dispatch": [Function], - "getActions": [Function], - "getState": [Function], - "replaceReducer": [Function], - "subscribe": [Function], - } - } -> - <CozyBar /> -</Provider> + <use + xlink:href="#test-file-stub" + /> + </svg> + </span> + <span + class="MuiTouchRipple-root" + /> + </button> +</div> `; exports[`CozyBar component should test displayBackArrow should call backFunction() when back button is clicked and function is provided 1`] = ` -<Provider - store={ - Object { - "clearActions": [Function], - "dispatch": [Function], - "getActions": [Function], - "getState": [Function], - "replaceReducer": [Function], - "subscribe": [Function], - } - } -> - <CozyBar - backFunction={[MockFunction]} - displayBackArrow={true} +<div> + <button + aria-label="header.accessibility.button_back" + class="MuiButtonBase-root MuiIconButton-root WithStyles(ForwardRef(IconButton))-root-3 cv-button" + tabindex="0" + type="button" > - <BarLeft> - <StyledIconButton - aria-label="header.accessibility.button_back" - className="cv-button" - icon="test-file-stub" - onClick={[Function]} - > - <WithStyles(WithStyles(ForwardRef(IconButton))) - aria-label="header.accessibility.button_back" - className="cv-button" - onClick={[Function]} - > - <WithStyles(ForwardRef(IconButton)) - aria-label="header.accessibility.button_back" - className="cv-button" - classes={ - Object { - "root": "WithStyles(ForwardRef(IconButton))-root-1", - } - } - onClick={[Function]} - > - <ForwardRef(IconButton) - aria-label="header.accessibility.button_back" - className="cv-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 WithStyles(ForwardRef(IconButton))-root-1", - "sizeSmall": "MuiIconButton-sizeSmall", - } - } - onClick={[Function]} - > - <WithStyles(ForwardRef(ButtonBase)) - aria-label="header.accessibility.button_back" - centerRipple={true} - className="MuiIconButton-root WithStyles(ForwardRef(IconButton))-root-1 cv-button" - disabled={false} - focusRipple={true} - onClick={[Function]} - > - <ForwardRef(ButtonBase) - aria-label="header.accessibility.button_back" - centerRipple={true} - className="MuiIconButton-root WithStyles(ForwardRef(IconButton))-root-1 cv-button" - classes={ - Object { - "disabled": "Mui-disabled", - "focusVisible": "Mui-focusVisible", - "root": "MuiButtonBase-root", - } - } - disabled={false} - focusRipple={true} - onClick={[Function]} - > - <button - aria-label="header.accessibility.button_back" - className="MuiButtonBase-root MuiIconButton-root WithStyles(ForwardRef(IconButton))-root-1 cv-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" - > - <StyledIcon - icon="test-file-stub" - size={16} - > - <Icon - aria-hidden={true} - icon="test-file-stub" - size={16} - spin={false} - > - <Component - aria-hidden={true} - className="styles__icon___23x3R" - height={16} - style={Object {}} - width={16} - > - <svg - aria-hidden={true} - className="styles__icon___23x3R" - height={16} - style={Object {}} - width={16} - > - <use - xlinkHref="#test-file-stub" - /> - </svg> - </Component> - </Icon> - </StyledIcon> - </span> - <WithStyles(memo) - center={true} - > - <ForwardRef(TouchRipple) - center={true} - classes={ - Object { - "child": "MuiTouchRipple-child", - "childLeaving": "MuiTouchRipple-childLeaving", - "childPulsate": "MuiTouchRipple-childPulsate", - "ripple": "MuiTouchRipple-ripple", - "ripplePulsate": "MuiTouchRipple-ripplePulsate", - "rippleVisible": "MuiTouchRipple-rippleVisible", - "root": "MuiTouchRipple-root", - } - } - > - <span - className="MuiTouchRipple-root" - > - <TransitionGroup - childFactory={[Function]} - component={null} - exit={true} - /> - </span> - </ForwardRef(TouchRipple)> - </WithStyles(memo)> - </button> - </ForwardRef(ButtonBase)> - </WithStyles(ForwardRef(ButtonBase))> - </ForwardRef(IconButton)> - </WithStyles(ForwardRef(IconButton))> - </WithStyles(WithStyles(ForwardRef(IconButton)))> - </StyledIconButton> - </BarLeft> - <BarCenter> - <div - className="cozy-bar" + <span + class="MuiIconButton-label" + > + <svg + aria-hidden="true" + class="styles__icon___23x3R" + height="16" + width="16" > - <span - className="app-title" - > - common.title_app - </span> - </div> - </BarCenter> - <BarRight> - <StyledIconButton - aria-label="header.accessibility.button_open_feedbacks" - className="cv-button" - icon="test-file-stub" - onClick={[Function]} - sized={22} + <use + xlink:href="#test-file-stub" + /> + </svg> + </span> + <span + class="MuiTouchRipple-root" + /> + </button> + <div + class="cozy-bar" + > + <span + class="app-title" + > + common.title_app + </span> + </div> + <button + aria-label="header.accessibility.button_open_feedbacks" + class="MuiButtonBase-root MuiIconButton-root WithStyles(ForwardRef(IconButton))-root-3 cv-button" + tabindex="0" + type="button" + > + <span + class="MuiIconButton-label" + > + <svg + aria-hidden="true" + class="styles__icon___23x3R" + height="22" + width="22" > - <WithStyles(WithStyles(ForwardRef(IconButton))) - aria-label="header.accessibility.button_open_feedbacks" - className="cv-button" - onClick={[Function]} - > - <WithStyles(ForwardRef(IconButton)) - aria-label="header.accessibility.button_open_feedbacks" - className="cv-button" - classes={ - Object { - "root": "WithStyles(ForwardRef(IconButton))-root-1", - } - } - onClick={[Function]} - > - <ForwardRef(IconButton) - aria-label="header.accessibility.button_open_feedbacks" - className="cv-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 WithStyles(ForwardRef(IconButton))-root-1", - "sizeSmall": "MuiIconButton-sizeSmall", - } - } - onClick={[Function]} - > - <WithStyles(ForwardRef(ButtonBase)) - aria-label="header.accessibility.button_open_feedbacks" - centerRipple={true} - className="MuiIconButton-root WithStyles(ForwardRef(IconButton))-root-1 cv-button" - disabled={false} - focusRipple={true} - onClick={[Function]} - > - <ForwardRef(ButtonBase) - aria-label="header.accessibility.button_open_feedbacks" - centerRipple={true} - className="MuiIconButton-root WithStyles(ForwardRef(IconButton))-root-1 cv-button" - classes={ - Object { - "disabled": "Mui-disabled", - "focusVisible": "Mui-focusVisible", - "root": "MuiButtonBase-root", - } - } - disabled={false} - focusRipple={true} - onClick={[Function]} - > - <button - aria-label="header.accessibility.button_open_feedbacks" - className="MuiButtonBase-root MuiIconButton-root WithStyles(ForwardRef(IconButton))-root-1 cv-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" - > - <StyledIcon - icon="test-file-stub" - size={22} - > - <Icon - aria-hidden={true} - icon="test-file-stub" - size={22} - spin={false} - > - <Component - aria-hidden={true} - className="styles__icon___23x3R" - height={22} - style={Object {}} - width={22} - > - <svg - aria-hidden={true} - className="styles__icon___23x3R" - height={22} - style={Object {}} - width={22} - > - <use - xlinkHref="#test-file-stub" - /> - </svg> - </Component> - </Icon> - </StyledIcon> - </span> - <WithStyles(memo) - center={true} - > - <ForwardRef(TouchRipple) - center={true} - classes={ - Object { - "child": "MuiTouchRipple-child", - "childLeaving": "MuiTouchRipple-childLeaving", - "childPulsate": "MuiTouchRipple-childPulsate", - "ripple": "MuiTouchRipple-ripple", - "ripplePulsate": "MuiTouchRipple-ripplePulsate", - "rippleVisible": "MuiTouchRipple-rippleVisible", - "root": "MuiTouchRipple-root", - } - } - > - <span - className="MuiTouchRipple-root" - > - <TransitionGroup - childFactory={[Function]} - component={null} - exit={true} - /> - </span> - </ForwardRef(TouchRipple)> - </WithStyles(memo)> - </button> - </ForwardRef(ButtonBase)> - </WithStyles(ForwardRef(ButtonBase))> - </ForwardRef(IconButton)> - </WithStyles(ForwardRef(IconButton))> - </WithStyles(WithStyles(ForwardRef(IconButton)))> - </StyledIconButton> - </BarRight> - </CozyBar> -</Provider> + <use + xlink:href="#test-file-stub" + /> + </svg> + </span> + <span + class="MuiTouchRipple-root" + /> + </button> +</div> `; exports[`CozyBar component should test displayBackArrow should call navigate(-1) when back button is clicked and no function is provided 1`] = ` -<Provider - store={ - Object { - "clearActions": [Function], - "dispatch": [Function], - "getActions": [Function], - "getState": [Function], - "replaceReducer": [Function], - "subscribe": [Function], - } - } -> - <CozyBar - displayBackArrow={true} +<div> + <button + aria-label="header.accessibility.button_back" + class="MuiButtonBase-root MuiIconButton-root WithStyles(ForwardRef(IconButton))-root-2 cv-button" + tabindex="0" + type="button" > - <BarLeft> - <StyledIconButton - aria-label="header.accessibility.button_back" - className="cv-button" - icon="test-file-stub" - onClick={[Function]} - > - <WithStyles(WithStyles(ForwardRef(IconButton))) - aria-label="header.accessibility.button_back" - className="cv-button" - onClick={[Function]} - > - <WithStyles(ForwardRef(IconButton)) - aria-label="header.accessibility.button_back" - className="cv-button" - classes={ - Object { - "root": "WithStyles(ForwardRef(IconButton))-root-1", - } - } - onClick={[Function]} - > - <ForwardRef(IconButton) - aria-label="header.accessibility.button_back" - className="cv-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 WithStyles(ForwardRef(IconButton))-root-1", - "sizeSmall": "MuiIconButton-sizeSmall", - } - } - onClick={[Function]} - > - <WithStyles(ForwardRef(ButtonBase)) - aria-label="header.accessibility.button_back" - centerRipple={true} - className="MuiIconButton-root WithStyles(ForwardRef(IconButton))-root-1 cv-button" - disabled={false} - focusRipple={true} - onClick={[Function]} - > - <ForwardRef(ButtonBase) - aria-label="header.accessibility.button_back" - centerRipple={true} - className="MuiIconButton-root WithStyles(ForwardRef(IconButton))-root-1 cv-button" - classes={ - Object { - "disabled": "Mui-disabled", - "focusVisible": "Mui-focusVisible", - "root": "MuiButtonBase-root", - } - } - disabled={false} - focusRipple={true} - onClick={[Function]} - > - <button - aria-label="header.accessibility.button_back" - className="MuiButtonBase-root MuiIconButton-root WithStyles(ForwardRef(IconButton))-root-1 cv-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" - > - <StyledIcon - icon="test-file-stub" - size={16} - > - <Icon - aria-hidden={true} - icon="test-file-stub" - size={16} - spin={false} - > - <Component - aria-hidden={true} - className="styles__icon___23x3R" - height={16} - style={Object {}} - width={16} - > - <svg - aria-hidden={true} - className="styles__icon___23x3R" - height={16} - style={Object {}} - width={16} - > - <use - xlinkHref="#test-file-stub" - /> - </svg> - </Component> - </Icon> - </StyledIcon> - </span> - <WithStyles(memo) - center={true} - > - <ForwardRef(TouchRipple) - center={true} - classes={ - Object { - "child": "MuiTouchRipple-child", - "childLeaving": "MuiTouchRipple-childLeaving", - "childPulsate": "MuiTouchRipple-childPulsate", - "ripple": "MuiTouchRipple-ripple", - "ripplePulsate": "MuiTouchRipple-ripplePulsate", - "rippleVisible": "MuiTouchRipple-rippleVisible", - "root": "MuiTouchRipple-root", - } - } - > - <span - className="MuiTouchRipple-root" - > - <TransitionGroup - childFactory={[Function]} - component={null} - exit={true} - /> - </span> - </ForwardRef(TouchRipple)> - </WithStyles(memo)> - </button> - </ForwardRef(ButtonBase)> - </WithStyles(ForwardRef(ButtonBase))> - </ForwardRef(IconButton)> - </WithStyles(ForwardRef(IconButton))> - </WithStyles(WithStyles(ForwardRef(IconButton)))> - </StyledIconButton> - </BarLeft> - <BarCenter> - <div - className="cozy-bar" + <span + class="MuiIconButton-label" + > + <svg + aria-hidden="true" + class="styles__icon___23x3R" + height="16" + width="16" > - <span - className="app-title" - > - common.title_app - </span> - </div> - </BarCenter> - <BarRight> - <StyledIconButton - aria-label="header.accessibility.button_open_feedbacks" - className="cv-button" - icon="test-file-stub" - onClick={[Function]} - sized={22} + <use + xlink:href="#test-file-stub" + /> + </svg> + </span> + <span + class="MuiTouchRipple-root" + /> + </button> + <div + class="cozy-bar" + > + <span + class="app-title" + > + common.title_app + </span> + </div> + <button + aria-label="header.accessibility.button_open_feedbacks" + class="MuiButtonBase-root MuiIconButton-root WithStyles(ForwardRef(IconButton))-root-2 cv-button" + tabindex="0" + type="button" + > + <span + class="MuiIconButton-label" + > + <svg + aria-hidden="true" + class="styles__icon___23x3R" + height="22" + width="22" > - <WithStyles(WithStyles(ForwardRef(IconButton))) - aria-label="header.accessibility.button_open_feedbacks" - className="cv-button" - onClick={[Function]} - > - <WithStyles(ForwardRef(IconButton)) - aria-label="header.accessibility.button_open_feedbacks" - className="cv-button" - classes={ - Object { - "root": "WithStyles(ForwardRef(IconButton))-root-1", - } - } - onClick={[Function]} - > - <ForwardRef(IconButton) - aria-label="header.accessibility.button_open_feedbacks" - className="cv-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 WithStyles(ForwardRef(IconButton))-root-1", - "sizeSmall": "MuiIconButton-sizeSmall", - } - } - onClick={[Function]} - > - <WithStyles(ForwardRef(ButtonBase)) - aria-label="header.accessibility.button_open_feedbacks" - centerRipple={true} - className="MuiIconButton-root WithStyles(ForwardRef(IconButton))-root-1 cv-button" - disabled={false} - focusRipple={true} - onClick={[Function]} - > - <ForwardRef(ButtonBase) - aria-label="header.accessibility.button_open_feedbacks" - centerRipple={true} - className="MuiIconButton-root WithStyles(ForwardRef(IconButton))-root-1 cv-button" - classes={ - Object { - "disabled": "Mui-disabled", - "focusVisible": "Mui-focusVisible", - "root": "MuiButtonBase-root", - } - } - disabled={false} - focusRipple={true} - onClick={[Function]} - > - <button - aria-label="header.accessibility.button_open_feedbacks" - className="MuiButtonBase-root MuiIconButton-root WithStyles(ForwardRef(IconButton))-root-1 cv-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" - > - <StyledIcon - icon="test-file-stub" - size={22} - > - <Icon - aria-hidden={true} - icon="test-file-stub" - size={22} - spin={false} - > - <Component - aria-hidden={true} - className="styles__icon___23x3R" - height={22} - style={Object {}} - width={22} - > - <svg - aria-hidden={true} - className="styles__icon___23x3R" - height={22} - style={Object {}} - width={22} - > - <use - xlinkHref="#test-file-stub" - /> - </svg> - </Component> - </Icon> - </StyledIcon> - </span> - <WithStyles(memo) - center={true} - > - <ForwardRef(TouchRipple) - center={true} - classes={ - Object { - "child": "MuiTouchRipple-child", - "childLeaving": "MuiTouchRipple-childLeaving", - "childPulsate": "MuiTouchRipple-childPulsate", - "ripple": "MuiTouchRipple-ripple", - "ripplePulsate": "MuiTouchRipple-ripplePulsate", - "rippleVisible": "MuiTouchRipple-rippleVisible", - "root": "MuiTouchRipple-root", - } - } - > - <span - className="MuiTouchRipple-root" - > - <TransitionGroup - childFactory={[Function]} - component={null} - exit={true} - /> - </span> - </ForwardRef(TouchRipple)> - </WithStyles(memo)> - </button> - </ForwardRef(ButtonBase)> - </WithStyles(ForwardRef(ButtonBase))> - </ForwardRef(IconButton)> - </WithStyles(ForwardRef(IconButton))> - </WithStyles(WithStyles(ForwardRef(IconButton)))> - </StyledIconButton> - </BarRight> - </CozyBar> -</Provider> + <use + xlink:href="#test-file-stub" + /> + </svg> + </span> + <span + class="MuiTouchRipple-root" + /> + </button> +</div> `; diff --git a/src/components/Konnector/ConnectionNotFound/ConnectionNotFound.spec.tsx b/src/components/Konnector/ConnectionNotFound/ConnectionNotFound.spec.tsx index 833e33dc19b4839b433c70015fd3a133a3f7796e..1d4cf06cba60acf8e3a9e649986e10dd30811097 100644 --- a/src/components/Konnector/ConnectionNotFound/ConnectionNotFound.spec.tsx +++ b/src/components/Konnector/ConnectionNotFound/ConnectionNotFound.spec.tsx @@ -1,6 +1,5 @@ import { render, screen } from '@testing-library/react' import { userEvent } from '@testing-library/user-event' -import { shallow } from 'enzyme' import React from 'react' import ConnectionNotFound from './ConnectionNotFound' @@ -8,10 +7,10 @@ describe('ConnectionNotFound component test', () => { const konnectorSlug = 'enedissgegrandlyon' it('should correctly render connection not found', () => { - const result = shallow( + const { container } = render( <ConnectionNotFound konnectorSlug={konnectorSlug} /> - ).getElement() - expect(result).toMatchSnapshot() + ) + expect(container).toMatchSnapshot() }) it('should open konnector url when button is clicked', async () => { diff --git a/src/components/Konnector/ConnectionNotFound/__snapshots__/ConnectionNotFound.spec.tsx.snap b/src/components/Konnector/ConnectionNotFound/__snapshots__/ConnectionNotFound.spec.tsx.snap index fcb5b55986162a92315f86cc0e6968ec4292b840..e3e1d23e59102345c596a30982a453feb8d8b667 100644 --- a/src/components/Konnector/ConnectionNotFound/__snapshots__/ConnectionNotFound.spec.tsx.snap +++ b/src/components/Konnector/ConnectionNotFound/__snapshots__/ConnectionNotFound.spec.tsx.snap @@ -1,25 +1,35 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP exports[`ConnectionNotFound component test should correctly render connection not found 1`] = ` -<div - className="knotfound" -> +<div> <div - className="knotfound-text" + class="knotfound" > - - konnector_form.not_installed - </div> - <div - className="knotfound-button" - > - <WithStyles(ForwardRef(Button)) - aria-label="konnector_form.accessibility.button_install" - className="btnPrimary" - onClick={[Function]} + <div + class="knotfound-text" + > + + konnector_form.not_installed + </div> + <div + class="knotfound-button" > - konnector_form.button_install - </WithStyles(ForwardRef(Button))> + <button + aria-label="konnector_form.accessibility.button_install" + class="MuiButtonBase-root MuiButton-root MuiButton-text btnPrimary" + tabindex="0" + type="button" + > + <span + class="MuiButton-label" + > + konnector_form.button_install + </span> + <span + class="MuiTouchRipple-root" + /> + </button> + </div> </div> </div> `; diff --git a/src/components/Konnector/KonnectorModal.spec.tsx b/src/components/Konnector/KonnectorModal.spec.tsx index 16058156c8e0c4098093f87205c4bfb4fda7a24d..cc72f6b71ae36a23d8600d26eecd55e8dcfacbc0 100644 --- a/src/components/Konnector/KonnectorModal.spec.tsx +++ b/src/components/Konnector/KonnectorModal.spec.tsx @@ -1,8 +1,6 @@ import { render, screen } from '@testing-library/react' import userEvent from '@testing-library/user-event' import { FluidType, KonnectorError } from 'enums' -import { mount } from 'enzyme' -import toJson from 'enzyme-to-json' import React from 'react' import { Provider } from 'react-redux' import { createMockEcolyoStore } from 'tests/__mocks__/store' @@ -16,7 +14,7 @@ describe('KonnectorModal component', () => { jest.clearAllMocks() }) it('should be rendered correctly', () => { - const wrapper = mount( + const { baseElement } = render( <Provider store={store}> <KonnectorModal open={true} @@ -31,7 +29,7 @@ describe('KonnectorModal component', () => { /> </Provider> ) - expect(toJson(wrapper)).toMatchSnapshot() + expect(baseElement).toMatchSnapshot() }) it('should be with updating text', () => { const { baseElement } = render( diff --git a/src/components/Konnector/KonnectorModalFooter.spec.tsx b/src/components/Konnector/KonnectorModalFooter.spec.tsx index 23b1774e1beec4efaa1a2a129a6c62c14fae7a82..6812381cb58d828a5f1feba671e84ffa0998a615 100644 --- a/src/components/Konnector/KonnectorModalFooter.spec.tsx +++ b/src/components/Konnector/KonnectorModalFooter.spec.tsx @@ -2,8 +2,6 @@ import { render, screen } from '@testing-library/react' import userEvent from '@testing-library/user-event' import { ERROR_EVENT } from 'cozy-harvest-lib/dist/models/flowEvents' import { KonnectorError } from 'enums' -import { mount } from 'enzyme' -import toJson from 'enzyme-to-json' import React from 'react' import { Provider } from 'react-redux' import { accountsData } from 'tests/__mocks__/accountsData.mock' @@ -24,7 +22,7 @@ describe('KonnectorModalFooter component', () => { }) it('should be rendered correctly', () => { - const wrapper = mount( + const { container } = render( <Provider store={store}> <KonnectorModalFooter state={null} @@ -36,7 +34,7 @@ describe('KonnectorModalFooter component', () => { /> </Provider> ) - expect(toJson(wrapper)).toMatchSnapshot() + expect(container).toMatchSnapshot() }) it('should render "understood" for enedis sge when postal code not supported (USER_ACTION_NEEDED)', () => { diff --git a/src/components/Konnector/KonnectorViewerList.spec.tsx b/src/components/Konnector/KonnectorViewerList.spec.tsx index d5039d1915c0796a43eba3cb712e23713f018069..810bd21bbc68243dd8c51fc1405db101f94b022b 100644 --- a/src/components/Konnector/KonnectorViewerList.spec.tsx +++ b/src/components/Konnector/KonnectorViewerList.spec.tsx @@ -1,11 +1,8 @@ import { render, screen } from '@testing-library/react' import userEvent from '@testing-library/user-event' -import { mount } from 'enzyme' -import toJson from 'enzyme-to-json' import React from 'react' import { Provider } from 'react-redux' import { createMockEcolyoStore } from 'tests/__mocks__/store' -import { waitForComponentToPaint } from 'tests/__mocks__/testUtils' import KonnectorViewerList from './KonnectorViewerList' const mockedNavigate = jest.fn() @@ -18,13 +15,12 @@ describe('KonnectorViewerList component', () => { const store = createMockEcolyoStore() it('should be rendered correctly', async () => { - const wrapper = mount( + const { container } = render( <Provider store={store}> <KonnectorViewerList /> </Provider> ) - await waitForComponentToPaint(wrapper) - expect(toJson(wrapper)).toMatchSnapshot() + expect(container).toMatchSnapshot() }) it('should click on card and nav to fluid', async () => { render( diff --git a/src/components/Konnector/__snapshots__/KonnectorModal.spec.tsx.snap b/src/components/Konnector/__snapshots__/KonnectorModal.spec.tsx.snap index 7fa1dbb1615dcc28d8740dd163daec49aa78dfd0..e4f491c9845a8ee9dd936e89f86e8bdf7412c2ec 100644 --- a/src/components/Konnector/__snapshots__/KonnectorModal.spec.tsx.snap +++ b/src/components/Konnector/__snapshots__/KonnectorModal.spec.tsx.snap @@ -1,983 +1,200 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP exports[`KonnectorModal component should be rendered correctly 1`] = ` -<Provider - store={ - Object { - "clearActions": [Function], - "dispatch": [Function], - "getActions": [Function], - "getState": [Function], - "replaceReducer": [Function], - "subscribe": [Function], - } - } +<body + style="padding-right: 0px; overflow: hidden;" > - <KonnectorModal - account={null} - error={null} - fluidType={0} - handleAccountDeletion={[MockFunction]} - handleCloseClick={[MockFunction]} - isLogging={false} - isUpdating={false} - open={true} - state={null} + <div + aria-hidden="true" + /> + <div + class="MuiDialog-root modal-root" + role="presentation" + style="position: fixed; z-index: 1300; right: 0px; bottom: 0px; top: 0px; left: 0px;" > - <WithStyles(ForwardRef(Dialog)) - aria-labelledby="accessibility-title" - classes={ - Object { - "paper": "modal-paper", - "root": "modal-root", - } - } - disableEscapeKeyDown={true} - onClose={[Function]} - open={true} + <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" > - <ForwardRef(Dialog) + <div aria-labelledby="accessibility-title" - classes={ - Object { - "container": "MuiDialog-container", - "paper": "MuiDialog-paper modal-paper", - "paperFullScreen": "MuiDialog-paperFullScreen", - "paperFullWidth": "MuiDialog-paperFullWidth", - "paperScrollBody": "MuiDialog-paperScrollBody", - "paperScrollPaper": "MuiDialog-paperScrollPaper", - "paperWidthFalse": "MuiDialog-paperWidthFalse", - "paperWidthLg": "MuiDialog-paperWidthLg", - "paperWidthMd": "MuiDialog-paperWidthMd", - "paperWidthSm": "MuiDialog-paperWidthSm", - "paperWidthXl": "MuiDialog-paperWidthXl", - "paperWidthXs": "MuiDialog-paperWidthXs", - "root": "MuiDialog-root modal-root", - "scrollBody": "MuiDialog-scrollBody", - "scrollPaper": "MuiDialog-scrollPaper", - } - } - disableEscapeKeyDown={true} - onClose={[Function]} - open={true} + class="MuiPaper-root MuiDialog-paper modal-paper MuiDialog-paperScrollPaper MuiDialog-paperWidthSm MuiPaper-elevation24 MuiPaper-rounded" + role="dialog" > - <ForwardRef(Modal) - BackdropComponent={ - Object { - "$$typeof": Symbol(react.forward_ref), - "Naked": Object { - "$$typeof": Symbol(react.forward_ref), - "propTypes": Object { - "children": [Function], - "className": [Function], - "classes": [Function], - "invisible": [Function], - "open": [Function], - "transitionDuration": [Function], - }, - "render": [Function], - }, - "displayName": "WithStyles(ForwardRef(Backdrop))", - "options": Object { - "defaultTheme": Object { - "breakpoints": Object { - "between": [Function], - "down": [Function], - "keys": Array [ - "xs", - "sm", - "md", - "lg", - "xl", - ], - "only": [Function], - "up": [Function], - "values": Object { - "lg": 1280, - "md": 960, - "sm": 600, - "xl": 1920, - "xs": 0, - }, - "width": [Function], - }, - "direction": "ltr", - "mixins": Object { - "gutters": [Function], - "toolbar": Object { - "@media (min-width:0px) and (orientation: landscape)": Object { - "minHeight": 48, - }, - "@media (min-width:600px)": Object { - "minHeight": 64, - }, - "minHeight": 56, - }, - }, - "overrides": Object {}, - "palette": Object { - "action": Object { - "activatedOpacity": 0.12, - "active": "rgba(0, 0, 0, 0.54)", - "disabled": "rgba(0, 0, 0, 0.26)", - "disabledBackground": "rgba(0, 0, 0, 0.12)", - "disabledOpacity": 0.38, - "focus": "rgba(0, 0, 0, 0.12)", - "focusOpacity": 0.12, - "hover": "rgba(0, 0, 0, 0.04)", - "hoverOpacity": 0.04, - "selected": "rgba(0, 0, 0, 0.08)", - "selectedOpacity": 0.08, - }, - "augmentColor": [Function], - "background": Object { - "default": "#fafafa", - "paper": "#fff", - }, - "common": Object { - "black": "#000", - "white": "#fff", - }, - "contrastThreshold": 3, - "divider": "rgba(0, 0, 0, 0.12)", - "error": Object { - "contrastText": "#fff", - "dark": "#d32f2f", - "light": "#e57373", - "main": "#f44336", - }, - "getContrastText": [Function], - "grey": Object { - "100": "#f5f5f5", - "200": "#eeeeee", - "300": "#e0e0e0", - "400": "#bdbdbd", - "50": "#fafafa", - "500": "#9e9e9e", - "600": "#757575", - "700": "#616161", - "800": "#424242", - "900": "#212121", - "A100": "#d5d5d5", - "A200": "#aaaaaa", - "A400": "#303030", - "A700": "#616161", - }, - "info": Object { - "contrastText": "#fff", - "dark": "#1976d2", - "light": "#64b5f6", - "main": "#2196f3", - }, - "primary": Object { - "contrastText": "#fff", - "dark": "#303f9f", - "light": "#7986cb", - "main": "#3f51b5", - }, - "secondary": Object { - "contrastText": "#fff", - "dark": "#c51162", - "light": "#ff4081", - "main": "#f50057", - }, - "success": Object { - "contrastText": "rgba(0, 0, 0, 0.87)", - "dark": "#388e3c", - "light": "#81c784", - "main": "#4caf50", - }, - "text": Object { - "disabled": "rgba(0, 0, 0, 0.38)", - "hint": "rgba(0, 0, 0, 0.38)", - "primary": "rgba(0, 0, 0, 0.87)", - "secondary": "rgba(0, 0, 0, 0.54)", - }, - "tonalOffset": 0.2, - "type": "light", - "warning": Object { - "contrastText": "rgba(0, 0, 0, 0.87)", - "dark": "#f57c00", - "light": "#ffb74d", - "main": "#ff9800", - }, - }, - "props": Object {}, - "shadows": Array [ - "none", - "0px 2px 1px -1px rgba(0,0,0,0.2),0px 1px 1px 0px rgba(0,0,0,0.14),0px 1px 3px 0px rgba(0,0,0,0.12)", - "0px 3px 1px -2px rgba(0,0,0,0.2),0px 2px 2px 0px rgba(0,0,0,0.14),0px 1px 5px 0px rgba(0,0,0,0.12)", - "0px 3px 3px -2px rgba(0,0,0,0.2),0px 3px 4px 0px rgba(0,0,0,0.14),0px 1px 8px 0px rgba(0,0,0,0.12)", - "0px 2px 4px -1px rgba(0,0,0,0.2),0px 4px 5px 0px rgba(0,0,0,0.14),0px 1px 10px 0px rgba(0,0,0,0.12)", - "0px 3px 5px -1px rgba(0,0,0,0.2),0px 5px 8px 0px rgba(0,0,0,0.14),0px 1px 14px 0px rgba(0,0,0,0.12)", - "0px 3px 5px -1px rgba(0,0,0,0.2),0px 6px 10px 0px rgba(0,0,0,0.14),0px 1px 18px 0px rgba(0,0,0,0.12)", - "0px 4px 5px -2px rgba(0,0,0,0.2),0px 7px 10px 1px rgba(0,0,0,0.14),0px 2px 16px 1px rgba(0,0,0,0.12)", - "0px 5px 5px -3px rgba(0,0,0,0.2),0px 8px 10px 1px rgba(0,0,0,0.14),0px 3px 14px 2px rgba(0,0,0,0.12)", - "0px 5px 6px -3px rgba(0,0,0,0.2),0px 9px 12px 1px rgba(0,0,0,0.14),0px 3px 16px 2px rgba(0,0,0,0.12)", - "0px 6px 6px -3px rgba(0,0,0,0.2),0px 10px 14px 1px rgba(0,0,0,0.14),0px 4px 18px 3px rgba(0,0,0,0.12)", - "0px 6px 7px -4px rgba(0,0,0,0.2),0px 11px 15px 1px rgba(0,0,0,0.14),0px 4px 20px 3px rgba(0,0,0,0.12)", - "0px 7px 8px -4px rgba(0,0,0,0.2),0px 12px 17px 2px rgba(0,0,0,0.14),0px 5px 22px 4px rgba(0,0,0,0.12)", - "0px 7px 8px -4px rgba(0,0,0,0.2),0px 13px 19px 2px rgba(0,0,0,0.14),0px 5px 24px 4px rgba(0,0,0,0.12)", - "0px 7px 9px -4px rgba(0,0,0,0.2),0px 14px 21px 2px rgba(0,0,0,0.14),0px 5px 26px 4px rgba(0,0,0,0.12)", - "0px 8px 9px -5px rgba(0,0,0,0.2),0px 15px 22px 2px rgba(0,0,0,0.14),0px 6px 28px 5px rgba(0,0,0,0.12)", - "0px 8px 10px -5px rgba(0,0,0,0.2),0px 16px 24px 2px rgba(0,0,0,0.14),0px 6px 30px 5px rgba(0,0,0,0.12)", - "0px 8px 11px -5px rgba(0,0,0,0.2),0px 17px 26px 2px rgba(0,0,0,0.14),0px 6px 32px 5px rgba(0,0,0,0.12)", - "0px 9px 11px -5px rgba(0,0,0,0.2),0px 18px 28px 2px rgba(0,0,0,0.14),0px 7px 34px 6px rgba(0,0,0,0.12)", - "0px 9px 12px -6px rgba(0,0,0,0.2),0px 19px 29px 2px rgba(0,0,0,0.14),0px 7px 36px 6px rgba(0,0,0,0.12)", - "0px 10px 13px -6px rgba(0,0,0,0.2),0px 20px 31px 3px rgba(0,0,0,0.14),0px 8px 38px 7px rgba(0,0,0,0.12)", - "0px 10px 13px -6px rgba(0,0,0,0.2),0px 21px 33px 3px rgba(0,0,0,0.14),0px 8px 40px 7px rgba(0,0,0,0.12)", - "0px 10px 14px -6px rgba(0,0,0,0.2),0px 22px 35px 3px rgba(0,0,0,0.14),0px 8px 42px 7px rgba(0,0,0,0.12)", - "0px 11px 14px -7px rgba(0,0,0,0.2),0px 23px 36px 3px rgba(0,0,0,0.14),0px 9px 44px 8px rgba(0,0,0,0.12)", - "0px 11px 15px -7px rgba(0,0,0,0.2),0px 24px 38px 3px rgba(0,0,0,0.14),0px 9px 46px 8px rgba(0,0,0,0.12)", - ], - "shape": Object { - "borderRadius": 4, - }, - "spacing": [Function], - "transitions": Object { - "create": [Function], - "duration": Object { - "complex": 375, - "enteringScreen": 225, - "leavingScreen": 195, - "short": 250, - "shorter": 200, - "shortest": 150, - "standard": 300, - }, - "easing": Object { - "easeIn": "cubic-bezier(0.4, 0, 1, 1)", - "easeInOut": "cubic-bezier(0.4, 0, 0.2, 1)", - "easeOut": "cubic-bezier(0.0, 0, 0.2, 1)", - "sharp": "cubic-bezier(0.4, 0, 0.6, 1)", - }, - "getAutoHeightDuration": [Function], - }, - "typography": Object { - "body1": Object { - "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif", - "fontSize": "1rem", - "fontWeight": 400, - "letterSpacing": "0.00938em", - "lineHeight": 1.5, - }, - "body2": Object { - "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif", - "fontSize": "0.875rem", - "fontWeight": 400, - "letterSpacing": "0.01071em", - "lineHeight": 1.43, - }, - "button": Object { - "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif", - "fontSize": "0.875rem", - "fontWeight": 500, - "letterSpacing": "0.02857em", - "lineHeight": 1.75, - "textTransform": "uppercase", - }, - "caption": Object { - "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif", - "fontSize": "0.75rem", - "fontWeight": 400, - "letterSpacing": "0.03333em", - "lineHeight": 1.66, - }, - "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif", - "fontSize": 14, - "fontWeightBold": 700, - "fontWeightLight": 300, - "fontWeightMedium": 500, - "fontWeightRegular": 400, - "h1": Object { - "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif", - "fontSize": "6rem", - "fontWeight": 300, - "letterSpacing": "-0.01562em", - "lineHeight": 1.167, - }, - "h2": Object { - "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif", - "fontSize": "3.75rem", - "fontWeight": 300, - "letterSpacing": "-0.00833em", - "lineHeight": 1.2, - }, - "h3": Object { - "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif", - "fontSize": "3rem", - "fontWeight": 400, - "letterSpacing": "0em", - "lineHeight": 1.167, - }, - "h4": Object { - "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif", - "fontSize": "2.125rem", - "fontWeight": 400, - "letterSpacing": "0.00735em", - "lineHeight": 1.235, - }, - "h5": Object { - "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif", - "fontSize": "1.5rem", - "fontWeight": 400, - "letterSpacing": "0em", - "lineHeight": 1.334, - }, - "h6": Object { - "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif", - "fontSize": "1.25rem", - "fontWeight": 500, - "letterSpacing": "0.0075em", - "lineHeight": 1.6, - }, - "htmlFontSize": 16, - "overline": Object { - "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif", - "fontSize": "0.75rem", - "fontWeight": 400, - "letterSpacing": "0.08333em", - "lineHeight": 2.66, - "textTransform": "uppercase", - }, - "pxToRem": [Function], - "round": [Function], - "subtitle1": Object { - "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif", - "fontSize": "1rem", - "fontWeight": 400, - "letterSpacing": "0.00938em", - "lineHeight": 1.75, - }, - "subtitle2": Object { - "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif", - "fontSize": "0.875rem", - "fontWeight": 500, - "letterSpacing": "0.00714em", - "lineHeight": 1.57, - }, - }, - "zIndex": Object { - "appBar": 1100, - "drawer": 1200, - "mobileStepper": 1000, - "modal": 1300, - "snackbar": 1400, - "speedDial": 1050, - "tooltip": 1500, - }, - }, - "name": "MuiBackdrop", - }, - "propTypes": Object { - "classes": [Function], - "innerRef": [Function], - }, - "render": [Function], - "useStyles": [Function], - } - } - BackdropProps={ - Object { - "transitionDuration": Object { - "enter": 225, - "exit": 195, - }, - } - } - className="MuiDialog-root modal-root" - closeAfterTransition={true} - disableEscapeKeyDown={true} - onClose={[Function]} - open={true} + <div + id="accessibility-title" > - <ForwardRef(Portal) - disablePortal={false} + konnector_modal.accessibility.window_title + </div> + <div + class="kmodal-content" + > + <div + class="loader elec" > - <Portal - containerInfo={ - <body - style="padding-right: 0px; overflow: hidden;" - > - <div - class="MuiDialog-root modal-root" - role="presentation" - style="position: fixed; z-index: 1300; right: 0px; bottom: 0px; top: 0px; left: 0px;" - > - <div - aria-hidden="true" - class="MuiBackdrop-root" - style="opacity: 1; webkit-transition: opacity 225ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; transition: opacity 225ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;" - /> - <div - data-test="sentinelStart" - tabindex="0" - /> - <div - class="MuiDialog-container MuiDialog-scrollPaper" - role="none presentation" - style="opacity: 1; webkit-transition: opacity 225ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; transition: opacity 225ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;" - tabindex="-1" - > - <div - aria-labelledby="accessibility-title" - class="MuiPaper-root MuiDialog-paper modal-paper MuiDialog-paperScrollPaper MuiDialog-paperWidthSm MuiPaper-elevation24 MuiPaper-rounded" - role="dialog" - > - <div - id="accessibility-title" - > - konnector_modal.accessibility.window_title - </div> - <div - class="kmodal-content" - > - <div - class="loader elec" - > - <div - aria-busy="true" - aria-label="common.accessibility.loading" - class="bars" - role="progressbar" - title="common.accessibility.loading" - > - <div - class="bar" - /> - <div - class="bar" - /> - <div - class="bar" - /> - </div> - </div> - <div - class="kmodal-content-text kmodal-content-text-center text-16-normal" - > - <div - class="kc-wait text-16-bold" - > - konnector_modal.loading_data - </div> - </div> - <div - class="kmodal-waiting-text text-18-italic" - > - <div - class="waiting-text show" - > - <p> - La première fois cela peut prendre quelques minutes, par la suite, seulement quelques secondes. - </p> - <p /> - </div> - <div - class="waiting-text" - > - <p> - Afin de limiter le temps de ce premier chargement, un historique réduit de vos consommations va être chargé. Vous aurez tout de même accès à un an d'historique dès à présent. - </p> - <p /> - </div> - <div - class="waiting-text" - > - <p> - Demain matin, vous aurez accès à l'ensemble de vos données (jusqu'à trois ans d'historique). - </p> - <p /> - </div> - <div - class="waiting-text" - > - <p> - Le saviez-vous ? - </p> - <p> - Pour acheminer l’eau sur Lyon (Lugdunum !) l’aqueduc de Gier faisait 86 km à l’époque Romaine ! - </p> - </div> - <div - class="waiting-text" - > - <p> - Rien que de l’eau, de l’eau de pluie, de l’eau de la Métroooooo - </p> - <p> - ♪♪ - </p> - </div> - <div - class="waiting-text" - > - <p> - Le saviez-vous ? - </p> - <p> - Environ 90% de notre électricité provient de centrales de production hors de notre métropole. - </p> - </div> - <div - class="waiting-text" - > - <p> - « Il y a de l’eau dans le gaz » … - </p> - <p> - Avec Ecolyo c’est l’eau AVEC le gaz. - </p> - </div> - <div - class="waiting-text" - > - <p> - Le saviez-vous ? - </p> - <p> - La consommation énergétique résidentielle représente environ 30% de la consommation énergétique totale de notre territoire. - </p> - </div> - <div - class="waiting-text" - > - <p> - Le saviez-vous ? - </p> - <p> - La Métropole de Lyon a été territoire d’expérimentation Linky. Le compteur est présent sur notre territoire depuis plus de 10 ans ! - </p> - </div> - <div - class="waiting-text" - > - <p> - Le saviez-vous ? - </p> - <p> - 10 minutes d'aération par jour permettent à notre habitat d’être plus sain, avec un air renouvelé, moins de polluants et l’évacuation de l’humidité qui stagne et qui nous oblige à consommer plus de chauffage. - </p> - </div> - <div - class="waiting-text" - > - <p> - Le saviez-vous ? - </p> - <p> - 2°C ! C’est la différence qu’on peut mesurer dans une rue bien arborée en comparaison d’une rue vide : la végétation est donc cruciale pour le bien être en ville l’été et pour limiter l’installation des climatiseurs. - </p> - </div> - <div - class="waiting-text" - > - <p> - Il y a les bonnes pratiques de consommations énergétiques (et Ecolyo est là pour cela !) mais aussi et bien sûr, la rénovation. - </p> - <p> - Le saviez-vous ? La loi énergie climat de 2019 impose que d’ici 2025, les bâtiments privés résidentiels les plus énergivores soient tous rénovés ! - </p> - </div> - </div> - </div> - </div> - </div> - <div - data-test="sentinelEnd" - tabindex="0" - /> - </div> - </body> - } + <div + aria-busy="true" + aria-label="common.accessibility.loading" + class="bars" + role="progressbar" + title="common.accessibility.loading" > <div - className="MuiDialog-root modal-root" - onKeyDown={[Function]} - role="presentation" - style={ - Object { - "bottom": 0, - "left": 0, - "position": "fixed", - "right": 0, - "top": 0, - "zIndex": 1300, - } - } - > - <WithStyles(ForwardRef(Backdrop)) - onClick={[Function]} - open={true} - transitionDuration={ - Object { - "enter": 225, - "exit": 195, - } - } - > - <ForwardRef(Backdrop) - classes={ - Object { - "invisible": "MuiBackdrop-invisible", - "root": "MuiBackdrop-root", - } - } - onClick={[Function]} - open={true} - transitionDuration={ - Object { - "enter": 225, - "exit": 195, - } - } - > - <ForwardRef(Fade) - in={true} - onClick={[Function]} - timeout={ - Object { - "enter": 225, - "exit": 195, - } - } - > - <Transition - appear={true} - enter={true} - exit={true} - in={true} - mountOnEnter={false} - onClick={[Function]} - onEnter={[Function]} - onEntered={[Function]} - onEntering={[Function]} - onExit={[Function]} - onExited={[Function]} - onExiting={[Function]} - timeout={ - Object { - "enter": 225, - "exit": 195, - } - } - unmountOnExit={false} - > - <div - aria-hidden={true} - className="MuiBackdrop-root" - onClick={[Function]} - style={ - Object { - "opacity": 1, - "visibility": undefined, - } - } - /> - </Transition> - </ForwardRef(Fade)> - </ForwardRef(Backdrop)> - </WithStyles(ForwardRef(Backdrop))> - <Unstable_TrapFocus - disableAutoFocus={false} - disableEnforceFocus={false} - disableRestoreFocus={false} - getDoc={[Function]} - isEnabled={[Function]} - open={true} - > - <div - data-test="sentinelStart" - tabIndex={0} - /> - <ForwardRef(Fade) - appear={true} - in={true} - onEnter={[Function]} - onExited={[Function]} - role="none presentation" - tabIndex="-1" - timeout={ - Object { - "enter": 225, - "exit": 195, - } - } - > - <Transition - appear={true} - enter={true} - exit={true} - in={true} - mountOnEnter={false} - onEnter={[Function]} - onEntered={[Function]} - onEntering={[Function]} - onExit={[Function]} - onExited={[Function]} - onExiting={[Function]} - role="none presentation" - tabIndex="-1" - timeout={ - Object { - "enter": 225, - "exit": 195, - } - } - unmountOnExit={false} - > - <div - className="MuiDialog-container MuiDialog-scrollPaper" - onMouseDown={[Function]} - onMouseUp={[Function]} - role="none presentation" - style={ - Object { - "opacity": 1, - "visibility": undefined, - } - } - tabIndex="-1" - > - <WithStyles(ForwardRef(Paper)) - aria-labelledby="accessibility-title" - className="MuiDialog-paper modal-paper MuiDialog-paperScrollPaper MuiDialog-paperWidthSm" - elevation={24} - role="dialog" - > - <ForwardRef(Paper) - aria-labelledby="accessibility-title" - className="MuiDialog-paper modal-paper MuiDialog-paperScrollPaper MuiDialog-paperWidthSm" - classes={ - Object { - "elevation0": "MuiPaper-elevation0", - "elevation1": "MuiPaper-elevation1", - "elevation10": "MuiPaper-elevation10", - "elevation11": "MuiPaper-elevation11", - "elevation12": "MuiPaper-elevation12", - "elevation13": "MuiPaper-elevation13", - "elevation14": "MuiPaper-elevation14", - "elevation15": "MuiPaper-elevation15", - "elevation16": "MuiPaper-elevation16", - "elevation17": "MuiPaper-elevation17", - "elevation18": "MuiPaper-elevation18", - "elevation19": "MuiPaper-elevation19", - "elevation2": "MuiPaper-elevation2", - "elevation20": "MuiPaper-elevation20", - "elevation21": "MuiPaper-elevation21", - "elevation22": "MuiPaper-elevation22", - "elevation23": "MuiPaper-elevation23", - "elevation24": "MuiPaper-elevation24", - "elevation3": "MuiPaper-elevation3", - "elevation4": "MuiPaper-elevation4", - "elevation5": "MuiPaper-elevation5", - "elevation6": "MuiPaper-elevation6", - "elevation7": "MuiPaper-elevation7", - "elevation8": "MuiPaper-elevation8", - "elevation9": "MuiPaper-elevation9", - "outlined": "MuiPaper-outlined", - "root": "MuiPaper-root", - "rounded": "MuiPaper-rounded", - } - } - elevation={24} - role="dialog" - > - <div - aria-labelledby="accessibility-title" - className="MuiPaper-root MuiDialog-paper modal-paper MuiDialog-paperScrollPaper MuiDialog-paperWidthSm MuiPaper-elevation24 MuiPaper-rounded" - role="dialog" - > - <div - id="accessibility-title" - > - konnector_modal.accessibility.window_title - </div> - <div - className="kmodal-content" - > - <Loader - fluidType={0} - > - <div - className="loader elec" - > - <div - aria-busy="true" - aria-label="common.accessibility.loading" - className="bars" - role="progressbar" - title="common.accessibility.loading" - > - <div - className="bar" - /> - <div - className="bar" - /> - <div - className="bar" - /> - </div> - </div> - </Loader> - <div - className="kmodal-content-text kmodal-content-text-center text-16-normal" - > - <div - className="kc-wait text-16-bold" - > - konnector_modal.loading_data - </div> - </div> - <div - className="kmodal-waiting-text text-18-italic" - > - <div - className="waiting-text show" - key="" - > - <p> - La première fois cela peut prendre quelques minutes, par la suite, seulement quelques secondes. - </p> - <p /> - </div> - <div - className="waiting-text" - key="" - > - <p> - Afin de limiter le temps de ce premier chargement, un historique réduit de vos consommations va être chargé. Vous aurez tout de même accès à un an d'historique dès à présent. - </p> - <p /> - </div> - <div - className="waiting-text" - key="" - > - <p> - Demain matin, vous aurez accès à l'ensemble de vos données (jusqu'à trois ans d'historique). - </p> - <p /> - </div> - <div - className="waiting-text" - key="Pour acheminer l’eau sur Lyon (Lugdunum !) l’aqueduc de Gier faisait 86 km à l’époque Romaine !" - > - <p> - Le saviez-vous ? - </p> - <p> - Pour acheminer l’eau sur Lyon (Lugdunum !) l’aqueduc de Gier faisait 86 km à l’époque Romaine ! - </p> - </div> - <div - className="waiting-text" - key="♪♪" - > - <p> - Rien que de l’eau, de l’eau de pluie, de l’eau de la Métroooooo - </p> - <p> - ♪♪ - </p> - </div> - <div - className="waiting-text" - key="Environ 90% de notre électricité provient de centrales de production hors de notre métropole." - > - <p> - Le saviez-vous ? - </p> - <p> - Environ 90% de notre électricité provient de centrales de production hors de notre métropole. - </p> - </div> - <div - className="waiting-text" - key="Avec Ecolyo c’est l’eau AVEC le gaz." - > - <p> - « Il y a de l’eau dans le gaz » … - </p> - <p> - Avec Ecolyo c’est l’eau AVEC le gaz. - </p> - </div> - <div - className="waiting-text" - key="La consommation énergétique résidentielle représente environ 30% de la consommation énergétique totale de notre territoire." - > - <p> - Le saviez-vous ? - </p> - <p> - La consommation énergétique résidentielle représente environ 30% de la consommation énergétique totale de notre territoire. - </p> - </div> - <div - className="waiting-text" - key="La Métropole de Lyon a été territoire d’expérimentation Linky. Le compteur est présent sur notre territoire depuis plus de 10 ans !" - > - <p> - Le saviez-vous ? - </p> - <p> - La Métropole de Lyon a été territoire d’expérimentation Linky. Le compteur est présent sur notre territoire depuis plus de 10 ans ! - </p> - </div> - <div - className="waiting-text" - key="10 minutes d'aération par jour permettent à notre habitat d’être plus sain, avec un air renouvelé, moins de polluants et l’évacuation de l’humidité qui stagne et qui nous oblige à consommer plus de chauffage." - > - <p> - Le saviez-vous ? - </p> - <p> - 10 minutes d'aération par jour permettent à notre habitat d’être plus sain, avec un air renouvelé, moins de polluants et l’évacuation de l’humidité qui stagne et qui nous oblige à consommer plus de chauffage. - </p> - </div> - <div - className="waiting-text" - key="2°C ! C’est la différence qu’on peut mesurer dans une rue bien arborée en comparaison d’une rue vide : la végétation est donc cruciale pour le bien être en ville l’été et pour limiter l’installation des climatiseurs." - > - <p> - Le saviez-vous ? - </p> - <p> - 2°C ! C’est la différence qu’on peut mesurer dans une rue bien arborée en comparaison d’une rue vide : la végétation est donc cruciale pour le bien être en ville l’été et pour limiter l’installation des climatiseurs. - </p> - </div> - <div - className="waiting-text" - key="Le saviez-vous ? La loi énergie climat de 2019 impose que d’ici 2025, les bâtiments privés résidentiels les plus énergivores soient tous rénovés !" - > - <p> - Il y a les bonnes pratiques de consommations énergétiques (et Ecolyo est là pour cela !) mais aussi et bien sûr, la rénovation. - </p> - <p> - Le saviez-vous ? La loi énergie climat de 2019 impose que d’ici 2025, les bâtiments privés résidentiels les plus énergivores soient tous rénovés ! - </p> - </div> - </div> - </div> - </div> - </ForwardRef(Paper)> - </WithStyles(ForwardRef(Paper))> - </div> - </Transition> - </ForwardRef(Fade)> - <div - data-test="sentinelEnd" - tabIndex={0} - /> - </Unstable_TrapFocus> - </div> - </Portal> - </ForwardRef(Portal)> - </ForwardRef(Modal)> - </ForwardRef(Dialog)> - </WithStyles(ForwardRef(Dialog))> - </KonnectorModal> -</Provider> + class="bar" + /> + <div + class="bar" + /> + <div + class="bar" + /> + </div> + </div> + <div + class="kmodal-content-text kmodal-content-text-center text-16-normal" + > + <div + class="kc-wait text-16-bold" + > + konnector_modal.loading_data + </div> + </div> + <div + class="kmodal-waiting-text text-18-italic" + > + <div + class="waiting-text show" + > + <p> + La première fois cela peut prendre quelques minutes, par la suite, seulement quelques secondes. + </p> + <p /> + </div> + <div + class="waiting-text" + > + <p> + Afin de limiter le temps de ce premier chargement, un historique réduit de vos consommations va être chargé. Vous aurez tout de même accès à un an d'historique dès à présent. + </p> + <p /> + </div> + <div + class="waiting-text" + > + <p> + Demain matin, vous aurez accès à l'ensemble de vos données (jusqu'à trois ans d'historique). + </p> + <p /> + </div> + <div + class="waiting-text" + > + <p> + Le saviez-vous ? + </p> + <p> + Pour acheminer l’eau sur Lyon (Lugdunum !) l’aqueduc de Gier faisait 86 km à l’époque Romaine ! + </p> + </div> + <div + class="waiting-text" + > + <p> + Rien que de l’eau, de l’eau de pluie, de l’eau de la Métroooooo + </p> + <p> + ♪♪ + </p> + </div> + <div + class="waiting-text" + > + <p> + Le saviez-vous ? + </p> + <p> + Environ 90% de notre électricité provient de centrales de production hors de notre métropole. + </p> + </div> + <div + class="waiting-text" + > + <p> + « Il y a de l’eau dans le gaz » … + </p> + <p> + Avec Ecolyo c’est l’eau AVEC le gaz. + </p> + </div> + <div + class="waiting-text" + > + <p> + Le saviez-vous ? + </p> + <p> + La consommation énergétique résidentielle représente environ 30% de la consommation énergétique totale de notre territoire. + </p> + </div> + <div + class="waiting-text" + > + <p> + Le saviez-vous ? + </p> + <p> + La Métropole de Lyon a été territoire d’expérimentation Linky. Le compteur est présent sur notre territoire depuis plus de 10 ans ! + </p> + </div> + <div + class="waiting-text" + > + <p> + Le saviez-vous ? + </p> + <p> + 10 minutes d'aération par jour permettent à notre habitat d’être plus sain, avec un air renouvelé, moins de polluants et l’évacuation de l’humidité qui stagne et qui nous oblige à consommer plus de chauffage. + </p> + </div> + <div + class="waiting-text" + > + <p> + Le saviez-vous ? + </p> + <p> + 2°C ! C’est la différence qu’on peut mesurer dans une rue bien arborée en comparaison d’une rue vide : la végétation est donc cruciale pour le bien être en ville l’été et pour limiter l’installation des climatiseurs. + </p> + </div> + <div + class="waiting-text" + > + <p> + Il y a les bonnes pratiques de consommations énergétiques (et Ecolyo est là pour cela !) mais aussi et bien sûr, la rénovation. + </p> + <p> + Le saviez-vous ? La loi énergie climat de 2019 impose que d’ici 2025, les bâtiments privés résidentiels les plus énergivores soient tous rénovés ! + </p> + </div> + </div> + </div> + </div> + </div> + <div + data-test="sentinelEnd" + tabindex="0" + /> + </div> +</body> `; diff --git a/src/components/Konnector/__snapshots__/KonnectorModalFooter.spec.tsx.snap b/src/components/Konnector/__snapshots__/KonnectorModalFooter.spec.tsx.snap index 2ac0af5a048f2f7e13d94a194e0e33f2bf6910e7..a81d85ddeb9e35696c18657218226be8bbac1250 100644 --- a/src/components/Konnector/__snapshots__/KonnectorModalFooter.spec.tsx.snap +++ b/src/components/Konnector/__snapshots__/KonnectorModalFooter.spec.tsx.snap @@ -1,155 +1,23 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP exports[`KonnectorModalFooter component should be rendered correctly 1`] = ` -<Provider - store={ - Object { - "clearActions": [Function], - "dispatch": [Function], - "getActions": [Function], - "getState": [Function], - "replaceReducer": [Function], - "subscribe": [Function], - } - } -> - <KonnectorModalFooter - account={null} - error={null} - handleAccountDeletion={[MockFunction]} - handleCloseClick={[MockFunction]} - isUpdating={false} - state={null} +<div> + <button + aria-label="konnector_modal.accessibility.button_close" + class="MuiButtonBase-root MuiButton-root MuiButton-text btnPrimary" + tabindex="0" + type="button" > - <WithStyles(ForwardRef(Button)) - aria-label="konnector_modal.accessibility.button_close" - className="btnPrimary" - onClick={[Function]} + <span + class="MuiButton-label" > - <ForwardRef(Button) - aria-label="konnector_modal.accessibility.button_close" - className="btnPrimary" - classes={ - Object { - "colorInherit": "MuiButton-colorInherit", - "contained": "MuiButton-contained", - "containedPrimary": "MuiButton-containedPrimary", - "containedSecondary": "MuiButton-containedSecondary", - "containedSizeLarge": "MuiButton-containedSizeLarge", - "containedSizeSmall": "MuiButton-containedSizeSmall", - "disableElevation": "MuiButton-disableElevation", - "disabled": "Mui-disabled", - "endIcon": "MuiButton-endIcon", - "focusVisible": "Mui-focusVisible", - "fullWidth": "MuiButton-fullWidth", - "iconSizeLarge": "MuiButton-iconSizeLarge", - "iconSizeMedium": "MuiButton-iconSizeMedium", - "iconSizeSmall": "MuiButton-iconSizeSmall", - "label": "MuiButton-label", - "outlined": "MuiButton-outlined", - "outlinedPrimary": "MuiButton-outlinedPrimary", - "outlinedSecondary": "MuiButton-outlinedSecondary", - "outlinedSizeLarge": "MuiButton-outlinedSizeLarge", - "outlinedSizeSmall": "MuiButton-outlinedSizeSmall", - "root": "MuiButton-root", - "sizeLarge": "MuiButton-sizeLarge", - "sizeSmall": "MuiButton-sizeSmall", - "startIcon": "MuiButton-startIcon", - "text": "MuiButton-text", - "textPrimary": "MuiButton-textPrimary", - "textSecondary": "MuiButton-textSecondary", - "textSizeLarge": "MuiButton-textSizeLarge", - "textSizeSmall": "MuiButton-textSizeSmall", - } - } - onClick={[Function]} - > - <WithStyles(ForwardRef(ButtonBase)) - aria-label="konnector_modal.accessibility.button_close" - className="MuiButton-root MuiButton-text btnPrimary" - component="button" - disabled={false} - focusRipple={true} - focusVisibleClassName="Mui-focusVisible" - onClick={[Function]} - type="button" - > - <ForwardRef(ButtonBase) - aria-label="konnector_modal.accessibility.button_close" - className="MuiButton-root MuiButton-text btnPrimary" - classes={ - Object { - "disabled": "Mui-disabled", - "focusVisible": "Mui-focusVisible", - "root": "MuiButtonBase-root", - } - } - component="button" - disabled={false} - focusRipple={true} - focusVisibleClassName="Mui-focusVisible" - onClick={[Function]} - type="button" - > - <button - aria-label="konnector_modal.accessibility.button_close" - className="MuiButtonBase-root MuiButton-root MuiButton-text btnPrimary" - 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" - > - <div> - konnector_modal.button_validate - </div> - </span> - <WithStyles(memo) - center={false} - > - <ForwardRef(TouchRipple) - center={false} - classes={ - Object { - "child": "MuiTouchRipple-child", - "childLeaving": "MuiTouchRipple-childLeaving", - "childPulsate": "MuiTouchRipple-childPulsate", - "ripple": "MuiTouchRipple-ripple", - "ripplePulsate": "MuiTouchRipple-ripplePulsate", - "rippleVisible": "MuiTouchRipple-rippleVisible", - "root": "MuiTouchRipple-root", - } - } - > - <span - className="MuiTouchRipple-root" - > - <TransitionGroup - childFactory={[Function]} - component={null} - exit={true} - /> - </span> - </ForwardRef(TouchRipple)> - </WithStyles(memo)> - </button> - </ForwardRef(ButtonBase)> - </WithStyles(ForwardRef(ButtonBase))> - </ForwardRef(Button)> - </WithStyles(ForwardRef(Button))> - </KonnectorModalFooter> -</Provider> + <div> + konnector_modal.button_validate + </div> + </span> + <span + class="MuiTouchRipple-root" + /> + </button> +</div> `; diff --git a/src/components/Konnector/__snapshots__/KonnectorViewerList.spec.tsx.snap b/src/components/Konnector/__snapshots__/KonnectorViewerList.spec.tsx.snap index 6295440273087145768e2ea94b73c7b30703bec5..8fd0a567d1583af4d3f71d49a5ced00da6b26630 100644 --- a/src/components/Konnector/__snapshots__/KonnectorViewerList.spec.tsx.snap +++ b/src/components/Konnector/__snapshots__/KonnectorViewerList.spec.tsx.snap @@ -1,482 +1,100 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP exports[`KonnectorViewerList component should be rendered correctly 1`] = ` -<Provider - store={ - Object { - "clearActions": [Function], - "dispatch": [Function], - "getActions": [Function], - "getState": [Function], - "replaceReducer": [Function], - "subscribe": [Function], - } - } -> - <KonnectorViewerList> - <div - className="konnectorsList" +<div> + <div + class="konnectorsList" + > + <button + class="MuiButtonBase-root MuiCardActionArea-root WithStyles(ForwardRef(CardActionArea))-root-1 connection-card electricity" + tabindex="0" + type="button" > - <StyledCard - className="connection-card" - fluidType={0} - key="0" - onClick={[Function]} + <div + class="MuiCardContent-root WithStyles(ForwardRef(CardContent))-root-2" > - <WithStyles(WithStyles(ForwardRef(CardActionArea))) - className="connection-card electricity" - onClick={[Function]} + <svg + class="styles__icon___23x3R" + height="36" + width="36" > - <WithStyles(ForwardRef(CardActionArea)) - className="connection-card electricity" - classes={ - Object { - "root": "WithStyles(ForwardRef(CardActionArea))-root-1", - } - } - onClick={[Function]} - > - <ForwardRef(CardActionArea) - className="connection-card electricity" - classes={ - Object { - "focusHighlight": "MuiCardActionArea-focusHighlight", - "focusVisible": "Mui-focusVisible", - "root": "MuiCardActionArea-root WithStyles(ForwardRef(CardActionArea))-root-1", - } - } - onClick={[Function]} - > - <WithStyles(ForwardRef(ButtonBase)) - className="MuiCardActionArea-root WithStyles(ForwardRef(CardActionArea))-root-1 connection-card electricity" - focusVisibleClassName="Mui-focusVisible" - onClick={[Function]} - > - <ForwardRef(ButtonBase) - className="MuiCardActionArea-root WithStyles(ForwardRef(CardActionArea))-root-1 connection-card electricity" - classes={ - Object { - "disabled": "Mui-disabled", - "focusVisible": "Mui-focusVisible", - "root": "MuiButtonBase-root", - } - } - focusVisibleClassName="Mui-focusVisible" - onClick={[Function]} - > - <button - className="MuiButtonBase-root MuiCardActionArea-root WithStyles(ForwardRef(CardActionArea))-root-1 connection-card electricity" - disabled={false} - onBlur={[Function]} - onClick={[Function]} - onDragLeave={[Function]} - onFocus={[Function]} - onKeyDown={[Function]} - onKeyUp={[Function]} - onMouseDown={[Function]} - onMouseLeave={[Function]} - onMouseUp={[Function]} - onTouchEnd={[Function]} - onTouchMove={[Function]} - onTouchStart={[Function]} - tabIndex={0} - type="button" - > - <WithStyles(WithStyles(ForwardRef(CardContent)))> - <WithStyles(ForwardRef(CardContent)) - classes={ - Object { - "root": "WithStyles(ForwardRef(CardContent))-root-2", - } - } - > - <ForwardRef(CardContent) - classes={ - Object { - "root": "MuiCardContent-root WithStyles(ForwardRef(CardContent))-root-2", - } - } - > - <div - className="MuiCardContent-root WithStyles(ForwardRef(CardContent))-root-2" - > - <Icon - icon="test-file-stub" - size={36} - spin={false} - > - <Component - className="styles__icon___23x3R" - height={36} - style={Object {}} - width={36} - > - <svg - className="styles__icon___23x3R" - height={36} - style={Object {}} - width={36} - > - <use - xlinkHref="#test-file-stub" - /> - </svg> - </Component> - </Icon> - <div - className="konnector-title text-18-bold electricity" - > - konnector_options.label_connect_to_electricity - </div> - </div> - </ForwardRef(CardContent)> - </WithStyles(ForwardRef(CardContent))> - </WithStyles(WithStyles(ForwardRef(CardContent)))> - <span - className="MuiCardActionArea-focusHighlight" - /> - <WithStyles(memo) - center={false} - > - <ForwardRef(TouchRipple) - center={false} - classes={ - Object { - "child": "MuiTouchRipple-child", - "childLeaving": "MuiTouchRipple-childLeaving", - "childPulsate": "MuiTouchRipple-childPulsate", - "ripple": "MuiTouchRipple-ripple", - "ripplePulsate": "MuiTouchRipple-ripplePulsate", - "rippleVisible": "MuiTouchRipple-rippleVisible", - "root": "MuiTouchRipple-root", - } - } - > - <span - className="MuiTouchRipple-root" - > - <TransitionGroup - childFactory={[Function]} - component={null} - exit={true} - /> - </span> - </ForwardRef(TouchRipple)> - </WithStyles(memo)> - </button> - </ForwardRef(ButtonBase)> - </WithStyles(ForwardRef(ButtonBase))> - </ForwardRef(CardActionArea)> - </WithStyles(ForwardRef(CardActionArea))> - </WithStyles(WithStyles(ForwardRef(CardActionArea)))> - </StyledCard> - <StyledCard - className="connection-card" - fluidType={1} - key="1" - onClick={[Function]} + <use + xlink:href="#test-file-stub" + /> + </svg> + <div + class="konnector-title text-18-bold electricity" + > + konnector_options.label_connect_to_electricity + </div> + </div> + <span + class="MuiCardActionArea-focusHighlight" + /> + <span + class="MuiTouchRipple-root" + /> + </button> + <button + class="MuiButtonBase-root MuiCardActionArea-root WithStyles(ForwardRef(CardActionArea))-root-1 connection-card water" + tabindex="0" + type="button" + > + <div + class="MuiCardContent-root WithStyles(ForwardRef(CardContent))-root-2" > - <WithStyles(WithStyles(ForwardRef(CardActionArea))) - className="connection-card water" - onClick={[Function]} + <svg + class="styles__icon___23x3R" + height="36" + width="36" + > + <use + xlink:href="#test-file-stub" + /> + </svg> + <div + class="konnector-title text-18-bold water" > - <WithStyles(ForwardRef(CardActionArea)) - className="connection-card water" - classes={ - Object { - "root": "WithStyles(ForwardRef(CardActionArea))-root-1", - } - } - onClick={[Function]} - > - <ForwardRef(CardActionArea) - className="connection-card water" - classes={ - Object { - "focusHighlight": "MuiCardActionArea-focusHighlight", - "focusVisible": "Mui-focusVisible", - "root": "MuiCardActionArea-root WithStyles(ForwardRef(CardActionArea))-root-1", - } - } - onClick={[Function]} - > - <WithStyles(ForwardRef(ButtonBase)) - className="MuiCardActionArea-root WithStyles(ForwardRef(CardActionArea))-root-1 connection-card water" - focusVisibleClassName="Mui-focusVisible" - onClick={[Function]} - > - <ForwardRef(ButtonBase) - className="MuiCardActionArea-root WithStyles(ForwardRef(CardActionArea))-root-1 connection-card water" - classes={ - Object { - "disabled": "Mui-disabled", - "focusVisible": "Mui-focusVisible", - "root": "MuiButtonBase-root", - } - } - focusVisibleClassName="Mui-focusVisible" - onClick={[Function]} - > - <button - className="MuiButtonBase-root MuiCardActionArea-root WithStyles(ForwardRef(CardActionArea))-root-1 connection-card water" - disabled={false} - onBlur={[Function]} - onClick={[Function]} - onDragLeave={[Function]} - onFocus={[Function]} - onKeyDown={[Function]} - onKeyUp={[Function]} - onMouseDown={[Function]} - onMouseLeave={[Function]} - onMouseUp={[Function]} - onTouchEnd={[Function]} - onTouchMove={[Function]} - onTouchStart={[Function]} - tabIndex={0} - type="button" - > - <WithStyles(WithStyles(ForwardRef(CardContent)))> - <WithStyles(ForwardRef(CardContent)) - classes={ - Object { - "root": "WithStyles(ForwardRef(CardContent))-root-2", - } - } - > - <ForwardRef(CardContent) - classes={ - Object { - "root": "MuiCardContent-root WithStyles(ForwardRef(CardContent))-root-2", - } - } - > - <div - className="MuiCardContent-root WithStyles(ForwardRef(CardContent))-root-2" - > - <Icon - icon="test-file-stub" - size={36} - spin={false} - > - <Component - className="styles__icon___23x3R" - height={36} - style={Object {}} - width={36} - > - <svg - className="styles__icon___23x3R" - height={36} - style={Object {}} - width={36} - > - <use - xlinkHref="#test-file-stub" - /> - </svg> - </Component> - </Icon> - <div - className="konnector-title text-18-bold water" - > - konnector_options.label_connect_to_water - </div> - </div> - </ForwardRef(CardContent)> - </WithStyles(ForwardRef(CardContent))> - </WithStyles(WithStyles(ForwardRef(CardContent)))> - <span - className="MuiCardActionArea-focusHighlight" - /> - <WithStyles(memo) - center={false} - > - <ForwardRef(TouchRipple) - center={false} - classes={ - Object { - "child": "MuiTouchRipple-child", - "childLeaving": "MuiTouchRipple-childLeaving", - "childPulsate": "MuiTouchRipple-childPulsate", - "ripple": "MuiTouchRipple-ripple", - "ripplePulsate": "MuiTouchRipple-ripplePulsate", - "rippleVisible": "MuiTouchRipple-rippleVisible", - "root": "MuiTouchRipple-root", - } - } - > - <span - className="MuiTouchRipple-root" - > - <TransitionGroup - childFactory={[Function]} - component={null} - exit={true} - /> - </span> - </ForwardRef(TouchRipple)> - </WithStyles(memo)> - </button> - </ForwardRef(ButtonBase)> - </WithStyles(ForwardRef(ButtonBase))> - </ForwardRef(CardActionArea)> - </WithStyles(ForwardRef(CardActionArea))> - </WithStyles(WithStyles(ForwardRef(CardActionArea)))> - </StyledCard> - <StyledCard - className="connection-card" - fluidType={2} - key="2" - onClick={[Function]} + konnector_options.label_connect_to_water + </div> + </div> + <span + class="MuiCardActionArea-focusHighlight" + /> + <span + class="MuiTouchRipple-root" + /> + </button> + <button + class="MuiButtonBase-root MuiCardActionArea-root WithStyles(ForwardRef(CardActionArea))-root-1 connection-card gas" + tabindex="0" + type="button" + > + <div + class="MuiCardContent-root WithStyles(ForwardRef(CardContent))-root-2" > - <WithStyles(WithStyles(ForwardRef(CardActionArea))) - className="connection-card gas" - onClick={[Function]} + <svg + class="styles__icon___23x3R" + height="36" + width="36" + > + <use + xlink:href="#test-file-stub" + /> + </svg> + <div + class="konnector-title text-18-bold gas" > - <WithStyles(ForwardRef(CardActionArea)) - className="connection-card gas" - classes={ - Object { - "root": "WithStyles(ForwardRef(CardActionArea))-root-1", - } - } - onClick={[Function]} - > - <ForwardRef(CardActionArea) - className="connection-card gas" - classes={ - Object { - "focusHighlight": "MuiCardActionArea-focusHighlight", - "focusVisible": "Mui-focusVisible", - "root": "MuiCardActionArea-root WithStyles(ForwardRef(CardActionArea))-root-1", - } - } - onClick={[Function]} - > - <WithStyles(ForwardRef(ButtonBase)) - className="MuiCardActionArea-root WithStyles(ForwardRef(CardActionArea))-root-1 connection-card gas" - focusVisibleClassName="Mui-focusVisible" - onClick={[Function]} - > - <ForwardRef(ButtonBase) - className="MuiCardActionArea-root WithStyles(ForwardRef(CardActionArea))-root-1 connection-card gas" - classes={ - Object { - "disabled": "Mui-disabled", - "focusVisible": "Mui-focusVisible", - "root": "MuiButtonBase-root", - } - } - focusVisibleClassName="Mui-focusVisible" - onClick={[Function]} - > - <button - className="MuiButtonBase-root MuiCardActionArea-root WithStyles(ForwardRef(CardActionArea))-root-1 connection-card gas" - disabled={false} - onBlur={[Function]} - onClick={[Function]} - onDragLeave={[Function]} - onFocus={[Function]} - onKeyDown={[Function]} - onKeyUp={[Function]} - onMouseDown={[Function]} - onMouseLeave={[Function]} - onMouseUp={[Function]} - onTouchEnd={[Function]} - onTouchMove={[Function]} - onTouchStart={[Function]} - tabIndex={0} - type="button" - > - <WithStyles(WithStyles(ForwardRef(CardContent)))> - <WithStyles(ForwardRef(CardContent)) - classes={ - Object { - "root": "WithStyles(ForwardRef(CardContent))-root-2", - } - } - > - <ForwardRef(CardContent) - classes={ - Object { - "root": "MuiCardContent-root WithStyles(ForwardRef(CardContent))-root-2", - } - } - > - <div - className="MuiCardContent-root WithStyles(ForwardRef(CardContent))-root-2" - > - <Icon - icon="test-file-stub" - size={36} - spin={false} - > - <Component - className="styles__icon___23x3R" - height={36} - style={Object {}} - width={36} - > - <svg - className="styles__icon___23x3R" - height={36} - style={Object {}} - width={36} - > - <use - xlinkHref="#test-file-stub" - /> - </svg> - </Component> - </Icon> - <div - className="konnector-title text-18-bold gas" - > - konnector_options.label_connect_to_gas - </div> - </div> - </ForwardRef(CardContent)> - </WithStyles(ForwardRef(CardContent))> - </WithStyles(WithStyles(ForwardRef(CardContent)))> - <span - className="MuiCardActionArea-focusHighlight" - /> - <WithStyles(memo) - center={false} - > - <ForwardRef(TouchRipple) - center={false} - classes={ - Object { - "child": "MuiTouchRipple-child", - "childLeaving": "MuiTouchRipple-childLeaving", - "childPulsate": "MuiTouchRipple-childPulsate", - "ripple": "MuiTouchRipple-ripple", - "ripplePulsate": "MuiTouchRipple-ripplePulsate", - "rippleVisible": "MuiTouchRipple-rippleVisible", - "root": "MuiTouchRipple-root", - } - } - > - <span - className="MuiTouchRipple-root" - > - <TransitionGroup - childFactory={[Function]} - component={null} - exit={true} - /> - </span> - </ForwardRef(TouchRipple)> - </WithStyles(memo)> - </button> - </ForwardRef(ButtonBase)> - </WithStyles(ForwardRef(ButtonBase))> - </ForwardRef(CardActionArea)> - </WithStyles(ForwardRef(CardActionArea))> - </WithStyles(WithStyles(ForwardRef(CardActionArea)))> - </StyledCard> - </div> - </KonnectorViewerList> -</Provider> + konnector_options.label_connect_to_gas + </div> + </div> + <span + class="MuiCardActionArea-focusHighlight" + /> + <span + class="MuiTouchRipple-root" + /> + </button> + </div> +</div> `; diff --git a/src/components/Loader/Loader.spec.tsx b/src/components/Loader/Loader.spec.tsx index 91618983d037be9155a6d8a2d79f67b139c1741a..7de46f26ce198f6b7cf6b3569b4087081aa3ab86 100644 --- a/src/components/Loader/Loader.spec.tsx +++ b/src/components/Loader/Loader.spec.tsx @@ -1,26 +1,27 @@ +import { render, screen } from '@testing-library/react' import { FluidType } from 'enums' -import { mount } from 'enzyme' import React from 'react' import Loader from './Loader' describe('Loader component', () => { it('should render base Loader', () => { - const wrapper = mount(<Loader />) - expect(wrapper.getElement()).toMatchSnapshot() + const { container } = render(<Loader />) + expect(container).toMatchSnapshot() + expect(screen.getByRole('progressbar')).toBeInTheDocument() }) it('should render Electricity Loader', () => { - const wrapper = mount(<Loader color="elec" />) - expect(wrapper.getElement()).toMatchSnapshot() + const { container } = render(<Loader color="elec" />) + expect(container).toMatchSnapshot() }) it('should render Water Loader', () => { - const wrapper = mount(<Loader fluidType={FluidType.WATER} />) - expect(wrapper.getElement()).toMatchSnapshot() + const { container } = render(<Loader fluidType={FluidType.WATER} />) + expect(container).toMatchSnapshot() }) it('should render Gas Loader', () => { - const wrapper = mount(<Loader fluidType={FluidType.GAS} />) - expect(wrapper.getElement()).toMatchSnapshot() + const { container } = render(<Loader fluidType={FluidType.GAS} />) + expect(container).toMatchSnapshot() }) }) diff --git a/src/components/Loader/__snapshots__/Loader.spec.tsx.snap b/src/components/Loader/__snapshots__/Loader.spec.tsx.snap index e33f3c5b6e55146c70713ded38d7342c604476ea..55a94f70733db7a60d3f517efe450891d1f2856d 100644 --- a/src/components/Loader/__snapshots__/Loader.spec.tsx.snap +++ b/src/components/Loader/__snapshots__/Loader.spec.tsx.snap @@ -1,21 +1,105 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP exports[`Loader component should render Electricity Loader 1`] = ` -<Loader - color="elec" -/> +<div> + <div + class="loader elec" + > + <div + aria-busy="true" + aria-label="common.accessibility.loading" + class="bars" + role="progressbar" + title="common.accessibility.loading" + > + <div + class="bar" + /> + <div + class="bar" + /> + <div + class="bar" + /> + </div> + </div> +</div> `; exports[`Loader component should render Gas Loader 1`] = ` -<Loader - fluidType={2} -/> +<div> + <div + class="loader gaz" + > + <div + aria-busy="true" + aria-label="common.accessibility.loading" + class="bars" + role="progressbar" + title="common.accessibility.loading" + > + <div + class="bar" + /> + <div + class="bar" + /> + <div + class="bar" + /> + </div> + </div> +</div> `; exports[`Loader component should render Water Loader 1`] = ` -<Loader - fluidType={1} -/> +<div> + <div + class="loader water" + > + <div + aria-busy="true" + aria-label="common.accessibility.loading" + class="bars" + role="progressbar" + title="common.accessibility.loading" + > + <div + class="bar" + /> + <div + class="bar" + /> + <div + class="bar" + /> + </div> + </div> +</div> `; -exports[`Loader component should render base Loader 1`] = `<Loader />`; +exports[`Loader component should render base Loader 1`] = ` +<div> + <div + class="loader gold" + > + <div + aria-busy="true" + aria-label="common.accessibility.loading" + class="bars" + role="progressbar" + title="common.accessibility.loading" + > + <div + class="bar" + /> + <div + class="bar" + /> + <div + class="bar" + /> + </div> + </div> +</div> +`; diff --git a/src/components/Options/ExportData/ExportData.spec.tsx b/src/components/Options/ExportData/ExportData.spec.tsx index 3afe225cedebd2d113d6995bc6c510bd1b8c30c6..b60d9054df1431a45c8fccba075579616b31897c 100644 --- a/src/components/Options/ExportData/ExportData.spec.tsx +++ b/src/components/Options/ExportData/ExportData.spec.tsx @@ -1,5 +1,4 @@ -import { mount } from 'enzyme' -import toJson from 'enzyme-to-json' +import { render, waitFor } from '@testing-library/react' import React from 'react' import ExportData from './ExportData' @@ -12,7 +11,8 @@ jest.mock('services/consumption.service', () => { describe('exportOptions component', () => { it('should be rendered correctly', async () => { - const wrapper = mount(<ExportData />) - expect(toJson(wrapper)).toMatchSnapshot() + const { container } = render(<ExportData />) + await waitFor(() => null, { container }) + expect(container).toMatchSnapshot() }) }) diff --git a/src/components/Options/ExportData/Modals/__snapshots__/exportDoneModal.spec.tsx.snap b/src/components/Options/ExportData/Modals/__snapshots__/exportDoneModal.spec.tsx.snap index 9a0cb334d2c4bb37164207370ed45415f74a9a34..565c7d0f4a4835d135788e7179a1b10afe7fb157 100644 --- a/src/components/Options/ExportData/Modals/__snapshots__/exportDoneModal.spec.tsx.snap +++ b/src/components/Options/ExportData/Modals/__snapshots__/exportDoneModal.spec.tsx.snap @@ -1,2116 +1,231 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP exports[`exportDoneModal component should be rendered correctly 1`] = ` -<ExportDoneModal - error={false} - handleCloseClick={[MockFunction]} - open={true} +<body + style="padding-right: 0px; overflow: hidden;" > - <WithStyles(ForwardRef(Dialog)) - aria-labelledby="accessibility-title" - classes={ - Object { - "paper": "modal-paper", - "root": "modal-root", - } - } - onClose={[MockFunction]} - open={true} + <div + aria-hidden="true" + /> + <div + class="MuiDialog-root modal-root" + role="presentation" + style="position: fixed; z-index: 1300; right: 0px; bottom: 0px; top: 0px; left: 0px;" > - <ForwardRef(Dialog) - aria-labelledby="accessibility-title" - classes={ - Object { - "container": "MuiDialog-container", - "paper": "MuiDialog-paper modal-paper", - "paperFullScreen": "MuiDialog-paperFullScreen", - "paperFullWidth": "MuiDialog-paperFullWidth", - "paperScrollBody": "MuiDialog-paperScrollBody", - "paperScrollPaper": "MuiDialog-paperScrollPaper", - "paperWidthFalse": "MuiDialog-paperWidthFalse", - "paperWidthLg": "MuiDialog-paperWidthLg", - "paperWidthMd": "MuiDialog-paperWidthMd", - "paperWidthSm": "MuiDialog-paperWidthSm", - "paperWidthXl": "MuiDialog-paperWidthXl", - "paperWidthXs": "MuiDialog-paperWidthXs", - "root": "MuiDialog-root modal-root", - "scrollBody": "MuiDialog-scrollBody", - "scrollPaper": "MuiDialog-scrollPaper", - } - } - onClose={[MockFunction]} - open={true} + <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" > - <ForwardRef(Modal) - BackdropComponent={ - Object { - "$$typeof": Symbol(react.forward_ref), - "Naked": Object { - "$$typeof": Symbol(react.forward_ref), - "propTypes": Object { - "children": [Function], - "className": [Function], - "classes": [Function], - "invisible": [Function], - "open": [Function], - "transitionDuration": [Function], - }, - "render": [Function], - }, - "displayName": "WithStyles(ForwardRef(Backdrop))", - "options": Object { - "defaultTheme": Object { - "breakpoints": Object { - "between": [Function], - "down": [Function], - "keys": Array [ - "xs", - "sm", - "md", - "lg", - "xl", - ], - "only": [Function], - "up": [Function], - "values": Object { - "lg": 1280, - "md": 960, - "sm": 600, - "xl": 1920, - "xs": 0, - }, - "width": [Function], - }, - "direction": "ltr", - "mixins": Object { - "gutters": [Function], - "toolbar": Object { - "@media (min-width:0px) and (orientation: landscape)": Object { - "minHeight": 48, - }, - "@media (min-width:600px)": Object { - "minHeight": 64, - }, - "minHeight": 56, - }, - }, - "overrides": Object {}, - "palette": Object { - "action": Object { - "activatedOpacity": 0.12, - "active": "rgba(0, 0, 0, 0.54)", - "disabled": "rgba(0, 0, 0, 0.26)", - "disabledBackground": "rgba(0, 0, 0, 0.12)", - "disabledOpacity": 0.38, - "focus": "rgba(0, 0, 0, 0.12)", - "focusOpacity": 0.12, - "hover": "rgba(0, 0, 0, 0.04)", - "hoverOpacity": 0.04, - "selected": "rgba(0, 0, 0, 0.08)", - "selectedOpacity": 0.08, - }, - "augmentColor": [Function], - "background": Object { - "default": "#fafafa", - "paper": "#fff", - }, - "common": Object { - "black": "#000", - "white": "#fff", - }, - "contrastThreshold": 3, - "divider": "rgba(0, 0, 0, 0.12)", - "error": Object { - "contrastText": "#fff", - "dark": "#d32f2f", - "light": "#e57373", - "main": "#f44336", - }, - "getContrastText": [Function], - "grey": Object { - "100": "#f5f5f5", - "200": "#eeeeee", - "300": "#e0e0e0", - "400": "#bdbdbd", - "50": "#fafafa", - "500": "#9e9e9e", - "600": "#757575", - "700": "#616161", - "800": "#424242", - "900": "#212121", - "A100": "#d5d5d5", - "A200": "#aaaaaa", - "A400": "#303030", - "A700": "#616161", - }, - "info": Object { - "contrastText": "#fff", - "dark": "#1976d2", - "light": "#64b5f6", - "main": "#2196f3", - }, - "primary": Object { - "contrastText": "#fff", - "dark": "#303f9f", - "light": "#7986cb", - "main": "#3f51b5", - }, - "secondary": Object { - "contrastText": "#fff", - "dark": "#c51162", - "light": "#ff4081", - "main": "#f50057", - }, - "success": Object { - "contrastText": "rgba(0, 0, 0, 0.87)", - "dark": "#388e3c", - "light": "#81c784", - "main": "#4caf50", - }, - "text": Object { - "disabled": "rgba(0, 0, 0, 0.38)", - "hint": "rgba(0, 0, 0, 0.38)", - "primary": "rgba(0, 0, 0, 0.87)", - "secondary": "rgba(0, 0, 0, 0.54)", - }, - "tonalOffset": 0.2, - "type": "light", - "warning": Object { - "contrastText": "rgba(0, 0, 0, 0.87)", - "dark": "#f57c00", - "light": "#ffb74d", - "main": "#ff9800", - }, - }, - "props": Object {}, - "shadows": Array [ - "none", - "0px 2px 1px -1px rgba(0,0,0,0.2),0px 1px 1px 0px rgba(0,0,0,0.14),0px 1px 3px 0px rgba(0,0,0,0.12)", - "0px 3px 1px -2px rgba(0,0,0,0.2),0px 2px 2px 0px rgba(0,0,0,0.14),0px 1px 5px 0px rgba(0,0,0,0.12)", - "0px 3px 3px -2px rgba(0,0,0,0.2),0px 3px 4px 0px rgba(0,0,0,0.14),0px 1px 8px 0px rgba(0,0,0,0.12)", - "0px 2px 4px -1px rgba(0,0,0,0.2),0px 4px 5px 0px rgba(0,0,0,0.14),0px 1px 10px 0px rgba(0,0,0,0.12)", - "0px 3px 5px -1px rgba(0,0,0,0.2),0px 5px 8px 0px rgba(0,0,0,0.14),0px 1px 14px 0px rgba(0,0,0,0.12)", - "0px 3px 5px -1px rgba(0,0,0,0.2),0px 6px 10px 0px rgba(0,0,0,0.14),0px 1px 18px 0px rgba(0,0,0,0.12)", - "0px 4px 5px -2px rgba(0,0,0,0.2),0px 7px 10px 1px rgba(0,0,0,0.14),0px 2px 16px 1px rgba(0,0,0,0.12)", - "0px 5px 5px -3px rgba(0,0,0,0.2),0px 8px 10px 1px rgba(0,0,0,0.14),0px 3px 14px 2px rgba(0,0,0,0.12)", - "0px 5px 6px -3px rgba(0,0,0,0.2),0px 9px 12px 1px rgba(0,0,0,0.14),0px 3px 16px 2px rgba(0,0,0,0.12)", - "0px 6px 6px -3px rgba(0,0,0,0.2),0px 10px 14px 1px rgba(0,0,0,0.14),0px 4px 18px 3px rgba(0,0,0,0.12)", - "0px 6px 7px -4px rgba(0,0,0,0.2),0px 11px 15px 1px rgba(0,0,0,0.14),0px 4px 20px 3px rgba(0,0,0,0.12)", - "0px 7px 8px -4px rgba(0,0,0,0.2),0px 12px 17px 2px rgba(0,0,0,0.14),0px 5px 22px 4px rgba(0,0,0,0.12)", - "0px 7px 8px -4px rgba(0,0,0,0.2),0px 13px 19px 2px rgba(0,0,0,0.14),0px 5px 24px 4px rgba(0,0,0,0.12)", - "0px 7px 9px -4px rgba(0,0,0,0.2),0px 14px 21px 2px rgba(0,0,0,0.14),0px 5px 26px 4px rgba(0,0,0,0.12)", - "0px 8px 9px -5px rgba(0,0,0,0.2),0px 15px 22px 2px rgba(0,0,0,0.14),0px 6px 28px 5px rgba(0,0,0,0.12)", - "0px 8px 10px -5px rgba(0,0,0,0.2),0px 16px 24px 2px rgba(0,0,0,0.14),0px 6px 30px 5px rgba(0,0,0,0.12)", - "0px 8px 11px -5px rgba(0,0,0,0.2),0px 17px 26px 2px rgba(0,0,0,0.14),0px 6px 32px 5px rgba(0,0,0,0.12)", - "0px 9px 11px -5px rgba(0,0,0,0.2),0px 18px 28px 2px rgba(0,0,0,0.14),0px 7px 34px 6px rgba(0,0,0,0.12)", - "0px 9px 12px -6px rgba(0,0,0,0.2),0px 19px 29px 2px rgba(0,0,0,0.14),0px 7px 36px 6px rgba(0,0,0,0.12)", - "0px 10px 13px -6px rgba(0,0,0,0.2),0px 20px 31px 3px rgba(0,0,0,0.14),0px 8px 38px 7px rgba(0,0,0,0.12)", - "0px 10px 13px -6px rgba(0,0,0,0.2),0px 21px 33px 3px rgba(0,0,0,0.14),0px 8px 40px 7px rgba(0,0,0,0.12)", - "0px 10px 14px -6px rgba(0,0,0,0.2),0px 22px 35px 3px rgba(0,0,0,0.14),0px 8px 42px 7px rgba(0,0,0,0.12)", - "0px 11px 14px -7px rgba(0,0,0,0.2),0px 23px 36px 3px rgba(0,0,0,0.14),0px 9px 44px 8px rgba(0,0,0,0.12)", - "0px 11px 15px -7px rgba(0,0,0,0.2),0px 24px 38px 3px rgba(0,0,0,0.14),0px 9px 46px 8px rgba(0,0,0,0.12)", - ], - "shape": Object { - "borderRadius": 4, - }, - "spacing": [Function], - "transitions": Object { - "create": [Function], - "duration": Object { - "complex": 375, - "enteringScreen": 225, - "leavingScreen": 195, - "short": 250, - "shorter": 200, - "shortest": 150, - "standard": 300, - }, - "easing": Object { - "easeIn": "cubic-bezier(0.4, 0, 1, 1)", - "easeInOut": "cubic-bezier(0.4, 0, 0.2, 1)", - "easeOut": "cubic-bezier(0.0, 0, 0.2, 1)", - "sharp": "cubic-bezier(0.4, 0, 0.6, 1)", - }, - "getAutoHeightDuration": [Function], - }, - "typography": Object { - "body1": Object { - "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif", - "fontSize": "1rem", - "fontWeight": 400, - "letterSpacing": "0.00938em", - "lineHeight": 1.5, - }, - "body2": Object { - "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif", - "fontSize": "0.875rem", - "fontWeight": 400, - "letterSpacing": "0.01071em", - "lineHeight": 1.43, - }, - "button": Object { - "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif", - "fontSize": "0.875rem", - "fontWeight": 500, - "letterSpacing": "0.02857em", - "lineHeight": 1.75, - "textTransform": "uppercase", - }, - "caption": Object { - "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif", - "fontSize": "0.75rem", - "fontWeight": 400, - "letterSpacing": "0.03333em", - "lineHeight": 1.66, - }, - "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif", - "fontSize": 14, - "fontWeightBold": 700, - "fontWeightLight": 300, - "fontWeightMedium": 500, - "fontWeightRegular": 400, - "h1": Object { - "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif", - "fontSize": "6rem", - "fontWeight": 300, - "letterSpacing": "-0.01562em", - "lineHeight": 1.167, - }, - "h2": Object { - "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif", - "fontSize": "3.75rem", - "fontWeight": 300, - "letterSpacing": "-0.00833em", - "lineHeight": 1.2, - }, - "h3": Object { - "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif", - "fontSize": "3rem", - "fontWeight": 400, - "letterSpacing": "0em", - "lineHeight": 1.167, - }, - "h4": Object { - "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif", - "fontSize": "2.125rem", - "fontWeight": 400, - "letterSpacing": "0.00735em", - "lineHeight": 1.235, - }, - "h5": Object { - "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif", - "fontSize": "1.5rem", - "fontWeight": 400, - "letterSpacing": "0em", - "lineHeight": 1.334, - }, - "h6": Object { - "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif", - "fontSize": "1.25rem", - "fontWeight": 500, - "letterSpacing": "0.0075em", - "lineHeight": 1.6, - }, - "htmlFontSize": 16, - "overline": Object { - "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif", - "fontSize": "0.75rem", - "fontWeight": 400, - "letterSpacing": "0.08333em", - "lineHeight": 2.66, - "textTransform": "uppercase", - }, - "pxToRem": [Function], - "round": [Function], - "subtitle1": Object { - "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif", - "fontSize": "1rem", - "fontWeight": 400, - "letterSpacing": "0.00938em", - "lineHeight": 1.75, - }, - "subtitle2": Object { - "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif", - "fontSize": "0.875rem", - "fontWeight": 500, - "letterSpacing": "0.00714em", - "lineHeight": 1.57, - }, - }, - "zIndex": Object { - "appBar": 1100, - "drawer": 1200, - "mobileStepper": 1000, - "modal": 1300, - "snackbar": 1400, - "speedDial": 1050, - "tooltip": 1500, - }, - }, - "name": "MuiBackdrop", - }, - "propTypes": Object { - "classes": [Function], - "innerRef": [Function], - }, - "render": [Function], - "useStyles": [Function], - } - } - BackdropProps={ - Object { - "transitionDuration": Object { - "enter": 225, - "exit": 195, - }, - } - } - className="MuiDialog-root modal-root" - closeAfterTransition={true} - disableEscapeKeyDown={false} - onClose={[MockFunction]} - open={true} + <div + aria-labelledby="accessibility-title" + class="MuiPaper-root MuiDialog-paper modal-paper MuiDialog-paperScrollPaper MuiDialog-paperWidthSm MuiPaper-elevation24 MuiPaper-rounded" + role="dialog" > - <ForwardRef(Portal) - disablePortal={false} + <div + id="accessibility-title" > - <Portal - containerInfo={ - <body - style="padding-right: 0px; overflow: hidden;" + export.modal_done.accessibility_title + </div> + <div + class="modal-done-root" + > + <button + aria-label="export.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="18" + width="18" > - <div - class="MuiDialog-root modal-root" - role="presentation" - style="position: fixed; z-index: 1300; right: 0px; bottom: 0px; top: 0px; left: 0px;" - > - <div - aria-hidden="true" - class="MuiBackdrop-root" - style="opacity: 1; webkit-transition: opacity 225ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; transition: opacity 225ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;" - /> - <div - data-test="sentinelStart" - tabindex="0" - /> - <div - class="MuiDialog-container MuiDialog-scrollPaper" - role="none presentation" - style="opacity: 1; webkit-transition: opacity 225ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; transition: opacity 225ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;" - tabindex="-1" - > - <div - aria-labelledby="accessibility-title" - class="MuiPaper-root MuiDialog-paper modal-paper MuiDialog-paperScrollPaper MuiDialog-paperWidthSm MuiPaper-elevation24 MuiPaper-rounded" - role="dialog" - > - <div - id="accessibility-title" - > - export.modal_done.accessibility_title - </div> - <div - class="modal-done-root" - > - <button - aria-label="export.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="18" - width="18" - > - <use - xlink:href="#test-file-stub" - /> - </svg> - </span> - <span - class="MuiTouchRipple-root" - /> - </button> - <div - class="content" - > - <div - class="icon-main" - > - <svg - class="styles__icon___23x3R" - height="44" - width="44" - > - <use - xlink:href="#test-file-stub" - /> - </svg> - </div> - <div - class="text-16-bold subtitle" - > - export.modal_done.text1 - </div> - <div> - export.modal_done.text2 - </div> - <button - aria-label="export.modal_done.button_close" - class="MuiButtonBase-root MuiButton-root MuiButton-text btnPrimary" - tabindex="0" - type="button" - > - <span - class="MuiButton-label" - > - export.modal_done.button_close - </span> - <span - class="MuiTouchRipple-root" - /> - </button> - </div> - </div> - </div> - </div> - <div - data-test="sentinelEnd" - tabindex="0" - /> - </div> - </body> - } + <use + xlink:href="#test-file-stub" + /> + </svg> + </span> + <span + class="MuiTouchRipple-root" + /> + </button> + <div + class="content" > <div - className="MuiDialog-root modal-root" - onKeyDown={[Function]} - role="presentation" - style={ - Object { - "bottom": 0, - "left": 0, - "position": "fixed", - "right": 0, - "top": 0, - "zIndex": 1300, - } - } + class="icon-main" > - <WithStyles(ForwardRef(Backdrop)) - onClick={[Function]} - open={true} - transitionDuration={ - Object { - "enter": 225, - "exit": 195, - } - } + <svg + class="styles__icon___23x3R" + height="44" + width="44" > - <ForwardRef(Backdrop) - classes={ - Object { - "invisible": "MuiBackdrop-invisible", - "root": "MuiBackdrop-root", - } - } - onClick={[Function]} - open={true} - transitionDuration={ - Object { - "enter": 225, - "exit": 195, - } - } - > - <ForwardRef(Fade) - in={true} - onClick={[Function]} - timeout={ - Object { - "enter": 225, - "exit": 195, - } - } - > - <Transition - appear={true} - enter={true} - exit={true} - in={true} - mountOnEnter={false} - onClick={[Function]} - onEnter={[Function]} - onEntered={[Function]} - onEntering={[Function]} - onExit={[Function]} - onExited={[Function]} - onExiting={[Function]} - timeout={ - Object { - "enter": 225, - "exit": 195, - } - } - unmountOnExit={false} - > - <div - aria-hidden={true} - className="MuiBackdrop-root" - onClick={[Function]} - style={ - Object { - "opacity": 1, - "visibility": undefined, - } - } - /> - </Transition> - </ForwardRef(Fade)> - </ForwardRef(Backdrop)> - </WithStyles(ForwardRef(Backdrop))> - <Unstable_TrapFocus - disableAutoFocus={false} - disableEnforceFocus={false} - disableRestoreFocus={false} - getDoc={[Function]} - isEnabled={[Function]} - open={true} - > - <div - data-test="sentinelStart" - tabIndex={0} - /> - <ForwardRef(Fade) - appear={true} - in={true} - onEnter={[Function]} - onExited={[Function]} - role="none presentation" - tabIndex="-1" - timeout={ - Object { - "enter": 225, - "exit": 195, - } - } - > - <Transition - appear={true} - enter={true} - exit={true} - in={true} - mountOnEnter={false} - onEnter={[Function]} - onEntered={[Function]} - onEntering={[Function]} - onExit={[Function]} - onExited={[Function]} - onExiting={[Function]} - role="none presentation" - tabIndex="-1" - timeout={ - Object { - "enter": 225, - "exit": 195, - } - } - unmountOnExit={false} - > - <div - className="MuiDialog-container MuiDialog-scrollPaper" - onMouseDown={[Function]} - onMouseUp={[Function]} - role="none presentation" - style={ - Object { - "opacity": 1, - "visibility": undefined, - } - } - tabIndex="-1" - > - <WithStyles(ForwardRef(Paper)) - aria-labelledby="accessibility-title" - className="MuiDialog-paper modal-paper MuiDialog-paperScrollPaper MuiDialog-paperWidthSm" - elevation={24} - role="dialog" - > - <ForwardRef(Paper) - aria-labelledby="accessibility-title" - className="MuiDialog-paper modal-paper MuiDialog-paperScrollPaper MuiDialog-paperWidthSm" - classes={ - Object { - "elevation0": "MuiPaper-elevation0", - "elevation1": "MuiPaper-elevation1", - "elevation10": "MuiPaper-elevation10", - "elevation11": "MuiPaper-elevation11", - "elevation12": "MuiPaper-elevation12", - "elevation13": "MuiPaper-elevation13", - "elevation14": "MuiPaper-elevation14", - "elevation15": "MuiPaper-elevation15", - "elevation16": "MuiPaper-elevation16", - "elevation17": "MuiPaper-elevation17", - "elevation18": "MuiPaper-elevation18", - "elevation19": "MuiPaper-elevation19", - "elevation2": "MuiPaper-elevation2", - "elevation20": "MuiPaper-elevation20", - "elevation21": "MuiPaper-elevation21", - "elevation22": "MuiPaper-elevation22", - "elevation23": "MuiPaper-elevation23", - "elevation24": "MuiPaper-elevation24", - "elevation3": "MuiPaper-elevation3", - "elevation4": "MuiPaper-elevation4", - "elevation5": "MuiPaper-elevation5", - "elevation6": "MuiPaper-elevation6", - "elevation7": "MuiPaper-elevation7", - "elevation8": "MuiPaper-elevation8", - "elevation9": "MuiPaper-elevation9", - "outlined": "MuiPaper-outlined", - "root": "MuiPaper-root", - "rounded": "MuiPaper-rounded", - } - } - elevation={24} - role="dialog" - > - <div - aria-labelledby="accessibility-title" - className="MuiPaper-root MuiDialog-paper modal-paper MuiDialog-paperScrollPaper MuiDialog-paperWidthSm MuiPaper-elevation24 MuiPaper-rounded" - role="dialog" - > - <div - id="accessibility-title" - > - export.modal_done.accessibility_title - </div> - <div - className="modal-done-root" - > - <WithStyles(ForwardRef(IconButton)) - aria-label="export.button_close" - className="modal-paper-close-button" - onClick={[MockFunction]} - > - <ForwardRef(IconButton) - aria-label="export.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]} - > - <WithStyles(ForwardRef(ButtonBase)) - aria-label="export.button_close" - centerRipple={true} - className="MuiIconButton-root modal-paper-close-button" - disabled={false} - focusRipple={true} - onClick={[MockFunction]} - > - <ForwardRef(ButtonBase) - aria-label="export.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]} - > - <button - aria-label="export.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" - > - <Icon - icon="test-file-stub" - size={18} - spin={false} - > - <Component - className="styles__icon___23x3R" - height={18} - style={Object {}} - width={18} - > - <svg - className="styles__icon___23x3R" - height={18} - style={Object {}} - width={18} - > - <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="content" - > - <div - className="icon-main" - > - <Icon - icon="test-file-stub" - size={44} - spin={false} - > - <Component - className="styles__icon___23x3R" - height={44} - style={Object {}} - width={44} - > - <svg - className="styles__icon___23x3R" - height={44} - style={Object {}} - width={44} - > - <use - xlinkHref="#test-file-stub" - /> - </svg> - </Component> - </Icon> - </div> - <div - className="text-16-bold subtitle" - > - export.modal_done.text1 - </div> - <div> - export.modal_done.text2 - </div> - <WithStyles(ForwardRef(Button)) - aria-label="export.modal_done.button_close" - className="btnPrimary" - onClick={[MockFunction]} - > - <ForwardRef(Button) - aria-label="export.modal_done.button_close" - className="btnPrimary" - classes={ - Object { - "colorInherit": "MuiButton-colorInherit", - "contained": "MuiButton-contained", - "containedPrimary": "MuiButton-containedPrimary", - "containedSecondary": "MuiButton-containedSecondary", - "containedSizeLarge": "MuiButton-containedSizeLarge", - "containedSizeSmall": "MuiButton-containedSizeSmall", - "disableElevation": "MuiButton-disableElevation", - "disabled": "Mui-disabled", - "endIcon": "MuiButton-endIcon", - "focusVisible": "Mui-focusVisible", - "fullWidth": "MuiButton-fullWidth", - "iconSizeLarge": "MuiButton-iconSizeLarge", - "iconSizeMedium": "MuiButton-iconSizeMedium", - "iconSizeSmall": "MuiButton-iconSizeSmall", - "label": "MuiButton-label", - "outlined": "MuiButton-outlined", - "outlinedPrimary": "MuiButton-outlinedPrimary", - "outlinedSecondary": "MuiButton-outlinedSecondary", - "outlinedSizeLarge": "MuiButton-outlinedSizeLarge", - "outlinedSizeSmall": "MuiButton-outlinedSizeSmall", - "root": "MuiButton-root", - "sizeLarge": "MuiButton-sizeLarge", - "sizeSmall": "MuiButton-sizeSmall", - "startIcon": "MuiButton-startIcon", - "text": "MuiButton-text", - "textPrimary": "MuiButton-textPrimary", - "textSecondary": "MuiButton-textSecondary", - "textSizeLarge": "MuiButton-textSizeLarge", - "textSizeSmall": "MuiButton-textSizeSmall", - } - } - onClick={[MockFunction]} - > - <WithStyles(ForwardRef(ButtonBase)) - aria-label="export.modal_done.button_close" - className="MuiButton-root MuiButton-text btnPrimary" - component="button" - disabled={false} - focusRipple={true} - focusVisibleClassName="Mui-focusVisible" - onClick={[MockFunction]} - type="button" - > - <ForwardRef(ButtonBase) - aria-label="export.modal_done.button_close" - className="MuiButton-root MuiButton-text btnPrimary" - 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="export.modal_done.button_close" - className="MuiButtonBase-root MuiButton-root MuiButton-text btnPrimary" - 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" - > - export.modal_done.button_close - </span> - <WithStyles(memo) - center={false} - > - <ForwardRef(TouchRipple) - center={false} - classes={ - Object { - "child": "MuiTouchRipple-child", - "childLeaving": "MuiTouchRipple-childLeaving", - "childPulsate": "MuiTouchRipple-childPulsate", - "ripple": "MuiTouchRipple-ripple", - "ripplePulsate": "MuiTouchRipple-ripplePulsate", - "rippleVisible": "MuiTouchRipple-rippleVisible", - "root": "MuiTouchRipple-root", - } - } - > - <span - className="MuiTouchRipple-root" - > - <TransitionGroup - childFactory={[Function]} - component={null} - exit={true} - /> - </span> - </ForwardRef(TouchRipple)> - </WithStyles(memo)> - </button> - </ForwardRef(ButtonBase)> - </WithStyles(ForwardRef(ButtonBase))> - </ForwardRef(Button)> - </WithStyles(ForwardRef(Button))> - </div> - </div> - </div> - </ForwardRef(Paper)> - </WithStyles(ForwardRef(Paper))> - </div> - </Transition> - </ForwardRef(Fade)> - <div - data-test="sentinelEnd" - tabIndex={0} + <use + xlink:href="#test-file-stub" /> - </Unstable_TrapFocus> + </svg> </div> - </Portal> - </ForwardRef(Portal)> - </ForwardRef(Modal)> - </ForwardRef(Dialog)> - </WithStyles(ForwardRef(Dialog))> -</ExportDoneModal> + <div + class="text-16-bold subtitle" + > + export.modal_done.text1 + </div> + <div> + export.modal_done.text2 + </div> + <button + aria-label="export.modal_done.button_close" + class="MuiButtonBase-root MuiButton-root MuiButton-text btnPrimary" + tabindex="0" + type="button" + > + <span + class="MuiButton-label" + > + export.modal_done.button_close + </span> + <span + class="MuiTouchRipple-root" + /> + </button> + </div> + </div> + </div> + </div> + <div + data-test="sentinelEnd" + tabindex="0" + /> + </div> +</body> `; exports[`exportDoneModal component should display error message 1`] = ` -<ExportDoneModal - error={true} - handleCloseClick={[MockFunction]} - open={true} +<body + style="padding-right: 0px; overflow: hidden;" > - <WithStyles(ForwardRef(Dialog)) - aria-labelledby="accessibility-title" - classes={ - Object { - "paper": "modal-paper", - "root": "modal-root", - } - } - onClose={[MockFunction]} - open={true} + <div + aria-hidden="true" + /> + <div + class="MuiDialog-root modal-root" + role="presentation" + style="position: fixed; z-index: 1300; right: 0px; bottom: 0px; top: 0px; left: 0px;" > - <ForwardRef(Dialog) - aria-labelledby="accessibility-title" - classes={ - Object { - "container": "MuiDialog-container", - "paper": "MuiDialog-paper modal-paper", - "paperFullScreen": "MuiDialog-paperFullScreen", - "paperFullWidth": "MuiDialog-paperFullWidth", - "paperScrollBody": "MuiDialog-paperScrollBody", - "paperScrollPaper": "MuiDialog-paperScrollPaper", - "paperWidthFalse": "MuiDialog-paperWidthFalse", - "paperWidthLg": "MuiDialog-paperWidthLg", - "paperWidthMd": "MuiDialog-paperWidthMd", - "paperWidthSm": "MuiDialog-paperWidthSm", - "paperWidthXl": "MuiDialog-paperWidthXl", - "paperWidthXs": "MuiDialog-paperWidthXs", - "root": "MuiDialog-root modal-root", - "scrollBody": "MuiDialog-scrollBody", - "scrollPaper": "MuiDialog-scrollPaper", - } - } - onClose={[MockFunction]} - open={true} + <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" > - <ForwardRef(Modal) - BackdropComponent={ - Object { - "$$typeof": Symbol(react.forward_ref), - "Naked": Object { - "$$typeof": Symbol(react.forward_ref), - "propTypes": Object { - "children": [Function], - "className": [Function], - "classes": [Function], - "invisible": [Function], - "open": [Function], - "transitionDuration": [Function], - }, - "render": [Function], - }, - "displayName": "WithStyles(ForwardRef(Backdrop))", - "options": Object { - "defaultTheme": Object { - "breakpoints": Object { - "between": [Function], - "down": [Function], - "keys": Array [ - "xs", - "sm", - "md", - "lg", - "xl", - ], - "only": [Function], - "up": [Function], - "values": Object { - "lg": 1280, - "md": 960, - "sm": 600, - "xl": 1920, - "xs": 0, - }, - "width": [Function], - }, - "direction": "ltr", - "mixins": Object { - "gutters": [Function], - "toolbar": Object { - "@media (min-width:0px) and (orientation: landscape)": Object { - "minHeight": 48, - }, - "@media (min-width:600px)": Object { - "minHeight": 64, - }, - "minHeight": 56, - }, - }, - "overrides": Object {}, - "palette": Object { - "action": Object { - "activatedOpacity": 0.12, - "active": "rgba(0, 0, 0, 0.54)", - "disabled": "rgba(0, 0, 0, 0.26)", - "disabledBackground": "rgba(0, 0, 0, 0.12)", - "disabledOpacity": 0.38, - "focus": "rgba(0, 0, 0, 0.12)", - "focusOpacity": 0.12, - "hover": "rgba(0, 0, 0, 0.04)", - "hoverOpacity": 0.04, - "selected": "rgba(0, 0, 0, 0.08)", - "selectedOpacity": 0.08, - }, - "augmentColor": [Function], - "background": Object { - "default": "#fafafa", - "paper": "#fff", - }, - "common": Object { - "black": "#000", - "white": "#fff", - }, - "contrastThreshold": 3, - "divider": "rgba(0, 0, 0, 0.12)", - "error": Object { - "contrastText": "#fff", - "dark": "#d32f2f", - "light": "#e57373", - "main": "#f44336", - }, - "getContrastText": [Function], - "grey": Object { - "100": "#f5f5f5", - "200": "#eeeeee", - "300": "#e0e0e0", - "400": "#bdbdbd", - "50": "#fafafa", - "500": "#9e9e9e", - "600": "#757575", - "700": "#616161", - "800": "#424242", - "900": "#212121", - "A100": "#d5d5d5", - "A200": "#aaaaaa", - "A400": "#303030", - "A700": "#616161", - }, - "info": Object { - "contrastText": "#fff", - "dark": "#1976d2", - "light": "#64b5f6", - "main": "#2196f3", - }, - "primary": Object { - "contrastText": "#fff", - "dark": "#303f9f", - "light": "#7986cb", - "main": "#3f51b5", - }, - "secondary": Object { - "contrastText": "#fff", - "dark": "#c51162", - "light": "#ff4081", - "main": "#f50057", - }, - "success": Object { - "contrastText": "rgba(0, 0, 0, 0.87)", - "dark": "#388e3c", - "light": "#81c784", - "main": "#4caf50", - }, - "text": Object { - "disabled": "rgba(0, 0, 0, 0.38)", - "hint": "rgba(0, 0, 0, 0.38)", - "primary": "rgba(0, 0, 0, 0.87)", - "secondary": "rgba(0, 0, 0, 0.54)", - }, - "tonalOffset": 0.2, - "type": "light", - "warning": Object { - "contrastText": "rgba(0, 0, 0, 0.87)", - "dark": "#f57c00", - "light": "#ffb74d", - "main": "#ff9800", - }, - }, - "props": Object {}, - "shadows": Array [ - "none", - "0px 2px 1px -1px rgba(0,0,0,0.2),0px 1px 1px 0px rgba(0,0,0,0.14),0px 1px 3px 0px rgba(0,0,0,0.12)", - "0px 3px 1px -2px rgba(0,0,0,0.2),0px 2px 2px 0px rgba(0,0,0,0.14),0px 1px 5px 0px rgba(0,0,0,0.12)", - "0px 3px 3px -2px rgba(0,0,0,0.2),0px 3px 4px 0px rgba(0,0,0,0.14),0px 1px 8px 0px rgba(0,0,0,0.12)", - "0px 2px 4px -1px rgba(0,0,0,0.2),0px 4px 5px 0px rgba(0,0,0,0.14),0px 1px 10px 0px rgba(0,0,0,0.12)", - "0px 3px 5px -1px rgba(0,0,0,0.2),0px 5px 8px 0px rgba(0,0,0,0.14),0px 1px 14px 0px rgba(0,0,0,0.12)", - "0px 3px 5px -1px rgba(0,0,0,0.2),0px 6px 10px 0px rgba(0,0,0,0.14),0px 1px 18px 0px rgba(0,0,0,0.12)", - "0px 4px 5px -2px rgba(0,0,0,0.2),0px 7px 10px 1px rgba(0,0,0,0.14),0px 2px 16px 1px rgba(0,0,0,0.12)", - "0px 5px 5px -3px rgba(0,0,0,0.2),0px 8px 10px 1px rgba(0,0,0,0.14),0px 3px 14px 2px rgba(0,0,0,0.12)", - "0px 5px 6px -3px rgba(0,0,0,0.2),0px 9px 12px 1px rgba(0,0,0,0.14),0px 3px 16px 2px rgba(0,0,0,0.12)", - "0px 6px 6px -3px rgba(0,0,0,0.2),0px 10px 14px 1px rgba(0,0,0,0.14),0px 4px 18px 3px rgba(0,0,0,0.12)", - "0px 6px 7px -4px rgba(0,0,0,0.2),0px 11px 15px 1px rgba(0,0,0,0.14),0px 4px 20px 3px rgba(0,0,0,0.12)", - "0px 7px 8px -4px rgba(0,0,0,0.2),0px 12px 17px 2px rgba(0,0,0,0.14),0px 5px 22px 4px rgba(0,0,0,0.12)", - "0px 7px 8px -4px rgba(0,0,0,0.2),0px 13px 19px 2px rgba(0,0,0,0.14),0px 5px 24px 4px rgba(0,0,0,0.12)", - "0px 7px 9px -4px rgba(0,0,0,0.2),0px 14px 21px 2px rgba(0,0,0,0.14),0px 5px 26px 4px rgba(0,0,0,0.12)", - "0px 8px 9px -5px rgba(0,0,0,0.2),0px 15px 22px 2px rgba(0,0,0,0.14),0px 6px 28px 5px rgba(0,0,0,0.12)", - "0px 8px 10px -5px rgba(0,0,0,0.2),0px 16px 24px 2px rgba(0,0,0,0.14),0px 6px 30px 5px rgba(0,0,0,0.12)", - "0px 8px 11px -5px rgba(0,0,0,0.2),0px 17px 26px 2px rgba(0,0,0,0.14),0px 6px 32px 5px rgba(0,0,0,0.12)", - "0px 9px 11px -5px rgba(0,0,0,0.2),0px 18px 28px 2px rgba(0,0,0,0.14),0px 7px 34px 6px rgba(0,0,0,0.12)", - "0px 9px 12px -6px rgba(0,0,0,0.2),0px 19px 29px 2px rgba(0,0,0,0.14),0px 7px 36px 6px rgba(0,0,0,0.12)", - "0px 10px 13px -6px rgba(0,0,0,0.2),0px 20px 31px 3px rgba(0,0,0,0.14),0px 8px 38px 7px rgba(0,0,0,0.12)", - "0px 10px 13px -6px rgba(0,0,0,0.2),0px 21px 33px 3px rgba(0,0,0,0.14),0px 8px 40px 7px rgba(0,0,0,0.12)", - "0px 10px 14px -6px rgba(0,0,0,0.2),0px 22px 35px 3px rgba(0,0,0,0.14),0px 8px 42px 7px rgba(0,0,0,0.12)", - "0px 11px 14px -7px rgba(0,0,0,0.2),0px 23px 36px 3px rgba(0,0,0,0.14),0px 9px 44px 8px rgba(0,0,0,0.12)", - "0px 11px 15px -7px rgba(0,0,0,0.2),0px 24px 38px 3px rgba(0,0,0,0.14),0px 9px 46px 8px rgba(0,0,0,0.12)", - ], - "shape": Object { - "borderRadius": 4, - }, - "spacing": [Function], - "transitions": Object { - "create": [Function], - "duration": Object { - "complex": 375, - "enteringScreen": 225, - "leavingScreen": 195, - "short": 250, - "shorter": 200, - "shortest": 150, - "standard": 300, - }, - "easing": Object { - "easeIn": "cubic-bezier(0.4, 0, 1, 1)", - "easeInOut": "cubic-bezier(0.4, 0, 0.2, 1)", - "easeOut": "cubic-bezier(0.0, 0, 0.2, 1)", - "sharp": "cubic-bezier(0.4, 0, 0.6, 1)", - }, - "getAutoHeightDuration": [Function], - }, - "typography": Object { - "body1": Object { - "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif", - "fontSize": "1rem", - "fontWeight": 400, - "letterSpacing": "0.00938em", - "lineHeight": 1.5, - }, - "body2": Object { - "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif", - "fontSize": "0.875rem", - "fontWeight": 400, - "letterSpacing": "0.01071em", - "lineHeight": 1.43, - }, - "button": Object { - "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif", - "fontSize": "0.875rem", - "fontWeight": 500, - "letterSpacing": "0.02857em", - "lineHeight": 1.75, - "textTransform": "uppercase", - }, - "caption": Object { - "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif", - "fontSize": "0.75rem", - "fontWeight": 400, - "letterSpacing": "0.03333em", - "lineHeight": 1.66, - }, - "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif", - "fontSize": 14, - "fontWeightBold": 700, - "fontWeightLight": 300, - "fontWeightMedium": 500, - "fontWeightRegular": 400, - "h1": Object { - "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif", - "fontSize": "6rem", - "fontWeight": 300, - "letterSpacing": "-0.01562em", - "lineHeight": 1.167, - }, - "h2": Object { - "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif", - "fontSize": "3.75rem", - "fontWeight": 300, - "letterSpacing": "-0.00833em", - "lineHeight": 1.2, - }, - "h3": Object { - "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif", - "fontSize": "3rem", - "fontWeight": 400, - "letterSpacing": "0em", - "lineHeight": 1.167, - }, - "h4": Object { - "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif", - "fontSize": "2.125rem", - "fontWeight": 400, - "letterSpacing": "0.00735em", - "lineHeight": 1.235, - }, - "h5": Object { - "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif", - "fontSize": "1.5rem", - "fontWeight": 400, - "letterSpacing": "0em", - "lineHeight": 1.334, - }, - "h6": Object { - "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif", - "fontSize": "1.25rem", - "fontWeight": 500, - "letterSpacing": "0.0075em", - "lineHeight": 1.6, - }, - "htmlFontSize": 16, - "overline": Object { - "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif", - "fontSize": "0.75rem", - "fontWeight": 400, - "letterSpacing": "0.08333em", - "lineHeight": 2.66, - "textTransform": "uppercase", - }, - "pxToRem": [Function], - "round": [Function], - "subtitle1": Object { - "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif", - "fontSize": "1rem", - "fontWeight": 400, - "letterSpacing": "0.00938em", - "lineHeight": 1.75, - }, - "subtitle2": Object { - "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif", - "fontSize": "0.875rem", - "fontWeight": 500, - "letterSpacing": "0.00714em", - "lineHeight": 1.57, - }, - }, - "zIndex": Object { - "appBar": 1100, - "drawer": 1200, - "mobileStepper": 1000, - "modal": 1300, - "snackbar": 1400, - "speedDial": 1050, - "tooltip": 1500, - }, - }, - "name": "MuiBackdrop", - }, - "propTypes": Object { - "classes": [Function], - "innerRef": [Function], - }, - "render": [Function], - "useStyles": [Function], - } - } - BackdropProps={ - Object { - "transitionDuration": Object { - "enter": 225, - "exit": 195, - }, - } - } - className="MuiDialog-root modal-root" - closeAfterTransition={true} - disableEscapeKeyDown={false} - onClose={[MockFunction]} - open={true} + <div + aria-labelledby="accessibility-title" + class="MuiPaper-root MuiDialog-paper modal-paper MuiDialog-paperScrollPaper MuiDialog-paperWidthSm MuiPaper-elevation24 MuiPaper-rounded" + role="dialog" > - <ForwardRef(Portal) - disablePortal={false} + <div + id="accessibility-title" + > + export.modal_done.accessibility_title + </div> + <div + class="modal-done-root" > - <Portal - containerInfo={ - <body - style="padding-right: 0px; overflow: hidden;" + <button + aria-label="export.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="18" + width="18" > - <div - aria-hidden="true" - class="MuiDialog-root modal-root" - role="presentation" - style="position: fixed; z-index: 1300; right: 0px; bottom: 0px; top: 0px; left: 0px;" - > - <div - aria-hidden="true" - class="MuiBackdrop-root" - style="opacity: 1; webkit-transition: opacity 225ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; transition: opacity 225ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;" - /> - <div - data-test="sentinelStart" - tabindex="0" - /> - <div - class="MuiDialog-container MuiDialog-scrollPaper" - role="none presentation" - style="opacity: 1; webkit-transition: opacity 225ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; transition: opacity 225ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;" - tabindex="-1" - > - <div - aria-labelledby="accessibility-title" - class="MuiPaper-root MuiDialog-paper modal-paper MuiDialog-paperScrollPaper MuiDialog-paperWidthSm MuiPaper-elevation24 MuiPaper-rounded" - role="dialog" - > - <div - id="accessibility-title" - > - export.modal_done.accessibility_title - </div> - <div - class="modal-done-root" - > - <button - aria-label="export.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="18" - width="18" - > - <use - xlink:href="#test-file-stub" - /> - </svg> - </span> - <span - class="MuiTouchRipple-root" - /> - </button> - <div - class="content" - > - <div - class="icon-main" - > - <svg - class="styles__icon___23x3R" - height="44" - width="44" - > - <use - xlink:href="#test-file-stub" - /> - </svg> - </div> - <div - class="text-16-bold subtitle" - > - export.modal_done.text1 - </div> - <div> - export.modal_done.text2 - </div> - <button - aria-label="export.modal_done.button_close" - class="MuiButtonBase-root MuiButton-root MuiButton-text btnPrimary" - tabindex="0" - type="button" - > - <span - class="MuiButton-label" - > - export.modal_done.button_close - </span> - <span - class="MuiTouchRipple-root" - /> - </button> - </div> - </div> - </div> - </div> - <div - data-test="sentinelEnd" - tabindex="0" - /> - </div> - <div - class="MuiDialog-root modal-root" - role="presentation" - style="position: fixed; z-index: 1300; right: 0px; bottom: 0px; top: 0px; left: 0px;" - > - <div - aria-hidden="true" - class="MuiBackdrop-root" - style="opacity: 1; webkit-transition: opacity 225ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; transition: opacity 225ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;" - /> - <div - data-test="sentinelStart" - tabindex="0" - /> - <div - class="MuiDialog-container MuiDialog-scrollPaper" - role="none presentation" - style="opacity: 1; webkit-transition: opacity 225ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; transition: opacity 225ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;" - tabindex="-1" - > - <div - aria-labelledby="accessibility-title" - class="MuiPaper-root MuiDialog-paper modal-paper MuiDialog-paperScrollPaper MuiDialog-paperWidthSm MuiPaper-elevation24 MuiPaper-rounded" - role="dialog" - > - <div - id="accessibility-title" - > - export.modal_done.accessibility_title - </div> - <div - class="modal-done-root" - > - <button - aria-label="export.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="18" - width="18" - > - <use - xlink:href="#test-file-stub" - /> - </svg> - </span> - <span - class="MuiTouchRipple-root" - /> - </button> - <div - class="content" - > - <div - class="icon-main" - > - <svg - class="styles__icon___23x3R" - height="44" - width="44" - > - <use - xlink:href="#test-file-stub" - /> - </svg> - </div> - <div - class="text-20-bold error1" - > - export.modal_done.error1 - </div> - <div - class="text-16-bold" - > - export.modal_done.error2 - </div> - <button - aria-label="export.modal_done.button_close" - class="MuiButtonBase-root MuiButton-root MuiButton-text btnPrimary" - tabindex="0" - type="button" - > - <span - class="MuiButton-label" - > - export.modal_done.button_close_error - </span> - <span - class="MuiTouchRipple-root" - /> - </button> - </div> - </div> - </div> - </div> - <div - data-test="sentinelEnd" - tabindex="0" - /> - </div> - </body> - } + <use + xlink:href="#test-file-stub" + /> + </svg> + </span> + <span + class="MuiTouchRipple-root" + /> + </button> + <div + class="content" > <div - className="MuiDialog-root modal-root" - onKeyDown={[Function]} - role="presentation" - style={ - Object { - "bottom": 0, - "left": 0, - "position": "fixed", - "right": 0, - "top": 0, - "zIndex": 1300, - } - } + class="icon-main" > - <WithStyles(ForwardRef(Backdrop)) - onClick={[Function]} - open={true} - transitionDuration={ - Object { - "enter": 225, - "exit": 195, - } - } - > - <ForwardRef(Backdrop) - classes={ - Object { - "invisible": "MuiBackdrop-invisible", - "root": "MuiBackdrop-root", - } - } - onClick={[Function]} - open={true} - transitionDuration={ - Object { - "enter": 225, - "exit": 195, - } - } - > - <ForwardRef(Fade) - in={true} - onClick={[Function]} - timeout={ - Object { - "enter": 225, - "exit": 195, - } - } - > - <Transition - appear={true} - enter={true} - exit={true} - in={true} - mountOnEnter={false} - onClick={[Function]} - onEnter={[Function]} - onEntered={[Function]} - onEntering={[Function]} - onExit={[Function]} - onExited={[Function]} - onExiting={[Function]} - timeout={ - Object { - "enter": 225, - "exit": 195, - } - } - unmountOnExit={false} - > - <div - aria-hidden={true} - className="MuiBackdrop-root" - onClick={[Function]} - style={ - Object { - "opacity": 1, - "visibility": undefined, - } - } - /> - </Transition> - </ForwardRef(Fade)> - </ForwardRef(Backdrop)> - </WithStyles(ForwardRef(Backdrop))> - <Unstable_TrapFocus - disableAutoFocus={false} - disableEnforceFocus={false} - disableRestoreFocus={false} - getDoc={[Function]} - isEnabled={[Function]} - open={true} + <svg + class="styles__icon___23x3R" + height="44" + width="44" > - <div - data-test="sentinelStart" - tabIndex={0} + <use + xlink:href="#test-file-stub" /> - <ForwardRef(Fade) - appear={true} - in={true} - onEnter={[Function]} - onExited={[Function]} - role="none presentation" - tabIndex="-1" - timeout={ - Object { - "enter": 225, - "exit": 195, - } - } - > - <Transition - appear={true} - enter={true} - exit={true} - in={true} - mountOnEnter={false} - onEnter={[Function]} - onEntered={[Function]} - onEntering={[Function]} - onExit={[Function]} - onExited={[Function]} - onExiting={[Function]} - role="none presentation" - tabIndex="-1" - timeout={ - Object { - "enter": 225, - "exit": 195, - } - } - unmountOnExit={false} - > - <div - className="MuiDialog-container MuiDialog-scrollPaper" - onMouseDown={[Function]} - onMouseUp={[Function]} - role="none presentation" - style={ - Object { - "opacity": 1, - "visibility": undefined, - } - } - tabIndex="-1" - > - <WithStyles(ForwardRef(Paper)) - aria-labelledby="accessibility-title" - className="MuiDialog-paper modal-paper MuiDialog-paperScrollPaper MuiDialog-paperWidthSm" - elevation={24} - role="dialog" - > - <ForwardRef(Paper) - aria-labelledby="accessibility-title" - className="MuiDialog-paper modal-paper MuiDialog-paperScrollPaper MuiDialog-paperWidthSm" - classes={ - Object { - "elevation0": "MuiPaper-elevation0", - "elevation1": "MuiPaper-elevation1", - "elevation10": "MuiPaper-elevation10", - "elevation11": "MuiPaper-elevation11", - "elevation12": "MuiPaper-elevation12", - "elevation13": "MuiPaper-elevation13", - "elevation14": "MuiPaper-elevation14", - "elevation15": "MuiPaper-elevation15", - "elevation16": "MuiPaper-elevation16", - "elevation17": "MuiPaper-elevation17", - "elevation18": "MuiPaper-elevation18", - "elevation19": "MuiPaper-elevation19", - "elevation2": "MuiPaper-elevation2", - "elevation20": "MuiPaper-elevation20", - "elevation21": "MuiPaper-elevation21", - "elevation22": "MuiPaper-elevation22", - "elevation23": "MuiPaper-elevation23", - "elevation24": "MuiPaper-elevation24", - "elevation3": "MuiPaper-elevation3", - "elevation4": "MuiPaper-elevation4", - "elevation5": "MuiPaper-elevation5", - "elevation6": "MuiPaper-elevation6", - "elevation7": "MuiPaper-elevation7", - "elevation8": "MuiPaper-elevation8", - "elevation9": "MuiPaper-elevation9", - "outlined": "MuiPaper-outlined", - "root": "MuiPaper-root", - "rounded": "MuiPaper-rounded", - } - } - elevation={24} - role="dialog" - > - <div - aria-labelledby="accessibility-title" - className="MuiPaper-root MuiDialog-paper modal-paper MuiDialog-paperScrollPaper MuiDialog-paperWidthSm MuiPaper-elevation24 MuiPaper-rounded" - role="dialog" - > - <div - id="accessibility-title" - > - export.modal_done.accessibility_title - </div> - <div - className="modal-done-root" - > - <WithStyles(ForwardRef(IconButton)) - aria-label="export.button_close" - className="modal-paper-close-button" - onClick={[MockFunction]} - > - <ForwardRef(IconButton) - aria-label="export.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]} - > - <WithStyles(ForwardRef(ButtonBase)) - aria-label="export.button_close" - centerRipple={true} - className="MuiIconButton-root modal-paper-close-button" - disabled={false} - focusRipple={true} - onClick={[MockFunction]} - > - <ForwardRef(ButtonBase) - aria-label="export.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]} - > - <button - aria-label="export.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" - > - <Icon - icon="test-file-stub" - size={18} - spin={false} - > - <Component - className="styles__icon___23x3R" - height={18} - style={Object {}} - width={18} - > - <svg - className="styles__icon___23x3R" - height={18} - style={Object {}} - width={18} - > - <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="content" - > - <div - className="icon-main" - > - <Icon - icon="test-file-stub" - size={44} - spin={false} - > - <Component - className="styles__icon___23x3R" - height={44} - style={Object {}} - width={44} - > - <svg - className="styles__icon___23x3R" - height={44} - style={Object {}} - width={44} - > - <use - xlinkHref="#test-file-stub" - /> - </svg> - </Component> - </Icon> - </div> - <div - className="text-20-bold error1" - > - export.modal_done.error1 - </div> - <div - className="text-16-bold" - > - export.modal_done.error2 - </div> - <WithStyles(ForwardRef(Button)) - aria-label="export.modal_done.button_close" - className="btnPrimary" - onClick={[MockFunction]} - > - <ForwardRef(Button) - aria-label="export.modal_done.button_close" - className="btnPrimary" - classes={ - Object { - "colorInherit": "MuiButton-colorInherit", - "contained": "MuiButton-contained", - "containedPrimary": "MuiButton-containedPrimary", - "containedSecondary": "MuiButton-containedSecondary", - "containedSizeLarge": "MuiButton-containedSizeLarge", - "containedSizeSmall": "MuiButton-containedSizeSmall", - "disableElevation": "MuiButton-disableElevation", - "disabled": "Mui-disabled", - "endIcon": "MuiButton-endIcon", - "focusVisible": "Mui-focusVisible", - "fullWidth": "MuiButton-fullWidth", - "iconSizeLarge": "MuiButton-iconSizeLarge", - "iconSizeMedium": "MuiButton-iconSizeMedium", - "iconSizeSmall": "MuiButton-iconSizeSmall", - "label": "MuiButton-label", - "outlined": "MuiButton-outlined", - "outlinedPrimary": "MuiButton-outlinedPrimary", - "outlinedSecondary": "MuiButton-outlinedSecondary", - "outlinedSizeLarge": "MuiButton-outlinedSizeLarge", - "outlinedSizeSmall": "MuiButton-outlinedSizeSmall", - "root": "MuiButton-root", - "sizeLarge": "MuiButton-sizeLarge", - "sizeSmall": "MuiButton-sizeSmall", - "startIcon": "MuiButton-startIcon", - "text": "MuiButton-text", - "textPrimary": "MuiButton-textPrimary", - "textSecondary": "MuiButton-textSecondary", - "textSizeLarge": "MuiButton-textSizeLarge", - "textSizeSmall": "MuiButton-textSizeSmall", - } - } - onClick={[MockFunction]} - > - <WithStyles(ForwardRef(ButtonBase)) - aria-label="export.modal_done.button_close" - className="MuiButton-root MuiButton-text btnPrimary" - component="button" - disabled={false} - focusRipple={true} - focusVisibleClassName="Mui-focusVisible" - onClick={[MockFunction]} - type="button" - > - <ForwardRef(ButtonBase) - aria-label="export.modal_done.button_close" - className="MuiButton-root MuiButton-text btnPrimary" - 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="export.modal_done.button_close" - className="MuiButtonBase-root MuiButton-root MuiButton-text btnPrimary" - 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" - > - export.modal_done.button_close_error - </span> - <WithStyles(memo) - center={false} - > - <ForwardRef(TouchRipple) - center={false} - classes={ - Object { - "child": "MuiTouchRipple-child", - "childLeaving": "MuiTouchRipple-childLeaving", - "childPulsate": "MuiTouchRipple-childPulsate", - "ripple": "MuiTouchRipple-ripple", - "ripplePulsate": "MuiTouchRipple-ripplePulsate", - "rippleVisible": "MuiTouchRipple-rippleVisible", - "root": "MuiTouchRipple-root", - } - } - > - <span - className="MuiTouchRipple-root" - > - <TransitionGroup - childFactory={[Function]} - component={null} - exit={true} - /> - </span> - </ForwardRef(TouchRipple)> - </WithStyles(memo)> - </button> - </ForwardRef(ButtonBase)> - </WithStyles(ForwardRef(ButtonBase))> - </ForwardRef(Button)> - </WithStyles(ForwardRef(Button))> - </div> - </div> - </div> - </ForwardRef(Paper)> - </WithStyles(ForwardRef(Paper))> - </div> - </Transition> - </ForwardRef(Fade)> - <div - data-test="sentinelEnd" - tabIndex={0} - /> - </Unstable_TrapFocus> + </svg> </div> - </Portal> - </ForwardRef(Portal)> - </ForwardRef(Modal)> - </ForwardRef(Dialog)> - </WithStyles(ForwardRef(Dialog))> -</ExportDoneModal> + <div + class="text-20-bold error1" + > + export.modal_done.error1 + </div> + <div + class="text-16-bold" + > + export.modal_done.error2 + </div> + <button + aria-label="export.modal_done.button_close" + class="MuiButtonBase-root MuiButton-root MuiButton-text btnPrimary" + tabindex="0" + type="button" + > + <span + class="MuiButton-label" + > + export.modal_done.button_close_error + </span> + <span + class="MuiTouchRipple-root" + /> + </button> + </div> + </div> + </div> + </div> + <div + data-test="sentinelEnd" + tabindex="0" + /> + </div> +</body> `; diff --git a/src/components/Options/ExportData/Modals/__snapshots__/exportLoadingModal.spec.tsx.snap b/src/components/Options/ExportData/Modals/__snapshots__/exportLoadingModal.spec.tsx.snap index 6ed914e558cc3f4a59792cad6cc277138dae81f4..523b4daa57c80aebfcdcdcc360170ee7023689a5 100644 --- a/src/components/Options/ExportData/Modals/__snapshots__/exportLoadingModal.spec.tsx.snap +++ b/src/components/Options/ExportData/Modals/__snapshots__/exportLoadingModal.spec.tsx.snap @@ -1,1025 +1,127 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP exports[`ExportLoadingModal component should be rendered correctly 1`] = ` -<ExportLoadingModal - handleCloseClick={[MockFunction]} - handleDone={[MockFunction]} - open={true} - selectedFluids={ - Array [ - 0, - 1, - 2, - ] - } +<body + style="padding-right: 0px; overflow: hidden;" > - <WithStyles(ForwardRef(Dialog)) - aria-labelledby="accessibility-title" - classes={ - Object { - "paper": "modal-paper", - "root": "modal-root", - } - } - onClose={[Function]} - open={true} + <div + aria-hidden="true" + /> + <div + class="MuiDialog-root modal-root" + role="presentation" + style="position: fixed; z-index: 1300; right: 0px; bottom: 0px; top: 0px; left: 0px;" > - <ForwardRef(Dialog) - aria-labelledby="accessibility-title" - classes={ - Object { - "container": "MuiDialog-container", - "paper": "MuiDialog-paper modal-paper", - "paperFullScreen": "MuiDialog-paperFullScreen", - "paperFullWidth": "MuiDialog-paperFullWidth", - "paperScrollBody": "MuiDialog-paperScrollBody", - "paperScrollPaper": "MuiDialog-paperScrollPaper", - "paperWidthFalse": "MuiDialog-paperWidthFalse", - "paperWidthLg": "MuiDialog-paperWidthLg", - "paperWidthMd": "MuiDialog-paperWidthMd", - "paperWidthSm": "MuiDialog-paperWidthSm", - "paperWidthXl": "MuiDialog-paperWidthXl", - "paperWidthXs": "MuiDialog-paperWidthXs", - "root": "MuiDialog-root modal-root", - "scrollBody": "MuiDialog-scrollBody", - "scrollPaper": "MuiDialog-scrollPaper", - } - } - onClose={[Function]} - open={true} + <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" > - <ForwardRef(Modal) - BackdropComponent={ - Object { - "$$typeof": Symbol(react.forward_ref), - "Naked": Object { - "$$typeof": Symbol(react.forward_ref), - "propTypes": Object { - "children": [Function], - "className": [Function], - "classes": [Function], - "invisible": [Function], - "open": [Function], - "transitionDuration": [Function], - }, - "render": [Function], - }, - "displayName": "WithStyles(ForwardRef(Backdrop))", - "options": Object { - "defaultTheme": Object { - "breakpoints": Object { - "between": [Function], - "down": [Function], - "keys": Array [ - "xs", - "sm", - "md", - "lg", - "xl", - ], - "only": [Function], - "up": [Function], - "values": Object { - "lg": 1280, - "md": 960, - "sm": 600, - "xl": 1920, - "xs": 0, - }, - "width": [Function], - }, - "direction": "ltr", - "mixins": Object { - "gutters": [Function], - "toolbar": Object { - "@media (min-width:0px) and (orientation: landscape)": Object { - "minHeight": 48, - }, - "@media (min-width:600px)": Object { - "minHeight": 64, - }, - "minHeight": 56, - }, - }, - "overrides": Object {}, - "palette": Object { - "action": Object { - "activatedOpacity": 0.12, - "active": "rgba(0, 0, 0, 0.54)", - "disabled": "rgba(0, 0, 0, 0.26)", - "disabledBackground": "rgba(0, 0, 0, 0.12)", - "disabledOpacity": 0.38, - "focus": "rgba(0, 0, 0, 0.12)", - "focusOpacity": 0.12, - "hover": "rgba(0, 0, 0, 0.04)", - "hoverOpacity": 0.04, - "selected": "rgba(0, 0, 0, 0.08)", - "selectedOpacity": 0.08, - }, - "augmentColor": [Function], - "background": Object { - "default": "#fafafa", - "paper": "#fff", - }, - "common": Object { - "black": "#000", - "white": "#fff", - }, - "contrastThreshold": 3, - "divider": "rgba(0, 0, 0, 0.12)", - "error": Object { - "contrastText": "#fff", - "dark": "#d32f2f", - "light": "#e57373", - "main": "#f44336", - }, - "getContrastText": [Function], - "grey": Object { - "100": "#f5f5f5", - "200": "#eeeeee", - "300": "#e0e0e0", - "400": "#bdbdbd", - "50": "#fafafa", - "500": "#9e9e9e", - "600": "#757575", - "700": "#616161", - "800": "#424242", - "900": "#212121", - "A100": "#d5d5d5", - "A200": "#aaaaaa", - "A400": "#303030", - "A700": "#616161", - }, - "info": Object { - "contrastText": "#fff", - "dark": "#1976d2", - "light": "#64b5f6", - "main": "#2196f3", - }, - "primary": Object { - "contrastText": "#fff", - "dark": "#303f9f", - "light": "#7986cb", - "main": "#3f51b5", - }, - "secondary": Object { - "contrastText": "#fff", - "dark": "#c51162", - "light": "#ff4081", - "main": "#f50057", - }, - "success": Object { - "contrastText": "rgba(0, 0, 0, 0.87)", - "dark": "#388e3c", - "light": "#81c784", - "main": "#4caf50", - }, - "text": Object { - "disabled": "rgba(0, 0, 0, 0.38)", - "hint": "rgba(0, 0, 0, 0.38)", - "primary": "rgba(0, 0, 0, 0.87)", - "secondary": "rgba(0, 0, 0, 0.54)", - }, - "tonalOffset": 0.2, - "type": "light", - "warning": Object { - "contrastText": "rgba(0, 0, 0, 0.87)", - "dark": "#f57c00", - "light": "#ffb74d", - "main": "#ff9800", - }, - }, - "props": Object {}, - "shadows": Array [ - "none", - "0px 2px 1px -1px rgba(0,0,0,0.2),0px 1px 1px 0px rgba(0,0,0,0.14),0px 1px 3px 0px rgba(0,0,0,0.12)", - "0px 3px 1px -2px rgba(0,0,0,0.2),0px 2px 2px 0px rgba(0,0,0,0.14),0px 1px 5px 0px rgba(0,0,0,0.12)", - "0px 3px 3px -2px rgba(0,0,0,0.2),0px 3px 4px 0px rgba(0,0,0,0.14),0px 1px 8px 0px rgba(0,0,0,0.12)", - "0px 2px 4px -1px rgba(0,0,0,0.2),0px 4px 5px 0px rgba(0,0,0,0.14),0px 1px 10px 0px rgba(0,0,0,0.12)", - "0px 3px 5px -1px rgba(0,0,0,0.2),0px 5px 8px 0px rgba(0,0,0,0.14),0px 1px 14px 0px rgba(0,0,0,0.12)", - "0px 3px 5px -1px rgba(0,0,0,0.2),0px 6px 10px 0px rgba(0,0,0,0.14),0px 1px 18px 0px rgba(0,0,0,0.12)", - "0px 4px 5px -2px rgba(0,0,0,0.2),0px 7px 10px 1px rgba(0,0,0,0.14),0px 2px 16px 1px rgba(0,0,0,0.12)", - "0px 5px 5px -3px rgba(0,0,0,0.2),0px 8px 10px 1px rgba(0,0,0,0.14),0px 3px 14px 2px rgba(0,0,0,0.12)", - "0px 5px 6px -3px rgba(0,0,0,0.2),0px 9px 12px 1px rgba(0,0,0,0.14),0px 3px 16px 2px rgba(0,0,0,0.12)", - "0px 6px 6px -3px rgba(0,0,0,0.2),0px 10px 14px 1px rgba(0,0,0,0.14),0px 4px 18px 3px rgba(0,0,0,0.12)", - "0px 6px 7px -4px rgba(0,0,0,0.2),0px 11px 15px 1px rgba(0,0,0,0.14),0px 4px 20px 3px rgba(0,0,0,0.12)", - "0px 7px 8px -4px rgba(0,0,0,0.2),0px 12px 17px 2px rgba(0,0,0,0.14),0px 5px 22px 4px rgba(0,0,0,0.12)", - "0px 7px 8px -4px rgba(0,0,0,0.2),0px 13px 19px 2px rgba(0,0,0,0.14),0px 5px 24px 4px rgba(0,0,0,0.12)", - "0px 7px 9px -4px rgba(0,0,0,0.2),0px 14px 21px 2px rgba(0,0,0,0.14),0px 5px 26px 4px rgba(0,0,0,0.12)", - "0px 8px 9px -5px rgba(0,0,0,0.2),0px 15px 22px 2px rgba(0,0,0,0.14),0px 6px 28px 5px rgba(0,0,0,0.12)", - "0px 8px 10px -5px rgba(0,0,0,0.2),0px 16px 24px 2px rgba(0,0,0,0.14),0px 6px 30px 5px rgba(0,0,0,0.12)", - "0px 8px 11px -5px rgba(0,0,0,0.2),0px 17px 26px 2px rgba(0,0,0,0.14),0px 6px 32px 5px rgba(0,0,0,0.12)", - "0px 9px 11px -5px rgba(0,0,0,0.2),0px 18px 28px 2px rgba(0,0,0,0.14),0px 7px 34px 6px rgba(0,0,0,0.12)", - "0px 9px 12px -6px rgba(0,0,0,0.2),0px 19px 29px 2px rgba(0,0,0,0.14),0px 7px 36px 6px rgba(0,0,0,0.12)", - "0px 10px 13px -6px rgba(0,0,0,0.2),0px 20px 31px 3px rgba(0,0,0,0.14),0px 8px 38px 7px rgba(0,0,0,0.12)", - "0px 10px 13px -6px rgba(0,0,0,0.2),0px 21px 33px 3px rgba(0,0,0,0.14),0px 8px 40px 7px rgba(0,0,0,0.12)", - "0px 10px 14px -6px rgba(0,0,0,0.2),0px 22px 35px 3px rgba(0,0,0,0.14),0px 8px 42px 7px rgba(0,0,0,0.12)", - "0px 11px 14px -7px rgba(0,0,0,0.2),0px 23px 36px 3px rgba(0,0,0,0.14),0px 9px 44px 8px rgba(0,0,0,0.12)", - "0px 11px 15px -7px rgba(0,0,0,0.2),0px 24px 38px 3px rgba(0,0,0,0.14),0px 9px 46px 8px rgba(0,0,0,0.12)", - ], - "shape": Object { - "borderRadius": 4, - }, - "spacing": [Function], - "transitions": Object { - "create": [Function], - "duration": Object { - "complex": 375, - "enteringScreen": 225, - "leavingScreen": 195, - "short": 250, - "shorter": 200, - "shortest": 150, - "standard": 300, - }, - "easing": Object { - "easeIn": "cubic-bezier(0.4, 0, 1, 1)", - "easeInOut": "cubic-bezier(0.4, 0, 0.2, 1)", - "easeOut": "cubic-bezier(0.0, 0, 0.2, 1)", - "sharp": "cubic-bezier(0.4, 0, 0.6, 1)", - }, - "getAutoHeightDuration": [Function], - }, - "typography": Object { - "body1": Object { - "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif", - "fontSize": "1rem", - "fontWeight": 400, - "letterSpacing": "0.00938em", - "lineHeight": 1.5, - }, - "body2": Object { - "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif", - "fontSize": "0.875rem", - "fontWeight": 400, - "letterSpacing": "0.01071em", - "lineHeight": 1.43, - }, - "button": Object { - "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif", - "fontSize": "0.875rem", - "fontWeight": 500, - "letterSpacing": "0.02857em", - "lineHeight": 1.75, - "textTransform": "uppercase", - }, - "caption": Object { - "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif", - "fontSize": "0.75rem", - "fontWeight": 400, - "letterSpacing": "0.03333em", - "lineHeight": 1.66, - }, - "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif", - "fontSize": 14, - "fontWeightBold": 700, - "fontWeightLight": 300, - "fontWeightMedium": 500, - "fontWeightRegular": 400, - "h1": Object { - "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif", - "fontSize": "6rem", - "fontWeight": 300, - "letterSpacing": "-0.01562em", - "lineHeight": 1.167, - }, - "h2": Object { - "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif", - "fontSize": "3.75rem", - "fontWeight": 300, - "letterSpacing": "-0.00833em", - "lineHeight": 1.2, - }, - "h3": Object { - "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif", - "fontSize": "3rem", - "fontWeight": 400, - "letterSpacing": "0em", - "lineHeight": 1.167, - }, - "h4": Object { - "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif", - "fontSize": "2.125rem", - "fontWeight": 400, - "letterSpacing": "0.00735em", - "lineHeight": 1.235, - }, - "h5": Object { - "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif", - "fontSize": "1.5rem", - "fontWeight": 400, - "letterSpacing": "0em", - "lineHeight": 1.334, - }, - "h6": Object { - "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif", - "fontSize": "1.25rem", - "fontWeight": 500, - "letterSpacing": "0.0075em", - "lineHeight": 1.6, - }, - "htmlFontSize": 16, - "overline": Object { - "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif", - "fontSize": "0.75rem", - "fontWeight": 400, - "letterSpacing": "0.08333em", - "lineHeight": 2.66, - "textTransform": "uppercase", - }, - "pxToRem": [Function], - "round": [Function], - "subtitle1": Object { - "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif", - "fontSize": "1rem", - "fontWeight": 400, - "letterSpacing": "0.00938em", - "lineHeight": 1.75, - }, - "subtitle2": Object { - "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif", - "fontSize": "0.875rem", - "fontWeight": 500, - "letterSpacing": "0.00714em", - "lineHeight": 1.57, - }, - }, - "zIndex": Object { - "appBar": 1100, - "drawer": 1200, - "mobileStepper": 1000, - "modal": 1300, - "snackbar": 1400, - "speedDial": 1050, - "tooltip": 1500, - }, - }, - "name": "MuiBackdrop", - }, - "propTypes": Object { - "classes": [Function], - "innerRef": [Function], - }, - "render": [Function], - "useStyles": [Function], - } - } - BackdropProps={ - Object { - "transitionDuration": Object { - "enter": 225, - "exit": 195, - }, - } - } - className="MuiDialog-root modal-root" - closeAfterTransition={true} - disableEscapeKeyDown={false} - onClose={[Function]} - open={true} + <div + aria-labelledby="accessibility-title" + class="MuiPaper-root MuiDialog-paper modal-paper MuiDialog-paperScrollPaper MuiDialog-paperWidthSm MuiPaper-elevation24 MuiPaper-rounded" + role="dialog" > - <ForwardRef(Portal) - disablePortal={false} + <div + id="accessibility-title" > - <Portal - containerInfo={ - <body - style="padding-right: 0px; overflow: hidden;" + export.modal_loading.accessibility_title + </div> + <div + class="modal-loading-root" + > + <button + aria-label="export.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="18" + width="18" + > + <use + xlink:href="#test-file-stub" + /> + </svg> + </span> + <span + class="MuiTouchRipple-root" + /> + </button> + <div + class="content" + > + <div + class="icon-main" + > + <div + class="loader gold" > <div - class="MuiDialog-root modal-root" - role="presentation" - style="position: fixed; z-index: 1300; right: 0px; bottom: 0px; top: 0px; left: 0px;" + aria-busy="true" + aria-label="common.accessibility.loading" + class="bars" + role="progressbar" + title="common.accessibility.loading" > <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;" + class="bar" /> <div - data-test="sentinelStart" - tabindex="0" + class="bar" /> <div - class="MuiDialog-container MuiDialog-scrollPaper" - role="none presentation" - style="opacity: 1; webkit-transition: opacity 225ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; transition: opacity 225ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;" - tabindex="-1" - > - <div - aria-labelledby="accessibility-title" - class="MuiPaper-root MuiDialog-paper modal-paper MuiDialog-paperScrollPaper MuiDialog-paperWidthSm MuiPaper-elevation24 MuiPaper-rounded" - role="dialog" - > - <div - id="accessibility-title" - > - export.modal_loading.accessibility_title - </div> - <div - class="modal-loading-root" - > - <button - aria-label="export.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="18" - width="18" - > - <use - xlink:href="#test-file-stub" - /> - </svg> - </span> - <span - class="MuiTouchRipple-root" - /> - </button> - <div - class="content" - > - <div - class="icon-main" - > - <div - class="loader gold" - > - <div - aria-busy="true" - aria-label="common.accessibility.loading" - class="bars" - role="progressbar" - title="common.accessibility.loading" - > - <div - class="bar" - /> - <div - class="bar" - /> - <div - class="bar" - /> - </div> - </div> - </div> - <div - class="text-16-bold subtitle" - > - export.modal_loading.text1 - </div> - <div> - export.modal_loading.text2 - </div> - <button - aria-label="export.modal_loading.button_cancel" - class="MuiButtonBase-root MuiButton-root MuiButton-text btnSecondary" - tabindex="0" - type="button" - > - <span - class="MuiButton-label" - > - export.modal_loading.button_cancel - </span> - <span - class="MuiTouchRipple-root" - /> - </button> - </div> - </div> - </div> - </div> - <div - data-test="sentinelEnd" - tabindex="0" + class="bar" /> </div> - </body> - } - > + </div> + </div> <div - className="MuiDialog-root modal-root" - onKeyDown={[Function]} - role="presentation" - style={ - Object { - "bottom": 0, - "left": 0, - "position": "fixed", - "right": 0, - "top": 0, - "zIndex": 1300, - } - } + class="text-16-bold subtitle" > - <WithStyles(ForwardRef(Backdrop)) - onClick={[Function]} - open={true} - transitionDuration={ - Object { - "enter": 225, - "exit": 195, - } - } - > - <ForwardRef(Backdrop) - classes={ - Object { - "invisible": "MuiBackdrop-invisible", - "root": "MuiBackdrop-root", - } - } - onClick={[Function]} - open={true} - transitionDuration={ - Object { - "enter": 225, - "exit": 195, - } - } - > - <ForwardRef(Fade) - in={true} - onClick={[Function]} - timeout={ - Object { - "enter": 225, - "exit": 195, - } - } - > - <Transition - appear={true} - enter={true} - exit={true} - in={true} - mountOnEnter={false} - onClick={[Function]} - onEnter={[Function]} - onEntered={[Function]} - onEntering={[Function]} - onExit={[Function]} - onExited={[Function]} - onExiting={[Function]} - timeout={ - Object { - "enter": 225, - "exit": 195, - } - } - unmountOnExit={false} - > - <div - aria-hidden={true} - className="MuiBackdrop-root" - onClick={[Function]} - style={ - Object { - "opacity": 1, - "visibility": undefined, - } - } - /> - </Transition> - </ForwardRef(Fade)> - </ForwardRef(Backdrop)> - </WithStyles(ForwardRef(Backdrop))> - <Unstable_TrapFocus - disableAutoFocus={false} - disableEnforceFocus={false} - disableRestoreFocus={false} - getDoc={[Function]} - isEnabled={[Function]} - open={true} - > - <div - data-test="sentinelStart" - tabIndex={0} - /> - <ForwardRef(Fade) - appear={true} - in={true} - onEnter={[Function]} - onExited={[Function]} - role="none presentation" - tabIndex="-1" - timeout={ - Object { - "enter": 225, - "exit": 195, - } - } - > - <Transition - appear={true} - enter={true} - exit={true} - in={true} - mountOnEnter={false} - onEnter={[Function]} - onEntered={[Function]} - onEntering={[Function]} - onExit={[Function]} - onExited={[Function]} - onExiting={[Function]} - role="none presentation" - tabIndex="-1" - timeout={ - Object { - "enter": 225, - "exit": 195, - } - } - unmountOnExit={false} - > - <div - className="MuiDialog-container MuiDialog-scrollPaper" - onMouseDown={[Function]} - onMouseUp={[Function]} - role="none presentation" - style={ - Object { - "opacity": 1, - "visibility": undefined, - } - } - tabIndex="-1" - > - <WithStyles(ForwardRef(Paper)) - aria-labelledby="accessibility-title" - className="MuiDialog-paper modal-paper MuiDialog-paperScrollPaper MuiDialog-paperWidthSm" - elevation={24} - role="dialog" - > - <ForwardRef(Paper) - aria-labelledby="accessibility-title" - className="MuiDialog-paper modal-paper MuiDialog-paperScrollPaper MuiDialog-paperWidthSm" - classes={ - Object { - "elevation0": "MuiPaper-elevation0", - "elevation1": "MuiPaper-elevation1", - "elevation10": "MuiPaper-elevation10", - "elevation11": "MuiPaper-elevation11", - "elevation12": "MuiPaper-elevation12", - "elevation13": "MuiPaper-elevation13", - "elevation14": "MuiPaper-elevation14", - "elevation15": "MuiPaper-elevation15", - "elevation16": "MuiPaper-elevation16", - "elevation17": "MuiPaper-elevation17", - "elevation18": "MuiPaper-elevation18", - "elevation19": "MuiPaper-elevation19", - "elevation2": "MuiPaper-elevation2", - "elevation20": "MuiPaper-elevation20", - "elevation21": "MuiPaper-elevation21", - "elevation22": "MuiPaper-elevation22", - "elevation23": "MuiPaper-elevation23", - "elevation24": "MuiPaper-elevation24", - "elevation3": "MuiPaper-elevation3", - "elevation4": "MuiPaper-elevation4", - "elevation5": "MuiPaper-elevation5", - "elevation6": "MuiPaper-elevation6", - "elevation7": "MuiPaper-elevation7", - "elevation8": "MuiPaper-elevation8", - "elevation9": "MuiPaper-elevation9", - "outlined": "MuiPaper-outlined", - "root": "MuiPaper-root", - "rounded": "MuiPaper-rounded", - } - } - elevation={24} - role="dialog" - > - <div - aria-labelledby="accessibility-title" - className="MuiPaper-root MuiDialog-paper modal-paper MuiDialog-paperScrollPaper MuiDialog-paperWidthSm MuiPaper-elevation24 MuiPaper-rounded" - role="dialog" - > - <div - id="accessibility-title" - > - export.modal_loading.accessibility_title - </div> - <div - className="modal-loading-root" - > - <WithStyles(ForwardRef(IconButton)) - aria-label="export.button_close" - className="modal-paper-close-button" - onClick={[MockFunction]} - > - <ForwardRef(IconButton) - aria-label="export.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]} - > - <WithStyles(ForwardRef(ButtonBase)) - aria-label="export.button_close" - centerRipple={true} - className="MuiIconButton-root modal-paper-close-button" - disabled={false} - focusRipple={true} - onClick={[MockFunction]} - > - <ForwardRef(ButtonBase) - aria-label="export.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]} - > - <button - aria-label="export.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" - > - <Icon - icon="test-file-stub" - size={18} - spin={false} - > - <Component - className="styles__icon___23x3R" - height={18} - style={Object {}} - width={18} - > - <svg - className="styles__icon___23x3R" - height={18} - style={Object {}} - width={18} - > - <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="content" - > - <div - className="icon-main" - > - <Loader - color="gold" - > - <div - className="loader gold" - > - <div - aria-busy="true" - aria-label="common.accessibility.loading" - className="bars" - role="progressbar" - title="common.accessibility.loading" - > - <div - className="bar" - /> - <div - className="bar" - /> - <div - className="bar" - /> - </div> - </div> - </Loader> - </div> - <div - className="text-16-bold subtitle" - > - export.modal_loading.text1 - </div> - <div> - export.modal_loading.text2 - </div> - <WithStyles(ForwardRef(Button)) - aria-label="export.modal_loading.button_cancel" - className="btnSecondary" - onClick={[MockFunction]} - > - <ForwardRef(Button) - aria-label="export.modal_loading.button_cancel" - className="btnSecondary" - classes={ - Object { - "colorInherit": "MuiButton-colorInherit", - "contained": "MuiButton-contained", - "containedPrimary": "MuiButton-containedPrimary", - "containedSecondary": "MuiButton-containedSecondary", - "containedSizeLarge": "MuiButton-containedSizeLarge", - "containedSizeSmall": "MuiButton-containedSizeSmall", - "disableElevation": "MuiButton-disableElevation", - "disabled": "Mui-disabled", - "endIcon": "MuiButton-endIcon", - "focusVisible": "Mui-focusVisible", - "fullWidth": "MuiButton-fullWidth", - "iconSizeLarge": "MuiButton-iconSizeLarge", - "iconSizeMedium": "MuiButton-iconSizeMedium", - "iconSizeSmall": "MuiButton-iconSizeSmall", - "label": "MuiButton-label", - "outlined": "MuiButton-outlined", - "outlinedPrimary": "MuiButton-outlinedPrimary", - "outlinedSecondary": "MuiButton-outlinedSecondary", - "outlinedSizeLarge": "MuiButton-outlinedSizeLarge", - "outlinedSizeSmall": "MuiButton-outlinedSizeSmall", - "root": "MuiButton-root", - "sizeLarge": "MuiButton-sizeLarge", - "sizeSmall": "MuiButton-sizeSmall", - "startIcon": "MuiButton-startIcon", - "text": "MuiButton-text", - "textPrimary": "MuiButton-textPrimary", - "textSecondary": "MuiButton-textSecondary", - "textSizeLarge": "MuiButton-textSizeLarge", - "textSizeSmall": "MuiButton-textSizeSmall", - } - } - onClick={[MockFunction]} - > - <WithStyles(ForwardRef(ButtonBase)) - aria-label="export.modal_loading.button_cancel" - className="MuiButton-root MuiButton-text btnSecondary" - component="button" - disabled={false} - focusRipple={true} - focusVisibleClassName="Mui-focusVisible" - onClick={[MockFunction]} - type="button" - > - <ForwardRef(ButtonBase) - aria-label="export.modal_loading.button_cancel" - className="MuiButton-root MuiButton-text btnSecondary" - classes={ - Object { - "disabled": "Mui-disabled", - "focusVisible": "Mui-focusVisible", - "root": "MuiButtonBase-root", - } - } - component="button" - disabled={false} - focusRipple={true} - focusVisibleClassName="Mui-focusVisible" - onClick={[MockFunction]} - type="button" - > - <button - aria-label="export.modal_loading.button_cancel" - className="MuiButtonBase-root MuiButton-root MuiButton-text btnSecondary" - 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" - > - export.modal_loading.button_cancel - </span> - <WithStyles(memo) - center={false} - > - <ForwardRef(TouchRipple) - center={false} - classes={ - Object { - "child": "MuiTouchRipple-child", - "childLeaving": "MuiTouchRipple-childLeaving", - "childPulsate": "MuiTouchRipple-childPulsate", - "ripple": "MuiTouchRipple-ripple", - "ripplePulsate": "MuiTouchRipple-ripplePulsate", - "rippleVisible": "MuiTouchRipple-rippleVisible", - "root": "MuiTouchRipple-root", - } - } - > - <span - className="MuiTouchRipple-root" - > - <TransitionGroup - childFactory={[Function]} - component={null} - exit={true} - /> - </span> - </ForwardRef(TouchRipple)> - </WithStyles(memo)> - </button> - </ForwardRef(ButtonBase)> - </WithStyles(ForwardRef(ButtonBase))> - </ForwardRef(Button)> - </WithStyles(ForwardRef(Button))> - </div> - </div> - </div> - </ForwardRef(Paper)> - </WithStyles(ForwardRef(Paper))> - </div> - </Transition> - </ForwardRef(Fade)> - <div - data-test="sentinelEnd" - tabIndex={0} - /> - </Unstable_TrapFocus> + export.modal_loading.text1 + </div> + <div> + export.modal_loading.text2 </div> - </Portal> - </ForwardRef(Portal)> - </ForwardRef(Modal)> - </ForwardRef(Dialog)> - </WithStyles(ForwardRef(Dialog))> -</ExportLoadingModal> + <button + aria-label="export.modal_loading.button_cancel" + class="MuiButtonBase-root MuiButton-root MuiButton-text btnSecondary" + tabindex="0" + type="button" + > + <span + class="MuiButton-label" + > + export.modal_loading.button_cancel + </span> + <span + class="MuiTouchRipple-root" + /> + </button> + </div> + </div> + </div> + </div> + <div + data-test="sentinelEnd" + tabindex="0" + /> + </div> +</body> `; diff --git a/src/components/Options/ExportData/Modals/__snapshots__/exportStartModal.spec.tsx.snap b/src/components/Options/ExportData/Modals/__snapshots__/exportStartModal.spec.tsx.snap index 2e7737e981edb15bad7fb38e68a1fccad9476ca5..dcd482806bf0e6bf6615d974fcdbbef16d16b656 100644 --- a/src/components/Options/ExportData/Modals/__snapshots__/exportStartModal.spec.tsx.snap +++ b/src/components/Options/ExportData/Modals/__snapshots__/exportStartModal.spec.tsx.snap @@ -1,1158 +1,136 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP exports[`exportStartModal component should be rendered correctly 1`] = ` -<ExportStartModal - handleCloseClick={[MockFunction]} - handleDownloadClick={[MockFunction]} - open={true} +<body + style="padding-right: 0px; overflow: hidden;" > - <WithStyles(ForwardRef(Dialog)) - aria-labelledby="accessibility_title" - classes={ - Object { - "paper": "modal-paper", - "root": "modal-root", - } - } - onClose={[MockFunction]} - open={true} + <div + aria-hidden="true" + /> + <div + class="MuiDialog-root modal-root" + role="presentation" + style="position: fixed; z-index: 1300; right: 0px; bottom: 0px; top: 0px; left: 0px;" > - <ForwardRef(Dialog) - aria-labelledby="accessibility_title" - classes={ - Object { - "container": "MuiDialog-container", - "paper": "MuiDialog-paper modal-paper", - "paperFullScreen": "MuiDialog-paperFullScreen", - "paperFullWidth": "MuiDialog-paperFullWidth", - "paperScrollBody": "MuiDialog-paperScrollBody", - "paperScrollPaper": "MuiDialog-paperScrollPaper", - "paperWidthFalse": "MuiDialog-paperWidthFalse", - "paperWidthLg": "MuiDialog-paperWidthLg", - "paperWidthMd": "MuiDialog-paperWidthMd", - "paperWidthSm": "MuiDialog-paperWidthSm", - "paperWidthXl": "MuiDialog-paperWidthXl", - "paperWidthXs": "MuiDialog-paperWidthXs", - "root": "MuiDialog-root modal-root", - "scrollBody": "MuiDialog-scrollBody", - "scrollPaper": "MuiDialog-scrollPaper", - } - } - onClose={[MockFunction]} - open={true} + <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" > - <ForwardRef(Modal) - BackdropComponent={ - Object { - "$$typeof": Symbol(react.forward_ref), - "Naked": Object { - "$$typeof": Symbol(react.forward_ref), - "propTypes": Object { - "children": [Function], - "className": [Function], - "classes": [Function], - "invisible": [Function], - "open": [Function], - "transitionDuration": [Function], - }, - "render": [Function], - }, - "displayName": "WithStyles(ForwardRef(Backdrop))", - "options": Object { - "defaultTheme": Object { - "breakpoints": Object { - "between": [Function], - "down": [Function], - "keys": Array [ - "xs", - "sm", - "md", - "lg", - "xl", - ], - "only": [Function], - "up": [Function], - "values": Object { - "lg": 1280, - "md": 960, - "sm": 600, - "xl": 1920, - "xs": 0, - }, - "width": [Function], - }, - "direction": "ltr", - "mixins": Object { - "gutters": [Function], - "toolbar": Object { - "@media (min-width:0px) and (orientation: landscape)": Object { - "minHeight": 48, - }, - "@media (min-width:600px)": Object { - "minHeight": 64, - }, - "minHeight": 56, - }, - }, - "overrides": Object {}, - "palette": Object { - "action": Object { - "activatedOpacity": 0.12, - "active": "rgba(0, 0, 0, 0.54)", - "disabled": "rgba(0, 0, 0, 0.26)", - "disabledBackground": "rgba(0, 0, 0, 0.12)", - "disabledOpacity": 0.38, - "focus": "rgba(0, 0, 0, 0.12)", - "focusOpacity": 0.12, - "hover": "rgba(0, 0, 0, 0.04)", - "hoverOpacity": 0.04, - "selected": "rgba(0, 0, 0, 0.08)", - "selectedOpacity": 0.08, - }, - "augmentColor": [Function], - "background": Object { - "default": "#fafafa", - "paper": "#fff", - }, - "common": Object { - "black": "#000", - "white": "#fff", - }, - "contrastThreshold": 3, - "divider": "rgba(0, 0, 0, 0.12)", - "error": Object { - "contrastText": "#fff", - "dark": "#d32f2f", - "light": "#e57373", - "main": "#f44336", - }, - "getContrastText": [Function], - "grey": Object { - "100": "#f5f5f5", - "200": "#eeeeee", - "300": "#e0e0e0", - "400": "#bdbdbd", - "50": "#fafafa", - "500": "#9e9e9e", - "600": "#757575", - "700": "#616161", - "800": "#424242", - "900": "#212121", - "A100": "#d5d5d5", - "A200": "#aaaaaa", - "A400": "#303030", - "A700": "#616161", - }, - "info": Object { - "contrastText": "#fff", - "dark": "#1976d2", - "light": "#64b5f6", - "main": "#2196f3", - }, - "primary": Object { - "contrastText": "#fff", - "dark": "#303f9f", - "light": "#7986cb", - "main": "#3f51b5", - }, - "secondary": Object { - "contrastText": "#fff", - "dark": "#c51162", - "light": "#ff4081", - "main": "#f50057", - }, - "success": Object { - "contrastText": "rgba(0, 0, 0, 0.87)", - "dark": "#388e3c", - "light": "#81c784", - "main": "#4caf50", - }, - "text": Object { - "disabled": "rgba(0, 0, 0, 0.38)", - "hint": "rgba(0, 0, 0, 0.38)", - "primary": "rgba(0, 0, 0, 0.87)", - "secondary": "rgba(0, 0, 0, 0.54)", - }, - "tonalOffset": 0.2, - "type": "light", - "warning": Object { - "contrastText": "rgba(0, 0, 0, 0.87)", - "dark": "#f57c00", - "light": "#ffb74d", - "main": "#ff9800", - }, - }, - "props": Object {}, - "shadows": Array [ - "none", - "0px 2px 1px -1px rgba(0,0,0,0.2),0px 1px 1px 0px rgba(0,0,0,0.14),0px 1px 3px 0px rgba(0,0,0,0.12)", - "0px 3px 1px -2px rgba(0,0,0,0.2),0px 2px 2px 0px rgba(0,0,0,0.14),0px 1px 5px 0px rgba(0,0,0,0.12)", - "0px 3px 3px -2px rgba(0,0,0,0.2),0px 3px 4px 0px rgba(0,0,0,0.14),0px 1px 8px 0px rgba(0,0,0,0.12)", - "0px 2px 4px -1px rgba(0,0,0,0.2),0px 4px 5px 0px rgba(0,0,0,0.14),0px 1px 10px 0px rgba(0,0,0,0.12)", - "0px 3px 5px -1px rgba(0,0,0,0.2),0px 5px 8px 0px rgba(0,0,0,0.14),0px 1px 14px 0px rgba(0,0,0,0.12)", - "0px 3px 5px -1px rgba(0,0,0,0.2),0px 6px 10px 0px rgba(0,0,0,0.14),0px 1px 18px 0px rgba(0,0,0,0.12)", - "0px 4px 5px -2px rgba(0,0,0,0.2),0px 7px 10px 1px rgba(0,0,0,0.14),0px 2px 16px 1px rgba(0,0,0,0.12)", - "0px 5px 5px -3px rgba(0,0,0,0.2),0px 8px 10px 1px rgba(0,0,0,0.14),0px 3px 14px 2px rgba(0,0,0,0.12)", - "0px 5px 6px -3px rgba(0,0,0,0.2),0px 9px 12px 1px rgba(0,0,0,0.14),0px 3px 16px 2px rgba(0,0,0,0.12)", - "0px 6px 6px -3px rgba(0,0,0,0.2),0px 10px 14px 1px rgba(0,0,0,0.14),0px 4px 18px 3px rgba(0,0,0,0.12)", - "0px 6px 7px -4px rgba(0,0,0,0.2),0px 11px 15px 1px rgba(0,0,0,0.14),0px 4px 20px 3px rgba(0,0,0,0.12)", - "0px 7px 8px -4px rgba(0,0,0,0.2),0px 12px 17px 2px rgba(0,0,0,0.14),0px 5px 22px 4px rgba(0,0,0,0.12)", - "0px 7px 8px -4px rgba(0,0,0,0.2),0px 13px 19px 2px rgba(0,0,0,0.14),0px 5px 24px 4px rgba(0,0,0,0.12)", - "0px 7px 9px -4px rgba(0,0,0,0.2),0px 14px 21px 2px rgba(0,0,0,0.14),0px 5px 26px 4px rgba(0,0,0,0.12)", - "0px 8px 9px -5px rgba(0,0,0,0.2),0px 15px 22px 2px rgba(0,0,0,0.14),0px 6px 28px 5px rgba(0,0,0,0.12)", - "0px 8px 10px -5px rgba(0,0,0,0.2),0px 16px 24px 2px rgba(0,0,0,0.14),0px 6px 30px 5px rgba(0,0,0,0.12)", - "0px 8px 11px -5px rgba(0,0,0,0.2),0px 17px 26px 2px rgba(0,0,0,0.14),0px 6px 32px 5px rgba(0,0,0,0.12)", - "0px 9px 11px -5px rgba(0,0,0,0.2),0px 18px 28px 2px rgba(0,0,0,0.14),0px 7px 34px 6px rgba(0,0,0,0.12)", - "0px 9px 12px -6px rgba(0,0,0,0.2),0px 19px 29px 2px rgba(0,0,0,0.14),0px 7px 36px 6px rgba(0,0,0,0.12)", - "0px 10px 13px -6px rgba(0,0,0,0.2),0px 20px 31px 3px rgba(0,0,0,0.14),0px 8px 38px 7px rgba(0,0,0,0.12)", - "0px 10px 13px -6px rgba(0,0,0,0.2),0px 21px 33px 3px rgba(0,0,0,0.14),0px 8px 40px 7px rgba(0,0,0,0.12)", - "0px 10px 14px -6px rgba(0,0,0,0.2),0px 22px 35px 3px rgba(0,0,0,0.14),0px 8px 42px 7px rgba(0,0,0,0.12)", - "0px 11px 14px -7px rgba(0,0,0,0.2),0px 23px 36px 3px rgba(0,0,0,0.14),0px 9px 44px 8px rgba(0,0,0,0.12)", - "0px 11px 15px -7px rgba(0,0,0,0.2),0px 24px 38px 3px rgba(0,0,0,0.14),0px 9px 46px 8px rgba(0,0,0,0.12)", - ], - "shape": Object { - "borderRadius": 4, - }, - "spacing": [Function], - "transitions": Object { - "create": [Function], - "duration": Object { - "complex": 375, - "enteringScreen": 225, - "leavingScreen": 195, - "short": 250, - "shorter": 200, - "shortest": 150, - "standard": 300, - }, - "easing": Object { - "easeIn": "cubic-bezier(0.4, 0, 1, 1)", - "easeInOut": "cubic-bezier(0.4, 0, 0.2, 1)", - "easeOut": "cubic-bezier(0.0, 0, 0.2, 1)", - "sharp": "cubic-bezier(0.4, 0, 0.6, 1)", - }, - "getAutoHeightDuration": [Function], - }, - "typography": Object { - "body1": Object { - "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif", - "fontSize": "1rem", - "fontWeight": 400, - "letterSpacing": "0.00938em", - "lineHeight": 1.5, - }, - "body2": Object { - "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif", - "fontSize": "0.875rem", - "fontWeight": 400, - "letterSpacing": "0.01071em", - "lineHeight": 1.43, - }, - "button": Object { - "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif", - "fontSize": "0.875rem", - "fontWeight": 500, - "letterSpacing": "0.02857em", - "lineHeight": 1.75, - "textTransform": "uppercase", - }, - "caption": Object { - "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif", - "fontSize": "0.75rem", - "fontWeight": 400, - "letterSpacing": "0.03333em", - "lineHeight": 1.66, - }, - "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif", - "fontSize": 14, - "fontWeightBold": 700, - "fontWeightLight": 300, - "fontWeightMedium": 500, - "fontWeightRegular": 400, - "h1": Object { - "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif", - "fontSize": "6rem", - "fontWeight": 300, - "letterSpacing": "-0.01562em", - "lineHeight": 1.167, - }, - "h2": Object { - "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif", - "fontSize": "3.75rem", - "fontWeight": 300, - "letterSpacing": "-0.00833em", - "lineHeight": 1.2, - }, - "h3": Object { - "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif", - "fontSize": "3rem", - "fontWeight": 400, - "letterSpacing": "0em", - "lineHeight": 1.167, - }, - "h4": Object { - "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif", - "fontSize": "2.125rem", - "fontWeight": 400, - "letterSpacing": "0.00735em", - "lineHeight": 1.235, - }, - "h5": Object { - "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif", - "fontSize": "1.5rem", - "fontWeight": 400, - "letterSpacing": "0em", - "lineHeight": 1.334, - }, - "h6": Object { - "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif", - "fontSize": "1.25rem", - "fontWeight": 500, - "letterSpacing": "0.0075em", - "lineHeight": 1.6, - }, - "htmlFontSize": 16, - "overline": Object { - "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif", - "fontSize": "0.75rem", - "fontWeight": 400, - "letterSpacing": "0.08333em", - "lineHeight": 2.66, - "textTransform": "uppercase", - }, - "pxToRem": [Function], - "round": [Function], - "subtitle1": Object { - "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif", - "fontSize": "1rem", - "fontWeight": 400, - "letterSpacing": "0.00938em", - "lineHeight": 1.75, - }, - "subtitle2": Object { - "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif", - "fontSize": "0.875rem", - "fontWeight": 500, - "letterSpacing": "0.00714em", - "lineHeight": 1.57, - }, - }, - "zIndex": Object { - "appBar": 1100, - "drawer": 1200, - "mobileStepper": 1000, - "modal": 1300, - "snackbar": 1400, - "speedDial": 1050, - "tooltip": 1500, - }, - }, - "name": "MuiBackdrop", - }, - "propTypes": Object { - "classes": [Function], - "innerRef": [Function], - }, - "render": [Function], - "useStyles": [Function], - } - } - BackdropProps={ - Object { - "transitionDuration": Object { - "enter": 225, - "exit": 195, - }, - } - } - className="MuiDialog-root modal-root" - closeAfterTransition={true} - disableEscapeKeyDown={false} - onClose={[MockFunction]} - open={true} + <div + aria-labelledby="accessibility_title" + class="MuiPaper-root MuiDialog-paper modal-paper MuiDialog-paperScrollPaper MuiDialog-paperWidthSm MuiPaper-elevation24 MuiPaper-rounded" + role="dialog" > - <ForwardRef(Portal) - disablePortal={false} + <div + id="accessibility-title" > - <Portal - containerInfo={ - <body - style="padding-right: 0px; overflow: hidden;" + export.modal_start.accessibility_title + </div> + <div + class="modal-start-root" + > + <button + aria-label="export.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="18" + width="18" > - <div - class="MuiDialog-root modal-root" - role="presentation" - style="position: fixed; z-index: 1300; right: 0px; bottom: 0px; top: 0px; left: 0px;" - > - <div - aria-hidden="true" - class="MuiBackdrop-root" - style="opacity: 1; webkit-transition: opacity 225ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; transition: opacity 225ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;" - /> - <div - data-test="sentinelStart" - tabindex="0" - /> - <div - class="MuiDialog-container MuiDialog-scrollPaper" - role="none presentation" - style="opacity: 1; webkit-transition: opacity 225ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; transition: opacity 225ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;" - tabindex="-1" - > - <div - aria-labelledby="accessibility_title" - class="MuiPaper-root MuiDialog-paper modal-paper MuiDialog-paperScrollPaper MuiDialog-paperWidthSm MuiPaper-elevation24 MuiPaper-rounded" - role="dialog" - > - <div - id="accessibility-title" - > - export.modal_start.accessibility_title - </div> - <div - class="modal-start-root" - > - <button - aria-label="export.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="18" - width="18" - > - <use - xlink:href="#test-file-stub" - /> - </svg> - </span> - <span - class="MuiTouchRipple-root" - /> - </button> - <div - class="content" - > - <div - class="icon-main" - > - <svg - class="styles__icon___23x3R" - height="48" - width="48" - > - <use - xlink:href="#test-file-stub" - /> - </svg> - </div> - <div - class="text-16-bold subtitle" - > - export.modal_start.text1 - </div> - <div> - export.modal_start.text2 - <br /> - export.modal_start.text3 - </div> - <div - class="buttons" - > - <button - aria-label="export.modal_start.button_cancel" - class="MuiButtonBase-root MuiButton-root MuiButton-text btnSecondary" - tabindex="0" - type="button" - > - <span - class="MuiButton-label" - > - export.modal_start.button_cancel - </span> - <span - class="MuiTouchRipple-root" - /> - </button> - <button - aria-label="export.button_download" - class="MuiButtonBase-root MuiButton-root MuiButton-text btnPrimary" - tabindex="0" - type="button" - > - <span - class="MuiButton-label" - > - export.button_download - </span> - <span - class="MuiTouchRipple-root" - /> - </button> - </div> - </div> - </div> - </div> - </div> - <div - data-test="sentinelEnd" - tabindex="0" - /> - </div> - </body> - } + <use + xlink:href="#test-file-stub" + /> + </svg> + </span> + <span + class="MuiTouchRipple-root" + /> + </button> + <div + class="content" > <div - className="MuiDialog-root modal-root" - onKeyDown={[Function]} - role="presentation" - style={ - Object { - "bottom": 0, - "left": 0, - "position": "fixed", - "right": 0, - "top": 0, - "zIndex": 1300, - } - } + class="icon-main" > - <WithStyles(ForwardRef(Backdrop)) - onClick={[Function]} - open={true} - transitionDuration={ - Object { - "enter": 225, - "exit": 195, - } - } + <svg + class="styles__icon___23x3R" + height="48" + width="48" > - <ForwardRef(Backdrop) - classes={ - Object { - "invisible": "MuiBackdrop-invisible", - "root": "MuiBackdrop-root", - } - } - onClick={[Function]} - open={true} - transitionDuration={ - Object { - "enter": 225, - "exit": 195, - } - } - > - <ForwardRef(Fade) - in={true} - onClick={[Function]} - timeout={ - Object { - "enter": 225, - "exit": 195, - } - } - > - <Transition - appear={true} - enter={true} - exit={true} - in={true} - mountOnEnter={false} - onClick={[Function]} - onEnter={[Function]} - onEntered={[Function]} - onEntering={[Function]} - onExit={[Function]} - onExited={[Function]} - onExiting={[Function]} - timeout={ - Object { - "enter": 225, - "exit": 195, - } - } - unmountOnExit={false} - > - <div - aria-hidden={true} - className="MuiBackdrop-root" - onClick={[Function]} - style={ - Object { - "opacity": 1, - "visibility": undefined, - } - } - /> - </Transition> - </ForwardRef(Fade)> - </ForwardRef(Backdrop)> - </WithStyles(ForwardRef(Backdrop))> - <Unstable_TrapFocus - disableAutoFocus={false} - disableEnforceFocus={false} - disableRestoreFocus={false} - getDoc={[Function]} - isEnabled={[Function]} - open={true} + <use + xlink:href="#test-file-stub" + /> + </svg> + </div> + <div + class="text-16-bold subtitle" + > + export.modal_start.text1 + </div> + <div> + export.modal_start.text2 + <br /> + export.modal_start.text3 + </div> + <div + class="buttons" + > + <button + aria-label="export.modal_start.button_cancel" + class="MuiButtonBase-root MuiButton-root MuiButton-text btnSecondary" + tabindex="0" + type="button" > - <div - data-test="sentinelStart" - tabIndex={0} + <span + class="MuiButton-label" + > + export.modal_start.button_cancel + </span> + <span + class="MuiTouchRipple-root" /> - <ForwardRef(Fade) - appear={true} - in={true} - onEnter={[Function]} - onExited={[Function]} - role="none presentation" - tabIndex="-1" - timeout={ - Object { - "enter": 225, - "exit": 195, - } - } + </button> + <button + aria-label="export.button_download" + class="MuiButtonBase-root MuiButton-root MuiButton-text btnPrimary" + tabindex="0" + type="button" + > + <span + class="MuiButton-label" > - <Transition - appear={true} - enter={true} - exit={true} - in={true} - mountOnEnter={false} - onEnter={[Function]} - onEntered={[Function]} - onEntering={[Function]} - onExit={[Function]} - onExited={[Function]} - onExiting={[Function]} - role="none presentation" - tabIndex="-1" - timeout={ - Object { - "enter": 225, - "exit": 195, - } - } - unmountOnExit={false} - > - <div - className="MuiDialog-container MuiDialog-scrollPaper" - onMouseDown={[Function]} - onMouseUp={[Function]} - role="none presentation" - style={ - Object { - "opacity": 1, - "visibility": undefined, - } - } - tabIndex="-1" - > - <WithStyles(ForwardRef(Paper)) - aria-labelledby="accessibility_title" - className="MuiDialog-paper modal-paper MuiDialog-paperScrollPaper MuiDialog-paperWidthSm" - elevation={24} - role="dialog" - > - <ForwardRef(Paper) - aria-labelledby="accessibility_title" - className="MuiDialog-paper modal-paper MuiDialog-paperScrollPaper MuiDialog-paperWidthSm" - classes={ - Object { - "elevation0": "MuiPaper-elevation0", - "elevation1": "MuiPaper-elevation1", - "elevation10": "MuiPaper-elevation10", - "elevation11": "MuiPaper-elevation11", - "elevation12": "MuiPaper-elevation12", - "elevation13": "MuiPaper-elevation13", - "elevation14": "MuiPaper-elevation14", - "elevation15": "MuiPaper-elevation15", - "elevation16": "MuiPaper-elevation16", - "elevation17": "MuiPaper-elevation17", - "elevation18": "MuiPaper-elevation18", - "elevation19": "MuiPaper-elevation19", - "elevation2": "MuiPaper-elevation2", - "elevation20": "MuiPaper-elevation20", - "elevation21": "MuiPaper-elevation21", - "elevation22": "MuiPaper-elevation22", - "elevation23": "MuiPaper-elevation23", - "elevation24": "MuiPaper-elevation24", - "elevation3": "MuiPaper-elevation3", - "elevation4": "MuiPaper-elevation4", - "elevation5": "MuiPaper-elevation5", - "elevation6": "MuiPaper-elevation6", - "elevation7": "MuiPaper-elevation7", - "elevation8": "MuiPaper-elevation8", - "elevation9": "MuiPaper-elevation9", - "outlined": "MuiPaper-outlined", - "root": "MuiPaper-root", - "rounded": "MuiPaper-rounded", - } - } - elevation={24} - role="dialog" - > - <div - aria-labelledby="accessibility_title" - className="MuiPaper-root MuiDialog-paper modal-paper MuiDialog-paperScrollPaper MuiDialog-paperWidthSm MuiPaper-elevation24 MuiPaper-rounded" - role="dialog" - > - <div - id="accessibility-title" - > - export.modal_start.accessibility_title - </div> - <div - className="modal-start-root" - > - <WithStyles(ForwardRef(IconButton)) - aria-label="export.button_close" - className="modal-paper-close-button" - onClick={[MockFunction]} - > - <ForwardRef(IconButton) - aria-label="export.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]} - > - <WithStyles(ForwardRef(ButtonBase)) - aria-label="export.button_close" - centerRipple={true} - className="MuiIconButton-root modal-paper-close-button" - disabled={false} - focusRipple={true} - onClick={[MockFunction]} - > - <ForwardRef(ButtonBase) - aria-label="export.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]} - > - <button - aria-label="export.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" - > - <Icon - icon="test-file-stub" - size={18} - spin={false} - > - <Component - className="styles__icon___23x3R" - height={18} - style={Object {}} - width={18} - > - <svg - className="styles__icon___23x3R" - height={18} - style={Object {}} - width={18} - > - <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="content" - > - <div - className="icon-main" - > - <Icon - icon="test-file-stub" - size={48} - spin={false} - > - <Component - className="styles__icon___23x3R" - height={48} - style={Object {}} - width={48} - > - <svg - className="styles__icon___23x3R" - height={48} - style={Object {}} - width={48} - > - <use - xlinkHref="#test-file-stub" - /> - </svg> - </Component> - </Icon> - </div> - <div - className="text-16-bold subtitle" - > - export.modal_start.text1 - </div> - <div> - export.modal_start.text2 - <br /> - export.modal_start.text3 - </div> - <div - className="buttons" - > - <WithStyles(ForwardRef(Button)) - aria-label="export.modal_start.button_cancel" - className="btnSecondary" - onClick={[MockFunction]} - > - <ForwardRef(Button) - aria-label="export.modal_start.button_cancel" - className="btnSecondary" - classes={ - Object { - "colorInherit": "MuiButton-colorInherit", - "contained": "MuiButton-contained", - "containedPrimary": "MuiButton-containedPrimary", - "containedSecondary": "MuiButton-containedSecondary", - "containedSizeLarge": "MuiButton-containedSizeLarge", - "containedSizeSmall": "MuiButton-containedSizeSmall", - "disableElevation": "MuiButton-disableElevation", - "disabled": "Mui-disabled", - "endIcon": "MuiButton-endIcon", - "focusVisible": "Mui-focusVisible", - "fullWidth": "MuiButton-fullWidth", - "iconSizeLarge": "MuiButton-iconSizeLarge", - "iconSizeMedium": "MuiButton-iconSizeMedium", - "iconSizeSmall": "MuiButton-iconSizeSmall", - "label": "MuiButton-label", - "outlined": "MuiButton-outlined", - "outlinedPrimary": "MuiButton-outlinedPrimary", - "outlinedSecondary": "MuiButton-outlinedSecondary", - "outlinedSizeLarge": "MuiButton-outlinedSizeLarge", - "outlinedSizeSmall": "MuiButton-outlinedSizeSmall", - "root": "MuiButton-root", - "sizeLarge": "MuiButton-sizeLarge", - "sizeSmall": "MuiButton-sizeSmall", - "startIcon": "MuiButton-startIcon", - "text": "MuiButton-text", - "textPrimary": "MuiButton-textPrimary", - "textSecondary": "MuiButton-textSecondary", - "textSizeLarge": "MuiButton-textSizeLarge", - "textSizeSmall": "MuiButton-textSizeSmall", - } - } - onClick={[MockFunction]} - > - <WithStyles(ForwardRef(ButtonBase)) - aria-label="export.modal_start.button_cancel" - className="MuiButton-root MuiButton-text btnSecondary" - component="button" - disabled={false} - focusRipple={true} - focusVisibleClassName="Mui-focusVisible" - onClick={[MockFunction]} - type="button" - > - <ForwardRef(ButtonBase) - aria-label="export.modal_start.button_cancel" - className="MuiButton-root MuiButton-text btnSecondary" - classes={ - Object { - "disabled": "Mui-disabled", - "focusVisible": "Mui-focusVisible", - "root": "MuiButtonBase-root", - } - } - component="button" - disabled={false} - focusRipple={true} - focusVisibleClassName="Mui-focusVisible" - onClick={[MockFunction]} - type="button" - > - <button - aria-label="export.modal_start.button_cancel" - className="MuiButtonBase-root MuiButton-root MuiButton-text btnSecondary" - 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" - > - export.modal_start.button_cancel - </span> - <WithStyles(memo) - center={false} - > - <ForwardRef(TouchRipple) - center={false} - classes={ - Object { - "child": "MuiTouchRipple-child", - "childLeaving": "MuiTouchRipple-childLeaving", - "childPulsate": "MuiTouchRipple-childPulsate", - "ripple": "MuiTouchRipple-ripple", - "ripplePulsate": "MuiTouchRipple-ripplePulsate", - "rippleVisible": "MuiTouchRipple-rippleVisible", - "root": "MuiTouchRipple-root", - } - } - > - <span - className="MuiTouchRipple-root" - > - <TransitionGroup - childFactory={[Function]} - component={null} - exit={true} - /> - </span> - </ForwardRef(TouchRipple)> - </WithStyles(memo)> - </button> - </ForwardRef(ButtonBase)> - </WithStyles(ForwardRef(ButtonBase))> - </ForwardRef(Button)> - </WithStyles(ForwardRef(Button))> - <WithStyles(ForwardRef(Button)) - aria-label="export.button_download" - className="btnPrimary" - onClick={[MockFunction]} - > - <ForwardRef(Button) - aria-label="export.button_download" - className="btnPrimary" - classes={ - Object { - "colorInherit": "MuiButton-colorInherit", - "contained": "MuiButton-contained", - "containedPrimary": "MuiButton-containedPrimary", - "containedSecondary": "MuiButton-containedSecondary", - "containedSizeLarge": "MuiButton-containedSizeLarge", - "containedSizeSmall": "MuiButton-containedSizeSmall", - "disableElevation": "MuiButton-disableElevation", - "disabled": "Mui-disabled", - "endIcon": "MuiButton-endIcon", - "focusVisible": "Mui-focusVisible", - "fullWidth": "MuiButton-fullWidth", - "iconSizeLarge": "MuiButton-iconSizeLarge", - "iconSizeMedium": "MuiButton-iconSizeMedium", - "iconSizeSmall": "MuiButton-iconSizeSmall", - "label": "MuiButton-label", - "outlined": "MuiButton-outlined", - "outlinedPrimary": "MuiButton-outlinedPrimary", - "outlinedSecondary": "MuiButton-outlinedSecondary", - "outlinedSizeLarge": "MuiButton-outlinedSizeLarge", - "outlinedSizeSmall": "MuiButton-outlinedSizeSmall", - "root": "MuiButton-root", - "sizeLarge": "MuiButton-sizeLarge", - "sizeSmall": "MuiButton-sizeSmall", - "startIcon": "MuiButton-startIcon", - "text": "MuiButton-text", - "textPrimary": "MuiButton-textPrimary", - "textSecondary": "MuiButton-textSecondary", - "textSizeLarge": "MuiButton-textSizeLarge", - "textSizeSmall": "MuiButton-textSizeSmall", - } - } - onClick={[MockFunction]} - > - <WithStyles(ForwardRef(ButtonBase)) - aria-label="export.button_download" - className="MuiButton-root MuiButton-text btnPrimary" - component="button" - disabled={false} - focusRipple={true} - focusVisibleClassName="Mui-focusVisible" - onClick={[MockFunction]} - type="button" - > - <ForwardRef(ButtonBase) - aria-label="export.button_download" - className="MuiButton-root MuiButton-text btnPrimary" - 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="export.button_download" - className="MuiButtonBase-root MuiButton-root MuiButton-text btnPrimary" - 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" - > - export.button_download - </span> - <WithStyles(memo) - center={false} - > - <ForwardRef(TouchRipple) - center={false} - classes={ - Object { - "child": "MuiTouchRipple-child", - "childLeaving": "MuiTouchRipple-childLeaving", - "childPulsate": "MuiTouchRipple-childPulsate", - "ripple": "MuiTouchRipple-ripple", - "ripplePulsate": "MuiTouchRipple-ripplePulsate", - "rippleVisible": "MuiTouchRipple-rippleVisible", - "root": "MuiTouchRipple-root", - } - } - > - <span - className="MuiTouchRipple-root" - > - <TransitionGroup - childFactory={[Function]} - component={null} - exit={true} - /> - </span> - </ForwardRef(TouchRipple)> - </WithStyles(memo)> - </button> - </ForwardRef(ButtonBase)> - </WithStyles(ForwardRef(ButtonBase))> - </ForwardRef(Button)> - </WithStyles(ForwardRef(Button))> - </div> - </div> - </div> - </div> - </ForwardRef(Paper)> - </WithStyles(ForwardRef(Paper))> - </div> - </Transition> - </ForwardRef(Fade)> - <div - data-test="sentinelEnd" - tabIndex={0} + export.button_download + </span> + <span + class="MuiTouchRipple-root" /> - </Unstable_TrapFocus> + </button> </div> - </Portal> - </ForwardRef(Portal)> - </ForwardRef(Modal)> - </ForwardRef(Dialog)> - </WithStyles(ForwardRef(Dialog))> -</ExportStartModal> + </div> + </div> + </div> + </div> + <div + data-test="sentinelEnd" + tabindex="0" + /> + </div> +</body> `; diff --git a/src/components/Options/ExportData/Modals/exportDoneModal.spec.tsx b/src/components/Options/ExportData/Modals/exportDoneModal.spec.tsx index 1120b2a2ed4b9fc0ef53f30e22f3c7c36c0a8d62..900cf07ee8850b8c838a864800023642fbe4d5dc 100644 --- a/src/components/Options/ExportData/Modals/exportDoneModal.spec.tsx +++ b/src/components/Options/ExportData/Modals/exportDoneModal.spec.tsx @@ -1,22 +1,22 @@ import { Button } from '@material-ui/core' +import { render } from '@testing-library/react' import { mount } from 'enzyme' -import toJson from 'enzyme-to-json' import React from 'react' import ExportDoneModal from './exportDoneModal' describe('exportDoneModal component', () => { it('should be rendered correctly', () => { - const wrapper = mount( + const { baseElement } = render( <ExportDoneModal open={true} error={false} handleCloseClick={jest.fn()} /> ) - expect(toJson(wrapper)).toMatchSnapshot() + expect(baseElement).toMatchSnapshot() }) it('should display error message', () => { - const wrapper = mount( + const { baseElement } = render( <ExportDoneModal open={true} error={true} handleCloseClick={jest.fn()} /> ) - expect(toJson(wrapper)).toMatchSnapshot() + expect(baseElement).toMatchSnapshot() }) it('should close modal', () => { diff --git a/src/components/Options/ExportData/Modals/exportLoadingModal.spec.tsx b/src/components/Options/ExportData/Modals/exportLoadingModal.spec.tsx index f5496cf073cea0ecdaca3c9b18706f840ac6d7b3..7825cae498e3a36b09ce1e16e61abcd53e83864c 100644 --- a/src/components/Options/ExportData/Modals/exportLoadingModal.spec.tsx +++ b/src/components/Options/ExportData/Modals/exportLoadingModal.spec.tsx @@ -1,13 +1,13 @@ import { Button } from '@material-ui/core' +import { render } from '@testing-library/react' import { mount } from 'enzyme' -import toJson from 'enzyme-to-json' import React from 'react' import { allFluids } from 'utils/utils' import ExportLoadingModal from './exportLoadingModal' describe('ExportLoadingModal component', () => { it('should be rendered correctly', () => { - const wrapper = mount( + const { baseElement } = render( <ExportLoadingModal open={true} handleCloseClick={jest.fn()} @@ -15,7 +15,7 @@ describe('ExportLoadingModal component', () => { selectedFluids={allFluids} /> ) - expect(toJson(wrapper)).toMatchSnapshot() + expect(baseElement).toMatchSnapshot() }) it('should cancel download', () => { diff --git a/src/components/Options/ExportData/Modals/exportStartModal.spec.tsx b/src/components/Options/ExportData/Modals/exportStartModal.spec.tsx index e34dfe5a8d50f094eecb0bae315acf23ed7ba5da..90c9fd18b4f2ca768ea42b80281254ec120e53d2 100644 --- a/src/components/Options/ExportData/Modals/exportStartModal.spec.tsx +++ b/src/components/Options/ExportData/Modals/exportStartModal.spec.tsx @@ -1,19 +1,19 @@ import { Button } from '@material-ui/core' +import { render } from '@testing-library/react' import { mount } from 'enzyme' -import toJson from 'enzyme-to-json' import React from 'react' import ExportStartModal from './exportStartModal' describe('exportStartModal component', () => { it('should be rendered correctly', () => { - const wrapper = mount( + const { baseElement } = render( <ExportStartModal open={true} handleCloseClick={jest.fn()} handleDownloadClick={jest.fn()} /> ) - expect(toJson(wrapper)).toMatchSnapshot() + expect(baseElement).toMatchSnapshot() }) it('should close modal', () => { diff --git a/src/components/Options/ExportData/__snapshots__/ExportData.spec.tsx.snap b/src/components/Options/ExportData/__snapshots__/ExportData.spec.tsx.snap index eb5007194ecc32f2b4130a22ede3bce138726a93..7bfb4b7882eb8397b07bade0bbd7b63505a5b3ec 100644 --- a/src/components/Options/ExportData/__snapshots__/ExportData.spec.tsx.snap +++ b/src/components/Options/ExportData/__snapshots__/ExportData.spec.tsx.snap @@ -1,1558 +1,103 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP exports[`exportOptions component should be rendered correctly 1`] = ` -<ExportData> +<div> <div - className="export-option-root" + class="export-option-root" > <div - className="export-option-content" + class="export-option-content" > - <WithStyles(ForwardRef(Accordion)) - classes={ - Object { - "root": "expansion-panel-root", - } - } - expanded={false} - onChange={[Function]} + <div + class="MuiPaper-root MuiAccordion-root expansion-panel-root MuiAccordion-rounded MuiPaper-elevation1 MuiPaper-rounded" > - <ForwardRef(Accordion) - classes={ - Object { - "disabled": "Mui-disabled", - "expanded": "Mui-expanded", - "root": "MuiAccordion-root expansion-panel-root", - "rounded": "MuiAccordion-rounded", - } - } - expanded={false} - onChange={[Function]} + <div + aria-disabled="false" + aria-expanded="false" + aria-label="profile_type.accessibility.button_toggle_export" + class="MuiButtonBase-root MuiAccordionSummary-root expansion-panel-summary" + role="button" + tabindex="0" > - <WithStyles(ForwardRef(Paper)) - className="MuiAccordion-root expansion-panel-root MuiAccordion-rounded" - square={false} + <div + class="MuiAccordionSummary-content expansion-panel-content" > - <ForwardRef(Paper) - className="MuiAccordion-root expansion-panel-root MuiAccordion-rounded" - 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", - } - } - square={false} + <svg + class="export-icon styles__icon___23x3R" + height="42" + width="42" + > + <use + xlink:href="#test-file-stub" + /> + </svg> + <div + class="text-16-normal accordion-title" + > + export.title_export + </div> + </div> + <div + aria-disabled="false" + aria-hidden="true" + class="MuiButtonBase-root MuiIconButton-root MuiAccordionSummary-expandIcon MuiIconButton-edgeEnd" + > + <span + class="MuiIconButton-label" + > + <svg + class="accordion-icon styles__icon___23x3R" + height="16" + width="16" + > + <use + xlink:href="#test-file-stub" + /> + </svg> + </span> + <span + class="MuiTouchRipple-root" + /> + </div> + </div> + <div + class="MuiCollapse-root MuiCollapse-hidden" + style="min-height: 0px;" + > + <div + class="MuiCollapse-wrapper" + > + <div + class="MuiCollapse-wrapperInner" > <div - className="MuiPaper-root MuiAccordion-root expansion-panel-root MuiAccordion-rounded MuiPaper-elevation1 MuiPaper-rounded" + role="region" > - <WithStyles(ForwardRef(AccordionSummary)) - aria-label="profile_type.accessibility.button_toggle_export" - classes={ - Object { - "content": "expansion-panel-content", - "root": "expansion-panel-summary", - } - } - expandIcon={ - <Icon - className="accordion-icon" - icon="test-file-stub" - size={16} - spin={false} - /> - } - key=".0" + <div + class="MuiAccordionDetails-root expansion-panel-details" > - <ForwardRef(AccordionSummary) - aria-label="profile_type.accessibility.button_toggle_export" - classes={ - Object { - "content": "MuiAccordionSummary-content expansion-panel-content", - "disabled": "Mui-disabled", - "expandIcon": "MuiAccordionSummary-expandIcon", - "expanded": "Mui-expanded", - "focusVisible": "Mui-focusVisible", - "focused": "Mui-focused", - "root": "MuiAccordionSummary-root expansion-panel-summary", - } - } - expandIcon={ - <Icon - className="accordion-icon" - icon="test-file-stub" - size={16} - spin={false} - /> - } + <div + class="text-15-normal grey" > - <WithStyles(ForwardRef(ButtonBase)) - aria-expanded={false} - aria-label="profile_type.accessibility.button_toggle_export" - className="MuiAccordionSummary-root expansion-panel-summary" - component="div" - disableRipple={true} - disabled={false} - focusRipple={false} - focusVisibleClassName="Mui-focusVisible Mui-focused" - onClick={[Function]} - > - <ForwardRef(ButtonBase) - aria-expanded={false} - aria-label="profile_type.accessibility.button_toggle_export" - className="MuiAccordionSummary-root expansion-panel-summary" - classes={ - Object { - "disabled": "Mui-disabled", - "focusVisible": "Mui-focusVisible", - "root": "MuiButtonBase-root", - } - } - component="div" - disableRipple={true} - disabled={false} - focusRipple={false} - focusVisibleClassName="Mui-focusVisible Mui-focused" - onClick={[Function]} - > - <div - aria-disabled={false} - aria-expanded={false} - aria-label="profile_type.accessibility.button_toggle_export" - className="MuiButtonBase-root MuiAccordionSummary-root expansion-panel-summary" - 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="button" - tabIndex={0} - > - <div - className="MuiAccordionSummary-content expansion-panel-content" - > - <Icon - className="export-icon" - icon="test-file-stub" - size={42} - spin={false} - > - <Component - className="export-icon styles__icon___23x3R" - height={42} - style={Object {}} - width={42} - > - <svg - className="export-icon styles__icon___23x3R" - height={42} - style={Object {}} - width={42} - > - <use - xlinkHref="#test-file-stub" - /> - </svg> - </Component> - </Icon> - <div - className="text-16-normal accordion-title" - > - export.title_export - </div> - </div> - <WithStyles(ForwardRef(IconButton)) - aria-hidden={true} - className="MuiAccordionSummary-expandIcon" - component="div" - edge="end" - role={null} - tabIndex={null} - > - <ForwardRef(IconButton) - aria-hidden={true} - className="MuiAccordionSummary-expandIcon" - 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", - } - } - component="div" - edge="end" - role={null} - tabIndex={null} - > - <WithStyles(ForwardRef(ButtonBase)) - aria-hidden={true} - centerRipple={true} - className="MuiIconButton-root MuiAccordionSummary-expandIcon MuiIconButton-edgeEnd" - component="div" - disabled={false} - focusRipple={true} - role={null} - tabIndex={null} - > - <ForwardRef(ButtonBase) - aria-hidden={true} - centerRipple={true} - className="MuiIconButton-root MuiAccordionSummary-expandIcon MuiIconButton-edgeEnd" - classes={ - Object { - "disabled": "Mui-disabled", - "focusVisible": "Mui-focusVisible", - "root": "MuiButtonBase-root", - } - } - component="div" - disabled={false} - focusRipple={true} - role={null} - tabIndex={null} - > - <div - aria-disabled={false} - aria-hidden={true} - className="MuiButtonBase-root MuiIconButton-root MuiAccordionSummary-expandIcon MuiIconButton-edgeEnd" - onBlur={[Function]} - onDragLeave={[Function]} - onFocus={[Function]} - onKeyDown={[Function]} - onKeyUp={[Function]} - onMouseDown={[Function]} - onMouseLeave={[Function]} - onMouseUp={[Function]} - onTouchEnd={[Function]} - onTouchMove={[Function]} - onTouchStart={[Function]} - role={null} - tabIndex={null} - > - <span - className="MuiIconButton-label" - > - <Icon - className="accordion-icon" - icon="test-file-stub" - size={16} - spin={false} - > - <Component - className="accordion-icon styles__icon___23x3R" - height={16} - style={Object {}} - width={16} - > - <svg - className="accordion-icon 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)> - </div> - </ForwardRef(ButtonBase)> - </WithStyles(ForwardRef(ButtonBase))> - </ForwardRef(IconButton)> - </WithStyles(ForwardRef(IconButton))> - </div> - </ForwardRef(ButtonBase)> - </WithStyles(ForwardRef(ButtonBase))> - </ForwardRef(AccordionSummary)> - </WithStyles(ForwardRef(AccordionSummary))> - <WithStyles(ForwardRef(Collapse)) - in={false} - timeout="auto" - > - <ForwardRef(Collapse) - classes={ - Object { - "entered": "MuiCollapse-entered", - "hidden": "MuiCollapse-hidden", - "root": "MuiCollapse-root", - "wrapper": "MuiCollapse-wrapper", - "wrapperInner": "MuiCollapse-wrapperInner", - } - } - in={false} - timeout="auto" + export.text1 + </div> + <div + class="text-16-bold" + > + export.fluid_select + </div> + <div + class="text-15-normal grey" > - <Transition - addEndListener={[Function]} - appear={false} - enter={true} - exit={true} - in={false} - mountOnEnter={false} - onEnter={[Function]} - onEntered={[Function]} - onEntering={[Function]} - onExit={[Function]} - onExited={[Function]} - onExiting={[Function]} - timeout={null} - unmountOnExit={false} - > - <div - className="MuiCollapse-root MuiCollapse-hidden" - style={ - Object { - "minHeight": "0px", - } - } - > - <div - className="MuiCollapse-wrapper" - > - <div - className="MuiCollapse-wrapperInner" - > - <div - role="region" - > - <WithStyles(ForwardRef(AccordionDetails)) - classes={ - Object { - "root": "expansion-panel-details", - } - } - key=".1" - > - <ForwardRef(AccordionDetails) - classes={ - Object { - "root": "MuiAccordionDetails-root expansion-panel-details", - } - } - > - <div - className="MuiAccordionDetails-root expansion-panel-details" - > - <div - className="text-15-normal grey" - > - export.text1 - </div> - <div - className="text-16-bold" - > - export.fluid_select - </div> - <div - className="text-15-normal grey" - > - export.no_data - </div> - </div> - </ForwardRef(AccordionDetails)> - </WithStyles(ForwardRef(AccordionDetails))> - </div> - </div> - </div> - </div> - </Transition> - </ForwardRef(Collapse)> - </WithStyles(ForwardRef(Collapse))> + export.no_data + </div> + </div> </div> - </ForwardRef(Paper)> - </WithStyles(ForwardRef(Paper))> - </ForwardRef(Accordion)> - </WithStyles(ForwardRef(Accordion))> + </div> + </div> + </div> + </div> </div> </div> - <ExportStartModal - handleCloseClick={[Function]} - handleDownloadClick={[Function]} - open={false} - > - <WithStyles(ForwardRef(Dialog)) - aria-labelledby="accessibility_title" - classes={ - Object { - "paper": "modal-paper", - "root": "modal-root", - } - } - onClose={[Function]} - open={false} - > - <ForwardRef(Dialog) - aria-labelledby="accessibility_title" - classes={ - Object { - "container": "MuiDialog-container", - "paper": "MuiDialog-paper modal-paper", - "paperFullScreen": "MuiDialog-paperFullScreen", - "paperFullWidth": "MuiDialog-paperFullWidth", - "paperScrollBody": "MuiDialog-paperScrollBody", - "paperScrollPaper": "MuiDialog-paperScrollPaper", - "paperWidthFalse": "MuiDialog-paperWidthFalse", - "paperWidthLg": "MuiDialog-paperWidthLg", - "paperWidthMd": "MuiDialog-paperWidthMd", - "paperWidthSm": "MuiDialog-paperWidthSm", - "paperWidthXl": "MuiDialog-paperWidthXl", - "paperWidthXs": "MuiDialog-paperWidthXs", - "root": "MuiDialog-root modal-root", - "scrollBody": "MuiDialog-scrollBody", - "scrollPaper": "MuiDialog-scrollPaper", - } - } - onClose={[Function]} - open={false} - > - <ForwardRef(Modal) - BackdropComponent={ - Object { - "$$typeof": Symbol(react.forward_ref), - "Naked": Object { - "$$typeof": Symbol(react.forward_ref), - "propTypes": Object { - "children": [Function], - "className": [Function], - "classes": [Function], - "invisible": [Function], - "open": [Function], - "transitionDuration": [Function], - }, - "render": [Function], - }, - "displayName": "WithStyles(ForwardRef(Backdrop))", - "options": Object { - "defaultTheme": Object { - "breakpoints": Object { - "between": [Function], - "down": [Function], - "keys": Array [ - "xs", - "sm", - "md", - "lg", - "xl", - ], - "only": [Function], - "up": [Function], - "values": Object { - "lg": 1280, - "md": 960, - "sm": 600, - "xl": 1920, - "xs": 0, - }, - "width": [Function], - }, - "direction": "ltr", - "mixins": Object { - "gutters": [Function], - "toolbar": Object { - "@media (min-width:0px) and (orientation: landscape)": Object { - "minHeight": 48, - }, - "@media (min-width:600px)": Object { - "minHeight": 64, - }, - "minHeight": 56, - }, - }, - "overrides": Object {}, - "palette": Object { - "action": Object { - "activatedOpacity": 0.12, - "active": "rgba(0, 0, 0, 0.54)", - "disabled": "rgba(0, 0, 0, 0.26)", - "disabledBackground": "rgba(0, 0, 0, 0.12)", - "disabledOpacity": 0.38, - "focus": "rgba(0, 0, 0, 0.12)", - "focusOpacity": 0.12, - "hover": "rgba(0, 0, 0, 0.04)", - "hoverOpacity": 0.04, - "selected": "rgba(0, 0, 0, 0.08)", - "selectedOpacity": 0.08, - }, - "augmentColor": [Function], - "background": Object { - "default": "#fafafa", - "paper": "#fff", - }, - "common": Object { - "black": "#000", - "white": "#fff", - }, - "contrastThreshold": 3, - "divider": "rgba(0, 0, 0, 0.12)", - "error": Object { - "contrastText": "#fff", - "dark": "#d32f2f", - "light": "#e57373", - "main": "#f44336", - }, - "getContrastText": [Function], - "grey": Object { - "100": "#f5f5f5", - "200": "#eeeeee", - "300": "#e0e0e0", - "400": "#bdbdbd", - "50": "#fafafa", - "500": "#9e9e9e", - "600": "#757575", - "700": "#616161", - "800": "#424242", - "900": "#212121", - "A100": "#d5d5d5", - "A200": "#aaaaaa", - "A400": "#303030", - "A700": "#616161", - }, - "info": Object { - "contrastText": "#fff", - "dark": "#1976d2", - "light": "#64b5f6", - "main": "#2196f3", - }, - "primary": Object { - "contrastText": "#fff", - "dark": "#303f9f", - "light": "#7986cb", - "main": "#3f51b5", - }, - "secondary": Object { - "contrastText": "#fff", - "dark": "#c51162", - "light": "#ff4081", - "main": "#f50057", - }, - "success": Object { - "contrastText": "rgba(0, 0, 0, 0.87)", - "dark": "#388e3c", - "light": "#81c784", - "main": "#4caf50", - }, - "text": Object { - "disabled": "rgba(0, 0, 0, 0.38)", - "hint": "rgba(0, 0, 0, 0.38)", - "primary": "rgba(0, 0, 0, 0.87)", - "secondary": "rgba(0, 0, 0, 0.54)", - }, - "tonalOffset": 0.2, - "type": "light", - "warning": Object { - "contrastText": "rgba(0, 0, 0, 0.87)", - "dark": "#f57c00", - "light": "#ffb74d", - "main": "#ff9800", - }, - }, - "props": Object {}, - "shadows": Array [ - "none", - "0px 2px 1px -1px rgba(0,0,0,0.2),0px 1px 1px 0px rgba(0,0,0,0.14),0px 1px 3px 0px rgba(0,0,0,0.12)", - "0px 3px 1px -2px rgba(0,0,0,0.2),0px 2px 2px 0px rgba(0,0,0,0.14),0px 1px 5px 0px rgba(0,0,0,0.12)", - "0px 3px 3px -2px rgba(0,0,0,0.2),0px 3px 4px 0px rgba(0,0,0,0.14),0px 1px 8px 0px rgba(0,0,0,0.12)", - "0px 2px 4px -1px rgba(0,0,0,0.2),0px 4px 5px 0px rgba(0,0,0,0.14),0px 1px 10px 0px rgba(0,0,0,0.12)", - "0px 3px 5px -1px rgba(0,0,0,0.2),0px 5px 8px 0px rgba(0,0,0,0.14),0px 1px 14px 0px rgba(0,0,0,0.12)", - "0px 3px 5px -1px rgba(0,0,0,0.2),0px 6px 10px 0px rgba(0,0,0,0.14),0px 1px 18px 0px rgba(0,0,0,0.12)", - "0px 4px 5px -2px rgba(0,0,0,0.2),0px 7px 10px 1px rgba(0,0,0,0.14),0px 2px 16px 1px rgba(0,0,0,0.12)", - "0px 5px 5px -3px rgba(0,0,0,0.2),0px 8px 10px 1px rgba(0,0,0,0.14),0px 3px 14px 2px rgba(0,0,0,0.12)", - "0px 5px 6px -3px rgba(0,0,0,0.2),0px 9px 12px 1px rgba(0,0,0,0.14),0px 3px 16px 2px rgba(0,0,0,0.12)", - "0px 6px 6px -3px rgba(0,0,0,0.2),0px 10px 14px 1px rgba(0,0,0,0.14),0px 4px 18px 3px rgba(0,0,0,0.12)", - "0px 6px 7px -4px rgba(0,0,0,0.2),0px 11px 15px 1px rgba(0,0,0,0.14),0px 4px 20px 3px rgba(0,0,0,0.12)", - "0px 7px 8px -4px rgba(0,0,0,0.2),0px 12px 17px 2px rgba(0,0,0,0.14),0px 5px 22px 4px rgba(0,0,0,0.12)", - "0px 7px 8px -4px rgba(0,0,0,0.2),0px 13px 19px 2px rgba(0,0,0,0.14),0px 5px 24px 4px rgba(0,0,0,0.12)", - "0px 7px 9px -4px rgba(0,0,0,0.2),0px 14px 21px 2px rgba(0,0,0,0.14),0px 5px 26px 4px rgba(0,0,0,0.12)", - "0px 8px 9px -5px rgba(0,0,0,0.2),0px 15px 22px 2px rgba(0,0,0,0.14),0px 6px 28px 5px rgba(0,0,0,0.12)", - "0px 8px 10px -5px rgba(0,0,0,0.2),0px 16px 24px 2px rgba(0,0,0,0.14),0px 6px 30px 5px rgba(0,0,0,0.12)", - "0px 8px 11px -5px rgba(0,0,0,0.2),0px 17px 26px 2px rgba(0,0,0,0.14),0px 6px 32px 5px rgba(0,0,0,0.12)", - "0px 9px 11px -5px rgba(0,0,0,0.2),0px 18px 28px 2px rgba(0,0,0,0.14),0px 7px 34px 6px rgba(0,0,0,0.12)", - "0px 9px 12px -6px rgba(0,0,0,0.2),0px 19px 29px 2px rgba(0,0,0,0.14),0px 7px 36px 6px rgba(0,0,0,0.12)", - "0px 10px 13px -6px rgba(0,0,0,0.2),0px 20px 31px 3px rgba(0,0,0,0.14),0px 8px 38px 7px rgba(0,0,0,0.12)", - "0px 10px 13px -6px rgba(0,0,0,0.2),0px 21px 33px 3px rgba(0,0,0,0.14),0px 8px 40px 7px rgba(0,0,0,0.12)", - "0px 10px 14px -6px rgba(0,0,0,0.2),0px 22px 35px 3px rgba(0,0,0,0.14),0px 8px 42px 7px rgba(0,0,0,0.12)", - "0px 11px 14px -7px rgba(0,0,0,0.2),0px 23px 36px 3px rgba(0,0,0,0.14),0px 9px 44px 8px rgba(0,0,0,0.12)", - "0px 11px 15px -7px rgba(0,0,0,0.2),0px 24px 38px 3px rgba(0,0,0,0.14),0px 9px 46px 8px rgba(0,0,0,0.12)", - ], - "shape": Object { - "borderRadius": 4, - }, - "spacing": [Function], - "transitions": Object { - "create": [Function], - "duration": Object { - "complex": 375, - "enteringScreen": 225, - "leavingScreen": 195, - "short": 250, - "shorter": 200, - "shortest": 150, - "standard": 300, - }, - "easing": Object { - "easeIn": "cubic-bezier(0.4, 0, 1, 1)", - "easeInOut": "cubic-bezier(0.4, 0, 0.2, 1)", - "easeOut": "cubic-bezier(0.0, 0, 0.2, 1)", - "sharp": "cubic-bezier(0.4, 0, 0.6, 1)", - }, - "getAutoHeightDuration": [Function], - }, - "typography": Object { - "body1": Object { - "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif", - "fontSize": "1rem", - "fontWeight": 400, - "letterSpacing": "0.00938em", - "lineHeight": 1.5, - }, - "body2": Object { - "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif", - "fontSize": "0.875rem", - "fontWeight": 400, - "letterSpacing": "0.01071em", - "lineHeight": 1.43, - }, - "button": Object { - "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif", - "fontSize": "0.875rem", - "fontWeight": 500, - "letterSpacing": "0.02857em", - "lineHeight": 1.75, - "textTransform": "uppercase", - }, - "caption": Object { - "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif", - "fontSize": "0.75rem", - "fontWeight": 400, - "letterSpacing": "0.03333em", - "lineHeight": 1.66, - }, - "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif", - "fontSize": 14, - "fontWeightBold": 700, - "fontWeightLight": 300, - "fontWeightMedium": 500, - "fontWeightRegular": 400, - "h1": Object { - "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif", - "fontSize": "6rem", - "fontWeight": 300, - "letterSpacing": "-0.01562em", - "lineHeight": 1.167, - }, - "h2": Object { - "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif", - "fontSize": "3.75rem", - "fontWeight": 300, - "letterSpacing": "-0.00833em", - "lineHeight": 1.2, - }, - "h3": Object { - "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif", - "fontSize": "3rem", - "fontWeight": 400, - "letterSpacing": "0em", - "lineHeight": 1.167, - }, - "h4": Object { - "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif", - "fontSize": "2.125rem", - "fontWeight": 400, - "letterSpacing": "0.00735em", - "lineHeight": 1.235, - }, - "h5": Object { - "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif", - "fontSize": "1.5rem", - "fontWeight": 400, - "letterSpacing": "0em", - "lineHeight": 1.334, - }, - "h6": Object { - "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif", - "fontSize": "1.25rem", - "fontWeight": 500, - "letterSpacing": "0.0075em", - "lineHeight": 1.6, - }, - "htmlFontSize": 16, - "overline": Object { - "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif", - "fontSize": "0.75rem", - "fontWeight": 400, - "letterSpacing": "0.08333em", - "lineHeight": 2.66, - "textTransform": "uppercase", - }, - "pxToRem": [Function], - "round": [Function], - "subtitle1": Object { - "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif", - "fontSize": "1rem", - "fontWeight": 400, - "letterSpacing": "0.00938em", - "lineHeight": 1.75, - }, - "subtitle2": Object { - "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif", - "fontSize": "0.875rem", - "fontWeight": 500, - "letterSpacing": "0.00714em", - "lineHeight": 1.57, - }, - }, - "zIndex": Object { - "appBar": 1100, - "drawer": 1200, - "mobileStepper": 1000, - "modal": 1300, - "snackbar": 1400, - "speedDial": 1050, - "tooltip": 1500, - }, - }, - "name": "MuiBackdrop", - }, - "propTypes": Object { - "classes": [Function], - "innerRef": [Function], - }, - "render": [Function], - "useStyles": [Function], - } - } - BackdropProps={ - Object { - "transitionDuration": Object { - "enter": 225, - "exit": 195, - }, - } - } - className="MuiDialog-root modal-root" - closeAfterTransition={true} - disableEscapeKeyDown={false} - onClose={[Function]} - open={false} - /> - </ForwardRef(Dialog)> - </WithStyles(ForwardRef(Dialog))> - </ExportStartModal> - <ExportLoadingModal - handleCloseClick={[Function]} - handleDone={[Function]} - open={false} - selectedFluids={Array []} - > - <WithStyles(ForwardRef(Dialog)) - aria-labelledby="accessibility-title" - classes={ - Object { - "paper": "modal-paper", - "root": "modal-root", - } - } - onClose={[Function]} - open={false} - > - <ForwardRef(Dialog) - aria-labelledby="accessibility-title" - classes={ - Object { - "container": "MuiDialog-container", - "paper": "MuiDialog-paper modal-paper", - "paperFullScreen": "MuiDialog-paperFullScreen", - "paperFullWidth": "MuiDialog-paperFullWidth", - "paperScrollBody": "MuiDialog-paperScrollBody", - "paperScrollPaper": "MuiDialog-paperScrollPaper", - "paperWidthFalse": "MuiDialog-paperWidthFalse", - "paperWidthLg": "MuiDialog-paperWidthLg", - "paperWidthMd": "MuiDialog-paperWidthMd", - "paperWidthSm": "MuiDialog-paperWidthSm", - "paperWidthXl": "MuiDialog-paperWidthXl", - "paperWidthXs": "MuiDialog-paperWidthXs", - "root": "MuiDialog-root modal-root", - "scrollBody": "MuiDialog-scrollBody", - "scrollPaper": "MuiDialog-scrollPaper", - } - } - onClose={[Function]} - open={false} - > - <ForwardRef(Modal) - BackdropComponent={ - Object { - "$$typeof": Symbol(react.forward_ref), - "Naked": Object { - "$$typeof": Symbol(react.forward_ref), - "propTypes": Object { - "children": [Function], - "className": [Function], - "classes": [Function], - "invisible": [Function], - "open": [Function], - "transitionDuration": [Function], - }, - "render": [Function], - }, - "displayName": "WithStyles(ForwardRef(Backdrop))", - "options": Object { - "defaultTheme": Object { - "breakpoints": Object { - "between": [Function], - "down": [Function], - "keys": Array [ - "xs", - "sm", - "md", - "lg", - "xl", - ], - "only": [Function], - "up": [Function], - "values": Object { - "lg": 1280, - "md": 960, - "sm": 600, - "xl": 1920, - "xs": 0, - }, - "width": [Function], - }, - "direction": "ltr", - "mixins": Object { - "gutters": [Function], - "toolbar": Object { - "@media (min-width:0px) and (orientation: landscape)": Object { - "minHeight": 48, - }, - "@media (min-width:600px)": Object { - "minHeight": 64, - }, - "minHeight": 56, - }, - }, - "overrides": Object {}, - "palette": Object { - "action": Object { - "activatedOpacity": 0.12, - "active": "rgba(0, 0, 0, 0.54)", - "disabled": "rgba(0, 0, 0, 0.26)", - "disabledBackground": "rgba(0, 0, 0, 0.12)", - "disabledOpacity": 0.38, - "focus": "rgba(0, 0, 0, 0.12)", - "focusOpacity": 0.12, - "hover": "rgba(0, 0, 0, 0.04)", - "hoverOpacity": 0.04, - "selected": "rgba(0, 0, 0, 0.08)", - "selectedOpacity": 0.08, - }, - "augmentColor": [Function], - "background": Object { - "default": "#fafafa", - "paper": "#fff", - }, - "common": Object { - "black": "#000", - "white": "#fff", - }, - "contrastThreshold": 3, - "divider": "rgba(0, 0, 0, 0.12)", - "error": Object { - "contrastText": "#fff", - "dark": "#d32f2f", - "light": "#e57373", - "main": "#f44336", - }, - "getContrastText": [Function], - "grey": Object { - "100": "#f5f5f5", - "200": "#eeeeee", - "300": "#e0e0e0", - "400": "#bdbdbd", - "50": "#fafafa", - "500": "#9e9e9e", - "600": "#757575", - "700": "#616161", - "800": "#424242", - "900": "#212121", - "A100": "#d5d5d5", - "A200": "#aaaaaa", - "A400": "#303030", - "A700": "#616161", - }, - "info": Object { - "contrastText": "#fff", - "dark": "#1976d2", - "light": "#64b5f6", - "main": "#2196f3", - }, - "primary": Object { - "contrastText": "#fff", - "dark": "#303f9f", - "light": "#7986cb", - "main": "#3f51b5", - }, - "secondary": Object { - "contrastText": "#fff", - "dark": "#c51162", - "light": "#ff4081", - "main": "#f50057", - }, - "success": Object { - "contrastText": "rgba(0, 0, 0, 0.87)", - "dark": "#388e3c", - "light": "#81c784", - "main": "#4caf50", - }, - "text": Object { - "disabled": "rgba(0, 0, 0, 0.38)", - "hint": "rgba(0, 0, 0, 0.38)", - "primary": "rgba(0, 0, 0, 0.87)", - "secondary": "rgba(0, 0, 0, 0.54)", - }, - "tonalOffset": 0.2, - "type": "light", - "warning": Object { - "contrastText": "rgba(0, 0, 0, 0.87)", - "dark": "#f57c00", - "light": "#ffb74d", - "main": "#ff9800", - }, - }, - "props": Object {}, - "shadows": Array [ - "none", - "0px 2px 1px -1px rgba(0,0,0,0.2),0px 1px 1px 0px rgba(0,0,0,0.14),0px 1px 3px 0px rgba(0,0,0,0.12)", - "0px 3px 1px -2px rgba(0,0,0,0.2),0px 2px 2px 0px rgba(0,0,0,0.14),0px 1px 5px 0px rgba(0,0,0,0.12)", - "0px 3px 3px -2px rgba(0,0,0,0.2),0px 3px 4px 0px rgba(0,0,0,0.14),0px 1px 8px 0px rgba(0,0,0,0.12)", - "0px 2px 4px -1px rgba(0,0,0,0.2),0px 4px 5px 0px rgba(0,0,0,0.14),0px 1px 10px 0px rgba(0,0,0,0.12)", - "0px 3px 5px -1px rgba(0,0,0,0.2),0px 5px 8px 0px rgba(0,0,0,0.14),0px 1px 14px 0px rgba(0,0,0,0.12)", - "0px 3px 5px -1px rgba(0,0,0,0.2),0px 6px 10px 0px rgba(0,0,0,0.14),0px 1px 18px 0px rgba(0,0,0,0.12)", - "0px 4px 5px -2px rgba(0,0,0,0.2),0px 7px 10px 1px rgba(0,0,0,0.14),0px 2px 16px 1px rgba(0,0,0,0.12)", - "0px 5px 5px -3px rgba(0,0,0,0.2),0px 8px 10px 1px rgba(0,0,0,0.14),0px 3px 14px 2px rgba(0,0,0,0.12)", - "0px 5px 6px -3px rgba(0,0,0,0.2),0px 9px 12px 1px rgba(0,0,0,0.14),0px 3px 16px 2px rgba(0,0,0,0.12)", - "0px 6px 6px -3px rgba(0,0,0,0.2),0px 10px 14px 1px rgba(0,0,0,0.14),0px 4px 18px 3px rgba(0,0,0,0.12)", - "0px 6px 7px -4px rgba(0,0,0,0.2),0px 11px 15px 1px rgba(0,0,0,0.14),0px 4px 20px 3px rgba(0,0,0,0.12)", - "0px 7px 8px -4px rgba(0,0,0,0.2),0px 12px 17px 2px rgba(0,0,0,0.14),0px 5px 22px 4px rgba(0,0,0,0.12)", - "0px 7px 8px -4px rgba(0,0,0,0.2),0px 13px 19px 2px rgba(0,0,0,0.14),0px 5px 24px 4px rgba(0,0,0,0.12)", - "0px 7px 9px -4px rgba(0,0,0,0.2),0px 14px 21px 2px rgba(0,0,0,0.14),0px 5px 26px 4px rgba(0,0,0,0.12)", - "0px 8px 9px -5px rgba(0,0,0,0.2),0px 15px 22px 2px rgba(0,0,0,0.14),0px 6px 28px 5px rgba(0,0,0,0.12)", - "0px 8px 10px -5px rgba(0,0,0,0.2),0px 16px 24px 2px rgba(0,0,0,0.14),0px 6px 30px 5px rgba(0,0,0,0.12)", - "0px 8px 11px -5px rgba(0,0,0,0.2),0px 17px 26px 2px rgba(0,0,0,0.14),0px 6px 32px 5px rgba(0,0,0,0.12)", - "0px 9px 11px -5px rgba(0,0,0,0.2),0px 18px 28px 2px rgba(0,0,0,0.14),0px 7px 34px 6px rgba(0,0,0,0.12)", - "0px 9px 12px -6px rgba(0,0,0,0.2),0px 19px 29px 2px rgba(0,0,0,0.14),0px 7px 36px 6px rgba(0,0,0,0.12)", - "0px 10px 13px -6px rgba(0,0,0,0.2),0px 20px 31px 3px rgba(0,0,0,0.14),0px 8px 38px 7px rgba(0,0,0,0.12)", - "0px 10px 13px -6px rgba(0,0,0,0.2),0px 21px 33px 3px rgba(0,0,0,0.14),0px 8px 40px 7px rgba(0,0,0,0.12)", - "0px 10px 14px -6px rgba(0,0,0,0.2),0px 22px 35px 3px rgba(0,0,0,0.14),0px 8px 42px 7px rgba(0,0,0,0.12)", - "0px 11px 14px -7px rgba(0,0,0,0.2),0px 23px 36px 3px rgba(0,0,0,0.14),0px 9px 44px 8px rgba(0,0,0,0.12)", - "0px 11px 15px -7px rgba(0,0,0,0.2),0px 24px 38px 3px rgba(0,0,0,0.14),0px 9px 46px 8px rgba(0,0,0,0.12)", - ], - "shape": Object { - "borderRadius": 4, - }, - "spacing": [Function], - "transitions": Object { - "create": [Function], - "duration": Object { - "complex": 375, - "enteringScreen": 225, - "leavingScreen": 195, - "short": 250, - "shorter": 200, - "shortest": 150, - "standard": 300, - }, - "easing": Object { - "easeIn": "cubic-bezier(0.4, 0, 1, 1)", - "easeInOut": "cubic-bezier(0.4, 0, 0.2, 1)", - "easeOut": "cubic-bezier(0.0, 0, 0.2, 1)", - "sharp": "cubic-bezier(0.4, 0, 0.6, 1)", - }, - "getAutoHeightDuration": [Function], - }, - "typography": Object { - "body1": Object { - "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif", - "fontSize": "1rem", - "fontWeight": 400, - "letterSpacing": "0.00938em", - "lineHeight": 1.5, - }, - "body2": Object { - "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif", - "fontSize": "0.875rem", - "fontWeight": 400, - "letterSpacing": "0.01071em", - "lineHeight": 1.43, - }, - "button": Object { - "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif", - "fontSize": "0.875rem", - "fontWeight": 500, - "letterSpacing": "0.02857em", - "lineHeight": 1.75, - "textTransform": "uppercase", - }, - "caption": Object { - "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif", - "fontSize": "0.75rem", - "fontWeight": 400, - "letterSpacing": "0.03333em", - "lineHeight": 1.66, - }, - "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif", - "fontSize": 14, - "fontWeightBold": 700, - "fontWeightLight": 300, - "fontWeightMedium": 500, - "fontWeightRegular": 400, - "h1": Object { - "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif", - "fontSize": "6rem", - "fontWeight": 300, - "letterSpacing": "-0.01562em", - "lineHeight": 1.167, - }, - "h2": Object { - "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif", - "fontSize": "3.75rem", - "fontWeight": 300, - "letterSpacing": "-0.00833em", - "lineHeight": 1.2, - }, - "h3": Object { - "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif", - "fontSize": "3rem", - "fontWeight": 400, - "letterSpacing": "0em", - "lineHeight": 1.167, - }, - "h4": Object { - "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif", - "fontSize": "2.125rem", - "fontWeight": 400, - "letterSpacing": "0.00735em", - "lineHeight": 1.235, - }, - "h5": Object { - "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif", - "fontSize": "1.5rem", - "fontWeight": 400, - "letterSpacing": "0em", - "lineHeight": 1.334, - }, - "h6": Object { - "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif", - "fontSize": "1.25rem", - "fontWeight": 500, - "letterSpacing": "0.0075em", - "lineHeight": 1.6, - }, - "htmlFontSize": 16, - "overline": Object { - "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif", - "fontSize": "0.75rem", - "fontWeight": 400, - "letterSpacing": "0.08333em", - "lineHeight": 2.66, - "textTransform": "uppercase", - }, - "pxToRem": [Function], - "round": [Function], - "subtitle1": Object { - "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif", - "fontSize": "1rem", - "fontWeight": 400, - "letterSpacing": "0.00938em", - "lineHeight": 1.75, - }, - "subtitle2": Object { - "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif", - "fontSize": "0.875rem", - "fontWeight": 500, - "letterSpacing": "0.00714em", - "lineHeight": 1.57, - }, - }, - "zIndex": Object { - "appBar": 1100, - "drawer": 1200, - "mobileStepper": 1000, - "modal": 1300, - "snackbar": 1400, - "speedDial": 1050, - "tooltip": 1500, - }, - }, - "name": "MuiBackdrop", - }, - "propTypes": Object { - "classes": [Function], - "innerRef": [Function], - }, - "render": [Function], - "useStyles": [Function], - } - } - BackdropProps={ - Object { - "transitionDuration": Object { - "enter": 225, - "exit": 195, - }, - } - } - className="MuiDialog-root modal-root" - closeAfterTransition={true} - disableEscapeKeyDown={false} - onClose={[Function]} - open={false} - /> - </ForwardRef(Dialog)> - </WithStyles(ForwardRef(Dialog))> - </ExportLoadingModal> - <ExportDoneModal - error={false} - handleCloseClick={[Function]} - open={false} - > - <WithStyles(ForwardRef(Dialog)) - aria-labelledby="accessibility-title" - classes={ - Object { - "paper": "modal-paper", - "root": "modal-root", - } - } - onClose={[Function]} - open={false} - > - <ForwardRef(Dialog) - aria-labelledby="accessibility-title" - classes={ - Object { - "container": "MuiDialog-container", - "paper": "MuiDialog-paper modal-paper", - "paperFullScreen": "MuiDialog-paperFullScreen", - "paperFullWidth": "MuiDialog-paperFullWidth", - "paperScrollBody": "MuiDialog-paperScrollBody", - "paperScrollPaper": "MuiDialog-paperScrollPaper", - "paperWidthFalse": "MuiDialog-paperWidthFalse", - "paperWidthLg": "MuiDialog-paperWidthLg", - "paperWidthMd": "MuiDialog-paperWidthMd", - "paperWidthSm": "MuiDialog-paperWidthSm", - "paperWidthXl": "MuiDialog-paperWidthXl", - "paperWidthXs": "MuiDialog-paperWidthXs", - "root": "MuiDialog-root modal-root", - "scrollBody": "MuiDialog-scrollBody", - "scrollPaper": "MuiDialog-scrollPaper", - } - } - onClose={[Function]} - open={false} - > - <ForwardRef(Modal) - BackdropComponent={ - Object { - "$$typeof": Symbol(react.forward_ref), - "Naked": Object { - "$$typeof": Symbol(react.forward_ref), - "propTypes": Object { - "children": [Function], - "className": [Function], - "classes": [Function], - "invisible": [Function], - "open": [Function], - "transitionDuration": [Function], - }, - "render": [Function], - }, - "displayName": "WithStyles(ForwardRef(Backdrop))", - "options": Object { - "defaultTheme": Object { - "breakpoints": Object { - "between": [Function], - "down": [Function], - "keys": Array [ - "xs", - "sm", - "md", - "lg", - "xl", - ], - "only": [Function], - "up": [Function], - "values": Object { - "lg": 1280, - "md": 960, - "sm": 600, - "xl": 1920, - "xs": 0, - }, - "width": [Function], - }, - "direction": "ltr", - "mixins": Object { - "gutters": [Function], - "toolbar": Object { - "@media (min-width:0px) and (orientation: landscape)": Object { - "minHeight": 48, - }, - "@media (min-width:600px)": Object { - "minHeight": 64, - }, - "minHeight": 56, - }, - }, - "overrides": Object {}, - "palette": Object { - "action": Object { - "activatedOpacity": 0.12, - "active": "rgba(0, 0, 0, 0.54)", - "disabled": "rgba(0, 0, 0, 0.26)", - "disabledBackground": "rgba(0, 0, 0, 0.12)", - "disabledOpacity": 0.38, - "focus": "rgba(0, 0, 0, 0.12)", - "focusOpacity": 0.12, - "hover": "rgba(0, 0, 0, 0.04)", - "hoverOpacity": 0.04, - "selected": "rgba(0, 0, 0, 0.08)", - "selectedOpacity": 0.08, - }, - "augmentColor": [Function], - "background": Object { - "default": "#fafafa", - "paper": "#fff", - }, - "common": Object { - "black": "#000", - "white": "#fff", - }, - "contrastThreshold": 3, - "divider": "rgba(0, 0, 0, 0.12)", - "error": Object { - "contrastText": "#fff", - "dark": "#d32f2f", - "light": "#e57373", - "main": "#f44336", - }, - "getContrastText": [Function], - "grey": Object { - "100": "#f5f5f5", - "200": "#eeeeee", - "300": "#e0e0e0", - "400": "#bdbdbd", - "50": "#fafafa", - "500": "#9e9e9e", - "600": "#757575", - "700": "#616161", - "800": "#424242", - "900": "#212121", - "A100": "#d5d5d5", - "A200": "#aaaaaa", - "A400": "#303030", - "A700": "#616161", - }, - "info": Object { - "contrastText": "#fff", - "dark": "#1976d2", - "light": "#64b5f6", - "main": "#2196f3", - }, - "primary": Object { - "contrastText": "#fff", - "dark": "#303f9f", - "light": "#7986cb", - "main": "#3f51b5", - }, - "secondary": Object { - "contrastText": "#fff", - "dark": "#c51162", - "light": "#ff4081", - "main": "#f50057", - }, - "success": Object { - "contrastText": "rgba(0, 0, 0, 0.87)", - "dark": "#388e3c", - "light": "#81c784", - "main": "#4caf50", - }, - "text": Object { - "disabled": "rgba(0, 0, 0, 0.38)", - "hint": "rgba(0, 0, 0, 0.38)", - "primary": "rgba(0, 0, 0, 0.87)", - "secondary": "rgba(0, 0, 0, 0.54)", - }, - "tonalOffset": 0.2, - "type": "light", - "warning": Object { - "contrastText": "rgba(0, 0, 0, 0.87)", - "dark": "#f57c00", - "light": "#ffb74d", - "main": "#ff9800", - }, - }, - "props": Object {}, - "shadows": Array [ - "none", - "0px 2px 1px -1px rgba(0,0,0,0.2),0px 1px 1px 0px rgba(0,0,0,0.14),0px 1px 3px 0px rgba(0,0,0,0.12)", - "0px 3px 1px -2px rgba(0,0,0,0.2),0px 2px 2px 0px rgba(0,0,0,0.14),0px 1px 5px 0px rgba(0,0,0,0.12)", - "0px 3px 3px -2px rgba(0,0,0,0.2),0px 3px 4px 0px rgba(0,0,0,0.14),0px 1px 8px 0px rgba(0,0,0,0.12)", - "0px 2px 4px -1px rgba(0,0,0,0.2),0px 4px 5px 0px rgba(0,0,0,0.14),0px 1px 10px 0px rgba(0,0,0,0.12)", - "0px 3px 5px -1px rgba(0,0,0,0.2),0px 5px 8px 0px rgba(0,0,0,0.14),0px 1px 14px 0px rgba(0,0,0,0.12)", - "0px 3px 5px -1px rgba(0,0,0,0.2),0px 6px 10px 0px rgba(0,0,0,0.14),0px 1px 18px 0px rgba(0,0,0,0.12)", - "0px 4px 5px -2px rgba(0,0,0,0.2),0px 7px 10px 1px rgba(0,0,0,0.14),0px 2px 16px 1px rgba(0,0,0,0.12)", - "0px 5px 5px -3px rgba(0,0,0,0.2),0px 8px 10px 1px rgba(0,0,0,0.14),0px 3px 14px 2px rgba(0,0,0,0.12)", - "0px 5px 6px -3px rgba(0,0,0,0.2),0px 9px 12px 1px rgba(0,0,0,0.14),0px 3px 16px 2px rgba(0,0,0,0.12)", - "0px 6px 6px -3px rgba(0,0,0,0.2),0px 10px 14px 1px rgba(0,0,0,0.14),0px 4px 18px 3px rgba(0,0,0,0.12)", - "0px 6px 7px -4px rgba(0,0,0,0.2),0px 11px 15px 1px rgba(0,0,0,0.14),0px 4px 20px 3px rgba(0,0,0,0.12)", - "0px 7px 8px -4px rgba(0,0,0,0.2),0px 12px 17px 2px rgba(0,0,0,0.14),0px 5px 22px 4px rgba(0,0,0,0.12)", - "0px 7px 8px -4px rgba(0,0,0,0.2),0px 13px 19px 2px rgba(0,0,0,0.14),0px 5px 24px 4px rgba(0,0,0,0.12)", - "0px 7px 9px -4px rgba(0,0,0,0.2),0px 14px 21px 2px rgba(0,0,0,0.14),0px 5px 26px 4px rgba(0,0,0,0.12)", - "0px 8px 9px -5px rgba(0,0,0,0.2),0px 15px 22px 2px rgba(0,0,0,0.14),0px 6px 28px 5px rgba(0,0,0,0.12)", - "0px 8px 10px -5px rgba(0,0,0,0.2),0px 16px 24px 2px rgba(0,0,0,0.14),0px 6px 30px 5px rgba(0,0,0,0.12)", - "0px 8px 11px -5px rgba(0,0,0,0.2),0px 17px 26px 2px rgba(0,0,0,0.14),0px 6px 32px 5px rgba(0,0,0,0.12)", - "0px 9px 11px -5px rgba(0,0,0,0.2),0px 18px 28px 2px rgba(0,0,0,0.14),0px 7px 34px 6px rgba(0,0,0,0.12)", - "0px 9px 12px -6px rgba(0,0,0,0.2),0px 19px 29px 2px rgba(0,0,0,0.14),0px 7px 36px 6px rgba(0,0,0,0.12)", - "0px 10px 13px -6px rgba(0,0,0,0.2),0px 20px 31px 3px rgba(0,0,0,0.14),0px 8px 38px 7px rgba(0,0,0,0.12)", - "0px 10px 13px -6px rgba(0,0,0,0.2),0px 21px 33px 3px rgba(0,0,0,0.14),0px 8px 40px 7px rgba(0,0,0,0.12)", - "0px 10px 14px -6px rgba(0,0,0,0.2),0px 22px 35px 3px rgba(0,0,0,0.14),0px 8px 42px 7px rgba(0,0,0,0.12)", - "0px 11px 14px -7px rgba(0,0,0,0.2),0px 23px 36px 3px rgba(0,0,0,0.14),0px 9px 44px 8px rgba(0,0,0,0.12)", - "0px 11px 15px -7px rgba(0,0,0,0.2),0px 24px 38px 3px rgba(0,0,0,0.14),0px 9px 46px 8px rgba(0,0,0,0.12)", - ], - "shape": Object { - "borderRadius": 4, - }, - "spacing": [Function], - "transitions": Object { - "create": [Function], - "duration": Object { - "complex": 375, - "enteringScreen": 225, - "leavingScreen": 195, - "short": 250, - "shorter": 200, - "shortest": 150, - "standard": 300, - }, - "easing": Object { - "easeIn": "cubic-bezier(0.4, 0, 1, 1)", - "easeInOut": "cubic-bezier(0.4, 0, 0.2, 1)", - "easeOut": "cubic-bezier(0.0, 0, 0.2, 1)", - "sharp": "cubic-bezier(0.4, 0, 0.6, 1)", - }, - "getAutoHeightDuration": [Function], - }, - "typography": Object { - "body1": Object { - "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif", - "fontSize": "1rem", - "fontWeight": 400, - "letterSpacing": "0.00938em", - "lineHeight": 1.5, - }, - "body2": Object { - "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif", - "fontSize": "0.875rem", - "fontWeight": 400, - "letterSpacing": "0.01071em", - "lineHeight": 1.43, - }, - "button": Object { - "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif", - "fontSize": "0.875rem", - "fontWeight": 500, - "letterSpacing": "0.02857em", - "lineHeight": 1.75, - "textTransform": "uppercase", - }, - "caption": Object { - "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif", - "fontSize": "0.75rem", - "fontWeight": 400, - "letterSpacing": "0.03333em", - "lineHeight": 1.66, - }, - "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif", - "fontSize": 14, - "fontWeightBold": 700, - "fontWeightLight": 300, - "fontWeightMedium": 500, - "fontWeightRegular": 400, - "h1": Object { - "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif", - "fontSize": "6rem", - "fontWeight": 300, - "letterSpacing": "-0.01562em", - "lineHeight": 1.167, - }, - "h2": Object { - "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif", - "fontSize": "3.75rem", - "fontWeight": 300, - "letterSpacing": "-0.00833em", - "lineHeight": 1.2, - }, - "h3": Object { - "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif", - "fontSize": "3rem", - "fontWeight": 400, - "letterSpacing": "0em", - "lineHeight": 1.167, - }, - "h4": Object { - "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif", - "fontSize": "2.125rem", - "fontWeight": 400, - "letterSpacing": "0.00735em", - "lineHeight": 1.235, - }, - "h5": Object { - "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif", - "fontSize": "1.5rem", - "fontWeight": 400, - "letterSpacing": "0em", - "lineHeight": 1.334, - }, - "h6": Object { - "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif", - "fontSize": "1.25rem", - "fontWeight": 500, - "letterSpacing": "0.0075em", - "lineHeight": 1.6, - }, - "htmlFontSize": 16, - "overline": Object { - "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif", - "fontSize": "0.75rem", - "fontWeight": 400, - "letterSpacing": "0.08333em", - "lineHeight": 2.66, - "textTransform": "uppercase", - }, - "pxToRem": [Function], - "round": [Function], - "subtitle1": Object { - "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif", - "fontSize": "1rem", - "fontWeight": 400, - "letterSpacing": "0.00938em", - "lineHeight": 1.75, - }, - "subtitle2": Object { - "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif", - "fontSize": "0.875rem", - "fontWeight": 500, - "letterSpacing": "0.00714em", - "lineHeight": 1.57, - }, - }, - "zIndex": Object { - "appBar": 1100, - "drawer": 1200, - "mobileStepper": 1000, - "modal": 1300, - "snackbar": 1400, - "speedDial": 1050, - "tooltip": 1500, - }, - }, - "name": "MuiBackdrop", - }, - "propTypes": Object { - "classes": [Function], - "innerRef": [Function], - }, - "render": [Function], - "useStyles": [Function], - } - } - BackdropProps={ - Object { - "transitionDuration": Object { - "enter": 225, - "exit": 195, - }, - } - } - className="MuiDialog-root modal-root" - closeAfterTransition={true} - disableEscapeKeyDown={false} - onClose={[Function]} - open={false} - /> - </ForwardRef(Dialog)> - </WithStyles(ForwardRef(Dialog))> - </ExportDoneModal> -</ExportData> +</div> `; diff --git a/src/components/Options/GCU/GCUContent.spec.tsx b/src/components/Options/GCU/GCUContent.spec.tsx index 2bc41f57b908daa0b20931d8a48be0fef4720aa2..d504d3c128c4fc8825fd5c24db936d4d7d52cc53 100644 --- a/src/components/Options/GCU/GCUContent.spec.tsx +++ b/src/components/Options/GCU/GCUContent.spec.tsx @@ -1,10 +1,10 @@ +import { render } from '@testing-library/react' import GCUContent from 'components/Options/GCU/GCUContent' -import { shallow } from 'enzyme' import React from 'react' describe('GCUContent component', () => { it('should be rendered correctly', () => { - const component = shallow(<GCUContent />).getElement() - expect(component).toMatchSnapshot() + const { container } = render(<GCUContent />) + expect(container).toMatchSnapshot() }) }) diff --git a/src/components/Options/GCU/GCULink.spec.tsx b/src/components/Options/GCU/GCULink.spec.tsx index f3cb6b4f33f294ff4767901ceafbf2aa58280998..9de09ea7b8be41fedd27b833b198a80a03394b41 100644 --- a/src/components/Options/GCU/GCULink.spec.tsx +++ b/src/components/Options/GCU/GCULink.spec.tsx @@ -1,10 +1,15 @@ +import { render } from '@testing-library/react' import LegalNoticeLink from 'components/Options/LegalNotice/LegalNoticeLink' -import { shallow } from 'enzyme' import React from 'react' +import { BrowserRouter } from 'react-router-dom' describe('LegalNoticeLink component', () => { it('should be rendered correctly', () => { - const component = shallow(<LegalNoticeLink />).getElement() - expect(component).toMatchSnapshot() + const { container } = render( + <BrowserRouter> + <LegalNoticeLink /> + </BrowserRouter> + ) + expect(container).toMatchSnapshot() }) }) diff --git a/src/components/Options/GCU/GCUView.spec.tsx b/src/components/Options/GCU/GCUView.spec.tsx index 9692ba84bd47f3ade5d9474547d8139142f116fd..43396b90d61d43d9c12a985404167970d2541223 100644 --- a/src/components/Options/GCU/GCUView.spec.tsx +++ b/src/components/Options/GCU/GCUView.spec.tsx @@ -1,5 +1,5 @@ +import { render } from '@testing-library/react' import GCUView from 'components/Options/GCU/GCUView' -import { shallow } from 'enzyme' import React from 'react' jest.mock('components/Header/CozyBar', () => 'mock-cozybar') @@ -8,7 +8,7 @@ jest.mock('components/Content/Content', () => 'mock-content') describe('GCUView component', () => { it('should be rendered correctly', () => { - const component = shallow(<GCUView />).getElement() - expect(component).toMatchSnapshot() + const { container } = render(<GCUView />) + expect(container).toMatchSnapshot() }) }) diff --git a/src/components/Options/GCU/__snapshots__/GCUContent.spec.tsx.snap b/src/components/Options/GCU/__snapshots__/GCUContent.spec.tsx.snap index 93d8846db6808891dfce8569b1bb4924ef66289c..dfdcf4910c46f89db3fa3bebeeada71b8e3fc2e6 100644 --- a/src/components/Options/GCU/__snapshots__/GCUContent.spec.tsx.snap +++ b/src/components/Options/GCU/__snapshots__/GCUContent.spec.tsx.snap @@ -1,288 +1,280 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP exports[`GCUContent component should be rendered correctly 1`] = ` -<div - className="gcu-content-root" -> +<div> <div - className="gcu-content-wrapper" + class="gcu-content-root" > - <p - className="text-14-normal version" - > - gcu.version - </p> - <div - className="gcu-content-part-title text-15-normal" - > - gcu.content.title1 - </div> - <p - className="text-14-normal" - > - gcu.content.part1_1 - </p> - <p - className="text-14-normal" - > - gcu.content.part1_2 - </p> - <p - className="text-14-normal" - > - gcu.content.part1_3 - </p> - <div - className="gcu-content-part-title text-15-normal" - > - gcu.content.title2 - </div> - <p - className="text-14-normal" - > - gcu.content.part2_1 - </p> - <p - className="text-14-normal" - > - gcu.content.part2_2 - </p> - <ul - className="text-14-normal" - > - <li> - gcu.content.part2_2_list1 - </li> - <li> - gcu.content.part2_2_list2 - </li> - <li> - gcu.content.part2_2_list3 - </li> - </ul> - <p - className="text-14-normal" - > - gcu.content.part2_3 - </p> - <p - className="text-14-normal" - > - gcu.content.part2_4 - </p> - <div - className="gcu-content-part-title text-15-normal" - > - gcu.content.title3 - </div> - <p - className="text-14-normal" - > - gcu.content.part3_1 - </p> - <p - className="text-14-normal" - > - gcu.content.part3_2 - </p> - <p - className="text-14-normal" - > - gcu.content.part3_3 - </p> - <p - className="text-14-normal" - > - gcu.content.part3_4 - </p> - <div - className="gcu-content-part-title text-15-normal" - > - gcu.content.title4 - </div> - <p - className="text-14-normal" - > - gcu.content.part4_1 - </p> - <p - className="text-14-normal" - dangerouslySetInnerHTML={ - Object { - "__html": "gcu.content.part4_2", - } - } - /> - <div - className="gcu-content-part-title text-15-normal" - > - gcu.content.title5 - </div> - <p - className="text-14-normal" - > - gcu.content.part5_1 - </p> - <p - className="text-14-normal" - > - gcu.content.part5_2 - </p> - <p - className="text-14-normal" - > - gcu.content.part5_3 - </p> - <ul - className="text-14-normal" - > - <li> - gcu.content.part5_3_list1 - </li> - <li> - gcu.content.part5_3_list2 - </li> - </ul> - <p - className="text-14-normal" - > - gcu.content.part5_4 - </p> - <p - className="text-14-normal" - > - gcu.content.part5_5 - </p> - <div - className="gcu-content-part-title text-15-normal" - > - gcu.content.title6 - </div> - <p - className="text-14-normal" - > - gcu.content.part6_1 - </p> - <p - className="text-14-normal" - > - gcu.content.part6_2 - </p> - <p - className="text-14-normal" - > - gcu.content.part6_3 - </p> - <ul - className="text-14-normal" - > - <li> - gcu.content.part6_3_list1 - </li> - <li> - gcu.content.part6_3_list2 - </li> - <li> - gcu.content.part6_3_list3 - </li> - </ul> - <p - className="text-14-normal" - > - gcu.content.part6_4 - </p> - <p - className="text-14-normal" - > - gcu.content.part6_5 - </p> - <div - className="gcu-content-part-title text-15-normal" - > - gcu.content.title8 - </div> - <p - className="text-14-normal" - > - gcu.content.part8_1 - </p> - <p - className="text-14-normal" - dangerouslySetInnerHTML={ - Object { - "__html": "gcu.content.part8_2", - } - } - /> <div - className="gcu-content-part-title text-15-normal" + class="gcu-content-wrapper" > - gcu.content.title9 + <p + class="text-14-normal version" + > + gcu.version + </p> + <div + class="gcu-content-part-title text-15-normal" + > + gcu.content.title1 + </div> + <p + class="text-14-normal" + > + gcu.content.part1_1 + </p> + <p + class="text-14-normal" + > + gcu.content.part1_2 + </p> + <p + class="text-14-normal" + > + gcu.content.part1_3 + </p> + <div + class="gcu-content-part-title text-15-normal" + > + gcu.content.title2 + </div> + <p + class="text-14-normal" + > + gcu.content.part2_1 + </p> + <p + class="text-14-normal" + > + gcu.content.part2_2 + </p> + <ul + class="text-14-normal" + > + <li> + gcu.content.part2_2_list1 + </li> + <li> + gcu.content.part2_2_list2 + </li> + <li> + gcu.content.part2_2_list3 + </li> + </ul> + <p + class="text-14-normal" + > + gcu.content.part2_3 + </p> + <p + class="text-14-normal" + > + gcu.content.part2_4 + </p> + <div + class="gcu-content-part-title text-15-normal" + > + gcu.content.title3 + </div> + <p + class="text-14-normal" + > + gcu.content.part3_1 + </p> + <p + class="text-14-normal" + > + gcu.content.part3_2 + </p> + <p + class="text-14-normal" + > + gcu.content.part3_3 + </p> + <p + class="text-14-normal" + > + gcu.content.part3_4 + </p> + <div + class="gcu-content-part-title text-15-normal" + > + gcu.content.title4 + </div> + <p + class="text-14-normal" + > + gcu.content.part4_1 + </p> + <p + class="text-14-normal" + > + gcu.content.part4_2 + </p> + <div + class="gcu-content-part-title text-15-normal" + > + gcu.content.title5 + </div> + <p + class="text-14-normal" + > + gcu.content.part5_1 + </p> + <p + class="text-14-normal" + > + gcu.content.part5_2 + </p> + <p + class="text-14-normal" + > + gcu.content.part5_3 + </p> + <ul + class="text-14-normal" + > + <li> + gcu.content.part5_3_list1 + </li> + <li> + gcu.content.part5_3_list2 + </li> + </ul> + <p + class="text-14-normal" + > + gcu.content.part5_4 + </p> + <p + class="text-14-normal" + > + gcu.content.part5_5 + </p> + <div + class="gcu-content-part-title text-15-normal" + > + gcu.content.title6 + </div> + <p + class="text-14-normal" + > + gcu.content.part6_1 + </p> + <p + class="text-14-normal" + > + gcu.content.part6_2 + </p> + <p + class="text-14-normal" + > + gcu.content.part6_3 + </p> + <ul + class="text-14-normal" + > + <li> + gcu.content.part6_3_list1 + </li> + <li> + gcu.content.part6_3_list2 + </li> + <li> + gcu.content.part6_3_list3 + </li> + </ul> + <p + class="text-14-normal" + > + gcu.content.part6_4 + </p> + <p + class="text-14-normal" + > + gcu.content.part6_5 + </p> + <div + class="gcu-content-part-title text-15-normal" + > + gcu.content.title8 + </div> + <p + class="text-14-normal" + > + gcu.content.part8_1 + </p> + <p + class="text-14-normal" + > + gcu.content.part8_2 + </p> + <div + class="gcu-content-part-title text-15-normal" + > + gcu.content.title9 + </div> + <p + class="text-14-normal" + > + <span + class="text-14-bold" + > + gcu.content.part9_1_title + </span> + <span> + gcu.content.part9_1_content + </span> + </p> + <p + class="text-14-normal" + > + <span + class="text-14-bold" + > + gcu.content.part9_2_title + </span> + <span> + gcu.content.part9_2_content + </span> + </p> + <p + class="text-14-normal" + > + <span + class="text-14-bold" + > + gcu.content.part9_3_title + </span> + <span> + gcu.content.part9_3_content + </span> + </p> + <p + class="text-14-normal" + > + <span + class="text-14-bold" + > + gcu.content.part9_4_title + </span> + <span> + gcu.content.part9_4_content + </span> + </p> + <p + class="text-14-normal" + > + <span + class="text-14-bold" + > + gcu.content.part9_5_title + </span> + <span> + gcu.content.part9_5_content + </span> + </p> </div> - <p - className="text-14-normal" - > - <span - className="text-14-bold" - > - gcu.content.part9_1_title - </span> - <span> - gcu.content.part9_1_content - </span> - </p> - <p - className="text-14-normal" - > - <span - className="text-14-bold" - > - gcu.content.part9_2_title - </span> - <span> - gcu.content.part9_2_content - </span> - </p> - <p - className="text-14-normal" - > - <span - className="text-14-bold" - > - gcu.content.part9_3_title - </span> - <span> - gcu.content.part9_3_content - </span> - </p> - <p - className="text-14-normal" - > - <span - className="text-14-bold" - > - gcu.content.part9_4_title - </span> - <span - dangerouslySetInnerHTML={ - Object { - "__html": "gcu.content.part9_4_content", - } - } - /> - </p> - <p - className="text-14-normal" - > - <span - className="text-14-bold" - > - gcu.content.part9_5_title - </span> - <span> - gcu.content.part9_5_content - </span> - </p> </div> </div> `; diff --git a/src/components/Options/GCU/__snapshots__/GCULink.spec.tsx.snap b/src/components/Options/GCU/__snapshots__/GCULink.spec.tsx.snap index 49b15ee33b6b39a4226d4cfd01a401224b2bca70..915df297b184ee301fcd67fe248cc8bafd0441bd 100644 --- a/src/components/Options/GCU/__snapshots__/GCULink.spec.tsx.snap +++ b/src/components/Options/GCU/__snapshots__/GCULink.spec.tsx.snap @@ -1,52 +1,51 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP exports[`LegalNoticeLink component should be rendered correctly 1`] = ` -<div - className="legal-notice-root" -> +<div> <div - className="legal-notice-content" + class="legal-notice-root" > <div - className="legal-notice-header text-16-normal-uppercase" - > - legal.title_legal - </div> - <WithStyles(ForwardRef(Link)) - className="legal-notice-card-link" - component={ - Object { - "$$typeof": Symbol(react.forward_ref), - "displayName": "Link", - "render": [Function], - } - } - onClick={[Function]} - to="/options/legalnotice" + class="legal-notice-content" > <div - className="card" + class="legal-notice-header text-16-normal-uppercase" + > + legal.title_legal + </div> + <a + class="MuiTypography-root MuiLink-root MuiLink-underlineHover legal-notice-card-link MuiTypography-colorPrimary" + href="/options/legalnotice" > <div - className="legal-notice-card" + class="card" > <div - className="legal-notice-card-content" + class="legal-notice-card" > - <StyledIcon - className="legal-notice-card-content-icon" - icon="test-file-stub" - size={42} - /> <div - className="legal-notice-card-content-title" + class="legal-notice-card-content" > - legal.read_legal + <svg + aria-hidden="true" + class="legal-notice-card-content-icon styles__icon___23x3R" + height="42" + width="42" + > + <use + xlink:href="#test-file-stub" + /> + </svg> + <div + class="legal-notice-card-content-title" + > + legal.read_legal + </div> </div> </div> </div> - </div> - </WithStyles(ForwardRef(Link))> + </a> + </div> </div> </div> `; diff --git a/src/components/Options/GCU/__snapshots__/GCUView.spec.tsx.snap b/src/components/Options/GCU/__snapshots__/GCUView.spec.tsx.snap index da0d5940a8758e3b30a5de6b21f6bcc5fcede716..f5c466c4d47f425be2d8979d1c5a2995a763982b 100644 --- a/src/components/Options/GCU/__snapshots__/GCUView.spec.tsx.snap +++ b/src/components/Options/GCU/__snapshots__/GCUView.spec.tsx.snap @@ -1,20 +1,292 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP exports[`GCUView component should be rendered correctly 1`] = ` -<React.Fragment> +<div> <mock-cozybar - displayBackArrow={true} - titleKey="common.title_gcu" + displaybackarrow="true" + titlekey="common.title_gcu" /> <mock-header - desktopTitleKey="common.title_gcu" - displayBackArrow={true} - setHeaderHeight={[Function]} + desktoptitlekey="common.title_gcu" + displaybackarrow="true" /> <mock-content - heightOffset={0} + heightoffset="0" > - <GCUContent /> + <div + class="gcu-content-root" + > + <div + class="gcu-content-wrapper" + > + <p + class="text-14-normal version" + > + gcu.version + </p> + <div + class="gcu-content-part-title text-15-normal" + > + gcu.content.title1 + </div> + <p + class="text-14-normal" + > + gcu.content.part1_1 + </p> + <p + class="text-14-normal" + > + gcu.content.part1_2 + </p> + <p + class="text-14-normal" + > + gcu.content.part1_3 + </p> + <div + class="gcu-content-part-title text-15-normal" + > + gcu.content.title2 + </div> + <p + class="text-14-normal" + > + gcu.content.part2_1 + </p> + <p + class="text-14-normal" + > + gcu.content.part2_2 + </p> + <ul + class="text-14-normal" + > + <li> + gcu.content.part2_2_list1 + </li> + <li> + gcu.content.part2_2_list2 + </li> + <li> + gcu.content.part2_2_list3 + </li> + </ul> + <p + class="text-14-normal" + > + gcu.content.part2_3 + </p> + <p + class="text-14-normal" + > + gcu.content.part2_4 + </p> + <div + class="gcu-content-part-title text-15-normal" + > + gcu.content.title3 + </div> + <p + class="text-14-normal" + > + gcu.content.part3_1 + </p> + <p + class="text-14-normal" + > + gcu.content.part3_2 + </p> + <p + class="text-14-normal" + > + gcu.content.part3_3 + </p> + <p + class="text-14-normal" + > + gcu.content.part3_4 + </p> + <div + class="gcu-content-part-title text-15-normal" + > + gcu.content.title4 + </div> + <p + class="text-14-normal" + > + gcu.content.part4_1 + </p> + <p + class="text-14-normal" + > + gcu.content.part4_2 + </p> + <div + class="gcu-content-part-title text-15-normal" + > + gcu.content.title5 + </div> + <p + class="text-14-normal" + > + gcu.content.part5_1 + </p> + <p + class="text-14-normal" + > + gcu.content.part5_2 + </p> + <p + class="text-14-normal" + > + gcu.content.part5_3 + </p> + <ul + class="text-14-normal" + > + <li> + gcu.content.part5_3_list1 + </li> + <li> + gcu.content.part5_3_list2 + </li> + </ul> + <p + class="text-14-normal" + > + gcu.content.part5_4 + </p> + <p + class="text-14-normal" + > + gcu.content.part5_5 + </p> + <div + class="gcu-content-part-title text-15-normal" + > + gcu.content.title6 + </div> + <p + class="text-14-normal" + > + gcu.content.part6_1 + </p> + <p + class="text-14-normal" + > + gcu.content.part6_2 + </p> + <p + class="text-14-normal" + > + gcu.content.part6_3 + </p> + <ul + class="text-14-normal" + > + <li> + gcu.content.part6_3_list1 + </li> + <li> + gcu.content.part6_3_list2 + </li> + <li> + gcu.content.part6_3_list3 + </li> + </ul> + <p + class="text-14-normal" + > + gcu.content.part6_4 + </p> + <p + class="text-14-normal" + > + gcu.content.part6_5 + </p> + <div + class="gcu-content-part-title text-15-normal" + > + gcu.content.title8 + </div> + <p + class="text-14-normal" + > + gcu.content.part8_1 + </p> + <p + class="text-14-normal" + > + gcu.content.part8_2 + </p> + <div + class="gcu-content-part-title text-15-normal" + > + gcu.content.title9 + </div> + <p + class="text-14-normal" + > + <span + class="text-14-bold" + > + gcu.content.part9_1_title + </span> + <span> + gcu.content.part9_1_content + </span> + </p> + <p + class="text-14-normal" + > + <span + class="text-14-bold" + > + gcu.content.part9_2_title + </span> + <span> + gcu.content.part9_2_content + </span> + </p> + <p + class="text-14-normal" + > + <span + class="text-14-bold" + > + gcu.content.part9_3_title + </span> + <span> + gcu.content.part9_3_content + </span> + </p> + <p + class="text-14-normal" + > + <span + class="text-14-bold" + > + gcu.content.part9_4_title + </span> + <span> + gcu.content.part9_4_content + </span> + </p> + <p + class="text-14-normal" + > + <span + class="text-14-bold" + > + gcu.content.part9_5_title + </span> + <span> + gcu.content.part9_5_content + </span> + </p> + </div> + </div> </mock-content> -</React.Fragment> +</div> `; diff --git a/src/components/Options/LegalNotice/LegalNoticeContent.spec.tsx b/src/components/Options/LegalNotice/LegalNoticeContent.spec.tsx index 55cbffee7411bb30bd48c38f9dce6e0d059c8cc7..6ceff8339c8a0f3a893ab00670cbb377797aa40b 100644 --- a/src/components/Options/LegalNotice/LegalNoticeContent.spec.tsx +++ b/src/components/Options/LegalNotice/LegalNoticeContent.spec.tsx @@ -1,10 +1,10 @@ +import { render } from '@testing-library/react' import LegalNoticeContent from 'components/Options/LegalNotice/LegalNoticeContent' -import { shallow } from 'enzyme' import React from 'react' describe('LegalNoticeContent component', () => { it('should be rendered correctly', () => { - const component = shallow(<LegalNoticeContent />).getElement() - expect(component).toMatchSnapshot() + const { container } = render(<LegalNoticeContent />) + expect(container).toMatchSnapshot() }) }) diff --git a/src/components/Options/LegalNotice/LegalNoticeLink.spec.tsx b/src/components/Options/LegalNotice/LegalNoticeLink.spec.tsx index 190508b0a3b43e85ffa0c7ce0d07a6d65012fdc1..c6e8e2451c17c89c47221930db6dfbc592dc5f13 100644 --- a/src/components/Options/LegalNotice/LegalNoticeLink.spec.tsx +++ b/src/components/Options/LegalNotice/LegalNoticeLink.spec.tsx @@ -1,10 +1,15 @@ +import { render } from '@testing-library/react' import GCULink from 'components/Options/GCU/GCULink' -import { shallow } from 'enzyme' import React from 'react' +import { BrowserRouter } from 'react-router-dom' describe('GCULink component', () => { it('should be rendered correctly', () => { - const component = shallow(<GCULink />).getElement() - expect(component).toMatchSnapshot() + const { container } = render( + <BrowserRouter> + <GCULink /> + </BrowserRouter> + ) + expect(container).toMatchSnapshot() }) }) diff --git a/src/components/Options/LegalNotice/LegalNoticeView.spec.tsx b/src/components/Options/LegalNotice/LegalNoticeView.spec.tsx index 247058c8f1f903f18a043784141abe544abc2c1b..454e91fb322de535cd432a8e4060d011f173b75a 100644 --- a/src/components/Options/LegalNotice/LegalNoticeView.spec.tsx +++ b/src/components/Options/LegalNotice/LegalNoticeView.spec.tsx @@ -1,5 +1,5 @@ +import { render } from '@testing-library/react' import LegalNoticeView from 'components/Options/LegalNotice/LegalNoticeView' -import { shallow } from 'enzyme' import React from 'react' jest.mock('components/Header/CozyBar', () => 'mock-cozybar') @@ -8,7 +8,7 @@ jest.mock('components/Content/Content', () => 'mock-content') describe('LegalNoticeView component', () => { it('should be rendered correctly', () => { - const component = shallow(<LegalNoticeView />).getElement() - expect(component).toMatchSnapshot() + const { container } = render(<LegalNoticeView />) + expect(container).toMatchSnapshot() }) }) diff --git a/src/components/Options/LegalNotice/__snapshots__/LegalNoticeContent.spec.tsx.snap b/src/components/Options/LegalNotice/__snapshots__/LegalNoticeContent.spec.tsx.snap index 322cf9fb612ba9ab88be218725372d23a485eaba..41ea856385c60a3af7849f022a4c6953f9564316 100644 --- a/src/components/Options/LegalNotice/__snapshots__/LegalNoticeContent.spec.tsx.snap +++ b/src/components/Options/LegalNotice/__snapshots__/LegalNoticeContent.spec.tsx.snap @@ -1,25 +1,21 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP exports[`LegalNoticeContent component should be rendered correctly 1`] = ` -<React.Fragment> +<div> <div - className="legal-notice-root" + class="legal-notice-root" > <div - className="legal-notice-content" + class="legal-notice-content" > <p - className="version" + class="version" > legal.version </p> - <p - dangerouslySetInnerHTML={ - Object { - "__html": "legal.site", - } - } - /> + <p> + legal.site + </p> <p> legal.adress </p> @@ -27,78 +23,75 @@ exports[`LegalNoticeContent component should be rendered correctly 1`] = ` legal.phone </p> <p - className="ln-contact" - dangerouslySetInnerHTML={ - Object { - "__html": "legal.mail", - } - } - /> + class="ln-contact" + > + legal.mail + </p> <div - className="text-16-normal" + class="text-16-normal" > <div - className="legal-notice-oneline" + class="legal-notice-oneline" > <span - className="text-14-normal" + class="text-14-normal" > legal.p1b </span> legal.p1 </div> <div - className="legal-notice-oneline" + class="legal-notice-oneline" > <span - className="text-14-normal" + class="text-14-normal" > legal.p2b </span> legal.p2 </div> <div - className="legal-notice-oneline" + class="legal-notice-oneline" > <span - className="text-14-normal" + class="text-14-normal" > legal.p3b </span> legal.p3 </div> <div - className="legal-notice-oneline" + class="legal-notice-oneline" > <span - className="text-14-normal" + class="text-14-normal" > legal.p4b </span> legal.p4 </div> <div - className="legal-notice-oneline" + class="legal-notice-oneline" > <span - className="text-14-normal" + class="text-14-normal" > legal.p5b </span> legal.p5 </div> <div - className="legal-notice-oneline" + class="legal-notice-oneline" > <span - className="text-14-normal" + class="text-14-normal" > legal.p6b </span> legal.p6 </div> <div - className="legal-notice-part" + class="legal-notice-part" > <h3> @@ -109,7 +102,7 @@ exports[`LegalNoticeContent component should be rendered correctly 1`] = ` </p> </div> <div - className="legal-notice-part" + class="legal-notice-part" > <h3> legal.title2 @@ -139,13 +132,9 @@ exports[`LegalNoticeContent component should be rendered correctly 1`] = ` <li> legal.part2-3-4 </li> - <li - dangerouslySetInnerHTML={ - Object { - "__html": "legal.part2-3-5", - } - } - /> + <li> + legal.part2-3-5 + </li> </ul> </li> <li> @@ -169,32 +158,24 @@ exports[`LegalNoticeContent component should be rendered correctly 1`] = ` legal.part2-6-3 </li> </ul> - <p - dangerouslySetInnerHTML={ - Object { - "__html": "legal.part2-7", - } - } - /> + <p> + legal.part2-7 + </p> <p> legal.part2-8 </p> <p> legal.part2-9 </p> - <p - dangerouslySetInnerHTML={ - Object { - "__html": "legal.part2-10", - } - } - /> + <p> + legal.part2-10 + </p> <p> legal.part2-11 </p> </div> <div - className="legal-notice-part" + class="legal-notice-part" > <h3> legal.title3 @@ -207,7 +188,7 @@ exports[`LegalNoticeContent component should be rendered correctly 1`] = ` </p> </div> <div - className="legal-notice-part" + class="legal-notice-part" > <h3> legal.title4 @@ -220,7 +201,7 @@ exports[`LegalNoticeContent component should be rendered correctly 1`] = ` </p> </div> <div - className="legal-notice-part" + class="legal-notice-part" > <h3> legal.title5 @@ -230,7 +211,7 @@ exports[`LegalNoticeContent component should be rendered correctly 1`] = ` </p> </div> <div - className="legal-notice-part" + class="legal-notice-part" > <h3> legal.title6 @@ -240,7 +221,7 @@ exports[`LegalNoticeContent component should be rendered correctly 1`] = ` </p> </div> <div - className="legal-notice-part" + class="legal-notice-part" > <h3> legal.title7 @@ -248,19 +229,15 @@ exports[`LegalNoticeContent component should be rendered correctly 1`] = ` <p> legal.part7-1 </p> - <p - dangerouslySetInnerHTML={ - Object { - "__html": "legal.part7-2", - } - } - /> + <p> + legal.part7-2 + </p> <p> legal.part7-3 </p> </div> <div - className="legal-notice-part" + class="legal-notice-part" > <h3> legal.title8 @@ -270,7 +247,7 @@ exports[`LegalNoticeContent component should be rendered correctly 1`] = ` </p> </div> <div - className="legal-notice-part" + class="legal-notice-part" > <h3> legal.title9 @@ -285,5 +262,5 @@ exports[`LegalNoticeContent component should be rendered correctly 1`] = ` </div> </div> </div> -</React.Fragment> +</div> `; diff --git a/src/components/Options/LegalNotice/__snapshots__/LegalNoticeLink.spec.tsx.snap b/src/components/Options/LegalNotice/__snapshots__/LegalNoticeLink.spec.tsx.snap index a6183e10d395a71fb1690f7fb164dc478a2a1aa2..f75c9392adbd35e4372187d1a121b5a9603f2216 100644 --- a/src/components/Options/LegalNotice/__snapshots__/LegalNoticeLink.spec.tsx.snap +++ b/src/components/Options/LegalNotice/__snapshots__/LegalNoticeLink.spec.tsx.snap @@ -1,46 +1,46 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP exports[`GCULink component should be rendered correctly 1`] = ` -<div - className="gcu-link-root" -> +<div> <div - className="gcu-link-content" + class="gcu-link-root" > - <WithStyles(ForwardRef(Link)) - className="gcu-link-card-link" - component={ - Object { - "$$typeof": Symbol(react.forward_ref), - "displayName": "Link", - "render": [Function], - } - } - to="/options/gcu" + <div + class="gcu-link-content" > - <div - className="card" + <a + class="MuiTypography-root MuiLink-root MuiLink-underlineHover gcu-link-card-link MuiTypography-colorPrimary" + href="/options/gcu" > <div - className="gcu-link-card" + class="card" > <div - className="gcu-link-card-content" + class="gcu-link-card" > - <StyledIcon - className="gcu-link-card-content-icon" - icon="test-file-stub" - size={42} - /> <div - className="gcu-link-card-content-title" + class="gcu-link-card-content" > - common.title_gcu + <svg + aria-hidden="true" + class="gcu-link-card-content-icon styles__icon___23x3R" + height="42" + width="42" + > + <use + xlink:href="#test-file-stub" + /> + </svg> + <div + class="gcu-link-card-content-title" + > + common.title_gcu + </div> </div> </div> </div> - </div> - </WithStyles(ForwardRef(Link))> + </a> + </div> </div> </div> `; diff --git a/src/components/Options/LegalNotice/__snapshots__/LegalNoticeView.spec.tsx.snap b/src/components/Options/LegalNotice/__snapshots__/LegalNoticeView.spec.tsx.snap index e3e3b81e15207a38e46063d71dbfbf700c247024..f236decc8ad65984c4fd9640a1be5cb9915c238d 100644 --- a/src/components/Options/LegalNotice/__snapshots__/LegalNoticeView.spec.tsx.snap +++ b/src/components/Options/LegalNotice/__snapshots__/LegalNoticeView.spec.tsx.snap @@ -1,20 +1,278 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP exports[`LegalNoticeView component should be rendered correctly 1`] = ` -<React.Fragment> +<div> <mock-cozybar - displayBackArrow={true} - titleKey="common.title_legal_notice" + displaybackarrow="true" + titlekey="common.title_legal_notice" /> <mock-header - desktopTitleKey="common.title_legal_notice" - displayBackArrow={true} - setHeaderHeight={[Function]} + desktoptitlekey="common.title_legal_notice" + displaybackarrow="true" /> <mock-content - heightOffset={0} + heightoffset="0" > - <LegalNoticeContent /> + <div + class="legal-notice-root" + > + <div + class="legal-notice-content" + > + <p + class="version" + > + legal.version + </p> + <p> + legal.site + </p> + <p> + legal.adress + </p> + <p> + legal.phone + </p> + <p + class="ln-contact" + > + legal.mail + </p> + <div + class="text-16-normal" + > + <div + class="legal-notice-oneline" + > + <span + class="text-14-normal" + > + legal.p1b + </span> + legal.p1 + </div> + <div + class="legal-notice-oneline" + > + <span + class="text-14-normal" + > + legal.p2b + </span> + legal.p2 + </div> + <div + class="legal-notice-oneline" + > + <span + class="text-14-normal" + > + legal.p3b + </span> + legal.p3 + </div> + <div + class="legal-notice-oneline" + > + <span + class="text-14-normal" + > + legal.p4b + </span> + legal.p4 + </div> + <div + class="legal-notice-oneline" + > + <span + class="text-14-normal" + > + legal.p5b + </span> + legal.p5 + </div> + <div + class="legal-notice-oneline" + > + <span + class="text-14-normal" + > + legal.p6b + </span> + legal.p6 + </div> + <div + class="legal-notice-part" + > + <h3> + + legal.title1 + </h3> + <p> + legal.part1 + </p> + </div> + <div + class="legal-notice-part" + > + <h3> + legal.title2 + </h3> + <p> + legal.part2 + </p> + <ul> + <li> + legal.part2-1 + </li> + <li> + legal.part2-2 + </li> + <li> + legal.part2-3 + <ul> + <li> + legal.part2-3-1 + </li> + <li> + legal.part2-3-2 + </li> + <li> + legal.part2-3-3 + </li> + <li> + legal.part2-3-4 + </li> + <li> + legal.part2-3-5 + </li> + </ul> + </li> + <li> + legal.part2-4 + </li> + </ul> + <p> + legal.part2-5 + </p> + <p> + legal.part2-6 + </p> + <ul> + <li> + legal.part2-6-1 + </li> + <li> + legal.part2-6-2 + </li> + <li> + legal.part2-6-3 + </li> + </ul> + <p> + legal.part2-7 + </p> + <p> + legal.part2-8 + </p> + <p> + legal.part2-9 + </p> + <p> + legal.part2-10 + </p> + <p> + legal.part2-11 + </p> + </div> + <div + class="legal-notice-part" + > + <h3> + legal.title3 + </h3> + <p> + legal.part3-1 + </p> + <p> + legal.part3-2 + </p> + </div> + <div + class="legal-notice-part" + > + <h3> + legal.title4 + </h3> + <p> + legal.part4-1 + </p> + <p> + legal.part4-2 + </p> + </div> + <div + class="legal-notice-part" + > + <h3> + legal.title5 + </h3> + <p> + legal.part5 + </p> + </div> + <div + class="legal-notice-part" + > + <h3> + legal.title6 + </h3> + <p> + legal.part6 + </p> + </div> + <div + class="legal-notice-part" + > + <h3> + legal.title7 + </h3> + <p> + legal.part7-1 + </p> + <p> + legal.part7-2 + </p> + <p> + legal.part7-3 + </p> + </div> + <div + class="legal-notice-part" + > + <h3> + legal.title8 + </h3> + <p> + legal.part8 + </p> + </div> + <div + class="legal-notice-part" + > + <h3> + legal.title9 + </h3> + <p> + legal.part9-1 + </p> + <p> + legal.part9-2 + </p> + </div> + </div> + </div> + </div> </mock-content> -</React.Fragment> +</div> `; diff --git a/src/components/Options/MatomoOptOut/MatomoOptOut.spec.tsx b/src/components/Options/MatomoOptOut/MatomoOptOut.spec.tsx index ad9864f10b2466b2e313d4f6228a5033dd9d8294..3199d0c5f0c0b1b8b1e32217a9576b80978bcacb 100644 --- a/src/components/Options/MatomoOptOut/MatomoOptOut.spec.tsx +++ b/src/components/Options/MatomoOptOut/MatomoOptOut.spec.tsx @@ -1,10 +1,10 @@ -import { shallow } from 'enzyme' +import { render } from '@testing-library/react' import React from 'react' import MatomoOptOut from './MatomoOptOut' describe('MatomoOptOut component', () => { it('should be rendered correctly', () => { - const component = shallow(<MatomoOptOut />).getElement() - expect(component).toMatchSnapshot() + const { container } = render(<MatomoOptOut />) + expect(container).toMatchSnapshot() }) }) diff --git a/src/components/Options/MatomoOptOut/__snapshots__/MatomoOptOut.spec.tsx.snap b/src/components/Options/MatomoOptOut/__snapshots__/MatomoOptOut.spec.tsx.snap index 1ac1911b5acecdc56d7ca24fb7272c7db81a3360..4e821bbf7d2a9b766176578195e820bb88cf36a7 100644 --- a/src/components/Options/MatomoOptOut/__snapshots__/MatomoOptOut.spec.tsx.snap +++ b/src/components/Options/MatomoOptOut/__snapshots__/MatomoOptOut.spec.tsx.snap @@ -1,26 +1,24 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP exports[`MatomoOptOut component should be rendered correctly 1`] = ` -<div - className="matomo-opt-out-container" -> +<div> <div - className="matomo-opt-out" + class="matomo-opt-out-container" > <div - className="opt-out-header text-16-normal-uppercase" + class="matomo-opt-out" > - matomo.matomo_title + <div + class="opt-out-header text-16-normal-uppercase" + > + matomo.matomo_title + </div> + <iframe + src="http://localhost:9800/index.php?module=CoreAdminHome&action=optOut&language=fr&backgroundColor=121212&fontColor=e0e0e0&fontSize=&fontFamily=sans-serif" + style="height: 250px;" + title="opt-out" + /> </div> - <iframe - src="http://localhost:9800/index.php?module=CoreAdminHome&action=optOut&language=fr&backgroundColor=121212&fontColor=e0e0e0&fontSize=&fontFamily=sans-serif" - style={ - Object { - "height": "250px", - } - } - title="opt-out" - /> </div> </div> `; diff --git a/src/components/Options/OptionsView.spec.tsx b/src/components/Options/OptionsView.spec.tsx index d0a1f04c6d5ca25e34771add9ad9c5b51eb71a45..3f42b730e12e6d710235ede391aeee7c24ee6a9d 100644 --- a/src/components/Options/OptionsView.spec.tsx +++ b/src/components/Options/OptionsView.spec.tsx @@ -1,6 +1,9 @@ +import { render, waitFor } from '@testing-library/react' import OptionsView from 'components/Options/OptionsView' -import { shallow } from 'enzyme' import React from 'react' +import { Provider } from 'react-redux' +import { BrowserRouter } from 'react-router-dom' +import { createMockEcolyoStore } from 'tests/__mocks__/store' jest.mock('components/Header/CozyBar', () => 'mock-cozybar') jest.mock('components/Header/Header', () => 'mock-header') @@ -10,9 +13,18 @@ jest.mock( () => 'mock-konnectorviewerlist' ) +const store = createMockEcolyoStore() + describe('OptionsView component', () => { - it('should be rendered correctly', () => { - const component = shallow(<OptionsView />).getElement() - expect(component).toMatchSnapshot() + it('should be rendered correctly', async () => { + const { container } = render( + <BrowserRouter> + <Provider store={store}> + <OptionsView /> + </Provider> + </BrowserRouter> + ) + await waitFor(() => null, { container }) + expect(container).toMatchSnapshot() }) }) diff --git a/src/components/Options/Unsubscribe/UnSubscribeView.spec.tsx b/src/components/Options/Unsubscribe/UnSubscribeView.spec.tsx index 55ada4892d7ed895434fbd064e9bec9021e7b524..55ca9b3317616456a3cd8c49c0f3cbbb1dd453e6 100644 --- a/src/components/Options/Unsubscribe/UnSubscribeView.spec.tsx +++ b/src/components/Options/Unsubscribe/UnSubscribeView.spec.tsx @@ -1,6 +1,6 @@ import { Button } from '@material-ui/core' +import { render } from '@testing-library/react' import { mount } from 'enzyme' -import toJson from 'enzyme-to-json' import React from 'react' import { Provider } from 'react-redux' import * as profileActions from 'store/profile/profile.slice' @@ -31,12 +31,12 @@ describe('UnSubscribe component', () => { }) it('should be rendered correctly', () => { - const wrapper = mount( + const { container } = render( <Provider store={store}> <UnSubscribeView /> </Provider> ) - expect(toJson(wrapper)).toMatchSnapshot() + expect(container).toMatchSnapshot() }) it('should click on button and deactivate report', () => { diff --git a/src/components/Options/Unsubscribe/__snapshots__/UnSubscribeView.spec.tsx.snap b/src/components/Options/Unsubscribe/__snapshots__/UnSubscribeView.spec.tsx.snap index 1a68fd6dd9d04b5d28f887b333b87d11c2c83cba..85efc0cad5e2d2420047f871af41b2bef8bb7a84 100644 --- a/src/components/Options/Unsubscribe/__snapshots__/UnSubscribeView.spec.tsx.snap +++ b/src/components/Options/Unsubscribe/__snapshots__/UnSubscribeView.spec.tsx.snap @@ -1,210 +1,55 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP exports[`UnSubscribe component should be rendered correctly 1`] = ` -<Provider - store={ - Object { - "clearActions": [Function], - "dispatch": [Function], - "getActions": [Function], - "getState": [Function], - "replaceReducer": [Function], - "subscribe": [Function], - } - } -> - <UnSubscribeView> - <mock-cozybar - titleKey="common.title_analysis" - /> - <mock-header - desktopTitleKey="common.title_analysis" - setHeaderHeight={[Function]} - /> - <mock-content - heightOffset={0} +<div> + <mock-cozybar + titlekey="common.title_analysis" + /> + <mock-header + desktoptitlekey="common.title_analysis" + /> + <mock-content + heightoffset="0" + > + <div + class="unsubscribe-container" > + <svg + aria-hidden="true" + class="profile-icon styles__icon___23x3R" + height="250" + width="250" + > + <use + xlink:href="#test-file-stub" + /> + </svg> <div - className="unsubscribe-container" + class="text-20-bold head" > - <StyledIcon - className="profile-icon" - icon="test-file-stub" - size={250} - > - <Icon - aria-hidden={true} - className="profile-icon" - icon="test-file-stub" - size={250} - spin={false} - > - <Component - 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-20-bold head" - > - unsubscribe.title - </div> - <div - className="text-16-normal question" - > - unsubscribe.content - </div> - <WithStyles(ForwardRef(Button)) - aria-label="unsubscribe.button_accessibility" - classes={ - Object { - "label": "text-18-bold", - "root": "btnPrimary", - } - } - onClick={[Function]} - variant="contained" - > - <ForwardRef(Button) - aria-label="unsubscribe.button_accessibility" - 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 btnPrimary", - "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" - > - <WithStyles(ForwardRef(ButtonBase)) - aria-label="unsubscribe.button_accessibility" - className="MuiButton-root btnPrimary MuiButton-contained" - component="button" - disabled={false} - focusRipple={true} - focusVisibleClassName="Mui-focusVisible" - onClick={[Function]} - type="button" - > - <ForwardRef(ButtonBase) - aria-label="unsubscribe.button_accessibility" - className="MuiButton-root btnPrimary MuiButton-contained" - classes={ - Object { - "disabled": "Mui-disabled", - "focusVisible": "Mui-focusVisible", - "root": "MuiButtonBase-root", - } - } - component="button" - disabled={false} - focusRipple={true} - focusVisibleClassName="Mui-focusVisible" - onClick={[Function]} - type="button" - > - <button - aria-label="unsubscribe.button_accessibility" - className="MuiButtonBase-root MuiButton-root btnPrimary 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-18-bold" - > - unsubscribe.button_text - </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))> + unsubscribe.title </div> - </mock-content> - </UnSubscribeView> -</Provider> + <div + class="text-16-normal question" + > + unsubscribe.content + </div> + <button + aria-label="unsubscribe.button_accessibility" + class="MuiButtonBase-root MuiButton-root btnPrimary MuiButton-contained" + tabindex="0" + type="button" + > + <span + class="MuiButton-label text-18-bold" + > + unsubscribe.button_text + </span> + <span + class="MuiTouchRipple-root" + /> + </button> + </div> + </mock-content> +</div> `; diff --git a/src/components/Options/Version/Version.spec.tsx b/src/components/Options/Version/Version.spec.tsx index 9165d73f9f35a54bc3904d362a722665e2480917..0c8640bf891c4e5f4cbea7bb17b604f204a7ead9 100644 --- a/src/components/Options/Version/Version.spec.tsx +++ b/src/components/Options/Version/Version.spec.tsx @@ -1,10 +1,10 @@ +import { render } from '@testing-library/react' import Version from 'components/Options/Version/Version' -import { shallow } from 'enzyme' import React from 'react' describe('Version component', () => { it('should be rendered correctly', () => { - const component = shallow(<Version />).getElement() - expect(component).toMatchSnapshot() + const { container } = render(<Version />) + expect(container).toMatchSnapshot() }) }) diff --git a/src/components/Options/Version/__snapshots__/Version.spec.tsx.snap b/src/components/Options/Version/__snapshots__/Version.spec.tsx.snap index 05ce42fbf8a684a3bd93073e63915d9c9211dbd9..9cb6b48f25e3201cb5765c987748e6d1dd175fa8 100644 --- a/src/components/Options/Version/__snapshots__/Version.spec.tsx.snap +++ b/src/components/Options/Version/__snapshots__/Version.spec.tsx.snap @@ -1,9 +1,11 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP exports[`Version component should be rendered correctly 1`] = ` -<div - className="version-root text-14-normal" -> - v 0.0.0 +<div> + <div + class="version-root text-14-normal" + > + v 0.0.0 + </div> </div> `; diff --git a/src/components/Options/__snapshots__/OptionsView.spec.tsx.snap b/src/components/Options/__snapshots__/OptionsView.spec.tsx.snap index 5417b10551f0928cbf257528d9c345106e34b077..f4e64582fee87f31407a828cb43e6fc24141d170 100644 --- a/src/components/Options/__snapshots__/OptionsView.spec.tsx.snap +++ b/src/components/Options/__snapshots__/OptionsView.spec.tsx.snap @@ -1,34 +1,399 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP exports[`OptionsView component should be rendered correctly 1`] = ` -<React.Fragment> +<div> <mock-cozybar - titleKey="common.title_options" + titlekey="common.title_options" /> <mock-header - desktopTitleKey="common.title_options" - setHeaderHeight={[Function]} + desktoptitlekey="common.title_options" /> <mock-content - heightOffset={0} + heightoffset="0" > - <ProfileTypeOptions /> - <ExportData /> - <ReportOptions /> - <HelpLink /> - <LegalNoticeLink /> - <GCULink /> - <Accessibility /> - <MatomoOptOut /> <div - className="parameters-logos" + class="profile-type-root" + > + <div + class="profile-type-content" + > + <div + class="head text-16-normal-uppercase" + > + profile_type.title_profile + </div> + <button + class="MuiButtonBase-root MuiCardActionArea-root WithStyles(ForwardRef(CardActionArea))-root-1 profile-link" + tabindex="0" + type="button" + > + <div + class="MuiCardContent-root WithStyles(ForwardRef(CardContent))-root-2" + > + <svg + aria-hidden="true" + class="profile-icon styles__icon___23x3R" + height="42" + width="42" + > + <use + xlink:href="#test-file-stub" + /> + </svg> + <span + class="link-label text-16-normal" + > + profile_type.read_profile + </span> + </div> + <span + class="MuiCardActionArea-focusHighlight" + /> + <span + class="MuiTouchRipple-root" + /> + </button> + </div> + </div> + <div + class="export-option-root" + > + <div + class="export-option-content" + > + <div + class="MuiPaper-root MuiAccordion-root expansion-panel-root MuiAccordion-rounded MuiPaper-elevation1 MuiPaper-rounded" + > + <div + aria-disabled="false" + aria-expanded="false" + aria-label="profile_type.accessibility.button_toggle_export" + class="MuiButtonBase-root MuiAccordionSummary-root expansion-panel-summary" + role="button" + tabindex="0" + > + <div + class="MuiAccordionSummary-content expansion-panel-content" + > + <svg + class="export-icon styles__icon___23x3R" + height="42" + width="42" + > + <use + xlink:href="#test-file-stub" + /> + </svg> + <div + class="text-16-normal accordion-title" + > + export.title_export + </div> + </div> + <div + aria-disabled="false" + aria-hidden="true" + class="MuiButtonBase-root MuiIconButton-root MuiAccordionSummary-expandIcon MuiIconButton-edgeEnd" + > + <span + class="MuiIconButton-label" + > + <svg + class="accordion-icon styles__icon___23x3R" + height="16" + width="16" + > + <use + xlink:href="#test-file-stub" + /> + </svg> + </span> + <span + class="MuiTouchRipple-root" + /> + </div> + </div> + <div + class="MuiCollapse-root MuiCollapse-hidden" + style="min-height: 0px;" + > + <div + class="MuiCollapse-wrapper" + > + <div + class="MuiCollapse-wrapperInner" + > + <div + role="region" + > + <div + class="MuiAccordionDetails-root expansion-panel-details" + > + <div + class="text-15-normal grey" + > + export.text1 + </div> + <div + class="text-16-bold" + > + export.fluid_select + </div> + <div + class="text-15-normal grey" + > + export.no_data + </div> + </div> + </div> + </div> + </div> + </div> + </div> + </div> + </div> + <div + class="report-option-root" + > + <div + class="report-option-content" + > + <div + class="head text-16-normal-uppercase" + > + profile.report.title_bilan + </div> + <div + class="switch-container-bilan" + > + <span + class="switch-label text-16-normal" + > + profile.report.switch_label_bilan + </span> + <div + class="button-container" + > + <button + aria-label="unsubscribe.button_accessibility" + class="MuiButtonBase-root MuiButton-root btnPrimary MuiButton-contained" + tabindex="0" + type="button" + > + <span + class="MuiButton-label text-18-bold" + > + profile.report.deactivate + </span> + <span + class="MuiTouchRipple-root" + /> + </button> + </div> + </div> + </div> + </div> + <div + class="help-root" + > + <div + class="help-content" + > + <div + class="help-header text-16-normal-uppercase" + > + help.title_help + </div> + <a + class="MuiTypography-root MuiLink-root MuiLink-underlineHover help-card-link MuiTypography-colorPrimary" + > + <div + class="card" + > + <div + class="help-card" + > + <div + class="help-card-content" + > + <svg + aria-hidden="true" + class="help-card-content-icon styles__icon___23x3R" + height="42" + width="42" + > + <use + xlink:href="#test-file-stub" + /> + </svg> + <div + class="help-card-content-title" + > + help.read_help + </div> + </div> + </div> + </div> + </a> + </div> + </div> + <div + class="legal-notice-root" + > + <div + class="legal-notice-content" + > + <div + class="legal-notice-header text-16-normal-uppercase" + > + legal.title_legal + </div> + <a + class="MuiTypography-root MuiLink-root MuiLink-underlineHover legal-notice-card-link MuiTypography-colorPrimary" + href="/options/legalnotice" + > + <div + class="card" + > + <div + class="legal-notice-card" + > + <div + class="legal-notice-card-content" + > + <svg + aria-hidden="true" + class="legal-notice-card-content-icon styles__icon___23x3R" + height="42" + width="42" + > + <use + xlink:href="#test-file-stub" + /> + </svg> + <div + class="legal-notice-card-content-title" + > + legal.read_legal + </div> + </div> + </div> + </div> + </a> + </div> + </div> + <div + class="gcu-link-root" + > + <div + class="gcu-link-content" + > + <a + class="MuiTypography-root MuiLink-root MuiLink-underlineHover gcu-link-card-link MuiTypography-colorPrimary" + href="/options/gcu" + > + <div + class="card" + > + <div + class="gcu-link-card" + > + <div + class="gcu-link-card-content" + > + <svg + aria-hidden="true" + class="gcu-link-card-content-icon styles__icon___23x3R" + height="42" + width="42" + > + <use + xlink:href="#test-file-stub" + /> + </svg> + <div + class="gcu-link-card-content-title" + > + common.title_gcu + </div> + </div> + </div> + </div> + </a> + </div> + </div> + <div + class="gcu-link-root" + > + <div + class="gcu-link-content" + > + <a + class="MuiTypography-root MuiLink-root MuiLink-underlineHover gcu-link-card-link MuiTypography-colorPrimary" + href="https://ecolyo.com/accessibilite.html" + target="_blank" + > + <div + class="card" + > + <div + class="gcu-link-card" + > + <div + class="gcu-link-card-content" + > + <svg + aria-hidden="true" + class="gcu-link-card-content-icon styles__icon___23x3R" + height="42" + width="42" + > + <use + xlink:href="#test-file-stub" + /> + </svg> + <div + class="gcu-link-card-content-title" + > + common.title_accessibility + </div> + </div> + </div> + </div> + </a> + </div> + </div> + <div + class="matomo-opt-out-container" + > + <div + class="matomo-opt-out" + > + <div + class="opt-out-header text-16-normal-uppercase" + > + matomo.matomo_title + </div> + <iframe + src="http://localhost:9800/index.php?module=CoreAdminHome&action=optOut&language=fr&backgroundColor=121212&fontColor=e0e0e0&fontSize=&fontFamily=sans-serif" + style="height: 250px;" + title="opt-out" + /> + </div> + </div> + <div + class="parameters-logos" > <img alt="ensemble de logos" src="test-file-stub" /> </div> - <Version /> + <div + class="version-root text-14-normal" + > + v 0.0.0 + </div> </mock-content> -</React.Fragment> +</div> `; diff --git a/src/components/Splash/SplashRoot.spec.tsx b/src/components/Splash/SplashRoot.spec.tsx index 55bce081c191a794a3c82d34dafa55c0c344c466..0f27dbc19a450c5a76d97d1045eb8d92d61ab574 100644 --- a/src/components/Splash/SplashRoot.spec.tsx +++ b/src/components/Splash/SplashRoot.spec.tsx @@ -1,5 +1,4 @@ -import { mount } from 'enzyme' -import toJson from 'enzyme-to-json' +import { render } from '@testing-library/react' import React from 'react' import { Provider } from 'react-redux' import { createMockEcolyoStore } from 'tests/__mocks__/store' @@ -14,13 +13,12 @@ jest.mock('@sentry/react', () => ({ describe('SplashRoot component', () => { it('should be rendered correctly', async () => { const store = createMockEcolyoStore() - const component = mount( + const { container } = render( <Provider store={store}> <SplashRoot>children</SplashRoot> </Provider> ) - // TODO we should waitForComponent - // await waitForComponentToPaint(component) - expect(toJson(component)).toMatchSnapshot() + + expect(container).toMatchSnapshot() }) }) diff --git a/src/components/Splash/SplashScreen.spec.tsx b/src/components/Splash/SplashScreen.spec.tsx index 2277171e630a2a725a43747ee81bd56cadb6384b..a8c692fbc40679130cd74dfd6eb681e79e4f67ed 100644 --- a/src/components/Splash/SplashScreen.spec.tsx +++ b/src/components/Splash/SplashScreen.spec.tsx @@ -1,12 +1,11 @@ -import { mount } from 'enzyme' -import toJson from 'enzyme-to-json' +import { render } from '@testing-library/react' import { InitSteps } from 'models/initialisationSteps.model' import React from 'react' import SplashScreen from './SplashScreen' describe('SplashScreen component', () => { it('should be rendered correctly', () => { - const component = mount(<SplashScreen initStep={InitSteps.CONSENT} />) - expect(toJson(component)).toMatchSnapshot() + const { container } = render(<SplashScreen initStep={InitSteps.CONSENT} />) + expect(container).toMatchSnapshot() }) }) diff --git a/src/components/Splash/SplashScreenError.spec.tsx b/src/components/Splash/SplashScreenError.spec.tsx index 4f44a4380beb5805ea68519d93de19f16747277b..fdc4e5fa594aaaf15732ef0aee420bf1b119dc23 100644 --- a/src/components/Splash/SplashScreenError.spec.tsx +++ b/src/components/Splash/SplashScreenError.spec.tsx @@ -1,7 +1,5 @@ import { render, screen } from '@testing-library/react' import { userEvent } from '@testing-library/user-event' -import { mount } from 'enzyme' -import toJson from 'enzyme-to-json' import { InitStepsErrors } from 'models/initialisationSteps.model' import React from 'react' import SplashScreenError from './SplashScreenError' @@ -19,10 +17,10 @@ describe('SplashScreenError component', () => { window.location.reload = reload }) it('should be rendered correctly', () => { - const component = mount( + const { container } = render( <SplashScreenError error={InitStepsErrors.CONSENT_ERROR} /> ) - expect(toJson(component)).toMatchSnapshot() + expect(container).toMatchSnapshot() }) it('should reload the page', async () => { render(<SplashScreenError error={InitStepsErrors.CONSENT_ERROR} />) diff --git a/src/components/Splash/__snapshots__/SplashRoot.spec.tsx.snap b/src/components/Splash/__snapshots__/SplashRoot.spec.tsx.snap index e08db15efcfc96775a4cb572766f96015ae5e8b5..b0bdc3fbd8f3fbb61a55b0fb16254858ed550f59 100644 --- a/src/components/Splash/__snapshots__/SplashRoot.spec.tsx.snap +++ b/src/components/Splash/__snapshots__/SplashRoot.spec.tsx.snap @@ -1,76 +1,51 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP exports[`SplashRoot component should be rendered correctly 1`] = ` -<Provider - store={ - Object { - "clearActions": [Function], - "dispatch": [Function], - "getActions": [Function], - "getState": [Function], - "replaceReducer": [Function], - "subscribe": [Function], - } - } -> - <SplashRoot> +<div> + <div + class="splash-root" + style="transition-duration: 1s;" + > <div - className="splash-root" - style={ - Object { - "transitionDuration": "1s", - } - } + class="splash-content" > - <SplashScreen - initStep={1} + <div + class="splash-loader" > + <img + alt="Chargement" + src="test-file-stub" + /> + <span> + Ecolyo + </span> <div - className="splash-content" + class="splash-progress" > <div - className="splash-loader" + class="splash-progress-bar-container" > - <img - alt="Chargement" - src="test-file-stub" - /> - <span> - Ecolyo - </span> <div - className="splash-progress" - > - <div - className="splash-progress-bar-container" - > - <div - className="splash-progress-bar-content" - style={ - Object { - "left": "-73%", - } - } - /> - </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" + class="splash-progress-bar-content" + style="left: -73%;" /> </div> </div> - </SplashScreen> + </div> + <div + class="step-label text-18-normal" + > + splashscreen.step.1 + </div> + <div + class="splash-logos-container" + > + <img + alt="ensemble de logos" + src="test-file-stub" + /> + </div> </div> - </SplashRoot> -</Provider> + </div> +</div> `; diff --git a/src/components/Splash/__snapshots__/SplashScreen.spec.tsx.snap b/src/components/Splash/__snapshots__/SplashScreen.spec.tsx.snap index 089fbbee784a09ee4bde93983143a772877d50d4..ac994b7876cf9d83b80f0744e268852520b9c52b 100644 --- a/src/components/Splash/__snapshots__/SplashScreen.spec.tsx.snap +++ b/src/components/Splash/__snapshots__/SplashScreen.spec.tsx.snap @@ -1,14 +1,12 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP exports[`SplashScreen component should be rendered correctly 1`] = ` -<SplashScreen - initStep={1} -> +<div> <div - className="splash-content" + class="splash-content" > <div - className="splash-loader" + class="splash-loader" > <img alt="Chargement" @@ -18,29 +16,25 @@ exports[`SplashScreen component should be rendered correctly 1`] = ` Ecolyo </span> <div - className="splash-progress" + class="splash-progress" > <div - className="splash-progress-bar-container" + class="splash-progress-bar-container" > <div - className="splash-progress-bar-content" - style={ - Object { - "left": "-73%", - } - } + class="splash-progress-bar-content" + style="left: -73%;" /> </div> </div> </div> <div - className="step-label text-18-normal" + class="step-label text-18-normal" > splashscreen.step.1 </div> <div - className="splash-logos-container" + class="splash-logos-container" > <img alt="ensemble de logos" @@ -48,5 +42,5 @@ exports[`SplashScreen component should be rendered correctly 1`] = ` /> </div> </div> -</SplashScreen> +</div> `; diff --git a/src/components/Splash/__snapshots__/SplashScreenError.spec.tsx.snap b/src/components/Splash/__snapshots__/SplashScreenError.spec.tsx.snap index 21c1c6a7cfd23f56789316554531f6aec30b74eb..d3da35f446a95fc41b62bc79dac78848a1b8d428 100644 --- a/src/components/Splash/__snapshots__/SplashScreenError.spec.tsx.snap +++ b/src/components/Splash/__snapshots__/SplashScreenError.spec.tsx.snap @@ -1,193 +1,56 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP exports[`SplashScreenError component should be rendered correctly 1`] = ` -<SplashScreenError - error="consent_error" -> +<div> <div - className="splash-content" + class="splash-content" > <div - className="splash-loader" + class="splash-loader" > - <StyledIcon - className="error" - icon="test-file-stub" - size={130} + <svg + aria-hidden="true" + class="error styles__icon___23x3R" + height="130" + width="130" > - <Icon - aria-hidden={true} - className="error" - icon="test-file-stub" - size={130} - spin={false} - > - <Component - aria-hidden={true} - className="error styles__icon___23x3R" - height={130} - style={Object {}} - width={130} - > - <svg - aria-hidden={true} - className="error styles__icon___23x3R" - height={130} - style={Object {}} - width={130} - > - <use - xlinkHref="#test-file-stub" - /> - </svg> - </Component> - </Icon> - </StyledIcon> + <use + xlink:href="#test-file-stub" + /> + </svg> <span> Ecolyo </span> <div - className="splash-error-text text-20-bold" + class="splash-error-text text-20-bold" > splashscreen.error_loading </div> <div - className="splash-error-text text-18-normal" + class="splash-error-text text-18-normal" > splashscreen.consent_error </div> </div> </div> <div - className="splash-footer" + class="splash-footer" > - <WithStyles(ForwardRef(Button)) + <button aria-label="splashscreen.accessibility.button_reload" - className="btnPrimary splash-footer-button" - onClick={[Function]} + class="MuiButtonBase-root MuiButton-root MuiButton-text btnPrimary splash-footer-button" + tabindex="0" + type="button" > - <ForwardRef(Button) - aria-label="splashscreen.accessibility.button_reload" - className="btnPrimary splash-footer-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", - "outlined": "MuiButton-outlined", - "outlinedPrimary": "MuiButton-outlinedPrimary", - "outlinedSecondary": "MuiButton-outlinedSecondary", - "outlinedSizeLarge": "MuiButton-outlinedSizeLarge", - "outlinedSizeSmall": "MuiButton-outlinedSizeSmall", - "root": "MuiButton-root", - "sizeLarge": "MuiButton-sizeLarge", - "sizeSmall": "MuiButton-sizeSmall", - "startIcon": "MuiButton-startIcon", - "text": "MuiButton-text", - "textPrimary": "MuiButton-textPrimary", - "textSecondary": "MuiButton-textSecondary", - "textSizeLarge": "MuiButton-textSizeLarge", - "textSizeSmall": "MuiButton-textSizeSmall", - } - } - onClick={[Function]} + <span + class="MuiButton-label" > - <WithStyles(ForwardRef(ButtonBase)) - aria-label="splashscreen.accessibility.button_reload" - className="MuiButton-root MuiButton-text btnPrimary splash-footer-button" - component="button" - disabled={false} - focusRipple={true} - focusVisibleClassName="Mui-focusVisible" - onClick={[Function]} - type="button" - > - <ForwardRef(ButtonBase) - aria-label="splashscreen.accessibility.button_reload" - className="MuiButton-root MuiButton-text btnPrimary splash-footer-button" - classes={ - Object { - "disabled": "Mui-disabled", - "focusVisible": "Mui-focusVisible", - "root": "MuiButtonBase-root", - } - } - component="button" - disabled={false} - focusRipple={true} - focusVisibleClassName="Mui-focusVisible" - onClick={[Function]} - type="button" - > - <button - aria-label="splashscreen.accessibility.button_reload" - className="MuiButtonBase-root MuiButton-root MuiButton-text btnPrimary splash-footer-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="MuiButton-label" - > - splashscreen.button_reload - </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))> + splashscreen.button_reload + </span> + <span + class="MuiTouchRipple-root" + /> + </button> </div> -</SplashScreenError> +</div> `; diff --git a/src/components/Terms/CGUModal.spec.tsx b/src/components/Terms/CGUModal.spec.tsx index 8e54916bc82c6fc57c15e19143b5445b98707f21..12f008ce0bf8e2ba5fe63720411c9b34b42be720 100644 --- a/src/components/Terms/CGUModal.spec.tsx +++ b/src/components/Terms/CGUModal.spec.tsx @@ -1,13 +1,12 @@ -import { mount } from 'enzyme' -import toJson from 'enzyme-to-json' +import { render } from '@testing-library/react' import React from 'react' import CGUModal from './CGUModal' describe('CGUModal component', () => { it('should be rendered correctly', () => { - const component = mount( + const { baseElement } = render( <CGUModal open={true} handleCloseClick={jest.fn()} /> ) - expect(toJson(component)).toMatchSnapshot() + expect(baseElement).toMatchSnapshot() }) }) diff --git a/src/components/Terms/DataShareConsentContent.spec.tsx b/src/components/Terms/DataShareConsentContent.spec.tsx index e2653b92ad8d0b25428984fbb73461a13912c05b..d2e1baab73a768707a7f3ebd2a12facf01663965 100644 --- a/src/components/Terms/DataShareConsentContent.spec.tsx +++ b/src/components/Terms/DataShareConsentContent.spec.tsx @@ -1,5 +1,4 @@ -import { mount } from 'enzyme' -import toJson from 'enzyme-to-json' +import { render } from '@testing-library/react' import React from 'react' import { Provider } from 'react-redux' import { createMockEcolyoStore } from 'tests/__mocks__/store' @@ -10,22 +9,22 @@ describe('DataShareConsentContent component', () => { const store = createMockEcolyoStore({ profile: { isFirstConnection: true }, }) - const component = mount( + const { container } = render( <Provider store={store}> <DataShareConsentContent /> </Provider> ) - expect(toJson(component)).toMatchSnapshot() + expect(container).toMatchSnapshot() }) it('should be rendered correctly without first connexion text', () => { const store = createMockEcolyoStore({ profile: { isFirstConnection: false }, }) - const component = mount( + const { container } = render( <Provider store={store}> <DataShareConsentContent /> </Provider> ) - expect(toJson(component)).toMatchSnapshot() + expect(container).toMatchSnapshot() }) }) diff --git a/src/components/Terms/LegalNoticeModal.spec.tsx b/src/components/Terms/LegalNoticeModal.spec.tsx index 1c8144711c383bebe7ab3f60a0cea09f67986d5f..227d9c68eeff921e7e8972c229f40e4bb5dbb07e 100644 --- a/src/components/Terms/LegalNoticeModal.spec.tsx +++ b/src/components/Terms/LegalNoticeModal.spec.tsx @@ -1,13 +1,12 @@ -import { mount } from 'enzyme' -import toJson from 'enzyme-to-json' +import { render } from '@testing-library/react' import React from 'react' import LegalNoticeModal from './LegalNoticeModal' describe('LegalNoticeModal component', () => { it('should be rendered correctly', () => { - const component = mount( + const { baseElement } = render( <LegalNoticeModal open={true} handleCloseClick={jest.fn()} /> ) - expect(toJson(component)).toMatchSnapshot() + expect(baseElement).toMatchSnapshot() }) }) diff --git a/src/components/Terms/MinorUpdateContent.spec.tsx b/src/components/Terms/MinorUpdateContent.spec.tsx index 01cc232537a5da4339ab3337eeb4541942cfac08..f6552d6cbb29346e44e99a9f305060375c91c26f 100644 --- a/src/components/Terms/MinorUpdateContent.spec.tsx +++ b/src/components/Terms/MinorUpdateContent.spec.tsx @@ -1,11 +1,10 @@ -import { mount } from 'enzyme' -import toJson from 'enzyme-to-json' +import { render } from '@testing-library/react' import React from 'react' import MinorUpdateContent from './MinorUpdateContent' describe('Minor update content component', () => { it('should be rendered correctly', () => { - const component = mount(<MinorUpdateContent />) - expect(toJson(component)).toMatchSnapshot() + const { container } = render(<MinorUpdateContent />) + expect(container).toMatchSnapshot() }) }) diff --git a/src/components/Terms/TermsView.spec.tsx b/src/components/Terms/TermsView.spec.tsx index 970a43b475a84c35eea3d0473010e62ccc73649f..d5206d463f413f6f989b0453f49dc707c5a8e390 100644 --- a/src/components/Terms/TermsView.spec.tsx +++ b/src/components/Terms/TermsView.spec.tsx @@ -1,7 +1,5 @@ import { render, screen } from '@testing-library/react' import { userEvent } from '@testing-library/user-event' -import { mount } from 'enzyme' -import toJson from 'enzyme-to-json' import React from 'react' import { Provider } from 'react-redux' import * as storeHooks from 'store/hooks' @@ -34,12 +32,12 @@ describe('TermsView component', () => { }) it('should be rendered correctly', () => { - const component = mount( + const { container } = render( <Provider store={store}> <TermsView /> </Provider> ) - expect(toJson(component)).toMatchSnapshot() + expect(container).toMatchSnapshot() }) it('should be unable to click "validate" button first then enable checkboxes and valid consent', async () => { mockCreateTerm.mockResolvedValueOnce(mockUpToDateTerm) diff --git a/src/components/Terms/__snapshots__/CGUModal.spec.tsx.snap b/src/components/Terms/__snapshots__/CGUModal.spec.tsx.snap index 15dfa6bd81c549f3807acc75c8bbcc16946db8f7..a2fff83b060e8eb574459d9e44ff77973dadaa83 100644 --- a/src/components/Terms/__snapshots__/CGUModal.spec.tsx.snap +++ b/src/components/Terms/__snapshots__/CGUModal.spec.tsx.snap @@ -1,1491 +1,360 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP exports[`CGUModal component should be rendered correctly 1`] = ` -<CGUModal - handleCloseClick={[MockFunction]} - open={true} +<body + style="padding-right: 0px; overflow: hidden;" > - <WithStyles(ForwardRef(Dialog)) - aria-labelledby="accessibility-title" - classes={ - Object { - "paper": "modal-paper", - "root": "modal-root", - } - } - onClose={[MockFunction]} - open={true} + <div + aria-hidden="true" + /> + <div + class="MuiDialog-root modal-root" + role="presentation" + style="position: fixed; z-index: 1300; right: 0px; bottom: 0px; top: 0px; left: 0px;" > - <ForwardRef(Dialog) - aria-labelledby="accessibility-title" - classes={ - Object { - "container": "MuiDialog-container", - "paper": "MuiDialog-paper modal-paper", - "paperFullScreen": "MuiDialog-paperFullScreen", - "paperFullWidth": "MuiDialog-paperFullWidth", - "paperScrollBody": "MuiDialog-paperScrollBody", - "paperScrollPaper": "MuiDialog-paperScrollPaper", - "paperWidthFalse": "MuiDialog-paperWidthFalse", - "paperWidthLg": "MuiDialog-paperWidthLg", - "paperWidthMd": "MuiDialog-paperWidthMd", - "paperWidthSm": "MuiDialog-paperWidthSm", - "paperWidthXl": "MuiDialog-paperWidthXl", - "paperWidthXs": "MuiDialog-paperWidthXs", - "root": "MuiDialog-root modal-root", - "scrollBody": "MuiDialog-scrollBody", - "scrollPaper": "MuiDialog-scrollPaper", - } - } - onClose={[MockFunction]} - open={true} + <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" > - <ForwardRef(Modal) - BackdropComponent={ - Object { - "$$typeof": Symbol(react.forward_ref), - "Naked": Object { - "$$typeof": Symbol(react.forward_ref), - "propTypes": Object { - "children": [Function], - "className": [Function], - "classes": [Function], - "invisible": [Function], - "open": [Function], - "transitionDuration": [Function], - }, - "render": [Function], - }, - "displayName": "WithStyles(ForwardRef(Backdrop))", - "options": Object { - "defaultTheme": Object { - "breakpoints": Object { - "between": [Function], - "down": [Function], - "keys": Array [ - "xs", - "sm", - "md", - "lg", - "xl", - ], - "only": [Function], - "up": [Function], - "values": Object { - "lg": 1280, - "md": 960, - "sm": 600, - "xl": 1920, - "xs": 0, - }, - "width": [Function], - }, - "direction": "ltr", - "mixins": Object { - "gutters": [Function], - "toolbar": Object { - "@media (min-width:0px) and (orientation: landscape)": Object { - "minHeight": 48, - }, - "@media (min-width:600px)": Object { - "minHeight": 64, - }, - "minHeight": 56, - }, - }, - "overrides": Object {}, - "palette": Object { - "action": Object { - "activatedOpacity": 0.12, - "active": "rgba(0, 0, 0, 0.54)", - "disabled": "rgba(0, 0, 0, 0.26)", - "disabledBackground": "rgba(0, 0, 0, 0.12)", - "disabledOpacity": 0.38, - "focus": "rgba(0, 0, 0, 0.12)", - "focusOpacity": 0.12, - "hover": "rgba(0, 0, 0, 0.04)", - "hoverOpacity": 0.04, - "selected": "rgba(0, 0, 0, 0.08)", - "selectedOpacity": 0.08, - }, - "augmentColor": [Function], - "background": Object { - "default": "#fafafa", - "paper": "#fff", - }, - "common": Object { - "black": "#000", - "white": "#fff", - }, - "contrastThreshold": 3, - "divider": "rgba(0, 0, 0, 0.12)", - "error": Object { - "contrastText": "#fff", - "dark": "#d32f2f", - "light": "#e57373", - "main": "#f44336", - }, - "getContrastText": [Function], - "grey": Object { - "100": "#f5f5f5", - "200": "#eeeeee", - "300": "#e0e0e0", - "400": "#bdbdbd", - "50": "#fafafa", - "500": "#9e9e9e", - "600": "#757575", - "700": "#616161", - "800": "#424242", - "900": "#212121", - "A100": "#d5d5d5", - "A200": "#aaaaaa", - "A400": "#303030", - "A700": "#616161", - }, - "info": Object { - "contrastText": "#fff", - "dark": "#1976d2", - "light": "#64b5f6", - "main": "#2196f3", - }, - "primary": Object { - "contrastText": "#fff", - "dark": "#303f9f", - "light": "#7986cb", - "main": "#3f51b5", - }, - "secondary": Object { - "contrastText": "#fff", - "dark": "#c51162", - "light": "#ff4081", - "main": "#f50057", - }, - "success": Object { - "contrastText": "rgba(0, 0, 0, 0.87)", - "dark": "#388e3c", - "light": "#81c784", - "main": "#4caf50", - }, - "text": Object { - "disabled": "rgba(0, 0, 0, 0.38)", - "hint": "rgba(0, 0, 0, 0.38)", - "primary": "rgba(0, 0, 0, 0.87)", - "secondary": "rgba(0, 0, 0, 0.54)", - }, - "tonalOffset": 0.2, - "type": "light", - "warning": Object { - "contrastText": "rgba(0, 0, 0, 0.87)", - "dark": "#f57c00", - "light": "#ffb74d", - "main": "#ff9800", - }, - }, - "props": Object {}, - "shadows": Array [ - "none", - "0px 2px 1px -1px rgba(0,0,0,0.2),0px 1px 1px 0px rgba(0,0,0,0.14),0px 1px 3px 0px rgba(0,0,0,0.12)", - "0px 3px 1px -2px rgba(0,0,0,0.2),0px 2px 2px 0px rgba(0,0,0,0.14),0px 1px 5px 0px rgba(0,0,0,0.12)", - "0px 3px 3px -2px rgba(0,0,0,0.2),0px 3px 4px 0px rgba(0,0,0,0.14),0px 1px 8px 0px rgba(0,0,0,0.12)", - "0px 2px 4px -1px rgba(0,0,0,0.2),0px 4px 5px 0px rgba(0,0,0,0.14),0px 1px 10px 0px rgba(0,0,0,0.12)", - "0px 3px 5px -1px rgba(0,0,0,0.2),0px 5px 8px 0px rgba(0,0,0,0.14),0px 1px 14px 0px rgba(0,0,0,0.12)", - "0px 3px 5px -1px rgba(0,0,0,0.2),0px 6px 10px 0px rgba(0,0,0,0.14),0px 1px 18px 0px rgba(0,0,0,0.12)", - "0px 4px 5px -2px rgba(0,0,0,0.2),0px 7px 10px 1px rgba(0,0,0,0.14),0px 2px 16px 1px rgba(0,0,0,0.12)", - "0px 5px 5px -3px rgba(0,0,0,0.2),0px 8px 10px 1px rgba(0,0,0,0.14),0px 3px 14px 2px rgba(0,0,0,0.12)", - "0px 5px 6px -3px rgba(0,0,0,0.2),0px 9px 12px 1px rgba(0,0,0,0.14),0px 3px 16px 2px rgba(0,0,0,0.12)", - "0px 6px 6px -3px rgba(0,0,0,0.2),0px 10px 14px 1px rgba(0,0,0,0.14),0px 4px 18px 3px rgba(0,0,0,0.12)", - "0px 6px 7px -4px rgba(0,0,0,0.2),0px 11px 15px 1px rgba(0,0,0,0.14),0px 4px 20px 3px rgba(0,0,0,0.12)", - "0px 7px 8px -4px rgba(0,0,0,0.2),0px 12px 17px 2px rgba(0,0,0,0.14),0px 5px 22px 4px rgba(0,0,0,0.12)", - "0px 7px 8px -4px rgba(0,0,0,0.2),0px 13px 19px 2px rgba(0,0,0,0.14),0px 5px 24px 4px rgba(0,0,0,0.12)", - "0px 7px 9px -4px rgba(0,0,0,0.2),0px 14px 21px 2px rgba(0,0,0,0.14),0px 5px 26px 4px rgba(0,0,0,0.12)", - "0px 8px 9px -5px rgba(0,0,0,0.2),0px 15px 22px 2px rgba(0,0,0,0.14),0px 6px 28px 5px rgba(0,0,0,0.12)", - "0px 8px 10px -5px rgba(0,0,0,0.2),0px 16px 24px 2px rgba(0,0,0,0.14),0px 6px 30px 5px rgba(0,0,0,0.12)", - "0px 8px 11px -5px rgba(0,0,0,0.2),0px 17px 26px 2px rgba(0,0,0,0.14),0px 6px 32px 5px rgba(0,0,0,0.12)", - "0px 9px 11px -5px rgba(0,0,0,0.2),0px 18px 28px 2px rgba(0,0,0,0.14),0px 7px 34px 6px rgba(0,0,0,0.12)", - "0px 9px 12px -6px rgba(0,0,0,0.2),0px 19px 29px 2px rgba(0,0,0,0.14),0px 7px 36px 6px rgba(0,0,0,0.12)", - "0px 10px 13px -6px rgba(0,0,0,0.2),0px 20px 31px 3px rgba(0,0,0,0.14),0px 8px 38px 7px rgba(0,0,0,0.12)", - "0px 10px 13px -6px rgba(0,0,0,0.2),0px 21px 33px 3px rgba(0,0,0,0.14),0px 8px 40px 7px rgba(0,0,0,0.12)", - "0px 10px 14px -6px rgba(0,0,0,0.2),0px 22px 35px 3px rgba(0,0,0,0.14),0px 8px 42px 7px rgba(0,0,0,0.12)", - "0px 11px 14px -7px rgba(0,0,0,0.2),0px 23px 36px 3px rgba(0,0,0,0.14),0px 9px 44px 8px rgba(0,0,0,0.12)", - "0px 11px 15px -7px rgba(0,0,0,0.2),0px 24px 38px 3px rgba(0,0,0,0.14),0px 9px 46px 8px rgba(0,0,0,0.12)", - ], - "shape": Object { - "borderRadius": 4, - }, - "spacing": [Function], - "transitions": Object { - "create": [Function], - "duration": Object { - "complex": 375, - "enteringScreen": 225, - "leavingScreen": 195, - "short": 250, - "shorter": 200, - "shortest": 150, - "standard": 300, - }, - "easing": Object { - "easeIn": "cubic-bezier(0.4, 0, 1, 1)", - "easeInOut": "cubic-bezier(0.4, 0, 0.2, 1)", - "easeOut": "cubic-bezier(0.0, 0, 0.2, 1)", - "sharp": "cubic-bezier(0.4, 0, 0.6, 1)", - }, - "getAutoHeightDuration": [Function], - }, - "typography": Object { - "body1": Object { - "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif", - "fontSize": "1rem", - "fontWeight": 400, - "letterSpacing": "0.00938em", - "lineHeight": 1.5, - }, - "body2": Object { - "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif", - "fontSize": "0.875rem", - "fontWeight": 400, - "letterSpacing": "0.01071em", - "lineHeight": 1.43, - }, - "button": Object { - "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif", - "fontSize": "0.875rem", - "fontWeight": 500, - "letterSpacing": "0.02857em", - "lineHeight": 1.75, - "textTransform": "uppercase", - }, - "caption": Object { - "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif", - "fontSize": "0.75rem", - "fontWeight": 400, - "letterSpacing": "0.03333em", - "lineHeight": 1.66, - }, - "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif", - "fontSize": 14, - "fontWeightBold": 700, - "fontWeightLight": 300, - "fontWeightMedium": 500, - "fontWeightRegular": 400, - "h1": Object { - "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif", - "fontSize": "6rem", - "fontWeight": 300, - "letterSpacing": "-0.01562em", - "lineHeight": 1.167, - }, - "h2": Object { - "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif", - "fontSize": "3.75rem", - "fontWeight": 300, - "letterSpacing": "-0.00833em", - "lineHeight": 1.2, - }, - "h3": Object { - "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif", - "fontSize": "3rem", - "fontWeight": 400, - "letterSpacing": "0em", - "lineHeight": 1.167, - }, - "h4": Object { - "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif", - "fontSize": "2.125rem", - "fontWeight": 400, - "letterSpacing": "0.00735em", - "lineHeight": 1.235, - }, - "h5": Object { - "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif", - "fontSize": "1.5rem", - "fontWeight": 400, - "letterSpacing": "0em", - "lineHeight": 1.334, - }, - "h6": Object { - "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif", - "fontSize": "1.25rem", - "fontWeight": 500, - "letterSpacing": "0.0075em", - "lineHeight": 1.6, - }, - "htmlFontSize": 16, - "overline": Object { - "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif", - "fontSize": "0.75rem", - "fontWeight": 400, - "letterSpacing": "0.08333em", - "lineHeight": 2.66, - "textTransform": "uppercase", - }, - "pxToRem": [Function], - "round": [Function], - "subtitle1": Object { - "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif", - "fontSize": "1rem", - "fontWeight": 400, - "letterSpacing": "0.00938em", - "lineHeight": 1.75, - }, - "subtitle2": Object { - "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif", - "fontSize": "0.875rem", - "fontWeight": 500, - "letterSpacing": "0.00714em", - "lineHeight": 1.57, - }, - }, - "zIndex": Object { - "appBar": 1100, - "drawer": 1200, - "mobileStepper": 1000, - "modal": 1300, - "snackbar": 1400, - "speedDial": 1050, - "tooltip": 1500, - }, - }, - "name": "MuiBackdrop", - }, - "propTypes": Object { - "classes": [Function], - "innerRef": [Function], - }, - "render": [Function], - "useStyles": [Function], - } - } - BackdropProps={ - Object { - "transitionDuration": Object { - "enter": 225, - "exit": 195, - }, - } - } - className="MuiDialog-root modal-root" - closeAfterTransition={true} - disableEscapeKeyDown={false} - onClose={[MockFunction]} - open={true} + <div + aria-labelledby="accessibility-title" + class="MuiPaper-root MuiDialog-paper modal-paper MuiDialog-paperScrollPaper MuiDialog-paperWidthSm MuiPaper-elevation24 MuiPaper-rounded" + role="dialog" > - <ForwardRef(Portal) - disablePortal={false} + <div + id="accessibility-title" > - <Portal - containerInfo={ - <body - style="padding-right: 0px; overflow: hidden;" - > - <div - class="MuiDialog-root modal-root" - role="presentation" - style="position: fixed; z-index: 1300; right: 0px; bottom: 0px; top: 0px; left: 0px;" - > - <div - aria-hidden="true" - class="MuiBackdrop-root" - style="opacity: 1; webkit-transition: opacity 225ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; transition: opacity 225ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;" - /> - <div - data-test="sentinelStart" - tabindex="0" - /> - <div - class="MuiDialog-container MuiDialog-scrollPaper" - role="none presentation" - style="opacity: 1; webkit-transition: opacity 225ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; transition: opacity 225ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;" - tabindex="-1" - > - <div - aria-labelledby="accessibility-title" - class="MuiPaper-root MuiDialog-paper modal-paper MuiDialog-paperScrollPaper MuiDialog-paperWidthSm MuiPaper-elevation24 MuiPaper-rounded" - role="dialog" - > - <div - id="accessibility-title" - > - 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="gcu-content-root" - > - <div - class="gcu-content-wrapper" - > - <p - class="text-14-normal version" - > - gcu.version - </p> - <div - class="gcu-content-part-title text-15-normal" - > - gcu.content.title1 - </div> - <p - class="text-14-normal" - > - gcu.content.part1_1 - </p> - <p - class="text-14-normal" - > - gcu.content.part1_2 - </p> - <p - class="text-14-normal" - > - gcu.content.part1_3 - </p> - <div - class="gcu-content-part-title text-15-normal" - > - gcu.content.title2 - </div> - <p - class="text-14-normal" - > - gcu.content.part2_1 - </p> - <p - class="text-14-normal" - > - gcu.content.part2_2 - </p> - <ul - class="text-14-normal" - > - <li> - gcu.content.part2_2_list1 - </li> - <li> - gcu.content.part2_2_list2 - </li> - <li> - gcu.content.part2_2_list3 - </li> - </ul> - <p - class="text-14-normal" - > - gcu.content.part2_3 - </p> - <p - class="text-14-normal" - > - gcu.content.part2_4 - </p> - <div - class="gcu-content-part-title text-15-normal" - > - gcu.content.title3 - </div> - <p - class="text-14-normal" - > - gcu.content.part3_1 - </p> - <p - class="text-14-normal" - > - gcu.content.part3_2 - </p> - <p - class="text-14-normal" - > - gcu.content.part3_3 - </p> - <p - class="text-14-normal" - > - gcu.content.part3_4 - </p> - <div - class="gcu-content-part-title text-15-normal" - > - gcu.content.title4 - </div> - <p - class="text-14-normal" - > - gcu.content.part4_1 - </p> - <p - class="text-14-normal" - > - gcu.content.part4_2 - </p> - <div - class="gcu-content-part-title text-15-normal" - > - gcu.content.title5 - </div> - <p - class="text-14-normal" - > - gcu.content.part5_1 - </p> - <p - class="text-14-normal" - > - gcu.content.part5_2 - </p> - <p - class="text-14-normal" - > - gcu.content.part5_3 - </p> - <ul - class="text-14-normal" - > - <li> - gcu.content.part5_3_list1 - </li> - <li> - gcu.content.part5_3_list2 - </li> - </ul> - <p - class="text-14-normal" - > - gcu.content.part5_4 - </p> - <p - class="text-14-normal" - > - gcu.content.part5_5 - </p> - <div - class="gcu-content-part-title text-15-normal" - > - gcu.content.title6 - </div> - <p - class="text-14-normal" - > - gcu.content.part6_1 - </p> - <p - class="text-14-normal" - > - gcu.content.part6_2 - </p> - <p - class="text-14-normal" - > - gcu.content.part6_3 - </p> - <ul - class="text-14-normal" - > - <li> - gcu.content.part6_3_list1 - </li> - <li> - gcu.content.part6_3_list2 - </li> - <li> - gcu.content.part6_3_list3 - </li> - </ul> - <p - class="text-14-normal" - > - gcu.content.part6_4 - </p> - <p - class="text-14-normal" - > - gcu.content.part6_5 - </p> - <div - class="gcu-content-part-title text-15-normal" - > - gcu.content.title8 - </div> - <p - class="text-14-normal" - > - gcu.content.part8_1 - </p> - <p - class="text-14-normal" - > - gcu.content.part8_2 - </p> - <div - class="gcu-content-part-title text-15-normal" - > - gcu.content.title9 - </div> - <p - class="text-14-normal" - > - <span - class="text-14-bold" - > - gcu.content.part9_1_title - </span> - <span> - gcu.content.part9_1_content - </span> - </p> - <p - class="text-14-normal" - > - <span - class="text-14-bold" - > - gcu.content.part9_2_title - </span> - <span> - gcu.content.part9_2_content - </span> - </p> - <p - class="text-14-normal" - > - <span - class="text-14-bold" - > - gcu.content.part9_3_title - </span> - <span> - gcu.content.part9_3_content - </span> - </p> - <p - class="text-14-normal" - > - <span - class="text-14-bold" - > - gcu.content.part9_4_title - </span> - <span> - gcu.content.part9_4_content - </span> - </p> - <p - class="text-14-normal" - > - <span - class="text-14-bold" - > - gcu.content.part9_5_title - </span> - <span> - gcu.content.part9_5_content - </span> - </p> - </div> - </div> - <button - aria-label="gcu_modal.accessibility.button_accept" - class="MuiButtonBase-root MuiButton-root MuiButton-text btnPrimary" - tabindex="0" - type="button" - > - <span - class="MuiButton-label" - > - legal.accessibility.button_close - </span> - <span - class="MuiTouchRipple-root" - /> - </button> - </div> - </div> - <div - data-test="sentinelEnd" - tabindex="0" - /> - </div> - </body> - } + 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="gcu-content-root" + > + <div + class="gcu-content-wrapper" > + <p + class="text-14-normal version" + > + gcu.version + </p> + <div + class="gcu-content-part-title text-15-normal" + > + gcu.content.title1 + </div> + <p + class="text-14-normal" + > + gcu.content.part1_1 + </p> + <p + class="text-14-normal" + > + gcu.content.part1_2 + </p> + <p + class="text-14-normal" + > + gcu.content.part1_3 + </p> + <div + class="gcu-content-part-title text-15-normal" + > + gcu.content.title2 + </div> + <p + class="text-14-normal" + > + gcu.content.part2_1 + </p> + <p + class="text-14-normal" + > + gcu.content.part2_2 + </p> + <ul + class="text-14-normal" + > + <li> + gcu.content.part2_2_list1 + </li> + <li> + gcu.content.part2_2_list2 + </li> + <li> + gcu.content.part2_2_list3 + </li> + </ul> + <p + class="text-14-normal" + > + gcu.content.part2_3 + </p> + <p + class="text-14-normal" + > + gcu.content.part2_4 + </p> <div - className="MuiDialog-root modal-root" - onKeyDown={[Function]} - role="presentation" - style={ - Object { - "bottom": 0, - "left": 0, - "position": "fixed", - "right": 0, - "top": 0, - "zIndex": 1300, - } - } + class="gcu-content-part-title text-15-normal" + > + gcu.content.title3 + </div> + <p + class="text-14-normal" + > + gcu.content.part3_1 + </p> + <p + class="text-14-normal" + > + gcu.content.part3_2 + </p> + <p + class="text-14-normal" + > + gcu.content.part3_3 + </p> + <p + class="text-14-normal" + > + gcu.content.part3_4 + </p> + <div + class="gcu-content-part-title text-15-normal" + > + gcu.content.title4 + </div> + <p + class="text-14-normal" + > + gcu.content.part4_1 + </p> + <p + class="text-14-normal" + > + gcu.content.part4_2 + </p> + <div + class="gcu-content-part-title text-15-normal" + > + gcu.content.title5 + </div> + <p + class="text-14-normal" > - <WithStyles(ForwardRef(Backdrop)) - onClick={[Function]} - open={true} - transitionDuration={ - Object { - "enter": 225, - "exit": 195, - } - } + gcu.content.part5_1 + </p> + <p + class="text-14-normal" + > + gcu.content.part5_2 + </p> + <p + class="text-14-normal" + > + gcu.content.part5_3 + </p> + <ul + class="text-14-normal" + > + <li> + gcu.content.part5_3_list1 + </li> + <li> + gcu.content.part5_3_list2 + </li> + </ul> + <p + class="text-14-normal" + > + gcu.content.part5_4 + </p> + <p + class="text-14-normal" + > + gcu.content.part5_5 + </p> + <div + class="gcu-content-part-title text-15-normal" + > + gcu.content.title6 + </div> + <p + class="text-14-normal" + > + gcu.content.part6_1 + </p> + <p + class="text-14-normal" + > + gcu.content.part6_2 + </p> + <p + class="text-14-normal" + > + gcu.content.part6_3 + </p> + <ul + class="text-14-normal" + > + <li> + gcu.content.part6_3_list1 + </li> + <li> + gcu.content.part6_3_list2 + </li> + <li> + gcu.content.part6_3_list3 + </li> + </ul> + <p + class="text-14-normal" + > + gcu.content.part6_4 + </p> + <p + class="text-14-normal" + > + gcu.content.part6_5 + </p> + <div + class="gcu-content-part-title text-15-normal" + > + gcu.content.title8 + </div> + <p + class="text-14-normal" + > + gcu.content.part8_1 + </p> + <p + class="text-14-normal" + > + gcu.content.part8_2 + </p> + <div + class="gcu-content-part-title text-15-normal" + > + gcu.content.title9 + </div> + <p + class="text-14-normal" + > + <span + class="text-14-bold" > - <ForwardRef(Backdrop) - classes={ - Object { - "invisible": "MuiBackdrop-invisible", - "root": "MuiBackdrop-root", - } - } - onClick={[Function]} - open={true} - transitionDuration={ - Object { - "enter": 225, - "exit": 195, - } - } - > - <ForwardRef(Fade) - in={true} - onClick={[Function]} - timeout={ - Object { - "enter": 225, - "exit": 195, - } - } - > - <Transition - appear={true} - enter={true} - exit={true} - in={true} - mountOnEnter={false} - onClick={[Function]} - onEnter={[Function]} - onEntered={[Function]} - onEntering={[Function]} - onExit={[Function]} - onExited={[Function]} - onExiting={[Function]} - timeout={ - Object { - "enter": 225, - "exit": 195, - } - } - unmountOnExit={false} - > - <div - aria-hidden={true} - className="MuiBackdrop-root" - onClick={[Function]} - style={ - Object { - "opacity": 1, - "visibility": undefined, - } - } - /> - </Transition> - </ForwardRef(Fade)> - </ForwardRef(Backdrop)> - </WithStyles(ForwardRef(Backdrop))> - <Unstable_TrapFocus - disableAutoFocus={false} - disableEnforceFocus={false} - disableRestoreFocus={false} - getDoc={[Function]} - isEnabled={[Function]} - open={true} + gcu.content.part9_1_title + </span> + <span> + gcu.content.part9_1_content + </span> + </p> + <p + class="text-14-normal" + > + <span + class="text-14-bold" > - <div - data-test="sentinelStart" - tabIndex={0} - /> - <ForwardRef(Fade) - appear={true} - in={true} - onEnter={[Function]} - onExited={[Function]} - role="none presentation" - tabIndex="-1" - timeout={ - Object { - "enter": 225, - "exit": 195, - } - } - > - <Transition - appear={true} - enter={true} - exit={true} - in={true} - mountOnEnter={false} - onEnter={[Function]} - onEntered={[Function]} - onEntering={[Function]} - onExit={[Function]} - onExited={[Function]} - onExiting={[Function]} - role="none presentation" - tabIndex="-1" - timeout={ - Object { - "enter": 225, - "exit": 195, - } - } - unmountOnExit={false} - > - <div - className="MuiDialog-container MuiDialog-scrollPaper" - onMouseDown={[Function]} - onMouseUp={[Function]} - role="none presentation" - style={ - Object { - "opacity": 1, - "visibility": undefined, - } - } - tabIndex="-1" - > - <WithStyles(ForwardRef(Paper)) - aria-labelledby="accessibility-title" - className="MuiDialog-paper modal-paper MuiDialog-paperScrollPaper MuiDialog-paperWidthSm" - elevation={24} - role="dialog" - > - <ForwardRef(Paper) - aria-labelledby="accessibility-title" - className="MuiDialog-paper modal-paper MuiDialog-paperScrollPaper MuiDialog-paperWidthSm" - classes={ - Object { - "elevation0": "MuiPaper-elevation0", - "elevation1": "MuiPaper-elevation1", - "elevation10": "MuiPaper-elevation10", - "elevation11": "MuiPaper-elevation11", - "elevation12": "MuiPaper-elevation12", - "elevation13": "MuiPaper-elevation13", - "elevation14": "MuiPaper-elevation14", - "elevation15": "MuiPaper-elevation15", - "elevation16": "MuiPaper-elevation16", - "elevation17": "MuiPaper-elevation17", - "elevation18": "MuiPaper-elevation18", - "elevation19": "MuiPaper-elevation19", - "elevation2": "MuiPaper-elevation2", - "elevation20": "MuiPaper-elevation20", - "elevation21": "MuiPaper-elevation21", - "elevation22": "MuiPaper-elevation22", - "elevation23": "MuiPaper-elevation23", - "elevation24": "MuiPaper-elevation24", - "elevation3": "MuiPaper-elevation3", - "elevation4": "MuiPaper-elevation4", - "elevation5": "MuiPaper-elevation5", - "elevation6": "MuiPaper-elevation6", - "elevation7": "MuiPaper-elevation7", - "elevation8": "MuiPaper-elevation8", - "elevation9": "MuiPaper-elevation9", - "outlined": "MuiPaper-outlined", - "root": "MuiPaper-root", - "rounded": "MuiPaper-rounded", - } - } - elevation={24} - role="dialog" - > - <div - aria-labelledby="accessibility-title" - className="MuiPaper-root MuiDialog-paper modal-paper MuiDialog-paperScrollPaper MuiDialog-paperWidthSm MuiPaper-elevation24 MuiPaper-rounded" - role="dialog" - > - <div - id="accessibility-title" - > - 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]} - > - <WithStyles(ForwardRef(ButtonBase)) - aria-label="feedback.accessibility.button_close" - centerRipple={true} - className="MuiIconButton-root modal-paper-close-button" - disabled={false} - focusRipple={true} - onClick={[MockFunction]} - > - <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]} - > - <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" - > - <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))> - <GCUContent> - <div - className="gcu-content-root" - > - <div - className="gcu-content-wrapper" - > - <p - className="text-14-normal version" - > - gcu.version - </p> - <div - className="gcu-content-part-title text-15-normal" - > - gcu.content.title1 - </div> - <p - className="text-14-normal" - > - gcu.content.part1_1 - </p> - <p - className="text-14-normal" - > - gcu.content.part1_2 - </p> - <p - className="text-14-normal" - > - gcu.content.part1_3 - </p> - <div - className="gcu-content-part-title text-15-normal" - > - gcu.content.title2 - </div> - <p - className="text-14-normal" - > - gcu.content.part2_1 - </p> - <p - className="text-14-normal" - > - gcu.content.part2_2 - </p> - <ul - className="text-14-normal" - > - <li> - gcu.content.part2_2_list1 - </li> - <li> - gcu.content.part2_2_list2 - </li> - <li> - gcu.content.part2_2_list3 - </li> - </ul> - <p - className="text-14-normal" - > - gcu.content.part2_3 - </p> - <p - className="text-14-normal" - > - gcu.content.part2_4 - </p> - <div - className="gcu-content-part-title text-15-normal" - > - gcu.content.title3 - </div> - <p - className="text-14-normal" - > - gcu.content.part3_1 - </p> - <p - className="text-14-normal" - > - gcu.content.part3_2 - </p> - <p - className="text-14-normal" - > - gcu.content.part3_3 - </p> - <p - className="text-14-normal" - > - gcu.content.part3_4 - </p> - <div - className="gcu-content-part-title text-15-normal" - > - gcu.content.title4 - </div> - <p - className="text-14-normal" - > - gcu.content.part4_1 - </p> - <p - className="text-14-normal" - dangerouslySetInnerHTML={ - Object { - "__html": "gcu.content.part4_2", - } - } - /> - <div - className="gcu-content-part-title text-15-normal" - > - gcu.content.title5 - </div> - <p - className="text-14-normal" - > - gcu.content.part5_1 - </p> - <p - className="text-14-normal" - > - gcu.content.part5_2 - </p> - <p - className="text-14-normal" - > - gcu.content.part5_3 - </p> - <ul - className="text-14-normal" - > - <li> - gcu.content.part5_3_list1 - </li> - <li> - gcu.content.part5_3_list2 - </li> - </ul> - <p - className="text-14-normal" - > - gcu.content.part5_4 - </p> - <p - className="text-14-normal" - > - gcu.content.part5_5 - </p> - <div - className="gcu-content-part-title text-15-normal" - > - gcu.content.title6 - </div> - <p - className="text-14-normal" - > - gcu.content.part6_1 - </p> - <p - className="text-14-normal" - > - gcu.content.part6_2 - </p> - <p - className="text-14-normal" - > - gcu.content.part6_3 - </p> - <ul - className="text-14-normal" - > - <li> - gcu.content.part6_3_list1 - </li> - <li> - gcu.content.part6_3_list2 - </li> - <li> - gcu.content.part6_3_list3 - </li> - </ul> - <p - className="text-14-normal" - > - gcu.content.part6_4 - </p> - <p - className="text-14-normal" - > - gcu.content.part6_5 - </p> - <div - className="gcu-content-part-title text-15-normal" - > - gcu.content.title8 - </div> - <p - className="text-14-normal" - > - gcu.content.part8_1 - </p> - <p - className="text-14-normal" - dangerouslySetInnerHTML={ - Object { - "__html": "gcu.content.part8_2", - } - } - /> - <div - className="gcu-content-part-title text-15-normal" - > - gcu.content.title9 - </div> - <p - className="text-14-normal" - > - <span - className="text-14-bold" - > - gcu.content.part9_1_title - </span> - <span> - gcu.content.part9_1_content - </span> - </p> - <p - className="text-14-normal" - > - <span - className="text-14-bold" - > - gcu.content.part9_2_title - </span> - <span> - gcu.content.part9_2_content - </span> - </p> - <p - className="text-14-normal" - > - <span - className="text-14-bold" - > - gcu.content.part9_3_title - </span> - <span> - gcu.content.part9_3_content - </span> - </p> - <p - className="text-14-normal" - > - <span - className="text-14-bold" - > - gcu.content.part9_4_title - </span> - <span - dangerouslySetInnerHTML={ - Object { - "__html": "gcu.content.part9_4_content", - } - } - /> - </p> - <p - className="text-14-normal" - > - <span - className="text-14-bold" - > - gcu.content.part9_5_title - </span> - <span> - gcu.content.part9_5_content - </span> - </p> - </div> - </div> - </GCUContent> - <WithStyles(ForwardRef(Button)) - aria-label="gcu_modal.accessibility.button_accept" - className="btnPrimary" - onClick={[MockFunction]} - > - <ForwardRef(Button) - aria-label="gcu_modal.accessibility.button_accept" - className="btnPrimary" - classes={ - Object { - "colorInherit": "MuiButton-colorInherit", - "contained": "MuiButton-contained", - "containedPrimary": "MuiButton-containedPrimary", - "containedSecondary": "MuiButton-containedSecondary", - "containedSizeLarge": "MuiButton-containedSizeLarge", - "containedSizeSmall": "MuiButton-containedSizeSmall", - "disableElevation": "MuiButton-disableElevation", - "disabled": "Mui-disabled", - "endIcon": "MuiButton-endIcon", - "focusVisible": "Mui-focusVisible", - "fullWidth": "MuiButton-fullWidth", - "iconSizeLarge": "MuiButton-iconSizeLarge", - "iconSizeMedium": "MuiButton-iconSizeMedium", - "iconSizeSmall": "MuiButton-iconSizeSmall", - "label": "MuiButton-label", - "outlined": "MuiButton-outlined", - "outlinedPrimary": "MuiButton-outlinedPrimary", - "outlinedSecondary": "MuiButton-outlinedSecondary", - "outlinedSizeLarge": "MuiButton-outlinedSizeLarge", - "outlinedSizeSmall": "MuiButton-outlinedSizeSmall", - "root": "MuiButton-root", - "sizeLarge": "MuiButton-sizeLarge", - "sizeSmall": "MuiButton-sizeSmall", - "startIcon": "MuiButton-startIcon", - "text": "MuiButton-text", - "textPrimary": "MuiButton-textPrimary", - "textSecondary": "MuiButton-textSecondary", - "textSizeLarge": "MuiButton-textSizeLarge", - "textSizeSmall": "MuiButton-textSizeSmall", - } - } - onClick={[MockFunction]} - > - <WithStyles(ForwardRef(ButtonBase)) - aria-label="gcu_modal.accessibility.button_accept" - className="MuiButton-root MuiButton-text btnPrimary" - component="button" - disabled={false} - focusRipple={true} - focusVisibleClassName="Mui-focusVisible" - onClick={[MockFunction]} - type="button" - > - <ForwardRef(ButtonBase) - aria-label="gcu_modal.accessibility.button_accept" - className="MuiButton-root MuiButton-text btnPrimary" - 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="gcu_modal.accessibility.button_accept" - className="MuiButtonBase-root MuiButton-root MuiButton-text btnPrimary" - 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" - > - legal.accessibility.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(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))> -</CGUModal> + gcu.content.part9_2_title + </span> + <span> + gcu.content.part9_2_content + </span> + </p> + <p + class="text-14-normal" + > + <span + class="text-14-bold" + > + gcu.content.part9_3_title + </span> + <span> + gcu.content.part9_3_content + </span> + </p> + <p + class="text-14-normal" + > + <span + class="text-14-bold" + > + gcu.content.part9_4_title + </span> + <span> + gcu.content.part9_4_content + </span> + </p> + <p + class="text-14-normal" + > + <span + class="text-14-bold" + > + gcu.content.part9_5_title + </span> + <span> + gcu.content.part9_5_content + </span> + </p> + </div> + </div> + <button + aria-label="gcu_modal.accessibility.button_accept" + class="MuiButtonBase-root MuiButton-root MuiButton-text btnPrimary" + tabindex="0" + type="button" + > + <span + class="MuiButton-label" + > + legal.accessibility.button_close + </span> + <span + class="MuiTouchRipple-root" + /> + </button> + </div> + </div> + <div + data-test="sentinelEnd" + tabindex="0" + /> + </div> +</body> `; diff --git a/src/components/Terms/__snapshots__/DataShareConsentContent.spec.tsx.snap b/src/components/Terms/__snapshots__/DataShareConsentContent.spec.tsx.snap index e73f9fe284542df8c5d93672bea9a157f7f20820..69141d0536a316b3162f78c838aab7612e51e4a4 100644 --- a/src/components/Terms/__snapshots__/DataShareConsentContent.spec.tsx.snap +++ b/src/components/Terms/__snapshots__/DataShareConsentContent.spec.tsx.snap @@ -1,222 +1,190 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP exports[`DataShareConsentContent component should be rendered correctly with first connexion text 1`] = ` -<Provider - store={ - Object { - "clearActions": [Function], - "dispatch": [Function], - "getActions": [Function], - "getState": [Function], - "replaceReducer": [Function], - "subscribe": [Function], - } - } -> - <DataShareConsentContent> +<div> + <div + class="dataShare-content-root" + > <div - className="dataShare-content-root" + class="dataShare-content-wrapper" > - <div - className="dataShare-content-wrapper" + <h1 + class="dataShare-content-title text-22-normal" > - <h1 - className="dataShare-content-title text-22-normal" - > - dataShare.title1 - </h1> - <p - className="text-14-normal" - > - dataShare.part1 - </p> - <p - className="text-14-normal" - > - dataShare.part2 - </p> - <p - className="text-14-normal" - > - dataShare.part3 - </p> - <ul - className="text-14-normal" - > - <li - className="text-14-normal" - > - dataShare.item1 - </li> - <li - className="text-14-normal" - > - dataShare.item2 - </li> - <li - className="text-14-normal" - > - dataShare.item3 - </li> - </ul> - <p - className="text-14-normal" - > - dataShare.part4 - </p> - <p - className="text-14-normal" - > - dataShare.part5 - </p> - <p - className="text-14-normal" - > - dataShare.part6 - </p> - <p - className="text-14-normal" - > - dataShare.part7 - </p> - <p - className="text-14-normal" - > - dataShare.part8 - </p> - <span - className="text-14-normal" - > - dataShare.part9 - </span> - <span - className="text-14-normal" - > - dataShare.part10 - </span> - <span - className="text-14-normal" - dangerouslySetInnerHTML={ - Object { - "__html": "dataShare.link1", - } - } - /> - </div> + dataShare.title1 + </h1> + <p + class="text-14-normal" + > + dataShare.part1 + </p> + <p + class="text-14-normal" + > + dataShare.part2 + </p> + <p + class="text-14-normal" + > + dataShare.part3 + </p> + <ul + class="text-14-normal" + > + <li + class="text-14-normal" + > + dataShare.item1 + </li> + <li + class="text-14-normal" + > + dataShare.item2 + </li> + <li + class="text-14-normal" + > + dataShare.item3 + </li> + </ul> + <p + class="text-14-normal" + > + dataShare.part4 + </p> + <p + class="text-14-normal" + > + dataShare.part5 + </p> + <p + class="text-14-normal" + > + dataShare.part6 + </p> + <p + class="text-14-normal" + > + dataShare.part7 + </p> + <p + class="text-14-normal" + > + dataShare.part8 + </p> + <span + class="text-14-normal" + > + dataShare.part9 + </span> + <span + class="text-14-normal" + > + dataShare.part10 + </span> + <span + class="text-14-normal" + > + dataShare.link1 + </span> </div> - </DataShareConsentContent> -</Provider> + </div> +</div> `; exports[`DataShareConsentContent component should be rendered correctly without first connexion text 1`] = ` -<Provider - store={ - Object { - "clearActions": [Function], - "dispatch": [Function], - "getActions": [Function], - "getState": [Function], - "replaceReducer": [Function], - "subscribe": [Function], - } - } -> - <DataShareConsentContent> +<div> + <div + class="dataShare-content-root" + > <div - className="dataShare-content-root" + class="dataShare-content-wrapper" > - <div - className="dataShare-content-wrapper" + <h1 + class="dataShare-content-title text-22-normal" > - <h1 - className="dataShare-content-title text-22-normal" - > - dataShare.title1Update - </h1> - <p - className="text-14-normal" - > - dataShare.title2Update - </p> - <p - className="text-14-normal" - > - dataShare.part1 - </p> - <p - className="text-14-normal" - > - dataShare.part2 - </p> - <p - className="text-14-normal" - > - dataShare.part3 - </p> - <ul - className="text-14-normal" - > - <li - className="text-14-normal" - > - dataShare.item1 - </li> - <li - className="text-14-normal" - > - dataShare.item2 - </li> - <li - className="text-14-normal" - > - dataShare.item3 - </li> - </ul> - <p - className="text-14-normal" - > - dataShare.part4 - </p> - <p - className="text-14-normal" - > - dataShare.part5 - </p> - <p - className="text-14-normal" - > - dataShare.part6 - </p> - <p - className="text-14-normal" - > - dataShare.part7 - </p> - <p - className="text-14-normal" - > - dataShare.part8 - </p> - <span - className="text-14-normal" - > - dataShare.part9 - </span> - <span - className="text-14-normal" - > - dataShare.part10 - </span> - <span - className="text-14-normal" - dangerouslySetInnerHTML={ - Object { - "__html": "dataShare.link1", - } - } - /> - </div> + dataShare.title1Update + </h1> + <p + class="text-14-normal" + > + dataShare.title2Update + </p> + <p + class="text-14-normal" + > + dataShare.part1 + </p> + <p + class="text-14-normal" + > + dataShare.part2 + </p> + <p + class="text-14-normal" + > + dataShare.part3 + </p> + <ul + class="text-14-normal" + > + <li + class="text-14-normal" + > + dataShare.item1 + </li> + <li + class="text-14-normal" + > + dataShare.item2 + </li> + <li + class="text-14-normal" + > + dataShare.item3 + </li> + </ul> + <p + class="text-14-normal" + > + dataShare.part4 + </p> + <p + class="text-14-normal" + > + dataShare.part5 + </p> + <p + class="text-14-normal" + > + dataShare.part6 + </p> + <p + class="text-14-normal" + > + dataShare.part7 + </p> + <p + class="text-14-normal" + > + dataShare.part8 + </p> + <span + class="text-14-normal" + > + dataShare.part9 + </span> + <span + class="text-14-normal" + > + dataShare.part10 + </span> + <span + class="text-14-normal" + > + dataShare.link1 + </span> </div> - </DataShareConsentContent> -</Provider> + </div> +</div> `; diff --git a/src/components/Terms/__snapshots__/LegalNoticeModal.spec.tsx.snap b/src/components/Terms/__snapshots__/LegalNoticeModal.spec.tsx.snap index 7cd02919bb5d52ad64990d63e0b46b3fa277412b..2f134b674a199fe9c243f1a07083daad1b0f2310 100644 --- a/src/components/Terms/__snapshots__/LegalNoticeModal.spec.tsx.snap +++ b/src/components/Terms/__snapshots__/LegalNoticeModal.spec.tsx.snap @@ -1,1476 +1,346 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP exports[`LegalNoticeModal component should be rendered correctly 1`] = ` -<LegalNoticeModal - handleCloseClick={[MockFunction]} - open={true} +<body + style="padding-right: 0px; overflow: hidden;" > - <WithStyles(ForwardRef(Dialog)) - aria-labelledby="accessibility-title" - classes={ - Object { - "paper": "modal-paper", - "root": "modal-root", - } - } - onClose={[MockFunction]} - open={true} + <div + aria-hidden="true" + /> + <div + class="MuiDialog-root modal-root" + role="presentation" + style="position: fixed; z-index: 1300; right: 0px; bottom: 0px; top: 0px; left: 0px;" > - <ForwardRef(Dialog) - aria-labelledby="accessibility-title" - classes={ - Object { - "container": "MuiDialog-container", - "paper": "MuiDialog-paper modal-paper", - "paperFullScreen": "MuiDialog-paperFullScreen", - "paperFullWidth": "MuiDialog-paperFullWidth", - "paperScrollBody": "MuiDialog-paperScrollBody", - "paperScrollPaper": "MuiDialog-paperScrollPaper", - "paperWidthFalse": "MuiDialog-paperWidthFalse", - "paperWidthLg": "MuiDialog-paperWidthLg", - "paperWidthMd": "MuiDialog-paperWidthMd", - "paperWidthSm": "MuiDialog-paperWidthSm", - "paperWidthXl": "MuiDialog-paperWidthXl", - "paperWidthXs": "MuiDialog-paperWidthXs", - "root": "MuiDialog-root modal-root", - "scrollBody": "MuiDialog-scrollBody", - "scrollPaper": "MuiDialog-scrollPaper", - } - } - onClose={[MockFunction]} - open={true} + <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" > - <ForwardRef(Modal) - BackdropComponent={ - Object { - "$$typeof": Symbol(react.forward_ref), - "Naked": Object { - "$$typeof": Symbol(react.forward_ref), - "propTypes": Object { - "children": [Function], - "className": [Function], - "classes": [Function], - "invisible": [Function], - "open": [Function], - "transitionDuration": [Function], - }, - "render": [Function], - }, - "displayName": "WithStyles(ForwardRef(Backdrop))", - "options": Object { - "defaultTheme": Object { - "breakpoints": Object { - "between": [Function], - "down": [Function], - "keys": Array [ - "xs", - "sm", - "md", - "lg", - "xl", - ], - "only": [Function], - "up": [Function], - "values": Object { - "lg": 1280, - "md": 960, - "sm": 600, - "xl": 1920, - "xs": 0, - }, - "width": [Function], - }, - "direction": "ltr", - "mixins": Object { - "gutters": [Function], - "toolbar": Object { - "@media (min-width:0px) and (orientation: landscape)": Object { - "minHeight": 48, - }, - "@media (min-width:600px)": Object { - "minHeight": 64, - }, - "minHeight": 56, - }, - }, - "overrides": Object {}, - "palette": Object { - "action": Object { - "activatedOpacity": 0.12, - "active": "rgba(0, 0, 0, 0.54)", - "disabled": "rgba(0, 0, 0, 0.26)", - "disabledBackground": "rgba(0, 0, 0, 0.12)", - "disabledOpacity": 0.38, - "focus": "rgba(0, 0, 0, 0.12)", - "focusOpacity": 0.12, - "hover": "rgba(0, 0, 0, 0.04)", - "hoverOpacity": 0.04, - "selected": "rgba(0, 0, 0, 0.08)", - "selectedOpacity": 0.08, - }, - "augmentColor": [Function], - "background": Object { - "default": "#fafafa", - "paper": "#fff", - }, - "common": Object { - "black": "#000", - "white": "#fff", - }, - "contrastThreshold": 3, - "divider": "rgba(0, 0, 0, 0.12)", - "error": Object { - "contrastText": "#fff", - "dark": "#d32f2f", - "light": "#e57373", - "main": "#f44336", - }, - "getContrastText": [Function], - "grey": Object { - "100": "#f5f5f5", - "200": "#eeeeee", - "300": "#e0e0e0", - "400": "#bdbdbd", - "50": "#fafafa", - "500": "#9e9e9e", - "600": "#757575", - "700": "#616161", - "800": "#424242", - "900": "#212121", - "A100": "#d5d5d5", - "A200": "#aaaaaa", - "A400": "#303030", - "A700": "#616161", - }, - "info": Object { - "contrastText": "#fff", - "dark": "#1976d2", - "light": "#64b5f6", - "main": "#2196f3", - }, - "primary": Object { - "contrastText": "#fff", - "dark": "#303f9f", - "light": "#7986cb", - "main": "#3f51b5", - }, - "secondary": Object { - "contrastText": "#fff", - "dark": "#c51162", - "light": "#ff4081", - "main": "#f50057", - }, - "success": Object { - "contrastText": "rgba(0, 0, 0, 0.87)", - "dark": "#388e3c", - "light": "#81c784", - "main": "#4caf50", - }, - "text": Object { - "disabled": "rgba(0, 0, 0, 0.38)", - "hint": "rgba(0, 0, 0, 0.38)", - "primary": "rgba(0, 0, 0, 0.87)", - "secondary": "rgba(0, 0, 0, 0.54)", - }, - "tonalOffset": 0.2, - "type": "light", - "warning": Object { - "contrastText": "rgba(0, 0, 0, 0.87)", - "dark": "#f57c00", - "light": "#ffb74d", - "main": "#ff9800", - }, - }, - "props": Object {}, - "shadows": Array [ - "none", - "0px 2px 1px -1px rgba(0,0,0,0.2),0px 1px 1px 0px rgba(0,0,0,0.14),0px 1px 3px 0px rgba(0,0,0,0.12)", - "0px 3px 1px -2px rgba(0,0,0,0.2),0px 2px 2px 0px rgba(0,0,0,0.14),0px 1px 5px 0px rgba(0,0,0,0.12)", - "0px 3px 3px -2px rgba(0,0,0,0.2),0px 3px 4px 0px rgba(0,0,0,0.14),0px 1px 8px 0px rgba(0,0,0,0.12)", - "0px 2px 4px -1px rgba(0,0,0,0.2),0px 4px 5px 0px rgba(0,0,0,0.14),0px 1px 10px 0px rgba(0,0,0,0.12)", - "0px 3px 5px -1px rgba(0,0,0,0.2),0px 5px 8px 0px rgba(0,0,0,0.14),0px 1px 14px 0px rgba(0,0,0,0.12)", - "0px 3px 5px -1px rgba(0,0,0,0.2),0px 6px 10px 0px rgba(0,0,0,0.14),0px 1px 18px 0px rgba(0,0,0,0.12)", - "0px 4px 5px -2px rgba(0,0,0,0.2),0px 7px 10px 1px rgba(0,0,0,0.14),0px 2px 16px 1px rgba(0,0,0,0.12)", - "0px 5px 5px -3px rgba(0,0,0,0.2),0px 8px 10px 1px rgba(0,0,0,0.14),0px 3px 14px 2px rgba(0,0,0,0.12)", - "0px 5px 6px -3px rgba(0,0,0,0.2),0px 9px 12px 1px rgba(0,0,0,0.14),0px 3px 16px 2px rgba(0,0,0,0.12)", - "0px 6px 6px -3px rgba(0,0,0,0.2),0px 10px 14px 1px rgba(0,0,0,0.14),0px 4px 18px 3px rgba(0,0,0,0.12)", - "0px 6px 7px -4px rgba(0,0,0,0.2),0px 11px 15px 1px rgba(0,0,0,0.14),0px 4px 20px 3px rgba(0,0,0,0.12)", - "0px 7px 8px -4px rgba(0,0,0,0.2),0px 12px 17px 2px rgba(0,0,0,0.14),0px 5px 22px 4px rgba(0,0,0,0.12)", - "0px 7px 8px -4px rgba(0,0,0,0.2),0px 13px 19px 2px rgba(0,0,0,0.14),0px 5px 24px 4px rgba(0,0,0,0.12)", - "0px 7px 9px -4px rgba(0,0,0,0.2),0px 14px 21px 2px rgba(0,0,0,0.14),0px 5px 26px 4px rgba(0,0,0,0.12)", - "0px 8px 9px -5px rgba(0,0,0,0.2),0px 15px 22px 2px rgba(0,0,0,0.14),0px 6px 28px 5px rgba(0,0,0,0.12)", - "0px 8px 10px -5px rgba(0,0,0,0.2),0px 16px 24px 2px rgba(0,0,0,0.14),0px 6px 30px 5px rgba(0,0,0,0.12)", - "0px 8px 11px -5px rgba(0,0,0,0.2),0px 17px 26px 2px rgba(0,0,0,0.14),0px 6px 32px 5px rgba(0,0,0,0.12)", - "0px 9px 11px -5px rgba(0,0,0,0.2),0px 18px 28px 2px rgba(0,0,0,0.14),0px 7px 34px 6px rgba(0,0,0,0.12)", - "0px 9px 12px -6px rgba(0,0,0,0.2),0px 19px 29px 2px rgba(0,0,0,0.14),0px 7px 36px 6px rgba(0,0,0,0.12)", - "0px 10px 13px -6px rgba(0,0,0,0.2),0px 20px 31px 3px rgba(0,0,0,0.14),0px 8px 38px 7px rgba(0,0,0,0.12)", - "0px 10px 13px -6px rgba(0,0,0,0.2),0px 21px 33px 3px rgba(0,0,0,0.14),0px 8px 40px 7px rgba(0,0,0,0.12)", - "0px 10px 14px -6px rgba(0,0,0,0.2),0px 22px 35px 3px rgba(0,0,0,0.14),0px 8px 42px 7px rgba(0,0,0,0.12)", - "0px 11px 14px -7px rgba(0,0,0,0.2),0px 23px 36px 3px rgba(0,0,0,0.14),0px 9px 44px 8px rgba(0,0,0,0.12)", - "0px 11px 15px -7px rgba(0,0,0,0.2),0px 24px 38px 3px rgba(0,0,0,0.14),0px 9px 46px 8px rgba(0,0,0,0.12)", - ], - "shape": Object { - "borderRadius": 4, - }, - "spacing": [Function], - "transitions": Object { - "create": [Function], - "duration": Object { - "complex": 375, - "enteringScreen": 225, - "leavingScreen": 195, - "short": 250, - "shorter": 200, - "shortest": 150, - "standard": 300, - }, - "easing": Object { - "easeIn": "cubic-bezier(0.4, 0, 1, 1)", - "easeInOut": "cubic-bezier(0.4, 0, 0.2, 1)", - "easeOut": "cubic-bezier(0.0, 0, 0.2, 1)", - "sharp": "cubic-bezier(0.4, 0, 0.6, 1)", - }, - "getAutoHeightDuration": [Function], - }, - "typography": Object { - "body1": Object { - "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif", - "fontSize": "1rem", - "fontWeight": 400, - "letterSpacing": "0.00938em", - "lineHeight": 1.5, - }, - "body2": Object { - "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif", - "fontSize": "0.875rem", - "fontWeight": 400, - "letterSpacing": "0.01071em", - "lineHeight": 1.43, - }, - "button": Object { - "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif", - "fontSize": "0.875rem", - "fontWeight": 500, - "letterSpacing": "0.02857em", - "lineHeight": 1.75, - "textTransform": "uppercase", - }, - "caption": Object { - "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif", - "fontSize": "0.75rem", - "fontWeight": 400, - "letterSpacing": "0.03333em", - "lineHeight": 1.66, - }, - "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif", - "fontSize": 14, - "fontWeightBold": 700, - "fontWeightLight": 300, - "fontWeightMedium": 500, - "fontWeightRegular": 400, - "h1": Object { - "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif", - "fontSize": "6rem", - "fontWeight": 300, - "letterSpacing": "-0.01562em", - "lineHeight": 1.167, - }, - "h2": Object { - "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif", - "fontSize": "3.75rem", - "fontWeight": 300, - "letterSpacing": "-0.00833em", - "lineHeight": 1.2, - }, - "h3": Object { - "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif", - "fontSize": "3rem", - "fontWeight": 400, - "letterSpacing": "0em", - "lineHeight": 1.167, - }, - "h4": Object { - "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif", - "fontSize": "2.125rem", - "fontWeight": 400, - "letterSpacing": "0.00735em", - "lineHeight": 1.235, - }, - "h5": Object { - "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif", - "fontSize": "1.5rem", - "fontWeight": 400, - "letterSpacing": "0em", - "lineHeight": 1.334, - }, - "h6": Object { - "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif", - "fontSize": "1.25rem", - "fontWeight": 500, - "letterSpacing": "0.0075em", - "lineHeight": 1.6, - }, - "htmlFontSize": 16, - "overline": Object { - "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif", - "fontSize": "0.75rem", - "fontWeight": 400, - "letterSpacing": "0.08333em", - "lineHeight": 2.66, - "textTransform": "uppercase", - }, - "pxToRem": [Function], - "round": [Function], - "subtitle1": Object { - "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif", - "fontSize": "1rem", - "fontWeight": 400, - "letterSpacing": "0.00938em", - "lineHeight": 1.75, - }, - "subtitle2": Object { - "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif", - "fontSize": "0.875rem", - "fontWeight": 500, - "letterSpacing": "0.00714em", - "lineHeight": 1.57, - }, - }, - "zIndex": Object { - "appBar": 1100, - "drawer": 1200, - "mobileStepper": 1000, - "modal": 1300, - "snackbar": 1400, - "speedDial": 1050, - "tooltip": 1500, - }, - }, - "name": "MuiBackdrop", - }, - "propTypes": Object { - "classes": [Function], - "innerRef": [Function], - }, - "render": [Function], - "useStyles": [Function], - } - } - BackdropProps={ - Object { - "transitionDuration": Object { - "enter": 225, - "exit": 195, - }, - } - } - className="MuiDialog-root modal-root" - closeAfterTransition={true} - disableEscapeKeyDown={false} - onClose={[MockFunction]} - open={true} + <div + aria-labelledby="accessibility-title" + class="MuiPaper-root MuiDialog-paper modal-paper MuiDialog-paperScrollPaper MuiDialog-paperWidthSm MuiPaper-elevation24 MuiPaper-rounded" + role="dialog" > - <ForwardRef(Portal) - disablePortal={false} + <div + id="accessibility-title" > - <Portal - containerInfo={ - <body - style="padding-right: 0px; overflow: hidden;" - > - <div - class="MuiDialog-root modal-root" - role="presentation" - style="position: fixed; z-index: 1300; right: 0px; bottom: 0px; top: 0px; left: 0px;" - > - <div - aria-hidden="true" - class="MuiBackdrop-root" - style="opacity: 1; webkit-transition: opacity 225ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; transition: opacity 225ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;" - /> - <div - data-test="sentinelStart" - tabindex="0" - /> - <div - class="MuiDialog-container MuiDialog-scrollPaper" - role="none presentation" - style="opacity: 1; webkit-transition: opacity 225ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; transition: opacity 225ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;" - tabindex="-1" - > - <div - aria-labelledby="accessibility-title" - class="MuiPaper-root MuiDialog-paper modal-paper MuiDialog-paperScrollPaper MuiDialog-paperWidthSm MuiPaper-elevation24 MuiPaper-rounded" - role="dialog" - > - <div - id="accessibility-title" - > - legal.title_legal - </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="legal-notice-root" - > - <div - class="legal-notice-content" - > - <p - class="version" - > - legal.version - </p> - <p> - legal.site - </p> - <p> - legal.adress - </p> - <p> - legal.phone - </p> - <p - class="ln-contact" - > - legal.mail - </p> - <div - class="text-16-normal" - > - <div - class="legal-notice-oneline" - > - <span - class="text-14-normal" - > - legal.p1b - </span> - legal.p1 - </div> - <div - class="legal-notice-oneline" - > - <span - class="text-14-normal" - > - legal.p2b - </span> - legal.p2 - </div> - <div - class="legal-notice-oneline" - > - <span - class="text-14-normal" - > - legal.p3b - </span> - legal.p3 - </div> - <div - class="legal-notice-oneline" - > - <span - class="text-14-normal" - > - legal.p4b - </span> - legal.p4 - </div> - <div - class="legal-notice-oneline" - > - <span - class="text-14-normal" - > - legal.p5b - </span> - legal.p5 - </div> - <div - class="legal-notice-oneline" - > - <span - class="text-14-normal" - > - legal.p6b - </span> - legal.p6 - </div> - <div - class="legal-notice-part" - > - <h3> - - legal.title1 - </h3> - <p> - legal.part1 - </p> - </div> - <div - class="legal-notice-part" - > - <h3> - legal.title2 - </h3> - <p> - legal.part2 - </p> - <ul> - <li> - legal.part2-1 - </li> - <li> - legal.part2-2 - </li> - <li> - legal.part2-3 - <ul> - <li> - legal.part2-3-1 - </li> - <li> - legal.part2-3-2 - </li> - <li> - legal.part2-3-3 - </li> - <li> - legal.part2-3-4 - </li> - <li> - legal.part2-3-5 - </li> - </ul> - </li> - <li> - legal.part2-4 - </li> - </ul> - <p> - legal.part2-5 - </p> - <p> - legal.part2-6 - </p> - <ul> - <li> - legal.part2-6-1 - </li> - <li> - legal.part2-6-2 - </li> - <li> - legal.part2-6-3 - </li> - </ul> - <p> - legal.part2-7 - </p> - <p> - legal.part2-8 - </p> - <p> - legal.part2-9 - </p> - <p> - legal.part2-10 - </p> - <p> - legal.part2-11 - </p> - </div> - <div - class="legal-notice-part" - > - <h3> - legal.title3 - </h3> - <p> - legal.part3-1 - </p> - <p> - legal.part3-2 - </p> - </div> - <div - class="legal-notice-part" - > - <h3> - legal.title4 - </h3> - <p> - legal.part4-1 - </p> - <p> - legal.part4-2 - </p> - </div> - <div - class="legal-notice-part" - > - <h3> - legal.title5 - </h3> - <p> - legal.part5 - </p> - </div> - <div - class="legal-notice-part" - > - <h3> - legal.title6 - </h3> - <p> - legal.part6 - </p> - </div> - <div - class="legal-notice-part" - > - <h3> - legal.title7 - </h3> - <p> - legal.part7-1 - </p> - <p> - legal.part7-2 - </p> - <p> - legal.part7-3 - </p> - </div> - <div - class="legal-notice-part" - > - <h3> - legal.title8 - </h3> - <p> - legal.part8 - </p> - </div> - <div - class="legal-notice-part" - > - <h3> - legal.title9 - </h3> - <p> - legal.part9-1 - </p> - <p> - legal.part9-2 - </p> - </div> - </div> - </div> - </div> - <button - aria-label="gcu_modal.accessibility.button_accept" - class="MuiButtonBase-root MuiButton-root MuiButton-text btnPrimary" - tabindex="0" - type="button" - > - <span - class="MuiButton-label" - > - legal.accessibility.button_close - </span> - <span - class="MuiTouchRipple-root" - /> - </button> - </div> - </div> - <div - data-test="sentinelEnd" - tabindex="0" - /> - </div> - </body> - } + legal.title_legal + </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="legal-notice-root" + > + <div + class="legal-notice-content" + > + <p + class="version" + > + legal.version + </p> + <p> + legal.site + </p> + <p> + legal.adress + </p> + <p> + legal.phone + </p> + <p + class="ln-contact" + > + legal.mail + </p> <div - className="MuiDialog-root modal-root" - onKeyDown={[Function]} - role="presentation" - style={ - Object { - "bottom": 0, - "left": 0, - "position": "fixed", - "right": 0, - "top": 0, - "zIndex": 1300, - } - } + class="text-16-normal" > - <WithStyles(ForwardRef(Backdrop)) - onClick={[Function]} - open={true} - transitionDuration={ - Object { - "enter": 225, - "exit": 195, - } - } + <div + class="legal-notice-oneline" + > + <span + class="text-14-normal" + > + legal.p1b + </span> + legal.p1 + </div> + <div + class="legal-notice-oneline" + > + <span + class="text-14-normal" + > + legal.p2b + </span> + legal.p2 + </div> + <div + class="legal-notice-oneline" + > + <span + class="text-14-normal" + > + legal.p3b + </span> + legal.p3 + </div> + <div + class="legal-notice-oneline" > - <ForwardRef(Backdrop) - classes={ - Object { - "invisible": "MuiBackdrop-invisible", - "root": "MuiBackdrop-root", - } - } - onClick={[Function]} - open={true} - transitionDuration={ - Object { - "enter": 225, - "exit": 195, - } - } + <span + class="text-14-normal" > - <ForwardRef(Fade) - in={true} - onClick={[Function]} - timeout={ - Object { - "enter": 225, - "exit": 195, - } - } - > - <Transition - appear={true} - enter={true} - exit={true} - in={true} - mountOnEnter={false} - onClick={[Function]} - onEnter={[Function]} - onEntered={[Function]} - onEntering={[Function]} - onExit={[Function]} - onExited={[Function]} - onExiting={[Function]} - timeout={ - Object { - "enter": 225, - "exit": 195, - } - } - unmountOnExit={false} - > - <div - aria-hidden={true} - className="MuiBackdrop-root" - onClick={[Function]} - style={ - Object { - "opacity": 1, - "visibility": undefined, - } - } - /> - </Transition> - </ForwardRef(Fade)> - </ForwardRef(Backdrop)> - </WithStyles(ForwardRef(Backdrop))> - <Unstable_TrapFocus - disableAutoFocus={false} - disableEnforceFocus={false} - disableRestoreFocus={false} - getDoc={[Function]} - isEnabled={[Function]} - open={true} + legal.p4b + </span> + legal.p4 + </div> + <div + class="legal-notice-oneline" > - <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, - } - } + <span + class="text-14-normal" > - <Transition - appear={true} - enter={true} - exit={true} - in={true} - mountOnEnter={false} - onEnter={[Function]} - onEntered={[Function]} - onEntering={[Function]} - onExit={[Function]} - onExited={[Function]} - onExiting={[Function]} - role="none presentation" - tabIndex="-1" - timeout={ - Object { - "enter": 225, - "exit": 195, - } - } - unmountOnExit={false} - > - <div - className="MuiDialog-container MuiDialog-scrollPaper" - onMouseDown={[Function]} - onMouseUp={[Function]} - role="none presentation" - style={ - Object { - "opacity": 1, - "visibility": undefined, - } - } - tabIndex="-1" - > - <WithStyles(ForwardRef(Paper)) - aria-labelledby="accessibility-title" - className="MuiDialog-paper modal-paper MuiDialog-paperScrollPaper MuiDialog-paperWidthSm" - elevation={24} - role="dialog" - > - <ForwardRef(Paper) - aria-labelledby="accessibility-title" - className="MuiDialog-paper modal-paper MuiDialog-paperScrollPaper MuiDialog-paperWidthSm" - classes={ - Object { - "elevation0": "MuiPaper-elevation0", - "elevation1": "MuiPaper-elevation1", - "elevation10": "MuiPaper-elevation10", - "elevation11": "MuiPaper-elevation11", - "elevation12": "MuiPaper-elevation12", - "elevation13": "MuiPaper-elevation13", - "elevation14": "MuiPaper-elevation14", - "elevation15": "MuiPaper-elevation15", - "elevation16": "MuiPaper-elevation16", - "elevation17": "MuiPaper-elevation17", - "elevation18": "MuiPaper-elevation18", - "elevation19": "MuiPaper-elevation19", - "elevation2": "MuiPaper-elevation2", - "elevation20": "MuiPaper-elevation20", - "elevation21": "MuiPaper-elevation21", - "elevation22": "MuiPaper-elevation22", - "elevation23": "MuiPaper-elevation23", - "elevation24": "MuiPaper-elevation24", - "elevation3": "MuiPaper-elevation3", - "elevation4": "MuiPaper-elevation4", - "elevation5": "MuiPaper-elevation5", - "elevation6": "MuiPaper-elevation6", - "elevation7": "MuiPaper-elevation7", - "elevation8": "MuiPaper-elevation8", - "elevation9": "MuiPaper-elevation9", - "outlined": "MuiPaper-outlined", - "root": "MuiPaper-root", - "rounded": "MuiPaper-rounded", - } - } - elevation={24} - role="dialog" - > - <div - aria-labelledby="accessibility-title" - className="MuiPaper-root MuiDialog-paper modal-paper MuiDialog-paperScrollPaper MuiDialog-paperWidthSm MuiPaper-elevation24 MuiPaper-rounded" - role="dialog" - > - <div - id="accessibility-title" - > - legal.title_legal - </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]} - > - <WithStyles(ForwardRef(ButtonBase)) - aria-label="feedback.accessibility.button_close" - centerRipple={true} - className="MuiIconButton-root modal-paper-close-button" - disabled={false} - focusRipple={true} - onClick={[MockFunction]} - > - <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]} - > - <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" - > - <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))> - <LegalNoticeContent> - <div - className="legal-notice-root" - > - <div - className="legal-notice-content" - > - <p - className="version" - > - legal.version - </p> - <p - dangerouslySetInnerHTML={ - Object { - "__html": "legal.site", - } - } - /> - <p> - legal.adress - </p> - <p> - legal.phone - </p> - <p - className="ln-contact" - dangerouslySetInnerHTML={ - Object { - "__html": "legal.mail", - } - } - /> - <div - className="text-16-normal" - > - <div - className="legal-notice-oneline" - > - <span - className="text-14-normal" - > - legal.p1b - </span> - legal.p1 - </div> - <div - className="legal-notice-oneline" - > - <span - className="text-14-normal" - > - legal.p2b - </span> - legal.p2 - </div> - <div - className="legal-notice-oneline" - > - <span - className="text-14-normal" - > - legal.p3b - </span> - legal.p3 - </div> - <div - className="legal-notice-oneline" - > - <span - className="text-14-normal" - > - legal.p4b - </span> - legal.p4 - </div> - <div - className="legal-notice-oneline" - > - <span - className="text-14-normal" - > - legal.p5b - </span> - legal.p5 - </div> - <div - className="legal-notice-oneline" - > - <span - className="text-14-normal" - > - legal.p6b - </span> - legal.p6 - </div> - <div - className="legal-notice-part" - > - <h3> - - legal.title1 - </h3> - <p> - legal.part1 - </p> - </div> - <div - className="legal-notice-part" - > - <h3> - legal.title2 - </h3> - <p> - legal.part2 - </p> - <ul> - <li> - legal.part2-1 - </li> - <li> - legal.part2-2 - </li> - <li> - legal.part2-3 - <ul> - <li> - legal.part2-3-1 - </li> - <li> - legal.part2-3-2 - </li> - <li> - legal.part2-3-3 - </li> - <li> - legal.part2-3-4 - </li> - <li - dangerouslySetInnerHTML={ - Object { - "__html": "legal.part2-3-5", - } - } - /> - </ul> - </li> - <li> - legal.part2-4 - </li> - </ul> - <p> - legal.part2-5 - </p> - <p> - legal.part2-6 - </p> - <ul> - <li> - legal.part2-6-1 - </li> - <li> - legal.part2-6-2 - </li> - <li> - legal.part2-6-3 - </li> - </ul> - <p - dangerouslySetInnerHTML={ - Object { - "__html": "legal.part2-7", - } - } - /> - <p> - legal.part2-8 - </p> - <p> - legal.part2-9 - </p> - <p - dangerouslySetInnerHTML={ - Object { - "__html": "legal.part2-10", - } - } - /> - <p> - legal.part2-11 - </p> - </div> - <div - className="legal-notice-part" - > - <h3> - legal.title3 - </h3> - <p> - legal.part3-1 - </p> - <p> - legal.part3-2 - </p> - </div> - <div - className="legal-notice-part" - > - <h3> - legal.title4 - </h3> - <p> - legal.part4-1 - </p> - <p> - legal.part4-2 - </p> - </div> - <div - className="legal-notice-part" - > - <h3> - legal.title5 - </h3> - <p> - legal.part5 - </p> - </div> - <div - className="legal-notice-part" - > - <h3> - legal.title6 - </h3> - <p> - legal.part6 - </p> - </div> - <div - className="legal-notice-part" - > - <h3> - legal.title7 - </h3> - <p> - legal.part7-1 - </p> - <p - dangerouslySetInnerHTML={ - Object { - "__html": "legal.part7-2", - } - } - /> - <p> - legal.part7-3 - </p> - </div> - <div - className="legal-notice-part" - > - <h3> - legal.title8 - </h3> - <p> - legal.part8 - </p> - </div> - <div - className="legal-notice-part" - > - <h3> - legal.title9 - </h3> - <p> - legal.part9-1 - </p> - <p> - legal.part9-2 - </p> - </div> - </div> - </div> - </div> - </LegalNoticeContent> - <WithStyles(ForwardRef(Button)) - aria-label="gcu_modal.accessibility.button_accept" - className="btnPrimary" - onClick={[MockFunction]} - > - <ForwardRef(Button) - aria-label="gcu_modal.accessibility.button_accept" - className="btnPrimary" - classes={ - Object { - "colorInherit": "MuiButton-colorInherit", - "contained": "MuiButton-contained", - "containedPrimary": "MuiButton-containedPrimary", - "containedSecondary": "MuiButton-containedSecondary", - "containedSizeLarge": "MuiButton-containedSizeLarge", - "containedSizeSmall": "MuiButton-containedSizeSmall", - "disableElevation": "MuiButton-disableElevation", - "disabled": "Mui-disabled", - "endIcon": "MuiButton-endIcon", - "focusVisible": "Mui-focusVisible", - "fullWidth": "MuiButton-fullWidth", - "iconSizeLarge": "MuiButton-iconSizeLarge", - "iconSizeMedium": "MuiButton-iconSizeMedium", - "iconSizeSmall": "MuiButton-iconSizeSmall", - "label": "MuiButton-label", - "outlined": "MuiButton-outlined", - "outlinedPrimary": "MuiButton-outlinedPrimary", - "outlinedSecondary": "MuiButton-outlinedSecondary", - "outlinedSizeLarge": "MuiButton-outlinedSizeLarge", - "outlinedSizeSmall": "MuiButton-outlinedSizeSmall", - "root": "MuiButton-root", - "sizeLarge": "MuiButton-sizeLarge", - "sizeSmall": "MuiButton-sizeSmall", - "startIcon": "MuiButton-startIcon", - "text": "MuiButton-text", - "textPrimary": "MuiButton-textPrimary", - "textSecondary": "MuiButton-textSecondary", - "textSizeLarge": "MuiButton-textSizeLarge", - "textSizeSmall": "MuiButton-textSizeSmall", - } - } - onClick={[MockFunction]} - > - <WithStyles(ForwardRef(ButtonBase)) - aria-label="gcu_modal.accessibility.button_accept" - className="MuiButton-root MuiButton-text btnPrimary" - component="button" - disabled={false} - focusRipple={true} - focusVisibleClassName="Mui-focusVisible" - onClick={[MockFunction]} - type="button" - > - <ForwardRef(ButtonBase) - aria-label="gcu_modal.accessibility.button_accept" - className="MuiButton-root MuiButton-text btnPrimary" - 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="gcu_modal.accessibility.button_accept" - className="MuiButtonBase-root MuiButton-root MuiButton-text btnPrimary" - 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" - > - legal.accessibility.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(Paper)> - </WithStyles(ForwardRef(Paper))> - </div> - </Transition> - </ForwardRef(Fade)> - <div - data-test="sentinelEnd" - tabIndex={0} - /> - </Unstable_TrapFocus> + legal.p5b + </span> + legal.p5 + </div> + <div + class="legal-notice-oneline" + > + <span + class="text-14-normal" + > + legal.p6b + </span> + legal.p6 + </div> + <div + class="legal-notice-part" + > + <h3> + + legal.title1 + </h3> + <p> + legal.part1 + </p> + </div> + <div + class="legal-notice-part" + > + <h3> + legal.title2 + </h3> + <p> + legal.part2 + </p> + <ul> + <li> + legal.part2-1 + </li> + <li> + legal.part2-2 + </li> + <li> + legal.part2-3 + <ul> + <li> + legal.part2-3-1 + </li> + <li> + legal.part2-3-2 + </li> + <li> + legal.part2-3-3 + </li> + <li> + legal.part2-3-4 + </li> + <li> + legal.part2-3-5 + </li> + </ul> + </li> + <li> + legal.part2-4 + </li> + </ul> + <p> + legal.part2-5 + </p> + <p> + legal.part2-6 + </p> + <ul> + <li> + legal.part2-6-1 + </li> + <li> + legal.part2-6-2 + </li> + <li> + legal.part2-6-3 + </li> + </ul> + <p> + legal.part2-7 + </p> + <p> + legal.part2-8 + </p> + <p> + legal.part2-9 + </p> + <p> + legal.part2-10 + </p> + <p> + legal.part2-11 + </p> + </div> + <div + class="legal-notice-part" + > + <h3> + legal.title3 + </h3> + <p> + legal.part3-1 + </p> + <p> + legal.part3-2 + </p> + </div> + <div + class="legal-notice-part" + > + <h3> + legal.title4 + </h3> + <p> + legal.part4-1 + </p> + <p> + legal.part4-2 + </p> + </div> + <div + class="legal-notice-part" + > + <h3> + legal.title5 + </h3> + <p> + legal.part5 + </p> + </div> + <div + class="legal-notice-part" + > + <h3> + legal.title6 + </h3> + <p> + legal.part6 + </p> + </div> + <div + class="legal-notice-part" + > + <h3> + legal.title7 + </h3> + <p> + legal.part7-1 + </p> + <p> + legal.part7-2 + </p> + <p> + legal.part7-3 + </p> + </div> + <div + class="legal-notice-part" + > + <h3> + legal.title8 + </h3> + <p> + legal.part8 + </p> + </div> + <div + class="legal-notice-part" + > + <h3> + legal.title9 + </h3> + <p> + legal.part9-1 + </p> + <p> + legal.part9-2 + </p> + </div> </div> - </Portal> - </ForwardRef(Portal)> - </ForwardRef(Modal)> - </ForwardRef(Dialog)> - </WithStyles(ForwardRef(Dialog))> -</LegalNoticeModal> + </div> + </div> + <button + aria-label="gcu_modal.accessibility.button_accept" + class="MuiButtonBase-root MuiButton-root MuiButton-text btnPrimary" + tabindex="0" + type="button" + > + <span + class="MuiButton-label" + > + legal.accessibility.button_close + </span> + <span + class="MuiTouchRipple-root" + /> + </button> + </div> + </div> + <div + data-test="sentinelEnd" + tabindex="0" + /> + </div> +</body> `; diff --git a/src/components/Terms/__snapshots__/MinorUpdateContent.spec.tsx.snap b/src/components/Terms/__snapshots__/MinorUpdateContent.spec.tsx.snap index 46848ba3de01a50d32be8dfeff0f603c9aef5865..2d4484beec4d4d4aabd2824cfdb3a69edcab5fa6 100644 --- a/src/components/Terms/__snapshots__/MinorUpdateContent.spec.tsx.snap +++ b/src/components/Terms/__snapshots__/MinorUpdateContent.spec.tsx.snap @@ -1,19 +1,19 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP exports[`Minor update content component should be rendered correctly 1`] = ` -<MinorUpdateContent> +<div> <div - className="dataShare-content-root" + class="dataShare-content-root" > <div - className="dataShare-content-wrapper" + class="dataShare-content-wrapper" > <h1 - className="dataShare-content-title text-22-normal" + class="dataShare-content-title text-22-normal" > minorUpdate.title </h1> </div> </div> -</MinorUpdateContent> +</div> `; diff --git a/src/components/Terms/__snapshots__/TermsView.spec.tsx.snap b/src/components/Terms/__snapshots__/TermsView.spec.tsx.snap index c1e2539f86aeec44e6f24388888dd839bda6c962..0783bbe8bd4baac1ffc15c47ee7fddf4c20c265d 100644 --- a/src/components/Terms/__snapshots__/TermsView.spec.tsx.snap +++ b/src/components/Terms/__snapshots__/TermsView.spec.tsx.snap @@ -1,1256 +1,182 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP exports[`TermsView component should be rendered correctly 1`] = ` -<Provider - store={ - Object { - "clearActions": [Function], - "dispatch": [Function], - "getActions": [Function], - "getState": [Function], - "replaceReducer": [Function], - "subscribe": [Function], - } - } -> - <TermsView> +<div> + <div + class="terms-wrapper" + > <div - className="terms-wrapper" + class="terms-content" > <div - className="terms-content" + class="dataShare-content-root" > - <DataShareConsentContent> - <div - className="dataShare-content-root" + <div + class="dataShare-content-wrapper" + > + <h1 + class="dataShare-content-title text-22-normal" + > + dataShare.title1Update + </h1> + <p + class="text-14-normal" + > + dataShare.title2Update + </p> + <p + class="text-14-normal" + > + dataShare.part1 + </p> + <p + class="text-14-normal" + > + dataShare.part2 + </p> + <p + class="text-14-normal" > - <div - className="dataShare-content-wrapper" + dataShare.part3 + </p> + <ul + class="text-14-normal" + > + <li + class="text-14-normal" > - <h1 - className="dataShare-content-title text-22-normal" - > - dataShare.title1Update - </h1> - <p - className="text-14-normal" - > - dataShare.title2Update - </p> - <p - className="text-14-normal" - > - dataShare.part1 - </p> - <p - className="text-14-normal" - > - dataShare.part2 - </p> - <p - className="text-14-normal" - > - dataShare.part3 - </p> - <ul - className="text-14-normal" - > - <li - className="text-14-normal" - > - dataShare.item1 - </li> - <li - className="text-14-normal" - > - dataShare.item2 - </li> - <li - className="text-14-normal" - > - dataShare.item3 - </li> - </ul> - <p - className="text-14-normal" - > - dataShare.part4 - </p> - <p - className="text-14-normal" - > - dataShare.part5 - </p> - <p - className="text-14-normal" - > - dataShare.part6 - </p> - <p - className="text-14-normal" - > - dataShare.part7 - </p> - <p - className="text-14-normal" - > - dataShare.part8 - </p> - <span - className="text-14-normal" - > - dataShare.part9 - </span> - <span - className="text-14-normal" - > - dataShare.part10 - </span> - <span - className="text-14-normal" - dangerouslySetInnerHTML={ - Object { - "__html": "dataShare.link1", - } - } - /> - </div> - </div> - </DataShareConsentContent> - <label - className="inline" - > - <input - checked={false} - className="inputCheckbox" - name="Data-consent-validation" - onChange={[Function]} - type="checkbox" - /> - dataShare.validDataConsent - </label> - <label - className="inline" - > - <input - checked={false} - className="inputCheckbox" - id="gcu" - name="GCU-validation" - onChange={[Function]} - type="checkbox" - /> - <div> - <span> - dataShare.validCGU - </span> - <WithStyles(ForwardRef(Button)) - className="btnText" - onClick={[Function]} - size="small" + dataShare.item1 + </li> + <li + class="text-14-normal" > - <ForwardRef(Button) - className="btnText" - classes={ - Object { - "colorInherit": "MuiButton-colorInherit", - "contained": "MuiButton-contained", - "containedPrimary": "MuiButton-containedPrimary", - "containedSecondary": "MuiButton-containedSecondary", - "containedSizeLarge": "MuiButton-containedSizeLarge", - "containedSizeSmall": "MuiButton-containedSizeSmall", - "disableElevation": "MuiButton-disableElevation", - "disabled": "Mui-disabled", - "endIcon": "MuiButton-endIcon", - "focusVisible": "Mui-focusVisible", - "fullWidth": "MuiButton-fullWidth", - "iconSizeLarge": "MuiButton-iconSizeLarge", - "iconSizeMedium": "MuiButton-iconSizeMedium", - "iconSizeSmall": "MuiButton-iconSizeSmall", - "label": "MuiButton-label", - "outlined": "MuiButton-outlined", - "outlinedPrimary": "MuiButton-outlinedPrimary", - "outlinedSecondary": "MuiButton-outlinedSecondary", - "outlinedSizeLarge": "MuiButton-outlinedSizeLarge", - "outlinedSizeSmall": "MuiButton-outlinedSizeSmall", - "root": "MuiButton-root", - "sizeLarge": "MuiButton-sizeLarge", - "sizeSmall": "MuiButton-sizeSmall", - "startIcon": "MuiButton-startIcon", - "text": "MuiButton-text", - "textPrimary": "MuiButton-textPrimary", - "textSecondary": "MuiButton-textSecondary", - "textSizeLarge": "MuiButton-textSizeLarge", - "textSizeSmall": "MuiButton-textSizeSmall", - } - } - onClick={[Function]} - size="small" - > - <WithStyles(ForwardRef(ButtonBase)) - className="MuiButton-root MuiButton-text btnText MuiButton-textSizeSmall MuiButton-sizeSmall" - component="button" - disabled={false} - focusRipple={true} - focusVisibleClassName="Mui-focusVisible" - onClick={[Function]} - type="button" - > - <ForwardRef(ButtonBase) - className="MuiButton-root MuiButton-text btnText MuiButton-textSizeSmall MuiButton-sizeSmall" - classes={ - Object { - "disabled": "Mui-disabled", - "focusVisible": "Mui-focusVisible", - "root": "MuiButtonBase-root", - } - } - component="button" - disabled={false} - focusRipple={true} - focusVisibleClassName="Mui-focusVisible" - onClick={[Function]} - type="button" - > - <button - className="MuiButtonBase-root MuiButton-root MuiButton-text btnText MuiButton-textSizeSmall MuiButton-sizeSmall" - 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" - > - dataShare.validCGU_button - </span> - <WithStyles(memo) - center={false} - > - <ForwardRef(TouchRipple) - center={false} - classes={ - Object { - "child": "MuiTouchRipple-child", - "childLeaving": "MuiTouchRipple-childLeaving", - "childPulsate": "MuiTouchRipple-childPulsate", - "ripple": "MuiTouchRipple-ripple", - "ripplePulsate": "MuiTouchRipple-ripplePulsate", - "rippleVisible": "MuiTouchRipple-rippleVisible", - "root": "MuiTouchRipple-root", - } - } - > - <span - className="MuiTouchRipple-root" - > - <TransitionGroup - childFactory={[Function]} - component={null} - exit={true} - /> - </span> - </ForwardRef(TouchRipple)> - </WithStyles(memo)> - </button> - </ForwardRef(ButtonBase)> - </WithStyles(ForwardRef(ButtonBase))> - </ForwardRef(Button)> - </WithStyles(ForwardRef(Button))> - <span> - dataShare.validLegal - </span> - <WithStyles(ForwardRef(Button)) - className="btnText" - onClick={[Function]} - size="small" + dataShare.item2 + </li> + <li + class="text-14-normal" > - <ForwardRef(Button) - className="btnText" - classes={ - Object { - "colorInherit": "MuiButton-colorInherit", - "contained": "MuiButton-contained", - "containedPrimary": "MuiButton-containedPrimary", - "containedSecondary": "MuiButton-containedSecondary", - "containedSizeLarge": "MuiButton-containedSizeLarge", - "containedSizeSmall": "MuiButton-containedSizeSmall", - "disableElevation": "MuiButton-disableElevation", - "disabled": "Mui-disabled", - "endIcon": "MuiButton-endIcon", - "focusVisible": "Mui-focusVisible", - "fullWidth": "MuiButton-fullWidth", - "iconSizeLarge": "MuiButton-iconSizeLarge", - "iconSizeMedium": "MuiButton-iconSizeMedium", - "iconSizeSmall": "MuiButton-iconSizeSmall", - "label": "MuiButton-label", - "outlined": "MuiButton-outlined", - "outlinedPrimary": "MuiButton-outlinedPrimary", - "outlinedSecondary": "MuiButton-outlinedSecondary", - "outlinedSizeLarge": "MuiButton-outlinedSizeLarge", - "outlinedSizeSmall": "MuiButton-outlinedSizeSmall", - "root": "MuiButton-root", - "sizeLarge": "MuiButton-sizeLarge", - "sizeSmall": "MuiButton-sizeSmall", - "startIcon": "MuiButton-startIcon", - "text": "MuiButton-text", - "textPrimary": "MuiButton-textPrimary", - "textSecondary": "MuiButton-textSecondary", - "textSizeLarge": "MuiButton-textSizeLarge", - "textSizeSmall": "MuiButton-textSizeSmall", - } - } - onClick={[Function]} - size="small" - > - <WithStyles(ForwardRef(ButtonBase)) - className="MuiButton-root MuiButton-text btnText MuiButton-textSizeSmall MuiButton-sizeSmall" - component="button" - disabled={false} - focusRipple={true} - focusVisibleClassName="Mui-focusVisible" - onClick={[Function]} - type="button" - > - <ForwardRef(ButtonBase) - className="MuiButton-root MuiButton-text btnText MuiButton-textSizeSmall MuiButton-sizeSmall" - classes={ - Object { - "disabled": "Mui-disabled", - "focusVisible": "Mui-focusVisible", - "root": "MuiButtonBase-root", - } - } - component="button" - disabled={false} - focusRipple={true} - focusVisibleClassName="Mui-focusVisible" - onClick={[Function]} - type="button" - > - <button - className="MuiButtonBase-root MuiButton-root MuiButton-text btnText MuiButton-textSizeSmall MuiButton-sizeSmall" - 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" - > - dataShare.validLegal_button - </span> - <WithStyles(memo) - center={false} - > - <ForwardRef(TouchRipple) - center={false} - classes={ - Object { - "child": "MuiTouchRipple-child", - "childLeaving": "MuiTouchRipple-childLeaving", - "childPulsate": "MuiTouchRipple-childPulsate", - "ripple": "MuiTouchRipple-ripple", - "ripplePulsate": "MuiTouchRipple-ripplePulsate", - "rippleVisible": "MuiTouchRipple-rippleVisible", - "root": "MuiTouchRipple-root", - } - } - > - <span - className="MuiTouchRipple-root" - > - <TransitionGroup - childFactory={[Function]} - component={null} - exit={true} - /> - </span> - </ForwardRef(TouchRipple)> - </WithStyles(memo)> - </button> - </ForwardRef(ButtonBase)> - </WithStyles(ForwardRef(ButtonBase))> - </ForwardRef(Button)> - </WithStyles(ForwardRef(Button))> - <span> - dataShare.validLegal2 - </span> - </div> - </label> + dataShare.item3 + </li> + </ul> + <p + class="text-14-normal" + > + dataShare.part4 + </p> + <p + class="text-14-normal" + > + dataShare.part5 + </p> + <p + class="text-14-normal" + > + dataShare.part6 + </p> + <p + class="text-14-normal" + > + dataShare.part7 + </p> + <p + class="text-14-normal" + > + dataShare.part8 + </p> + <span + class="text-14-normal" + > + dataShare.part9 + </span> + <span + class="text-14-normal" + > + dataShare.part10 + </span> + <span + class="text-14-normal" + > + dataShare.link1 + </span> + </div> </div> - <div - className="terms-footer" + <label + class="inline" > - <WithStyles(ForwardRef(Button)) - aria-label="dataShare.accessibility.button_accept" - className="btnPrimary" - disabled={true} - onClick={[Function]} - > - <ForwardRef(Button) - aria-label="dataShare.accessibility.button_accept" - className="btnPrimary" - classes={ - Object { - "colorInherit": "MuiButton-colorInherit", - "contained": "MuiButton-contained", - "containedPrimary": "MuiButton-containedPrimary", - "containedSecondary": "MuiButton-containedSecondary", - "containedSizeLarge": "MuiButton-containedSizeLarge", - "containedSizeSmall": "MuiButton-containedSizeSmall", - "disableElevation": "MuiButton-disableElevation", - "disabled": "Mui-disabled", - "endIcon": "MuiButton-endIcon", - "focusVisible": "Mui-focusVisible", - "fullWidth": "MuiButton-fullWidth", - "iconSizeLarge": "MuiButton-iconSizeLarge", - "iconSizeMedium": "MuiButton-iconSizeMedium", - "iconSizeSmall": "MuiButton-iconSizeSmall", - "label": "MuiButton-label", - "outlined": "MuiButton-outlined", - "outlinedPrimary": "MuiButton-outlinedPrimary", - "outlinedSecondary": "MuiButton-outlinedSecondary", - "outlinedSizeLarge": "MuiButton-outlinedSizeLarge", - "outlinedSizeSmall": "MuiButton-outlinedSizeSmall", - "root": "MuiButton-root", - "sizeLarge": "MuiButton-sizeLarge", - "sizeSmall": "MuiButton-sizeSmall", - "startIcon": "MuiButton-startIcon", - "text": "MuiButton-text", - "textPrimary": "MuiButton-textPrimary", - "textSecondary": "MuiButton-textSecondary", - "textSizeLarge": "MuiButton-textSizeLarge", - "textSizeSmall": "MuiButton-textSizeSmall", - } - } - disabled={true} - onClick={[Function]} + <input + class="inputCheckbox" + name="Data-consent-validation" + type="checkbox" + /> + dataShare.validDataConsent + </label> + <label + class="inline" + > + <input + class="inputCheckbox" + id="gcu" + name="GCU-validation" + type="checkbox" + /> + <div> + <span> + dataShare.validCGU + </span> + <button + class="MuiButtonBase-root MuiButton-root MuiButton-text btnText MuiButton-textSizeSmall MuiButton-sizeSmall" + tabindex="0" + type="button" > - <WithStyles(ForwardRef(ButtonBase)) - aria-label="dataShare.accessibility.button_accept" - className="MuiButton-root MuiButton-text btnPrimary Mui-disabled" - component="button" - disabled={true} - focusRipple={true} - focusVisibleClassName="Mui-focusVisible" - onClick={[Function]} - type="button" + <span + class="MuiButton-label" > - <ForwardRef(ButtonBase) - aria-label="dataShare.accessibility.button_accept" - className="MuiButton-root MuiButton-text btnPrimary Mui-disabled" - classes={ - Object { - "disabled": "Mui-disabled", - "focusVisible": "Mui-focusVisible", - "root": "MuiButtonBase-root", - } - } - component="button" - disabled={true} - focusRipple={true} - focusVisibleClassName="Mui-focusVisible" - onClick={[Function]} - type="button" - > - <button - aria-label="dataShare.accessibility.button_accept" - className="MuiButtonBase-root MuiButton-root MuiButton-text btnPrimary Mui-disabled Mui-disabled" - disabled={true} - 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={-1} - type="button" - > - <span - className="MuiButton-label" - > - dataShare.button_accept - </span> - </button> - </ForwardRef(ButtonBase)> - </WithStyles(ForwardRef(ButtonBase))> - </ForwardRef(Button)> - </WithStyles(ForwardRef(Button))> - </div> - <CGUModal - handleCloseClick={[Function]} - open={false} - > - <WithStyles(ForwardRef(Dialog)) - aria-labelledby="accessibility-title" - classes={ - Object { - "paper": "modal-paper", - "root": "modal-root", - } - } - onClose={[Function]} - open={false} - > - <ForwardRef(Dialog) - aria-labelledby="accessibility-title" - classes={ - Object { - "container": "MuiDialog-container", - "paper": "MuiDialog-paper modal-paper", - "paperFullScreen": "MuiDialog-paperFullScreen", - "paperFullWidth": "MuiDialog-paperFullWidth", - "paperScrollBody": "MuiDialog-paperScrollBody", - "paperScrollPaper": "MuiDialog-paperScrollPaper", - "paperWidthFalse": "MuiDialog-paperWidthFalse", - "paperWidthLg": "MuiDialog-paperWidthLg", - "paperWidthMd": "MuiDialog-paperWidthMd", - "paperWidthSm": "MuiDialog-paperWidthSm", - "paperWidthXl": "MuiDialog-paperWidthXl", - "paperWidthXs": "MuiDialog-paperWidthXs", - "root": "MuiDialog-root modal-root", - "scrollBody": "MuiDialog-scrollBody", - "scrollPaper": "MuiDialog-scrollPaper", - } - } - onClose={[Function]} - open={false} + dataShare.validCGU_button + </span> + <span + class="MuiTouchRipple-root" + /> + </button> + <span> + dataShare.validLegal + </span> + <button + class="MuiButtonBase-root MuiButton-root MuiButton-text btnText MuiButton-textSizeSmall MuiButton-sizeSmall" + tabindex="0" + type="button" > - <ForwardRef(Modal) - BackdropComponent={ - Object { - "$$typeof": Symbol(react.forward_ref), - "Naked": Object { - "$$typeof": Symbol(react.forward_ref), - "propTypes": Object { - "children": [Function], - "className": [Function], - "classes": [Function], - "invisible": [Function], - "open": [Function], - "transitionDuration": [Function], - }, - "render": [Function], - }, - "displayName": "WithStyles(ForwardRef(Backdrop))", - "options": Object { - "defaultTheme": Object { - "breakpoints": Object { - "between": [Function], - "down": [Function], - "keys": Array [ - "xs", - "sm", - "md", - "lg", - "xl", - ], - "only": [Function], - "up": [Function], - "values": Object { - "lg": 1280, - "md": 960, - "sm": 600, - "xl": 1920, - "xs": 0, - }, - "width": [Function], - }, - "direction": "ltr", - "mixins": Object { - "gutters": [Function], - "toolbar": Object { - "@media (min-width:0px) and (orientation: landscape)": Object { - "minHeight": 48, - }, - "@media (min-width:600px)": Object { - "minHeight": 64, - }, - "minHeight": 56, - }, - }, - "overrides": Object {}, - "palette": Object { - "action": Object { - "activatedOpacity": 0.12, - "active": "rgba(0, 0, 0, 0.54)", - "disabled": "rgba(0, 0, 0, 0.26)", - "disabledBackground": "rgba(0, 0, 0, 0.12)", - "disabledOpacity": 0.38, - "focus": "rgba(0, 0, 0, 0.12)", - "focusOpacity": 0.12, - "hover": "rgba(0, 0, 0, 0.04)", - "hoverOpacity": 0.04, - "selected": "rgba(0, 0, 0, 0.08)", - "selectedOpacity": 0.08, - }, - "augmentColor": [Function], - "background": Object { - "default": "#fafafa", - "paper": "#fff", - }, - "common": Object { - "black": "#000", - "white": "#fff", - }, - "contrastThreshold": 3, - "divider": "rgba(0, 0, 0, 0.12)", - "error": Object { - "contrastText": "#fff", - "dark": "#d32f2f", - "light": "#e57373", - "main": "#f44336", - }, - "getContrastText": [Function], - "grey": Object { - "100": "#f5f5f5", - "200": "#eeeeee", - "300": "#e0e0e0", - "400": "#bdbdbd", - "50": "#fafafa", - "500": "#9e9e9e", - "600": "#757575", - "700": "#616161", - "800": "#424242", - "900": "#212121", - "A100": "#d5d5d5", - "A200": "#aaaaaa", - "A400": "#303030", - "A700": "#616161", - }, - "info": Object { - "contrastText": "#fff", - "dark": "#1976d2", - "light": "#64b5f6", - "main": "#2196f3", - }, - "primary": Object { - "contrastText": "#fff", - "dark": "#303f9f", - "light": "#7986cb", - "main": "#3f51b5", - }, - "secondary": Object { - "contrastText": "#fff", - "dark": "#c51162", - "light": "#ff4081", - "main": "#f50057", - }, - "success": Object { - "contrastText": "rgba(0, 0, 0, 0.87)", - "dark": "#388e3c", - "light": "#81c784", - "main": "#4caf50", - }, - "text": Object { - "disabled": "rgba(0, 0, 0, 0.38)", - "hint": "rgba(0, 0, 0, 0.38)", - "primary": "rgba(0, 0, 0, 0.87)", - "secondary": "rgba(0, 0, 0, 0.54)", - }, - "tonalOffset": 0.2, - "type": "light", - "warning": Object { - "contrastText": "rgba(0, 0, 0, 0.87)", - "dark": "#f57c00", - "light": "#ffb74d", - "main": "#ff9800", - }, - }, - "props": Object {}, - "shadows": Array [ - "none", - "0px 2px 1px -1px rgba(0,0,0,0.2),0px 1px 1px 0px rgba(0,0,0,0.14),0px 1px 3px 0px rgba(0,0,0,0.12)", - "0px 3px 1px -2px rgba(0,0,0,0.2),0px 2px 2px 0px rgba(0,0,0,0.14),0px 1px 5px 0px rgba(0,0,0,0.12)", - "0px 3px 3px -2px rgba(0,0,0,0.2),0px 3px 4px 0px rgba(0,0,0,0.14),0px 1px 8px 0px rgba(0,0,0,0.12)", - "0px 2px 4px -1px rgba(0,0,0,0.2),0px 4px 5px 0px rgba(0,0,0,0.14),0px 1px 10px 0px rgba(0,0,0,0.12)", - "0px 3px 5px -1px rgba(0,0,0,0.2),0px 5px 8px 0px rgba(0,0,0,0.14),0px 1px 14px 0px rgba(0,0,0,0.12)", - "0px 3px 5px -1px rgba(0,0,0,0.2),0px 6px 10px 0px rgba(0,0,0,0.14),0px 1px 18px 0px rgba(0,0,0,0.12)", - "0px 4px 5px -2px rgba(0,0,0,0.2),0px 7px 10px 1px rgba(0,0,0,0.14),0px 2px 16px 1px rgba(0,0,0,0.12)", - "0px 5px 5px -3px rgba(0,0,0,0.2),0px 8px 10px 1px rgba(0,0,0,0.14),0px 3px 14px 2px rgba(0,0,0,0.12)", - "0px 5px 6px -3px rgba(0,0,0,0.2),0px 9px 12px 1px rgba(0,0,0,0.14),0px 3px 16px 2px rgba(0,0,0,0.12)", - "0px 6px 6px -3px rgba(0,0,0,0.2),0px 10px 14px 1px rgba(0,0,0,0.14),0px 4px 18px 3px rgba(0,0,0,0.12)", - "0px 6px 7px -4px rgba(0,0,0,0.2),0px 11px 15px 1px rgba(0,0,0,0.14),0px 4px 20px 3px rgba(0,0,0,0.12)", - "0px 7px 8px -4px rgba(0,0,0,0.2),0px 12px 17px 2px rgba(0,0,0,0.14),0px 5px 22px 4px rgba(0,0,0,0.12)", - "0px 7px 8px -4px rgba(0,0,0,0.2),0px 13px 19px 2px rgba(0,0,0,0.14),0px 5px 24px 4px rgba(0,0,0,0.12)", - "0px 7px 9px -4px rgba(0,0,0,0.2),0px 14px 21px 2px rgba(0,0,0,0.14),0px 5px 26px 4px rgba(0,0,0,0.12)", - "0px 8px 9px -5px rgba(0,0,0,0.2),0px 15px 22px 2px rgba(0,0,0,0.14),0px 6px 28px 5px rgba(0,0,0,0.12)", - "0px 8px 10px -5px rgba(0,0,0,0.2),0px 16px 24px 2px rgba(0,0,0,0.14),0px 6px 30px 5px rgba(0,0,0,0.12)", - "0px 8px 11px -5px rgba(0,0,0,0.2),0px 17px 26px 2px rgba(0,0,0,0.14),0px 6px 32px 5px rgba(0,0,0,0.12)", - "0px 9px 11px -5px rgba(0,0,0,0.2),0px 18px 28px 2px rgba(0,0,0,0.14),0px 7px 34px 6px rgba(0,0,0,0.12)", - "0px 9px 12px -6px rgba(0,0,0,0.2),0px 19px 29px 2px rgba(0,0,0,0.14),0px 7px 36px 6px rgba(0,0,0,0.12)", - "0px 10px 13px -6px rgba(0,0,0,0.2),0px 20px 31px 3px rgba(0,0,0,0.14),0px 8px 38px 7px rgba(0,0,0,0.12)", - "0px 10px 13px -6px rgba(0,0,0,0.2),0px 21px 33px 3px rgba(0,0,0,0.14),0px 8px 40px 7px rgba(0,0,0,0.12)", - "0px 10px 14px -6px rgba(0,0,0,0.2),0px 22px 35px 3px rgba(0,0,0,0.14),0px 8px 42px 7px rgba(0,0,0,0.12)", - "0px 11px 14px -7px rgba(0,0,0,0.2),0px 23px 36px 3px rgba(0,0,0,0.14),0px 9px 44px 8px rgba(0,0,0,0.12)", - "0px 11px 15px -7px rgba(0,0,0,0.2),0px 24px 38px 3px rgba(0,0,0,0.14),0px 9px 46px 8px rgba(0,0,0,0.12)", - ], - "shape": Object { - "borderRadius": 4, - }, - "spacing": [Function], - "transitions": Object { - "create": [Function], - "duration": Object { - "complex": 375, - "enteringScreen": 225, - "leavingScreen": 195, - "short": 250, - "shorter": 200, - "shortest": 150, - "standard": 300, - }, - "easing": Object { - "easeIn": "cubic-bezier(0.4, 0, 1, 1)", - "easeInOut": "cubic-bezier(0.4, 0, 0.2, 1)", - "easeOut": "cubic-bezier(0.0, 0, 0.2, 1)", - "sharp": "cubic-bezier(0.4, 0, 0.6, 1)", - }, - "getAutoHeightDuration": [Function], - }, - "typography": Object { - "body1": Object { - "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif", - "fontSize": "1rem", - "fontWeight": 400, - "letterSpacing": "0.00938em", - "lineHeight": 1.5, - }, - "body2": Object { - "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif", - "fontSize": "0.875rem", - "fontWeight": 400, - "letterSpacing": "0.01071em", - "lineHeight": 1.43, - }, - "button": Object { - "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif", - "fontSize": "0.875rem", - "fontWeight": 500, - "letterSpacing": "0.02857em", - "lineHeight": 1.75, - "textTransform": "uppercase", - }, - "caption": Object { - "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif", - "fontSize": "0.75rem", - "fontWeight": 400, - "letterSpacing": "0.03333em", - "lineHeight": 1.66, - }, - "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif", - "fontSize": 14, - "fontWeightBold": 700, - "fontWeightLight": 300, - "fontWeightMedium": 500, - "fontWeightRegular": 400, - "h1": Object { - "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif", - "fontSize": "6rem", - "fontWeight": 300, - "letterSpacing": "-0.01562em", - "lineHeight": 1.167, - }, - "h2": Object { - "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif", - "fontSize": "3.75rem", - "fontWeight": 300, - "letterSpacing": "-0.00833em", - "lineHeight": 1.2, - }, - "h3": Object { - "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif", - "fontSize": "3rem", - "fontWeight": 400, - "letterSpacing": "0em", - "lineHeight": 1.167, - }, - "h4": Object { - "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif", - "fontSize": "2.125rem", - "fontWeight": 400, - "letterSpacing": "0.00735em", - "lineHeight": 1.235, - }, - "h5": Object { - "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif", - "fontSize": "1.5rem", - "fontWeight": 400, - "letterSpacing": "0em", - "lineHeight": 1.334, - }, - "h6": Object { - "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif", - "fontSize": "1.25rem", - "fontWeight": 500, - "letterSpacing": "0.0075em", - "lineHeight": 1.6, - }, - "htmlFontSize": 16, - "overline": Object { - "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif", - "fontSize": "0.75rem", - "fontWeight": 400, - "letterSpacing": "0.08333em", - "lineHeight": 2.66, - "textTransform": "uppercase", - }, - "pxToRem": [Function], - "round": [Function], - "subtitle1": Object { - "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif", - "fontSize": "1rem", - "fontWeight": 400, - "letterSpacing": "0.00938em", - "lineHeight": 1.75, - }, - "subtitle2": Object { - "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif", - "fontSize": "0.875rem", - "fontWeight": 500, - "letterSpacing": "0.00714em", - "lineHeight": 1.57, - }, - }, - "zIndex": Object { - "appBar": 1100, - "drawer": 1200, - "mobileStepper": 1000, - "modal": 1300, - "snackbar": 1400, - "speedDial": 1050, - "tooltip": 1500, - }, - }, - "name": "MuiBackdrop", - }, - "propTypes": Object { - "classes": [Function], - "innerRef": [Function], - }, - "render": [Function], - "useStyles": [Function], - } - } - BackdropProps={ - Object { - "transitionDuration": Object { - "enter": 225, - "exit": 195, - }, - } - } - className="MuiDialog-root modal-root" - closeAfterTransition={true} - disableEscapeKeyDown={false} - onClose={[Function]} - open={false} + <span + class="MuiButton-label" + > + dataShare.validLegal_button + </span> + <span + class="MuiTouchRipple-root" /> - </ForwardRef(Dialog)> - </WithStyles(ForwardRef(Dialog))> - </CGUModal> - <LegalNoticeModal - handleCloseClick={[Function]} - open={false} + </button> + <span> + dataShare.validLegal2 + </span> + </div> + </label> + </div> + <div + class="terms-footer" + > + <button + aria-label="dataShare.accessibility.button_accept" + class="MuiButtonBase-root MuiButton-root MuiButton-text btnPrimary Mui-disabled Mui-disabled" + disabled="" + tabindex="-1" + type="button" > - <WithStyles(ForwardRef(Dialog)) - aria-labelledby="accessibility-title" - classes={ - Object { - "paper": "modal-paper", - "root": "modal-root", - } - } - onClose={[Function]} - open={false} + <span + class="MuiButton-label" > - <ForwardRef(Dialog) - aria-labelledby="accessibility-title" - classes={ - Object { - "container": "MuiDialog-container", - "paper": "MuiDialog-paper modal-paper", - "paperFullScreen": "MuiDialog-paperFullScreen", - "paperFullWidth": "MuiDialog-paperFullWidth", - "paperScrollBody": "MuiDialog-paperScrollBody", - "paperScrollPaper": "MuiDialog-paperScrollPaper", - "paperWidthFalse": "MuiDialog-paperWidthFalse", - "paperWidthLg": "MuiDialog-paperWidthLg", - "paperWidthMd": "MuiDialog-paperWidthMd", - "paperWidthSm": "MuiDialog-paperWidthSm", - "paperWidthXl": "MuiDialog-paperWidthXl", - "paperWidthXs": "MuiDialog-paperWidthXs", - "root": "MuiDialog-root modal-root", - "scrollBody": "MuiDialog-scrollBody", - "scrollPaper": "MuiDialog-scrollPaper", - } - } - onClose={[Function]} - open={false} - > - <ForwardRef(Modal) - BackdropComponent={ - Object { - "$$typeof": Symbol(react.forward_ref), - "Naked": Object { - "$$typeof": Symbol(react.forward_ref), - "propTypes": Object { - "children": [Function], - "className": [Function], - "classes": [Function], - "invisible": [Function], - "open": [Function], - "transitionDuration": [Function], - }, - "render": [Function], - }, - "displayName": "WithStyles(ForwardRef(Backdrop))", - "options": Object { - "defaultTheme": Object { - "breakpoints": Object { - "between": [Function], - "down": [Function], - "keys": Array [ - "xs", - "sm", - "md", - "lg", - "xl", - ], - "only": [Function], - "up": [Function], - "values": Object { - "lg": 1280, - "md": 960, - "sm": 600, - "xl": 1920, - "xs": 0, - }, - "width": [Function], - }, - "direction": "ltr", - "mixins": Object { - "gutters": [Function], - "toolbar": Object { - "@media (min-width:0px) and (orientation: landscape)": Object { - "minHeight": 48, - }, - "@media (min-width:600px)": Object { - "minHeight": 64, - }, - "minHeight": 56, - }, - }, - "overrides": Object {}, - "palette": Object { - "action": Object { - "activatedOpacity": 0.12, - "active": "rgba(0, 0, 0, 0.54)", - "disabled": "rgba(0, 0, 0, 0.26)", - "disabledBackground": "rgba(0, 0, 0, 0.12)", - "disabledOpacity": 0.38, - "focus": "rgba(0, 0, 0, 0.12)", - "focusOpacity": 0.12, - "hover": "rgba(0, 0, 0, 0.04)", - "hoverOpacity": 0.04, - "selected": "rgba(0, 0, 0, 0.08)", - "selectedOpacity": 0.08, - }, - "augmentColor": [Function], - "background": Object { - "default": "#fafafa", - "paper": "#fff", - }, - "common": Object { - "black": "#000", - "white": "#fff", - }, - "contrastThreshold": 3, - "divider": "rgba(0, 0, 0, 0.12)", - "error": Object { - "contrastText": "#fff", - "dark": "#d32f2f", - "light": "#e57373", - "main": "#f44336", - }, - "getContrastText": [Function], - "grey": Object { - "100": "#f5f5f5", - "200": "#eeeeee", - "300": "#e0e0e0", - "400": "#bdbdbd", - "50": "#fafafa", - "500": "#9e9e9e", - "600": "#757575", - "700": "#616161", - "800": "#424242", - "900": "#212121", - "A100": "#d5d5d5", - "A200": "#aaaaaa", - "A400": "#303030", - "A700": "#616161", - }, - "info": Object { - "contrastText": "#fff", - "dark": "#1976d2", - "light": "#64b5f6", - "main": "#2196f3", - }, - "primary": Object { - "contrastText": "#fff", - "dark": "#303f9f", - "light": "#7986cb", - "main": "#3f51b5", - }, - "secondary": Object { - "contrastText": "#fff", - "dark": "#c51162", - "light": "#ff4081", - "main": "#f50057", - }, - "success": Object { - "contrastText": "rgba(0, 0, 0, 0.87)", - "dark": "#388e3c", - "light": "#81c784", - "main": "#4caf50", - }, - "text": Object { - "disabled": "rgba(0, 0, 0, 0.38)", - "hint": "rgba(0, 0, 0, 0.38)", - "primary": "rgba(0, 0, 0, 0.87)", - "secondary": "rgba(0, 0, 0, 0.54)", - }, - "tonalOffset": 0.2, - "type": "light", - "warning": Object { - "contrastText": "rgba(0, 0, 0, 0.87)", - "dark": "#f57c00", - "light": "#ffb74d", - "main": "#ff9800", - }, - }, - "props": Object {}, - "shadows": Array [ - "none", - "0px 2px 1px -1px rgba(0,0,0,0.2),0px 1px 1px 0px rgba(0,0,0,0.14),0px 1px 3px 0px rgba(0,0,0,0.12)", - "0px 3px 1px -2px rgba(0,0,0,0.2),0px 2px 2px 0px rgba(0,0,0,0.14),0px 1px 5px 0px rgba(0,0,0,0.12)", - "0px 3px 3px -2px rgba(0,0,0,0.2),0px 3px 4px 0px rgba(0,0,0,0.14),0px 1px 8px 0px rgba(0,0,0,0.12)", - "0px 2px 4px -1px rgba(0,0,0,0.2),0px 4px 5px 0px rgba(0,0,0,0.14),0px 1px 10px 0px rgba(0,0,0,0.12)", - "0px 3px 5px -1px rgba(0,0,0,0.2),0px 5px 8px 0px rgba(0,0,0,0.14),0px 1px 14px 0px rgba(0,0,0,0.12)", - "0px 3px 5px -1px rgba(0,0,0,0.2),0px 6px 10px 0px rgba(0,0,0,0.14),0px 1px 18px 0px rgba(0,0,0,0.12)", - "0px 4px 5px -2px rgba(0,0,0,0.2),0px 7px 10px 1px rgba(0,0,0,0.14),0px 2px 16px 1px rgba(0,0,0,0.12)", - "0px 5px 5px -3px rgba(0,0,0,0.2),0px 8px 10px 1px rgba(0,0,0,0.14),0px 3px 14px 2px rgba(0,0,0,0.12)", - "0px 5px 6px -3px rgba(0,0,0,0.2),0px 9px 12px 1px rgba(0,0,0,0.14),0px 3px 16px 2px rgba(0,0,0,0.12)", - "0px 6px 6px -3px rgba(0,0,0,0.2),0px 10px 14px 1px rgba(0,0,0,0.14),0px 4px 18px 3px rgba(0,0,0,0.12)", - "0px 6px 7px -4px rgba(0,0,0,0.2),0px 11px 15px 1px rgba(0,0,0,0.14),0px 4px 20px 3px rgba(0,0,0,0.12)", - "0px 7px 8px -4px rgba(0,0,0,0.2),0px 12px 17px 2px rgba(0,0,0,0.14),0px 5px 22px 4px rgba(0,0,0,0.12)", - "0px 7px 8px -4px rgba(0,0,0,0.2),0px 13px 19px 2px rgba(0,0,0,0.14),0px 5px 24px 4px rgba(0,0,0,0.12)", - "0px 7px 9px -4px rgba(0,0,0,0.2),0px 14px 21px 2px rgba(0,0,0,0.14),0px 5px 26px 4px rgba(0,0,0,0.12)", - "0px 8px 9px -5px rgba(0,0,0,0.2),0px 15px 22px 2px rgba(0,0,0,0.14),0px 6px 28px 5px rgba(0,0,0,0.12)", - "0px 8px 10px -5px rgba(0,0,0,0.2),0px 16px 24px 2px rgba(0,0,0,0.14),0px 6px 30px 5px rgba(0,0,0,0.12)", - "0px 8px 11px -5px rgba(0,0,0,0.2),0px 17px 26px 2px rgba(0,0,0,0.14),0px 6px 32px 5px rgba(0,0,0,0.12)", - "0px 9px 11px -5px rgba(0,0,0,0.2),0px 18px 28px 2px rgba(0,0,0,0.14),0px 7px 34px 6px rgba(0,0,0,0.12)", - "0px 9px 12px -6px rgba(0,0,0,0.2),0px 19px 29px 2px rgba(0,0,0,0.14),0px 7px 36px 6px rgba(0,0,0,0.12)", - "0px 10px 13px -6px rgba(0,0,0,0.2),0px 20px 31px 3px rgba(0,0,0,0.14),0px 8px 38px 7px rgba(0,0,0,0.12)", - "0px 10px 13px -6px rgba(0,0,0,0.2),0px 21px 33px 3px rgba(0,0,0,0.14),0px 8px 40px 7px rgba(0,0,0,0.12)", - "0px 10px 14px -6px rgba(0,0,0,0.2),0px 22px 35px 3px rgba(0,0,0,0.14),0px 8px 42px 7px rgba(0,0,0,0.12)", - "0px 11px 14px -7px rgba(0,0,0,0.2),0px 23px 36px 3px rgba(0,0,0,0.14),0px 9px 44px 8px rgba(0,0,0,0.12)", - "0px 11px 15px -7px rgba(0,0,0,0.2),0px 24px 38px 3px rgba(0,0,0,0.14),0px 9px 46px 8px rgba(0,0,0,0.12)", - ], - "shape": Object { - "borderRadius": 4, - }, - "spacing": [Function], - "transitions": Object { - "create": [Function], - "duration": Object { - "complex": 375, - "enteringScreen": 225, - "leavingScreen": 195, - "short": 250, - "shorter": 200, - "shortest": 150, - "standard": 300, - }, - "easing": Object { - "easeIn": "cubic-bezier(0.4, 0, 1, 1)", - "easeInOut": "cubic-bezier(0.4, 0, 0.2, 1)", - "easeOut": "cubic-bezier(0.0, 0, 0.2, 1)", - "sharp": "cubic-bezier(0.4, 0, 0.6, 1)", - }, - "getAutoHeightDuration": [Function], - }, - "typography": Object { - "body1": Object { - "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif", - "fontSize": "1rem", - "fontWeight": 400, - "letterSpacing": "0.00938em", - "lineHeight": 1.5, - }, - "body2": Object { - "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif", - "fontSize": "0.875rem", - "fontWeight": 400, - "letterSpacing": "0.01071em", - "lineHeight": 1.43, - }, - "button": Object { - "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif", - "fontSize": "0.875rem", - "fontWeight": 500, - "letterSpacing": "0.02857em", - "lineHeight": 1.75, - "textTransform": "uppercase", - }, - "caption": Object { - "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif", - "fontSize": "0.75rem", - "fontWeight": 400, - "letterSpacing": "0.03333em", - "lineHeight": 1.66, - }, - "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif", - "fontSize": 14, - "fontWeightBold": 700, - "fontWeightLight": 300, - "fontWeightMedium": 500, - "fontWeightRegular": 400, - "h1": Object { - "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif", - "fontSize": "6rem", - "fontWeight": 300, - "letterSpacing": "-0.01562em", - "lineHeight": 1.167, - }, - "h2": Object { - "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif", - "fontSize": "3.75rem", - "fontWeight": 300, - "letterSpacing": "-0.00833em", - "lineHeight": 1.2, - }, - "h3": Object { - "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif", - "fontSize": "3rem", - "fontWeight": 400, - "letterSpacing": "0em", - "lineHeight": 1.167, - }, - "h4": Object { - "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif", - "fontSize": "2.125rem", - "fontWeight": 400, - "letterSpacing": "0.00735em", - "lineHeight": 1.235, - }, - "h5": Object { - "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif", - "fontSize": "1.5rem", - "fontWeight": 400, - "letterSpacing": "0em", - "lineHeight": 1.334, - }, - "h6": Object { - "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif", - "fontSize": "1.25rem", - "fontWeight": 500, - "letterSpacing": "0.0075em", - "lineHeight": 1.6, - }, - "htmlFontSize": 16, - "overline": Object { - "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif", - "fontSize": "0.75rem", - "fontWeight": 400, - "letterSpacing": "0.08333em", - "lineHeight": 2.66, - "textTransform": "uppercase", - }, - "pxToRem": [Function], - "round": [Function], - "subtitle1": Object { - "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif", - "fontSize": "1rem", - "fontWeight": 400, - "letterSpacing": "0.00938em", - "lineHeight": 1.75, - }, - "subtitle2": Object { - "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif", - "fontSize": "0.875rem", - "fontWeight": 500, - "letterSpacing": "0.00714em", - "lineHeight": 1.57, - }, - }, - "zIndex": Object { - "appBar": 1100, - "drawer": 1200, - "mobileStepper": 1000, - "modal": 1300, - "snackbar": 1400, - "speedDial": 1050, - "tooltip": 1500, - }, - }, - "name": "MuiBackdrop", - }, - "propTypes": Object { - "classes": [Function], - "innerRef": [Function], - }, - "render": [Function], - "useStyles": [Function], - } - } - BackdropProps={ - Object { - "transitionDuration": Object { - "enter": 225, - "exit": 195, - }, - } - } - className="MuiDialog-root modal-root" - closeAfterTransition={true} - disableEscapeKeyDown={false} - onClose={[Function]} - open={false} - /> - </ForwardRef(Dialog)> - </WithStyles(ForwardRef(Dialog))> - </LegalNoticeModal> + dataShare.button_accept + </span> + </button> </div> - </TermsView> -</Provider> + </div> +</div> `; diff --git a/yarn.lock b/yarn.lock index 26a9cd54951874e33da9145762c5564230895411..e0265d44fa9babf79e67cafa1666c46c9849ae70 100644 --- a/yarn.lock +++ b/yarn.lock @@ -2671,7 +2671,7 @@ dependencies: "@babel/types" "^7.3.0" -"@types/cheerio@*", "@types/cheerio@^0.22.22": +"@types/cheerio@*": version "0.22.31" resolved "https://registry.yarnpkg.com/@types/cheerio/-/cheerio-0.22.31.tgz#b8538100653d6bb1b08a1e46dec75b4f2a5d5eb6" integrity sha512-Kt7Cdjjdi2XWSfrZ53v4Of0wG3ZcmaegFXjMmz9tfNrZSkzzo36G0AL1YqSdcIA78Etjt6E609pt5h1xnQkPUw== @@ -7656,15 +7656,6 @@ enzyme-shallow-equal@^1.0.5: has "^1.0.3" object-is "^1.1.5" -enzyme-to-json@^3.6.2: - version "3.6.2" - resolved "https://registry.yarnpkg.com/enzyme-to-json/-/enzyme-to-json-3.6.2.tgz#94f85c413bcae8ab67be53b0a94b69a560e27823" - integrity sha512-Ynm6Z6R6iwQ0g2g1YToz6DWhxVnt8Dy1ijR2zynRKxTyBGA8rCDXU3rs2Qc4OKvUvc2Qoe1bcFK6bnPs20TrTg== - dependencies: - "@types/cheerio" "^0.22.22" - lodash "^4.17.21" - react-is "^16.12.0" - enzyme@3.11.0: version "3.11.0" resolved "https://registry.yarnpkg.com/enzyme/-/enzyme-3.11.0.tgz#71d680c580fe9349f6f5ac6c775bc3e6b7a79c28" @@ -14858,7 +14849,7 @@ react-inspector@^5.1: is-dom "^1.0.0" prop-types "^15.0.0" -react-is@^16.12.0, react-is@^16.13.1, react-is@^16.6.0, react-is@^16.7.0, react-is@^16.8.1, react-is@^16.8.6: +react-is@^16.13.1, react-is@^16.6.0, react-is@^16.7.0, react-is@^16.8.1, react-is@^16.8.6: version "16.13.1" resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.13.1.tgz#789729a4dc36de2999dc156dd6c1d9c18cea56a4" integrity sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==