Merge remote-tracking branch 'origin/next' into kasper/fix-sandboxes-…

…next
storybookjs · Oct 24, 2024 · 63ddd1c · 63ddd1c
2 parents 03ebda7 + eb2200c
commit 63ddd1c
Show file tree

Hide file tree

Showing 167 changed files with 16,862 additions and 726 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/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

diff --git a/code/.storybook/vitest.config.ts b/code/.storybook/vitest.config.ts
@@ -19,29 +19,39 @@ if (process.env.INSPECT === 'true') {
 
 export default mergeConfig(
   vitestCommonConfig,
+  // @ts-expect-error added this because of testNamePattern below
   defineProject({
     plugins: [
       import('@storybook/experimental-addon-test/vitest-plugin').then(({ storybookTest }) =>
         storybookTest({
           configDir: process.cwd(),
+          tags: {
+            include: ['vitest'],
+          },
         })
       ),
       ...extraPlugins,
     ],
     test: {
       name: 'storybook-ui',
       include: [
-        // TODO: test all core and addon stories later
-        // './core/**/components/**/*.{story,stories}.?(c|m)[jt]s?(x)',
-        '../addons/**/src/**/*.{story,stories}.?(c|m)[jt]s?(x)',
+        '../addons/**/*.{story,stories}.?(c|m)[jt]s?(x)',
+        // '../core/template/stories/**/*.{story,stories}.?(c|m)[jt]s?(x)',
+        '../core/src/manager/**/*.{story,stories}.?(c|m)[jt]s?(x)',
+        '../core/src/preview-api/**/*.{story,stories}.?(c|m)[jt]s?(x)',
+        '../core/src/components/{brand,components}/**/*.{story,stories}.?(c|m)[jt]s?(x)',
       ],
       exclude: [
         ...defaultExclude,
         '../node_modules/**',
         '**/__mockdata__/**',
+        '../**/__mockdata__/**',
         // expected to fail in Vitest because of fetching /iframe.html to cause ECONNREFUSED
         '**/Zoom.stories.tsx',
       ],
+      // TODO: bring this back once portable stories support @storybook/core/preview-api hooks
+      // @ts-expect-error this type does not exist but the property does!
+      testNamePattern: /^(?!.*(UseState)).*$/,
       browser: {
         enabled: true,
         name: 'chromium',

diff --git a/code/addons/a11y/package.json b/code/addons/a11y/package.json
@@ -60,7 +60,7 @@
   },
   "devDependencies": {
     "@storybook/global": "^5.0.0",
-    "@storybook/icons": "^1.2.10",
+    "@storybook/icons": "^1.2.12",
     "@testing-library/react": "^14.0.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",

diff --git a/code/addons/backgrounds/package.json b/code/addons/backgrounds/package.json
@@ -60,7 +60,7 @@
     "ts-dedent": "^2.0.0"
   },
   "devDependencies": {
-    "@storybook/icons": "^1.2.10",
+    "@storybook/icons": "^1.2.12",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "typescript": "^5.3.2"

diff --git a/code/addons/controls/package.json b/code/addons/controls/package.json
@@ -56,7 +56,7 @@
   },
   "devDependencies": {
     "@storybook/blocks": "workspace:*",
-    "@storybook/icons": "^1.2.10",
+    "@storybook/icons": "^1.2.12",
     "react": "^18.2.0",
     "react-dom": "^18.2.0"
   },

diff --git a/code/addons/docs/docs/props-tables.md b/code/addons/docs/docs/props-tables.md
@@ -191,16 +191,16 @@ Controls customization has an entire section in the [documentation](https://stor
 
 Here are the possible customizations for the rest of the prop table:
 
-| Field                        | Description                                                                                          |
-| ---------------------------- | ---------------------------------------------------------------------------------------------------- |
-| `name`                       | The name of the property                                                                             |
-| `type.required`              | Whether or not the property is required                                                              |
-| `description`                | A markdown description for the property                                                              |
-| `table.type.summary`         | A short version of the type                                                                          |
-| `table.type.detail`          | A longer version of the type (if it's a complex type)                                                |
-| `table.defaultValue.summary` | A short version of the default value                                                                 |
-| `table.defaultValue.detail`  | A longer version of the default value (if it's a complex value)                                      |
-| `control`                    | See [`addon-controls` README](https://storybook.js.org/docs/essentials/controls#configuration)       |
+| Field                        | Description                                                                                    |
+| ---------------------------- | ---------------------------------------------------------------------------------------------- |
+| `name`                       | The name of the property                                                                       |
+| `type.required`              | Whether or not the property is required                                                        |
+| `description`                | A markdown description for the property                                                        |
+| `table.type.summary`         | A short version of the type                                                                    |
+| `table.type.detail`          | A longer version of the type (if it's a complex type)                                          |
+| `table.defaultValue.summary` | A short version of the default value                                                           |
+| `table.defaultValue.detail`  | A longer version of the default value (if it's a complex value)                                |
+| `control`                    | See [`addon-controls` README](https://storybook.js.org/docs/essentials/controls#configuration) |
 
 ## Reporting a bug
 

diff --git a/code/addons/interactions/template/stories/basics.stories.ts b/code/addons/interactions/template/stories/basics.stories.ts
@@ -115,10 +115,17 @@ const UserEventSetup = {
         { keys: '[TouchA>]', target: canvas.getByRole('textbox') },
         { keys: '[/TouchA]' },
       ]);
-      await user.tab();
-      await user.keyboard('{enter}');
       const submitButton = await canvas.findByRole('button');
-      await expect(submitButton).toHaveFocus();
+
+      if (navigator.userAgent.toLowerCase().includes('firefox')) {
+        // user event has a few issues on firefox, therefore we do it differently
+        await fireEvent.click(submitButton);
+      } else {
+        await user.tab();
+        await user.keyboard('{enter}');
+        await expect(submitButton).toHaveFocus();
+      }
+
       await expect(args.onSuccess).toHaveBeenCalled();
     });
   },

diff --git a/code/addons/jest/package.json b/code/addons/jest/package.json
@@ -58,7 +58,7 @@
     "upath": "^2.0.1"
   },
   "devDependencies": {
-    "@storybook/icons": "^1.2.10",
+    "@storybook/icons": "^1.2.12",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-resize-detector": "^7.1.2",

diff --git a/code/addons/measure/package.json b/code/addons/measure/package.json
@@ -71,7 +71,7 @@
     "tiny-invariant": "^1.3.1"
   },
   "devDependencies": {
-    "@storybook/icons": "^1.2.10",
+    "@storybook/icons": "^1.2.12",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "typescript": "^5.3.2"

diff --git a/code/addons/onboarding/package.json b/code/addons/onboarding/package.json
@@ -49,7 +49,7 @@
   },
   "devDependencies": {
     "@radix-ui/react-dialog": "^1.0.5",
-    "@storybook/icons": "^1.2.10",
+    "@storybook/icons": "^1.2.12",
     "@storybook/react": "workspace:*",
     "framer-motion": "^11.0.3",
     "react": "^18.2.0",

diff --git a/code/addons/outline/package.json b/code/addons/outline/package.json
@@ -61,7 +61,7 @@
     "ts-dedent": "^2.0.0"
   },
   "devDependencies": {
-    "@storybook/icons": "^1.2.10",
+    "@storybook/icons": "^1.2.12",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "typescript": "^5.3.2"

diff --git a/code/addons/test/manager.js b/code/addons/test/manager.js
@@ -0,0 +1 @@
+import './dist/manager';