diff --git a/addons/docs/README.md b/addons/docs/README.md index d46737f42cd3..1dfb381053d1 100644 --- a/addons/docs/README.md +++ b/addons/docs/README.md @@ -121,6 +121,20 @@ configure(require.context('../src', true, /\.stories\.(js|mdx)$/), module); For more information on the new `configure`, see ["Loading stories"](https://github.com/storybookjs/storybook/blob/next/docs/src/pages/basics/writing-stories/index.md#loading-stories) in the Storybook documentation. +If using in conjunction with the [storyshots add-on](../storyshots/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" + } +} +``` + ## Preset options The `addon-docs` preset has a few configuration options that can be used to configure its babel/webpack loading behavior. Here's an example of how to use the preset with options: diff --git a/addons/docs/jest-transform-mdx.js b/addons/docs/jest-transform-mdx.js new file mode 100644 index 000000000000..9ce7e098d8b1 --- /dev/null +++ b/addons/docs/jest-transform-mdx.js @@ -0,0 +1,34 @@ +const path = require('path'); +const mdx = require('@mdx-js/mdx'); +const { ScriptTransformer } = require('@jest/transform'); +const { dedent } = require('ts-dedent'); + +const createCompiler = require('./mdx-compiler-plugin'); + +const compilers = [createCompiler({})]; + +const getNextTransformer = (filename, config) => { + const extension = path.extname(filename); + const jsFileName = `${filename.slice(0, -extension.length)}.js`; + const self = config.transform.find(([pattern]) => new RegExp(pattern).test(filename)); + const jsTransforms = config.transform.filter(([pattern]) => new RegExp(pattern).test(jsFileName)); + return new ScriptTransformer({ + ...config, + transform: [ + ...config.transform.filter(entry => entry !== self), + ...jsTransforms.map(([pattern, ...rest]) => [self[0], ...rest]), + ], + }); +}; + +module.exports = { + process(src, filename, config, { instrument }) { + const result = dedent` + /* @jsx mdx */ + import React from 'react' + import { mdx } from '@mdx-js/react' + ${mdx.sync(src, { compilers, filepath: filename })} + `; + return getNextTransformer(filename, config).transformSource(filename, result, instrument); + }, +}; diff --git a/addons/docs/package.json b/addons/docs/package.json index 201e498463ec..c8d4a361709d 100644 --- a/addons/docs/package.json +++ b/addons/docs/package.json @@ -39,6 +39,7 @@ "@babel/parser": "^7.4.2", "@babel/plugin-transform-react-jsx": "^7.3.0", "@egoist/vue-to-react": "^1.1.0", + "@jest/transform": "^24.9.0", "@mdx-js/loader": "^1.1.0", "@mdx-js/mdx": "^1.1.0", "@mdx-js/react": "^1.0.27", @@ -52,7 +53,8 @@ "global": "^4.3.2", "js-string-escape": "^1.0.1", "lodash": "^4.17.15", - "prop-types": "^15.7.2" + "prop-types": "^15.7.2", + "ts-dedent": "^1.1.0" }, "devDependencies": { "@types/prop-types": "^15.5.9", diff --git a/addons/storyshots/storyshots-core/.storybook/config.js b/addons/storyshots/storyshots-core/.storybook/config.js index 04b51c0e405f..79582f41050f 100644 --- a/addons/storyshots/storyshots-core/.storybook/config.js +++ b/addons/storyshots/storyshots-core/.storybook/config.js @@ -2,7 +2,7 @@ import { configure } from '@storybook/react'; configure( [ - require.context('../stories/required_with_context', false, /\.stories\.js$/), + require.context('../stories/required_with_context', false, /\.stories\.(js|mdx)$/), require.context('../stories/directly_required', false, /index\.js$/), ], module diff --git a/addons/storyshots/storyshots-core/.storybook/presets.js b/addons/storyshots/storyshots-core/.storybook/presets.js new file mode 100644 index 000000000000..b1d463490f6d --- /dev/null +++ b/addons/storyshots/storyshots-core/.storybook/presets.js @@ -0,0 +1 @@ +module.exports = ['@storybook/addon-docs/react/preset']; diff --git a/addons/storyshots/storyshots-core/README.md b/addons/storyshots/storyshots-core/README.md index 24aee4350ebd..0ad031893871 100644 --- a/addons/storyshots/storyshots-core/README.md +++ b/addons/storyshots/storyshots-core/README.md @@ -178,6 +178,23 @@ StoryShots addon for Preact is dependent on [preact-render-to-json](https://gith yarn add preact-render-to-json --dev ``` +### Configure Jest for MDX Docs Add-On Stories + +If using the [Docs add-on](../../docs/README.md) with +[MDX stories](../../docs/docs/mdx.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" + } +} +``` + ### Why don't we install dependencies of each framework ? Storyshots addon is currently supporting React, Angular and Vue. Each framework needs its own packages to be integrated with Jest. We don't want people that use only React will need to bring other dependencies that do not make sense for them. diff --git a/addons/storyshots/storyshots-core/package.json b/addons/storyshots/storyshots-core/package.json index 2370b2346c0c..1f72895f5e13 100644 --- a/addons/storyshots/storyshots-core/package.json +++ b/addons/storyshots/storyshots-core/package.json @@ -47,6 +47,9 @@ "ts-dedent": "^1.1.0" }, "devDependencies": { + "@storybook/addon-docs": "^5.3.0-alpha.11", + "@storybook/react": "^5.3.0-alpha.11", + "babel-loader": "^8.0.6", "enzyme-to-json": "^3.4.1", "jest-emotion": "^10.0.17", "react": "^16.8.3" diff --git a/addons/storyshots/storyshots-core/src/Stories2SnapsConverter.test.ts b/addons/storyshots/storyshots-core/src/Stories2SnapsConverter.test.ts index 3e7f51c41842..d26baf6ab696 100644 --- a/addons/storyshots/storyshots-core/src/Stories2SnapsConverter.test.ts +++ b/addons/storyshots/storyshots-core/src/Stories2SnapsConverter.test.ts @@ -43,6 +43,7 @@ describe('getPossibleStoriesFiles', () => { 'test/foo.web.stories.jsx', 'test/foo.web.stories.ts', 'test/foo.web.stories.tsx', + 'test/foo.web.stories.mdx', ]); }); }); diff --git a/addons/storyshots/storyshots-core/src/Stories2SnapsConverter.ts b/addons/storyshots/storyshots-core/src/Stories2SnapsConverter.ts index 0d1ec51dc624..a2514260446b 100644 --- a/addons/storyshots/storyshots-core/src/Stories2SnapsConverter.ts +++ b/addons/storyshots/storyshots-core/src/Stories2SnapsConverter.ts @@ -4,7 +4,7 @@ import dedent from 'ts-dedent'; const defaultOptions: Stories2SnapsConverterOptions = { snapshotsDirName: '__snapshots__', snapshotExtension: '.storyshot', - storiesExtensions: ['.js', '.jsx', '.ts', '.tsx'], + storiesExtensions: ['.js', '.jsx', '.ts', '.tsx', '.mdx'], }; export interface Stories2SnapsConverterOptions { diff --git a/addons/storyshots/storyshots-core/stories/__snapshots__/storyshot.enzyme.test.js.snap b/addons/storyshots/storyshots-core/stories/__snapshots__/storyshot.enzyme.test.js.snap index bdc1386c8a95..4bd1f88f130b 100644 --- a/addons/storyshots/storyshots-core/stories/__snapshots__/storyshot.enzyme.test.js.snap +++ b/addons/storyshots/storyshots-core/stories/__snapshots__/storyshot.enzyme.test.js.snap @@ -112,6 +112,210 @@ exports[`Storyshots Button With Text 1`] = ` `; +exports[`Storyshots Welcome MDX To Storybook 1`] = ` + +
+
+ + <h1> + Welcome to storybook + </h1> + +

+ This is a UI component dev environment for your app. +

+

+ We've added some basic stories inside the + + + src/stories + + + directory. +
+ A story is a single state of one or more UI components. You can have as many stories as you want. +
+ (Basically a story is like a visual test case.) +

+

+ See these sample + + + + for a component called  + + + Button + + + . +

+

+ Just like that, you can add your own components as stories. +
+ You can also edit those components and see changes right away. +
+ (Try editing the + + + Button + + + stories located at  + + + src/stories/index.js + + + .) +

+

+ Usually we create stories with smaller UI components in the app. +
+ Have a look at the  + + + Writing Stories + + +  section in our documentation. +

+ +

+ + NOTE: + +
+ Have a look at the + + + .storybook/webpack.config.js + + + to add webpack loaders and plugins you are using in this project. +

+ +
+
+ +`; + exports[`Storyshots Welcome To Storybook 1`] = ` `; +exports[`Storyshots Welcome MDX To Storybook 1`] = ` +
+ + Welcome to storybook + +

+ This is a UI component dev environment for your app. +

+

+ We've added some basic stories inside the + + src/stories + + directory. +
+ A story is a single state of one or more UI components. You can have as many stories as you want. +
+ (Basically a story is like a visual test case.) +

+

+ See these sample + + stories + + for a component called  + + Button + + . +

+

+ Just like that, you can add your own components as stories. +
+ You can also edit those components and see changes right away. +
+ (Try editing the + + Button + + stories located at  + + src/stories/index.js + + .) +

+

+ Usually we create stories with smaller UI components in the app. +
+ Have a look at the  + + Writing Stories + +  section in our documentation. +

+ + + NOTE: + +
+ Have a look at the + + .storybook/webpack.config.js + + to add webpack loaders and plugins you are using in this project. + +
+`; + exports[`Storyshots Welcome To Storybook 1`] = `
diff --git a/addons/storyshots/storyshots-core/stories/__snapshots__/storyshot.shallowWithOptions.test.js.snap b/addons/storyshots/storyshots-core/stories/__snapshots__/storyshot.shallowWithOptions.test.js.snap index 2a98ea6e4f9e..a0c27ed2b410 100644 --- a/addons/storyshots/storyshots-core/stories/__snapshots__/storyshot.shallowWithOptions.test.js.snap +++ b/addons/storyshots/storyshots-core/stories/__snapshots__/storyshot.shallowWithOptions.test.js.snap @@ -96,6 +96,80 @@ exports[`Storyshots Button With Text 1`] = ` </button> `; +exports[`Storyshots Welcome MDX To Storybook 1`] = ` +<Main> + <Title> + Welcome to storybook + +

+ This is a UI component dev environment for your app. +

+

+ We've added some basic stories inside the + + src/stories + + directory. +
+ A story is a single state of one or more UI components. You can have as many stories as you want. +
+ (Basically a story is like a visual test case.) +

+

+ See these sample + + stories + + for a component called  + + Button + + . +

+

+ Just like that, you can add your own components as stories. +
+ You can also edit those components and see changes right away. +
+ (Try editing the + + Button + + stories located at  + + src/stories/index.js + + .) +

+

+ Usually we create stories with smaller UI components in the app. +
+ Have a look at the  + + Writing Stories + +  section in our documentation. +

+ + + NOTE: + +
+ Have a look at the + + .storybook/webpack.config.js + + to add webpack loaders and plugins you are using in this project. + +
+`; + exports[`Storyshots Welcome To Storybook 1`] = `
diff --git a/addons/storyshots/storyshots-core/stories/__snapshots__/storyshot.snapshotWithOptionsFunction.test.js.snap b/addons/storyshots/storyshots-core/stories/__snapshots__/storyshot.snapshotWithOptionsFunction.test.js.snap index a264a1d2a60b..15dea97c439f 100644 --- a/addons/storyshots/storyshots-core/stories/__snapshots__/storyshot.snapshotWithOptionsFunction.test.js.snap +++ b/addons/storyshots/storyshots-core/stories/__snapshots__/storyshot.snapshotWithOptionsFunction.test.js.snap @@ -96,6 +96,180 @@ exports[`Storyshots Button With Text 1`] = ` </button> `; +exports[`Storyshots Welcome MDX To Storybook 1`] = ` +<article + style={ + Object { + "backgroundColor": "#fff", + "color": "#000", + "fontFamily": "\\"Helvetica Neue\\", Helvetica, \\"Segoe UI\\", Arial, freesans, sans-serif", + "lineHeight": 1.4, + "padding": 15, + } + } +> + <h1> + Welcome to storybook + </h1> + <p> + This is a UI component dev environment for your app. + </p> + <p> + We've added some basic stories inside the + <code + style={ + Object { + "backgroundColor": "#f3f2f2", + "border": "1px solid #eae9e9", + "borderRadius": 4, + "color": "#3a3a3a", + "fontSize": 15, + "fontWeight": 600, + "padding": "2px 5px", + } + } + > + src/stories + </code> + directory. + <br /> + A story is a single state of one or more UI components. You can have as many stories as you want. + <br /> + (Basically a story is like a visual test case.) + </p> + <p> + See these sample + <button + onClick={[Function]} + style={ + Object { + "backgroundColor": "transparent", + "borderBottom": "1px solid #1474f3", + "borderLeft": "none", + "borderRight": "none", + "borderTop": "none", + "color": "#1474f3", + "cursor": "pointer", + "font": "inherit", + "padding": 0, + "paddingBottom": 2, + "textDecoration": "none", + } + } + type="button" + > + stories + </button> + for a component called  + <code + style={ + Object { + "backgroundColor": "#f3f2f2", + "border": "1px solid #eae9e9", + "borderRadius": 4, + "color": "#3a3a3a", + "fontSize": 15, + "fontWeight": 600, + "padding": "2px 5px", + } + } + > + Button + </code> + . + </p> + <p> + Just like that, you can add your own components as stories. + <br /> + You can also edit those components and see changes right away. + <br /> + (Try editing the + <code + style={ + Object { + "backgroundColor": "#f3f2f2", + "border": "1px solid #eae9e9", + "borderRadius": 4, + "color": "#3a3a3a", + "fontSize": 15, + "fontWeight": 600, + "padding": "2px 5px", + } + } + > + Button + </code> + stories located at  + <code + style={ + Object { + "backgroundColor": "#f3f2f2", + "border": "1px solid #eae9e9", + "borderRadius": 4, + "color": "#3a3a3a", + "fontSize": 15, + "fontWeight": 600, + "padding": "2px 5px", + } + } + > + src/stories/index.js + </code> + .) + </p> + <p> + Usually we create stories with smaller UI components in the app. + <br /> + Have a look at the  + <a + href="https://storybook.js.org/basics/writing-stories" + rel="noopener noreferrer" + style={ + Object { + "borderBottom": "1px solid #1474f3", + "color": "#1474f3", + "paddingBottom": 2, + "textDecoration": "none", + } + } + target="_blank" + > + Writing Stories + </a> +  section in our documentation. + </p> + <p + style={ + Object { + "opacity": 0.5, + } + } + > + <b> + NOTE: + </b> + <br /> + Have a look at the + <code + style={ + Object { + "backgroundColor": "#f3f2f2", + "border": "1px solid #eae9e9", + "borderRadius": 4, + "color": "#3a3a3a", + "fontSize": 15, + "fontWeight": 600, + "padding": "2px 5px", + } + } + > + .storybook/webpack.config.js + </code> + to add webpack loaders and plugins you are using in this project. + </p> +</article> +`; + exports[`Storyshots Welcome To Storybook 1`] = ` <article style={ diff --git a/addons/storyshots/storyshots-core/stories/required_with_context/Welcome.stories.mdx b/addons/storyshots/storyshots-core/stories/required_with_context/Welcome.stories.mdx new file mode 100644 index 000000000000..8dbf6aa34bbc --- /dev/null +++ b/addons/storyshots/storyshots-core/stories/required_with_context/Welcome.stories.mdx @@ -0,0 +1,12 @@ +import { linkTo } from '@storybook/addon-links'; +import { Welcome } from '@storybook/react/demo'; +import { Meta, Story } from '@storybook/addon-docs/blocks'; + +<Meta + title='Welcome MDX' + parameters={{ + component: Welcome, + }} +/> + +<Story name='to Storybook'><Welcome showApp={linkTo('Button')} /></Story> diff --git a/addons/storyshots/storyshots-core/stories/required_with_context/__snapshots__/Welcome.stories.storyshot b/addons/storyshots/storyshots-core/stories/required_with_context/__snapshots__/Welcome.stories.storyshot index 7cb2b61c5aee..9084215a29cd 100644 --- a/addons/storyshots/storyshots-core/stories/required_with_context/__snapshots__/Welcome.stories.storyshot +++ b/addons/storyshots/storyshots-core/stories/required_with_context/__snapshots__/Welcome.stories.storyshot @@ -1,5 +1,179 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP +exports[`Storyshots Welcome MDX To Storybook 1`] = ` +<article + style={ + Object { + "backgroundColor": "#fff", + "color": "#000", + "fontFamily": "\\"Helvetica Neue\\", Helvetica, \\"Segoe UI\\", Arial, freesans, sans-serif", + "lineHeight": 1.4, + "padding": 15, + } + } +> + <h1> + Welcome to storybook + </h1> + <p> + This is a UI component dev environment for your app. + </p> + <p> + We've added some basic stories inside the + <code + style={ + Object { + "backgroundColor": "#f3f2f2", + "border": "1px solid #eae9e9", + "borderRadius": 4, + "color": "#3a3a3a", + "fontSize": 15, + "fontWeight": 600, + "padding": "2px 5px", + } + } + > + src/stories + </code> + directory. + <br /> + A story is a single state of one or more UI components. You can have as many stories as you want. + <br /> + (Basically a story is like a visual test case.) + </p> + <p> + See these sample + <button + onClick={[Function]} + style={ + Object { + "backgroundColor": "transparent", + "borderBottom": "1px solid #1474f3", + "borderLeft": "none", + "borderRight": "none", + "borderTop": "none", + "color": "#1474f3", + "cursor": "pointer", + "font": "inherit", + "padding": 0, + "paddingBottom": 2, + "textDecoration": "none", + } + } + type="button" + > + stories + </button> + for a component called  + <code + style={ + Object { + "backgroundColor": "#f3f2f2", + "border": "1px solid #eae9e9", + "borderRadius": 4, + "color": "#3a3a3a", + "fontSize": 15, + "fontWeight": 600, + "padding": "2px 5px", + } + } + > + Button + </code> + . + </p> + <p> + Just like that, you can add your own components as stories. + <br /> + You can also edit those components and see changes right away. + <br /> + (Try editing the + <code + style={ + Object { + "backgroundColor": "#f3f2f2", + "border": "1px solid #eae9e9", + "borderRadius": 4, + "color": "#3a3a3a", + "fontSize": 15, + "fontWeight": 600, + "padding": "2px 5px", + } + } + > + Button + </code> + stories located at  + <code + style={ + Object { + "backgroundColor": "#f3f2f2", + "border": "1px solid #eae9e9", + "borderRadius": 4, + "color": "#3a3a3a", + "fontSize": 15, + "fontWeight": 600, + "padding": "2px 5px", + } + } + > + src/stories/index.js + </code> + .) + </p> + <p> + Usually we create stories with smaller UI components in the app. + <br /> + Have a look at the  + <a + href="https://storybook.js.org/basics/writing-stories" + rel="noopener noreferrer" + style={ + Object { + "borderBottom": "1px solid #1474f3", + "color": "#1474f3", + "paddingBottom": 2, + "textDecoration": "none", + } + } + target="_blank" + > + Writing Stories + </a> +  section in our documentation. + </p> + <p + style={ + Object { + "opacity": 0.5, + } + } + > + <b> + NOTE: + </b> + <br /> + Have a look at the + <code + style={ + Object { + "backgroundColor": "#f3f2f2", + "border": "1px solid #eae9e9", + "borderRadius": 4, + "color": "#3a3a3a", + "fontSize": 15, + "fontWeight": 600, + "padding": "2px 5px", + } + } + > + .storybook/webpack.config.js + </code> + to add webpack loaders and plugins you are using in this project. + </p> +</article> +`; + exports[`Storyshots Welcome To Storybook 1`] = ` <article style={ diff --git a/examples/angular-cli/jest.config.js b/examples/angular-cli/jest.config.js index aef6a6dd8a31..9356b1eebc78 100644 --- a/examples/angular-cli/jest.config.js +++ b/examples/angular-cli/jest.config.js @@ -13,6 +13,7 @@ module.exports = { '^.+[/\\\\].storybook[/\\\\]config\\.ts$': '<rootDir>/scripts/jest-ts-babel.js', '^.+\\.html$': '<rootDir>/node_modules/jest-preset-angular/preprocessor.js', '^.+\\.ts$': '<rootDir>/node_modules/jest-preset-angular/preprocessor.js', + '^.+\\.mdx$': '@storybook/addon-docs/jest-transform-mdx', }, moduleFileExtensions: [...config.moduleFileExtensions, 'html'], }; diff --git a/examples/angular-cli/src/stories/__snapshots__/addon-docs.stories.storyshot b/examples/angular-cli/src/stories/__snapshots__/addon-docs.stories.storyshot new file mode 100644 index 000000000000..5f393342ed7e --- /dev/null +++ b/examples/angular-cli/src/stories/__snapshots__/addon-docs.stories.storyshot @@ -0,0 +1,43 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`Storyshots Addon|Docs With Some Emoji 1`] = ` +<storybook-dynamic-app-root + cfr={[Function CodegenComponentFactoryResolver]} + data={[Function Object]} + target={[Function ViewContainerRef_]} +> + <ng-component> + <storybook-button-component + _nghost-a-c16="" + ng-reflect-text="😀 😎 👍 💯" + > + <button + _ngcontent-a-c16="" + > + 😀 😎 👍 💯 + </button> + </storybook-button-component> + </ng-component> +</storybook-dynamic-app-root> +`; + +exports[`Storyshots Addon|Docs With Text 1`] = ` +<storybook-dynamic-app-root + cfr={[Function CodegenComponentFactoryResolver]} + data={[Function Object]} + target={[Function ViewContainerRef_]} +> + <ng-component> + <storybook-button-component + _nghost-a-c15="" + ng-reflect-text="Hello Button" + > + <button + _ngcontent-a-c15="" + > + Hello Button + </button> + </storybook-button-component> + </ng-component> +</storybook-dynamic-app-root> +`; diff --git a/examples/angular-cli/src/stories/__snapshots__/addon-links.stories.storyshot b/examples/angular-cli/src/stories/__snapshots__/addon-links.stories.storyshot index 05605817fdd6..aca946a25e03 100644 --- a/examples/angular-cli/src/stories/__snapshots__/addon-links.stories.storyshot +++ b/examples/angular-cli/src/stories/__snapshots__/addon-links.stories.storyshot @@ -7,10 +7,10 @@ exports[`Storyshots Addon|Links Button With Link To Another Story 1`] = ` target={[Function ViewContainerRef_]} > <storybook-button-component - _nghost-a-c15="" + _nghost-a-c17="" > <button - _ngcontent-a-c15="" + _ngcontent-a-c17="" > Go to Welcome Story </button> diff --git a/examples/angular-cli/src/stories/__snapshots__/addon-notes.stories.storyshot b/examples/angular-cli/src/stories/__snapshots__/addon-notes.stories.storyshot index f8309318557d..ee78510f1a64 100644 --- a/examples/angular-cli/src/stories/__snapshots__/addon-notes.stories.storyshot +++ b/examples/angular-cli/src/stories/__snapshots__/addon-notes.stories.storyshot @@ -7,10 +7,10 @@ exports[`Storyshots Addon|Notes Note With Html 1`] = ` target={[Function ViewContainerRef_]} > <storybook-button-component - _nghost-a-c17="" + _nghost-a-c19="" > <button - _ngcontent-a-c17="" + _ngcontent-a-c19="" > Notes with HTML </button> @@ -25,10 +25,10 @@ exports[`Storyshots Addon|Notes Simple Note 1`] = ` target={[Function ViewContainerRef_]} > <storybook-button-component - _nghost-a-c16="" + _nghost-a-c18="" > <button - _ngcontent-a-c16="" + _ngcontent-a-c18="" > Notes on some Button </button> diff --git a/examples/angular-cli/src/stories/__snapshots__/core.stories.storyshot b/examples/angular-cli/src/stories/__snapshots__/core.stories.storyshot index 0f70ce4c3287..405f45045017 100644 --- a/examples/angular-cli/src/stories/__snapshots__/core.stories.storyshot +++ b/examples/angular-cli/src/stories/__snapshots__/core.stories.storyshot @@ -7,10 +7,10 @@ exports[`Storyshots Core|Parameters Passed To Story 1`] = ` target={[Function ViewContainerRef_]} > <storybook-button-component - _nghost-a-c18="" + _nghost-a-c20="" > <button - _ngcontent-a-c18="" + _ngcontent-a-c20="" > Parameters are {"options":{"hierarchyRootSeparator":{},"hierarchySeparator":{}},"docs":{"iframeHeight":"60px"},"globalParameter":"globalParameter","framework":"angular","chapterParameter":"chapterParameter","storyParameter":"storyParameter","displayName":"passed to story"} </button> diff --git a/examples/angular-cli/src/stories/__snapshots__/custom-styles.stories.storyshot b/examples/angular-cli/src/stories/__snapshots__/custom-styles.stories.storyshot index ed2cbdef8c35..df81df2c4406 100644 --- a/examples/angular-cli/src/stories/__snapshots__/custom-styles.stories.storyshot +++ b/examples/angular-cli/src/stories/__snapshots__/custom-styles.stories.storyshot @@ -8,11 +8,11 @@ exports[`Storyshots Custom|Style Default Story 1`] = ` > <ng-component> <storybook-button-component - _nghost-a-c19="" + _nghost-a-c21="" ng-reflect-text="Button with custom styles" > <button - _ngcontent-a-c19="" + _ngcontent-a-c21="" > Button with custom styles </button> @@ -29,11 +29,11 @@ exports[`Storyshots Custom|Style With Knobs Story 1`] = ` > <ng-component> <storybook-button-component - _nghost-a-c20="" + _nghost-a-c22="" ng-reflect-text="Button with custom styles" > <button - _ngcontent-a-c20="" + _ngcontent-a-c22="" > Button with custom styles </button> diff --git a/examples/angular-cli/src/stories/on-push/__snapshots__/on-push.stories.storyshot b/examples/angular-cli/src/stories/on-push/__snapshots__/on-push.stories.storyshot index 16233edd0907..15ea94c59450 100644 --- a/examples/angular-cli/src/stories/on-push/__snapshots__/on-push.stories.storyshot +++ b/examples/angular-cli/src/stories/on-push/__snapshots__/on-push.stories.storyshot @@ -7,7 +7,7 @@ exports[`Storyshots Core|OnPush Class Specified Component With On Push And Knobs target={[Function ViewContainerRef_]} > <storybook-on-push-box - _nghost-a-c21="" + _nghost-a-c23="" style="background-color: rgb(255, 240, 0);" > Word of the day: OnPush diff --git a/examples/html-kitchen-sink/stories/__snapshots__/addon-docs.stories.storyshot b/examples/html-kitchen-sink/stories/__snapshots__/addon-docs.stories.storyshot new file mode 100644 index 000000000000..8e9de5ca98cd --- /dev/null +++ b/examples/html-kitchen-sink/stories/__snapshots__/addon-docs.stories.storyshot @@ -0,0 +1,13 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`Storyshots Addons|Docs Function Story 1`] = ` +<button> + Hello Button +</button> +`; + +exports[`Storyshots Addons|Docs Heading 1`] = ` +<h1> + Hello World +</h1> +`; diff --git a/examples/vue-kitchen-sink/jest.config.js b/examples/vue-kitchen-sink/jest.config.js index 4a83732dc09d..5440e27d8c1f 100644 --- a/examples/vue-kitchen-sink/jest.config.js +++ b/examples/vue-kitchen-sink/jest.config.js @@ -8,4 +8,9 @@ module.exports = { '.*\\.(vue)$': '<rootDir>/node_modules/jest-vue-preprocessor', }, moduleFileExtensions: [...config.moduleFileExtensions, 'vue'], + moduleNameMapper: { + ...config.moduleNameMapper, + // TMP: disable MDX until we upgrade vue-kitchen-sink to latest + '\\.mdx': '<rootDir>/__mocks__/fileMock.js', + }, }; diff --git a/jest.config.js b/jest.config.js index 99816f51e250..1447aa09b3bc 100644 --- a/jest.config.js +++ b/jest.config.js @@ -3,7 +3,7 @@ module.exports = { clearMocks: true, moduleNameMapper: { // non-js files - '\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga|mdx)$': + '\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$': '<rootDir>/__mocks__/fileMock.js', '\\.(css|scss|stylesheet)$': '<rootDir>/__mocks__/styleMock.js', '\\.(md)$': '<rootDir>/__mocks__/htmlMock.js', @@ -44,6 +44,7 @@ module.exports = { transform: { '^.+\\.stories\\.[jt]sx?$': '@storybook/addon-storyshots/injectFileName', '^.+\\.[jt]sx?$': '<rootDir>/scripts/babel-jest.js', + '^.+\\.mdx$': '@storybook/addon-docs/jest-transform-mdx', }, testMatch: ['**/__tests__/**/*.[jt]s?(x)', '**/?(*.)+(spec|test).[jt]s?(x)'], testPathIgnorePatterns: [ diff --git a/yarn.lock b/yarn.lock index e921cedd34a0..cf22f05ae179 100644 --- a/yarn.lock +++ b/yarn.lock @@ -5960,7 +5960,7 @@ babel-loader@8.0.5: mkdirp "^0.5.1" util.promisify "^1.0.0" -babel-loader@8.0.6, babel-loader@^8, babel-loader@^8.0.2, babel-loader@^8.0.4, babel-loader@^8.0.5: +babel-loader@8.0.6, babel-loader@^8, babel-loader@^8.0.2, babel-loader@^8.0.4, babel-loader@^8.0.5, babel-loader@^8.0.6: version "8.0.6" resolved "https://registry.yarnpkg.com/babel-loader/-/babel-loader-8.0.6.tgz#e33bdb6f362b03f4bb141a0c21ab87c501b70dfb" integrity sha512-4BmWKtBOBm13uoUwd08UwjZlaw3O9GWf456R9j+5YykFZ6LUIjIKLc0zEZf+hauxPOJs96C8k6FvYD09vWzhYw==