From e870a0c3739df36b3fa56ba83143cfdc2de3d115 Mon Sep 17 00:00:00 2001 From: Bastien DUMONT <bdumont@grandlyon.com> Date: Thu, 16 Nov 2023 14:03:28 +0000 Subject: [PATCH] test(rtl): update all snapshots --- .vscode/settings.json | 1 + package.json | 1 - .../ExpiredConsentModal.spec.tsx | 13 +- .../ExpiredConsentModal.spec.tsx.snap | 134 +- .../DeleteGRDFAccountModal.spec.tsx | 4 +- .../DeleteGRDFAccountModal.spec.tsx.snap | 136 +- .../NoDataModal.spec.tsx | 4 +- .../__snapshots__/NoDataModal.spec.tsx.snap | 126 +- .../DateNavigator/DateNavigator.spec.tsx | 2 +- .../Duel/DuelError/DuelError.spec.tsx | 6 +- .../__snapshots__/DuelError.spec.tsx.snap | 40 +- .../DuelResultModal/DuelResultModal.spec.tsx | 9 +- .../DuelResultModal.spec.tsx.snap | 1121 +------- .../__snapshots__/lastDuelModal.spec.tsx.snap | 958 +------ .../Duel/LastDuelModal/lastDuelModal.spec.tsx | 11 +- .../EcogestureCard/EcogestureCard.spec.tsx | 8 +- .../EcogestureCard.spec.tsx.snap | 493 +--- .../EcogestureEmptyList.spec.tsx | 6 +- .../EcogestureEmptyList.spec.tsx.snap | 332 +-- .../EcogestureInitModal.spec.tsx | 6 +- .../EcogestureInitModal.spec.tsx.snap | 1218 +------- .../EcogestureList/EcogestureList.spec.tsx | 7 +- .../EcogestureList.spec.tsx.snap | 2120 +------------- .../EcogestureNotFound.spec.tsx | 7 +- .../EcogestureNotFound.spec.tsx.snap | 195 +- .../EcogestureReinitModal.spec.tsx | 7 +- .../EcogestureReinitModal.spec.tsx.snap | 1310 +-------- .../Ecogesture/EcogestureTabsView.spec.tsx | 11 +- .../EfficiencyRating.spec.tsx | 7 +- .../EfficiencyRating.spec.tsx.snap | 218 +- .../Ecogesture/SingleEcogestureView.spec.tsx | 8 +- .../EcogestureTabsView.spec.tsx.snap | 2543 ++--------------- .../SingleEcogestureView.spec.tsx.snap | 655 +---- .../EcogestureFormEquipment.spec.tsx | 6 +- .../EcogestureFormEquipment.spec.tsx.snap | 2532 ++-------------- .../EcogestureFormSingleChoice.spec.tsx | 7 +- .../EcogestureFormSingleChoice.spec.tsx.snap | 373 +-- .../EcogestureFormView.spec.tsx | 7 +- .../EcogestureLaunchFormModal.spec.tsx | 6 +- .../EcogestureLaunchFormModal.spec.tsx.snap | 1037 +------ .../EquipmentIcon/EquipmentIcon.spec.tsx | 8 +- .../__snapshots__/EquipmentIcon.spec.tsx.snap | 42 +- .../EcogestureFormView.spec.tsx.snap | 378 +-- .../EcogestureSelectionDetail.spec.tsx | 9 +- .../EcogestureSelectionDetail.spec.tsx.snap | 830 +----- .../EcogestureSelectionEnd.spec.tsx | 6 +- .../EcogestureSelectionEnd.spec.tsx.snap | 191 +- .../EcogestureSelectionModal.spec.tsx | 6 +- .../EcogestureSelectionModal.spec.tsx.snap | 1037 +------ .../EcogestureSelectionRestart.spec.tsx | 6 +- .../EcogestureSelectionRestart.spec.tsx.snap | 328 +-- .../EcogestureSelectionView.spec.tsx | 8 +- .../EcogestureSelectionView.spec.tsx.snap | 101 +- .../Exploration/ExplorationError.spec.tsx | 7 +- .../ExplorationError.spec.tsx.snap | 33 +- .../Feedback/FeedbackModal.spec.tsx | 6 +- .../__snapshots__/FeedbackModal.spec.tsx.snap | 1280 +-------- .../HalfHourNoData/HalfHourNoData.spec.tsx | 6 +- .../HalfHourNoData.spec.tsx.snap | 15 +- .../TimeStepSelector.spec.tsx | 11 +- .../TimeStepSelector/TimeStepSelector.tsx | 1 - .../TimeStepSelector.spec.tsx.snap | 305 +- src/components/Header/CozyBar.spec.tsx | 37 +- .../__snapshots__/CozyBar.spec.tsx.snap | 1007 +------ .../ConnectionNotFound.spec.tsx | 7 +- .../ConnectionNotFound.spec.tsx.snap | 42 +- .../Konnector/KonnectorModal.spec.tsx | 6 +- .../Konnector/KonnectorModalFooter.spec.tsx | 6 +- .../Konnector/KonnectorViewerList.spec.tsx | 8 +- .../KonnectorModal.spec.tsx.snap | 1157 ++------ .../KonnectorModalFooter.spec.tsx.snap | 166 +- .../KonnectorViewerList.spec.tsx.snap | 560 +--- src/components/Loader/Loader.spec.tsx | 19 +- .../Loader/__snapshots__/Loader.spec.tsx.snap | 104 +- .../Options/ExportData/ExportData.spec.tsx | 8 +- .../exportDoneModal.spec.tsx.snap | 2285 ++------------- .../exportLoadingModal.spec.tsx.snap | 1108 +------ .../exportStartModal.spec.tsx.snap | 1256 +------- .../Modals/exportDoneModal.spec.tsx | 10 +- .../Modals/exportLoadingModal.spec.tsx | 6 +- .../Modals/exportStartModal.spec.tsx | 6 +- .../__snapshots__/ExportData.spec.tsx.snap | 1621 +---------- .../Options/GCU/GCUContent.spec.tsx | 6 +- src/components/Options/GCU/GCULink.spec.tsx | 11 +- src/components/Options/GCU/GCUView.spec.tsx | 6 +- .../__snapshots__/GCUContent.spec.tsx.snap | 546 ++-- .../GCU/__snapshots__/GCULink.spec.tsx.snap | 61 +- .../GCU/__snapshots__/GCUView.spec.tsx.snap | 290 +- .../LegalNotice/LegalNoticeContent.spec.tsx | 6 +- .../LegalNotice/LegalNoticeLink.spec.tsx | 11 +- .../LegalNotice/LegalNoticeView.spec.tsx | 6 +- .../LegalNoticeContent.spec.tsx.snap | 115 +- .../LegalNoticeLink.spec.tsx.snap | 54 +- .../LegalNoticeView.spec.tsx.snap | 276 +- .../MatomoOptOut/MatomoOptOut.spec.tsx | 6 +- .../__snapshots__/MatomoOptOut.spec.tsx.snap | 28 +- src/components/Options/OptionsView.spec.tsx | 20 +- .../Unsubscribe/UnSubscribeView.spec.tsx | 6 +- .../UnSubscribeView.spec.tsx.snap | 249 +- .../Options/Version/Version.spec.tsx | 6 +- .../__snapshots__/Version.spec.tsx.snap | 10 +- .../__snapshots__/OptionsView.spec.tsx.snap | 397 ++- src/components/Splash/SplashRoot.spec.tsx | 10 +- src/components/Splash/SplashScreen.spec.tsx | 7 +- .../Splash/SplashScreenError.spec.tsx | 6 +- .../__snapshots__/SplashRoot.spec.tsx.snap | 95 +- .../__snapshots__/SplashScreen.spec.tsx.snap | 26 +- .../SplashScreenError.spec.tsx.snap | 193 +- src/components/Terms/CGUModal.spec.tsx | 7 +- .../Terms/DataShareConsentContent.spec.tsx | 11 +- .../Terms/LegalNoticeModal.spec.tsx | 7 +- .../Terms/MinorUpdateContent.spec.tsx | 7 +- src/components/Terms/TermsView.spec.tsx | 6 +- .../__snapshots__/CGUModal.spec.tsx.snap | 1823 +++--------- .../DataShareConsentContent.spec.tsx.snap | 382 ++- .../LegalNoticeModal.spec.tsx.snap | 1788 +++--------- .../MinorUpdateContent.spec.tsx.snap | 10 +- .../__snapshots__/TermsView.spec.tsx.snap | 1396 ++------- yarn.lock | 13 +- 119 files changed, 6290 insertions(+), 31325 deletions(-) diff --git a/.vscode/settings.json b/.vscode/settings.json index 3ca992d4a..bebf60a86 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 790f8c1c0..776b16ee9 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 ab0df6dcc..cf6cc0050 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 f600c7c13..63df43d81 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 a2dc737be..9826c86b3 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 fccb539c7..e5abef428 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 50e7cddf1..c9ff69e65 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 051488da0..971b2e6f4 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 4f26b7be1..1708d74e8 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 c8763df63..7e2f3d3ee 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 9274f35b2..4680b10b3 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 4a73f4cf3..e107a1188 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 f8d9e72b6..aa23ded2d 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 7d00ebf2f..94080d04d 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 ed1f8b01b..b2496be0e 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 d00c057dc..4bb4deaf4 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 4651aef74..3096c7c18 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 f1681bd29..650084258 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 ed4aae32b..3fcc1897f 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 7f0411500..dde721578 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 60906791e..553d5fd25 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 ca1e30237..c6be11ce1 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 f5da3ffbc..536577972 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 2fda3b550..60e0cfa1f 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 3c2efdfc0..a991c215c 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 5f9148b03..a37d0c48f 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 a34f440cd..18d92802a 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 f9eb724da..4f90bd9c3 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 0ac6b73e5..17445f094 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 9b1d8405a..8ffd02507 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 6f96223ab..a2ec8525d 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 ba9558c10..e8cc3b0ab 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 11cde2636..ef9a7d029 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 e90b2a645..3d073c2f2 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 b15399a11..ed0bc90c2 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 3d97bafc6..618a3ee2b 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 05bb4e680..cc1a10027 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 35e92dd4a..dd3ed4485 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 1efe25a5e..c52279528 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 ca980750b..2516ca2ce 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 7fe4d6d3d..f4eae1aac 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 e5aad8d5b..342bc0c02 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 2c57d7f96..b759c1dab 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 4b3e8cc5e..98fd1a477 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 1dbe3c0aa..7e62bb3a0 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 b6359dd88..31f5647c2 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 0879e9c3a..c7fc88998 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 b2f3141ca..a8d883f8a 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 c15aa65d3..e51d81a0e 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 08bc2048c..45ff77212 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 fb482cd55..36c87d859 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 ad65360fb..7c2706b21 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 ed9d0311c..d27b25cb7 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 4ea8699db..aad23a7e2 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 0a84c75a2..da3fe125e 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 3bbc892cb..3efbb966a 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 988d984a7..9a26cb883 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 5b817591b..1537a11b7 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 ef55e75a7..af114a46a 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 25c2672cc..39da0b310 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 06bdfd8b0..d5d59d534 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 1ab4cc180..bd50699f8 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 274a14b02..3f747796d 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 203c46d61..62521bfb1 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 833e33dc1..1d4cf06cb 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 fcb5b5598..e3e1d23e5 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 16058156c..cc72f6b71 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 23b1774e1..6812381cb 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 d5039d191..810bd21bb 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 7fa1dbb16..e4f491c98 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 2ac0af5a0..a81d85dde 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 629544027..8fd0a567d 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 91618983d..7de46f26c 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 e33f3c5b6..55a94f707 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 3afe225ce..b60d9054d 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 9a0cb334d..565c7d0f4 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 6ed914e55..523b4daa5 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 2e7737e98..dcd482806 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 1120b2a2e..900cf07ee 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 f5496cf07..7825cae49 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 e34dfe5a8..90c9fd18b 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 eb5007194..7bfb4b788 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 2bc41f57b..d504d3c12 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 f3cb6b4f3..9de09ea7b 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 9692ba84b..43396b90d 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 93d8846db..dfdcf4910 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 49b15ee33..915df297b 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 da0d5940a..f5c466c4d 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 55cbffee7..6ceff8339 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 190508b0a..c6e8e2451 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 247058c8f..454e91fb3 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 322cf9fb6..41ea85638 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 a6183e10d..f75c9392a 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 e3e3b81e1..f236decc8 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 ad9864f10..3199d0c5f 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 1ac1911b5..4e821bbf7 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 d0a1f04c6..3f42b730e 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 55ada4892..55ca9b331 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 1a68fd6dd..85efc0cad 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 9165d73f9..0c8640bf8 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 05ce42fbf..9cb6b48f2 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 5417b1055..f4e64582f 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 55bce081c..0f27dbc19 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 2277171e6..a8c692fbc 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 4f44a4380..fdc4e5fa5 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 e08db15ef..b0bdc3fbd 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 089fbbee7..ac994b787 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 21c1c6a7c..d3da35f44 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 8e54916bc..12f008ce0 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 e2653b92a..d2e1baab7 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 1c8144711..227d9c68e 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 01cc23253..f6552d6cb 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 970a43b47..d5206d463 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 15dfa6bd8..a2fff83b0 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 e73f9fe28..69141d053 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 7cd02919b..2f134b674 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 46848ba3d..2d4484bee 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 c1e2539f8..0783bbe8b 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 26a9cd549..e0265d44f 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== -- GitLab