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 (
<>
- Open Modal
+
+ Open Modal
+
{
- Open Modal with Form
+
+ Open Modal with Form
+
@@ -192,7 +196,9 @@ const ModalDefault = () => {
- Open Modal with Dropdown
+
+ Open Modal with Dropdown
+
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 (
<>
- Open Modal
+
+ Open Modal
+
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 (
<>
- Open Modal
+
+ Open Modal
+
{
return (
<>
- Open Modal with Long Content
+
+ Open Modal with Long Content
+
@@ -126,7 +128,9 @@ const ModalScrollingLongContent = () => {
- Open Modal with Scrolling Inside
+
+ Open Modal with Scrolling Inside
+
@@ -165,7 +169,9 @@ const ModalScrollingLongContent = () => {
- Open Modal with ScrollView
+
+ Open Modal with ScrollView
+
@@ -194,7 +200,9 @@ const ModalScrollingLongContent = () => {
- Open Modal with Custom Height
+
+ Open Modal with Custom Height
+
{
return (
<>
- Open Modal
+
+ Open Modal
+
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 @@
-
+
Open Modal
@@ -63,7 +63,7 @@
-
+
Open Modal with Form
@@ -97,7 +97,7 @@
-
+
Open Modal with Dropdown
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 @@
-
+
Open Modal
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 @@
-
+
Open Modal
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 @@
-
+
Open Modal with Long Content
@@ -38,7 +38,7 @@
-
+
Open Modal with Scrolling Inside
@@ -92,7 +92,7 @@
-
+
Open Modal with ScrollView
@@ -167,7 +167,7 @@
-
+
Open Modal with Custom Height
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 @@
-
+
Open Modal
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 @@
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 @@
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 @@
perferendis reprehenderit, voluptate. Cum delectus dicta ducimus eligendi excepturi natus perferendis
provident unde. Eveniet, iste, molestiae?
-
+
-
+
Action
@@ -377,6 +380,7 @@
Scrolling Long Content
data-spirit-target="#example-long-content"
aria-controls="example-long-content"
aria-expanded="false"
+ data-test-id="modal-with-long-content"
>
Open Modal with Long Content
@@ -461,6 +465,7 @@