lighthouse-reporting 1.0.0 → 1.2.0

package/dist/index.cjs

@@ -2,7 +2,8 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const hooks = require("./hooks.cjs");
 const lighthouseReports = require("./lighthouseReports.cjs");
-const lighthouseTest = require("./lighthouseTest.cjs");
+const playwrightLighthouseTest = require("./playwrightLighthouseTest.cjs");
+const storybookPlaywright = require("./storybookPlaywright.cjs");
 require("os");
 require("path");
 require("fs-extra");
@@ -15,4 +16,5 @@ exports.lighthouseSetup = hooks.lighthouseSetup;
 exports.getScores = lighthouseReports.getScores;
 exports.writeCsvResult = lighthouseReports.writeCsvResult;
 exports.writeHtmlListEntryWithRetry = lighthouseReports.writeHtmlListEntryWithRetry;
-exports.lighthouseTest = lighthouseTest.lighthouseTest;
+exports.playwrightLighthouseTest = playwrightLighthouseTest.playwrightLighthouseTest;
+exports.storybookPlaywright = storybookPlaywright.storybookPlaywright;

package/dist/index.d.ts

@@ -1,3 +1,4 @@
-export * from './hooks';
-export * from './lighthouseReports';
-export * from './lighthouseTest';
+export * from './hooks.js';
+export * from './lighthouseReports.js';
+export * from './playwrightLighthouseTest.js';
+export * from './storybookPlaywright.js';

package/dist/index.js

@@ -1,6 +1,7 @@
 import { lighthousePlaywrightTeardown, lighthouseSetup } from "./hooks.js";
 import { getScores, writeCsvResult, writeHtmlListEntryWithRetry } from "./lighthouseReports.js";
-import { lighthouseTest } from "./lighthouseTest.js";
+import { playwrightLighthouseTest } from "./playwrightLighthouseTest.js";
+import { storybookPlaywright } from "./storybookPlaywright.js";
 import "os";
 import "path";
 import "fs-extra";
@@ -12,7 +13,8 @@ export {
   getScores,
   lighthousePlaywrightTeardown,
   lighthouseSetup,
-  lighthouseTest,
+  playwrightLighthouseTest,
+  storybookPlaywright,
   writeCsvResult,
   writeHtmlListEntryWithRetry
 };

package/dist/lighthouse-reporting.umd.cjs

@@ -169,7 +169,7 @@
     }
     throw new Error("No available ports found");
   }
-  const lighthouseTest = test.test.extend({
+  const playwrightLighthouseTest = test.test.extend({
     port: [
       // eslint-disable-next-line no-empty-pattern
       async ({}, use) => {
@@ -192,10 +192,30 @@
       { scope: "test" }
     ]
   });
+  const storybookPlaywright = {
+    getStories: (pathToStorybookIndexJson, storyFilterFn) => {
+      if (!fse.existsSync(pathToStorybookIndexJson)) {
+        console.log(pathToStorybookIndexJson, "doesn't exist.");
+        throw new Error("Please build storybook before running tests!");
+      }
+      const storybookIndexJson = fse.readJsonSync(pathToStorybookIndexJson);
+      const stories = Object.values(storybookIndexJson.entries).filter(storyFilterFn);
+      return stories;
+    },
+    captureScreenshot: async (story, context, screenshotOptions) => {
+      const page = context.pages()[0];
+      await page.goto(`/iframe.html?id=${story.id}`);
+      await test.expect(page.locator(".sb-show-main")).toBeVisible();
+      await test.expect(page.locator(".sb-show-errordisplay")).not.toBeVisible();
+      await page.waitForLoadState("networkidle");
+      await test.expect(page).toHaveScreenshot(`${story.id}.png`, screenshotOptions);
+    }
+  };
   exports2.getScores = getScores;
   exports2.lighthousePlaywrightTeardown = lighthousePlaywrightTeardown;
   exports2.lighthouseSetup = lighthouseSetup;
-  exports2.lighthouseTest = lighthouseTest;
+  exports2.playwrightLighthouseTest = playwrightLighthouseTest;
+  exports2.storybookPlaywright = storybookPlaywright;
   exports2.writeCsvResult = writeCsvResult;
   exports2.writeHtmlListEntryWithRetry = writeHtmlListEntryWithRetry;
   Object.defineProperty(exports2, Symbol.toStringTag, { value: "Module" });

package/dist/{lighthouseTest.cjs → playwrightLighthouseTest.cjs}

@@ -5,7 +5,7 @@ const path = require("path");
 const getPort = require("get-port");
 const test = require("@playwright/test");
 const constants = require("./constants-667b8033.cjs");
-const lighthouseTest = test.test.extend({
+const playwrightLighthouseTest = test.test.extend({
   port: [
     // eslint-disable-next-line no-empty-pattern
     async ({}, use) => {
@@ -28,4 +28,4 @@ const lighthouseTest = test.test.extend({
     { scope: "test" }
   ]
 });
-exports.lighthouseTest = lighthouseTest;
+exports.playwrightLighthouseTest = playwrightLighthouseTest;

package/dist/playwrightLighthouseTest.d.ts

@@ -0,0 +1,6 @@
+import { BrowserContext } from '@playwright/test';
+export declare const playwrightLighthouseTest: import("@playwright/test").TestType<import("@playwright/test").PlaywrightTestArgs & import("@playwright/test").PlaywrightTestOptions & {
+    context: BrowserContext;
+}, import("@playwright/test").PlaywrightWorkerArgs & import("@playwright/test").PlaywrightWorkerOptions & {
+    port: number;
+}>;

package/dist/{lighthouseTest.js → playwrightLighthouseTest.js}

@@ -3,7 +3,7 @@ import path from "path";
 import getPort from "get-port";
 import { test, chromium } from "@playwright/test";
 import { P as PW_TMP_DIR } from "./constants-226e9774.js";
-const lighthouseTest = test.extend({
+const playwrightLighthouseTest = test.extend({
   port: [
     // eslint-disable-next-line no-empty-pattern
     async ({}, use) => {
@@ -27,5 +27,5 @@ const lighthouseTest = test.extend({
   ]
 });
 export {
-  lighthouseTest
+  playwrightLighthouseTest
 };

package/dist/storybookPlaywright.cjs

@@ -0,0 +1,24 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const fse = require("fs-extra");
+const test = require("@playwright/test");
+const storybookPlaywright = {
+  getStories: (pathToStorybookIndexJson, storyFilterFn) => {
+    if (!fse.existsSync(pathToStorybookIndexJson)) {
+      console.log(pathToStorybookIndexJson, "doesn't exist.");
+      throw new Error("Please build storybook before running tests!");
+    }
+    const storybookIndexJson = fse.readJsonSync(pathToStorybookIndexJson);
+    const stories = Object.values(storybookIndexJson.entries).filter(storyFilterFn);
+    return stories;
+  },
+  captureScreenshot: async (story, context, screenshotOptions) => {
+    const page = context.pages()[0];
+    await page.goto(`/iframe.html?id=${story.id}`);
+    await test.expect(page.locator(".sb-show-main")).toBeVisible();
+    await test.expect(page.locator(".sb-show-errordisplay")).not.toBeVisible();
+    await page.waitForLoadState("networkidle");
+    await test.expect(page).toHaveScreenshot(`${story.id}.png`, screenshotOptions);
+  }
+};
+exports.storybookPlaywright = storybookPlaywright;

package/dist/storybookPlaywright.d.ts

@@ -0,0 +1,51 @@
+import { BrowserContext } from '@playwright/test';
+export interface StorybookIndexStory {
+    id: string;
+    title: string;
+    name: string;
+    importPath: string;
+    tags: Array<string>;
+    type: 'story' | 'docs';
+}
+type StoriesFilterFn = (story: StorybookIndexStory) => boolean;
+export declare const storybookPlaywright: {
+    getStories: (pathToStorybookIndexJson: string, storyFilterFn: StoriesFilterFn) => StorybookIndexStory[];
+    captureScreenshot: (story: StorybookIndexStory, context: BrowserContext, screenshotOptions?: {
+        /**
+         * When set to `"disabled"`, stops CSS animations, CSS transitions and Web Animations. Animations get different
+         * treatment depending on their duration:
+         * - finite animations are fast-forwarded to completion, so they'll fire `transitionend` event.
+         * - infinite animations are canceled to initial state, and then played over after the screenshot.
+         *
+         * Defaults to `"disabled"` that disables animations.
+         */
+        animations?: 'disabled' | 'allow';
+        /**
+         * When set to `"hide"`, screenshot will hide text caret. When set to `"initial"`, text caret behavior will not be
+         * changed.  Defaults to `"hide"`.
+         */
+        caret?: 'hide' | 'initial';
+        /**
+         * An object which specifies clipping of the resulting image.
+         */
+        clip?: {
+            /**
+             * x-coordinate of top-left corner of clip area
+             */
+            x: number;
+            /**
+             * y-coordinate of top-left corner of clip area
+             */
+            y: number;
+            /**
+             * width of clipping area
+             */
+            width: number;
+            /**
+             * height of clipping area
+             */
+            height: number;
+        };
+    }) => Promise<void>;
+};
+export {};

package/dist/storybookPlaywright.js

@@ -0,0 +1,24 @@
+import fse from "fs-extra";
+import { expect } from "@playwright/test";
+const storybookPlaywright = {
+  getStories: (pathToStorybookIndexJson, storyFilterFn) => {
+    if (!fse.existsSync(pathToStorybookIndexJson)) {
+      console.log(pathToStorybookIndexJson, "doesn't exist.");
+      throw new Error("Please build storybook before running tests!");
+    }
+    const storybookIndexJson = fse.readJsonSync(pathToStorybookIndexJson);
+    const stories = Object.values(storybookIndexJson.entries).filter(storyFilterFn);
+    return stories;
+  },
+  captureScreenshot: async (story, context, screenshotOptions) => {
+    const page = context.pages()[0];
+    await page.goto(`/iframe.html?id=${story.id}`);
+    await expect(page.locator(".sb-show-main")).toBeVisible();
+    await expect(page.locator(".sb-show-errordisplay")).not.toBeVisible();
+    await page.waitForLoadState("networkidle");
+    await expect(page).toHaveScreenshot(`${story.id}.png`, screenshotOptions);
+  }
+};
+export {
+  storybookPlaywright
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "lighthouse-reporting",
-  "version": "1.0.0",
+  "version": "1.2.0",
   "type": "module",
   "scripts": {
     "build": "vite build && vite build -c vite.umd.config.ts && tsc -p ./tsconfig.build.json",
@@ -22,11 +22,12 @@
       "default": "./dist/index.cjs"
     }
   },
-  "peerDependencies": {
-    "@playwright/test": "1"
+  "optionalDependencies": {
+    "@playwright/test": "^1",
+    "get-port": "^6"
   },
   "devDependencies": {
-    "@playwright/test": "^1.34.2",
+    "@playwright/test": "^1.34.3",
     "@types/fs-extra": "^11.0.1",
     "@types/node": "^20.2.3",
     "@typescript-eslint/eslint-plugin": "^5.59.7",
@@ -34,6 +35,7 @@
     "eslint": "^8.41.0",
     "eslint-config-prettier": "^8.8.0",
     "eslint-plugin-prettier": "^4.2.1",
+    "get-port": "^6.1.2",
     "husky": "^8.0.3",
     "npm-run-all": "^4.1.5",
     "prettier": "^2.8.8",
@@ -43,8 +45,7 @@
     "vite-plugin-static-copy": "^0.15.0"
   },
   "dependencies": {
-    "fs-extra": "^11.1.1",
-    "get-port": "^6.1.2"
+    "fs-extra": "^11.1.1"
   },
   "repository": {
     "type": "git",

package/dist/lighthouseTest.d.ts

@@ -1,6 +0,0 @@
-import type { BrowserContext } from '@playwright/test';
-export declare const lighthouseTest: import("@playwright/test").TestType<import("@playwright/test").PlaywrightTestArgs & import("@playwright/test").PlaywrightTestOptions & {
-    context: BrowserContext;
-}, import("@playwright/test").PlaywrightWorkerArgs & import("@playwright/test").PlaywrightWorkerOptions & {
-    port: number;
-}>;