From 2a4413bfc93c48d5ec0113b3244c5d9c00659dd3 Mon Sep 17 00:00:00 2001 From: Yann Braga Date: Wed, 27 Dec 2023 14:14:22 -0300 Subject: [PATCH 1/3] CLI: Add Storyshots migration notice --- README.md | 6 +- code/addons/docs/README.md | 14 ----- code/lib/cli/src/automigrate/fixes/index.ts | 2 + .../fixes/storyshots-migration.test.ts | 60 +++++++++++++++++++ .../automigrate/fixes/storyshots-migration.ts | 30 ++++++++++ docs/configure/frameworks-feature-support.md | 2 +- docs/writing-tests/snapshot-testing.md | 2 +- 7 files changed, 98 insertions(+), 18 deletions(-) create mode 100644 code/lib/cli/src/automigrate/fixes/storyshots-migration.test.ts create mode 100644 code/lib/cli/src/automigrate/fixes/storyshots-migration.ts diff --git a/README.md b/README.md index 7c174bdcc250..263ee639e993 100644 --- a/README.md +++ b/README.md @@ -136,7 +136,7 @@ For additional help, share your issue in [the repo's GitHub Discussions](https:/ See [Addon / Framework Support Table](https://storybook.js.org/docs/react/api/frameworks-feature-support) -### Deprecated Addons +### Deprecated/Removed Addons | Addons | | | -------------------------------------------------------------------------------------------- | ---------------------------------------------------------- | @@ -147,12 +147,14 @@ See [Addon / Framework Support Table](https://storybook.js.org/docs/react/api/fr | [options](https://www.npmjs.com/package/@storybook/addon-options) | Customize the Storybook UI in code | | [storyshots](https://github.com/storybookjs/storybook/tree/main/code/addons/storyshots-core) | Snapshot testing for components in Storybook | -To continue improving your experience, we have to eventually deprecate certain addons in favor of new and better tools. +To continue improving your experience, we have to eventually deprecate or remove certain addons in favor of new and better tools. If you're using info/notes, we highly recommend you migrate to [docs](code/addons/docs/) instead, and [here is a guide](code/addons/docs/docs/recipes.md#migrating-from-notesinfo-addons) to help you. If you're using contexts, we highly recommend you migrate to [toolbars](https://github.com/storybookjs/storybook/tree/next/code/addons/toolbars) and [here is a guide](https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#deprecated-addon-contexts) to help you. +If you're using addon-storyshots, we highly recommend you migrate to the Storybook [test-runner](https://github.com/storybookjs/test-runner) and [here is a guide](https://storybook.js.org/docs/writing-tests/storyshots-migration-guide) to help you. + ## Badges & Presentation materials We have a badge! Link it to your live Storybook example. diff --git a/code/addons/docs/README.md b/code/addons/docs/README.md index 9a9a3debad2a..379b23f2d8a1 100644 --- a/code/addons/docs/README.md +++ b/code/addons/docs/README.md @@ -110,20 +110,6 @@ export default { }; ``` -If using in conjunction with the [storyshots add-on](https://github.com/storybookjs/storybook/blob/next/code/addons/storyshots-core/README.md), you will need to -configure Jest to transform MDX stories into something Storyshots can understand: - -Add the following to your Jest configuration: - -```json -{ - "transform": { - "^.+\\.[tj]sx?$": "babel-jest", - "^.+\\.mdx$": "@storybook/addon-docs/jest-transform-mdx" - } -} -``` - ### Be sure to check framework specific installation needs - [React](https://github.com/storybookjs/storybook/tree/next/code/addons/docs/react) (covered here) diff --git a/code/lib/cli/src/automigrate/fixes/index.ts b/code/lib/cli/src/automigrate/fixes/index.ts index bd33074805d8..0c6202f24264 100644 --- a/code/lib/cli/src/automigrate/fixes/index.ts +++ b/code/lib/cli/src/automigrate/fixes/index.ts @@ -19,6 +19,7 @@ import { incompatibleAddons } from './incompatible-addons'; import { angularBuildersMultiproject } from './angular-builders-multiproject'; import { wrapRequire } from './wrap-require'; import { reactDocgen } from './react-docgen'; +import { storyshotsMigration } from './storyshots-migration'; export * from '../types'; @@ -42,6 +43,7 @@ export const allFixes: Fix[] = [ angularBuilders, wrapRequire, reactDocgen, + storyshotsMigration, ]; export const initFixes: Fix[] = [missingBabelRc, eslintPlugin]; diff --git a/code/lib/cli/src/automigrate/fixes/storyshots-migration.test.ts b/code/lib/cli/src/automigrate/fixes/storyshots-migration.test.ts new file mode 100644 index 000000000000..4a7ccc9d335a --- /dev/null +++ b/code/lib/cli/src/automigrate/fixes/storyshots-migration.test.ts @@ -0,0 +1,60 @@ +import { describe, afterEach, it, expect, vi } from 'vitest'; + +import type { StorybookConfig } from '@storybook/types'; +import { storyshotsMigration } from './storyshots-migration'; +import type { JsPackageManager } from '../../js-package-manager'; + +const check = async ({ + packageManager, + main: mainConfig = {}, + storybookVersion = '8.0.0', +}: { + packageManager: Partial; + main?: Partial & Record; + storybookVersion?: string; +}) => { + return storyshotsMigration.check({ + packageManager: packageManager as any, + configDir: '', + mainConfig: mainConfig as any, + storybookVersion, + }); +}; + +describe('storyshots-migration fix', () => { + afterEach(() => { + vi.restoreAllMocks(); + }); + + it('should detect storyshots registered in main.js', async () => { + await expect( + check({ + packageManager: { + getAllDependencies: async () => ({}), + }, + main: { addons: ['@storybook/addon-storyshots'] }, + }) + ).resolves.toBeTruthy(); + }); + + it('should detect storyshots in package.json', async () => { + await expect( + check({ + packageManager: { + getAllDependencies: async () => ({ '@storybook/addon-storyshots': '7.0.0' }), + }, + }) + ).resolves.toBeTruthy(); + }); + + it('no-op when storyshots is not present', async () => { + await expect( + check({ + packageManager: { + getAllDependencies: async () => ({}), + }, + main: { addons: ['@storybook/essentials'] }, + }) + ).resolves.toBeNull(); + }); +}); diff --git a/code/lib/cli/src/automigrate/fixes/storyshots-migration.ts b/code/lib/cli/src/automigrate/fixes/storyshots-migration.ts new file mode 100644 index 000000000000..6d047f88449f --- /dev/null +++ b/code/lib/cli/src/automigrate/fixes/storyshots-migration.ts @@ -0,0 +1,30 @@ +import chalk from 'chalk'; +import dedent from 'ts-dedent'; +import type { Fix } from '../types'; + +export const storyshotsMigration: Fix = { + id: 'storyshots-migration', + promptOnly: true, + + async check({ mainConfig, packageManager }) { + const allDeps = await packageManager.getAllDependencies(); + const hasStoryshots = + allDeps['@storybook/addon-storyshots'] || + mainConfig.addons?.find((addon) => { + const addonName = typeof addon === 'string' ? addon : addon.name; + return addonName.includes('@storybook/addon-storyshots'); + }); + + return hasStoryshots ?? null; + }, + prompt() { + return dedent` + ${chalk.bold( + 'Attention' + )}: Storyshots is now officially deprecated, is no longer being maintained, and was removed in Storybook 8. + + We recommend following the migration guide we've prepared to help you during this transition period: + ${chalk.yellow('https://storybook.js.org/docs/writing-tests/storyshots-migration-guide')} + `; + }, +}; diff --git a/docs/configure/frameworks-feature-support.md b/docs/configure/frameworks-feature-support.md index 306ee9e94160..498d984cabec 100644 --- a/docs/configure/frameworks-feature-support.md +++ b/docs/configure/frameworks-feature-support.md @@ -113,5 +113,5 @@ To align the Storybook ecosystem with the current state of frontend development, | Feature | Status | | -------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | [Knobs](https://github.com/storybookjs/addon-knobs) | The Knobs addon was officially deprecated with the release of Storybook 6.3 and is no longer actively maintained. We recommend using the [controls](../essentials/controls.md) instead. | -| [Storyshots](../writing-tests/snapshot-testing.md) | The Storyshots addon was officially deprecated with the release of Storybook 7.6 and is no longer actively maintained. See the [migration guide](../writing-tests/storyshots-migration-guide.md) for the available alternatives. | +| [Storyshots](../writing-tests/snapshot-testing.md) | The Storyshots addon was officially deprecated with the release of Storybook 7.6, is no longer actively maintained and was removed in Storybook 8. See the [migration guide](../writing-tests/storyshots-migration-guide.md) for the available alternatives. | | [`StoriesOf`](https://github.com/storybookjs/storybook/blob/next/code/lib/preview-api/docs/storiesOf.md) | The `storiesOf` API was officially deprecated with the release of Storybook 7.5 and is no longer actively maintained. We recommend using the [CSF API](../api/csf.md) instead for writing stories.
See the [migration guide](https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#storystorev6-and-storiesof-is-deprecated) for more information. | diff --git a/docs/writing-tests/snapshot-testing.md b/docs/writing-tests/snapshot-testing.md index 8570dd376179..438258b36adb 100644 --- a/docs/writing-tests/snapshot-testing.md +++ b/docs/writing-tests/snapshot-testing.md @@ -16,7 +16,7 @@ The Storyshots addon was the original testing solution for Storybook, offering a -The Storyshots addon has been deprecated and will be removed in a future release of Storybook. See the [migration guide](./storyshots-migration-guide.md) for more information. +The Storyshots addon was deprecated and has been removed in Storybook 8. See the [migration guide](./storyshots-migration-guide.md) for more information. From f347c154214ac1e0c6ef024dc749e304db481579 Mon Sep 17 00:00:00 2001 From: Yann Braga Date: Wed, 27 Dec 2023 16:00:16 -0300 Subject: [PATCH 2/3] add test timeout --- .../src/modules/preview-web/PreviewWeb.integration.test.ts | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/code/lib/preview-api/src/modules/preview-web/PreviewWeb.integration.test.ts b/code/lib/preview-api/src/modules/preview-web/PreviewWeb.integration.test.ts index b3d7aa04bde9..494ceec4c7ae 100644 --- a/code/lib/preview-api/src/modules/preview-web/PreviewWeb.integration.test.ts +++ b/code/lib/preview-api/src/modules/preview-web/PreviewWeb.integration.test.ts @@ -111,7 +111,9 @@ describe('PreviewWeb', () => { await waitForRender(); expect(docsRoot.outerHTML).toMatchInlineSnapshot('"
INSIDE
"'); - }); + // Extended timeout to try and avoid + // Error: Event was not emitted in time: storyRendered,docsRendered,storyThrewException,storyErrored,storyMissing + }, 10_000); // TODO @tmeasday please help fixing this test it.skip('sends docs rendering exceptions to showException', async () => { From ea26963386635645c765654ab0b26b96dfaf281a Mon Sep 17 00:00:00 2001 From: Yann Braga Date: Tue, 2 Jan 2024 09:59:20 -0300 Subject: [PATCH 3/3] add storyshots migration guide to migration notes --- MIGRATION.md | 20 +++++++++++--------- 1 file changed, 11 insertions(+), 9 deletions(-) diff --git a/MIGRATION.md b/MIGRATION.md index c69c72a1fc66..f5e956711c63 100644 --- a/MIGRATION.md +++ b/MIGRATION.md @@ -407,22 +407,24 @@ Addon authors are advised to upgrade to react v18. #### Storyshots has been removed -Storyshots was an addon for storybook which allowed users to turn their stories into automated snapshot-tests. +Storyshots was an addon for Storybook which allowed users to turn their stories into automated snapshot tests. -Every story would automatically be taken into account and created a snapshot-file for. +Every story would automatically be taken into account and create a snapshot file. -Snapshot-testing has since fallen out of favor and is no longer recommended. +Snapshot testing has since fallen out of favor and is no longer recommended. -In addition to it's limited use, and high chance of false-positives, storyshots ran code developed to run in the browser in NodeJS via JSDOM. -JSDOM has limitations and is not a perfect emulation of the browser environment; therefore storyshots was always a pain to setup and maintain. +In addition to its limited use, and high chance of false positives, Storyshots ran code developed to run in the browser in NodeJS via JSDOM. +JSDOM has limitations and is not a perfect emulation of the browser environment; therefore, Storyshots was always a pain to set up and maintain. -The storybook team has build the test-runner as a direct replacement, which utilizes playwright to connect to an actual browser where storybook runs the code. +The Storybook team has built the test-runner as a direct replacement, which utilizes Playwright to connect to an actual browser where Storybook runs the code. -In addition CSF has expanded to allow for play-function to be defined on stories, which allows for more complex testing scenarios, fully integrated within storybook itself (and supported by the test-runner, and not storyshots). +In addition, CSF has expanded to allow for play functions to be defined on stories, which allows for more complex testing scenarios, fully integrated within Storybook itself (and supported by the test-runner, and not Storyshots). -Finally `storyStoreV7: true` (the default and only options in storybook 8), was not supported by storyshots. +Finally, storyStoreV7: true (the default and only option in Storybook 8), was not supported by Storyshots. -By removing storyshots, the storybook team was unblocked from moving (eventually) to an ESM-only storybook, which is a big step towards a more modern storybook. +By removing Storyshots, the Storybook team was unblocked from moving (eventually) to an ESM-only Storybook, which is a big step towards a more modern Storybook. + +Please check the [migration guide](https://storybook.js.org/docs/writing-tests/storyshots-migration-guide) that we prepared. #### UI layout state has changed shape