@uxf/e2e-playwright 11.114.0 → 11.115.0

package/components.d.ts

@@ -3,6 +3,7 @@ export declare function createUi(page: Page): {
     button: (finder: import("./ui/button").ButtonFinder) => import("./ui/button").ButtonModel;
     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;
     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;

package/components.js

@@ -1,6 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.createUi = createUi;
+const table_1 = require("./data-grid/table");
 const button_1 = require("./ui/button");
 const checkbox_input_1 = require("./ui/checkbox-input");
 const combobox_1 = require("./ui/combobox");
@@ -22,6 +23,7 @@ function createUi(page) {
         button: (0, button_1.button)(page),
         checkboxInput: (0, checkbox_input_1.checkboxInput)(page),
         combobox: (0, combobox_1.combobox)(page),
+        dataGridTable: (0, table_1.dataGridTable)(page),
         datePickerInput: (0, date_picker_input_1.datePickerInput)(page),
         datetimePickerInput: (0, datetime_picker_input_1.datetimePickerInput)(page),
         dropzone: (0, dropzone_1.dropzone)(page),

package/data-grid/table.d.ts

@@ -0,0 +1,20 @@
+import { Page } from "@playwright/test";
+import { BaseFinder } from "../utils/base-finder";
+import { BaseModel } from "../utils/base-model";
+export interface DataGridTableFinder extends BaseFinder {
+    nth?: number;
+}
+export declare class DataGridTableModel extends BaseModel {
+    private readonly bodyLocator;
+    private readonly headerLocator;
+    constructor(page: Page, finder: DataGridTableFinder);
+    private getColumnIndex;
+    getRowCount(): Promise<number>;
+    /** When using a numeric column index, checkbox and action cells are counted */
+    shouldHaveCellValue(data: {
+        content: string;
+        row?: number;
+        column: number | string;
+    }): Promise<void>;
+}
+export declare const dataGridTable: (page: Page) => (finder: DataGridTableFinder) => DataGridTableModel;

package/data-grid/table.e2e.d.ts

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

package/data-grid/table.e2e.js

@@ -0,0 +1,11 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const test_1 = require("@playwright/test");
+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({}).shouldHaveCellValue({ column: "Text", content: "Red" });
+    await ui.dataGridTable({}).shouldHaveCellValue({ row: 2, column: 1, content: "Green" });
+});

package/data-grid/table.js

@@ -0,0 +1,40 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.dataGridTable = exports.DataGridTableModel = void 0;
+const test_1 = require("@playwright/test");
+const base_model_1 = require("../utils/base-model");
+class DataGridTableModel extends base_model_1.BaseModel {
+    constructor(page, finder) {
+        var _a, _b;
+        const container = (_a = finder.parent) !== null && _a !== void 0 ? _a : page;
+        super(page, container.locator(".uxf-dg-table").nth((_b = finder.nth) !== null && _b !== void 0 ? _b : 0));
+        this.bodyLocator = this.locator.locator(".uxf-dg-table__body");
+        this.headerLocator = this.locator.locator(".uxf-dg-table__header");
+    }
+    async getColumnIndex(title) {
+        const index = await this.headerLocator
+            .locator(".uxf-dg-table__cell--header")
+            .evaluateAll((els, t) => els.findIndex((el) => el.textContent.trim() === t), title);
+        if (index === -1) {
+            throw new Error(`Column "${title}" not found in data grid table header`);
+        }
+        return index;
+    }
+    async getRowCount() {
+        return this.bodyLocator.locator(".uxf-dg-table__row").count();
+    }
+    /** When using a numeric column index, checkbox and action cells are counted */
+    async shouldHaveCellValue(data) {
+        var _a;
+        const columnIndex = typeof data.column === "string" ? await this.getColumnIndex(data.column) : data.column;
+        const cell = this.bodyLocator
+            .locator(".uxf-dg-table__row")
+            .nth((_a = data.row) !== null && _a !== void 0 ? _a : 0)
+            .locator(".uxf-dg-table__cell")
+            .nth(columnIndex);
+        await (0, test_1.expect)(cell).toHaveText(data.content);
+    }
+}
+exports.DataGridTableModel = DataGridTableModel;
+const dataGridTable = (page) => (finder) => new DataGridTableModel(page, finder);
+exports.dataGridTable = dataGridTable;

package/package.json

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

package/playwright.config.js

@@ -12,8 +12,8 @@ const test_1 = require("@playwright/test");
  * See https://playwright.dev/docs/test-configuration.
  */
 exports.default = (0, test_1.defineConfig)({
-    testDir: "./ui",
-    testMatch: "**/*.e2e.ts",
+    testDir: ".",
+    testMatch: ["ui/**/*.e2e.ts", "data-grid/**/*.e2e.ts"],
     /* Run tests in files in parallel */
     fullyParallel: true,
     /* Fail the build on CI if you accidentally left test.only in the source code. */
@@ -39,14 +39,15 @@ exports.default = (0, test_1.defineConfig)({
             name: "chromium",
             use: { ...test_1.devices["Desktop Chrome"] },
         },
-        {
+        /*{
             name: "firefox",
-            use: { ...test_1.devices["Desktop Firefox"] },
+            use: { ...devices["Desktop Firefox"] },
         },
+
         {
             name: "webkit",
-            use: { ...test_1.devices["Desktop Safari"] },
-        },
+            use: { ...devices["Desktop Safari"] },
+        },*/
         /* Test against mobile viewports. */
         // {
         //   name: 'Mobile Chrome',

package/ui/checkbox-input.js

@@ -10,7 +10,7 @@ class CheckboxInputModel extends form_component_model_1.FormComponentModel {
     }
     async change(value) {
         if (value !== (await this.fakeCheckboxLocator.evaluate((el) => el.classList.contains("is-selected")))) {
-            await this.locator.click();
+            await this.fakeCheckboxLocator.click();
         }
     }
 }

package/ui/text-input.d.ts

@@ -3,6 +3,7 @@ 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 fakeTextInputLocator;
     constructor(page: Page, finder: FormComponentFinder);
     change(value: string): Promise<void>;
     getValue(): Promise<string>;

package/ui/text-input.e2e.js

@@ -8,4 +8,6 @@ const components_1 = require("../components");
     await ui.textInput({ $name: "default" }).change("Value");
     await ui.textInput({ $name: "error" }).shouldBeInvalid();
     await ui.textInput({ $name: "withValue" }).getValue();
+    await page.goto("/examples/ui/text-input/OnlyForE2ETests");
+    await ui.textInput({ $name: "phoneNumber" }).change("123456789");
 });

package/ui/text-input.js

@@ -6,12 +6,13 @@ const form_component_model_1 = require("../utils/form-component-model");
 class TextInputModel extends form_component_model_1.FormComponentModel {
     constructor(page, finder) {
         super(text_input_1.TEXT_INPUT_COMPONENT_NAME, page, finder);
+        this.fakeTextInputLocator = this.locator.locator(":scope > .uxf-form-component__input > .uxf-input > .uxf-input__wrapper input");
     }
     async change(value) {
-        await this.locator.locator("input").fill(value);
+        await this.fakeTextInputLocator.fill(value);
     }
     async getValue() {
-        return await this.locator.locator("input").inputValue();
+        return await this.fakeTextInputLocator.inputValue();
     }
 }
 exports.TextInputModel = TextInputModel;