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

refactor: improve typings of addon-storyshots-puppeteer

Browse Source
This commit is contained in:
Gaëtan Maisse 2019-08-08 22:00:52 +02:00
parent 5352afb075
commit 7dc87d7fb7
7 changed files with 144 additions and 105 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -22,21 +22,25 @@
"README.md"
],
"main": "dist/index.js",
"types": "dist/index.d.ts",
"scripts": {
"prepare": "node ../../../scripts/prepare.js"
},
"dependencies": {
"@storybook/node-logger": "5.3.0-alpha.13",
"@storybook/router": "5.3.0-alpha.13",
"@types/jest-image-snapshot": "^2.8.0",
"core-js": "^3.0.1",
"jest-image-snapshot": "^2.8.2",
"regenerator-runtime": "^0.13.3"
},
"peerDependencies": {
"@storybook/addon-storyshots": "5.2.0-beta.13",
"@storybook/addon-storyshots": "5.3.0-alpha.13",
"@types/puppeteer": "^1.19.0",
"puppeteer": "^1.12.2"
},
"optionalDependencies": {
"@types/puppeteer": "^1.19.0",
"puppeteer": "^1.12.2"
},
"publishConfig": {

18
addons/storyshots/storyshots-puppeteer/src/ImageSnapshotConfig.ts Normal file
View File

@ -0,0 +1,18 @@
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;
beforeScreenshot: (page: Page, options: { context: Context; url: string }) => void;
getGotoOptions: (options: { context: Context; url: string }) => DirectNavigationOptions;
customizePage: (page: Page) => Promise<void>;
getCustomBrowser: () => Promise<Browser>;
}

102
addons/storyshots/storyshots-puppeteer/src/imageSnapshot.ts Normal file
View File

@ -0,0 +1,102 @@
import puppeteer, { Browser, Page } from 'puppeteer';
import { toMatchImageSnapshot } from 'jest-image-snapshot';
import { logger } from '@storybook/node-logger';
import { constructUrl } from './url';
import { ImageSnapshotConfig } from './ImageSnapshotConfig';
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,
getGotoOptions: noop,
customizePage: asyncNoop,
getCustomBrowser: undefined,
};
export const imageSnapshot = (customConfig: Partial<ImageSnapshotConfig> = {}) => {
const {
storybookUrl,
chromeExecutablePath,
getMatchOptions,
getScreenshotOptions,
beforeScreenshot,
getGotoOptions,
customizePage,
getCustomBrowser,
} = { ...defaultConfig, ...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 === 'rn') {
// 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 }));
} 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.afterAll = () => {
if (getCustomBrowser && page) {
return page.close();
}
return browser.close();
};
testFn.beforeAll = async () => {
if (getCustomBrowser) {
browser = await getCustomBrowser();
} else {
// 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();
};
return testFn;
};

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

@ -1,102 +1,2 @@
import puppeteer from 'puppeteer';
import { toMatchImageSnapshot } from 'jest-image-snapshot';
import { logger } from '@storybook/node-logger';
import { constructUrl } from './url';
expect.extend({ toMatchImageSnapshot });
// We consider taking the full page is a reasonnable default.
const defaultScreenshotOptions = () => ({ fullPage: true });
const noop = () => {};
const asyncNoop = async () => {};
const defaultConfig = {
storybookUrl: 'http://localhost:6006',
chromeExecutablePath: undefined,
getMatchOptions: noop,
getScreenshotOptions: defaultScreenshotOptions,
beforeScreenshot: noop,
getGotoOptions: noop,
customizePage: asyncNoop,
getCustomBrowser: undefined,
};
export const imageSnapshot = (customConfig = {}) => {
const {
storybookUrl,
chromeExecutablePath,
getMatchOptions,
getScreenshotOptions,
beforeScreenshot,
getGotoOptions,
customizePage,
getCustomBrowser,
} = { ...defaultConfig, ...customConfig };
let browser; // holds ref to browser. (ie. Chrome)
let page; // Hold ref to the page to screenshot.
const testFn = async ({ context }) => {
const { kind, framework, name } = context;
if (framework === 'rn') {
// 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 }));
} 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.`,
e
);
throw e;
}
expect(image).toMatchImageSnapshot(getMatchOptions({ context, url }));
};
testFn.afterAll = () => {
if (getCustomBrowser && page) {
return page.close();
}
return browser.close();
};
testFn.beforeAll = async () => {
if (getCustomBrowser) {
browser = await getCustomBrowser();
} else {
// 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();
};
return testFn;
};
export * from './ImageSnapshotConfig';
export * from './imageSnapshot';

2
addons/storyshots/storyshots-puppeteer/src/url.ts
View File

@ -2,7 +2,7 @@ import { toId } from '@storybook/router/utils';
import { URL } from 'url';
export const constructUrl = (storybookUrl, kind, story) => {
export const constructUrl = (storybookUrl: string, kind: string, story: string) => {
const id = toId(kind, story);
const storyUrl = `/iframe.html?id=${id}`;

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

@ -2,7 +2,8 @@
"extends": "../../../tsconfig.json",
"compilerOptions": {
"rootDir": "./src",
"types": ["webpack-env", "node"]
"types": ["webpack-env", "node"],
"declaration": true
},
"include": [
"src/**/*"

14
yarn.lock
View File

@ -3759,6 +3759,13 @@
resolved "https://registry.yarnpkg.com/@types/jest-diff/-/jest-diff-20.0.1.tgz#35cc15b9c4f30a18ef21852e255fdb02f6d59b89"
integrity sha512-yALhelO3i0hqZwhjtcr6dYyaLoCHbAMshwtj6cGxTvHZAKXHsYGdff6E8EPw3xLKY0ELUTQ69Q1rQiJENnccMA==
"@types/jest-image-snapshot@^2.8.0":
version "2.8.0"
resolved "https://registry.yarnpkg.com/@types/jest-image-snapshot/-/jest-image-snapshot-2.8.0.tgz#2f8ed2b23c1b9a8ead32a2f3ee0ef672e5fd01dd"
integrity sha512-CsE6PLYGa7hmM8ut1gzkW7iDxrW2xwSv3yJJf2dejwvF7cIPtzHPLpQWO29H4xnzIaLyEB09MiVnYS/LoYpfzw==
dependencies:
"@types/jest" "*"
"@types/jest-specific-snapshot@^0.5.3":
version "0.5.3"
resolved "https://registry.yarnpkg.com/@types/jest-specific-snapshot/-/jest-specific-snapshot-0.5.3.tgz#03c2283b79b17b5df29da45d1e7dd6b45f341e02"
@ -3866,6 +3873,13 @@
resolved "https://registry.yarnpkg.com/@types/prop-types/-/prop-types-15.7.3.tgz#2ab0d5da2e5815f94b0b9d4b95d1e5f243ab2ca7"
integrity sha512-KfRL3PuHmqQLOG+2tGpRO26Ctg+Cq1E01D2DMriKEATHgWLfeNDmq9e29Q9WIky0dQ3NPkd1mzYH8Lm936Z9qw==
"@types/puppeteer@^1.19.0":
version "1.19.0"
resolved "https://registry.yarnpkg.com/@types/puppeteer/-/puppeteer-1.19.0.tgz#59f0050bae019cee7c3af2bb840a25892a3078b6"
integrity sha512-Db9LWOuTm2bR/qgPE7PQCmnsCQ6flHdULuIDWTks8YdQ/SGHKg5WGWG54gl0734NDKCTF5MbqAp2qWuvBiyQ3Q==
dependencies:
"@types/node" "*"
"@types/q@^0.0.32":
version "0.0.32"
resolved "https://registry.yarnpkg.com/@types/q/-/q-0.0.32.tgz#bd284e57c84f1325da702babfc82a5328190c0c5"