Merge branch 'next' of github.com:storybookjs/storybook into pr/gitst…

…art/19807

.circleci/config.yml

@@ -19,7 +19,7 @@ executors:
     docker:
       - image: cimg/node:16.17.1
         environment:
-          NODE_OPTIONS: --max_old_space_size=3076
+          NODE_OPTIONS: --max_old_space_size=6144
     resource_class: <<parameters.class>>
   sb_node_16_browsers:
     parameters:
@@ -32,7 +32,7 @@ executors:
     docker:
       - image: cimg/node:16.17.1-browsers
         environment:
-          NODE_OPTIONS: --max_old_space_size=3076
+          NODE_OPTIONS: --max_old_space_size=6144
     resource_class: <<parameters.class>>
   sb_playwright:
     parameters:
@@ -43,9 +43,9 @@ executors:
         default: 'small'
     working_directory: /tmp/storybook
     docker:
-      - image: mcr.microsoft.com/playwright:v1.27.0-focal
+      - image: mcr.microsoft.com/playwright:v1.28.0-focal
         environment:
-          NODE_OPTIONS: --max_old_space_size=3076
+          NODE_OPTIONS: --max_old_space_size=6144
     resource_class: <<parameters.class>>
 
 orbs:
@@ -377,7 +377,7 @@ jobs:
           name: Test
           command: |
             cd code
-            yarn test --coverage --ci
+            yarn test --coverage --ci --runInBand
       - store_test_results:
           path: code/junit.xml
       - persist_to_workspace:
@@ -403,8 +403,10 @@ jobs:
       - report-workflow-on-failure
   chromatic-internal-storybooks:
     executor:
-      class: medium
+      class: medium+
       name: sb_node_16_browsers
+    environment:
+        NODE_OPTIONS: --max_old_space_size=6144
     steps:
       # switched this to the CircleCI helper to get the full git history for TurboSnap
       - checkout

code/addons/a11y/jest.config.js

@@ -0,0 +1,7 @@
+const path = require('path');
+const baseConfig = require('../../jest.config.browser');
+
+module.exports = {
+  ...baseConfig,
+  displayName: __dirname.split(path.sep).slice(-2).join(path.posix.sep),
+};

code/addons/actions/jest.config.js

@@ -0,0 +1,7 @@
+const path = require('path');
+const baseConfig = require('../../jest.config.browser');
+
+module.exports = {
+  ...baseConfig,
+  displayName: __dirname.split(path.sep).slice(-2).join(path.posix.sep),
+};

code/addons/backgrounds/jest.config.js

@@ -0,0 +1,7 @@
+const path = require('path');
+const baseConfig = require('../../jest.config.browser');
+
+module.exports = {
+  ...baseConfig,
+  displayName: __dirname.split(path.sep).slice(-2).join(path.posix.sep),
+};

code/addons/controls/jest.config.js

@@ -0,0 +1,7 @@
+const path = require('path');
+const baseConfig = require('../../jest.config.browser');
+
+module.exports = {
+  ...baseConfig,
+  displayName: __dirname.split(path.sep).slice(-2).join(path.posix.sep),
+};

code/addons/docs/jest.config.js

@@ -0,0 +1,7 @@
+const path = require('path');
+const baseConfig = require('../../jest.config.browser');
+
+module.exports = {
+  ...baseConfig,
+  displayName: __dirname.split(path.sep).slice(-2).join(path.posix.sep),
+};

code/addons/docs/package.json

@@ -56,7 +56,7 @@
     "./angular": "./angular/index.js",
     "./angular/index.js": "./angular/index.js",
     "./web-components/index.js": "./web-components/index.js",
-    "./jest-transform-mdx.js": "./jest-transform-mdx.js",
+    "./jest-transform-mdx": "./jest-transform-mdx.js",
     "./package.json": "./package.json"
   },
   "main": "dist/index.js",
@@ -85,7 +85,7 @@
   },
   "dependencies": {
     "@babel/plugin-transform-react-jsx": "^7.12.12",
-    "@jest/transform": "^26.6.2",
+    "@jest/transform": "^28.0.0",
     "@mdx-js/react": "^2.1.5",
     "@storybook/blocks": "7.0.0-alpha.49",
     "@storybook/components": "7.0.0-alpha.49",

code/addons/essentials/jest.config.js

@@ -0,0 +1,7 @@
+const path = require('path');
+const baseConfig = require('../../jest.config.browser');
+
+module.exports = {
+  ...baseConfig,
+  displayName: __dirname.split(path.sep).slice(-2).join(path.posix.sep),
+};

code/addons/essentials/package.json

@@ -129,7 +129,6 @@
   "devDependencies": {
     "@babel/core": "^7.12.10",
     "@storybook/vue": "7.0.0-alpha.49",
-    "@types/jest": "^26.0.16",
     "typescript": "~4.6.3"
   },
   "peerDependencies": {

code/addons/highlight/jest.config.js

@@ -0,0 +1,7 @@
+const path = require('path');
+const baseConfig = require('../../jest.config.browser');
+
+module.exports = {
+  ...baseConfig,
+  displayName: __dirname.split(path.sep).slice(-2).join(path.posix.sep),
+};

code/addons/interactions/jest.config.js

@@ -0,0 +1,7 @@
+const path = require('path');
+const baseConfig = require('../../jest.config.browser');
+
+module.exports = {
+  ...baseConfig,
+  displayName: __dirname.split(path.sep).slice(-2).join(path.posix.sep),
+};

code/addons/interactions/src/components/InteractionsPanel.stories.tsx

@@ -1,4 +1,3 @@
-/* eslint-disable jest/no-standalone-expect */
 import React from 'react';
 import type { StoryObj, Meta } from '@storybook/react';
 import { CallStates } from '@storybook/instrumenter';

code/addons/interactions/template/stories/basics.stories.ts

@@ -1,4 +1,3 @@
-/* eslint-disable jest/no-standalone-expect */
 import globalThis from 'global';
 import {
   within,

code/addons/jest/jest.config.js

@@ -0,0 +1,7 @@
+const path = require('path');
+const baseConfig = require('../../jest.config.browser');
+
+module.exports = {
+  ...baseConfig,
+  displayName: __dirname.split(path.sep).slice(-2).join(path.posix.sep),
+};

code/addons/jest/src/shared.test.ts

@@ -27,7 +27,7 @@ describe('defineJestParameter', () => {
   });
 
   test('returns null if filename is a module ID that cannot be inferred from', () => {
-    // @ts-expect-error (Converted from ts-ignore)
+    // @ts-expect-error Storybook's fileName type is string, but according to this test it could be number in case it is a module id.
     expect(defineJestParameter({ fileName: 1234 })).toBeNull();
   });
 });

code/addons/jest/src/shared.ts

@@ -1,4 +1,4 @@
-import type { Parameters } from '@storybook/types';
+import type { StorybookInternalParameters } from '@storybook/types';
 
 // addons, panels and events get unique names using a prefix
 export const PARAM_KEY = 'test';
@@ -7,7 +7,7 @@ export const PANEL_ID = `${ADDON_ID}/panel`;
 
 export const ADD_TESTS = `${ADDON_ID}/add_tests`;
 
-interface AddonParameters extends Parameters {
+interface AddonParameters extends StorybookInternalParameters {
   jest?: string | string[] | { disabled: true };
 }
 

code/addons/links/jest.config.js

@@ -0,0 +1,7 @@
+const path = require('path');
+const baseConfig = require('../../jest.config.browser');
+
+module.exports = {
+  ...baseConfig,
+  displayName: __dirname.split(path.sep).slice(-2).join(path.posix.sep),
+};

code/addons/measure/jest.config.js

@@ -0,0 +1,7 @@
+const path = require('path');
+const baseConfig = require('../../jest.config.browser');
+
+module.exports = {
+  ...baseConfig,
+  displayName: __dirname.split(path.sep).slice(-2).join(path.posix.sep),
+};

code/addons/outline/jest.config.js

@@ -0,0 +1,7 @@
+const path = require('path');
+const baseConfig = require('../../jest.config.browser');
+
+module.exports = {
+  ...baseConfig,
+  displayName: __dirname.split(path.sep).slice(-2).join(path.posix.sep),
+};

code/addons/storyshots/jest.config.js

@@ -0,0 +1,12 @@
+const path = require('path');
+const baseConfig = require('../../jest.config.browser');
+
+module.exports = {
+  ...baseConfig,
+  snapshotSerializers: [...baseConfig.snapshotSerializers, 'enzyme-to-json/serializer'],
+  transform: {
+    ...baseConfig.transform,
+    '^.+\\.stories\\.[jt]sx?$': '@storybook/addon-storyshots/injectFileName',
+  },
+  displayName: __dirname.split(path.sep).slice(-2).join(path.posix.sep),
+};

code/addons/storyshots/storyshots-core/package.json

@@ -37,7 +37,7 @@
     "storybook": "yarn sb dev -p 6006"
   },
   "dependencies": {
-    "@jest/transform": "^26.6.2",
+    "@jest/transform": "^28.0.0",
     "@storybook/addons": "7.0.0-alpha.49",
     "@storybook/babel-plugin-require-context-hook": "1.0.1",
     "@storybook/client-api": "7.0.0-alpha.49",
@@ -46,14 +46,13 @@
     "@storybook/core-webpack": "7.0.0-alpha.49",
     "@storybook/types": "7.0.0-alpha.49",
     "@types/glob": "^7.1.3",
-    "@types/jest": "^26.0.16",
     "@types/jest-specific-snapshot": "^0.5.3",
     "core-js": "^3.8.2",
     "glob": "^7.1.6",
     "global": "^4.4.0",
-    "jest-specific-snapshot": "^4.0.0",
+    "jest-specific-snapshot": "^6.0.0",
     "preact-render-to-string": "^5.1.19",
-    "pretty-format": "^26.6.2",
+    "pretty-format": "^28.0.0",
     "react-test-renderer": "^16.8.0 || ^17.0.0 || ^18.0.0",
     "read-pkg-up": "^7.0.1",
     "ts-dedent": "^2.0.0"

code/addons/storyshots/storyshots-core/src/Stories2SnapsConverter.test.ts

@@ -4,33 +4,33 @@ const target = new Stories2SnapsConverter();
 
 describe('getSnapshotFileName', () => {
   it('fileName is provided - snapshot is stored in __snapshots__ dir', () => {
-    const context = { fileName: 'foo.js' };
+    const context = { fileName: 'foo.js', kind: 'kind' };
 
-    // @ts-expect-error (TODO)
     const result = target.getSnapshotFileName(context);
     const platformAgnosticResult = result.replace(/\\|\//g, '/');
 
-    expect(platformAgnosticResult).toBe('__snapshots__/foo.storyshot');
+    // This is an absolute path, so we need to use `toContain()`
+    expect(platformAgnosticResult).toContain('__snapshots__/foo.storyshot');
   });
 
   it('fileName with multiple extensions is provided - only the last extension is replaced', () => {
-    const context = { fileName: 'foo.web.stories.js' };
+    const context = { fileName: 'foo.web.stories.js', kind: 'kind' };
 
-    // @ts-expect-error (TODO)
     const result = target.getSnapshotFileName(context);
     const platformAgnosticResult = result.replace(/\\|\//g, '/');
 
-    expect(platformAgnosticResult).toBe('__snapshots__/foo.web.stories.storyshot');
+    // This is an absolute path, so we need to use `toContain()`
+    expect(platformAgnosticResult).toContain('__snapshots__/foo.web.stories.storyshot');
   });
 
   it('fileName with dir is provided - __snapshots__ dir is created inside another dir', () => {
-    const context = { fileName: 'test/foo.js' };
+    const context = { fileName: 'test/foo.js', kind: 'kind' };
 
-    // @ts-expect-error (TODO)
     const result = target.getSnapshotFileName(context);
     const platformAgnosticResult = result.replace(/\\|\//g, '/');
 
-    expect(platformAgnosticResult).toBe('test/__snapshots__/foo.storyshot');
+    // This is an absolute path, so we need to use `toContain()`
+    expect(platformAgnosticResult).toContain('test/__snapshots__/foo.storyshot');
   });
 });
 

code/addons/storyshots/storyshots-core/src/Stories2SnapsConverter.ts

@@ -29,7 +29,15 @@ export class Stories2SnapsConverter {
     const { dir, name } = path.parse(fileName);
     const { snapshotsDirName, snapshotExtension } = this.options;
 
-    return path.format({ dir: path.join(dir, snapshotsDirName), name, ext: snapshotExtension });
+    // Convert to absolute path, in case jest is not running in CWD,
+    // else it will create snapshots with the wrong path
+    const absDir = path.isAbsolute(dir) ? dir : path.resolve(dir);
+
+    return path.format({
+      dir: path.join(absDir, snapshotsDirName),
+      name,
+      ext: snapshotExtension,
+    });
   }
 
   getSnapshotFileName(context: { fileName?: string; kind: any }) {

code/addons/storysource/jest.config.js

@@ -0,0 +1,7 @@
+const path = require('path');
+const baseConfig = require('../../jest.config.browser');
+
+module.exports = {
+  ...baseConfig,
+  displayName: __dirname.split(path.sep).slice(-2).join(path.posix.sep),
+};

code/addons/toolbars/jest.config.js

@@ -0,0 +1,7 @@
+const path = require('path');
+const baseConfig = require('../../jest.config.browser');
+
+module.exports = {
+  ...baseConfig,
+  displayName: __dirname.split(path.sep).slice(-2).join(path.posix.sep),
+};

code/addons/viewport/jest.config.js

@@ -0,0 +1,7 @@
+const path = require('path');
+const baseConfig = require('../../jest.config.browser');
+
+module.exports = {
+  ...baseConfig,
+  displayName: __dirname.split(path.sep).slice(-2).join(path.posix.sep),
+};

code/frameworks/angular/jest.config.js

@@ -1,5 +1,12 @@
+const path = require('path');
+
 module.exports = {
+  displayName: __dirname.split(path.sep).slice(-2).join(path.posix.sep),
   preset: 'jest-preset-angular',
   setupFilesAfterEnv: ['<rootDir>/setup-jest.ts'],
-  transformIgnorePatterns: ['^.+\\.js$'],
+  transformIgnorePatterns: ['/node_modules/(?!@angular|rxjs|nanoid|uuid)'],
+  snapshotFormat: {
+    escapeString: true,
+    printBasicPrototype: true,
+  },
 };

code/frameworks/angular/package.json

@@ -81,9 +81,9 @@
     "@types/rimraf": "^3.0.2",
     "@types/tmp": "^0.2.3",
     "cross-spawn": "^7.0.3",
-    "jest": "^27.5.1",
+    "jest": "^28.0.0",
     "jest-preset-angular": "^12.0.0",
-    "jest-specific-snapshot": "^5.0.0",
+    "jest-specific-snapshot": "^6.0.0",
     "rimraf": "^3.0.2",
     "tmp": "^0.2.1",
     "typescript": "~4.6.3",

code/frameworks/angular/setup-jest.ts

@@ -1,4 +1,12 @@
 // eslint-disable-next-line import/no-extraneous-dependencies
 import 'jest-preset-angular/setup-jest';
 
+import { webcrypto } from 'node:crypto';
+
+Object.defineProperty(window, 'crypto', {
+  get() {
+    return webcrypto;
+  },
+});
+
 global.EventSource = class {} as any;