From 93a4b08a0eb8e47f351da4c1d4f670eeb00b58e0 Mon Sep 17 00:00:00 2001 From: Pavel Klibani Date: Wed, 17 Jul 2024 19:32:46 +0200 Subject: [PATCH] Test(e2e): Create test for opened Modal components - solves DS-1247 --- packages/web-react/scripts/entryPoints.js | 1 + .../components/Modal/demo/ModalDefault.tsx | 14 ++- .../Modal/demo/ModalDisabledBackdropClick.tsx | 4 +- .../Modal/demo/ModalHiddenCloseButton.tsx | 4 +- .../Modal/demo/ModalScrollingLongContent.tsx | 16 ++- .../components/Modal/demo/ModalStacking.tsx | 4 +- .../Modal/stories/ModalDefault.twig | 6 +- .../stories/ModalDisabledBackdropClick.twig | 2 +- .../Modal/stories/ModalHiddenCloseButton.twig | 2 +- .../stories/ModalScrollingLongContent.twig | 8 +- .../Modal/stories/ModalStacking.twig | 2 +- .../web/src/scss/components/Modal/index.html | 14 ++- .../e2e/components/demo-modal-compare.spec.ts | 112 ++++++++++++++++++ .../modal-basic-chromium-linux.png | Bin 0 -> 114612 bytes .../modal-closed-modals-chromium-linux.png | Bin 0 -> 61609 bytes ...disabled-backdrop-click-chromium-linux.png | Bin 0 -> 93447 bytes ...dal-hidden-close-button-chromium-linux.png | Bin 0 -> 92494 bytes .../modal-stacking-chromium-linux.png | Bin 0 -> 144308 bytes ...odal-with-custom-height-chromium-linux.png | Bin 0 -> 101877 bytes .../modal-with-dropdown-chromium-linux.png | Bin 0 -> 101032 bytes .../modal-with-form-chromium-linux.png | Bin 0 -> 84532 bytes ...modal-with-long-content-chromium-linux.png | Bin 0 -> 163901 bytes ...l-with-scrolling-inside-chromium-linux.png | Bin 0 -> 140073 bytes .../modal-with-scrollview-chromium-linux.png | Bin 0 -> 137557 bytes tests/e2e/demo-components-compare.spec.ts | 60 ++++------ tests/helpers/formatPackageName.ts | 5 + tests/helpers/getServerUrl.ts | 7 ++ tests/helpers/index.ts | 4 + tests/helpers/takeScreenshot.ts | 14 +++ tests/helpers/waitForPageLoad.ts | 15 +++ 30 files changed, 235 insertions(+), 59 deletions(-) create mode 100644 tests/e2e/components/demo-modal-compare.spec.ts create mode 100644 tests/e2e/components/demo-modal-compare.spec.ts-snapshots/modal-basic-chromium-linux.png create mode 100644 tests/e2e/components/demo-modal-compare.spec.ts-snapshots/modal-closed-modals-chromium-linux.png create mode 100644 tests/e2e/components/demo-modal-compare.spec.ts-snapshots/modal-disabled-backdrop-click-chromium-linux.png create mode 100644 tests/e2e/components/demo-modal-compare.spec.ts-snapshots/modal-hidden-close-button-chromium-linux.png create mode 100644 tests/e2e/components/demo-modal-compare.spec.ts-snapshots/modal-stacking-chromium-linux.png create mode 100644 tests/e2e/components/demo-modal-compare.spec.ts-snapshots/modal-with-custom-height-chromium-linux.png create mode 100644 tests/e2e/components/demo-modal-compare.spec.ts-snapshots/modal-with-dropdown-chromium-linux.png create mode 100644 tests/e2e/components/demo-modal-compare.spec.ts-snapshots/modal-with-form-chromium-linux.png create mode 100644 tests/e2e/components/demo-modal-compare.spec.ts-snapshots/modal-with-long-content-chromium-linux.png create mode 100644 tests/e2e/components/demo-modal-compare.spec.ts-snapshots/modal-with-scrolling-inside-chromium-linux.png create mode 100644 tests/e2e/components/demo-modal-compare.spec.ts-snapshots/modal-with-scrollview-chromium-linux.png create mode 100644 tests/helpers/formatPackageName.ts create mode 100644 tests/helpers/getServerUrl.ts create mode 100644 tests/helpers/index.ts create mode 100644 tests/helpers/takeScreenshot.ts create mode 100644 tests/helpers/waitForPageLoad.ts diff --git a/packages/web-react/scripts/entryPoints.js b/packages/web-react/scripts/entryPoints.js index 49767f4e54..ac5baa692c 100644 --- a/packages/web-react/scripts/entryPoints.js +++ b/packages/web-react/scripts/entryPoints.js @@ -52,6 +52,7 @@ const entryPoints = [ { dirs: ['components', 'UNSTABLE_PartnerLogo'] }, { dirs: ['components', 'UNSTABLE_ProductLogo'] }, { dirs: ['components', 'UNSTABLE_Slider'] }, + { dirs: ['components', 'UNSTABLE_Truncate'] }, { dirs: ['components', 'VisuallyHidden'] }, ]; diff --git a/packages/web-react/src/components/Modal/demo/ModalDefault.tsx b/packages/web-react/src/components/Modal/demo/ModalDefault.tsx index ce0acc444a..d7bce0026e 100644 --- a/packages/web-react/src/components/Modal/demo/ModalDefault.tsx +++ b/packages/web-react/src/components/Modal/demo/ModalDefault.tsx @@ -25,7 +25,7 @@ const ModalDefault = () => { const [footerAlign, setFooterAlign] = useState(AlignmentX.RIGHT); const [isDockedOnMobile, setIsDockedOnMobile] = useState(false); const [isDropdownOpen, setIsDropdownOpen] = useState(false); - const [isExpandedOnMobile, setIsExpandedOnMobile] = useState(false); + const [isExpandedOnMobile, setIsExpandedOnMobile] = useState(true); const [isScrollable, setIsScrollable] = useState(false); const toggleModalBasic = () => setModalBasicOpen(!isModalBasicOpen); @@ -53,7 +53,9 @@ const ModalDefault = () => { return ( <> - + { - + @@ -192,7 +196,9 @@ const ModalDefault = () => { - + diff --git a/packages/web-react/src/components/Modal/demo/ModalDisabledBackdropClick.tsx b/packages/web-react/src/components/Modal/demo/ModalDisabledBackdropClick.tsx index 3748b74a09..ed0315f211 100644 --- a/packages/web-react/src/components/Modal/demo/ModalDisabledBackdropClick.tsx +++ b/packages/web-react/src/components/Modal/demo/ModalDisabledBackdropClick.tsx @@ -8,7 +8,9 @@ const ModalDisabledBackdropClick = () => { return ( <> - + diff --git a/packages/web-react/src/components/Modal/demo/ModalHiddenCloseButton.tsx b/packages/web-react/src/components/Modal/demo/ModalHiddenCloseButton.tsx index 3a171ff1ab..6bde7b1371 100644 --- a/packages/web-react/src/components/Modal/demo/ModalHiddenCloseButton.tsx +++ b/packages/web-react/src/components/Modal/demo/ModalHiddenCloseButton.tsx @@ -13,7 +13,9 @@ const ModalHiddenCloseButton = () => { return ( <> - + { return ( <> - + @@ -126,7 +128,9 @@ const ModalScrollingLongContent = () => { - + @@ -165,7 +169,9 @@ const ModalScrollingLongContent = () => { - + @@ -194,7 +200,9 @@ const ModalScrollingLongContent = () => { - + { return ( <> - + diff --git a/packages/web-twig/src/Resources/components/Modal/stories/ModalDefault.twig b/packages/web-twig/src/Resources/components/Modal/stories/ModalDefault.twig index 2bbf11979d..247661b735 100644 --- a/packages/web-twig/src/Resources/components/Modal/stories/ModalDefault.twig +++ b/packages/web-twig/src/Resources/components/Modal/stories/ModalDefault.twig @@ -1,4 +1,4 @@ - @@ -63,7 +63,7 @@ - @@ -97,7 +97,7 @@ - diff --git a/packages/web-twig/src/Resources/components/Modal/stories/ModalDisabledBackdropClick.twig b/packages/web-twig/src/Resources/components/Modal/stories/ModalDisabledBackdropClick.twig index 7dd8c64179..484526b35f 100644 --- a/packages/web-twig/src/Resources/components/Modal/stories/ModalDisabledBackdropClick.twig +++ b/packages/web-twig/src/Resources/components/Modal/stories/ModalDisabledBackdropClick.twig @@ -1,4 +1,4 @@ - diff --git a/packages/web-twig/src/Resources/components/Modal/stories/ModalHiddenCloseButton.twig b/packages/web-twig/src/Resources/components/Modal/stories/ModalHiddenCloseButton.twig index 3149b1412a..458fb75624 100644 --- a/packages/web-twig/src/Resources/components/Modal/stories/ModalHiddenCloseButton.twig +++ b/packages/web-twig/src/Resources/components/Modal/stories/ModalHiddenCloseButton.twig @@ -1,4 +1,4 @@ - diff --git a/packages/web-twig/src/Resources/components/Modal/stories/ModalScrollingLongContent.twig b/packages/web-twig/src/Resources/components/Modal/stories/ModalScrollingLongContent.twig index 039a33f38b..0600f34555 100644 --- a/packages/web-twig/src/Resources/components/Modal/stories/ModalScrollingLongContent.twig +++ b/packages/web-twig/src/Resources/components/Modal/stories/ModalScrollingLongContent.twig @@ -1,4 +1,4 @@ - @@ -38,7 +38,7 @@ - @@ -92,7 +92,7 @@ - @@ -167,7 +167,7 @@ - diff --git a/packages/web-twig/src/Resources/components/Modal/stories/ModalStacking.twig b/packages/web-twig/src/Resources/components/Modal/stories/ModalStacking.twig index b0bf483807..5af3506fc3 100644 --- a/packages/web-twig/src/Resources/components/Modal/stories/ModalStacking.twig +++ b/packages/web-twig/src/Resources/components/Modal/stories/ModalStacking.twig @@ -1,4 +1,4 @@ - diff --git a/packages/web/src/scss/components/Modal/index.html b/packages/web/src/scss/components/Modal/index.html index d97cc72dac..fc75e39339 100644 --- a/packages/web/src/scss/components/Modal/index.html +++ b/packages/web/src/scss/components/Modal/index.html @@ -55,6 +55,7 @@

Modal

data-spirit-target="#example-basic" aria-controls="example-basic" aria-expanded="false" + data-test-id="modal-basic" > Open Modal @@ -191,6 +192,7 @@

Modal Title

data-spirit-target="#example-form" aria-controls="example-form" aria-expanded="false" + data-test-id="modal-with-form" > Open Modal with Form @@ -265,6 +267,7 @@

Modal with a Form

data-spirit-target="#example-dropdown" aria-controls="example-dropdown" aria-expanded="false" + data-test-id="modal-with-dropdown" > Open Modal with Dropdown @@ -302,7 +305,7 @@

Modal Title

perferendis reprehenderit, voluptate. Cum delectus dicta ducimus eligendi excepturi natus perferendis provident unde. Eveniet, iste, molestiae?

-