ci(pie-monorepo): DSW-000 optimise unit-tests job by removing duplica…

…te build step (#2197) * ci(pie-monorepo): DSW-000 optimise unit-tests job by removing duplicate build step * remove unused script and add missing test:ci script * revert * add new tests * add new tests --------- Co-authored-by: Ben Siggery <[email protected]>
justeattakeaway · Feb 12, 2025 · 09e2d46 · 09e2d46
1 parent df8ddf7
commit 09e2d46
Show file tree

Hide file tree

Showing 29 changed files with 81 additions and 57 deletions.
diff --git a/.changeset/moody-bobcats-call.md b/.changeset/moody-bobcats-call.md
@@ -0,0 +1,5 @@
+---
+"@justeattakeaway/generator-pie-component": minor
+---
+
+[Removed] - Unused `test` script
diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml
@@ -166,11 +166,6 @@ jobs:
         with:
           node-version: 20
           os: ubuntu-latest
-      # Restore Packages from Cache
-      - name: Build Packages
-        uses: ./.github/actions/run-script
-        with:
-          script-name: "build"
       # Run Unit Tests
       - name: Unit Tests
         uses: ./.github/actions/run-script

diff --git a/apps/pie-storybook/package.json b/apps/pie-storybook/package.json
@@ -10,7 +10,8 @@
     "build:testing": "BROWSER_TESTING=true storybook build --output-dir dist && cp -R ./static ./dist",
     "lint:scripts": "run -T eslint .",
     "lint:scripts:fix": "run -T eslint . --fix",
-    "test": "run -T vitest run test"
+    "test": "run -T vitest run test",
+    "test:ci": "yarn test"
   },
   "author": "Just Eat Takeaway.com - Design System Team",
   "license": "Apache-2.0",

diff --git a/apps/pie-storybook/test/utilities/index.test.ts b/apps/pie-storybook/test/utilities/index.test.ts
@@ -2,6 +2,7 @@ import { describe, it, expect } from 'vitest';
 import { html, render, type TemplateResult } from 'lit';
 import { createStory, createVariantStory } from '../../utilities/index';
 import { type StoryOptions } from '../../types/StoryOptions';
+import CUSTOM_BACKGROUNDS from '../../.storybook/backgrounds';
 
 type ComponentProps = {
   size: string;
@@ -86,10 +87,79 @@ describe('createVariantStory', () => {
 
         const story = createVariantStory(template, propOptions, storyOpts);
 
-        // Check if the parameters include the background color
-        expect(story.parameters.backgrounds.default).toBe('background-subtle');
-
         // Check if argTypes are applied
         expect(story.argTypes).toEqual(storyOpts.argTypes);
     });
+
+    it('should apply custom background color from CUSTOM_BACKGROUNDS', () => {
+        const propOptions = {
+            size: ['small'],
+            variant: ['primary'],
+        };
+
+        const story = createVariantStory(template, propOptions, { bgColor: 'background-subtle' });
+        const renderResult = story.render();
+
+        const container = document.createElement('div');
+        render(renderResult, container);
+
+        const templateContainer = container.querySelector('.template-container');
+        if (!templateContainer) {
+            throw new Error('Template container not found');
+        }
+        const computedStyle = window.getComputedStyle(templateContainer);
+
+        const backgroundColor = computedStyle.getPropertyValue('--background-color');
+        expect(backgroundColor).toBeTruthy();
+        expect(backgroundColor).not.toBe('#ffffff');
+
+        const matchingBackground = CUSTOM_BACKGROUNDS.values.find((bg) => bg.name === 'background-subtle');
+        expect(backgroundColor).toBe(matchingBackground?.value);
+    });
+
+    it('should fallback to default white background when invalid bgColor is provided', () => {
+        const propOptions = {
+            size: ['small'],
+            variant: ['primary'],
+        };
+
+        // @ts-expect-error - Testing invalid background color
+        const story = createVariantStory(template, propOptions, { bgColor: 'background-invalid' });
+        const renderResult = story.render();
+
+        const container = document.createElement('div');
+        render(renderResult, container);
+
+        const templateContainer = container.querySelector('.template-container');
+        if (!templateContainer) {
+            throw new Error('Template container not found');
+        }
+        const computedStyle = window.getComputedStyle(templateContainer);
+
+        // Should fallback to default white background
+        const backgroundColor = computedStyle.getPropertyValue('--background-color');
+        expect(backgroundColor).toBe('#ffffff');
+    });
+
+    it('should use default white background when bgColor is undefined', () => {
+        const propOptions = {
+            size: ['small'],
+            variant: ['primary'],
+        };
+
+        const story = createVariantStory(template, propOptions);
+        const renderResult = story.render();
+
+        const container = document.createElement('div');
+        render(renderResult, container);
+
+        const templateContainer = container.querySelector('.template-container');
+        if (!templateContainer) {
+            throw new Error('Template container not found');
+        }
+        const computedStyle = window.getComputedStyle(templateContainer);
+
+        const backgroundColor = computedStyle.getPropertyValue('--background-color');
+        expect(backgroundColor).toBe('#ffffff');
+    });
 });
diff --git a/packages/components/pie-assistive-text/package.json b/packages/components/pie-assistive-text/package.json
@@ -24,8 +24,6 @@
     "lint:style": "run -T stylelint ./src/**/*.{css,scss}",
     "lint:style:fix": "yarn lint:style --fix",
     "watch": "run -T vite build --watch",
-    "test": "echo \"Error: no test specified\" && exit 0",
-    "test:ci": "yarn test",
     "test:browsers-setup": "npx playwright-lit-setup",
     "test:browsers": "npx playwright test -c ./playwright-lit.config.ts",
     "test:browsers:ci": "yarn test:browsers",

diff --git a/packages/components/pie-button/package.json b/packages/components/pie-button/package.json
@@ -24,8 +24,6 @@
     "lint:style": "run -T stylelint ./src/**/*.{css,scss}",
     "lint:style:fix": "yarn lint:style --fix",
     "watch": "run -T vite build --watch",
-    "test": "echo \"Error: no test specified\" && exit 0",
-    "test:ci": "yarn test",
     "test:browsers-setup": "npx playwright-lit-setup",
     "test:browsers": "npx playwright test -c ./playwright-lit.config.ts",
     "test:browsers:ci": "yarn test:browsers",

diff --git a/packages/components/pie-card/package.json b/packages/components/pie-card/package.json
@@ -24,8 +24,6 @@
     "lint:style": "run -T stylelint ./src/**/*.{css,scss}",
     "lint:style:fix": "yarn lint:style --fix",
     "watch": "run -T vite build --watch",
-    "test": "echo \"Error: no test specified\" && exit 0",
-    "test:ci": "yarn test",
     "test:browsers-setup": "npx playwright-lit-setup",
     "test:browsers": "npx playwright test -c ./playwright-lit.config.ts",
     "test:browsers:ci": "yarn test:browsers",

diff --git a/packages/components/pie-checkbox-group/package.json b/packages/components/pie-checkbox-group/package.json
@@ -24,8 +24,6 @@
     "lint:style": "run -T stylelint ./src/**/*.{css,scss}",
     "lint:style:fix": "yarn lint:style --fix",
     "watch": "run -T vite build --watch",
-    "test": "echo \"Error: no test specified\" && exit 0",
-    "test:ci": "yarn test",
     "test:browsers": "npx playwright test -c ./playwright-lit.config.ts",
     "test:browsers:ci": "yarn test:browsers",
     "test:visual": "run -T cross-env-shell PERCY_TOKEN=${PERCY_TOKEN_PIE_CHECKBOX_GROUP} percy exec --allowed-hostname cloudfront.net -- npx playwright test -c ./playwright-lit-visual.config.ts",

diff --git a/packages/components/pie-checkbox/package.json b/packages/components/pie-checkbox/package.json
@@ -24,8 +24,6 @@
     "lint:style": "run -T stylelint ./src/**/*.{css,scss}",
     "lint:style:fix": "yarn lint:style --fix",
     "watch": "run -T vite build --watch",
-    "test": "echo \"Error: no test specified\" && exit 0",
-    "test:ci": "yarn test",
     "test:browsers": "npx playwright test -c ./playwright-lit.config.ts",
     "test:browsers:ci": "yarn test:browsers",
     "test:browsers-setup": "npx playwright-lit-setup",

diff --git a/packages/components/pie-chip/package.json b/packages/components/pie-chip/package.json
@@ -24,8 +24,6 @@
     "lint:style": "run -T stylelint ./src/**/*.{css,scss}",
     "lint:style:fix": "yarn lint:style --fix",
     "watch": "run -T vite build --watch",
-    "test": "echo \"Error: no test specified\" && exit 0",
-    "test:ci": "yarn test",
     "test:browsers-setup": "npx playwright-lit-setup",
     "test:browsers": "npx playwright test -c ./playwright-lit.config.ts",
     "test:browsers:ci": "yarn test:browsers",

diff --git a/packages/components/pie-divider/package.json b/packages/components/pie-divider/package.json
@@ -24,8 +24,6 @@
     "lint:style": "run -T stylelint ./src/**/*.{css,scss}",
     "lint:style:fix": "yarn lint:style --fix",
     "watch": "run -T vite build --watch",
-    "test": "echo \"Error: no test specified\" && exit 0",
-    "test:ci": "yarn test",
     "test:browsers-setup": "npx playwright-lit-setup",
     "test:browsers": "npx playwright test -c ./playwright-lit.config.ts",
     "test:browsers:ci": "yarn test:browsers",

diff --git a/packages/components/pie-form-label/package.json b/packages/components/pie-form-label/package.json
@@ -24,8 +24,6 @@
     "lint:style": "run -T stylelint ./src/**/*.{css,scss}",
     "lint:style:fix": "yarn lint:style --fix",
     "watch": "run -T vite build --watch",
-    "test": "echo \"Error: no test specified\" && exit 0",
-    "test:ci": "yarn test",
     "test:browsers-setup": "npx playwright-lit-setup",
     "test:browsers": "npx playwright test -c ./playwright-lit.config.ts",
     "test:browsers:ci": "yarn test:browsers",

diff --git a/packages/components/pie-icon-button/package.json b/packages/components/pie-icon-button/package.json
@@ -24,8 +24,6 @@
     "lint:style": "run -T stylelint ./src/**/*.{css,scss}",
     "lint:style:fix": "yarn lint:style --fix",
     "watch": "run -T vite build --watch",
-    "test": "echo \"Error: no test specified\" && exit 0",
-    "test:ci": "yarn test",
     "test:browsers-setup": "npx playwright-lit-setup",
     "test:browsers": "npx playwright test -c ./playwright-lit.config.ts",
     "test:visual": "run -T cross-env-shell PERCY_TOKEN=${PERCY_TOKEN_PIE_ICON_BUTTON} percy exec --allowed-hostname cloudfront.net -- npx playwright test -c ./playwright-lit-visual.config.ts",

diff --git a/packages/components/pie-link/package.json b/packages/components/pie-link/package.json
@@ -24,8 +24,6 @@
     "lint:style": "run -T stylelint ./src/**/*.{css,scss}",
     "lint:style:fix": "yarn lint:style --fix",
     "watch": "run -T vite build --watch",
-    "test": "echo \"Error: no test specified\" && exit 0",
-    "test:ci": "yarn test",
     "test:browsers-setup": "npx playwright-lit-setup",
     "test:browsers": "npx playwright test -c ./playwright-lit.config.ts",
     "test:browsers:ci": "yarn test:browsers",

diff --git a/packages/components/pie-lottie-player/package.json b/packages/components/pie-lottie-player/package.json
@@ -22,8 +22,6 @@
     "lint:scripts": "run -T eslint .",
     "lint:scripts:fix": "yarn lint:scripts --fix",
     "watch": "run -T vite build --watch",
-    "test": "echo \"Error: no test specified\" && exit 0",
-    "test:ci": "yarn test",
     "test:browsers": "npx playwright test -c ./playwright-lit.config.ts",
     "test:browsers:ci": "yarn test:browsers",
     "test:visual": "run -T cross-env-shell PERCY_TOKEN=${PERCY_TOKEN_PIE_LOTTIE_PLAYER} percy exec --allowed-hostname cloudfront.net -- npx playwright test -c ./playwright-lit-visual.config.ts",

diff --git a/packages/components/pie-modal/package.json b/packages/components/pie-modal/package.json
@@ -24,8 +24,6 @@
     "lint:style": "run -T stylelint ./src/**/*.{css,scss}",
     "lint:style:fix": "yarn lint:style --fix",
     "watch": "run -T vite build --watch",
-    "test": "echo \"Error: no test specified\" && exit 0",
-    "test:ci": "yarn test",
     "test:browsers-setup": "npx playwright-lit-setup",
     "test:browsers": "npx playwright test -c ./playwright-lit.config.ts",
     "test:browsers:ci": "yarn test:browsers",

diff --git a/packages/components/pie-notification/package.json b/packages/components/pie-notification/package.json
@@ -24,8 +24,6 @@
     "lint:style": "run -T stylelint ./src/**/*.{css,scss}",
     "lint:style:fix": "yarn lint:style --fix",
     "watch": "run -T vite build --watch",
-    "test": "echo \"Error: no test specified\" && exit 0",
-    "test:ci": "yarn test",
     "test:browsers-setup": "npx playwright-lit-setup",
     "test:browsers": "npx playwright test -c ./playwright-lit.config.ts",
     "test:browsers:ci": "yarn test:browsers",

diff --git a/packages/components/pie-radio-group/package.json b/packages/components/pie-radio-group/package.json
@@ -24,8 +24,6 @@
     "lint:style": "run -T stylelint ./src/**/*.{css,scss}",
     "lint:style:fix": "yarn lint:style --fix",
     "watch": "run -T vite build --watch",
-    "test": "echo \"Error: no test specified\" && exit 0",
-    "test:ci": "yarn test",
     "test:browsers": "npx playwright test -c ./playwright-lit.config.ts",
     "test:browsers:ci": "yarn test:browsers",
     "test:visual": "run -T cross-env-shell PERCY_TOKEN=${PERCY_TOKEN_PIE_RADIO_GROUP} percy exec --allowed-hostname cloudfront.net -- npx playwright test -c ./playwright-lit-visual.config.ts",

diff --git a/packages/components/pie-radio/package.json b/packages/components/pie-radio/package.json
@@ -24,8 +24,6 @@
     "lint:style": "run -T stylelint ./src/**/*.{css,scss}",
     "lint:style:fix": "yarn lint:style --fix",
     "watch": "run -T vite build --watch",
-    "test": "echo \"Error: no test specified\" && exit 0",
-    "test:ci": "yarn test",
     "test:browsers": "npx playwright test -c ./playwright-lit.config.ts",
     "test:browsers:ci": "yarn test:browsers",
     "test:visual": "run -T cross-env-shell PERCY_TOKEN=${PERCY_TOKEN_PIE_RADIO} percy exec --allowed-hostname cloudfront.net -- npx playwright test -c ./playwright-lit-visual.config.ts",

diff --git a/packages/components/pie-spinner/package.json b/packages/components/pie-spinner/package.json
@@ -24,8 +24,6 @@
     "lint:style": "run -T stylelint ./src/**/*.{css,scss}",
     "lint:style:fix": "yarn lint:style --fix",
     "watch": "run -T vite build --watch",
-    "test": "echo \"Error: no test specified\" && exit 0",
-    "test:ci": "yarn test",
     "test:browsers-setup": "npx playwright-lit-setup",
     "test:browsers": "npx playwright test -c ./playwright-lit.config.ts",
     "test:browsers:ci": "yarn test:browsers",

diff --git a/packages/components/pie-switch/package.json b/packages/components/pie-switch/package.json
@@ -24,8 +24,6 @@
     "lint:style": "run -T stylelint ./src/**/*.{css,scss}",
     "lint:style:fix": "yarn lint:style --fix",
     "watch": "run -T vite build --watch",
-    "test": "echo \"Error: no test specified\" && exit 0",
-    "test:ci": "yarn test",
     "test:browsers-setup": "npx playwright-lit-setup",
     "test:browsers": "npx playwright test -c ./playwright-lit.config.ts",
     "test:browsers:ci": "yarn test:browsers",

diff --git a/packages/components/pie-tag/package.json b/packages/components/pie-tag/package.json
@@ -24,8 +24,6 @@
     "lint:style": "run -T stylelint ./src/**/*.{css,scss}",
     "lint:style:fix": "yarn lint:style --fix",
     "watch": "run -T vite build --watch",
-    "test": "echo \"Error: no test specified\" && exit 0",
-    "test:ci": "yarn test",
     "test:browsers-setup": "npx playwright-lit-setup",
     "test:browsers": "npx playwright test -c ./playwright-lit.config.ts",
     "test:browsers:ci": "yarn test:browsers",

diff --git a/packages/components/pie-text-input/package.json b/packages/components/pie-text-input/package.json
@@ -24,8 +24,6 @@
     "lint:style": "run -T stylelint ./src/**/*.{css,scss}",
     "lint:style:fix": "yarn lint:style --fix",
     "watch": "run -T vite build --watch",
-    "test": "echo \"Error: no test specified\" && exit 0",
-    "test:ci": "yarn test",
     "test:browsers-setup": "npx playwright-lit-setup",
     "test:browsers": "npx playwright test -c ./playwright-lit.config.ts",
     "test:browsers:ci": "yarn test:browsers",

diff --git a/packages/components/pie-textarea/package.json b/packages/components/pie-textarea/package.json
@@ -24,8 +24,6 @@
     "lint:style": "run -T stylelint ./src/**/*.{css,scss}",
     "lint:style:fix": "yarn lint:style --fix",
     "watch": "run -T vite build --watch",
-    "test": "echo \"Error: no test specified\" && exit 0",
-    "test:ci": "yarn test",
     "test:browsers": "npx playwright test -c ./playwright-lit.config.ts",
     "test:browsers:ci": "yarn test:browsers",
     "test:visual": "run -T cross-env-shell PERCY_TOKEN=${PERCY_TOKEN_PIE_TEXTAREA} percy exec --allowed-hostname cloudfront.net -- npx playwright test -c ./playwright-lit-visual.config.ts",

diff --git a/packages/components/pie-thumbnail/package.json b/packages/components/pie-thumbnail/package.json
@@ -24,8 +24,6 @@
     "lint:style": "run -T stylelint ./src/**/*.{css,scss}",
     "lint:style:fix": "yarn lint:style --fix",
     "watch": "run -T vite build --watch",
-    "test": "echo \"Error: no test specified\" && exit 0",
-    "test:ci": "yarn test",
     "test:browsers": "npx playwright test -c ./playwright-lit.config.ts",
     "test:browsers:ci": "yarn test:browsers",
     "test:visual": "run -T cross-env-shell PERCY_TOKEN=${PERCY_TOKEN_PIE_THUMBNAIL} percy exec --allowed-hostname cloudfront.net -- npx playwright test -c ./playwright-lit-visual.config.ts",

diff --git a/packages/components/pie-toast-provider/package.json b/packages/components/pie-toast-provider/package.json
@@ -24,8 +24,6 @@
     "lint:style": "run -T stylelint ./src/**/*.{css,scss}",
     "lint:style:fix": "yarn lint:style --fix",
     "watch": "run -T vite build --watch",
-    "test": "echo \"Error: no test specified\" && exit 0",
-    "test:ci": "yarn test",
     "test:browsers": "npx playwright test -c ./playwright-lit.config.ts",
     "test:browsers:ci": "yarn test:browsers",
     "test:visual": "run -T cross-env-shell PERCY_TOKEN=${PERCY_TOKEN_PIE_TOAST_PROVIDER} percy exec --allowed-hostname cloudfront.net -- npx playwright test -c ./playwright-lit-visual.config.ts",

diff --git a/packages/components/pie-toast/package.json b/packages/components/pie-toast/package.json
@@ -24,8 +24,6 @@
     "lint:style": "run -T stylelint ./src/**/*.{css,scss}",
     "lint:style:fix": "yarn lint:style --fix",
     "watch": "run -T vite build --watch",
-    "test": "echo \"Error: no test specified\" && exit 0",
-    "test:ci": "yarn test",
     "test:browsers": "npx playwright test -c ./playwright-lit.config.ts",
     "test:browsers:ci": "yarn test:browsers",
     "test:visual": "run -T cross-env-shell PERCY_TOKEN=${PERCY_TOKEN_PIE_TOAST} percy exec --allowed-hostname cloudfront.net -- npx playwright test -c ./playwright-lit-visual.config.ts",

diff --git a/packages/tools/generator-pie-component/src/app/templates/__package__.json b/packages/tools/generator-pie-component/src/app/templates/__package__.json
@@ -24,8 +24,6 @@
     "lint:style": "run -T stylelint ./src/**/*.{css,scss}",
     "lint:style:fix": "yarn lint:style --fix",
     "watch": "run -T vite build --watch",
-    "test": "echo \"Error: no test specified\" && exit 0",
-    "test:ci": "yarn test",
     "test:browsers": "npx playwright test -c ./playwright-lit.config.ts",
     "test:browsers:ci": "yarn test:browsers",
     "test:visual": "run -T cross-env-shell PERCY_TOKEN=${PERCY_TOKEN_PIE_<%= percyComponentName %>} percy exec --allowed-hostname cloudfront.net -- npx playwright test -c ./playwright-lit-visual.config.ts",

diff --git a/packages/tools/pie-icons-react/package.json b/packages/tools/pie-icons-react/package.json
@@ -50,6 +50,7 @@
     "lint:scripts:fix": "run -T eslint . --fix",
     "prepublishOnly": "yarn lint:scripts && yarn build",
     "test": "run -T vitest run",
+    "test:ci": "yarn test",
     "test:update": "run -T vitest -u run",
     "test:watch": "run -T vitest"
   },