fixup! Feat(web): Introduce Drawer component #DS-1580

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

@@ -41,7 +41,7 @@
       drawer.setAttribute("aria-expanded", "false");
     };
 
-    const openDrawerButton = document.querySelector('button[data-test-id="drawer-basic"]');
+    const openDrawerButton = document.querySelector('button[data-test-id="drawer-open-button"]');
     openDrawerButton.addEventListener("click", () => {
       drawer.show();
       drawer.setAttribute("aria-expanded", "true");
@@ -123,7 +123,7 @@ <h2 class="docs-Heading">Drawer</h2>
 
       <button
         type="button"
-        data-test-id="drawer-basic"
+        data-test-id="drawer-open-button"
         class="Button Button--primary Button--medium"
         data-spirit-toggle="offcanvas"
         data-spirit-target="#drawer-example"

tests/e2e/components/demo-drawer-compare.spec.ts

@@ -0,0 +1,88 @@
+/* eslint-disable no-console -- we want to log when test fails */
+import { isTesting as isTestingEnvironment } from '@lmc-eu/spirit-common/constants/environments';
+import { test, Page } from '@playwright/test';
+import { formatPackageName, getServerUrl, hideFromVisualTests, waitForPageLoad, takeScreenshot } from '../../helpers';
+
+type TestConfig = {
+  componentsDir: string;
+  packageName: string;
+  componentName: string;
+};
+
+const runComponentCompareTests = ({ componentsDir, packageName, componentName }: TestConfig): void => {
+  if (!packageName) return;
+
+  const formattedPackageName = formatPackageName(packageName);
+
+  test.describe(`Test opened Drawer`, () => {
+    test(`Test ${componentName} component in ${formattedPackageName} package`, async ({ page }: { page: Page }) => {
+      try {
+        const url = getServerUrl(packageName);
+        await page.goto(`${url}${componentsDir}/${componentName}/`);
+        await waitForPageLoad(page);
+        await hideFromVisualTests(page);
+        await runDrawerTests(page, componentName);
+      } catch (error) {
+        console.error(`Test for demo ${formattedPackageName} component ${componentName} failed. ${error}`);
+        throw error;
+      }
+    });
+  });
+};
+
+const runDrawerTests = async (page: Page, componentName: string): Promise<void> => {
+  // open drawer on the right side, close with backdrop click
+  await page.click('[data-test-id="drawer-open-button"]');
+  await takeScreenshot(page, `${componentName}-right-backdrop-click-`);
+  await page.locator('body').click({ position: { x: 0, y: 0 } });
+
+  // open drawer on the left side, close with backdrop click
+  await page.click('[id="drawer-alignment-left"]');
+  await page.click('[data-test-id="drawer-open-button"]');
+  await takeScreenshot(page, `${componentName}-left-backdrop-click`);
+  await page.locator('body').click({ position: { x: 300, y: 0 } });
+
+  // open drawer on the right side, close with close button
+  await page.click('[id="drawer-alignment-right"]');
+  await page.click('[data-test-id="drawer-open-button"]');
+  await takeScreenshot(page, `${componentName}-right-close-button`);
+  await page.click('dialog[open] button');
+
+  // open drawer on the left side, close with close button
+  await page.click('[id="drawer-alignment-left"]');
+  await page.click('[data-test-id="drawer-open-button"]');
+  await takeScreenshot(page, `${componentName}-left-close-button`);
+  await page.click('dialog[open] button');
+
+  // open drawer on the right side, close with escape keys
+  await page.click('[id="drawer-alignment-right"]');
+  await page.click('[data-test-id="drawer-open-button"]');
+  await takeScreenshot(page, `${componentName}-right-escape-key`);
+  await page.keyboard.press('Escape');
+
+  // open drawer on the left side, close with escape keys
+  await page.click('[id="drawer-alignment-left"]');
+  await page.click('[data-test-id="drawer-open-button"]');
+  await takeScreenshot(page, `${componentName}-left-escape-key`);
+  await page.keyboard.press('Escape');
+
+  // screenshot of closed drawer
+  await takeScreenshot(page, `${componentName}-closed-drawer`, { fullPage: true });
+};
+
+const componentName = 'Drawer';
+
+const testConfigs: TestConfig[] = [
+  {
+    componentName,
+    componentsDir: '/src/scss/components',
+    packageName: 'web',
+  },
+  {
+    componentName,
+    componentsDir: '/src/components',
+    packageName: 'web-react',
+  },
+];
+
+testConfigs.forEach(runComponentCompareTests);