From edceaaaa6449559b24a8256e9e58a395cbff3e6a Mon Sep 17 00:00:00 2001 From: Yama-Tomo Date: Fri, 2 Aug 2019 09:33:36 +0900 Subject: [PATCH] [storybook__addon-storyshots-puppeteer] new types definition (#37207) * refactor: remove separated package definition relate: https://github.com/storybookjs/storybook/pull/3742 * feat: add new definition --- .../index.d.ts | 28 +++++++++++++++ ...ybook__addon-storyshots-puppeteer-tests.ts | 23 +++++++++++++ .../tsconfig.json | 34 +++++++++++++++++++ .../tslint.json | 1 + types/storybook__addon-storyshots/index.d.ts | 20 ++--------- .../storybook__addon-storyshots-tests.ts | 18 ---------- 6 files changed, 88 insertions(+), 36 deletions(-) create mode 100644 types/storybook__addon-storyshots-puppeteer/index.d.ts create mode 100644 types/storybook__addon-storyshots-puppeteer/storybook__addon-storyshots-puppeteer-tests.ts create mode 100644 types/storybook__addon-storyshots-puppeteer/tsconfig.json create mode 100644 types/storybook__addon-storyshots-puppeteer/tslint.json diff --git a/types/storybook__addon-storyshots-puppeteer/index.d.ts b/types/storybook__addon-storyshots-puppeteer/index.d.ts new file mode 100644 index 0000000000..2c0a957b75 --- /dev/null +++ b/types/storybook__addon-storyshots-puppeteer/index.d.ts @@ -0,0 +1,28 @@ +// Type definitions for @storybook/addon-storyshots-puppeteer 5.1 +// Project: https://github.com/storybookjs/storybook/tree/master/addons/storyshots, https://github.com/storybookjs/storybook/tree/master/addons/storyshots/storyshots-puppeteer +// Definitions by: Yama-Tomo +// Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped +// TypeScript Version: 3.1 + +import { StoryContext } from '@storybook/addon-storyshots'; +import { MatchImageSnapshotOptions } from 'jest-image-snapshot'; +import { ScreenshotOptions, Page, DirectNavigationOptions, Browser } from 'puppeteer'; + +export interface Context { + context: StoryContext; + url: string; +} + +export interface CustomConfig { + storybookUrl?: string; + chromeExecutablePath?: string; + getMatchOptions?: (ctx: Context) => MatchImageSnapshotOptions; + getScreenshotOptions?: (ctx: Context) => ScreenshotOptions; + beforeScreenshot?: (page: Page, ctx: Context) => Promise; + getGotoOptions?: (ctx: Context) => DirectNavigationOptions; + customizePage?: (page: Page) => Promise; + getCustomBrowser?: () => Promise; +} + +export function imageSnapshot(customConfig?: CustomConfig): ({ context }: { context: StoryContext }) => + Promise; diff --git a/types/storybook__addon-storyshots-puppeteer/storybook__addon-storyshots-puppeteer-tests.ts b/types/storybook__addon-storyshots-puppeteer/storybook__addon-storyshots-puppeteer-tests.ts new file mode 100644 index 0000000000..e71bea1477 --- /dev/null +++ b/types/storybook__addon-storyshots-puppeteer/storybook__addon-storyshots-puppeteer-tests.ts @@ -0,0 +1,23 @@ +import initStoryshots from '@storybook/addon-storyshots'; +import { imageSnapshot } from '@storybook/addon-storyshots-puppeteer'; +import { connect } from 'puppeteer'; + +initStoryshots({ + test: imageSnapshot(), +}); + +initStoryshots({ + test: imageSnapshot({ + storybookUrl: 'http://localhost:9002', + chromeExecutablePath: '/usr/local/bin/chrome', + getMatchOptions: context => ({ + failureThreshold: 0.2, + failureThresholdType: 'percent', + }), + getScreenshotOptions: ({ context, url }) => ({ path: '/foo' }), + beforeScreenshot: (page, context) => page.setViewport({ width: 300, height: 100 }), + getGotoOptions: ({ context, url }) => ({ timeout: 10 }), + customizePage: page => page.setViewport({ width: 300, height: 100 }), + getCustomBrowser: () => connect({ browserWSEndpoint: 'ws://yourUrl' }), + }), +}); diff --git a/types/storybook__addon-storyshots-puppeteer/tsconfig.json b/types/storybook__addon-storyshots-puppeteer/tsconfig.json new file mode 100644 index 0000000000..619b9bdec0 --- /dev/null +++ b/types/storybook__addon-storyshots-puppeteer/tsconfig.json @@ -0,0 +1,34 @@ +{ + "compilerOptions": { + "module": "commonjs", + "lib": [ + "es6" + ], + "noImplicitAny": true, + "noImplicitThis": true, + "strictNullChecks": true, + "strictFunctionTypes": true, + "baseUrl": "../", + "typeRoots": [ + "../" + ], + "paths": { + "@storybook/addon-storyshots-puppeteer": [ + "storybook__addon-storyshots-puppeteer" + ], + "@storybook/react": [ + "storybook__react" + ], + "@storybook/addon-storyshots": [ + "storybook__addon-storyshots" + ] + }, + "types": [], + "noEmit": true, + "forceConsistentCasingInFileNames": true + }, + "files": [ + "index.d.ts", + "storybook__addon-storyshots-puppeteer-tests.ts" + ] +} diff --git a/types/storybook__addon-storyshots-puppeteer/tslint.json b/types/storybook__addon-storyshots-puppeteer/tslint.json new file mode 100644 index 0000000000..3db14f85ea --- /dev/null +++ b/types/storybook__addon-storyshots-puppeteer/tslint.json @@ -0,0 +1 @@ +{ "extends": "dtslint/dt.json" } diff --git a/types/storybook__addon-storyshots/index.d.ts b/types/storybook__addon-storyshots/index.d.ts index cb58baa59f..18d3f2faf5 100644 --- a/types/storybook__addon-storyshots/index.d.ts +++ b/types/storybook__addon-storyshots/index.d.ts @@ -1,6 +1,7 @@ -// Type definitions for @storybook/addon-storyshots 4.0 +// Type definitions for @storybook/addon-storyshots 5.1 // Project: https://github.com/storybookjs/storybook/tree/master/addons/storyshots, https://github.com/storybookjs/storybook/tree/master/addons/storyshots/storyshots-core // Definitions by: Bradley Ayers +// Yama-Tomo // Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped // TypeScript Version: 3.1 @@ -37,23 +38,6 @@ export interface StoryContext { story: string; } -export interface ImageSnapshotOptions { - context: { - kind: any; - story: string - }; - url: string; -} - -export function imageSnapshot(options?: { - storybookUrl?: string; - getMatchOptions?: (options: ImageSnapshotOptions) => { failureThreshold: number, failureThresholdType: 'percent' }; - getScreenshotOptions?: (options: ImageSnapshotOptions) => ScreenshotOptions; - beforeScreenshot?: (page: Page, options: ImageSnapshotOptions) => Promise; - getGotoOptions?: (options: ImageSnapshotOptions) => NavigationOptions; - chromeExecutablePath?: string; -}): Test; - export function multiSnapshotWithOptions(options: SnapshotOptions): Test; export const shallowSnapshot: Test; diff --git a/types/storybook__addon-storyshots/storybook__addon-storyshots-tests.ts b/types/storybook__addon-storyshots/storybook__addon-storyshots-tests.ts index cac02b4cf7..b4bbb92af4 100644 --- a/types/storybook__addon-storyshots/storybook__addon-storyshots-tests.ts +++ b/types/storybook__addon-storyshots/storybook__addon-storyshots-tests.ts @@ -1,6 +1,5 @@ import initStoryshots, { getSnapshotFileName, - imageSnapshot, multiSnapshotWithOptions, renderOnly, renderWithOptions, @@ -55,23 +54,6 @@ initStoryshots({ })), }); -initStoryshots({ - configPath: "", - test: imageSnapshot({ - storybookUrl: "http://localhost:9002" - }) -}); - -initStoryshots({ - configPath: "", - test: imageSnapshot({ - storybookUrl: "http://localhost:9002", - getScreenshotOptions: ({ context, url }) => ({ path: "/foo" }), - getGotoOptions: ({ context, url }) => ({ timeout: 10 }), - chromeExecutablePath: "/usr/local/bin/chrome" - }) -}); - initStoryshots({ framework: 'react', configPath: '',