Merge branch 'next' of github.com:storybookjs/storybook into svelte-a…

…utodoc-ts
storybookjs · Oct 24, 2024 · 7cecdaf · 7cecdaf
2 parents 6ddb46e + eb2200c
commit 7cecdaf
Show file tree

Hide file tree

Showing 180 changed files with 17,046 additions and 920 deletions.
diff --git a/.circleci/config.yml b/.circleci/config.yml
@@ -64,7 +64,7 @@ executors:
         default: "small"
     working_directory: /tmp/storybook
     docker:
-      - image: mcr.microsoft.com/playwright:v1.46.0-jammy
+      - image: mcr.microsoft.com/playwright:v1.48.1-jammy
         environment:
           NODE_OPTIONS: --max_old_space_size=6144
     resource_class: <<parameters.class>>
@@ -154,7 +154,7 @@ jobs:
             cd code
             yarn local-registry --publish
       - report-workflow-on-failure
-      - store_artifacts: 
+      - store_artifacts:
           path: code/bench/esbuild-metafiles
       - save_cache:
           name: Save Yarn cache
@@ -261,6 +261,7 @@ jobs:
     executor:
       class: xlarge
       name: sb_playwright
+    parallelism: 4
     steps:
       - git-shallow-clone/checkout_advanced:
           clone_options: "--depth 1 --verbose"
@@ -270,15 +271,35 @@ jobs:
           name: Test
           command: |
             cd code
-            yarn test --coverage
-      - store_test_results:
-          path: code/junit.xml
+            SHARD="$((${CIRCLE_NODE_INDEX}+1))"; yarn test --reporter=blob --shard=${SHARD}/${CIRCLE_NODE_TOTAL}
+      # TODO: bring coverage back later. This has caused flakiness in the tests because
+      # Somehow Vitest reports coverage while some tests are still running,
+      # then it tries to report coverage again and as result it crashes like this:
+      # https://app.circleci.com/pipelines/github/storybookjs/storybook/85043/workflows/4ddf7907-b93c-4b17-8fdf-fe0bd7fde905/jobs/715446
+      # - persist_to_workspace:
+      #     root: .
+      #     paths:
+      #       - code/coverage
       - persist_to_workspace:
           root: .
           paths:
-            - code/coverage
+            - code/.vitest-reports
       - report-workflow-on-failure
       - cancel-workflow-on-failure
+  store-test-results:
+    executor:
+      class: small
+      name: sb_node_22_browsers
+    steps:
+      - git-shallow-clone/checkout_advanced:
+          clone_options: "--depth 1 --verbose"
+      - attach_workspace:
+          at: .
+      - run:
+          name: Merge test results
+          command: cd code && yarn vitest run --merge-reports --reporter=junit --outputFile=junit.xml
+      - store_test_results:
+          path: code/junit.xml
   coverage:
     executor:
       class: small
@@ -654,6 +675,31 @@ jobs:
                   STORYBOOK_INIT_EMPTY_TYPE: << parameters.template >>
                   STORYBOOK_DISABLE_TELEMETRY: true
       - report-workflow-on-failure
+  test-ui-testing-module:
+    executor:
+      name: sb_playwright
+      class: medium
+    steps:
+      - git-shallow-clone/checkout_advanced:
+          clone_options: "--depth 1 --verbose"
+      - attach_workspace:
+          at: .
+      - run:
+          name: Install dependencies
+          command: yarn install --no-immutable
+          working_directory: test-storybooks/portable-stories-kitchen-sink/react
+          environment:
+            YARN_ENABLE_IMMUTABLE_INSTALLS: false
+      - run:
+          name: Run E2E tests
+          command: yarn playwright-e2e
+          working_directory: test-storybooks/portable-stories-kitchen-sink/react
+      - store_test_results:
+          path: test-results
+      - store_artifacts:
+          path: test-storybooks/portable-stories-kitchen-sink/react/test-results/
+          destination: playwright
+      - report-workflow-on-failure
   test-portable-stories:
     parameters:
       directory:
@@ -682,7 +728,7 @@ jobs:
           working_directory: test-storybooks/portable-stories-kitchen-sink/<< parameters.directory >>
       - run:
           name: Run Playwright CT tests
-          command: yarn playwright
+          command: yarn playwright-ct
           working_directory: test-storybooks/portable-stories-kitchen-sink/<< parameters.directory >>
       - run:
           name: Run Cypress CT tests
@@ -713,6 +759,9 @@ workflows:
       - unit-tests:
           requires:
             - build
+      - store-test-results:
+          requires:
+            - unit-tests
       - script-checks:
           requires:
             - build
@@ -754,6 +803,9 @@ workflows:
           parallelism: 5
           requires:
             - build-sandboxes
+      - test-ui-testing-module:
+          requires:
+            - build
       - test-portable-stories:
           requires:
             - build
@@ -782,6 +834,9 @@ workflows:
       - unit-tests:
           requires:
             - build
+      - store-test-results:
+          requires:
+            - unit-tests
       - script-checks:
           requires:
             - build
@@ -825,6 +880,9 @@ workflows:
           matrix:
             parameters:
               directory: ["react", "vue3", "nextjs", "svelte"]
+      - test-ui-testing-module:
+          requires:
+            - build
       - bench:
           parallelism: 5
           requires:
@@ -852,6 +910,9 @@ workflows:
       - unit-tests:
           requires:
             - build
+      - store-test-results:
+          requires:
+            - unit-tests
       - script-checks:
           requires:
             - build
@@ -895,6 +956,9 @@ workflows:
           matrix:
             parameters:
               directory: ["react", "vue3", "nextjs", "svelte"]
+      - test-ui-testing-module:
+          requires:
+            - build
       - test-empty-init:
           requires:
             - build

diff --git a/.github/workflows/generate-sandboxes.yml b/.github/workflows/generate-sandboxes.yml
@@ -6,9 +6,9 @@ on:
   workflow_dispatch:
   # To test fixes on push rather than wait for the scheduling, do the following:
   # 1. Uncomment the lines below and add your branch.
-  # push:
-  #   branches:
-  #     - <your-branch-name>
+  push:
+    branches:
+      - kasper/fix-sandboxes-next
   # 2. Change the "ref" value to <your-branch-name> in the actions/checkout step below.
   # 3. Comment out the whole "generate-main" job starting at line 77
   # 4. 👉 DON'T FORGET TO UNDO THE STEPS BEFORE YOU MERGE YOUR CHANGES!
@@ -28,8 +28,8 @@ jobs:
     steps:
       - uses: actions/checkout@v4
         with:
-          ref: next
-  
+          ref: kasper/fix-sandboxes-next
+
       - uses: actions/setup-node@v4
         with:
           node-version-file: ".nvmrc"
@@ -74,54 +74,54 @@ jobs:
             The generation of some or all sandboxes on the **next** branch has failed.
             [See the job summary for details](https://github.com/${{ github.repository }}/actions/runs/${{ github.run_id }})
 
-  generate-main:
-    name: Generate to main
-    runs-on: ubuntu-latest
-    steps:
-      - uses: actions/checkout@v4
-        with:
-          ref: main
-
-      - uses: actions/setup-node@v4
-        with:
-          node-version-file: ".nvmrc"
-
-      - name: Setup git user
-        run: |
-          git config --global user.name "storybook-bot"
-          git config --global user.email "32066757+storybook-bot@users.noreply.github.com"
-
-      - name: Install dependencies
-        working-directory: ./scripts
-        run: node --experimental-modules ./check-dependencies.js
-
-      - name: Compile Storybook libraries
-        run: yarn task --task compile --start-from=auto --no-link
-
-      - name: Publish to local registry
-        run: yarn local-registry --publish
-
-      - name: Run local registry
-        run: yarn local-registry --open &
-
-      - name: Wait for registry
-        run: yarn wait-on tcp:127.0.0.1:6001
-
-      - name: Generate
-        id: generate
-        run: yarn generate-sandboxes --local-registry
-
-      - name: Publish
-        # publish sandboxes even if the generation fails, as some sandboxes might have been generated successfully
-        if: ${{ !cancelled() }}
-        run: yarn publish-sandboxes --remote=https://storybook-bot:${{ secrets.PAT_STORYBOOK_BOT }}@github.com/storybookjs/sandboxes.git --push --branch=main
-
-      - name: Report failure to Discord
-        if: failure()
-        env:
-          DISCORD_WEBHOOK: ${{ secrets.DISCORD_MONITORING_URL }}
-        uses: Ilshidur/action-discord@master
-        with:
-          args: |
-            The generation of some or all sandboxes on the **main** branch has failed.
-            [See the job summary for details](https://github.com/${{ github.repository }}/actions/runs/${{ github.run_id }})
+#  generate-main:
+#    name: Generate to main
+#    runs-on: ubuntu-latest
+#    steps:
+#      - uses: actions/checkout@v4
+#        with:
+#          ref: main
+#
+#      - uses: actions/setup-node@v4
+#        with:
+#          node-version-file: ".nvmrc"
+#
+#      - name: Setup git user
+#        run: |
+#          git config --global user.name "storybook-bot"
+#          git config --global user.email "32066757+storybook-bot@users.noreply.github.com"
+#
+#      - name: Install dependencies
+#        working-directory: ./scripts
+#        run: node --experimental-modules ./check-dependencies.js
+#
+#      - name: Compile Storybook libraries
+#        run: yarn task --task compile --start-from=auto --no-link
+#
+#      - name: Publish to local registry
+#        run: yarn local-registry --publish
+#
+#      - name: Run local registry
+#        run: yarn local-registry --open &
+#
+#      - name: Wait for registry
+#        run: yarn wait-on tcp:127.0.0.1:6001
+#
+#      - name: Generate
+#        id: generate
+#        run: yarn generate-sandboxes --local-registry
+#
+#      - name: Publish
+#        # publish sandboxes even if the generation fails, as some sandboxes might have been generated successfully
+#        if: ${{ !cancelled() }}
+#        run: yarn publish-sandboxes --remote=https://storybook-bot:${{ secrets.PAT_STORYBOOK_BOT }}@github.com/storybookjs/sandboxes.git --push --branch=main
+#
+#      - name: Report failure to Discord
+#        if: failure()
+#        env:
+#          DISCORD_WEBHOOK: ${{ secrets.DISCORD_MONITORING_URL }}
+#        uses: Ilshidur/action-discord@master
+#        with:
+#          args: |
+#            The generation of some or all sandboxes on the **main** branch has failed.
+#            [See the job summary for details](https://github.com/${{ github.repository }}/actions/runs/${{ github.run_id }})
diff --git a/code/.storybook/main.ts b/code/.storybook/main.ts
@@ -80,10 +80,18 @@ const config: StorybookConfig = {
       directory: '../addons/interactions/src',
       titlePrefix: 'addons/interactions',
     },
-    // {
-    //   directory: '../addons/interactions/template/stories',
-    //   titlePrefix: 'addons/interactions',
-    // },
+    {
+      directory: '../addons/interactions/template/stories',
+      titlePrefix: 'addons/interactions/tests',
+    },
+    {
+      directory: '../addons/test/src/components',
+      titlePrefix: 'addons/test',
+    },
+    {
+      directory: '../addons/test/template/stories',
+      titlePrefix: 'addons/test',
+    },
   ],
   addons: [
     '@storybook/addon-themes',

diff --git a/code/.storybook/preview.tsx b/code/.storybook/preview.tsx
@@ -18,8 +18,6 @@ import { DocsContext } from '@storybook/blocks';
 import { global } from '@storybook/global';
 import type { Decorator, Loader, ReactRenderer } from '@storybook/react';
 
-import { MINIMAL_VIEWPORTS } from '@storybook/addon-viewport';
-
 import { DocsPageWrapper } from '../lib/blocks/src/components';
 import { isChromatic } from './isChromatic';
 
@@ -135,7 +133,9 @@ export const loaders = [
    * The DocsContext will then be added via the decorator below.
    */
   async ({ parameters: { relativeCsfPaths, attached = true } }) => {
-    if (!relativeCsfPaths) {
+    // TODO bring a better way to skip tests when running as part of the vitest plugin instead of __STORYBOOK_URL__
+    // eslint-disable-next-line no-underscore-dangle
+    if (!relativeCsfPaths || (import.meta as any).env?.__STORYBOOK_URL__) {
       return {};
     }
     const csfFiles = await Promise.all(
@@ -358,3 +358,5 @@ export const parameters = {
     },
   },
 };
+
+export const tags = ['test', 'vitest'];
diff --git a/code/.storybook/storybook.setup.ts b/code/.storybook/storybook.setup.ts
@@ -3,6 +3,9 @@ import { beforeAll, vi, expect as vitestExpect } from 'vitest';
 import { setProjectAnnotations } from '@storybook/react';
 import { userEvent as storybookEvent, expect as storybookExpect } from '@storybook/test';
 
+// eslint-disable-next-line import/namespace
+import * as testAnnotations from '@storybook/experimental-addon-test/preview';
+
 import * as coreAnnotations from '../addons/toolbars/template/stories/preview';
 import * as componentAnnotations from '../core/template/stories/preview';
 // register global components used in many stories
@@ -17,6 +20,7 @@ const annotations = setProjectAnnotations([
   // @ts-expect-error check type errors later
   componentAnnotations,
   coreAnnotations,
+  testAnnotations,
   {
     // experiment with injecting Vitest's interactivity API over our userEvent while tests run in browser mode
     // https://vitest.dev/guide/browser/interactivity-api.html