ci(pie-monorepo): DSW-000 fix pie test reporters (#1748)

* ci(pie-monorepo): DSW-000 fix pie test reporters

* ci(pie-monorepo): DSW-000 updated for global change in CI

* fix(pie-components-config): DSW-000 updated path for playwright report

Author: JoshuaNg2332

.github/workflows/ci.yml

@@ -221,8 +221,8 @@ jobs:
         uses: actions/upload-artifact@50769540e7f4bd5e21e526ee35c689e35e0d6874 # v4.4.0
         if: always()
         with:
-          name: browsers-report
-          path: browsers-report/
+          name: lit-browsers-report
+          path: lit-browsers-report/
           retention-days: 7
       # Run Visual Tests
       - name: Run All Visual Tests
@@ -241,8 +241,8 @@ jobs:
         uses: actions/upload-artifact@50769540e7f4bd5e21e526ee35c689e35e0d6874 # v4.4.0
         if: always()
         with:
-          name: visual-report
-          path: visual-report/
+          name: lit-visual-report
+          path: lit-visual-report/
           retention-days: 7
     env:
       STORYBOOK_AMPLIFY_ID: d17ja0ul7nrdy0

configs/pie-components-config/playwright-lit-config.js

@@ -20,7 +20,7 @@ export function getPlaywrightConfig () {
         /* Opt out of parallel tests on CI. */
         workers: '50%',
         /* Reporter to use. See https://playwright.dev/docs/test-reporters */
-        reporter: [['html', { outputFolder: 'lit-browsers-report' }]],
+        reporter: [['html', { outputFolder: '../../../lit-browsers-report' }]],
         /* Shared settings for all the projects below. See https://playwright.dev/docs/api/class-testoptions. */
         use: {
             ctViteConfig: {

configs/pie-components-config/playwright-lit-visual-config.js

@@ -17,7 +17,7 @@ export function getPlaywrightVisualConfig () {
         /* Opt out of parallel tests on CI. */
         workers: '50%',
         /* Reporter to use. See https://playwright.dev/docs/test-reporters */
-        reporter: [['html', { outputFolder: 'lit-visual-report' }]],
+        reporter: [['html', { outputFolder: '../../../lit-visual-report' }]],
         /* Shared settings for all the projects below. See https://playwright.dev/docs/api/class-testoptions. */
         use: {
             ctViteConfig: {

package.json

@@ -1,6 +1,6 @@
 {
   "name": "pie-monorepo",
-  "description": "The home of Just Eat Takeaway.com's PIE Design System",
+  "description": "The home of Just Eat Takeaway.com's PIE Design System.",
   "version": "2.65.0",
   "keywords": [],
   "author": "Just Eat Takeaway.com - Design System Team",

playwright-browsers.config.ts

@@ -33,7 +33,7 @@ const config: PlaywrightTestConfig = {
     /* All CPUs on CI / half of available CPUs when testing locally. */
     workers: process.env.CI ? '100%' : '50%',
     /* Reporter to use. See https://playwright.dev/docs/test-reporters */
-    reporter: [['html', { outputFolder: 'lit-browsers-report' }]],
+    reporter: [['html', { outputFolder: 'browsers-report' }]],
     /* Shared settings for all the projects below. See https://playwright.dev/docs/api/class-testoptions. */
     use: {
     /* Maximum time each action such as `click()` can take. Defaults to 0 (no limit). */

playwright-visual.config.ts

@@ -1,6 +1,7 @@
 import { PlaywrightTestConfig, devices } from '@playwright/test';
 
 const { getBaseUrl } = require('./apps/pie-docs/test/helpers/configuration-helper');
+
 const baseURL = getBaseUrl();
 process.env.BASE_URL = baseURL;
 /**
@@ -14,62 +15,62 @@ process.env.BASE_URL = baseURL;
  */
 const config: PlaywrightTestConfig = {
 
-  /* Maximum time one test can run for. */
-  timeout: 30 * 1000,
-  expect: {
-    /**
-     * Maximum time expect() should wait for the condition to be met.
-     * For example in `await expect(locator).toHaveText();`
-     */
-    timeout: 5000
-  },
-  /* Run tests in files in parallel */
-  fullyParallel: true,
-  /* Fail the build on CI if you accidentally left test.only in the source code. */
-  forbidOnly: !!process.env.CI,
-  /* Retry on CI only */
-  retries: process.env.CI ? 2 : 0,
-  /* All CPUs on CI / half of available CPUs when testing locally. */
-  workers: process.env.CI ? '100%' : '50%',
-  /* Reporter to use. See https://playwright.dev/docs/test-reporters */
-  reporter: [['html', { outputFolder: 'lit-visual-report' }]],
-  /* Shared settings for all the projects below. See https://playwright.dev/docs/api/class-testoptions. */
-  use: {
-    /* Maximum time each action such as `click()` can take. Defaults to 0 (no limit). */
-    actionTimeout: 0,
-    /* Base URL to use in actions like `await page.goto('/')`. */
-    baseURL: process.env.BASE_URL,
+    /* Maximum time one test can run for. */
+    timeout: 30 * 1000,
+    expect: {
+        /**
+       * Maximum time expect() should wait for the condition to be met.
+       * For example in `await expect(locator).toHaveText();`
+       */
+        timeout: 5000,
+    },
+    /* Run tests in files in parallel */
+    fullyParallel: true,
+    /* Fail the build on CI if you accidentally left test.only in the source code. */
+    forbidOnly: !!process.env.CI,
+    /* Retry on CI only */
+    retries: process.env.CI ? 2 : 0,
+    /* All CPUs on CI / half of available CPUs when testing locally. */
+    workers: process.env.CI ? '100%' : '50%',
+    /* Reporter to use. See https://playwright.dev/docs/test-reporters */
+    reporter: [['html', { outputFolder: 'visual-report' }]],
+    /* Shared settings for all the projects below. See https://playwright.dev/docs/api/class-testoptions. */
+    use: {
+        /* Maximum time each action such as `click()` can take. Defaults to 0 (no limit). */
+        actionTimeout: 0,
+        /* Base URL to use in actions like `await page.goto('/')`. */
+        baseURL: process.env.BASE_URL,
 
-    /* Collect trace when retrying the failed test. See https://playwright.dev/docs/trace-viewer */
-    trace: 'on-first-retry',
+        /* Collect trace when retrying the failed test. See https://playwright.dev/docs/trace-viewer */
+        trace: 'on-first-retry',
 
-    /* Sets the default getByTestId function attribute to the data-test-id format */
-    testIdAttribute: 'data-test-id',
-  },
+        /* Sets the default getByTestId function attribute to the data-test-id format */
+        testIdAttribute: 'data-test-id',
+    },
 
-  /* Configure projects for major browsers */
+    /* Configure projects for major browsers */
 
-  projects: [
-    {
-      name: 'visual:desktop',
-      grepInvert: /@mobile/,
-      use: {
-        ...devices['Desktop Chrome'],
-      },
-      testMatch: ['**/test/visual/*.spec.js']
-    },
-    {
-      name: 'visual:mobile',
-      grep: /@mobile/,
-      use: {
-        ...devices['Pixel 5'],
-      },
-      testMatch: ['**/test/visual/*.spec.js']
-    },
-  ],
+    projects: [
+        {
+            name: 'visual:desktop',
+            grepInvert: /@mobile/,
+            use: {
+                ...devices['Desktop Chrome'],
+            },
+            testMatch: ['**/test/visual/*.spec.js'],
+        },
+        {
+            name: 'visual:mobile',
+            grep: /@mobile/,
+            use: {
+                ...devices['Pixel 5'],
+            },
+            testMatch: ['**/test/visual/*.spec.js'],
+        },
+    ],
 
-  /* Folder for test artifacts such as screenshots, videos, traces, etc. */
-  // outputDir: 'test-results/',
+    /* Folder for test artifacts such as screenshots, videos, traces, etc. */
+    // outputDir: 'test-results/',
 };
 
-export default config;
+export default config;