storybook.test.ts

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
  }),
});