@gravity-ui/playwright-tools 0.4.1 → 0.7.0

package/README.md

@@ -2,6 +2,7 @@
 
 A library of additional utilities for writing tests using Playwright Test.
 
+
 ## Maintainers
 
 [@Avol-V](https://github.com/Avol-V)

package/actions/index.d.ts

@@ -10,7 +10,6 @@ export { getGlobalSettings } from './getGlobalSettings';
 export { getTestSlug } from './getTestSlug';
 export { hasExtraHttpHeader } from './hasExtraHttpHeader';
 export { matchScreenshot } from './matchScreenshot';
-export { mockDate } from './mockDate';
 export { removeExtraHttpHeader } from './removeExtraHttpHeader';
 export { setCacheSettings } from './setCacheSettings';
 export { setGlobalSettings } from './setGlobalSettings';

package/actions/index.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.waitForNetworkSettled = exports.setTestSlug = exports.setGlobalSettings = exports.setCacheSettings = exports.removeExtraHttpHeader = exports.mockDate = exports.matchScreenshot = exports.hasExtraHttpHeader = exports.getTestSlug = exports.getGlobalSettings = exports.getExtraHttpHeaders = exports.getExtraHttpHeader = exports.disableAnimations = exports.collectPageActivity = exports.clearExtraHttpHeaders = exports.assertElementsHidden = exports.addExtraHttpHeaders = exports.addExtraHttpHeader = void 0;
+exports.waitForNetworkSettled = exports.setTestSlug = exports.setGlobalSettings = exports.setCacheSettings = exports.removeExtraHttpHeader = exports.matchScreenshot = exports.hasExtraHttpHeader = exports.getTestSlug = exports.getGlobalSettings = exports.getExtraHttpHeaders = exports.getExtraHttpHeader = exports.disableAnimations = exports.collectPageActivity = exports.clearExtraHttpHeaders = exports.assertElementsHidden = exports.addExtraHttpHeaders = exports.addExtraHttpHeader = void 0;
 var addExtraHttpHeader_1 = require("./addExtraHttpHeader");
 Object.defineProperty(exports, "addExtraHttpHeader", { enumerable: true, get: function () { return addExtraHttpHeader_1.addExtraHttpHeader; } });
 var addExtraHttpHeaders_1 = require("./addExtraHttpHeaders");
@@ -25,8 +25,6 @@ var hasExtraHttpHeader_1 = require("./hasExtraHttpHeader");
 Object.defineProperty(exports, "hasExtraHttpHeader", { enumerable: true, get: function () { return hasExtraHttpHeader_1.hasExtraHttpHeader; } });
 var matchScreenshot_1 = require("./matchScreenshot");
 Object.defineProperty(exports, "matchScreenshot", { enumerable: true, get: function () { return matchScreenshot_1.matchScreenshot; } });
-var mockDate_1 = require("./mockDate");
-Object.defineProperty(exports, "mockDate", { enumerable: true, get: function () { return mockDate_1.mockDate; } });
 var removeExtraHttpHeader_1 = require("./removeExtraHttpHeader");
 Object.defineProperty(exports, "removeExtraHttpHeader", { enumerable: true, get: function () { return removeExtraHttpHeader_1.removeExtraHttpHeader; } });
 var setCacheSettings_1 = require("./setCacheSettings");

package/actions/matchScreenshot.d.ts

@@ -1,7 +1,6 @@
 import type { Locator, Page, PageScreenshotOptions } from '@playwright/test';
 export type Theme = 'light' | 'dark';
 export type OnSwitchThemeCallback = (theme: Theme, page: Page) => Promise<void>;
-export type OnBeforeScreenshotCallback = (page: Page) => Promise<void>;
 export type ScreenshotOptions = Omit<PageScreenshotOptions, 'type' | 'quality' | 'path'> & {
     /**
      * An acceptable ratio of pixels that are different to the total amount of pixels, between `0` and `1`. Default is
@@ -20,6 +19,7 @@ export type ScreenshotOptions = Omit<PageScreenshotOptions, 'type' | 'quality' |
      */
     threshold?: number;
 };
+export type OnBeforeScreenshotCallback = (page: Page, options: ScreenshotOptions) => Promise<void>;
 export type MatchScreenshotOptions = {
     /**
      * The element or page to be screenshotted

package/actions/matchScreenshot.js

@@ -45,7 +45,7 @@ async function matchScreenshot(page, { locator = page, name = globalSettings_1.g
         }
         await page.mouse.move(x, y);
     }
-    await onBeforeScreenshot?.(page);
+    await onBeforeScreenshot?.(page, combinedOptions);
     const slug = (0, getTestSlug_1.getTestSlug)(page);
     await page.waitForTimeout(pause);
     if (themes && themes.length) {

package/fixtures/index.d.ts

@@ -8,3 +8,5 @@ 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.globalSettingsFixturesBuilder = exports.expectScreenshotFixtureBuilder = exports.expectRequest = exports.mockNetworkFixtureBuilder = exports.testSlug = void 0;
+exports.TEST_WRAPPER_CLASS = exports.mountFixture = 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,3 +11,6 @@ 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/mount/constants.d.ts

@@ -0,0 +1 @@
+export declare const TEST_WRAPPER_CLASS = "playwright-wrapper-test";

package/fixtures/mount/constants.js

@@ -0,0 +1,4 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TEST_WRAPPER_CLASS = void 0;
+exports.TEST_WRAPPER_CLASS = 'playwright-wrapper-test';

package/fixtures/mount/index.d.ts

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

package/fixtures/mount/index.js

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

package/fixtures/mount/mount-fixture.d.ts

@@ -0,0 +1,3 @@
+import type { PlaywrightTestArgs, PlaywrightTestOptions, TestFixture } from '@playwright/test';
+import type { MountFn, MountTestArgs } from './types';
+export declare const mountFixture: TestFixture<MountFn, PlaywrightTestArgs & PlaywrightTestOptions & MountTestArgs>;

package/fixtures/mount/mount-fixture.js

@@ -0,0 +1,19 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.mountFixture = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const constants_1 = require("./constants");
+const mountFixture = async ({ mount: baseMount }, use) => {
+    const mount = async (component, options) => {
+        return await baseMount((0, jsx_runtime_1.jsxs)("div", { style: {
+                padding: 20,
+                // When we set width we didn't expect that paddings for better screenshots would be included
+                boxSizing: options?.width ? 'content-box' : undefined,
+                width: options?.width ? options.width : 'fit-content',
+                height: 'fit-content',
+                ...options?.rootStyle,
+            }, className: constants_1.TEST_WRAPPER_CLASS, children: [(0, jsx_runtime_1.jsx)("style", { children: '.g-button, .g-button::after { transform: scale(1) !important; }' }), component] }), options);
+    };
+    await use(mount);
+};
+exports.mountFixture = mountFixture;

package/fixtures/mount/types.d.ts

@@ -0,0 +1,9 @@
+import type * as React from 'react';
+import type { MountOptions, MountResult } from '@playwright/experimental-ct-react';
+export type MountFn = <HooksConfig>(component: React.JSX.Element, options?: MountOptions<HooksConfig> & {
+    width?: number | string;
+    rootStyle?: React.CSSProperties;
+}) => Promise<MountResult>;
+export type MountTestArgs = {
+    mount: MountFn;
+};

package/fixtures/mount/types.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gravity-ui/playwright-tools",
-  "version": "0.4.1",
+  "version": "0.7.0",
   "description": "Tools for Playwright Test",
   "keywords": [
     "playwright",
@@ -35,6 +35,7 @@
     "./utils/**/*.*(js|d.ts)"
   ],
   "scripts": {
+    "prepare": "husky",
     "build": "tsc",
     "clean": "find actions auth config data fixtures har utils -type f ! -name '.eslintrc.js' \\( -name '*.js' -o -name '*.d.ts' \\) -delete",
     "typecheck": "tsc --noEmit",
@@ -54,21 +55,34 @@
     "@gravity-ui/eslint-config": "^3.3.0",
     "@gravity-ui/prettier-config": "^1.1.0",
     "@jest/globals": "^29.7.0",
-    "@playwright/test": "^1.49.0",
+    "@playwright/experimental-ct-react": "^1.55.0",
+    "@playwright/test": "^1.55.0",
     "@swc/core": "^1.11.5",
     "@swc/jest": "^0.2.37",
     "@types/jest": "^29.5.14",
     "@types/node": "^20.17.9",
+    "@types/react": "^18.3.24",
     "eslint": "^8.57.1",
+    "husky": "^9.1.7",
     "jest": "^29.7.0",
+    "nano-staged": "^0.8.0",
     "prettier": "^3.4.2",
     "ts-jest": "^29.3.1",
     "typescript": "^5.7.2"
   },
   "peerDependencies": {
+    "@playwright/experimental-ct-react": "^1.22",
     "@playwright/test": "^1.22"
   },
   "engines": {
     "node": ">=20"
+  },
+  "nano-staged": {
+    "*.{js,jsx,ts,tsx}": [
+      "eslint --fix --quiet"
+    ],
+    "*.{md,mdx}": [
+      "prettier --write"
+    ]
   }
 }

package/actions/mockDate.d.ts

@@ -1,10 +0,0 @@
-import type { Page } from '@playwright/test';
-/**
- * NOTE:
- * Replaces the Date object with an object in which the date is set to the specified one.
- *
- * The date and time are not fixed, but go at the usual speed, but starting from the specified one.
- *
- * Use playwright API Clock https://playwright.dev/docs/clock
- */
-export declare function mockDate(page: Page, year?: number, month?: number, day?: number, hour?: number, min?: number, sec?: number): Promise<void>;

package/actions/mockDate.js

@@ -1,20 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.mockDate = mockDate;
-const path_1 = require("path");
-const globalSettings_1 = require("../data/globalSettings");
-/**
- * NOTE:
- * Replaces the Date object with an object in which the date is set to the specified one.
- *
- * The date and time are not fixed, but go at the usual speed, but starting from the specified one.
- *
- * Use playwright API Clock https://playwright.dev/docs/clock
- */
-async function mockDate(page, year = globalSettings_1.globalSettings.mockDate.defaultDate.year, month = globalSettings_1.globalSettings.mockDate.defaultDate.month, day = globalSettings_1.globalSettings.mockDate.defaultDate.day, hour = globalSettings_1.globalSettings.mockDate.defaultDate.hour, min = globalSettings_1.globalSettings.mockDate.defaultDate.min, sec = globalSettings_1.globalSettings.mockDate.defaultDate.sec) {
-    await page.addInitScript({ path: (0, path_1.resolve)(require.resolve('timekeeper')) });
-    await page.addInitScript(({ year, month, day, hour, min, sec, }) => {
-        const date = new Date(year, month, day, hour, min, sec);
-        window.timekeeper.travel(date);
-    }, { year, month, day, hour, min, sec });
-}