@uxf/e2e 11.49.1 → 11.50.0

package/components.d.ts

@@ -20,6 +20,7 @@ import { textInput } from "./ui/text-input";
 import { textLink } from "./ui/text-link";
 import { textarea } from "./ui/textarea";
 import { toggle } from "./ui/toggle";
+import { multiSelect } from "./ui/multi-select";
 export declare const components: {
     button: typeof button;
     buttonGroup: typeof buttonGroup;
@@ -36,6 +37,7 @@ export declare const components: {
     message: typeof message;
     modal: typeof modal;
     multiCombobox: typeof multiCombobox;
+    multiSelect: typeof multiSelect;
     radioGroup: typeof radioGroup;
     select: typeof select;
     textarea: typeof textarea;

package/components.js

@@ -23,6 +23,7 @@ const text_input_1 = require("./ui/text-input");
 const text_link_1 = require("./ui/text-link");
 const textarea_1 = require("./ui/textarea");
 const toggle_1 = require("./ui/toggle");
+const multi_select_1 = require("./ui/multi-select");
 exports.components = {
     button: button_1.button,
     buttonGroup: button_group_1.buttonGroup,
@@ -39,6 +40,7 @@ exports.components = {
     message: message_1.message,
     modal: modal_1.modal,
     multiCombobox: multi_combobox_1.multiCombobox,
+    multiSelect: multi_select_1.multiSelect,
     radioGroup: radio_group_1.radioGroup,
     select: select_1.select,
     textarea: textarea_1.textarea,

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@uxf/e2e",
-    "version": "11.49.1",
+    "version": "11.50.0",
     "description": "UXF TestCafe helpers",
     "publishConfig": {
         "access": "public"

package/tests/datagrid-v2.e2e.d.ts

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

package/tests/datagrid-v2.e2e.js

@@ -0,0 +1,73 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const testcafe_1 = require("testcafe");
+const components_1 = require("../components");
+const config_1 = require("../config");
+const wait_for_react_1 = require("../utils/wait-for-react");
+(0, testcafe_1.fixture)("Datagrid V2")
+    .page(config_1.BASE_URL + "/examples/data-grid/data-grid-v2/Default")
+    .httpAuth({ username: "uxf", password: "uxf" })
+    .beforeEach(async (t) => {
+    await (0, wait_for_react_1.waitForReact)(10000, t);
+});
+(0, testcafe_1.test)("Filters", async (t) => {
+    //otevření filtrů
+    await components_1.components.iconButton({ iconName: "icon-sprite--filter" }).click();
+    //number inputy Number interval (od) a Number interval (do)
+    await components_1.components.input({ name: "interval.from" }).type("3");
+    await components_1.components.input({ name: "interval.from" }).shouldHaveValue("3");
+    await components_1.components.input({ name: "interval.to" }).type("5");
+    await components_1.components.input({ name: "interval.to" }).shouldHaveValue("5");
+    //email
+    await components_1.components.input({ name: "mail" }).type("test@uxf.cz");
+    await components_1.components.input({ name: "mail" }).shouldHaveValue("test@uxf.cz");
+    //datepicker Date (od) a Date (do)
+    await components_1.components.datePickerInput({ dataName: "date.from" }).selectDate(10, 10, 2030);
+    await components_1.components.datePickerInput({ dataName: "date.from" }).shouldHaveValue("10. 10. 2030");
+    await components_1.components.datePickerInput({ dataName: "date.to" }).selectDate(10, 10, 2032);
+    await components_1.components.datePickerInput({ dataName: "date.to" }).shouldHaveValue("10. 10. 2032");
+    //datetimepicker Datetime (od) a Datetime (do)
+    await components_1.components.datetimePickerInput({ dataName: "datetime.from" }).selectDatetime(10, 10, 2030, 10, 30);
+    await components_1.components.datetimePickerInput({ dataName: "datetime.from" }).shouldHaveValue("10. 10. 2030 10:30");
+    await components_1.components.datetimePickerInput({ dataName: "datetime.to" }).selectDatetime(10, 10, 2032, 12, 0);
+    await components_1.components.datetimePickerInput({ dataName: "datetime.to" }).shouldHaveValue("10. 10. 2032 12:00");
+    //select
+    await components_1.components.select({ dataName: "select" }).selectItemWithText("A");
+    await components_1.components.select({ dataName: "select" }).shouldHaveValue("A");
+    //multi select
+    await components_1.components.multiSelect({ dataName: "multiSelect" }).selectItemsByText(["Option 1", "Option 2"]);
+    //zavření filtru
+    await components_1.components.iconButton({ iconName: "icon-sprite--xmark" }).click();
+    //kontrola zobrazení chipů
+    await t.expect((0, testcafe_1.Selector)(".uxf-chip").withText("Number interval: od 3 do 5").exists).ok();
+    await t.expect((0, testcafe_1.Selector)(".uxf-chip").withText("E-mail: test@uxf.cz").exists).ok();
+    await t.expect((0, testcafe_1.Selector)(".uxf-chip").withText("Date: od 10/10/2030 do 10/10/2032").exists).ok();
+    await t
+        .expect((0, testcafe_1.Selector)(".uxf-chip").withText("Datetime: od 10/10/2030 10:30 AM do 10/10/2032 12:00 PM").exists)
+        .ok();
+    await t.expect((0, testcafe_1.Selector)(".uxf-chip").withText("Select:\xa0A").exists).ok();
+    await t.expect((0, testcafe_1.Selector)(".uxf-chip").withText("Multi select:\xa0Option 1, Option 2").exists).ok();
+    //otevření filtrů
+    await components_1.components.iconButton({ iconName: "icon-sprite--filter" }).click();
+    //smazání hodnot u number inputů
+    await components_1.components.input({ name: "interval.from" }).replace(" ");
+    await components_1.components.input({ name: "interval.to" }).replace(" ");
+    //samazání hotnoty text inputu email
+    const emailInput = (0, testcafe_1.Selector)(`input[name="mail"]`);
+    await t.selectText(emailInput);
+    await t.pressKey("delete");
+    //smazání datepicker Date (od) a Date (do)
+    await components_1.components.datePickerInput({ dataName: "date.from" }).clear();
+    await components_1.components.datePickerInput({ dataName: "date.to" }).clear();
+    //smazání datetimepicker Datetime (od) a Datetime (do)
+    await components_1.components.datetimePickerInput({ dataName: "datetime.from" }).clear();
+    await components_1.components.datetimePickerInput({ dataName: "datetime.to" }).clear();
+    //smazání hodnoty ze selectu
+    await components_1.components.select({ dataName: "select" }).clear();
+    //smazání honot z multi selectu
+    await components_1.components.multiSelect({ dataName: "multiSelect" }).removeItemsByText(["Option 1", "Option 2"]);
+    //zavření filtrů
+    await components_1.components.iconButton({ iconName: "icon-sprite--xmark" }).click();
+    //kontrola, že se nezobrazují chipy nad datagridem
+    await t.expect((0, testcafe_1.Selector)(".uxf-data-grid__filter-list .uxf-chip").exists).notOk();
+});

package/tests/date-picker-input.e2e.js

@@ -16,7 +16,7 @@ const wait_for_react_1 = require("../utils/wait-for-react");
     await defaultDatePickerInput.shouldNotBeDisabled();
     await defaultDatePickerInput.selectDate(1, 1, 2024);
     await defaultDatePickerInput.shouldHaveValue("1. 1. 2024");
-    await defaultDatePickerInput.replace("05.12.2025");
+    await defaultDatePickerInput.replace(5, 12, 2025);
     await defaultDatePickerInput.shouldHaveValue("5. 12. 2025");
     //do disabled se nedá psát
     await components_1.components.datePickerInput({ dataName: "date-disabled" }).shouldBeDisabled();

package/tests/multi-select.e2e.d.ts

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

package/tests/multi-select.e2e.js

@@ -0,0 +1,32 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const testcafe_1 = require("testcafe");
+const components_1 = require("../components");
+const config_1 = require("../config");
+const wait_for_react_1 = require("../utils/wait-for-react");
+(0, testcafe_1.fixture)("Multi combobox")
+    .page(config_1.BASE_URL + "/examples/ui/multi-select/Default")
+    .httpAuth({ username: "uxf", password: "uxf" })
+    .beforeEach(async (t) => {
+    await (0, wait_for_react_1.waitForReact)(10000, t);
+});
+(0, testcafe_1.test)("Multi select", async () => {
+    const defaultMultiSelect = components_1.components.multiSelect({ dataName: "multi-select" });
+    await defaultMultiSelect.shouldExist();
+    await defaultMultiSelect.selectItemsByText(["Option red", "Option blue", "Option four", "Option green"]);
+    await defaultMultiSelect.shouldHaveValues(["Option red", "Option blue", "Option four", "Option green"]);
+    await defaultMultiSelect.selectItemsByIndex([2, 3]);
+    await defaultMultiSelect.shouldHaveValues([
+        "Option red",
+        "Option blue",
+        "Option four",
+        "Option seven",
+        "Option nine",
+    ]);
+    await defaultMultiSelect.removeItemsByText(["Option red", "Option blue"]);
+    await defaultMultiSelect.removeItemsByIndex([2]);
+    await defaultMultiSelect.shouldNotHaveValues(["Option red", "Option blue"]);
+    await defaultMultiSelect.shouldHaveValues(["Option four", "Option green", "Option nine"]);
+    await components_1.components.multiSelect({ dataName: "multi-select-disabled" }).shouldBeDisabled();
+    await components_1.components.multiSelect({ dataName: "multi-select-invalid" }).shouldBeInvalid();
+});

package/tests/sidebar-menu.e2e.js

@@ -30,7 +30,7 @@ testcafe_1.test.skip("Menu desktop", async () => {
     await components_1.components.cms.menu().openUserMenuLink("Změna hesla");
     await testcafe_1.t.expect((0, testcafe_1.Selector)("h1").withExactText("Změna hesla").exists).ok();
 });
-(0, testcafe_1.test)("Menu mobile", async () => {
+testcafe_1.test.skip("Menu mobile", async () => {
     await testcafe_1.t.resizeWindow(390, 844);
     await components_1.components.textInput({ name: "username" }).type("root@uxf.cz");
     await components_1.components.textInput({ name: "password" }).type("root");

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

@@ -5,7 +5,7 @@ interface DatePickerInputFinder extends BaseFinder {
 }
 export declare function datePickerInput(finder: DatePickerInputFinder): {
     selectDate(DD: number, MM: number, YYYY: number): TestControllerPromise<any>;
-    replace(value: string): TestControllerPromise<any>;
+    replace(DD: number, MM: number, YYYY: number): TestControllerPromise<any>;
     shouldHaveValue(value: string): TestControllerPromise<any>;
     shouldBeDisabled(): TestControllerPromise<any>;
     shouldNotBeDisabled(): TestControllerPromise<any>;

package/ui/date-picker-input.js

@@ -13,8 +13,10 @@ function datePickerInput(finder) {
         selectDate(DD, MM, YYYY) {
             return testcafe_1.t.typeText(datepickerInputSelector.find(".uxf-input__element"), `${DD}.${MM}.${YYYY}`);
         },
-        replace(value) {
-            return testcafe_1.t.typeText(datepickerInputSelector.find(".uxf-input__element"), value, { replace: true });
+        replace(DD, MM, YYYY) {
+            return testcafe_1.t.typeText(datepickerInputSelector.find(".uxf-input__element"), `${DD}.${MM}.${YYYY}`, {
+                replace: true,
+            });
         },
         shouldHaveValue(value) {
             return testcafe_1.t.expect(datepickerInputSelector.find(".uxf-input__element").value).eql(value);

package/ui/multi-select.d.ts

@@ -0,0 +1,17 @@
+import { BaseFinder } from "../utils/base-finder";
+interface MultiSelectFinder extends BaseFinder {
+    dataName: string;
+    nth?: number;
+}
+export declare function multiSelect(finder: MultiSelectFinder): {
+    selectItemsByText(optionTexts: string[]): Promise<void>;
+    selectItemsByIndex(indexes: number[]): Promise<void>;
+    shouldExist(): TestControllerPromise<any>;
+    shouldBeDisabled(): TestControllerPromise<any>;
+    shouldBeInvalid(): TestControllerPromise<any>;
+    removeItemsByText(optionTexts: string[]): Promise<void>;
+    removeItemsByIndex(indexes: number[]): Promise<void>;
+    shouldHaveValues(optionTexts: string[]): Promise<void>;
+    shouldNotHaveValues(optionTexts: string[]): Promise<void>;
+};
+export {};

package/ui/multi-select.js

@@ -0,0 +1,50 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.multiSelect = multiSelect;
+const testcafe_1 = require("testcafe");
+const create_selector_1 = require("../utils/create-selector");
+function multiSelect(finder) {
+    var _a;
+    const multiSelectSelector = (0, create_selector_1.createSelector)(finder)
+        .find(".uxf-multi-select")
+        .withAttribute("data-name", finder.dataName)
+        .nth((_a = finder.nth) !== null && _a !== void 0 ? _a : 0)
+        .find(".uxf-multi-select__button");
+    return {
+        async selectItemsByText(optionTexts) {
+            await testcafe_1.t.click(multiSelectSelector);
+            await optionTexts.reduce((promise, optionText) => promise.then(() => testcafe_1.t.click((0, testcafe_1.Selector)(".uxf-dropdown__item").withText(optionText))), Promise.resolve());
+            await testcafe_1.t.click(multiSelectSelector.find(".uxf-input__arrow-icon"));
+        },
+        async selectItemsByIndex(indexes) {
+            await testcafe_1.t.click(multiSelectSelector);
+            await indexes.reduce((promise, index) => promise.then(() => testcafe_1.t.click((0, testcafe_1.Selector)(".uxf-dropdown__item").nth(index))), Promise.resolve());
+            await testcafe_1.t.click(multiSelectSelector.find(".uxf-input__arrow-icon"));
+        },
+        shouldExist() {
+            return testcafe_1.t.expect(multiSelectSelector.exists).ok();
+        },
+        shouldBeDisabled() {
+            return testcafe_1.t.expect(multiSelectSelector.hasClass("is-disabled")).ok();
+        },
+        shouldBeInvalid() {
+            return testcafe_1.t.expect(multiSelectSelector.hasClass("is-invalid")).ok();
+        },
+        async removeItemsByText(optionTexts) {
+            await optionTexts.reduce((promise, text) => promise.then(() => testcafe_1.t.click((0, testcafe_1.Selector)(multiSelectSelector).find(".uxf-chip").withText(text).find(".uxf-chip__button"))), Promise.resolve());
+        },
+        async removeItemsByIndex(indexes) {
+            await indexes.reduce((promise, index) => promise.then(() => testcafe_1.t.click((0, testcafe_1.Selector)(multiSelectSelector).find(".uxf-chip__button").nth(index))), Promise.resolve());
+        },
+        async shouldHaveValues(optionTexts) {
+            await optionTexts.reduce((promise, text) => promise.then(() => testcafe_1.t
+                .expect((0, testcafe_1.Selector)(multiSelectSelector).find(".uxf-chip").withText(text).exists)
+                .ok(`item "${text}" does not exists but it should exists`)), Promise.resolve());
+        },
+        async shouldNotHaveValues(optionTexts) {
+            await optionTexts.reduce((promise, text) => promise.then(() => testcafe_1.t
+                .expect((0, testcafe_1.Selector)(multiSelectSelector).find(".uxf-chip").withText(text).exists)
+                .notOk(`item "${text}" exists but it should not exist`)), Promise.resolve());
+        },
+    };
+}

package/ui/select.d.ts

@@ -12,5 +12,6 @@ export declare function select(finder: SelectInputFinder): {
     shouldNotBeDisabled(): TestControllerPromise<any>;
     shouldExists(): TestControllerPromise<any>;
     shouldNotExists(): TestControllerPromise<any>;
+    clear(): TestControllerPromise<any>;
 };
 export {};

package/ui/select.js

@@ -37,5 +37,8 @@ function select(finder) {
         shouldNotExists() {
             return testcafe_1.t.expect(buttonSelector.exists).notOk(`Select with data-name: ${finder.dataName} should not exists`);
         },
+        clear() {
+            return testcafe_1.t.click(buttonSelector.nextSibling().find(".uxf-input__remove-button"));
+        },
     };
 }