Test(web,web-react,web-twig): Introduce visual tests of all component…

…s #DS-660

playwright.config.ts

@@ -30,22 +30,31 @@ export default defineConfig({
     trace: 'on-first-retry',
   },
 
+  /* Timeout configuration */
+  timeout: 120000,
+
+  /* Configure expect() to use in tests */
+  expect: {
+    /* Setting the timeout for each test */
+    timeout: 120000,
+  },
+
   /* Configure projects for major browsers */
   projects: [
     {
       name: 'chromium',
-      use: { ...devices['Desktop Chrome'] },
-    },
-
-    {
-      name: 'firefox',
-      use: { ...devices['Desktop Firefox'] },
+      use: { ...devices['Desktop Chrome'], ignoreHTTPSErrors: true },
     },
 
-    {
-      name: 'webkit',
-      use: { ...devices['Desktop Safari'] },
-    },
+    // {
+    //   name: 'firefox',
+    //   use: { ...devices['Desktop Firefox'], ignoreHTTPSErrors: true },
+    // },
+    //
+    // {
+    //   name: 'webkit',
+    //   use: { ...devices['Desktop Safari'], ignoreHTTPSErrors: true },
+    // },
 
     /* Test against mobile viewports. */
     // {

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

@@ -0,0 +1,69 @@
+import { isTesting } from '@lmc-eu/spirit-common/constants/environments';
+import { SERVERS, getDevelopmentEndpointUri } from '@lmc-eu/spirit-common/constants/servers';
+import { readdirSync } from 'fs';
+import { expect, test } from '@playwright/test';
+
+// Tests that are intentionally broken, but will be fixed in the future
+const IGNORED_TESTS = [
+  'Tooltip', // Should be fixed when DS-1087 and DS-1088 are merged
+];
+
+const runComponentCompareTests = (testConfig) => {
+  const { packageDir, componentsDir, srcDir = '', hiddenComponents = [], type } = testConfig;
+  const name = type
+    .split('-')
+    .map((word) => word.charAt(0).toUpperCase() + word.slice(1))
+    .join(' ');
+
+  test.describe(`Demo ${name} Components`, () => {
+    const componentDirs = readdirSync(`${packageDir}${srcDir}${componentsDir}`, { withFileTypes: true })
+      .filter((item) => item.isDirectory())
+      .filter((item) => !hiddenComponents.includes(item.name))
+      .filter((item) => !IGNORED_TESTS.includes(item.name))
+      .map((item) => item.name.toLowerCase());
+
+    for (const component of componentDirs) {
+      test(`test demo ${name} component ${component}`, async ({ page }) => {
+        await page.goto(
+          `${
+            isTesting() ? SERVERS.TESTING[type] : getDevelopmentEndpointUri(type, { isDocker: type !== 'web-twig' })
+          }${componentsDir}/${component}/${type === 'web-twig' ? '?HIDE_TOOLBAR' : ''}`,
+        );
+        // wait for fonts to load
+        await page.evaluate(() => document.fonts.ready);
+        // 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 }' });
+        await expect(page).toHaveScreenshot(`${component}.png`, {
+          animations: 'disabled',
+          fullPage: true,
+        });
+      });
+    }
+  });
+};
+
+const testConfigs = [
+  {
+    componentsDir: '/src/scss/components',
+    packageDir: 'packages/web',
+    type: 'web',
+  },
+  {
+    componentsDir: '/src/components',
+    hiddenComponents: ['Field', 'Dialog', 'Icon', 'TextFieldBase', 'VisuallyHidden'],
+    packageDir: 'packages/web-react',
+    type: 'web-react',
+  },
+  // Disable web-twig tests for now on CI, because we don't have a way to run them in CI yet.
+  !isTesting() && {
+    componentsDir: '/components',
+    hiddenComponents: ['Field', 'Icon', 'TextFieldBase', 'VisuallyHidden'],
+    packageDir: 'packages/web-twig',
+    srcDir: '/src/Resources',
+    type: 'web-twig',
+  },
+];
+
+testConfigs.forEach(runComponentCompareTests);