ci(pie-monorepo): DSW-000 optimise unit-tests job by removing duplicate 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]>

Author: siggerzz

.changeset/moody-bobcats-call.md

@@ -0,0 +1,5 @@
+---
+"@justeattakeaway/generator-pie-component": minor
+---
+
+[Removed] - Unused `test` script

.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

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",

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');
+    });
 });

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",

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",

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",

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",

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",

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",