Skip to content

Instantly share code, notes, and snippets.

@one-more

one-more/storybook.test.ts

Created November 24, 2021 20:22
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save one-more/ff42fc3645f95aadd8fe1f139ddc4b74 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save one-more/ff42fc3645f95aadd8fe1f139ddc4b74 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. one-more created this gist Nov 24, 2021.
    66 changes: 66 additions & 0 deletions storybook.test.ts
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,66 @@
    import initStoryshots from '@storybook/addon-storyshots';
    import { imageSnapshot } from '@storybook/addon-storyshots-puppeteer';
    import { puppeteerTest } from '@storybook/addon-storyshots-puppeteer';
    import { Page } from "puppeteer"
    const path = require('path');


    const getCustomUrlParam = (param: string) => (url: string) => {
    const regex = new RegExp(`^.+-custom-${param}-(\\d+).*$`)
    const result = regex.exec(url)
    if (result && result[1]) {
    return parseInt(result[1])
    }
    return undefined
    }

    const getCustomWidth = getCustomUrlParam("width")

    const getCustomHeight = getCustomUrlParam("height")

    const breakpoints: {[key: string]: {width: number, height: number}} = {
    "breakpoint-lg": {
    width: 1285,
    height: 600
    },
    "breakpoint-md": {
    width: 1200,
    height: 600
    }
    }

    const defaultWidth: number = breakpoints["breakpoint-lg"].width

    const defaultHeight = breakpoints["breakpoint-lg"].height

    const getBreakpointConfigFromUrl = (url: string): {width: number, height: number} | undefined => {
    let config: {width: number, height: number} | undefined = undefined
    Object.entries(breakpoints).forEach((breakpoint) => {
    if (url.includes(breakpoint[0])) {
    config = breakpoint[1]
    }
    })
    return config
    }

    const beforeScreenshot = async (page: Page, {url}: {url: string}) => {
    const width = getCustomWidth(url) || getBreakpointConfigFromUrl(url)?.width || defaultWidth
    const height = getCustomHeight(url) || getBreakpointConfigFromUrl(url)?.height || defaultHeight

    await page.setViewport({
    width,
    height,
    })
    }

    const storybookUrl = process.env.STORYBOOK_STATIC
    ? `file://${path.resolve(__dirname, '../storybook-static')}`
    : 'http://localhost:9009/';
    initStoryshots({ suite: 'Puppeteer storyshots', test: puppeteerTest({ storybookUrl }) });
    initStoryshots({
    suite: 'Image storyshots',
    test: imageSnapshot({
    storybookUrl,
    beforeScreenshot
    }),
    });