storybook-addon-playwright 4.8.1 → 4.9.0

package/dist/api/server/services/diff-image-to-screenshot.d.ts

@@ -2,9 +2,8 @@
 import { DiffImageToScreenShot } from '../../typings';
 import { MatchImageSnapshotOptions } from 'jest-image-snapshot';
 import { ImageDiffResult } from '../../typings';
-interface SnapshotOptions extends MatchImageSnapshotOptions {
+export interface SnapshotOptions extends MatchImageSnapshotOptions {
     receivedImageBuffer: Buffer;
     updateSnapshot?: boolean;
 }
 export declare const diffImageToScreenshot: (data: DiffImageToScreenShot, imageBuffer: Buffer, options?: Partial<SnapshotOptions>) => Promise<ImageDiffResult>;
-export {};

package/dist/api/server/services/test-screenshot-service.js

@@ -4,7 +4,12 @@ const tslib_1 = require("tslib");
 const utils_1 = require("./utils");
 const diff_image_to_screenshot_1 = require("./diff-image-to-screenshot");
 const make_screenshot_1 = require("./make-screenshot");
+const configs_1 = require("../configs");
+const get_screenshot_paths_1 = require("../utils/get-screenshot-paths");
+const fs_1 = tslib_1.__importDefault(require("fs"));
 exports.testScreenshotService = (data) => tslib_1.__awaiter(void 0, void 0, void 0, function* () {
+    const { requestType = 'story-screenshot' } = data;
+    const config = configs_1.getConfigs();
     const screenshotData = yield utils_1.getScreenshotData(data);
     if (!screenshotData) {
         throw new Error('Unable to find screenshot data.');
@@ -18,21 +23,40 @@ exports.testScreenshotService = (data) => tslib_1.__awaiter(void 0, void 0, void
             browserType: screenshotData.browserType,
             props: screenshotData.props,
             requestId: data.requestId,
-            requestType: data.requestType,
+            requestType,
             screenshotOptions: screenshotData.screenshotOptions,
             storyId: data.storyId,
         }, true);
-        result = yield diff_image_to_screenshot_1.diffImageToScreenshot({
-            browserType: screenshotData.browserType,
-            fileName: data.fileName,
-            storyId: data.storyId,
-            title: screenshotData.title,
-        }, snapshotData.buffer);
+        if (config.compareScreenshot !== undefined) {
+            const paths = get_screenshot_paths_1.getScreenshotPaths(Object.assign(Object.assign({}, data), { browserType: screenshotData.browserType, title: screenshotData.title }));
+            if (!fs_1.default.existsSync(paths.fileName)) {
+                throw new Error(`Unable to find the file for '${paths.screenshotIdentifier}' screenshot in '${paths.screenshotsDir}' directory!`);
+            }
+            const baseImageInfo = Object.assign(Object.assign({}, paths), { get base64() {
+                    return fs_1.default.readFileSync(paths.fileName, { encoding: 'base64' });
+                },
+                get buffer() {
+                    return fs_1.default.readFileSync(paths.fileName);
+                } });
+            const customScreenshot = yield config.compareScreenshot(Object.assign(Object.assign(Object.assign({}, data), screenshotData), { baseImage: baseImageInfo, screenshot: snapshotData }));
+            if (customScreenshot !== false) {
+                const { diffImageString } = customScreenshot, restOfCustomScreenshotResult = tslib_1.__rest(customScreenshot, ["diffImageString"]);
+                result = Object.assign(Object.assign({ imgSrcString: diffImageString }, restOfCustomScreenshotResult), { newScreenshot: baseImageInfo.base64 });
+            }
+        }
+        if (Object.keys(result).length === 0) {
+            result = yield diff_image_to_screenshot_1.diffImageToScreenshot({
+                browserType: screenshotData.browserType,
+                fileName: data.fileName,
+                storyId: data.storyId,
+                title: screenshotData.title,
+            }, snapshotData.buffer);
+        }
         result.newScreenshot = snapshotData.base64;
     }
     catch (error) {
         result.pass = false;
-        result.error = error.message;
+        result.error = typeof error === 'string' ? error : error.message;
     }
     result.screenshotId = data.screenshotId;
     result.storyId = data.storyId;

package/dist/api/server/services/test-screenshot-service.js.map

@@ -1 +1 @@
-{"version":3,"file":"test-screenshot-service.js","sourceRoot":"","sources":["../../../../src/api/server/services/test-screenshot-service.ts"],"names":[],"mappings":";;;AACA,mCAA4C;AAC5C,yEAAmE;AACnE,uDAAmD;AAItC,QAAA,qBAAqB,GAAG,CACnC,IAAkC,EACR,EAAE;IAC5B,MAAM,cAAc,GAAG,MAAM,yBAAiB,CAAC,IAAI,CAAC,CAAC;IAErD,IAAI,CAAC,cAAc,EAAE;QACnB,MAAM,IAAI,KAAK,CAAC,iCAAiC,CAAC,CAAC;KACpD;IAED,IAAI,MAAM,GAAoB,EAAE,CAAC;IACjC,IAAI,YAAiC,CAAC;IAEtC,IAAI;QACF,YAAY,GAAG,MAAM,gCAAc,CACjC;YACE,UAAU,EAAE,cAAc,CAAC,UAAU;YACrC,cAAc,EAAE,cAAc,CAAC,cAAc;YAC7C,WAAW,EAAE,cAAc,CAAC,WAAW;YACvC,KAAK,EAAE,cAAc,CAAC,KAAK;YAC3B,SAAS,EAAE,IAAI,CAAC,SAAS;YACzB,WAAW,EAAE,IAAI,CAAC,WAAW;YAC7B,iBAAiB,EAAE,cAAc,CAAC,iBAAiB;YACnD,OAAO,EAAE,IAAI,CAAC,OAAO;SACtB,EACD,IAAI,CACL,CAAC;QAEF,MAAM,GAAG,MAAM,gDAAqB,CAClC;YACE,WAAW,EAAE,cAAc,CAAC,WAAW;YACvC,QAAQ,EAAE,IAAI,CAAC,QAAQ;YACvB,OAAO,EAAE,IAAI,CAAC,OAAO;YACrB,KAAK,EAAE,cAAc,CAAC,KAAK;SAC5B,EACD,YAAY,CAAC,MAAM,CACpB,CAAC;QACF,MAAM,CAAC,aAAa,GAAG,YAAY,CAAC,MAAM,CAAC;KAC5C;IAAC,OAAO,KAAK,EAAE;QACd,MAAM,CAAC,IAAI,GAAG,KAAK,CAAC;QACpB,MAAM,CAAC,KAAK,GAAG,KAAK,CAAC,OAAO,CAAC;KAC9B;IAED,MAAM,CAAC,YAAY,GAAG,IAAI,CAAC,YAAY,CAAC;IACxC,MAAM,CAAC,OAAO,GAAG,IAAI,CAAC,OAAO,CAAC;IAC9B,MAAM,CAAC,QAAQ,GAAG,IAAI,CAAC,QAAQ,CAAC;IAChC,MAAM,CAAC,cAAc,GAAG,cAAc,CAAC;IAEvC,OAAO,MAAM,CAAC;AAChB,CAAC,CAAA,CAAC"}
+{"version":3,"file":"test-screenshot-service.js","sourceRoot":"","sources":["../../../../src/api/server/services/test-screenshot-service.ts"],"names":[],"mappings":"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"}

package/dist/typings/compare-screenshot.d.ts

@@ -0,0 +1,17 @@
+/// <reference types="node" />
+import { ScreenshotPathInfo } from '../api/server/utils/get-screenshot-paths';
+import { ImageDiffResult } from '../api/typings';
+import { RequestData } from './request';
+import { BrowserTypes, ScreenshotImageData, ScreenshotInfo } from './screenshot';
+export interface BaseImageInfo extends ScreenshotPathInfo {
+    buffer: Buffer;
+    base64: string;
+}
+export interface CompareScreenshotParams extends ScreenshotInfo, RequestData {
+    screenshot: ScreenshotImageData;
+    browserType: BrowserTypes;
+    baseImage: BaseImageInfo;
+}
+export interface CompareScreenshotReturnType extends Required<Pick<ImageDiffResult, 'pass'>>, Omit<ImageDiffResult, 'pass' | 'added'> {
+    diffImageString?: string;
+}

package/dist/typings/compare-screenshot.js

@@ -0,0 +1,3 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+//# sourceMappingURL=compare-screenshot.js.map

package/dist/typings/compare-screenshot.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"compare-screenshot.js","sourceRoot":"","sources":["../../src/typings/compare-screenshot.ts"],"names":[],"mappings":""}

package/dist/typings/config.d.ts

@@ -6,6 +6,7 @@ import { RequestData } from './request';
 import { StoryInfo } from './story-info';
 import { TestFileScreenshots } from '../api/server/services/test-file-screenshots';
 import { Theme } from '@material-ui/core';
+import { CompareScreenshotParams, CompareScreenshotReturnType } from './compare-screenshot';
 declare type PageGotoOptions = Parameters<Page['goto']>[1];
 export interface Config<T extends unknown = Page> {
     storybookEndpoint: string;
@@ -30,6 +31,7 @@ export interface Config<T extends unknown = Page> {
         story?: number;
     };
     screenshotOptions?: TakeScreenshotOptionsParams;
+    compareScreenshot?: (data: CompareScreenshotParams) => Promise<CompareScreenshotReturnType | false>;
     theme?: Theme;
 }
 export {};

package/dist/typings/screenshot.d.ts

@@ -44,5 +44,5 @@ export interface ScreenshotData extends ScreenshotSetting {
 export declare type ScreenshotProp = {
     [prop: string]: any;
 };
-export declare type ScreenshotTestTargetType = 'file' | 'story' | 'all';
+export declare type ScreenshotTestTargetType = 'file' | 'story' | 'all' | 'story-screenshot';
 export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "storybook-addon-playwright",
-  "version": "4.8.1",
+  "version": "4.9.0",
   "description": "An addon to visually test the stories in the multiple browsers within storybook environment",
   "author": "m.doaie <mdoaie@yahoo.co.uk>",
   "engines": {