Test(e2e): Create test for opened Modal components

- solves DS-1247

packages/web-react/src/components/Modal/demo/ModalDefault.tsx

@@ -25,7 +25,7 @@ const ModalDefault = () => {
   const [footerAlign, setFooterAlign] = useState<AlignmentXDictionaryType>(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 (
     <>
-      <Button onClick={toggleModalBasic}>Open Modal</Button>
+      <Button onClick={toggleModalBasic} data-test-id="basic-modal">
+        Open Modal
+      </Button>
 
       <Modal alignmentY={modalAlign} id="example-basic" isOpen={isModalBasicOpen} onClose={handleModalBasicClose}>
         <ModalDialog
@@ -192,7 +194,9 @@ const ModalDefault = () => {
         </ModalDialog>
       </Modal>
 
-      <Button onClick={toggleModalWithDropdown}>Open Modal with Dropdown</Button>
+      <Button onClick={toggleModalWithDropdown} data-test-id="modal-with-dropdown">
+        Open Modal with Dropdown
+      </Button>
 
       <Modal id="example-dropdown" isOpen={isModalWithDropdownOpen} onClose={handleModalWithDropdownClose}>
         <ModalDialog>

packages/web-react/src/components/Modal/demo/ModalHiddenCloseButton.tsx

@@ -13,7 +13,9 @@ const ModalHiddenCloseButton = () => {
 
   return (
     <>
-      <Button onClick={isOpenToggle}>Open Modal</Button>
+      <Button onClick={isOpenToggle} data-test-id="hidden-close-button">
+        Open Modal
+      </Button>
 
       <Modal
         id="example-hidden-close-button"

packages/web-react/src/components/Modal/demo/ModalStacking.tsx

@@ -13,7 +13,9 @@ const ModalStacking = () => {
 
   return (
     <>
-      <Button onClick={toggleFirstModal}>Open Modal</Button>
+      <Button onClick={toggleFirstModal} data-test-id="modal-stacking">
+        Open Modal
+      </Button>
 
       <Modal id="example-stacking-parent" isOpen={isFirstOpen} onClose={handleFirstClose}>
         <ModalDialog>

packages/web-twig/src/Resources/components/Modal/stories/ModalDefault.twig

@@ -1,4 +1,4 @@
-<Button data-spirit-toggle="modal" data-spirit-target="#example-basic">
+<Button data-spirit-toggle="modal" data-spirit-target="#example-basic" data-test-id="basic-modal">
     Open Modal
 </Button>
 
@@ -97,7 +97,7 @@
     </ModalDialog>
 </Modal>
 
-<Button data-spirit-toggle="modal" data-spirit-target="#example-dropdown">
+<Button data-spirit-toggle="modal" data-spirit-target="#example-dropdown" data-test-id="modal-with-dropdown">
     Open Modal with Dropdown
 </Button>
 

packages/web-twig/src/Resources/components/Modal/stories/ModalHiddenCloseButton.twig

@@ -1,4 +1,4 @@
-<Button data-spirit-toggle="modal" data-spirit-target="#example-hidden-close-button">
+<Button data-spirit-toggle="modal" data-spirit-target="#example-hidden-close-button" data-test-id="hidden-close-button">
     Open Modal
 </Button>
 

packages/web-twig/src/Resources/components/Modal/stories/ModalStacking.twig

@@ -1,4 +1,4 @@
-<Button data-spirit-toggle="modal" data-spirit-target="#example-stacking-parent">
+<Button data-spirit-toggle="modal" data-spirit-target="#example-stacking-parent" data-test-id="modal-stacking">
     Open Modal
 </Button>
 

packages/web/src/scss/components/Modal/index.html

@@ -55,6 +55,7 @@ <h2 class="docs-Heading">Modal</h2>
       data-spirit-target="#example-basic"
       aria-controls="example-basic"
       aria-expanded="false"
+      data-test-id="basic-modal"
     >
       Open Modal
     </button>
@@ -265,6 +266,7 @@ <h2 id="example-form-title" class="ModalHeader__title">Modal with a Form</h2>
       data-spirit-target="#example-dropdown"
       aria-controls="example-dropdown"
       aria-expanded="false"
+      data-test-id="modal-with-dropdown"
     >
       Open Modal with Dropdown
     </button>
@@ -303,26 +305,28 @@ <h2 id="example-dropdown-title" class="ModalHeader__title">Modal Title</h2>
             provident unde. Eveniet, iste, molestiae?
           </p>
           <div class="DropdownWrapper">
-            <button
-              type="button"
-              data-spirit-toggle="dropdown"
-              data-spirit-target="#dropdown-in-modal"
-              class="Button Button--secondary Button--medium"
-              aria-expanded="false"
-              aria-controls="dropdown-in-modal"
-            >
-              Dropdown
-            </button>
-            <div class="Dropdown" data-spirit-placement="bottom-start" id="dropdown-in-modal">
-              <a href="#" class="Item">
-                <span class="Item__label">Action</span>
-              </a>
-              <a href="#" class="Item">
-                <span class="Item__label">Another action</span>
-              </a>
-              <a href="#" class="Item">
-                <span class="Item__label">Something else here</span>
-              </a>
+            <div class="Dropdown">
+              <button
+                type="button"
+                data-spirit-toggle="dropdown"
+                data-spirit-target="#dropdown-in-modal"
+                class="Button Button--secondary Button--medium"
+                aria-expanded="false"
+                aria-controls="dropdown-in-modal"
+              >
+                Dropdown
+              </button>
+              <div class="DropdownPopover" data-spirit-placement="bottom-start" id="dropdown-in-modal">
+                <a href="#" class="Item">
+                  <span class="Item__label">Action</span>
+                </a>
+                <a href="#" class="Item">
+                  <span class="Item__label">Another action</span>
+                </a>
+                <a href="#" class="Item">
+                  <span class="Item__label">Something else here</span>
+                </a>
+              </div>
             </div>
           </div>
           <!-- Content: end -->
@@ -986,6 +990,7 @@ <h2 class="docs-Heading">Stacking Modals</h2>
       data-spirit-target="#example-stacking-parent"
       aria-controls="example-stacking-parent"
       aria-expanded="false"
+      data-test-id="modal-stacking"
     >
       Open Modal
     </button>
@@ -1209,6 +1214,7 @@ <h2 class="docs-Heading">Hidden Close Button and Disabled Escape Key</h2>
       data-spirit-target="#example-hide-close-button"
       aria-controls="example-hide-close-button"
       aria-expanded="false"
+      data-test-id="hidden-close-button"
     >
       Open Modal
     </button>

tests/e2e/demo-modal-compare.spec.ts

@@ -0,0 +1,100 @@
+/* eslint-disable no-console -- we want to log when test fails */
+import { isTesting as isTestingEnvironment } from '@lmc-eu/spirit-common/constants/environments';
+import { SERVERS, getDevelopmentEndpointUri } from '@lmc-eu/spirit-common/constants/servers';
+import { expect, test } from '@playwright/test';
+
+const runComponentCompareTests = ({ componentsDir, packageName, componentName }) => {
+  if (!packageName) return;
+
+  const formattedPackageName = packageName
+    .split('-')
+    .map((word) => word.charAt(0).toUpperCase() + word.slice(1))
+    .join(' ');
+
+  test.describe(`Demo ${formattedPackageName} Components`, () => {
+    test(`test demo ${formattedPackageName} component ${componentName}`, async ({ page }) => {
+      try {
+        const url = isTestingEnvironment()
+          ? SERVERS.TESTING[packageName]
+          : getDevelopmentEndpointUri(packageName, { isDocker: packageName !== 'web-twig' });
+
+        await page.goto(`${url}${componentsDir}/${componentName}/${packageName === 'web-twig' ? '?HIDE_TOOLBAR' : ''}`);
+        await waitForPageLoad(page);
+
+        await runModalTests(page, componentName);
+      } catch (error) {
+        console.error(`Test for demo ${formattedPackageName} component ${componentName} failed. ${error}`);
+        throw error;
+      }
+    });
+  });
+};
+
+const waitForPageLoad = async (page) => {
+  // Wait for fonts to load
+  await page.evaluate(() => document.fonts.ready);
+
+  // Wait for images to load
+  await page.waitForFunction(() => Array.from(document.querySelectorAll('img')).every((img) => img.complete));
+
+  // Wait for transitions to finish
+  await page.waitForLoadState();
+
+  // Disable animations to avoid flaky screenshots
+  await page.addStyleTag({ content: '*, *::before, *::after { animation-iteration-count: 1 !important }' });
+};
+
+const runModalTests = async (page, componentName) => {
+  // Helper function for taking and comparing screenshots
+  const takeScreenshot = async (suffix, fullPage = false) => {
+    await expect(page).toHaveScreenshot(`${componentName.toLowerCase()}-${suffix}.png`, {
+      animations: 'disabled',
+      fullPage,
+    });
+  };
+
+  // TEST: open basic modal, close with backdrop click
+  await page.click('[data-test-id="basic-modal"]');
+  await takeScreenshot('basic');
+  await page.locator('body').click({ position: { x: 0, y: 0 } });
+
+  // TEST: open modal and dropdown inside, close with close button
+  await page.click('[data-test-id="modal-with-dropdown"]');
+  await page.click('dialog[open] .Dropdown button');
+  await takeScreenshot('with-dropdown');
+  await page.click('dialog[open] .ModalHeader button');
+
+  // TEST: open stacking modals, close with escape key
+  await page.click('[data-test-id="modal-stacking"]');
+  await page.click('dialog[open] .ModalFooter button');
+  await takeScreenshot('stacking');
+  await page.keyboard.press('Escape');
+  await page.keyboard.press('Escape');
+
+  // TEST: open modal with hidden close button, close with action button
+  await page.click('button[data-test-id="hidden-close-button"]');
+  await takeScreenshot('hidden-close-button');
+  await page.click('dialog[open] .ModalFooter button');
+  await takeScreenshot('closed-modals', true);
+};
+
+const testConfigs = [
+  {
+    componentName: 'Modal',
+    componentsDir: '/src/scss/components',
+    packageName: 'web',
+  },
+  {
+    componentName: 'Modal',
+    componentsDir: '/src/components',
+    packageName: 'web-react',
+  },
+  // Disable web-twig tests for now on CI, because we don't have a way to run them in CI yet.
+  !isTestingEnvironment() && {
+    componentName: 'Modal',
+    componentsDir: '/components',
+    packageName: 'web-twig',
+  },
+].filter(Boolean);
+
+testConfigs.forEach(runComponentCompareTests);