GitHub/storybook
1
0
Fork 0
mirror of https://github.com/storybookjs/storybook.git synced 2025-04-04 21:51:17 +08:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #8934 from storybookjs/storyshot-puppeteer-generalisation

Browse Source 
Feature: use storyshot-puppeteer for things other than image snapshots
This commit is contained in:
Filipp Riabchun 2019-11-28 16:34:43 +01:00 committed by GitHub
commit 39388b131a
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
33 changed files with 658 additions and 380 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

32
.github/workflows/tests-puppeteer.yml vendored Normal file
View File

@ -0,0 +1,32 @@
name: Puppeteer & A11y tests
on: [push]
jobs:
build:
name: Puppeteer & A11y tests
runs-on: ubuntu-latest
steps:
- uses: actions/setup-node@v1
with:
node-version: '10.x'
- uses: actions/checkout@v1
- name: Cache node modules
uses: actions/cache@v1
with:
path: node_modules
key: ${{ runner.OS }}-build-${{ hashFiles('**/yarn.lock') }}
restore-keys: |
${{ runner.OS }}-build-${{ env.cache-name }}-
${{ runner.OS }}-build-
${{ runner.OS }}-
- name: install, bootstrap
run: |
yarn bootstrap --core
- name: build storybook
run: |
yarn --cwd examples/official-storybook build-storybook
- name: test
run: |
yarn test --puppeteer

2
addons/a11y/README.md
View File

@ -47,6 +47,8 @@ export const inaccessible = () => (
);
```
## Parameters
For more customizability use parameters to configure [aXe options](https://github.com/dequelabs/axe-core/blob/develop/doc/API.md#api-name-axeconfigure).
You can override these options [at story level too](https://storybook.js.org/docs/configurations/options-parameter/#per-story-options).

6
addons/a11y/src/components/__snapshots__/A11YPanel.test.js.snap
View File

@ -952,6 +952,11 @@ exports[`A11YPanel should render report 1`] = `
>
<l
className="emotion-0"
scrollableNodeProps={
Object {
"tabIndex": 0,
}
}
>
<div
className="emotion-0"
@ -975,6 +980,7 @@ exports[`A11YPanel should render report 1`] = `
>
<div
className="simplebar-content-wrapper"
tabIndex={0}
>
<div
className="simplebar-content"

24
addons/info/src/__snapshots__/index.test.js.snap
View File

@ -2627,6 +2627,11 @@ exports[`addon Info should render component description if story kind matches co
>
<l
className="emotion-2"
scrollableNodeProps={
Object {
"tabIndex": 0,
}
}
>
<div
className="emotion-2"
@ -2650,6 +2655,7 @@ exports[`addon Info should render component description if story kind matches co
>
<div
className="simplebar-content-wrapper"
tabIndex={0}
>
<div
className="simplebar-content"
@ -4412,6 +4418,11 @@ exports[`addon Info should render component description if story kind matches co
>
<l
className="emotion-2"
scrollableNodeProps={
Object {
"tabIndex": 0,
}
}
>
<div
className="emotion-2"
@ -4435,6 +4446,7 @@ exports[`addon Info should render component description if story kind matches co
>
<div
className="simplebar-content-wrapper"
tabIndex={0}
>
<div
className="simplebar-content"
@ -7416,6 +7428,11 @@ exports[`addon Info should render component description if story name matches co
>
<l
className="emotion-2"
scrollableNodeProps={
Object {
"tabIndex": 0,
}
}
>
<div
className="emotion-2"
@ -7439,6 +7456,7 @@ exports[`addon Info should render component description if story name matches co
>
<div
className="simplebar-content-wrapper"
tabIndex={0}
>
<div
className="simplebar-content"
@ -9429,6 +9447,11 @@ exports[`addon Info should render component description if story name matches co
>
<l
className="emotion-2"
scrollableNodeProps={
Object {
"tabIndex": 0,
}
}
>
<div
className="emotion-2"
@ -9452,6 +9475,7 @@ exports[`addon Info should render component description if story name matches co
>
<div
className="simplebar-content-wrapper"
tabIndex={0}
>
<div
className="simplebar-content"

2
addons/storyshots/README.md
View File

@ -1,4 +1,4 @@
# StoryShots
- [addon-storyshots](storyshots-core) - Basic StoryShots api
- [addon-storyshots-puppeteer](storyshots-puppeteer) - Image Snapshots addition to StoryShots based on [puppeteer](https://github.com/GoogleChrome/puppeteer)
- [addon-storyshots-puppeteer](storyshots-puppeteer) - Integration of StoryShots with [puppeteer](https://github.com/GoogleChrome/puppeteer)

379
addons/storyshots/storyshots-puppeteer/README.md
View File

@ -1,27 +1,227 @@
# StoryShots + [Puppeteer](https://github.com/GoogleChrome/puppeteer)
## Getting Started
Add the following module into your app.
Add the following modules into your app.
```sh
npm install @storybook/addon-storyshots-puppeteer --save-dev
npm install @storybook/addon-storyshots-puppeteer puppeteer --save-dev
```
## Configure Storyshots for image snapshots
## Configure Storyshots for Puppeteeer tests
/\*\ **React-native** is **not supported** by this test function.
Internally, it uses [jest-image-snapshot](https://github.com/americanexpress/jest-image-snapshot).
When willing to generate and compare image snapshots for your stories, you have two options:
When willing to run Puppeteer tests for your stories, you have two options:
- Have a storybook running (ie. accessible via http(s), for instance using `npm run storybook`)
- Have a static build of the storybook (for instance, using `npm run build-storybook`)
Then you will need to reference the storybook URL (`file://...` if local, `http(s)://...` if served)
### Using default values for _imageSnapshots_
## _puppeteerTest_
Allows to define arbitrary Puppeteer tests as `story.parameters.puppeteerTest` function.
Then you can either create a new Storyshots instance or edit the one you previously used:
You can either create a new Storyshots instance or edit the one you previously used:
```js
import initStoryshots from '@storybook/addon-storyshots';
import { puppeteerTest } from '@storybook/addon-storyshots-puppeteer';
initStoryshots({ suite: 'Puppeteer storyshots', test: puppeteerTest() });
```
Then, in your stories:
```js
export const myExample = () => {
...
};
myExample.story = {
parameters: {
async puppeteerTest(page) {
const element = await page.$('<some-selector>');
await element.click();
expect(something).toBe(something);
},
},
};
```
This will assume you have a storybook running on at _<http://localhost:6006>_.
Internally here are the steps:
- Launches a Chrome headless using [puppeteer](https://github.com/GoogleChrome/puppeteer)
- Browses each stories (calling _<http://localhost:6006/iframe.html?...>_ URL),
- Runs the `parameters.puppeteerTest` function if it's defined.
### Specifying the storybook URL
If you want to set specific storybook URL, you can specify via the `storybookUrl` parameter, see below:
```js
import initStoryshots from '@storybook/addon-storyshots';
import { puppeteerTest } from '@storybook/addon-storyshots-puppeteer';
initStoryshots({
suite: 'Puppeteer storyshots',
test: puppeteerTest({ storybookUrl: 'http://my-specific-domain.com:9010' }),
});
```
The above config will use _<https://my-specific-domain.com:9010>_ for tests. You can also use query parameters in your URL (e.g. for setting a different background for your storyshots, if you use `@storybook/addon-backgrounds`).
You may also use a local static build of storybook if you do not want to run the webpack dev-server:
```js
import initStoryshots from '@storybook/addon-storyshots';
import { puppeteerTest } from '@storybook/addon-storyshots-puppeteer';
initStoryshots({
suite: 'Puppeteer storyshots',
test: puppeteerTest({ storybookUrl: 'file:///path/to/my/storybook-static' }),
});
```
### Specifying options to _goto()_ (Puppeteer API)
You might use `getGotoOptions` to specify options when the storybook is navigating to a story (using the `goto` method). Will be passed to [Puppeteer .goto() fn](https://github.com/GoogleChrome/puppeteer/blob/master/docs/api.md#pagegotourl-options)
```js
import initStoryshots from '@storybook/addon-storyshots';
import { imageSnapshot } from '@storybook/addon-storyshots-puppeteer';
const getGotoOptions = ({ context, url }) => {
return {
waitUntil: 'networkidle0',
};
};
initStoryshots({
suite: 'Puppeteer storyshots',
test: puppeteerTest({ storybookUrl: 'http://localhost:6006', getGotoOptions }),
});
```
### Specifying custom Chrome executable path (Puppeteer API)
You might use `chromeExecutablePath` to specify the path to a different version of Chrome, without downloading Chromium. Will be passed to [Runs a bundled version of Chromium](https://github.com/GoogleChrome/puppeteer#default-runtime-settings)
```js
import initStoryshots from '@storybook/addon-storyshots';
import { puppeteerTest } from '@storybook/addon-storyshots-puppeteer';
const chromeExecutablePath = '/usr/local/bin/chrome';
initStoryshots({
suite: 'Puppeteer storyshots',
test: puppeteerTest({ storybookUrl: 'http://localhost:6006', chromeExecutablePath }),
});
```
### Specifying a custom Puppeteer `browser` instance
You might use the async `getCustomBrowser` function to obtain a custom instance of a Puppeteer `browser` object. This will prevent `storyshots-puppeteer` from creating its own `browser`. It will create and close pages within the `browser`, and it is your responsibility to manage the lifecycle of the `browser` itself.
```js
import initStoryshots from '@storybook/addon-storyshots';
import { puppeteerTest } from '@storybook/addon-storyshots-puppeteer';
import puppeteer from 'puppeteer';
(async function() {
initStoryshots({
suite: 'Puppeteer storyshots',
test: puppeteerTest({
storybookUrl: 'http://localhost:6006',
getCustomBrowser: () => puppeteer.connect({ browserWSEndpoint: 'ws://yourUrl' }),
}),
});
})();
```
### Customizing a `page` instance
Sometimes, there is a need to customize a page before it calls the `goto` api.
An example of device emulation:
```js
import initStoryshots from '@storybook/addon-storyshots';
import { puppeteerTest } from '@storybook/addon-storyshots-puppeteer';
const devices = require('puppeteer/DeviceDescriptors');
const iPhone = devices['iPhone 6'];
function customizePage(page) {
return page.emulate(iPhone);
}
initStoryshots({
suite: 'Puppeteer storyshots',
test: puppeteerTest({
storybookUrl: 'http://localhost:6006',
customizePage,
}),
});
```
### Specifying setup and tests timeout
By default, `@storybook/addon-storyshots-puppeteer` uses 15 second timeouts for browser setup and test functions.
Those can be customized with `setupTimeout` and `testTimeout` parameters.
### Integrate Puppeteer storyshots with regular app
You may want to use another Jest project to run your Puppeteer storyshots as they require more resources: Chrome and Storybook built/served.
You can find a working example of this in the [official-storybook](https://github.com/storybookjs/storybook/tree/master/examples/official-storybook) example.
### Integrate Puppeteer storyshots with [Create React App](https://github.com/facebookincubator/create-react-app)
You have two options here, you can either:
- Add the storyshots configuration inside any of your `test.js` file. You must ensure you have either a running storybook or a static build available.
- Create a custom test file using Jest outside of the CRA scope:
A more robust approach would be to separate existing test files ran by create-react-app (anything `(test|spec).js` suffixed files) from the test files to run Puppeteer storyshots.
This use case can be achieved by using a custom name for the test file, ie something like `puppeteer-storyshots.runner.js`. This file will contain the `initStoryshots` call with Puppeteer storyshots configuration.
Then you will create a separate script entry in your package.json, for instance
```json
{
"scripts": {
"puppeteer-storyshots": "jest puppeteer-storyshots.runner.js --config path/to/custom/jest.config.json"
}
}
```
Note that you will certainly need a custom config file for Jest as you run it outside of the CRA scope and thus you do not have the built-in config.
Once that's setup, you can run `npm run puppeteer-storyshots`.
### Reminder
Puppeteer launches a web browser (Chrome) internally.
The browser opens a page (either using the static build of storybook or a running instance of Storybook)
If you run your test without either the static build or a running instance, this wont work.
To make sure your tests run against the latest changes of your Storybook, you must keep your static build or running Storybook up-to-date.
This can be achieved by adding a step before running the test ie: `npm run build-storybook && npm run image-snapshots`.
If you run the Puppeteer storyshots against a running Storybook in dev mode, you don't have to worry about the stories being up-to-date because the dev-server is watching changes and rebuilds automatically.
## _axeTest_
Runs [Axe](https://www.deque.com/axe/) accessibility checks and verifies that they pass using [jest-puppeteer-axe](https://github.com/WordPress/gutenberg/tree/master/packages/jest-puppeteer-axe).
```js
import initStoryshots from '@storybook/addon-storyshots';
import { axeTest } from '@storybook/addon-storyshots-puppeteer';
axeTest({ suite: 'A11y checks', test: axeTest() });
```
For configuration, it uses the same `story.parameters.a11y` parameter as [`@storybook/addon-a11y`](https://github.com/storybookjs/storybook/tree/next/addons/a11y#parameters)
## _imageSnapshots_
Generates and compares screenshots of your stories using [jest-image-snapshot](https://github.com/americanexpress/jest-image-snapshot).
```js
import initStoryshots from '@storybook/addon-storyshots';
@ -30,40 +230,7 @@ import { imageSnapshot } from '@storybook/addon-storyshots-puppeteer';
initStoryshots({ suite: 'Image storyshots', test: imageSnapshot() });
```
This will assume you have a storybook running on at _<http://localhost:6006>_.
Internally here are the steps:
- Launches a Chrome headless using [puppeteer](https://github.com/GoogleChrome/puppeteer)
- Browses each stories (calling _<http://localhost:6006/iframe.html?...>_ URL),
- Take screenshots & save all images under \_\_image_snapshots\_\_ folder.
### Specifying the storybook URL
If you want to set specific storybook URL, you can specify via the `storybookUrl` parameter, see below:
```js
import initStoryshots from '@storybook/addon-storyshots';
import { imageSnapshot } from '@storybook/addon-storyshots-puppeteer';
initStoryshots({
suite: 'Image storyshots',
test: imageSnapshot({ storybookUrl: 'http://my-specific-domain.com:9010' }),
});
```
The above config will use _<https://my-specific-domain.com:9010>_ for screenshots. You can also use query parameters in your URL (e.g. for setting a different background for your storyshots, if you use `@storybook/addon-backgrounds`).
You may also use a local static build of storybook if you do not want to run the webpack dev-server:
```js
import initStoryshots from '@storybook/addon-storyshots';
import { imageSnapshot } from '@storybook/addon-storyshots-puppeteer';
initStoryshots({
suite: 'Image storyshots',
test: imageSnapshot({ storybookUrl: 'file:///path/to/my/storybook-static' }),
});
```
It saves all images under \_\_image_snapshots\_\_ folder.
### Specifying options to _jest-image-snapshots_
@ -104,25 +271,7 @@ initStoryshots({
`afterScreenshot` receives the created image from puppeteer.
### Specifying options to _goto()_ (puppeteer API)
You might use `getGotoOptions` to specify options when the storybook is navigating to a story (using the `goto` method). Will be passed to [Puppeteer .goto() fn](https://github.com/GoogleChrome/puppeteer/blob/master/docs/api.md#pagegotourl-options)
```js
import initStoryshots from '@storybook/addon-storyshots';
import { imageSnapshot } from '@storybook/addon-storyshots-puppeteer';
const getGotoOptions = ({ context, url }) => {
return {
waitUntil: 'networkidle0',
};
};
initStoryshots({
suite: 'Image storyshots',
test: imageSnapshot({ storybookUrl: 'http://localhost:6006', getGotoOptions }),
});
```
### Specifying options to _screenshot()_ (puppeteer API)
### Specifying options to _screenshot()_ (Puppeteer API)
You might use `getScreenshotOptions` to specify options for screenshot. Will be passed to [Puppeteer .screenshot() fn](https://github.com/GoogleChrome/puppeteer/blob/master/docs/api.md#pagescreenshotoptions)
@ -142,111 +291,3 @@ initStoryshots({
```
`getScreenshotOptions` receives an object `{ context: {kind, story}, url}`. _kind_ is the kind of the story and the _story_ its name. _url_ is the URL the browser will use to screenshot.
### Specifying custom Chrome executable path (puppeteer API)
You might use `chromeExecutablePath` to specify the path to a different version of Chrome, without downloading Chromium. Will be passed to [Runs a bundled version of Chromium](https://github.com/GoogleChrome/puppeteer#default-runtime-settings)
```js
import initStoryshots from '@storybook/addon-storyshots';
import { imageSnapshot } from '@storybook/addon-storyshots-puppeteer';
const chromeExecutablePath = '/usr/local/bin/chrome';
initStoryshots({
suite: 'Image storyshots',
test: imageSnapshot({ storybookUrl: 'http://localhost:6006', chromeExecutablePath }),
});
```
### Specifying a custom puppeteer `browser` instance
You might use the async `getCustomBrowser` function to obtain a custom instance of a puppeteer `browser` object. This will prevent `storyshots-puppeteer` from creating its own `browser`. It will create and close pages within the `browser`, and it is your responsibility to manage the lifecycle of the `browser` itself.
```js
import initStoryshots from '@storybook/addon-storyshots';
import { imageSnapshot } from '@storybook/addon-storyshots-puppeteer';
import puppeteer from 'puppeteer';
(async function() {
initStoryshots({
suite: 'Image storyshots',
test: imageSnapshot({
storybookUrl: 'http://localhost:6006',
getCustomBrowser: async () => puppeteer.connect({ browserWSEndpoint: 'ws://yourUrl' }),
}),
});
})();
```
### Customizing a `page` instance
Sometimes, there is a need to customize a page before it calls the `goto` api.
An example of device emulation:
```js
import initStoryshots from '@storybook/addon-storyshots';
import { imageSnapshot } from '@storybook/addon-storyshots-puppeteer';
const devices = require('puppeteer/DeviceDescriptors');
const iPhone = devices['iPhone 6'];
function customizePage(page) {
return page.emulate(iPhone);
}
initStoryshots({
suite: 'Image storyshots',
test: imageSnapshot({
storybookUrl: 'http://localhost:6006',
customizePage,
}),
});
```
### Specifying setup and tests timeout
By default, `@storybook/addon-storyshots-puppeteer` uses 15 second timeouts for browser setup and test functions.
Those can be customized with `setupTimeout` and `testTimeout` parameters.
### Integrate image storyshots with regular app
You may want to use another Jest project to run your image snapshots as they require more resources: Chrome and Storybook built/served.
You can find a working example of this in the [official-storybook](https://github.com/storybookjs/storybook/tree/master/examples/official-storybook) example.
### Integrate image storyshots with [Create React App](https://github.com/facebookincubator/create-react-app)
You have two options here, you can either:
- Add the storyshots configuration inside any of your `test.js` file. You must ensure you have either a running storybook or a static build available.
- Create a custom test file using Jest outside of the CRA scope:
A more robust approach would be to separate existing test files ran by create-react-app (anything `(test|spec).js` suffixed files) from the test files to run storyshots with image snapshots.
This use case can be achieved by using a custom name for the test file, ie something like `image-storyshots.runner.js`. This file will contains the `initStoryshots` call with image snapshots configuration.
Then you will create a separate script entry in your package.json, for instance
```json
{
"scripts": {
"image-snapshots": "jest image-storyshots.runner.js --config path/to/custom/jest.config.json"
}
}
```
Note that you will certainly need a custom config file for Jest as you run it outside of the CRA scope and thus you do not have the built-in config.
Once that's setup, you can run `npm run image-snapshots`.
### Reminder
An image snapshot is a screenshot taken by a web browser (in our case, Chrome).
The browser opens a page (either using the static build of storybook or a running instance of Storybook)
If you run your test without either the static build or a running instance, this wont work.
To make sure your screenshots are taken from latest changes of your Storybook, you must keep your static build or running Storybook up-to-date.
This can be achieved by adding a step before running the test ie: `npm run build-storybook && npm run image-snapshots`.
If you run the image snapshots against a running Storybook in dev mode, you don't have to worry about the snapshots being up-to-date because the dev-server is watching changes and rebuilds automatically.

3
addons/storyshots/storyshots-puppeteer/package.json
View File

@ -29,6 +29,7 @@
"prepare": "node ../../../scripts/prepare.js"
},
"dependencies": {
"@hypnosphi/jest-puppeteer-axe": "^1.4.0",
"@storybook/node-logger": "5.3.0-beta.11",
"@storybook/router": "5.3.0-beta.11",
"@types/jest-image-snapshot": "^2.8.0",
@ -40,7 +41,7 @@
"@types/puppeteer": "^2.0.0"
},
"peerDependencies": {
"@storybook/addon-storyshots": "5.3.0-beta.7",
"@storybook/addon-storyshots": "5.3.0-beta.11",
"puppeteer": "^1.12.2 || ^2.0.0"
},
"publishConfig": {

21
addons/storyshots/storyshots-puppeteer/src/ImageSnapshotConfig.ts
View File

@ -1,21 +0,0 @@
import { MatchImageSnapshotOptions } from 'jest-image-snapshot';
import { Base64ScreenShotOptions, Browser, DirectNavigationOptions, Page } from 'puppeteer';
export interface Context {
kind: string;
story: string;
}
export interface ImageSnapshotConfig {
storybookUrl: string;
chromeExecutablePath: string;
getMatchOptions: (options: { context: Context; url: string }) => MatchImageSnapshotOptions;
getScreenshotOptions: (options: { context: Context; url: string }) => Base64ScreenShotOptions;
afterScreenshot: (options: { image: string; context: Context }) => void;
beforeScreenshot: (page: Page, options: { context: Context; url: string }) => void;
getGotoOptions: (options: { context: Context; url: string }) => DirectNavigationOptions;
customizePage: (page: Page) => Promise<void>;
getCustomBrowser: () => Promise<Browser>;
setupTimeout: number;
testTimeout: number;
}

23
addons/storyshots/storyshots-puppeteer/src/axeTest.ts Normal file
View File

@ -0,0 +1,23 @@
import '@hypnosphi/jest-puppeteer-axe';
import { defaultCommonConfig, CommonConfig } from './config';
import { puppeteerTest } from './puppeteerTest';
declare global {
// eslint-disable-next-line @typescript-eslint/no-namespace,no-redeclare
namespace jest {
interface Matchers<R, T> {
toPassAxeTests(parameters: any): R;
}
}
}
export const axeTest = (customConfig: Partial<CommonConfig> = {}) =>
puppeteerTest({
...defaultCommonConfig,
...customConfig,
async testBody(page, options) {
const parameters = options.context.parameters.a11y;
const include = parameters?.element ?? '#root';
await expect(page).toPassAxeTests({ ...parameters, include });
},
});

78
addons/storyshots/storyshots-puppeteer/src/config.ts Normal file
View File

@ -0,0 +1,78 @@
import { MatchImageSnapshotOptions } from 'jest-image-snapshot';
import { Base64ScreenShotOptions, Browser, DirectNavigationOptions, Page } from 'puppeteer';
export interface Context {
kind: string;
story: string;
parameters: {
[key: string]: any;
};
}
interface Options {
context: Context;
url: string;
}
export interface CommonConfig {
storybookUrl: string;
chromeExecutablePath: string;
getGotoOptions: (options: Options) => DirectNavigationOptions;
customizePage: (page: Page) => Promise<void>;
getCustomBrowser: () => Promise<Browser>;
setupTimeout: number;
testTimeout: number;
}
export interface PuppeteerTestConfig extends CommonConfig {
testBody: ((page: Page, options: Options) => void | Promise<void>) & {
filter?: (options: Options) => boolean;
};
}
export interface ImageSnapshotConfig extends CommonConfig {
getMatchOptions: (options: Options) => MatchImageSnapshotOptions;
getScreenshotOptions: (options: Options) => Base64ScreenShotOptions;
beforeScreenshot: (page: Page, options: Options) => void;
afterScreenshot: (options: { image: string; context: Context }) => void;
}
const noop: () => undefined = () => undefined;
const asyncNoop: () => Promise<undefined> = async () => undefined;
export const defaultCommonConfig: CommonConfig = {
storybookUrl: 'http://localhost:6006',
chromeExecutablePath: undefined,
getGotoOptions: noop,
customizePage: asyncNoop,
getCustomBrowser: undefined,
setupTimeout: 15000,
testTimeout: 15000,
};
const getTestBody = (options: Options) => options.context.parameters.puppeteerTest;
function defaultTestBody(page: Page, options: Options) {
const testBody = getTestBody(options);
if (testBody != null) {
return testBody(page, options);
}
return null;
}
defaultTestBody.filter = (options: Options) => getTestBody(options) != null;
export const defaultPuppeteerTestConfig: PuppeteerTestConfig = {
...defaultCommonConfig,
testBody: defaultTestBody,
};
// We consider taking the full page is a reasonable default.
const defaultScreenshotOptions = () => ({ fullPage: true, encoding: 'base64' } as const);
export const defaultImageSnapshotConfig: ImageSnapshotConfig = {
...defaultCommonConfig,
getMatchOptions: noop,
getScreenshotOptions: defaultScreenshotOptions,
beforeScreenshot: noop,
afterScreenshot: noop,
};

121
addons/storyshots/storyshots-puppeteer/src/imageSnapshot.ts
View File

@ -1,114 +1,21 @@
import { Browser, Page } from 'puppeteer';
import { toMatchImageSnapshot } from 'jest-image-snapshot';
import { logger } from '@storybook/node-logger';
import { constructUrl } from './url';
import { ImageSnapshotConfig } from './ImageSnapshotConfig';
import { defaultImageSnapshotConfig, ImageSnapshotConfig } from './config';
import { puppeteerTest } from './puppeteerTest';
expect.extend({ toMatchImageSnapshot });
// We consider taking the full page is a reasonable default.
const defaultScreenshotOptions = () => ({ fullPage: true, encoding: 'base64' } as const);
const noop: () => undefined = () => undefined;
const asyncNoop: () => Promise<undefined> = async () => undefined;
const defaultConfig: ImageSnapshotConfig = {
storybookUrl: 'http://localhost:6006',
chromeExecutablePath: undefined,
getMatchOptions: noop,
getScreenshotOptions: defaultScreenshotOptions,
beforeScreenshot: noop,
afterScreenshot: noop,
getGotoOptions: noop,
customizePage: asyncNoop,
getCustomBrowser: undefined,
setupTimeout: 15000,
testTimeout: 15000,
};
export const imageSnapshot = (customConfig: Partial<ImageSnapshotConfig> = {}) => {
const {
storybookUrl,
chromeExecutablePath,
getMatchOptions,
getScreenshotOptions,
beforeScreenshot,
afterScreenshot,
getGotoOptions,
customizePage,
getCustomBrowser,
setupTimeout,
testTimeout,
} = { ...defaultConfig, ...customConfig };
const config = { ...defaultImageSnapshotConfig, ...customConfig };
const { getMatchOptions, getScreenshotOptions, beforeScreenshot, afterScreenshot } = config;
let browser: Browser; // holds ref to browser. (ie. Chrome)
let page: Page; // Hold ref to the page to screenshot.
const testFn = async ({ context }: any) => {
const { kind, framework, name } = context;
if (framework === 'react-native') {
// Skip tests since we de not support RN image snapshots.
logger.error(
"It seems you are running imageSnapshot on RN app and it's not supported. Skipping test."
);
return;
}
const url = constructUrl(storybookUrl, kind, name);
if (!browser || !page) {
logger.error(
`Error when generating image snapshot for test ${kind} - ${name} : It seems the headless browser is not running.`
);
throw new Error('no-headless-browser-running');
}
expect.assertions(1);
let image;
try {
await customizePage(page);
await page.goto(url, getGotoOptions({ context, url }));
await beforeScreenshot(page, { context, url });
image = await page.screenshot(getScreenshotOptions({ context, url }));
await afterScreenshot({ image, context });
} catch (e) {
logger.error(
`Error when connecting to ${url}, did you start or build the storybook first? A storybook instance should be running or a static version should be built when using image snapshot feature.`
);
throw e;
}
expect(image).toMatchImageSnapshot(getMatchOptions({ context, url }));
};
testFn.timeout = testTimeout;
testFn.afterAll = async () => {
if (getCustomBrowser && page) {
await page.close();
} else if (browser) {
await browser.close();
}
};
const beforeAll = async () => {
if (getCustomBrowser) {
browser = await getCustomBrowser();
} else {
// eslint-disable-next-line global-require
const puppeteer = require('puppeteer');
// add some options "no-sandbox" to make it work properly on some Linux systems as proposed here: https://github.com/Googlechrome/puppeteer/issues/290#issuecomment-322851507
browser = await puppeteer.launch({
args: ['--no-sandbox ', '--disable-setuid-sandbox', '--disable-dev-shm-usage'],
executablePath: chromeExecutablePath,
});
}
page = await browser.newPage();
};
beforeAll.timeout = setupTimeout;
testFn.beforeAll = beforeAll;
return testFn;
return puppeteerTest({
...config,
async testBody(page, options) {
expect.assertions(1);
await beforeScreenshot(page, options);
const image = await page.screenshot(getScreenshotOptions(options));
await afterScreenshot({ image, context: options.context });
expect(image).toMatchImageSnapshot(getMatchOptions(options));
},
});
};

4
addons/storyshots/storyshots-puppeteer/src/index.ts
View File

@ -1,2 +1,4 @@
export * from './ImageSnapshotConfig';
export * from './config';
export * from './puppeteerTest';
export * from './axeTest';
export * from './imageSnapshot';

92
addons/storyshots/storyshots-puppeteer/src/puppeteerTest.ts Normal file
View File

@ -0,0 +1,92 @@
import { Browser, Page } from 'puppeteer';
import { logger } from '@storybook/node-logger';
import { constructUrl } from './url';
import { defaultPuppeteerTestConfig, PuppeteerTestConfig } from './config';
export const puppeteerTest = (customConfig: Partial<PuppeteerTestConfig> = {}) => {
const {
storybookUrl,
chromeExecutablePath,
getGotoOptions,
customizePage,
getCustomBrowser,
testBody,
setupTimeout,
testTimeout,
} = { ...defaultPuppeteerTestConfig, ...customConfig };
let browser: Browser; // holds ref to browser. (ie. Chrome)
let page: Page; // Hold ref to the page to screenshot.
const testFn = async ({ context }: any) => {
const { kind, framework, name } = context;
if (framework === 'react-native') {
// Skip tests since RN is not a browser environment.
logger.error(
"It seems you are running puppeteer test on RN app and it's not supported. Skipping test."
);
return;
}
const url = constructUrl(storybookUrl, kind, name);
const options = { context, url };
if (testBody.filter != null && !testBody.filter(options)) {
return;
}
if (!browser || !page) {
logger.error(
`Error when running puppeteer test for ${kind} - ${name} : It seems the headless browser is not running.`
);
throw new Error('no-headless-browser-running');
}
try {
await customizePage(page);
await page.goto(url, getGotoOptions(options));
} catch (e) {
logger.error(
`Error when connecting to ${url}, did you start or build the storybook first? A storybook instance should be running or a static version should be built when using puppeteer test feature.`
);
throw e;
}
await testBody(page, options);
};
testFn.timeout = testTimeout;
const cleanup = async () => {
if (getCustomBrowser && page) {
await page.close();
} else if (browser) {
await browser.close();
}
};
process.on('SIGINT', async () => {
await cleanup();
process.exit();
});
testFn.afterAll = cleanup;
const beforeAll = async () => {
if (getCustomBrowser) {
browser = await getCustomBrowser();
} else {
// eslint-disable-next-line global-require
const puppeteer = require('puppeteer');
// add some options "no-sandbox" to make it work properly on some Linux systems as proposed here: https://github.com/Googlechrome/puppeteer/issues/290#issuecomment-322851507
browser = await puppeteer.launch({
args: ['--no-sandbox ', '--disable-setuid-sandbox', '--disable-dev-shm-usage'],
executablePath: chromeExecutablePath,
});
}
page = await browser.newPage();
};
beforeAll.timeout = setupTimeout;
testFn.beforeAll = beforeAll;
return testFn;
};

34
examples/official-storybook/image-snapshots/storyshots-image.runner.js
View File

@ -1,34 +0,0 @@
/* This file is not suffixed by ".test.js" to not being run with all other test files.
* This test needs the static build of the storybook to run.
* `yarn run image-snapshots` generates the static build & uses the image snapshots behavior of storyshots.
* */
import path from 'path';
import fs from 'fs';
import initStoryshots from '@storybook/addon-storyshots';
import { imageSnapshot } from '@storybook/addon-storyshots-puppeteer';
import { logger } from '@storybook/node-logger';
// Image snapshots
// We do screenshots against the static build of the storybook.
// For this test to be meaningful, you must build the static version of the storybook *before* running this test suite.
const pathToStorybookStatic = path.join(__dirname, '../', 'storybook-static');
if (!fs.existsSync(pathToStorybookStatic)) {
logger.error(
'You are running image snapshots without having the static build of storybook. Please run "yarn run build-storybook" before running tests.'
);
} else {
initStoryshots({
suite: 'Image snapshots',
storyKindRegex: /^Addons\/Storyshots/,
framework: 'react',
configPath: path.join(__dirname, '..'),
test: imageSnapshot({
storybookUrl: `file://${pathToStorybookStatic}`,
getMatchOptions: () => ({
failureThreshold: 0.02, // 2% threshold,
failureThresholdType: 'percent',
}),
}),
});
}

10
examples/official-storybook/package.json
View File

@ -5,12 +5,12 @@
"scripts": {
"build-storybook": "cross-env STORYBOOK_DISPLAY_WARNING=true DISPLAY_WARNING=true build-storybook -c ./",
"debug": "cross-env NODE_OPTIONS=--inspect-brk STORYBOOK_DISPLAY_WARNING=true DISPLAY_WARNING=true start-storybook -p 9011 -c ./ --no-dll",
"do-image-snapshots": "../../node_modules/.bin/jest --projects=./image-snapshots",
"do-storyshots-puppeteer": "../../node_modules/.bin/jest --projects=./storyshots-puppeteer",
"generate-addon-jest-testresults": "jest --config=tests/addon-jest.config.json --json --outputFile=stories/addon-jest.testresults.json",
"graphql": "node ./graphql-server/index.js",
"image-snapshots": "yarn run build-storybook && yarn run do-image-snapshots",
"packtracker": "yarn storybook --smoke-test --quiet && cross-env PT_PROJECT_TOKEN=1af1d41b-d737-41d4-ac00-53c8f3913b53 packtracker-upload --stats=./node_modules/.cache/storybook/manager-stats.json",
"storybook": "cross-env STORYBOOK_DISPLAY_WARNING=true DISPLAY_WARNING=true start-storybook -p 9011 -c ./ --no-dll"
"storybook": "cross-env STORYBOOK_DISPLAY_WARNING=true DISPLAY_WARNING=true start-storybook -p 9011 -c ./ --no-dll",
"storyshots-puppeteer": "yarn run build-storybook && yarn run do-storyshots-puppeteer"
},
"devDependencies": {
"@packtracker/webpack-plugin": "^2.0.1",
@ -55,6 +55,7 @@
"lodash": "^4.17.15",
"paths.macro": "^2.0.2",
"prop-types": "^15.7.2",
"puppeteer": "^2.0.0",
"react": "^16.8.3",
"react-dom": "^16.8.3",
"storybook-chromatic": "^3.0.0",
@ -62,8 +63,5 @@
"ts-loader": "^6.0.0",
"uuid": "^3.3.2",
"webpack": "^4.33.0"
},
"optionalDependencies": {
"puppeteer": "^2.0.0"
}
}

24
examples/official-storybook/stories/addon-storyshots.stories.js
View File

@ -1,4 +1,4 @@
import React from 'react';
import React, { useState } from 'react';
import { styled } from '@storybook/theming';
const Block = styled.div({
@ -12,4 +12,24 @@ export default {
title: 'Addons/Storyshots',
};
export const block = () => <Block />;
export const block = () => {
const [hover, setHover] = useState(false);
return (
<Block data-test-block onMouseEnter={() => setHover(true)} onMouseLeave={() => setHover(false)}>
{hover && 'I am hovered'}
</Block>
);
};
block.story = {
parameters: {
async puppeteerTest(page) {
const element = await page.$('[data-test-block]');
await element.hover();
const textContent = await element.getProperty('textContent');
const text = await textContent.jsonValue();
// eslint-disable-next-line jest/no-standalone-expect
expect(text).toBe('I am hovered');
},
},
};

0
examples/official-storybook/image-snapshots/__image_snapshots__/storyshots-image-runner-js-image-snapshots-addons-storyshots-block-1-snap.png → examples/official-storybook/storyshots-puppeteer/__image_snapshots__/storyshots-image-runner-js-image-snapshots-addons-storyshots-block-1-snap.png
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 502 B

After

Width:  |  Height:  |  Size: 502 B

19
examples/official-storybook/storyshots-puppeteer/axe-tests.runner.js Normal file
View File

@ -0,0 +1,19 @@
/* This file is not suffixed by ".test.js" to not being run with all other test files.
* This test needs the static build of the storybook to run.
* `yarn run storyshots-puppeteer` generates the static build & uses storyshots-puppeteer.
* */
import path from 'path';
import initStoryshots from '@storybook/addon-storyshots';
import { axeTest } from '@storybook/addon-storyshots-puppeteer';
import getStorybookUrl from './getStorybookUrl';
const storybookUrl = getStorybookUrl();
if (storybookUrl != null) {
initStoryshots({
suite: 'Puppeteer tests',
storyKindRegex: /^Basics|UI/,
framework: 'react',
configPath: path.join(__dirname, '..'),
test: axeTest({ storybookUrl }),
});
}

18
examples/official-storybook/storyshots-puppeteer/getStorybookUrl.js Normal file
View File

@ -0,0 +1,18 @@
import path from 'path';
import fs from 'fs';
import { logger } from '@storybook/node-logger';
export default function getStorybookUrl() {
if (process.env.USE_DEV_SERVER) {
return 'http://localhost:9011';
}
const pathToStorybookStatic = path.join(__dirname, '../', 'storybook-static');
if (!fs.existsSync(pathToStorybookStatic)) {
logger.error(
'You are running puppeteer tests without having the static build of storybook. Please run "yarn run build-storybook" before running tests.'
);
return null;
}
return `file://${pathToStorybookStatic}`;
}

2
examples/official-storybook/image-snapshots/jest.config.js → examples/official-storybook/storyshots-puppeteer/jest.config.js
View File

@ -5,7 +5,7 @@ const finalJestConfig = { ...globalJestConfig };
finalJestConfig.rootDir = path.join(__dirname, '../../..');
finalJestConfig.testMatch = [
'<rootDir>/examples/official-storybook/image-snapshots/storyshots-image.runner.js',
'<rootDir>/examples/official-storybook/storyshots-puppeteer/*.runner.js',
];
module.exports = finalJestConfig;

19
examples/official-storybook/storyshots-puppeteer/puppeteer-tests.runner.js Normal file
View File

@ -0,0 +1,19 @@
/* This file is not suffixed by ".test.js" to not being run with all other test files.
* This test needs the static build of the storybook to run.
* `yarn run storyshots-puppeteer` generates the static build & uses storyshots-puppeteer.
* */
import path from 'path';
import initStoryshots from '@storybook/addon-storyshots';
import { puppeteerTest } from '@storybook/addon-storyshots-puppeteer';
import getStorybookUrl from './getStorybookUrl';
const storybookUrl = getStorybookUrl();
if (storybookUrl != null) {
initStoryshots({
suite: 'Puppeteer tests',
storyKindRegex: /^Addons\/Storyshots/,
framework: 'react',
configPath: path.join(__dirname, '..'),
test: puppeteerTest({ storybookUrl }),
});
}

25
examples/official-storybook/storyshots-puppeteer/storyshots-image.runner.js Normal file
View File

@ -0,0 +1,25 @@
/* This file is not suffixed by ".test.js" to not being run with all other test files.
* This test needs the static build of the storybook to run.
* `yarn run storyshots-puppeteer` generates the static build & uses storyshots-puppeteer.
* */
import path from 'path';
import initStoryshots from '@storybook/addon-storyshots';
import { imageSnapshot } from '@storybook/addon-storyshots-puppeteer';
import getStorybookUrl from './getStorybookUrl';
const storybookUrl = getStorybookUrl();
if (storybookUrl != null) {
initStoryshots({
suite: 'Image snapshots',
storyKindRegex: /^Addons\/Storyshots/,
framework: 'react',
configPath: path.join(__dirname, '..'),
test: imageSnapshot({
storybookUrl,
getMatchOptions: () => ({
failureThreshold: 0.02, // 2% threshold,
failureThresholdType: 'percent',
}),
}),
});
}

4
lib/components/src/Button/Button.stories.tsx
View File

@ -15,7 +15,7 @@ storiesOf('Basics/Button', module).add('all buttons', () => (
<p>Buttons that are used for everything else</p>
<Button primary>Primary</Button>
<Button secondary>Secondary</Button>
<Button outline containsIcon>
<Button outline containsIcon title="link">
<Icons icon="link" />
</Button>
<br />
@ -42,7 +42,7 @@ storiesOf('Basics/Button', module).add('all buttons', () => (
<Button primary disabled small>
Disabled
</Button>
<Button outline small containsIcon>
<Button outline small containsIcon title="link">
<Icons icon="link" />
</Button>
<Button outline small>

6
lib/components/src/ScrollArea/ScrollArea.tsx
View File

@ -13,9 +13,9 @@ export interface ScrollProps {
[key: string]: any;
}
const Scroll = styled(({ vertical, horizontal, ...rest }: ScrollProps) => <SimpleBar {...rest} />)<
ScrollProps
>(
const Scroll = styled(({ vertical, horizontal, ...rest }: ScrollProps) => (
<SimpleBar {...rest} scrollableNodeProps={{ tabIndex: 0 }} />
))<ScrollProps>(
({ vertical }) =>
!vertical
? {

50
lib/components/src/form/form.stories.tsx
View File

@ -7,7 +7,7 @@ import { Input, Button, Select, Textarea } from './input/input';
import { Field } from './field/field';
import { Spaced } from '../spaced/Spaced';
const Flexed = styled.div({ display: 'flex' });
const Flexed = styled(Field)({ display: 'flex' });
storiesOf('Basics/Form/Field', module).add('field', () => (
<Field key="key" label="label">
@ -23,7 +23,7 @@ storiesOf('Basics/Form/Select', module)
.add('sizes', () => (
<Spaced>
{['auto', 'flex', '100%'].map(size => (
<Flexed key={size}>
<Flexed key={size} label={size}>
<Select value="val2" onChange={action('onChange')} size={size}>
<option value="val1">Value 1</option>
<option value="val2">Value 2</option>
@ -37,18 +37,28 @@ storiesOf('Basics/Form/Select', module)
<div>
<Spaced>
{['error', 'warn', 'valid', null].map(valid => (
<Select key={valid} value="val2" onChange={action('onChange')} size="100%" valid={valid}>
<option value="val1">Value 1</option>
<option value="val2">Value 2</option>
<option value="val3">Value 3</option>
</Select>
<Field label={String(valid)}>
<Select
key={valid}
value="val2"
onChange={action('onChange')}
size="100%"
valid={valid}
>
<option value="val1">Value 1</option>
<option value="val2">Value 2</option>
<option value="val3">Value 3</option>
</Select>
</Field>
))}
</Spaced>
<Select value="val2" onChange={action('onChange')} size="100%" disabled>
<option value="val1">Value 1</option>
<option value="val2">Value 2</option>
<option value="val3">Value 3</option>
</Select>
<Field label="select">
<Select value="val2" onChange={action('onChange')} size="100%" disabled>
<option value="val1">Value 1</option>
<option value="val2">Value 2</option>
<option value="val3">Value 3</option>
</Select>
</Field>
</div>
));
@ -56,7 +66,7 @@ storiesOf('Basics/Form/Button', module)
.add('sizes', () => (
<Spaced>
{['auto', 'flex', '100%'].map(size => (
<Flexed key={size}>
<Flexed key={size} label={size}>
<Button size={size}>click this button</Button>
</Flexed>
))}
@ -65,7 +75,7 @@ storiesOf('Basics/Form/Button', module)
.add('validations', () => (
<Spaced>
{['error', 'warn', 'valid', null].map(valid => (
<Flexed key={valid}>
<Flexed key={valid} label={String(valid)}>
<Button size="100%" valid={valid}>
click this button
</Button>
@ -78,7 +88,7 @@ storiesOf('Basics/Form/Textarea', module)
.add('sizes', () => (
<Spaced>
{['auto', 'flex', '100%'].map(size => (
<Flexed key={size}>
<Flexed key={size} label={size}>
<Textarea defaultValue="textarea" size={size} />
</Flexed>
))}
@ -87,7 +97,7 @@ storiesOf('Basics/Form/Textarea', module)
.add('validations', () => (
<Spaced>
{['error', 'warn', 'valid', null].map(valid => (
<Flexed key={valid}>
<Flexed key={valid} label={String(valid)}>
<Textarea defaultValue="textarea" size="100%" valid={valid} />
</Flexed>
))}
@ -96,7 +106,7 @@ storiesOf('Basics/Form/Textarea', module)
.add('alignment', () => (
<Spaced>
{['end', 'center', 'start'].map(align => (
<Flexed key={align}>
<Flexed key={align} label={align}>
<Textarea defaultValue="textarea" size="100%" align={align} />
</Flexed>
))}
@ -107,7 +117,7 @@ storiesOf('Basics/Form/Input', module)
.add('sizes', () => (
<Spaced>
{['auto', 'flex', '100%'].map(size => (
<Flexed key={size}>
<Flexed key={size} label={size}>
<Input defaultValue="text" size={size} />
</Flexed>
))}
@ -116,7 +126,7 @@ storiesOf('Basics/Form/Input', module)
.add('validations', () => (
<Spaced>
{['error', 'warn', 'valid', null].map(valid => (
<Flexed key={valid}>
<Flexed key={valid} label={String(valid)}>
<Input defaultValue="text" size="100%" valid={valid} />
</Flexed>
))}
@ -125,7 +135,7 @@ storiesOf('Basics/Form/Input', module)
.add('alignment', () => (
<Spaced>
{['end', 'center', 'start'].map(align => (
<Flexed key={align}>
<Flexed key={align} label={align}>
<Input defaultValue="text" size="100%" align={align} />
</Flexed>
))}

4
lib/components/src/tabs/tabs.stories.tsx
View File

@ -141,7 +141,7 @@ storiesOf('Basics/Tabs', module)
.add('stateful - static with set button text colors', () => (
<div>
<TabsState initial="test2">
<div id="test1" title="With a function" color="red">
<div id="test1" title="With a function" color="#e00000">
{({ active, selected }: { active: boolean; selected: string }) =>
active ? <div>{selected} is selected</div> : null
}
@ -155,7 +155,7 @@ storiesOf('Basics/Tabs', module)
.add('stateful - static with set backgroundColor', () => (
<div>
<TabsState initial="test2" backgroundColor="rgba(0,0,0,.05)">
<div id="test1" title="With a function" color="red">
<div id="test1" title="With a function" color="#e00000">
{({ active, selected }: { active: boolean; selected: string }) =>
active ? <div>{selected} is selected</div> : null
}

2
lib/components/src/tabs/tabs.tsx
View File

@ -172,7 +172,7 @@ export const Tabs: FunctionComponent<TabsProps> = memo(
</TabBar>
{tools ? <Fragment>{tools}</Fragment> : null}
</FlexBar>
<Content absolute={absolute}>
<Content absolute={absolute} tabIndex={0}>
{list.map(({ id, active, render }) => render({ key: id, active }))}
</Content>
</Wrapper>

2
lib/components/src/typography/link/link.stories.tsx
View File

@ -48,7 +48,7 @@ storiesOf('Basics/Link', module)
With icon in front
</Link>
<br />
<Link containsIcon href="http://google.com">
<Link title="Toggle sidebar" containsIcon href="http://google.com">
{/* A linked icon by itself */}
<Icons icon="sidebar" />
</Link>

4
lib/ui/src/components/sidebar/SidebarHeading.tsx
View File

@ -86,7 +86,7 @@ const Brand = withTheme(
}
if (image === undefined && url) {
return (
<LogoLink href={url} target={targetValue}>
<LogoLink title={title} href={url} target={targetValue}>
<Logo alt={title} />
</LogoLink>
);
@ -104,7 +104,7 @@ const Brand = withTheme(
}
if (image && url) {
return (
<LogoLink href={url} target={targetValue}>
<LogoLink title={title} href={url} target={targetValue}>
<Img src={image} alt={title} />
</LogoLink>
);

2
lib/ui/src/components/sidebar/SidebarSearch.stories.tsx
View File

@ -8,7 +8,7 @@ export default {
title: 'UI/Sidebar/SidebarSearch',
decorators: [
(storyFn: any) => (
<div style={{ width: '240px', margin: '1rem', padding: '1rem', background: '#999' }}>
<div style={{ width: '240px', margin: '1rem', padding: '1rem', background: 'white' }}>
{storyFn()}
</div>
),

1
lib/ui/src/settings/about.js
View File

@ -130,6 +130,7 @@ const AboutScreen = ({ latest, current, onClose }) => {
e.preventDefault();
return onClose();
}}
title="close"
>
<Icons icon="close" />
</IconButton>

8
scripts/test.js
View File

@ -50,11 +50,11 @@ const tasks = {
projectLocation: '<all>',
isJest: true,
}),
image: createProject({
name: `Image snapshots for Official storybook ${chalk.gray('(image)')}`,
puppeteer: createProject({
name: `Puppeteer and A11y tests for Official storybook ${chalk.gray('(puppeteer)')}`,
defaultValue: false,
option: '--image',
projectLocation: path.join(__dirname, '..', 'examples/official-storybook/image-snapshots'),
option: '--puppeteer',
projectLocation: path.join(__dirname, '..', 'examples/official-storybook/storyshots-puppeteer'),
isJest: true,
}),
cli: createProject({

17
yarn.lock
View File

@ -2343,6 +2343,14 @@
dependencies:
"@hapi/hoek" "^8.3.0"
"@hypnosphi/jest-puppeteer-axe@^1.4.0":
version "1.4.0"
resolved "https://registry.yarnpkg.com/@hypnosphi/jest-puppeteer-axe/-/jest-puppeteer-axe-1.4.0.tgz#aa7a348934178fcb41defb688ebd493970e3d660"
integrity sha512-sQ1BpqNE9C2d0afEtm3LLQWfQjITuxHXaLF79sGDUGa7/DPnfn2qgzcQOtL9uPu7KnZOz95dmsUgoHXkyQbrmQ==
dependencies:
"@babel/runtime" "^7.4.4"
axe-puppeteer "^1.0.0"
"@hypnosphi/jscodeshift@^0.6.4":
version "0.6.4"
resolved "https://registry.yarnpkg.com/@hypnosphi/jscodeshift/-/jscodeshift-0.6.4.tgz#49a3be6ac515af831f8a3e630380e3511c8c0fb7"
@ -5641,11 +5649,18 @@ aws4@^1.8.0:
resolved "https://registry.yarnpkg.com/aws4/-/aws4-1.8.0.tgz#f0e003d9ca9e7f59c7a508945d7b2ef9a04a542f"
integrity sha512-ReZxvNHIOv88FlT7rxcXIIC0fPt4KZqZbOlivyWtXLt8ESx84zd3kMC6iK5jVeS2qt+g7ftS7ye4fi06X5rtRQ==
axe-core@^3.3.2:
axe-core@^3.1.2, axe-core@^3.3.2:
version "3.4.0"
resolved "https://registry.yarnpkg.com/axe-core/-/axe-core-3.4.0.tgz#a57ee620c182d5389aff229586aaae06bc541abe"
integrity sha512-5C0OdgxPv/DrQguO6Taj5F1dY5OlkWg4SVmZIVABFYKWlnAc5WTLPzG+xJSgIwf2fmY+NiNGiZXhXx2qT0u/9Q==
axe-puppeteer@^1.0.0:
version "1.0.0"
resolved "https://registry.yarnpkg.com/axe-puppeteer/-/axe-puppeteer-1.0.0.tgz#cebbeec2c65a2e0cb7d5fd1e7aef26c5f71895a4"
integrity sha512-hTF3u4mtatgTN7fsLVyVgbRdNc15ngjDcTEuqhn9A7ugqLhLCryJWp9fzqZkNlrW8awPcxugyTwLPR7mRdPZmA==
dependencies:
axe-core "^3.1.2"
axios-retry@^3.0.2:
version "3.1.2"
resolved "https://registry.yarnpkg.com/axios-retry/-/axios-retry-3.1.2.tgz#4f4dcbefb0b434e22b72bd5e28a027d77b8a3458"