feat(report): storybook v6 support

MINOR

Author: mgrybyk

README.md

@@ -100,6 +100,8 @@ const lhScoresDir = path.join(process.cwd(), process.env.LH_SCORES_DIR || 'lh-sc
 const reportDir = path.join(process.cwd(), process.env.LH_REPORT_DIR || 'lighthouse')
 const htmlFilePath = path.join(reportDir, 'index.html')
 
+// use stories.json instead of index.json for storybook v6
+// make sure to set buildStoriesJson to true in storybook main.js feature section
 const stories = storybookPlaywright.getStories('./storybook-static/index.json', (story) => {
     // skip docs, etc
     if (story.type !== 'story') {
@@ -233,10 +235,11 @@ export default globalSetup
 import { lighthousePlaywrightTeardown, buildAverageCsv } from 'lighthouse-reporting'
 
 const lhScoresDir = path.join(process.cwd(), process.env.LH_SCORES_DIR || 'lh-scores')
+const reportDir = path.join(process.cwd(), 'lighthouse')
 
 async function globalTeardown() {
     await lighthousePlaywrightTeardown()
-    await buildAverageCsv(lhScoresDir)
+    await buildAverageCsv(lhScoresDir, reportDir)
 }
 
 export default globalTeardown

src/lighthouseReports.ts

@@ -141,12 +141,18 @@ export const writeScoresToJson = async (lhScoresDir: string, name: string, score
 }
 
 /**
- * Generate average csv file. Make sure to use writeScoresToJson in your test!
+ * Generate average csv file. Make sure to use `writeScoresToJson` in your test!
+ * @param lhScoresDir path to folder with lighthouse json files. See `writeScoresToJson`.
+ * @param reportDir folder where `_AVERAGE_.json` will be generated
  */
-export const buildAverageCsv = async (lhScoresDir: string) => {
+export const buildAverageCsv = async (lhScoresDir: string, reportDir: string) => {
     const files = await fse.readdir(lhScoresDir)
     const jsonFiles = files.filter((f) => f.endsWith('.json'))
 
+    if (jsonFiles.length === 0) {
+        return
+    }
+
     // sum all the scores
     const scores: Record<string, number> = {}
     for (const fileName of jsonFiles) {
@@ -166,5 +172,5 @@ export const buildAverageCsv = async (lhScoresDir: string) => {
         scores[k] = v / jsonFiles.length
     })
 
-    await writeCsvResult(lhScoresDir, '_AVERAGE_', scores)
+    await writeCsvResult(reportDir, '_AVERAGE_', scores)
 }

src/storybookPlaywright.ts

@@ -4,8 +4,12 @@ import { BrowserContext, Locator, Page, expect } from '@playwright/test'
 interface StorybookIndexJSON {
     v: number
     entries: Record<string, StorybookIndexStory>
+    stories: Record<string, StorybookStoriesStory>
 }
 
+/**
+ * Storybook v7
+ */
 export interface StorybookIndexStory {
     id: string // composite-typography--variants
     title: string // Composite/Typography
@@ -15,7 +19,24 @@ export interface StorybookIndexStory {
     type: 'story' | 'docs'
 }
 
-type StoriesFilterFn = (story: StorybookIndexStory) => boolean
+/**
+ * Storybook v6
+ */
+export interface StorybookStoriesStory {
+    id: string // composite-typography--variants
+    title: string // Composite/Typography
+    name: string // Variants
+    importPath: string // ./components/Typography/Typography.stories.tsx
+    kind: string
+    story: string
+    parameters: {
+        __id: string
+        docsOnly: boolean
+        fileName: string
+    }
+}
+
+type StoriesFilterFn = <V7 = true>(story: V7 extends true ? StorybookIndexStory : StorybookStoriesStory) => boolean
 
 export const storybookPlaywright = {
     getStories: (pathToStorybookIndexJson: string, storyFilterFn: StoriesFilterFn) => {
@@ -25,7 +46,9 @@ export const storybookPlaywright = {
         }
         const storybookIndexJson: StorybookIndexJSON = fse.readJsonSync(pathToStorybookIndexJson)
 
-        const stories = Object.values(storybookIndexJson.entries).filter(storyFilterFn)
+        const storyObject = storybookIndexJson.entries || storybookIndexJson.stories
+
+        const stories = Object.values(storyObject).filter(storyFilterFn)
 
         return stories
     },