@uxf/e2e-playwright 11.119.0 → 11.120.0

package/components.d.ts

@@ -1,6 +1,7 @@
 import { Page } from "@playwright/test";
 export declare function createUi(page: Page): {
     button: (finder: import("./ui/button").ButtonFinder) => import("./ui/button").ButtonModel;
+    iconButton: (finder: import("./ui/icon-button").IconButtonFinder) => import("./ui/icon-button").IconButtonModel;
     checkboxInput: (finder: import("./ui/checkbox-input").CheckboxInputFinder) => import("./ui/checkbox-input").CheckboxInputModel;
     combobox: (finder: import("./ui/combobox").ComboboxFinder) => import("./ui/combobox").ComboboxModel;
     dataGridTable: (finder: import("./data-grid/table").DataGridTableFinder) => import("./data-grid/table").DataGridTableModel;

package/components.js

@@ -10,6 +10,7 @@ const datetime_picker_input_1 = require("./ui/datetime-picker-input");
 const dropzone_1 = require("./ui/dropzone");
 const flash_messages_1 = require("./ui/flash-messages");
 const h1_1 = require("./ui/h1");
+const icon_button_1 = require("./ui/icon-button");
 const multi_combobox_1 = require("./ui/multi-combobox");
 const multi_select_1 = require("./ui/multi-select");
 const radio_group_1 = require("./ui/radio-group");
@@ -21,6 +22,7 @@ const toggle_1 = require("./ui/toggle");
 function createUi(page) {
     return {
         button: (0, button_1.button)(page),
+        iconButton: (0, icon_button_1.iconButton)(page),
         checkboxInput: (0, checkbox_input_1.checkboxInput)(page),
         combobox: (0, combobox_1.combobox)(page),
         dataGridTable: (0, table_1.dataGridTable)(page),

package/data-grid/table.d.ts

@@ -9,7 +9,7 @@ export declare class DataGridTableModel extends BaseModel {
     private readonly headerLocator;
     constructor(page: Page, finder: DataGridTableFinder);
     private getColumnIndex;
-    getRowCount(): Promise<number>;
+    shouldHaveRowCount(count: number): Promise<void>;
     /** When using a numeric column index, checkbox and action cells are counted */
     shouldHaveCellValue(data: {
         content: string;

package/data-grid/table.e2e.js

@@ -5,7 +5,7 @@ const components_1 = require("../components");
 (0, test_1.test)("DataGridTable", async ({ page }) => {
     const ui = (0, components_1.createUi)(page);
     await page.goto("/examples/data-grid/table-v2/Default");
-    (0, test_1.expect)(await ui.dataGridTable({ nth: 0 }).getRowCount()).toBe(12);
+    await ui.dataGridTable({ nth: 0 }).shouldHaveRowCount(12);
     await ui.dataGridTable({}).shouldHaveCellValue({ column: "Text", content: "Red" });
     await ui.dataGridTable({}).shouldHaveCellValue({ row: 2, column: 1, content: "Green" });
 });

package/data-grid/table.js

@@ -20,8 +20,8 @@ class DataGridTableModel extends base_model_1.BaseModel {
         }
         return index;
     }
-    async getRowCount() {
-        return this.bodyLocator.locator(".uxf-dg-table__row").count();
+    async shouldHaveRowCount(count) {
+        await (0, test_1.expect)(this.bodyLocator.locator(".uxf-dg-table__row")).toHaveCount(count);
     }
     /** When using a numeric column index, checkbox and action cells are counted */
     async shouldHaveCellValue(data) {

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@uxf/e2e-playwright",
-    "version": "11.119.0",
+    "version": "11.120.0",
     "description": "UXF Playwright helpers",
     "publishConfig": {
         "access": "public"
@@ -18,13 +18,13 @@
     "devDependencies": {
         "@playwright/test": "1.57.0",
         "@uxf/core": "11.114.0",
-        "@uxf/ui": "11.119.0",
+        "@uxf/ui": "11.120.0",
         "dayjs": "^1.11.19"
     },
     "peerDependencies": {
         "@playwright/test": "1.57.0",
         "@uxf/core": "11.114.0",
-        "@uxf/ui": "11.119.0",
+        "@uxf/ui": "11.120.0",
         "dayjs": "^1.11.19"
     }
 }

package/ui/button.e2e.js

@@ -18,3 +18,9 @@ const components_1 = require("../components");
     await ui.button({ parent: cardA, text: "Confirm" }).click();
     await ui.button({ parent: cardB, text: "Confirm" }).click();
 });
+(0, test_1.test)("UI Button - icon with text (exact match)", async ({ page }) => {
+    await page.goto("/examples/ui/button/OnlyForE2ETests");
+    const ui = (0, components_1.createUi)(page);
+    await ui.button({ text: "Vyřešené" }).click();
+    await (0, test_1.expect)(page.getByTestId("last-clicked")).toHaveText("Vyřešené");
+});

package/ui/button.js

@@ -2,11 +2,12 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.button = exports.ButtonModel = void 0;
 const base_model_1 = require("../utils/base-model");
+const exact_text_1 = require("../utils/exact-text");
 class ButtonModel extends base_model_1.BaseModel {
     constructor(page, finder) {
         var _a, _b;
         const root = (_a = finder.parent) !== null && _a !== void 0 ? _a : page;
-        const locator = root.locator("a.uxf-button", { hasText: finder.text }).nth((_b = finder.nth) !== null && _b !== void 0 ? _b : 0);
+        const locator = root.locator("a.uxf-button", { hasText: (0, exact_text_1.exactText)(finder.text) }).nth((_b = finder.nth) !== null && _b !== void 0 ? _b : 0);
         super(page, locator);
         this.finder = finder;
     }

package/ui/combobox.e2e.js

@@ -16,3 +16,9 @@ const components_1 = require("../components");
     await ui.combobox({ $name: "color" }).change("Blue");
     await ui.combobox({ $name: "size" }).change("Medium");
 });
+(0, test_1.test)("Combobox - exact option match", async ({ page }) => {
+    const ui = (0, components_1.createUi)(page);
+    await page.goto("/examples/ui/combobox/OnlyForE2ETests");
+    await ui.combobox({ $name: "stav" }).change("Vyřešené");
+    await (0, test_1.expect)(page.getByTestId("selected-stav")).toHaveText("vyresene");
+});

package/ui/combobox.js

@@ -2,6 +2,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.combobox = exports.ComboboxModel = void 0;
 const combobox_1 = require("@uxf/ui/combobox/combobox");
+const exact_text_1 = require("../utils/exact-text");
 const form_component_model_1 = require("../utils/form-component-model");
 class ComboboxModel extends form_component_model_1.FormComponentModel {
     constructor(page, finder) {
@@ -10,7 +11,10 @@ class ComboboxModel extends form_component_model_1.FormComponentModel {
     }
     async change(value) {
         await this.inputLocator.fill(value);
-        const item = this.page.locator("li.uxf-dropdown__item").filter({ hasText: value }).first();
+        const item = this.page
+            .locator("li.uxf-dropdown__item")
+            .filter({ hasText: (0, exact_text_1.exactText)(value) })
+            .first();
         await item.waitFor({ state: "visible" });
         await item.click();
         await item.waitFor({ state: "hidden" });

package/ui/flash-messages.e2e.js

@@ -10,3 +10,10 @@ const components_1 = require("../components");
     await ui.button({ text: "Error" }).click();
     await ui.flashMessages().shouldExistMessage("Error message");
 });
+(0, test_1.test)("FlashMessages - exact message match", async ({ page }) => {
+    await page.goto("/examples/ui/flash-messages/OnlyForE2ETests");
+    const ui = (0, components_1.createUi)(page);
+    await ui.button({ text: "Zobrazit Vyřešené" }).click();
+    await ui.button({ text: "Zobrazit Nevyřešené" }).click();
+    await ui.flashMessages().shouldExistMessage("Vyřešené");
+});

package/ui/flash-messages.js

@@ -4,12 +4,13 @@ exports.flashMessages = exports.FlashMessagesModel = void 0;
 const test_1 = require("@playwright/test");
 const flash_messages_1 = require("@uxf/ui/flash-messages/flash-messages");
 const base_model_1 = require("../utils/base-model");
+const exact_text_1 = require("../utils/exact-text");
 class FlashMessagesModel extends base_model_1.BaseModel {
     constructor(page) {
         super(page, page.locator(`[data-component=${flash_messages_1.FLASH_MESSAGES_COMPONENT_NAME}]`));
     }
     async shouldExistMessage(text) {
-        await (0, test_1.expect)(this.locator.locator(".uxf-flash-message").filter({ hasText: text })).toHaveCount(1);
+        await (0, test_1.expect)(this.locator.locator(".uxf-flash-message").filter({ hasText: (0, exact_text_1.exactText)(text) })).toHaveCount(1);
     }
 }
 exports.FlashMessagesModel = FlashMessagesModel;

package/ui/h1.e2e.js

@@ -8,3 +8,10 @@ const components_1 = require("../components");
     await ui.h1().shouldHaveText("UXF Frontend monorepo");
     await ui.h1().shouldHaveText("uxf Frontend monorepo");
 });
+(0, test_1.test)("H1 - space and nbsp match interchangeably", async ({ page }) => {
+    await page.goto("/examples/ui/typography/OnlyForE2ETests");
+    const ui = (0, components_1.createUi)(page);
+    await ui.h1().shouldHaveText("Text bez pevné mezery");
+    await ui.h1().shouldHaveText("Text s pevnou mezerou");
+    await ui.h1().shouldHaveText("Text s\u00a0pevnou mezerou");
+});

package/ui/h1.js

@@ -3,12 +3,13 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.h1 = exports.H1Model = void 0;
 const test_1 = require("@playwright/test");
 const base_model_1 = require("../utils/base-model");
+const exact_text_1 = require("../utils/exact-text");
 class H1Model extends base_model_1.BaseModel {
     constructor(page) {
         super(page, page.locator("h1"));
     }
     shouldHaveText(text) {
-        return (0, test_1.expect)(this.locator.filter({ hasText: new RegExp(`^${text}$`, "i") })).toHaveCount(1);
+        return (0, test_1.expect)(this.locator.filter({ hasText: (0, exact_text_1.exactText)(text) })).toHaveCount(1);
     }
 }
 exports.H1Model = H1Model;

package/ui/icon-button.d.ts

@@ -0,0 +1,13 @@
+import { Page } from "@playwright/test";
+import { BaseFinder } from "../utils/base-finder";
+import { BaseModel } from "../utils/base-model";
+export interface IconButtonFinder extends BaseFinder {
+    title: string;
+    nth?: number;
+}
+export declare class IconButtonModel extends BaseModel {
+    protected readonly finder: IconButtonFinder;
+    constructor(page: Page, finder: IconButtonFinder);
+    click(): Promise<void>;
+}
+export declare const iconButton: (page: Page) => (finder: IconButtonFinder) => IconButtonModel;

package/ui/icon-button.e2e.d.ts

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

package/ui/icon-button.e2e.js

@@ -0,0 +1,18 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const test_1 = require("@playwright/test");
+const components_1 = require("../components");
+(0, test_1.test)("UI IconButton - IconButton component", async ({ page }) => {
+    await page.goto("/examples/ui/icon-button/OnlyForE2ETests");
+    const ui = (0, components_1.createUi)(page);
+    await ui.iconButton({ title: "Potvrdit" }).shouldExist();
+    await ui.iconButton({ title: "Potvrdit" }).click();
+    await (0, test_1.expect)(page.getByTestId("last-clicked")).toHaveText("Potvrdit");
+});
+(0, test_1.test)("UI IconButton - deprecated Button with isIconButton", async ({ page }) => {
+    await page.goto("/examples/ui/icon-button/OnlyForE2ETests");
+    const ui = (0, components_1.createUi)(page);
+    await ui.iconButton({ title: "Smazat" }).shouldExist();
+    await ui.iconButton({ title: "Smazat" }).click();
+    await (0, test_1.expect)(page.getByTestId("last-clicked")).toHaveText("Smazat");
+});

package/ui/icon-button.js

@@ -0,0 +1,23 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.iconButton = exports.IconButtonModel = void 0;
+const base_model_1 = require("../utils/base-model");
+class IconButtonModel extends base_model_1.BaseModel {
+    constructor(page, finder) {
+        var _a, _b;
+        const root = (_a = finder.parent) !== null && _a !== void 0 ? _a : page;
+        // uxf-icon-button = IconButton component, uxf-button--icon-button = deprecated Button with isIconButton prop
+        const locator = root
+            .locator(":is(a.uxf-icon-button, a.uxf-button--icon-button)")
+            .and(root.getByTitle(finder.title))
+            .nth((_b = finder.nth) !== null && _b !== void 0 ? _b : 0);
+        super(page, locator);
+        this.finder = finder;
+    }
+    click() {
+        return this.locator.click();
+    }
+}
+exports.IconButtonModel = IconButtonModel;
+const iconButton = (page) => (finder) => new IconButtonModel(page, finder);
+exports.iconButton = iconButton;

package/ui/multi-select.e2e.js

@@ -7,3 +7,9 @@ const components_1 = require("../components");
     await page.goto("/examples/ui/multi-select/Default");
     await ui.multiSelect({ $name: "default" }).change(["Option red", "Option green"]);
 });
+(0, test_1.test)("MultiSelect - exact option match", async ({ page }) => {
+    const ui = (0, components_1.createUi)(page);
+    await page.goto("/examples/ui/multi-select/OnlyForE2ETests");
+    await ui.multiSelect({ $name: "stav" }).change(["Vyřešené"]);
+    await (0, test_1.expect)(page.getByTestId("selected-value")).toHaveText("vyresene");
+});

package/ui/multi-select.js

@@ -2,6 +2,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.multiSelect = exports.MultiSelectModel = void 0;
 const multi_select_1 = require("@uxf/ui/multi-select/multi-select");
+const exact_text_1 = require("../utils/exact-text");
 const form_component_model_1 = require("../utils/form-component-model");
 class MultiSelectModel extends form_component_model_1.FormComponentModel {
     constructor(page, finder) {
@@ -13,7 +14,10 @@ class MultiSelectModel extends form_component_model_1.FormComponentModel {
         await this.buttonLocator.click();
         for (const optionText of optionTexts) {
             // eslint-disable-next-line no-await-in-loop
-            await this.page.locator(".uxf-dropdown__item").filter({ hasText: optionText }).click();
+            await this.page
+                .locator(".uxf-dropdown__item")
+                .filter({ hasText: (0, exact_text_1.exactText)(optionText) })
+                .click();
         }
         await this.buttonLocator.click();
     }

package/ui/radio-group.e2e.js

@@ -6,5 +6,11 @@ const components_1 = require("../components");
     const ui = (0, components_1.createUi)(page);
     await page.goto("/examples/ui/radio-group/Default");
     await ui.radioGroup({ $name: "radio-group" }).change("Radio two");
-    await ui.radioGroup({ $name: "radio-group" }).change("Radio three");
+    await ui.radioGroup({ $name: "radio-group" }).change("Radio three-sixty");
+});
+(0, test_1.test)("RadioGroup - exact option match", async ({ page }) => {
+    const ui = (0, components_1.createUi)(page);
+    await page.goto("/examples/ui/radio-group/OnlyForE2ETests");
+    await ui.radioGroup({ $name: "stav" }).change("Vyřešené");
+    await (0, test_1.expect)(page.getByTestId("selected-value")).toHaveText("vyresene");
 });

package/ui/radio-group.js

@@ -2,13 +2,14 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.radioGroup = exports.RadioGroupModel = void 0;
 const radio_group_1 = require("@uxf/ui/radio-group/radio-group");
+const exact_text_1 = require("../utils/exact-text");
 const form_component_model_1 = require("../utils/form-component-model");
 class RadioGroupModel extends form_component_model_1.FormComponentModel {
     constructor(page, finder) {
         super(radio_group_1.RADIO_GROUP_COMPONENT_NAME, page, finder);
     }
     async change(value) {
-        const option = this.locator.locator(".uxf-radio-group__option").filter({ hasText: value });
+        const option = this.locator.locator(".uxf-radio-group__option").filter({ hasText: (0, exact_text_1.exactText)(value) });
         await option.click();
     }
 }

package/ui/select.e2e.js

@@ -8,3 +8,9 @@ const components_1 = require("../components");
     await ui.select({ $name: "select" }).change("Option six");
     await ui.select({ $name: "select" }).change("Option nine");
 });
+(0, test_1.test)("Select - exact option match", async ({ page }) => {
+    const ui = (0, components_1.createUi)(page);
+    await page.goto("/examples/ui/select/OnlyForE2ETests");
+    await ui.select({ $name: "stav" }).change("Vyřešené");
+    await (0, test_1.expect)(page.getByTestId("selected-value")).toHaveText("vyresene");
+});

package/ui/select.js

@@ -2,6 +2,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.select = exports.SelectModel = void 0;
 const select_1 = require("@uxf/ui/select/select");
+const exact_text_1 = require("../utils/exact-text");
 const form_component_model_1 = require("../utils/form-component-model");
 class SelectModel extends form_component_model_1.FormComponentModel {
     constructor(page, finder) {
@@ -10,7 +11,10 @@ class SelectModel extends form_component_model_1.FormComponentModel {
     }
     async change(optionText) {
         await this.buttonLocator.click();
-        await this.page.locator(".uxf-dropdown__item").filter({ hasText: optionText }).click();
+        await this.page
+            .locator(".uxf-dropdown__item")
+            .filter({ hasText: (0, exact_text_1.exactText)(optionText) })
+            .click();
     }
 }
 exports.SelectModel = SelectModel;

package/utils/exact-text.d.ts

@@ -0,0 +1 @@
+export declare function exactText(text: string): RegExp;

package/utils/exact-text.js

@@ -0,0 +1,8 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.exactText = exactText;
+function exactText(text) {
+    const escaped = text.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
+    const normalized = escaped.replace(/[ \u00a0]/g, "[ \u00a0]");
+    return new RegExp(`^${normalized}$`, "i");
+}