ci(pie-storybook): DSW-2468 Add testing deployment for storybook

.github/workflows/amplify-deploy.yml

@@ -33,6 +33,13 @@ on:
         required: false
         type: string
         default: 'build'
+      destination-dir:
+        required: false
+        type: string
+        default: '/'
+      sub-domain-suffix:
+        required: true
+        type: string
 
 env:
   AMPLIFY_ID: ${{ inputs.amplify-app-id }}
@@ -63,13 +70,13 @@ jobs:
         with:
           script-name: "${{inputs.build-script }} --filter=${{ inputs.package-name }}"
       # Create Github Deployment
-      - name: Create Docs GitHub deployment
+      - name: Create GitHub deployment
         if: ${{ github.event_name == 'pull_request' }}
         uses: chrnorm/deployment-action@55729fcebec3d284f60f5bcabbd8376437d696b1 # v2.0.7
         id: deploy
         with:
           token: ${{ secrets.GITHUB_TOKEN }}
-          environment: "${{ inputs.package-name}}-pr-${{ github.event.number }}"
+          environment: "${{ inputs.sub-domain-suffix }}-pr-${{ github.event.number }}"
       # Zip dist folder
       - name: Zip build output
         shell: bash
@@ -86,10 +93,11 @@ jobs:
           aws-region: ${{ env.AWS_REGION }}
           aws-bucket: ${{ env.BUCKET_NAME }}
           bucket-root: "/"
-          destination-dir: "/"
+          destination-dir: "${{ inputs.destination-dir }}"
           file-path: "${{inputs.package-dist-directory}}/${{ env.ZIP_NAME }}"
           content-type: "application/zip"
           public: true
+          output-file-url: 'true'
       # Create branch on Amplify
       - name: Create Amplify branch
         shell: bash
@@ -106,13 +114,14 @@ jobs:
           aws amplify start-deployment \
             --app-id ${{ env.AMPLIFY_ID }} \
             --branch-name ${{ env.BRANCH_NAME }} \
-            --source-url s3://${{ env.BUCKET_NAME }}/${{ env.ZIP_NAME }}
+            --source-url ${{ steps.upload-s3.outputs.file-url }}
       # Set env vars for domain name association
       - name: Set environment variables for domain name association
         if: github.event_name == 'pull_request'
+        env:
+          SUB_DOMAIN_SUFFIX: ${{ inputs.sub-domain-suffix }}
         run: |
-          PACKAGE_NAME_SUFFIX=$(echo "${{ inputs.package-name }}" | sed -e 's/^pie-//')
-          echo "SUB_DOMAIN=pr${{ github.event.number }}-$PACKAGE_NAME_SUFFIX" >> $GITHUB_ENV
+          echo "SUB_DOMAIN=pr${{ github.event.number }}-$SUB_DOMAIN_SUFFIX" >> $GITHUB_ENV
 
       - name: Get existing domain associations
         if: github.event_name == 'pull_request'

.github/workflows/ci.yml

@@ -204,6 +204,25 @@ jobs:
       package-dist-directory: ./apps/pie-storybook/dist
       bucket-name-preview: 'pie-storybook-preview'
       bucket-name-main: 'pie-storybook'
+      sub-domain-suffix: 'storybook'
+    secrets: inherit
+
+  # Workflow task that deploys an instance of storybook used for test suites to run against
+  deploy-storybook-testing:
+    needs: unit-tests
+    if: (needs.check-change-type.outputs.web-components-change == 'true' || needs.check-change-type.outputs.storybook-change == 'true') || github.ref == 'refs/heads/main'
+    uses: ./.github/workflows/amplify-deploy.yml
+    with:
+      os: ubuntu-latest
+      node-version: 20
+      amplify-app-id: d3eyargno6okyn
+      package-name: 'pie-storybook'
+      package-dist-directory: ./apps/pie-storybook/dist
+      bucket-name-preview: 'pie-storybook-preview'
+      bucket-name-main: 'pie-storybook'
+      destination-dir: 'testing'
+      build-script: 'build:testing'
+      sub-domain-suffix: 'storybook-testing'
     secrets: inherit
 
   # TODO: DSW-1151 - Move this into a reusable action so it's not duplicated
@@ -274,6 +293,7 @@ jobs:
       package-dist-directory: ./apps/pie-docs/dist
       bucket-name-preview: 'pie-docs-preview'
       bucket-name-main: 'pie-docs'
+      sub-domain-suffix: 'docs'
     secrets: inherit
 
   browser-tests-docs:

.github/workflows/closed.yml

@@ -12,6 +12,7 @@ jobs:
     outputs:
       hasDocsEnv: ${{ steps.list-environments.outputs.hasDocsEnv }}
       hasStorybookEnv: ${{ steps.list-environments.outputs.hasStorybookEnv }}
+      hasStorybookTestingEnv: ${{ steps.list-environments.outputs.hasStorybookTestingEnv }}
     steps:
       - name: Checkout
         uses: actions/checkout@692973e3d937129bcbf40652eb9f2f61becf3332 # v4.1.7
@@ -36,11 +37,13 @@ jobs:
             const envList = environments.data.environments.map(env => env.name);
 
             // Check for existence of specific environments
-            const hasDocsEnv = envList.includes(`pie-docs-pr-${pull_number}`);
-            const hasStorybookEnv = envList.includes(`pie-storybook-pr-${pull_number}`);
+            const hasDocsEnv = envList.includes(`docs-pr-${pull_number}`);
+            const hasStorybookEnv = envList.includes(`storybook-pr-${pull_number}`);
+            cosnt hasStorybookTestingEnv = envList.includes(`storybook-testing-pr-${pull_number}`);
 
             core.setOutput('hasDocsEnv', hasDocsEnv);
             core.setOutput('hasStorybookEnv', hasStorybookEnv);
+            core.setOutput('hasStorybookTestingEnv', hasStorybookTestingEnv);
 
       - name: Delete associated docs environments
         if: steps.list-environments.outputs.hasDocsEnv == 'true'
@@ -52,7 +55,7 @@ jobs:
           aws-region: 'eu-west-1'
           aws-access-key-id: ${{ secrets.AWS_KEY_ID }}
           aws-secret-access-key: ${{ secrets.AWS_SECRET_ACCESS_KEY }}
-          environment-name: pie-docs-pr-${{ github.event.number }}
+          environment-name: docs-pr-${{ github.event.number }}
           branch-name: 'pr${{ github.event.number }}'
 
       - name: Delete associated storybook environment
@@ -65,5 +68,18 @@ jobs:
           aws-region: 'eu-west-1'
           aws-access-key-id: ${{ secrets.AWS_KEY_ID }}
           aws-secret-access-key: ${{ secrets.AWS_SECRET_ACCESS_KEY }}
-          environment-name: pie-storybook-pr-${{ github.event.number }}
+          environment-name: storybook-pr-${{ github.event.number }}
+          branch-name: 'pr${{ github.event.number }}'
+
+      - name: Delete associated storybook testing environments
+        if: steps.list-environments.outputs.hasStorybookTestingEnv == 'true'
+        uses: ./.github/actions/amplify-teardown
+        with:
+          gh-app-id: ${{ secrets.GH_APP_ID }}
+          gh-app-private-key: ${{ secrets.GH_APP_PRIVATE_KEY }}
+          amplify-app-id: d3eyargno6okyn
+          aws-region: 'eu-west-1'
+          aws-access-key-id: ${{ secrets.AWS_KEY_ID }}
+          aws-secret-access-key: ${{ secrets.AWS_SECRET_ACCESS_KEY }}
+          environment-name: storybook-testing-pr-${{ github.event.number }}
           branch-name: 'pr${{ github.event.number }}'

apps/pie-storybook/.storybook/main.ts

@@ -1,10 +1,17 @@
 import type { StorybookConfig } from '@storybook/web-components-vite';
 
+const isBrowserTesting = process.env.BROWSER_TESTING === 'true';
+
 const config: StorybookConfig = {
-    stories: [
-        "../stories/**/*.mdx",
-        "../stories/**/*.stories.@(js|ts|tsx)"
-    ],
+    stories: isBrowserTesting 
+        ? [
+            "../stories/**/*.test.mdx",
+            "../stories/**/*.test.stories.@(js|ts|tsx)"
+        ] 
+        : [
+            "../stories/**/*.mdx",
+            "../stories/**/!(*.test).stories.@(js|ts|tsx)"
+          ],
     addons: [
         "@storybook/addon-essentials",
         "@storybook/addon-a11y",
@@ -20,6 +27,6 @@ const config: StorybookConfig = {
     docs: {
         autodocs: false
     }
-}
+};
 
 export default config;

apps/pie-storybook/package.json

@@ -5,7 +5,9 @@
   "description": "Storybook for PIE Design System components",
   "scripts": {
     "dev": "storybook dev -p 6006",
+    "dev:testing": "BROWSER_TESTING=true storybook dev -p 6006",
     "build": "storybook build --output-dir dist && cp -R ./static ./dist",
+    "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"
   },

apps/pie-storybook/stories/pie-divider.test.stories.ts

@@ -0,0 +1,68 @@
+import { html } from 'lit';
+import { ifDefined } from 'lit/directives/if-defined.js';
+import { type Meta } from '@storybook/web-components';
+
+import '@justeattakeaway/pie-divider';
+import {
+    type DividerProps, variants, orientations, defaultProps,
+} from '@justeattakeaway/pie-divider';
+
+import { createStory, type TemplateFunction } from '../utilities';
+
+type DividerStoryMeta = Meta<DividerProps>;
+
+const defaultArgs: DividerProps = { ...defaultProps };
+
+const dividerStoryMeta: DividerStoryMeta = {
+    title: 'Divider',
+    component: 'pie-divider',
+    argTypes: {
+        variant: {
+            description: 'Set the variant of the divider. To change this, view the other story.',
+            control: { disable: true },
+            options: variants,
+            defaultValue: {
+                summary: defaultProps.variant,
+            },
+        },
+        label: {
+            description: 'The label text for the divider.',
+            control: {
+                type: 'text',
+                defaultValue: {
+                    summary: 'Label',
+                },
+            },
+        },
+        orientation: {
+            description: 'Set the orientation of the divider.',
+            control: 'select',
+            options: orientations,
+            defaultValue: {
+                summary: defaultProps.orientation,
+            },
+        },
+    },
+    args: defaultArgs,
+    parameters: {
+        design: {
+            type: 'figma',
+            url: 'https://www.figma.com/file/R2rBfzJP0hG0MZorq6FLZ1/%5BCore%5D-Components-%E2%9A%AA%EF%B8%8F-%5BPIE-2.0%5D?node-id=876-1227&node-type=CANVAS&t=v6qypWzZqWE6lPxm-0',
+        },
+    },
+};
+
+export default dividerStoryMeta;
+
+const Template : TemplateFunction<DividerProps> = ({ variant, label, orientation }) => html`
+            <div style="${orientation === 'horizontal' ? 'width' : 'height'}: 400px">
+                <pie-divider variant="${ifDefined(variant)}" orientation="${ifDefined(orientation)}" label="${ifDefined(label)}"></pie-divider>
+            </div>
+        `;
+
+const createDividerStory = createStory<DividerProps>(Template, defaultArgs);
+
+export const Default = createDividerStory();
+export const Inverse = createDividerStory({ variant: 'inverse' }, { bgColor: 'dark (container-dark)' });
+export const Labelled = createDividerStory({ label: 'Label' });
+export const LargeTextContent = createDividerStory({ label: 'Lorem ipsum dolor sit amet consectetur adipisicing elit. Reprehenderit quas inventore quasi ullam, sed ab odio dicta, tempore' });

apps/pie-storybook/turbo.json

@@ -11,12 +11,28 @@
         "^generate:component-statuses"
       ]
     },
+    "dev:testing": {
+      "cache": false,
+      "dependsOn": [
+        "^build",
+        "copy:component-statuses"
+      ]
+    },
     "build": {
       "cache": true,
       "dependsOn": [
         "^build",
         "^generate:component-statuses"
-      ]
+      ],
+      "outputs": ["dist/**"]
+    },
+    "build:testing": {
+      "cache": true,
+      "dependsOn": [
+        "^build",
+        "^generate:component-statuses"
+      ],
+      "outputs": ["dist/**"]
     }
   }
-}
+}

package.json

@@ -22,6 +22,7 @@
     "analyse-component-bundles": "bundlewatch --config bundlewatch.config.json",
     "watch": "turbo run watch --filter=!pie-monorepo",
     "build": "cross-env-shell turbo run build --filter=!'./apps/examples/*' --filter=!pie-monorepo --token=${TURBO_TOKEN}",
+    "build:testing": "cross-env-shell turbo run build:testing --filter=!'./apps/examples/*' --filter=!pie-monorepo --token=${TURBO_TOKEN}",
     "build:dev": "cross-env-shell turbo run build:dev --filter=!'./apps/examples/*' --filter=!pie-monorepo --token=${TURBO_TOKEN}",
     "build:examples": "cross-env-shell turbo run build:examples --filter=!pie-monorepo --token=${TURBO_TOKEN}",
     "build:react-wrapper": "cross-env-shell turbo run build:react-wrapper --filter=!pie-monorepo --token=${TURBO_TOKEN}",
@@ -32,6 +33,7 @@
     "clean": "turbo run clean --filter=!pie-monorepo",
     "cz": "./packages/tools/pie-monorepo-utils/git-hooks/check-branch-name.js $(git symbolic-ref --short HEAD) && ./node_modules/cz-customizable/standalone.js",
     "dev": "turbo run dev --filter=!pie-monorepo",
+    "dev:testing": "turbo run dev:testing --filter=!pie-monorepo",
     "generate:component-statuses": "turbo run generate:component-statuses --filter=!pie-monorepo",
     "generate:examples": "cross-env-shell turbo run generate:examples --filter=!pie-monorepo --token=${TURBO_TOKEN}",
     "lint:config:fix": "eslint --fix turbo.json (packages|apps)/**/turbo.json",