@uxf/e2e-playwright 11.76.0 → 11.77.2

package/components.d.ts

@@ -6,6 +6,7 @@ export declare function createUi(page: Page): {
     datePickerInput: (finder: import("./ui/date-picker-input").DatePickerInputFinder) => import("./ui/date-picker-input").DatePickerInputModel;
     datetimePickerInput: (finder: import("./ui/datetime-picker-input").DatetimePickerInputFinder) => import("./ui/datetime-picker-input").DatetimePickerInputModel;
     dropzone: (finder: import("./ui/dropzone").DropzoneFinder) => import("./ui/dropzone").DropzoneModel;
+    flashMessages: () => import("./ui/flash-messages").FlashMessagesModel;
     multiCombobox: (finder: import("./ui/multi-combobox").MultiComboboxFinder) => import("./ui/multi-combobox").MultiComboboxModel;
     multiSelect: (finder: import("./ui/multi-select").MultiSelectFinder) => import("./ui/multi-select").MultiSelectModel;
     radioGroup: (finder: import("./ui/radio-group").RadioGroupFinder) => import("./ui/radio-group").RadioGroupModel;

package/components.js

@@ -7,6 +7,7 @@ const combobox_1 = require("./ui/combobox");
 const date_picker_input_1 = require("./ui/date-picker-input");
 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 multi_combobox_1 = require("./ui/multi-combobox");
 const multi_select_1 = require("./ui/multi-select");
 const radio_group_1 = require("./ui/radio-group");
@@ -22,6 +23,7 @@ function createUi(page) {
         datePickerInput: (0, date_picker_input_1.datePickerInput)(page),
         datetimePickerInput: (0, datetime_picker_input_1.datetimePickerInput)(page),
         dropzone: (0, dropzone_1.dropzone)(page),
+        flashMessages: (0, flash_messages_1.flashMessages)(page),
         multiCombobox: (0, multi_combobox_1.multiCombobox)(page),
         multiSelect: (0, multi_select_1.multiSelect)(page),
         radioGroup: (0, radio_group_1.radioGroup)(page),

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@uxf/e2e-playwright",
-    "version": "11.76.0",
+    "version": "11.77.2",
     "description": "UXF Playwright helpers",
     "publishConfig": {
         "access": "public"

package/ui/checkbox-input.d.ts

@@ -3,10 +3,8 @@ import { FormComponentFinder } from "../utils/base-finder";
 import { FormComponentModel } from "../utils/form-component-model";
 export type CheckboxInputFinder = FormComponentFinder;
 export declare class CheckboxInputModel extends FormComponentModel<boolean> {
-    private readonly finder;
-    private readonly checkboxLocator;
     private readonly fakeCheckboxLocator;
-    constructor(page: Page, finder: FormComponentFinder);
+    constructor(page: Page, finder: CheckboxInputFinder);
     change(value: boolean): Promise<void>;
 }
 export declare const checkboxInput: (page: Page) => (finder: CheckboxInputFinder) => CheckboxInputModel;

package/ui/checkbox-input.js

@@ -1,13 +1,11 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.checkboxInput = exports.CheckboxInputModel = void 0;
+const checkbox_input_1 = require("@uxf/ui/checkbox-input/checkbox-input");
 const form_component_model_1 = require("../utils/form-component-model");
 class CheckboxInputModel extends form_component_model_1.FormComponentModel {
     constructor(page, finder) {
-        const locator = page.locator(`.uxf-checkbox-input__wrapper[data-name=${finder.$name}]`);
-        super(page, locator);
-        this.finder = finder;
-        this.checkboxLocator = this.locator.locator("input[type=checkbox]");
+        super(checkbox_input_1.CHECKBOX_INPUT_COMPONENT_NAME, page, finder);
         this.fakeCheckboxLocator = this.locator.locator(".uxf-checkbox");
     }
     async change(value) {

package/ui/combobox.d.ts

@@ -3,7 +3,6 @@ import { FormComponentFinder } from "../utils/base-finder";
 import { FormComponentModel } from "../utils/form-component-model";
 export type ComboboxFinder = FormComponentFinder;
 export declare class ComboboxModel extends FormComponentModel<string> {
-    private readonly finder;
     private readonly inputLocator;
     constructor(page: Page, finder: FormComponentFinder);
     change(value: string): Promise<void>;

package/ui/combobox.js

@@ -1,12 +1,11 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.combobox = exports.ComboboxModel = void 0;
+const combobox_1 = require("@uxf/ui/combobox/combobox");
 const form_component_model_1 = require("../utils/form-component-model");
 class ComboboxModel extends form_component_model_1.FormComponentModel {
     constructor(page, finder) {
-        const locator = page.locator(`.uxf-combobox[data-name=${finder.$name}]`);
-        super(page, locator);
-        this.finder = finder;
+        super(combobox_1.COMBOBOX_COMPONENT_NAME, page, finder);
         this.inputLocator = this.locator.locator(".uxf-input__element");
     }
     async change(value) {

package/ui/date-picker-input.d.ts

@@ -3,7 +3,6 @@ import { FormComponentFinder } from "../utils/base-finder";
 import { FormComponentModel } from "../utils/form-component-model";
 export type DatePickerInputFinder = FormComponentFinder;
 export declare class DatePickerInputModel extends FormComponentModel<Date> {
-    private readonly finder;
     private readonly inputLocator;
     constructor(page: Page, finder: FormComponentFinder);
     change(value: Date): Promise<void>;

package/ui/date-picker-input.js

@@ -4,13 +4,12 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.datePickerInput = exports.DatePickerInputModel = void 0;
+const date_picker_input_1 = require("@uxf/ui/date-picker-input/date-picker-input");
 const dayjs_1 = __importDefault(require("dayjs"));
 const form_component_model_1 = require("../utils/form-component-model");
 class DatePickerInputModel extends form_component_model_1.FormComponentModel {
     constructor(page, finder) {
-        const locator = page.locator(`.uxf-date-picker-input[data-name=${finder.$name}]`);
-        super(page, locator);
-        this.finder = finder;
+        super(date_picker_input_1.DATE_PICKER_INPUT_COMPONENT_NAME, page, finder);
         this.inputLocator = this.locator.locator(".uxf-input__element");
     }
     async change(value) {

package/ui/datetime-picker-input.d.ts

@@ -3,7 +3,6 @@ import { FormComponentFinder } from "../utils/base-finder";
 import { FormComponentModel } from "../utils/form-component-model";
 export type DatetimePickerInputFinder = FormComponentFinder;
 export declare class DatetimePickerInputModel extends FormComponentModel<Date> {
-    private readonly finder;
     private readonly inputLocator;
     constructor(page: Page, finder: FormComponentFinder);
     change(value: Date): Promise<void>;

package/ui/datetime-picker-input.js

@@ -4,13 +4,12 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.datetimePickerInput = exports.DatetimePickerInputModel = void 0;
+const datetime_picker_input_1 = require("@uxf/ui/datetime-picker-input/datetime-picker-input");
 const dayjs_1 = __importDefault(require("dayjs"));
 const form_component_model_1 = require("../utils/form-component-model");
 class DatetimePickerInputModel extends form_component_model_1.FormComponentModel {
     constructor(page, finder) {
-        const locator = page.locator(`.uxf-date-time-picker-input[data-name=${finder.$name}]`);
-        super(page, locator);
-        this.finder = finder;
+        super(datetime_picker_input_1.DATETIME_PICKER_INPUT_COMPONENT_NAME, page, finder);
         this.inputLocator = this.locator.locator(".uxf-input__element");
     }
     async change(value) {

package/ui/dropzone.d.ts

@@ -3,7 +3,6 @@ import { FormComponentFinder } from "../utils/base-finder";
 import { FormComponentModel } from "../utils/form-component-model";
 export type DropzoneFinder = FormComponentFinder;
 export declare class DropzoneModel extends FormComponentModel<string[]> {
-    private readonly finder;
     private readonly inputLocator;
     constructor(page: Page, finder: FormComponentFinder);
     change(filesToUpload: string[]): Promise<void>;

package/ui/dropzone.js

@@ -2,13 +2,12 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.dropzone = exports.DropzoneModel = void 0;
 const test_1 = require("@playwright/test");
+const dropzone_input_1 = require("@uxf/ui/dropzone/dropzone-input");
 const form_component_model_1 = require("../utils/form-component-model");
 class DropzoneModel extends form_component_model_1.FormComponentModel {
     constructor(page, finder) {
-        const locator = page.locator(`.uxf-dropzone[data-name=${finder.$name}]`);
-        super(page, locator);
-        this.finder = finder;
-        this.inputLocator = locator.locator("input");
+        super(dropzone_input_1.DROPZONE_COMPONENT_NAME, page, finder);
+        this.inputLocator = this.locator.locator("input");
     }
     async change(filesToUpload) {
         await this.inputLocator.setInputFiles(filesToUpload);

package/ui/flash-messages.d.ts

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

package/ui/flash-messages.e2e.d.ts

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

package/ui/flash-messages.e2e.js

@@ -0,0 +1,12 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const test_1 = require("@playwright/test");
+const components_1 = require("../components");
+(0, test_1.test)("FlashMessages", async ({ page }) => {
+    await page.goto("/examples/ui/flash-messages/Default");
+    const ui = (0, components_1.createUi)(page);
+    await ui.button({ text: "Success" }).click();
+    await ui.flashMessages().shouldExistMessage("Success message");
+    await ui.button({ text: "Error" }).click();
+    await ui.flashMessages().shouldExistMessage("Error message");
+});

package/ui/flash-messages.js

@@ -0,0 +1,17 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+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");
+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);
+    }
+}
+exports.FlashMessagesModel = FlashMessagesModel;
+const flashMessages = (page) => () => new FlashMessagesModel(page);
+exports.flashMessages = flashMessages;

package/ui/multi-combobox.d.ts

@@ -3,7 +3,6 @@ import { FormComponentFinder } from "../utils/base-finder";
 import { FormComponentModel } from "../utils/form-component-model";
 export type MultiComboboxFinder = FormComponentFinder;
 export declare class MultiComboboxModel extends FormComponentModel<string[]> {
-    private readonly finder;
     private readonly buttonLocator;
     private readonly inputLocator;
     constructor(page: Page, finder: FormComponentFinder);

package/ui/multi-combobox.js

@@ -1,12 +1,11 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.multiCombobox = exports.MultiComboboxModel = void 0;
+const multi_combobox_1 = require("@uxf/ui/multi-combobox/multi-combobox");
 const form_component_model_1 = require("../utils/form-component-model");
 class MultiComboboxModel extends form_component_model_1.FormComponentModel {
     constructor(page, finder) {
-        const locator = page.locator(`.uxf-multi-combobox[data-name=${finder.$name}]`);
-        super(page, locator);
-        this.finder = finder;
+        super(multi_combobox_1.MULTI_COMBOBOX_COMPONENT_NAME, page, finder);
         this.buttonLocator = this.locator.locator(".uxf-multi-combobox__button");
         this.inputLocator = this.locator.locator("input");
     }

package/ui/multi-select.d.ts

@@ -3,7 +3,6 @@ import { FormComponentFinder } from "../utils/base-finder";
 import { FormComponentModel } from "../utils/form-component-model";
 export type MultiSelectFinder = FormComponentFinder;
 export declare class MultiSelectModel extends FormComponentModel<string[]> {
-    private readonly finder;
     private readonly buttonLocator;
     constructor(page: Page, finder: FormComponentFinder);
     change(optionTexts: string[]): Promise<void>;

package/ui/multi-select.js

@@ -1,12 +1,11 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.multiSelect = exports.MultiSelectModel = void 0;
+const multi_select_1 = require("@uxf/ui/multi-select/multi-select");
 const form_component_model_1 = require("../utils/form-component-model");
 class MultiSelectModel extends form_component_model_1.FormComponentModel {
     constructor(page, finder) {
-        const locator = page.locator(`.uxf-multi-select[data-name=${finder.$name}]`);
-        super(page, locator);
-        this.finder = 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)

package/ui/radio-group.d.ts

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

package/ui/radio-group.js

@@ -1,12 +1,11 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.radioGroup = exports.RadioGroupModel = void 0;
+const radio_group_1 = require("@uxf/ui/radio-group/radio-group");
 const form_component_model_1 = require("../utils/form-component-model");
 class RadioGroupModel extends form_component_model_1.FormComponentModel {
     constructor(page, finder) {
-        const locator = page.locator(`.uxf-radio-group[data-name=${finder.$name}]`);
-        super(page, locator);
-        this.finder = 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 });

package/ui/select.d.ts

@@ -3,7 +3,6 @@ import { FormComponentFinder } from "../utils/base-finder";
 import { FormComponentModel } from "../utils/form-component-model";
 export type SelectFinder = FormComponentFinder;
 export declare class SelectModel extends FormComponentModel<string> {
-    private readonly finder;
     private readonly buttonLocator;
     constructor(page: Page, finder: FormComponentFinder);
     change(optionText: string): Promise<void>;

package/ui/select.js

@@ -1,12 +1,11 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.select = exports.SelectModel = void 0;
+const select_1 = require("@uxf/ui/select/select");
 const form_component_model_1 = require("../utils/form-component-model");
 class SelectModel extends form_component_model_1.FormComponentModel {
     constructor(page, finder) {
-        const locator = page.locator(`.uxf-select[data-name=${finder.$name}]`);
-        super(page, locator);
-        this.finder = finder;
+        super(select_1.SELECT_COMPONENT_NAME, page, finder);
         this.buttonLocator = this.locator.locator("div.uxf-input__element");
     }
     async change(optionText) {

package/ui/text-input.d.ts

@@ -3,7 +3,6 @@ import { FormComponentFinder } from "../utils/base-finder";
 import { FormComponentModel } from "../utils/form-component-model";
 export type TextInputFinder = FormComponentFinder;
 export declare class TextInputModel extends FormComponentModel<string> {
-    private readonly finder;
     constructor(page: Page, finder: FormComponentFinder);
     change(value: string): Promise<void>;
 }

package/ui/text-input.e2e.js

@@ -6,4 +6,5 @@ const components_1 = require("../components");
     const ui = (0, components_1.createUi)(page);
     await page.goto("/examples/ui/text-input/Default");
     await ui.textInput({ $name: "default" }).change("Value");
+    await ui.textInput({ $name: "error" }).shouldBeInvalid();
 });

package/ui/text-input.js

@@ -1,12 +1,11 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.textInput = exports.TextInputModel = void 0;
+const text_input_1 = require("@uxf/ui/text-input/text-input");
 const form_component_model_1 = require("../utils/form-component-model");
 class TextInputModel extends form_component_model_1.FormComponentModel {
     constructor(page, finder) {
-        const locator = page.locator(`.uxf-text-input[data-name=${finder.$name}]`);
-        super(page, locator);
-        this.finder = finder;
+        super(text_input_1.TEXT_INPUT_COMPONENT_NAME, page, finder);
     }
     async change(value) {
         await this.locator.locator("input").fill(value);

package/ui/textarea.d.ts

@@ -3,7 +3,6 @@ import { FormComponentFinder } from "../utils/base-finder";
 import { FormComponentModel } from "../utils/form-component-model";
 export type TextareaFinder = FormComponentFinder;
 export declare class TextareaModel extends FormComponentModel<string> {
-    private readonly finder;
     constructor(page: Page, finder: FormComponentFinder);
     change(value: string): Promise<void>;
 }

package/ui/textarea.js

@@ -1,12 +1,11 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.textarea = exports.TextareaModel = void 0;
+const textarea_1 = require("@uxf/ui/textarea/textarea");
 const form_component_model_1 = require("../utils/form-component-model");
 class TextareaModel extends form_component_model_1.FormComponentModel {
     constructor(page, finder) {
-        const locator = page.locator(`.uxf-textarea[data-name=${finder.$name}]`);
-        super(page, locator);
-        this.finder = finder;
+        super(textarea_1.TEXTAREA_COMPONENT_NAME, page, finder);
     }
     async change(value) {
         const textarea = this.locator.locator("textarea");

package/ui/toggle.d.ts

@@ -3,7 +3,6 @@ import { FormComponentFinder } from "../utils/base-finder";
 import { FormComponentModel } from "../utils/form-component-model";
 export type ToggleFinder = FormComponentFinder;
 export declare class ToggleModel extends FormComponentModel<boolean> {
-    private readonly finder;
     constructor(page: Page, finder: FormComponentFinder);
     change(value: boolean): Promise<void>;
 }

package/ui/toggle.js

@@ -1,12 +1,11 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.toggle = exports.ToggleModel = void 0;
+const toggle_1 = require("@uxf/ui/toggle/toggle");
 const form_component_model_1 = require("../utils/form-component-model");
 class ToggleModel extends form_component_model_1.FormComponentModel {
     constructor(page, finder) {
-        const locator = page.locator(`.uxf-toggle__wrapper[data-name=${finder.$name}]`);
-        super(page, locator);
-        this.finder = finder;
+        super(toggle_1.TOGGLE_COMPONENT_NAME, page, finder);
     }
     async change(value) {
         const isSelected = await this.locator.locator("button").evaluate((el) => el.classList.contains("is-selected"));

package/utils/base-model.d.ts

@@ -1,7 +1,7 @@
 import { Locator, Page } from "@playwright/test";
 export declare abstract class BaseModel {
     protected readonly page: Page;
-    protected readonly locator: Locator;
+    readonly locator: Locator;
     protected constructor(page: Page, locator: Locator);
     shouldExist(): Promise<void>;
     shouldNotExist(): Promise<void>;

package/utils/form-component-model.d.ts

@@ -1,6 +1,8 @@
-import { Locator, Page } from "@playwright/test";
+import { Page } from "@playwright/test";
+import { FormComponentFinder } from "./base-finder";
 import { BaseModel } from "./base-model";
 export declare abstract class FormComponentModel<Value> extends BaseModel {
-    protected constructor(page: Page, locator: Locator);
+    protected constructor(componentName: string, page: Page, finder: FormComponentFinder);
+    shouldBeInvalid(): Promise<void>;
     abstract change(value: Value): Promise<any>;
 }

package/utils/form-component-model.js

@@ -1,10 +1,16 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.FormComponentModel = void 0;
+const test_1 = require("@playwright/test");
+const classes_1 = require("@uxf/core/constants/classes");
 const base_model_1 = require("./base-model");
 class FormComponentModel extends base_model_1.BaseModel {
-    constructor(page, locator) {
+    constructor(componentName, page, finder) {
+        const locator = page.locator(`[data-component=${componentName}][data-name=${finder.$name}]`);
         super(page, locator);
     }
+    shouldBeInvalid() {
+        return (0, test_1.expect)(this.locator).toContainClass(classes_1.CLASSES.IS_INVALID);
+    }
 }
 exports.FormComponentModel = FormComponentModel;