@uxf/e2e 11.10.0

package/README.md

@@ -0,0 +1,23 @@
+# @uxf/e2e
+
+```bash
+yarn add @uxf/e2e
+```
+
+## TestCafe test example
+
+```ts
+import { fixture, test } from "testcafe";
+import { components, waitForReact } from "@uxf/e2e";
+
+fixture("E2E test")
+    .page("https://fe.uxf.dev/examples/ui/button/Default")
+    .beforeEach(async (t) => {
+        await waitForReact(10000, t);
+    });
+
+test("First E2E test", async () => {
+    await components.button({ text: "Default" }).click();
+    await components.button({ text: "Default" }).shouldBeDisabled();
+});
+```

package/components.d.ts

@@ -0,0 +1,8 @@
+import { button } from "./ui/button";
+import { buttonGroup } from "./ui/button-group";
+import { buttonList } from "./ui/button-list";
+export declare const components: {
+    button: typeof button;
+    buttonGroup: typeof buttonGroup;
+    buttonList: typeof buttonList;
+};

package/components.js

@@ -0,0 +1,11 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.components = void 0;
+const button_1 = require("./ui/button");
+const button_group_1 = require("./ui/button-group");
+const button_list_1 = require("./ui/button-list");
+exports.components = {
+    button: button_1.button,
+    buttonGroup: button_group_1.buttonGroup,
+    buttonList: button_list_1.buttonList,
+};

package/index.d.ts

@@ -0,0 +1,2 @@
+export * from "./components";
+export * from "./utils/wait-for-react";

package/index.js

@@ -0,0 +1,18 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+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 });
+__exportStar(require("./components"), exports);
+__exportStar(require("./utils/wait-for-react"), exports);

package/package.json

@@ -0,0 +1,23 @@
+{
+  "name": "@uxf/e2e",
+  "version": "11.10.0",
+  "description": "UXF TestCafe helpers",
+  "publishConfig": {
+    "access": "public"
+  },
+  "scripts": {
+    "build": "npm run compile",
+    "compile": "tsc -P tsconfig.json",
+    "test": "../../node_modules/.bin/testcafe chrome ./tests/button.e2e.ts",
+    "dev": "../../node_modules/.bin/testcafe chrome ./tests/button.e2e.ts --live",
+    "typecheck": "../../node_modules/.bin/tsc --noEmit --skipLibCheck"
+  },
+  "author": "UX Fans s.r.o",
+  "license": "MIT",
+  "devDependencies": {
+    "testcafe": "^3.5.0"
+  },
+  "peerDependencies": {
+    "testcafe": "^3.5.0"
+  }
+}

package/tests/button.e2e.d.ts

@@ -0,0 +1 @@
+export {};

package/tests/button.e2e.js

@@ -0,0 +1,15 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const testcafe_1 = require("testcafe");
+const components_1 = require("../components");
+const wait_for_react_1 = require("../utils/wait-for-react");
+(0, testcafe_1.fixture)("Home page")
+    .page("https://fe.uxf.dev/examples/ui/button/Default")
+    .httpAuth({ username: "uxf", password: "uxf" })
+    .beforeEach(async (t) => {
+    await (0, wait_for_react_1.waitForReact)(10000, t);
+});
+(0, testcafe_1.test)("UI Button", async () => {
+    await components_1.components.button({ text: "Default" }).shouldExists();
+    await components_1.components.button({ text: "Not found" }).shouldNotExists();
+});

package/ui/button-group.d.ts

@@ -0,0 +1,10 @@
+import { BaseSelector } from "../utils/base-selector";
+interface ButtonGroupSelector extends BaseSelector {
+    dataTestId: string;
+}
+export declare function buttonGroup(buttonGroupSelector: ButtonGroupSelector): {
+    clickOnButtonByText(buttonText: string): TestControllerPromise<any>;
+    shouldExists(): TestControllerPromise<any>;
+    shouldExistsButtonByText(text: string): TestControllerPromise<any>;
+};
+export {};

package/ui/button-group.js

@@ -0,0 +1,23 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.buttonGroup = void 0;
+const testcafe_1 = require("testcafe");
+const create_selector_1 = require("../utils/create-selector");
+const button_1 = require("./button");
+function buttonGroup(buttonGroupSelector) {
+    const selector = (0, create_selector_1.createSelector)(buttonGroupSelector)
+        .find(".uxf-button-group")
+        .find(`[data-test-id="${buttonGroupSelector.dataTestId}"]`);
+    return {
+        clickOnButtonByText(buttonText) {
+            return (0, button_1.button)({ parent: selector, text: buttonText }).click();
+        },
+        shouldExists() {
+            return testcafe_1.t.expect(selector.exists).ok();
+        },
+        shouldExistsButtonByText(text) {
+            return (0, button_1.button)({ parent: selector, text }).shouldExists();
+        },
+    };
+}
+exports.buttonGroup = buttonGroup;

package/ui/button-list.d.ts

@@ -0,0 +1,8 @@
+import { BaseSelector } from "../utils/base-selector";
+interface ButtonListSelector extends BaseSelector {
+    nth?: number;
+}
+export declare function buttonList(buttonListSelector: ButtonListSelector): {
+    clickOnButton(text: string): TestControllerPromise<any>;
+};
+export {};

package/ui/button-list.js

@@ -0,0 +1,17 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.buttonList = void 0;
+const create_selector_1 = require("../utils/create-selector");
+const button_1 = require("./button");
+function buttonList(buttonListSelector) {
+    var _a;
+    const selector = (0, create_selector_1.createSelector)(buttonListSelector)
+        .find(".uxf-button-list")
+        .nth((_a = buttonListSelector.nth) !== null && _a !== void 0 ? _a : 0);
+    return {
+        clickOnButton(text) {
+            return (0, button_1.button)({ parent: selector, text }).click();
+        },
+    };
+}
+exports.buttonList = buttonList;

package/ui/button.d.ts

@@ -0,0 +1,12 @@
+import { BaseSelector } from "../utils/base-selector";
+interface ButtonSelector extends BaseSelector {
+    text: string;
+    nth?: number;
+}
+export declare function button(buttonSelector: ButtonSelector): {
+    click(): TestControllerPromise<any>;
+    shouldExists(): TestControllerPromise<any>;
+    shouldNotExists(): TestControllerPromise<any>;
+    shouldBeDisabled(): void;
+};
+export {};

package/ui/button.js

@@ -0,0 +1,27 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.button = void 0;
+const testcafe_1 = require("testcafe");
+const create_selector_1 = require("../utils/create-selector");
+function button(buttonSelector) {
+    var _a;
+    const selector = (0, create_selector_1.createSelector)(buttonSelector)
+        .find(".uxf-button")
+        .withExactText(buttonSelector.text)
+        .nth((_a = buttonSelector.nth) !== null && _a !== void 0 ? _a : 0);
+    return {
+        click() {
+            return testcafe_1.t.click(selector);
+        },
+        shouldExists() {
+            return testcafe_1.t.expect(selector.exists).ok();
+        },
+        shouldNotExists() {
+            return testcafe_1.t.expect(selector.exists).notOk();
+        },
+        shouldBeDisabled() {
+            // TODO
+        },
+    };
+}
+exports.button = button;

package/utils/base-selector.d.ts

@@ -0,0 +1,3 @@
+export type BaseSelector = {
+    parent?: Selector;
+};

package/utils/base-selector.js

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

package/utils/create-selector.d.ts

@@ -0,0 +1,2 @@
+import { BaseSelector } from "./base-selector";
+export declare function createSelector(selector: BaseSelector): Selector;

package/utils/create-selector.js

@@ -0,0 +1,9 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.createSelector = void 0;
+const root_selector_1 = require("./root-selector");
+function createSelector(selector) {
+    var _a;
+    return (_a = selector.parent) !== null && _a !== void 0 ? _a : root_selector_1.RootSelector;
+}
+exports.createSelector = createSelector;

package/utils/root-selector.d.ts

@@ -0,0 +1 @@
+export declare const RootSelector: Selector;

package/utils/root-selector.js

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.RootSelector = void 0;
+const testcafe_1 = require("testcafe");
+exports.RootSelector = (0, testcafe_1.Selector)("body");

package/utils/wait-for-react.d.ts

@@ -0,0 +1 @@
+export declare function waitForReact(timeout: any, testController: any): Promise<Promise<unknown>>;

package/utils/wait-for-react.js

@@ -0,0 +1,53 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.waitForReact = void 0;
+const testcafe_1 = require("testcafe");
+// TODO - klasická funkce waitForReact nefunguje s AppDirectory v nextu :-)
+function waitForReact(timeout, testController) {
+    const DEFAULT_TIMEOUT = 1e4;
+    const checkTimeout = typeof timeout === "number" ? timeout : DEFAULT_TIMEOUT;
+    return (0, testcafe_1.ClientFunction)(() => {
+        const CHECK_INTERVAL = 200;
+        let stopChecking = false;
+        function findReact16to18Root() {
+            // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+            // @ts-ignore
+            const treeWalker = document.createTreeWalker(document, NodeFilter.SHOW_ELEMENT, null, false);
+            while (treeWalker.nextNode()) {
+                //NOTE: react 18
+                for (const prop of Object.keys(treeWalker.currentNode)) {
+                    if (/^__reactContainer|^__reactProps/.test(prop)) {
+                        return true;
+                    }
+                }
+            }
+            return false;
+        }
+        function findReactApp() {
+            return findReact16to18Root();
+        }
+        return new Promise((resolve, reject) => {
+            function tryFindReactApp() {
+                const startTime = new Date();
+                const reactTreeIsFound = findReactApp();
+                // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+                // @ts-ignore
+                const checkTime = new Date() - startTime;
+                if (reactTreeIsFound) {
+                    resolve();
+                    return;
+                }
+                if (stopChecking) {
+                    return;
+                }
+                setTimeout(tryFindReactApp, checkTime > CHECK_INTERVAL ? checkTime : CHECK_INTERVAL);
+            }
+            tryFindReactApp();
+            setTimeout(() => {
+                stopChecking = true;
+                reject("waitForReact: The waiting timeout is exceeded");
+            }, checkTimeout);
+        });
+    }, { dependencies: { checkTimeout }, boundTestRun: testController })();
+}
+exports.waitForReact = waitForReact;