From 280734697358a9196f4303da4f04be9259b6484e Mon Sep 17 00:00:00 2001 From: Pavel Klibani Date: Wed, 17 Jul 2024 19:32:46 +0200 Subject: [PATCH] Feat(e2e): Create test for opened Modal components - solves DS-1247 --- .../components/Modal/demo/ModalDefault.tsx | 10 +- .../Modal/demo/ModalHiddenCloseButton.tsx | 4 +- .../components/Modal/demo/ModalStacking.tsx | 4 +- .../Modal/stories/ModalDefault.twig | 4 +- .../Modal/stories/ModalHiddenCloseButton.twig | 2 +- .../Modal/stories/ModalStacking.twig | 2 +- .../web/src/scss/components/Modal/index.html | 46 ++++---- .../fileuploader-chromium-linux.png | Bin 321648 -> 287716 bytes .../web-chromium-linux.png | Bin 93174 -> 92552 bytes .../web-react-chromium-linux.png | Bin 98781 -> 94289 bytes tests/e2e/demo-modal-compare.spec.ts | 100 ++++++++++++++++++ .../modal-basic-chromium-linux.png | Bin 0 -> 114612 bytes .../modal-closed-modals-chromium-linux.png | Bin 0 -> 61609 bytes ...dal-hidden-close-button-chromium-linux.png | Bin 0 -> 92494 bytes .../modal-stacking-chromium-linux.png | Bin 0 -> 144308 bytes .../modal-with-dropdown-chromium-linux.png | Bin 0 -> 101032 bytes 16 files changed, 143 insertions(+), 29 deletions(-) create mode 100644 tests/e2e/demo-modal-compare.spec.ts create mode 100644 tests/e2e/demo-modal-compare.spec.ts-snapshots/modal-basic-chromium-linux.png create mode 100644 tests/e2e/demo-modal-compare.spec.ts-snapshots/modal-closed-modals-chromium-linux.png create mode 100644 tests/e2e/demo-modal-compare.spec.ts-snapshots/modal-hidden-close-button-chromium-linux.png create mode 100644 tests/e2e/demo-modal-compare.spec.ts-snapshots/modal-stacking-chromium-linux.png create mode 100644 tests/e2e/demo-modal-compare.spec.ts-snapshots/modal-with-dropdown-chromium-linux.png diff --git a/packages/web-react/src/components/Modal/demo/ModalDefault.tsx b/packages/web-react/src/components/Modal/demo/ModalDefault.tsx index ce0acc444a..8a04f5120f 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 ( <> - + { - + diff --git a/packages/web-react/src/components/Modal/demo/ModalHiddenCloseButton.tsx b/packages/web-react/src/components/Modal/demo/ModalHiddenCloseButton.tsx index 3a171ff1ab..edebe53081 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 ( <> - + 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..3e1f71297c 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 @@ - @@ -97,7 +97,7 @@ - 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..38874dcf9a 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/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..aebdc6c7ab 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="basic-modal" > Open Modal @@ -265,6 +266,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 @@ -303,26 +305,28 @@

Modal Title

provident unde. Eveniet, iste, molestiae?