@uxf/e2e-playwright 11.119.1 → 11.122.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/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@uxf/e2e-playwright",
-    "version": "11.119.1",
+    "version": "11.122.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.122.0",
         "dayjs": "^1.11.19"
     },
     "peerDependencies": {
         "@playwright/test": "1.57.0",
         "@uxf/core": "11.114.0",
-        "@uxf/ui": "11.119.0",
+        "@uxf/ui": "11.122.0",
         "dayjs": "^1.11.19"
     }
 }

package/ui/button.d.ts

@@ -4,6 +4,7 @@ import { BaseModel } from "../utils/base-model";
 export interface ButtonFinder extends BaseFinder {
     text: string;
     nth?: number;
+    isExactText?: boolean;
 }
 export declare class ButtonModel extends BaseModel {
     protected readonly finder: ButtonFinder;

package/ui/button.e2e.js

@@ -18,3 +18,15 @@ 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é");
+});
+(0, test_1.test)("UI Button - partial text match", async ({ page }) => {
+    await page.goto("/examples/ui/button/OnlyForE2ETests");
+    const ui = (0, components_1.createUi)(page);
+    await ui.button({ isExactText: false, text: "Odeslat" }).click();
+    await (0, test_1.expect)(page.getByTestId("last-clicked")).toHaveText("Odeslat formulář");
+});

package/ui/button.js

@@ -2,11 +2,13 @@
 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;
+        var _a, _b, _c;
         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 textFilter = ((_b = finder.isExactText) !== null && _b !== void 0 ? _b : true) ? (0, exact_text_1.exactText)(finder.text) : finder.text;
+        const locator = root.locator("a.uxf-button", { hasText: textFilter }).nth((_c = finder.nth) !== null && _c !== void 0 ? _c : 0);
         super(page, locator);
         this.finder = finder;
     }

package/ui/combobox.d.ts

@@ -5,6 +5,8 @@ export type ComboboxFinder = FormComponentFinder;
 export declare class ComboboxModel extends FormComponentModel<string> {
     private readonly inputLocator;
     constructor(page: Page, finder: FormComponentFinder);
+    private performChange;
     change(value: string): Promise<void>;
+    changeContainingText(value: string): Promise<void>;
 }
 export declare const combobox: (page: Page) => (finder: ComboboxFinder) => ComboboxModel;

package/ui/combobox.e2e.js

@@ -16,3 +16,15 @@ 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");
+});
+(0, test_1.test)("Combobox - partial option match", async ({ page }) => {
+    const ui = (0, components_1.createUi)(page);
+    await page.goto("/examples/ui/combobox/OnlyForE2ETests");
+    await ui.combobox({ $name: "stav-partial" }).changeContainingText("Otevřené");
+    await (0, test_1.expect)(page.getByTestId("selected-stav-partial")).toHaveText("otevrene");
+});

package/ui/combobox.js

@@ -2,19 +2,26 @@
 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) {
         super(combobox_1.COMBOBOX_COMPONENT_NAME, page, finder);
         this.inputLocator = this.locator.locator(".uxf-input__element");
     }
-    async change(value) {
+    async performChange(value, textFilter) {
         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: textFilter }).first();
         await item.waitFor({ state: "visible" });
         await item.click();
         await item.waitFor({ state: "hidden" });
     }
+    async change(value) {
+        await this.performChange(value, (0, exact_text_1.exactText)(value));
+    }
+    async changeContainingText(value) {
+        await this.performChange(value, value);
+    }
 }
 exports.ComboboxModel = ComboboxModel;
 const combobox = (page) => (finder) => new ComboboxModel(page, finder);

package/ui/flash-messages.d.ts

@@ -2,6 +2,8 @@ import { Page } from "@playwright/test";
 import { BaseModel } from "../utils/base-model";
 export declare class FlashMessagesModel extends BaseModel {
     constructor(page: Page);
+    private flashMessageLocator;
     shouldExistMessage(text: string): Promise<void>;
+    shouldExistMessageContainingText(text: string): Promise<void>;
 }
 export declare const flashMessages: (page: Page) => () => FlashMessagesModel;

package/ui/flash-messages.e2e.js

@@ -10,3 +10,16 @@ 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é");
+});
+(0, test_1.test)("FlashMessages - partial 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é (partial)" }).click();
+    await ui.flashMessages().shouldExistMessageContainingText("Vyřešené");
+});

package/ui/flash-messages.js

@@ -4,12 +4,19 @@ 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}]`));
     }
+    flashMessageLocator(textFilter) {
+        return this.locator.locator(".uxf-flash-message").filter({ hasText: textFilter });
+    }
     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.flashMessageLocator((0, exact_text_1.exactText)(text))).toHaveCount(1);
+    }
+    async shouldExistMessageContainingText(text) {
+        await (0, test_1.expect)(this.flashMessageLocator(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.d.ts

@@ -5,6 +5,8 @@ export type MultiSelectFinder = FormComponentFinder;
 export declare class MultiSelectModel extends FormComponentModel<string[]> {
     private readonly buttonLocator;
     constructor(page: Page, finder: FormComponentFinder);
+    private performChange;
     change(optionTexts: string[]): Promise<void>;
+    changeContainingText(optionTexts: string[]): Promise<void>;
 }
 export declare const multiSelect: (page: Page) => (finder: MultiSelectFinder) => MultiSelectModel;

package/ui/multi-select.e2e.js

@@ -7,3 +7,15 @@ 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");
+});
+(0, test_1.test)("MultiSelect - partial option match", async ({ page }) => {
+    const ui = (0, components_1.createUi)(page);
+    await page.goto("/examples/ui/multi-select/OnlyForE2ETests");
+    await ui.multiSelect({ $name: "stav-partial" }).changeContainingText(["Otevřené"]);
+    await (0, test_1.expect)(page.getByTestId("selected-partial-value")).toHaveText("otevrene");
+});

package/ui/multi-select.js

@@ -2,21 +2,31 @@
 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) {
         super(multi_select_1.MULTI_SELECT_COMPONENT_NAME, page, finder);
         this.buttonLocator = this.locator.locator(".uxf-multi-select__button");
     }
-    // TODO implementovat odebrání předchozích hodnot (ideálně nějak kliknout na clear tlačítko)
-    async change(optionTexts) {
+    async performChange(optionTexts, textFilter) {
         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: textFilter(optionText) })
+                .click();
         }
         await this.buttonLocator.click();
     }
+    // TODO implementovat odebrání předchozích hodnot (ideálně nějak kliknout na clear tlačítko)
+    async change(optionTexts) {
+        await this.performChange(optionTexts, exact_text_1.exactText);
+    }
+    async changeContainingText(optionTexts) {
+        await this.performChange(optionTexts, (text) => text);
+    }
 }
 exports.MultiSelectModel = MultiSelectModel;
 const multiSelect = (page) => (finder) => new MultiSelectModel(page, finder);

package/ui/radio-group.d.ts

@@ -4,6 +4,8 @@ import { FormComponentModel } from "../utils/form-component-model";
 export type RadioGroupFinder = FormComponentFinder;
 export declare class RadioGroupModel extends FormComponentModel<string> {
     constructor(page: Page, finder: FormComponentFinder);
+    private performChange;
     change(value: string): Promise<void>;
+    changeContainingText(value: string): Promise<void>;
 }
 export declare const radioGroup: (page: Page) => (finder: RadioGroupFinder) => RadioGroupModel;

package/ui/radio-group.e2e.js

@@ -6,5 +6,17 @@ 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");
+});
+(0, test_1.test)("RadioGroup - partial option match", async ({ page }) => {
+    const ui = (0, components_1.createUi)(page);
+    await page.goto("/examples/ui/radio-group/OnlyForE2ETests");
+    await ui.radioGroup({ $name: "stav-partial" }).changeContainingText("Otevřené");
+    await (0, test_1.expect)(page.getByTestId("selected-partial-value")).toHaveText("otevrene");
 });

package/ui/radio-group.js

@@ -2,15 +2,22 @@
 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 });
+    async performChange(textFilter) {
+        const option = this.locator.locator(".uxf-radio-group__option").filter({ hasText: textFilter });
         await option.click();
     }
+    async change(value) {
+        await this.performChange((0, exact_text_1.exactText)(value));
+    }
+    async changeContainingText(value) {
+        await this.performChange(value);
+    }
 }
 exports.RadioGroupModel = RadioGroupModel;
 const radioGroup = (page) => (finder) => new RadioGroupModel(page, finder);

package/ui/select.d.ts

@@ -5,6 +5,8 @@ export type SelectFinder = FormComponentFinder;
 export declare class SelectModel extends FormComponentModel<string> {
     private readonly buttonLocator;
     constructor(page: Page, finder: FormComponentFinder);
+    private performChange;
     change(optionText: string): Promise<void>;
+    changeContainingText(optionText: string): Promise<void>;
 }
 export declare const select: (page: Page) => (finder: SelectFinder) => SelectModel;

package/ui/select.e2e.js

@@ -8,3 +8,15 @@ 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");
+});
+(0, test_1.test)("Select - partial option match", async ({ page }) => {
+    const ui = (0, components_1.createUi)(page);
+    await page.goto("/examples/ui/select/OnlyForE2ETests");
+    await ui.select({ $name: "stav-partial" }).changeContainingText("Otevřené");
+    await (0, test_1.expect)(page.getByTestId("selected-partial-value")).toHaveText("otevrene");
+});

package/ui/select.js

@@ -2,15 +2,22 @@
 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) {
         super(select_1.SELECT_COMPONENT_NAME, page, finder);
         this.buttonLocator = this.locator.locator("div.uxf-input__element");
     }
-    async change(optionText) {
+    async performChange(textFilter) {
         await this.buttonLocator.click();
-        await this.page.locator(".uxf-dropdown__item").filter({ hasText: optionText }).click();
+        await this.page.locator(".uxf-dropdown__item").filter({ hasText: textFilter }).click();
+    }
+    async change(optionText) {
+        await this.performChange((0, exact_text_1.exactText)(optionText));
+    }
+    async changeContainingText(optionText) {
+        await this.performChange(optionText);
     }
 }
 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");
+}