@brillout/test-e2e 0.3.0 → 0.3.2

package/dist/Logs.d.ts

@@ -6,8 +6,8 @@ export declare const Logs: {
     hasErrorLogs: typeof hasErrorLogs;
     flushEagerly: boolean;
 };
-declare type LogSource = 'stdout' | 'stderr' | 'Browser Error' | 'Browser Warning' | 'Browser Log' | 'Playwright' | 'run()' | 'run() failure' | 'test()' | 'Connection Error';
-declare type LogEntry = {
+type LogSource = 'stdout' | 'stderr' | 'Browser Error' | 'Browser Warning' | 'Browser Log' | 'Playwright' | 'run()' | 'run() failure' | 'test()' | 'Connection Error';
+type LogEntry = {
     logSource: LogSource;
     logText: string;
     logTimestamp: string;

package/dist/buildTs.js

@@ -19,7 +19,7 @@ async function buildTs(entry, outfile) {
         format: 'esm',
         target: 'es2020',
         bundle: true,
-        external: ['./node_modules/*', '@brillout/test-e2e'],
+        packages: 'external',
         minify: false,
     });
     {

package/dist/chai/types.d.ts

@@ -1,9 +1,10 @@
+/// <reference types="chai-subset" />
 export type { ChaiPlugin };
 export type { Expect };
 import type { use as chaiUse } from 'chai';
-declare type FirstFunctionArgument<T> = T extends (arg: infer A) => unknown ? A : never;
-declare type ChaiPlugin = FirstFunctionArgument<typeof chaiUse>;
-declare type Assertion = Chai.Assertion & {
+type FirstFunctionArgument<T> = T extends (arg: infer A) => unknown ? A : never;
+type ChaiPlugin = FirstFunctionArgument<typeof chaiUse>;
+type Assertion = Chai.Assertion & {
     not: Assertion;
     toContain: Assertion['contain'];
     toMatch: Assertion['match'];
@@ -12,4 +13,4 @@ declare type Assertion = Chai.Assertion & {
     toBeTruthy(): void;
     toBee: Assertion['equal'];
 };
-declare type Expect = (value: any) => Assertion;
+type Expect = (value: any) => Assertion;

package/dist/getConfig.d.ts

@@ -1,6 +1,6 @@
 export { getConfig };
 export { loadConfig };
-declare type Config = {
+type Config = {
     tolerateError?: Function;
 };
 declare function getConfig(): Config;

package/dist/getCurrentTest.d.ts

@@ -2,7 +2,7 @@ export { getCurrentTest };
 export { getCurrentTestOptional };
 export { setCurrentTest };
 import type { Page } from 'playwright-chromium';
-declare type TestInfo = {
+type TestInfo = {
     testFile: string;
     testName: string;
     tests?: {

package/dist/index.d.ts

@@ -2,3 +2,5 @@ export * from './setup';
 export { expect } from './chai/expect';
 export { test } from './test';
 export { page } from './page';
+export { editFile, editFileRevert } from './editFile';
+export { testScreenshotFixture } from './testScreenshotFixture';

package/dist/index.js

@@ -14,7 +14,7 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
     for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.page = exports.test = exports.expect = void 0;
+exports.testScreenshotFixture = exports.editFileRevert = exports.editFile = exports.page = exports.test = exports.expect = void 0;
 __exportStar(require("./setup"), exports);
 var expect_1 = require("./chai/expect");
 Object.defineProperty(exports, "expect", { enumerable: true, get: function () { return expect_1.expect; } });
@@ -22,3 +22,8 @@ var test_1 = require("./test");
 Object.defineProperty(exports, "test", { enumerable: true, get: function () { return test_1.test; } });
 var page_1 = require("./page");
 Object.defineProperty(exports, "page", { enumerable: true, get: function () { return page_1.page; } });
+var editFile_1 = require("./editFile");
+Object.defineProperty(exports, "editFile", { enumerable: true, get: function () { return editFile_1.editFile; } });
+Object.defineProperty(exports, "editFileRevert", { enumerable: true, get: function () { return editFile_1.editFileRevert; } });
+var testScreenshotFixture_1 = require("./testScreenshotFixture");
+Object.defineProperty(exports, "testScreenshotFixture", { enumerable: true, get: function () { return testScreenshotFixture_1.testScreenshotFixture; } });

package/dist/setup.d.ts

@@ -14,7 +14,6 @@ export { isWindows };
 export { isMac };
 export { sleep };
 export { getServerUrl };
-export { editFile, editFileRevert } from './editFile';
 declare function skip(reason: string): void;
 declare function run(cmd: string, { additionalTimeout, serverIsReadyMessage, serverIsReadyDelay, inspect, cwd, doNotFailOnWarning, serverUrl, }?: {
     additionalTimeout?: number;

package/dist/setup.js

@@ -3,7 +3,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.editFileRevert = exports.editFile = exports.getServerUrl = exports.sleep = exports.isMac = exports.isWindows = exports.isLinux = exports.isGithubAction = exports.isMinNodeVersion = exports.skip = exports.run = exports.expectError = exports.fetch = exports.fetchHtml = exports.autoRetry = exports.partRegex = void 0;
+exports.getServerUrl = exports.sleep = exports.isMac = exports.isWindows = exports.isLinux = exports.isGithubAction = exports.isMinNodeVersion = exports.skip = exports.run = exports.expectError = exports.fetch = exports.fetchHtml = exports.autoRetry = exports.partRegex = void 0;
 const child_process_1 = require("child_process");
 const path_1 = require("path");
 const utils_1 = require("./utils");
@@ -23,9 +23,6 @@ var part_regex_1 = require("@brillout/part-regex");
 Object.defineProperty(exports, "partRegex", { enumerable: true, get: function () { return part_regex_1.partRegex; } });
 var Logs_2 = require("./Logs");
 Object.defineProperty(exports, "expectError", { enumerable: true, get: function () { return Logs_2.expectError; } });
-var editFile_2 = require("./editFile");
-Object.defineProperty(exports, "editFile", { enumerable: true, get: function () { return editFile_2.editFile; } });
-Object.defineProperty(exports, "editFileRevert", { enumerable: true, get: function () { return editFile_2.editFileRevert; } });
 const serverUrlDefault = 'http://localhost:3000';
 const TIMEOUT_NPM_SCRIPT = 2 * 60 * 1000;
 const TIMEOUT_TEST_FUNCTION = 60 * 1000 * (!(0, utils_1.isGithubAction)() ? 1 : (0, utils_1.isWindows)() ? 5 : 3);

package/dist/testScreenshotFixture.d.ts

@@ -0,0 +1,2 @@
+export { testScreenshotFixture };
+declare function testScreenshotFixture(): Promise<void>;

package/dist/testScreenshotFixture.js

@@ -0,0 +1,90 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.testScreenshotFixture = void 0;
+// Reference implementation: https://playwright.dev/docs/test-snapshots
+const pixelmatch_1 = __importDefault(require("pixelmatch"));
+const pngjs_1 = require("pngjs");
+const fs_1 = __importDefault(require("fs"));
+const path_1 = __importDefault(require("path"));
+const utils_1 = require("./utils");
+const getCurrentTest_1 = require("./getCurrentTest");
+const expect_1 = require("./chai/expect");
+async function testScreenshotFixture() {
+    const { pngFixturPath, pngExpectPath, pngActualPath, pngDifferPath } = getPngPaths();
+    if (!fs_1.default.existsSync(pngFixturPath)) {
+        const pngActual = await takeScreenshot();
+        const fileContent = pngjs_1.PNG.sync.write(pngActual);
+        fs_1.default.writeFileSync(pngFixturPath, fileContent);
+        fs_1.default.writeFileSync(pngExpectPath, fileContent);
+        throw new Error([
+            'Screenshot fixture missing. Screenshot fixture created at following paths:',
+            ` - ${pngFixturPath}`,
+            ` - ${pngExpectPath}`,
+        ].join('\n'));
+    }
+    const pngExpect = pngjs_1.PNG.sync.read(fs_1.default.readFileSync(pngFixturPath));
+    const pngActual = await takeScreenshot();
+    (0, expect_1.expect)(pngExpect.width).toBe(pngActual.width);
+    (0, expect_1.expect)(pngExpect.height).toBe(pngActual.height);
+    const { width, height } = pngExpect;
+    const pngDiffer = new pngjs_1.PNG({ width, height });
+    const numDiffPixels = (0, pixelmatch_1.default)(pngExpect.data, pngActual.data, pngDiffer.data, width, height, { threshold: 0.1 });
+    try {
+        (0, expect_1.expect)(numDiffPixels).toBe(0);
+    }
+    catch (err) {
+        {
+            console.log('Actual image written at', pngActualPath);
+            fs_1.default.writeFileSync(pngActualPath, pngjs_1.PNG.sync.write(pngActual));
+        }
+        {
+            console.log('Expect image written at', pngExpectPath);
+            fs_1.default.writeFileSync(pngExpectPath, pngjs_1.PNG.sync.write(pngExpect));
+        }
+        {
+            console.log('Differ image written at', pngDifferPath);
+            fs_1.default.writeFileSync(pngDifferPath, pngjs_1.PNG.sync.write(pngDiffer));
+        }
+        throw err;
+    }
+}
+exports.testScreenshotFixture = testScreenshotFixture;
+async function takeScreenshot() {
+    const { page } = (0, getCurrentTest_1.getCurrentTest)();
+    (0, utils_1.assert)(page);
+    let screenshotCurr;
+    let screenshotPrev;
+    let attemps = 30;
+    while (attemps-- > 0) {
+        screenshotPrev = screenshotCurr;
+        screenshotCurr = pngjs_1.PNG.sync.read(await page.screenshot());
+        if (screenshotPrev) {
+            const { width, height } = screenshotCurr;
+            const numDiffPixels = (0, pixelmatch_1.default)(screenshotPrev.data, screenshotCurr.data, null, width, height, {
+                threshold: 0.1,
+            });
+            if (numDiffPixels === 0) {
+                return screenshotCurr;
+            }
+        }
+        await (0, utils_1.sleep)(300);
+    }
+    throw new Error("Couldn't take a stable screenshot. The UI seems to be continously changing.");
+}
+function getPngPaths() {
+    const cwd = getTestFileDir();
+    const pngFixturPath = path_1.default.join(cwd, './.test-screenshot-fixture.png');
+    const pngExpectPath = path_1.default.join(cwd, './test-screenshot-expect.png');
+    const pngActualPath = path_1.default.join(cwd, './test-screenshot-actual.png');
+    const pngDifferPath = path_1.default.join(cwd, './test-screenshot-differ.png');
+    return { pngFixturPath, pngExpectPath, pngActualPath, pngDifferPath };
+}
+function getTestFileDir() {
+    const { testFile, runInfo } = (0, getCurrentTest_1.getCurrentTest)();
+    const cwd = path_1.default.dirname(testFile);
+    (0, utils_1.assert)(runInfo.cwd === cwd);
+    return cwd;
+}

package/dist/utils/findFiles.d.ts

@@ -1,7 +1,7 @@
 export { findFiles };
 export { findFilesParseCliArgs };
 export type { FindFilter };
-declare type FindFilter = {
+type FindFilter = {
     terms: string[];
     exclude: boolean;
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@brillout/test-e2e",
-  "version": "0.3.0",
+  "version": "0.3.2",
   "bin": "./bin.js",
   "main": "./dist/index.js",
   "scripts": {
@@ -15,11 +15,13 @@
   "dependencies": {
     "@brillout/part-regex": "^0.1.2",
     "chai": "^4.3.6",
-    "esbuild": "^0.15.9",
+    "esbuild": "^0.16.5",
     "fast-glob": "^3.2.12",
     "node-fetch": "^2.6.1",
     "picocolors": "^1.0.0",
+    "pixelmatch": "^5.3.0",
     "playwright-chromium": "^1.22.2",
+    "pngjs": "^6.0.0",
     "source-map-support": "^0.5.21",
     "strip-ansi": "^6.0.1"
   },
@@ -27,6 +29,8 @@
     "@types/chai": "^4.3.3",
     "@types/node": "^15.6.1",
     "@types/node-fetch": "^2.5.12",
+    "@types/pixelmatch": "^5.2.4",
+    "@types/pngjs": "^6.0.1",
     "@types/source-map-support": "^0.5.6",
     "typescript": "^4.8.3"
   },