@gravity-ui/playwright-tools 0.8.4 → 0.9.1

package/README.md

@@ -14,6 +14,7 @@ import { matchScreenshot } from 'playwright-tools/actions';
 
 - [actions](./actions/README.md) — Browser actions.
 - [auth/storage](./auth/storage/README.md) — Authentication functions for saving and restoring browser storage snapshots.
+- [component-tests](./component-tests/README.md) — Utilities and fixtures for Playwright Component Testing.
 - [fixtures](./fixtures/README.md) — Fixtures for passing values into tests.
 - [har](./har/README.md) — Functions for working with HAR request dumps.
 - [config](./config/README.md) — Base configuration.

package/actions/expect-request/matchers/compare/DiffPrinter.js

@@ -34,34 +34,39 @@ class DiffPrinter {
         const pathAnnotations = filteredLog.reduce((acc, logItem) => {
             const { context, type } = logItem;
             const path = this.makePathFromContext(context);
-            if (!acc[path]) {
-                acc[path] = [];
-            }
+            const existingAnnotations = acc[path] ?? [];
+            let newAnnotation;
             if (type === constants_1.DiffType.ValueMismatch) {
                 if (logItem.expected === undefined && logItem.received !== undefined) {
-                    acc[path].push({ type: constants_1.PathAnnotationType.ObjectExtraProperty });
+                    newAnnotation = { type: constants_1.PathAnnotationType.ObjectExtraProperty };
                 }
                 else {
-                    acc[path].push({
+                    newAnnotation = {
                         type: constants_1.PathAnnotationType.ValueMismatch,
                         expected: logItem.expected,
                         received: logItem.received,
-                    });
+                    };
                 }
             }
             else if (type === constants_1.DiffType.ObjectMissingProperty) {
-                acc[path].push({
+                newAnnotation = {
                     type: constants_1.PathAnnotationType.ObjectMissingProperty,
                     expected: logItem.expected,
-                });
+                };
             }
             else if (type === constants_1.DiffType.ArrayMissingValue) {
-                acc[path].push({
+                newAnnotation = {
                     type: constants_1.PathAnnotationType.ArrayMissingValue,
                     expected: logItem.expected,
-                });
+                };
             }
-            return acc;
+            if (!newAnnotation) {
+                return acc;
+            }
+            return {
+                ...acc,
+                [path]: [...existingAnnotations, newAnnotation],
+            };
         }, {});
         return (0, print_json_diff_1.printJsonDiff)({ json: side === 'left' ? this.left : this.right, pathAnnotations });
     }

package/component-tests/fixtures/index.d.ts

@@ -0,0 +1,2 @@
+export type { MountFn, MountTestArgs } from './mount';
+export { mountFixture, TEST_WRAPPER_CLASS } from './mount';

package/component-tests/fixtures/index.js

@@ -0,0 +1,6 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TEST_WRAPPER_CLASS = exports.mountFixture = void 0;
+var mount_1 = require("./mount");
+Object.defineProperty(exports, "mountFixture", { enumerable: true, get: function () { return mount_1.mountFixture; } });
+Object.defineProperty(exports, "TEST_WRAPPER_CLASS", { enumerable: true, get: function () { return mount_1.TEST_WRAPPER_CLASS; } });

package/component-tests/index.d.ts

@@ -0,0 +1,4 @@
+export type { Cases, CasesWithName, Scenario, ScenarioName } from './utils';
+export { createSmokeScenarios } from './utils';
+export type { MountFn, MountTestArgs } from './fixtures';
+export { mountFixture, TEST_WRAPPER_CLASS } from './fixtures';

package/component-tests/index.js

@@ -0,0 +1,8 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TEST_WRAPPER_CLASS = exports.mountFixture = exports.createSmokeScenarios = void 0;
+var utils_1 = require("./utils");
+Object.defineProperty(exports, "createSmokeScenarios", { enumerable: true, get: function () { return utils_1.createSmokeScenarios; } });
+var fixtures_1 = require("./fixtures");
+Object.defineProperty(exports, "mountFixture", { enumerable: true, get: function () { return fixtures_1.mountFixture; } });
+Object.defineProperty(exports, "TEST_WRAPPER_CLASS", { enumerable: true, get: function () { return fixtures_1.TEST_WRAPPER_CLASS; } });

package/{storybook → component-tests/utils/create-smoke-scenarios}/create-smoke-scenarios.js

@@ -35,12 +35,14 @@ const createSmokeScenarios = (baseProps, propsCases, options) => {
         }
         else {
             propCases.forEach((propCase) => {
-                const hasStringifyMethod = propCase?.toString;
+                const hasStringifyMethod = propCase !== null &&
+                    propCase !== undefined &&
+                    typeof propCase.toString === 'function';
                 if (!hasStringifyMethod) {
                     throw new Error('The case value does not have a method "toString", use case with name.');
                 }
                 scenarios.push([
-                    `${scenarioName}[${propName}: ${propCase?.toString()}]`,
+                    `${scenarioName}[${propName}: ${String(propCase)}]`,
                     {
                         ...baseProps,
                         [propName]: propCase,

package/component-tests/utils/index.d.ts

@@ -0,0 +1,2 @@
+export type { Cases, CasesWithName, Scenario, ScenarioName } from './create-smoke-scenarios';
+export { createSmokeScenarios } from './create-smoke-scenarios';

package/component-tests/utils/index.js

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.createSmokeScenarios = void 0;
+var create_smoke_scenarios_1 = require("./create-smoke-scenarios");
+Object.defineProperty(exports, "createSmokeScenarios", { enumerable: true, get: function () { return create_smoke_scenarios_1.createSmokeScenarios; } });

package/fixtures/index.d.ts

@@ -8,5 +8,3 @@ export type { ExpectScreenshotFn, ExpectScreenshotTestArgs, ExpectScreenshotFixt
 export { expectScreenshotFixtureBuilder } from './expect-screenshot';
 export type { GlobalSettingsFixturesBuilderParams, GlobalSettingsTestArgs, GlobalSettingsWorkerArgs, } from './global-settings';
 export { globalSettingsFixturesBuilder } from './global-settings';
-export type { MountFn, MountTestArgs } from './mount';
-export { mountFixture, TEST_WRAPPER_CLASS } from './mount';

package/fixtures/index.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.TEST_WRAPPER_CLASS = exports.mountFixture = exports.globalSettingsFixturesBuilder = exports.expectScreenshotFixtureBuilder = exports.expectRequest = exports.mockNetworkFixtureBuilder = exports.testSlug = void 0;
+exports.globalSettingsFixturesBuilder = exports.expectScreenshotFixtureBuilder = exports.expectRequest = exports.mockNetworkFixtureBuilder = exports.testSlug = void 0;
 var testSlug_1 = require("./testSlug");
 Object.defineProperty(exports, "testSlug", { enumerable: true, get: function () { return testSlug_1.testSlug; } });
 var mock_network_1 = require("./mock-network");
@@ -11,6 +11,3 @@ var expect_screenshot_1 = require("./expect-screenshot");
 Object.defineProperty(exports, "expectScreenshotFixtureBuilder", { enumerable: true, get: function () { return expect_screenshot_1.expectScreenshotFixtureBuilder; } });
 var global_settings_1 = require("./global-settings");
 Object.defineProperty(exports, "globalSettingsFixturesBuilder", { enumerable: true, get: function () { return global_settings_1.globalSettingsFixturesBuilder; } });
-var mount_1 = require("./mount");
-Object.defineProperty(exports, "mountFixture", { enumerable: true, get: function () { return mount_1.mountFixture; } });
-Object.defineProperty(exports, "TEST_WRAPPER_CLASS", { enumerable: true, get: function () { return mount_1.TEST_WRAPPER_CLASS; } });

package/fixtures/mock-network/mock-network-fixture.d.ts

@@ -1,6 +1,6 @@
 import type { PlaywrightTestArgs, PlaywrightTestOptions, TestFixture } from '@playwright/test';
 import type { MockNetworkFixtureBuilderParams } from './types';
-export declare function mockNetworkFixtureBuilder({ shouldUpdate, forceUpdateIfHarMissing, updateTimeout, zip, url: urlMatcherBuilder, dumpsPath, dumpsFilePath, ...harPatcherParams }: MockNetworkFixtureBuilderParams): [TestFixture<boolean, PlaywrightTestArgs & PlaywrightTestOptions>, {
+export declare function mockNetworkFixtureBuilder({ shouldUpdate, forceUpdateIfHarMissing, updateTimeout, zip, url: urlMatcherBuilder, dumpsFilePath, ...harPatcherParams }: MockNetworkFixtureBuilderParams): [TestFixture<boolean, PlaywrightTestArgs & PlaywrightTestOptions>, {
     auto: boolean;
     scope: "test";
 }];

package/fixtures/mock-network/mock-network-fixture.js

@@ -3,7 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.mockNetworkFixtureBuilder = mockNetworkFixtureBuilder;
 const har_1 = require("../../har");
 const har_patcher_1 = require("./har-patcher");
-function mockNetworkFixtureBuilder({ shouldUpdate, forceUpdateIfHarMissing, updateTimeout, zip = true, url: urlMatcherBuilder, dumpsPath, dumpsFilePath, ...harPatcherParams }) {
+function mockNetworkFixtureBuilder({ shouldUpdate, forceUpdateIfHarMissing, updateTimeout, zip = true, url: urlMatcherBuilder, dumpsFilePath, ...harPatcherParams }) {
     const mockNetworkFixture = async ({ baseURL: rawBaseURL, page }, use, testInfo) => {
         if (!rawBaseURL) {
             throw new Error('baseURL should be specified in playwright config');
@@ -16,7 +16,6 @@ function mockNetworkFixtureBuilder({ shouldUpdate, forceUpdateIfHarMissing, upda
         const update = Boolean(shouldUpdate);
         const url = urlMatcherBuilder(baseURL);
         await (0, har_1.initDumps)(page, testInfo, {
-            dumpsPath,
             dumpsFilePath,
             forceUpdateIfHarMissing,
             updateTimeout,

package/fixtures/mock-network/types.d.ts

@@ -27,29 +27,16 @@ export type MockNetworkFixtureBuilderParams = {
      * @returns string | RegExp Regular expression prepared template; Glob or RegExp.
      */
     url: (baseURL: string) => string | RegExp;
-    /**
-     * User path to the directory with dumps. By default, the path is calculated as
-     * testInfo.snapshotPath('').replace(/-snapshots\/[^/]+$/, '-data/' + slug)
-     * @param testInfo TestInfo information about the current test
-     * @param slug Test slug
-     *
-     * @returns string path to the directory with dumps
-     *
-     * @deprecated use dumpsFilePath.
-     */
-    dumpsPath?: (testInfo: TestInfo, slug: string) => string;
     /**
      * Custom path to the dump file. Overrides the path generated by dumpsPath.
      * @param params Parameters for constructing a path:
      * @param params.testInfo TestInfo information about the current test
-     * @param params.slug test slug
      * @param params.zip Flag to use zip archive for .har
      *
      * @returns string path to dump file
      */
     dumpsFilePath?: (params: {
         testInfo: TestInfo;
-        slug: string;
         zip: boolean;
     }) => string;
     /**

package/har/addFlushTransform.js

@@ -6,6 +6,7 @@ const getPlaywrightCoreModule_1 = require("./getPlaywrightCoreModule");
 function wrapHarRecorderMethods(HarRecorder, transform) {
     const originalFlush = HarRecorder.prototype.flush;
     if (originalFlush) {
+        // eslint-disable-next-line no-param-reassign -- intentional prototype monkey-patching
         HarRecorder.prototype.flush = function flush() {
             if (transform) {
                 // Transform requests when transform function is present

package/har/dumpsFilePathBulders.d.ts

@@ -0,0 +1,9 @@
+import type { TestInfo } from '@playwright/test';
+export declare function defaultDumpsFilePathBuilder({ testInfo, zip, }: {
+    testInfo: TestInfo;
+    zip: boolean;
+}): string;
+export declare function dumpsPathBuldeWithSlugBuilder({ testInfo, zip, }: {
+    testInfo: TestInfo;
+    zip: boolean;
+}): string;

package/har/dumpsFilePathBulders.js

@@ -0,0 +1,19 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.defaultDumpsFilePathBuilder = defaultDumpsFilePathBuilder;
+exports.dumpsPathBuldeWithSlugBuilder = dumpsPathBuldeWithSlugBuilder;
+const utils_1 = require("../utils");
+function defaultDumpsFilePathBuilder({ testInfo, zip, }) {
+    const filePath = testInfo.snapshotPath(testInfo.titlePath
+        .slice(1)
+        .join('-')
+        .replace(/ /g, '-')
+        .replace(/[^a-zA-Z0-9\-_]/g, ''));
+    return zip ? `${filePath}.zip` : `${filePath}.har`;
+}
+// previous implementation, includes slug in the path
+function dumpsPathBuldeWithSlugBuilder({ testInfo, zip, }) {
+    const slug = (0, utils_1.extractTestSlug)(testInfo.title, true);
+    const filePath = testInfo.snapshotPath('').replace(/-snapshots\/[^/]+$/, '-data/' + slug);
+    return zip ? `${filePath}.zip` : `${filePath}.har`;
+}

package/har/index.d.ts

@@ -11,3 +11,4 @@ export { initDumps } from './initDumps';
 export { replaceBaseUrlInEntry } from './replaceBaseUrlInEntry';
 export { setExtraHash } from './setExtraHash';
 export type { HARFile, Entry } from './types';
+export { defaultDumpsFilePathBuilder, dumpsPathBuldeWithSlugBuilder } from './dumpsFilePathBulders';

package/har/index.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.setExtraHash = exports.replaceBaseUrlInEntry = exports.initDumps = exports.clearHeaders = exports.addFlushTransform = exports.addHarRecorderTransform = exports.addHarOpenTransform = exports.addHarLookupTransform = void 0;
+exports.dumpsPathBuldeWithSlugBuilder = exports.defaultDumpsFilePathBuilder = exports.setExtraHash = exports.replaceBaseUrlInEntry = exports.initDumps = exports.clearHeaders = exports.addFlushTransform = exports.addHarRecorderTransform = exports.addHarOpenTransform = exports.addHarLookupTransform = void 0;
 var addHarLookupTransform_1 = require("./addHarLookupTransform");
 Object.defineProperty(exports, "addHarLookupTransform", { enumerable: true, get: function () { return addHarLookupTransform_1.addHarLookupTransform; } });
 var addHarOpenTransform_1 = require("./addHarOpenTransform");
@@ -17,3 +17,6 @@ var replaceBaseUrlInEntry_1 = require("./replaceBaseUrlInEntry");
 Object.defineProperty(exports, "replaceBaseUrlInEntry", { enumerable: true, get: function () { return replaceBaseUrlInEntry_1.replaceBaseUrlInEntry; } });
 var setExtraHash_1 = require("./setExtraHash");
 Object.defineProperty(exports, "setExtraHash", { enumerable: true, get: function () { return setExtraHash_1.setExtraHash; } });
+var dumpsFilePathBulders_1 = require("./dumpsFilePathBulders");
+Object.defineProperty(exports, "defaultDumpsFilePathBuilder", { enumerable: true, get: function () { return dumpsFilePathBulders_1.defaultDumpsFilePathBuilder; } });
+Object.defineProperty(exports, "dumpsPathBuldeWithSlugBuilder", { enumerable: true, get: function () { return dumpsFilePathBulders_1.dumpsPathBuldeWithSlugBuilder; } });

package/har/initDumps.d.ts

@@ -34,33 +34,20 @@ export type InitDumpsOptions = {
      * @defaultValue `true`
      */
     zip?: boolean;
-    /**
-     * User path to the directory with dumps. By default, the path is calculated as
-     * testInfo.snapshotPath('').replace(/-snapshots\/[^/]+$/, '-data/' + slug)
-     * @param testInfo TestInfo information about the current test
-     * @param slug test slug
-     *
-     * @returns string path to the directory with dumps
-     *
-     * @deprecated use dumpsFilePath.
-     */
-    dumpsPath?: (testInfo: TestInfo, slug: string) => string;
     /**
      * Custom path to the dump file. Overrides the path generated by dumpsPath.
      * @param params Parameters for constructing a path:
      * @param params.testInfo TestInfo information about the current test
-     * @param params.slug test slug
      * @param params.zip Flag to use zip archive for .har
      *
      * @returns string path to dump file
      */
     dumpsFilePath?: (params: {
         testInfo: TestInfo;
-        slug: string;
         zip: boolean;
     }) => string;
 };
 /**
  * Makes the necessary preparations for saving query dumps
  */
-export declare function initDumps(page: Page, testInfo: TestInfo, { dumpsPath: dumpsPathBuilder, dumpsFilePath: dumpsFilePathBuilder, rootPath, forceUpdateIfHarMissing, updateTimeout, notFound, url, zip, update, }?: InitDumpsOptions): Promise<void>;
+export declare function initDumps(page: Page, testInfo: TestInfo, { dumpsFilePath: dumpsFilePathBuilder, rootPath, forceUpdateIfHarMissing, updateTimeout, notFound, url, zip, update, }?: InitDumpsOptions): Promise<void>;

package/har/initDumps.js

@@ -3,29 +3,13 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.initDumps = initDumps;
 const promises_1 = require("node:fs/promises");
 const node_path_1 = require("node:path");
-const actions_1 = require("../actions");
-const extractTestSlug_1 = require("../utils/extractTestSlug");
+const dumpsFilePathBulders_1 = require("./dumpsFilePathBulders");
 /**
  * Makes the necessary preparations for saving query dumps
  */
-async function initDumps(page, testInfo, { dumpsPath: dumpsPathBuilder = defaultPathBuilder, dumpsFilePath: dumpsFilePathBuilder, rootPath, forceUpdateIfHarMissing = false, updateTimeout, notFound = 'abort', url, zip = true, update = false, } = {}) {
-    let slug;
-    try {
-        slug = (0, actions_1.getTestSlug)(page);
-    }
-    catch (error) {
-        console.warn(error);
-        // Backward compatibility
-        slug = (0, extractTestSlug_1.extractTestSlug)(testInfo.title, true);
-    }
+async function initDumps(page, testInfo, { dumpsFilePath: dumpsFilePathBuilder = dumpsFilePathBulders_1.defaultDumpsFilePathBuilder, rootPath, forceUpdateIfHarMissing = false, updateTimeout, notFound = 'abort', url, zip = true, update = false, } = {}) {
     let harPath;
-    if (dumpsFilePathBuilder) {
-        harPath = dumpsFilePathBuilder({ testInfo, slug, zip });
-    }
-    else {
-        const dumpsPath = dumpsPathBuilder(testInfo, slug);
-        harPath = (0, node_path_1.join)(dumpsPath, zip ? 'har.zip' : 'har.har');
-    }
+    harPath = dumpsFilePathBuilder({ testInfo, zip });
     if (rootPath) {
         harPath = (0, node_path_1.relative)(rootPath, harPath);
     }
@@ -49,6 +33,3 @@ async function initDumps(page, testInfo, { dumpsPath: dumpsPathBuilder = default
         url,
     });
 }
-function defaultPathBuilder(testInfo, slug) {
-    return testInfo.snapshotPath('').replace(/-snapshots\/[^/]+$/, '-data/' + slug);
-}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gravity-ui/playwright-tools",
-  "version": "0.8.4",
+  "version": "0.9.1",
   "description": "Tools for Playwright Test",
   "keywords": [
     "playwright",
@@ -18,10 +18,10 @@
   "files": [
     "/actions/**/*.*(js|d.ts)",
     "/auth/**/*.*(js|d.ts)",
+    "/component-tests/**/*.*(js|d.ts)",
     "/data/**/*.*(js|d.ts)",
     "/fixtures/**/*.*(js|d.ts)",
     "/har/**/*.*(js|d.ts)",
-    "/storybook/**/*.*(js|d.ts)",
     "/utils/**/*.*(js|d.ts)",
     "!/**/__tests__"
   ],
@@ -36,6 +36,11 @@
       "import": "./auth/storage/index.js",
       "require": "./auth/storage/index.js"
     },
+    "./component-tests": {
+      "types": "./component-tests/index.d.ts",
+      "import": "./component-tests/index.js",
+      "require": "./component-tests/index.js"
+    },
     "./data": {
       "types": "./data/index.d.ts",
       "import": "./data/index.js",
@@ -51,11 +56,6 @@
       "import": "./har/index.js",
       "require": "./har/index.js"
     },
-    "./storybook": {
-      "types": "./storybook/index.d.ts",
-      "import": "./storybook/index.js",
-      "require": "./storybook/index.js"
-    },
     "./utils": {
       "types": "./utils/index.d.ts",
       "import": "./utils/index.js",
@@ -65,7 +65,7 @@
   "scripts": {
     "prepare": "husky",
     "build": "tsc",
-    "clean": "find actions auth data fixtures har storybook utils -type f ! -name '.eslintrc.js' \\( -name '*.js' -o -name '*.d.ts' \\) -delete",
+    "clean": "find actions auth component-tests data fixtures har utils -type f ! -name '.eslintrc.js' \\( -name '*.js' -o -name '*.d.ts' \\) -delete",
     "typecheck": "tsc --noEmit",
     "lint": "eslint --ext .ts ./",
     "test": "jest --colors --config=jest.config.js",
@@ -100,7 +100,9 @@
   },
   "peerDependencies": {
     "@playwright/experimental-ct-react": "^1.22",
-    "@playwright/test": "^1.22"
+    "@playwright/test": "^1.22",
+    "react": "^17.0.0 || ^18.0.0 || ^19.0.0",
+    "react-dom": "^17.0.0 || ^18.0.0 || ^19.0.0"
   },
   "engines": {
     "node": ">=20"