d5-testing-library 1.4.0 → 1.5.0

package/dist/chunk-NWWYF43G.mjs

@@ -0,0 +1,656 @@
+import {
+  AbstractButton,
+  AbstractEditor,
+  AbstractElement,
+  AbstractElementWithParent,
+  Form,
+  FormField,
+  byTestId,
+  byTestIdCssSelector,
+  click,
+  createDocFilterTestId,
+  createLayoutFilterTestId,
+  createTableId,
+  fixElementStaleError,
+  wait,
+  waitElementIsClickable
+} from "./chunk-VWNH6HVN.mjs";
+
+// src/pageObjects/elements/Table/Table.ts
+import { By as By5 } from "selenium-webdriver";
+
+// src/pageObjects/elements/Table/elements/Row.ts
+import { By as By3 } from "selenium-webdriver";
+
+// src/pageObjects/elements/Table/elements/Cell.ts
+import { By as By2 } from "selenium-webdriver";
+
+// src/pageObjects/elements/Table/utils.ts
+import { By } from "selenium-webdriver";
+function getCssRowByIndexSelector(index) {
+  return `tr[aria-rowindex="${transformInputIndex(index)}"]`;
+}
+var getColumnByIndexCssSelector = (columnIndex) => `td[aria-colindex="${transformInputIndex(columnIndex)}"]`;
+var getColumnByCaptionCssSelector = (caption) => `td[role="columnheader"][aria-label="Column ${caption}"]`;
+var getColumnByNameCssSelector = (name) => `td[role="columnheader"][data-fieldname="${name}"]`;
+function getCssCellByIndexSelector(index) {
+  return `td[role="gridcell"][aria-colindex="${transformInputIndex(index)}"]`;
+}
+var transformInputIndex = (index) => index + 1;
+var transformOutputIndex = (index) => +index - 1;
+
+// src/pageObjects/elements/Table/elements/Cell.ts
+var Cell = class extends AbstractElementWithParent {
+  _index;
+  getCellIndex;
+  constructor(parentCssSelector, getCellIndex, index, driver) {
+    super(parentCssSelector, getCssCellByIndexSelector(index), driver);
+    this.getCellIndex = getCellIndex;
+    this._index = index;
+  }
+  set index(index) {
+    this._index = index;
+    this.elementCssSelector = getCssCellByIndexSelector(index);
+  }
+  async getBooleanValue(cellEl) {
+    const booleanEl = await cellEl.findElement(By2.className("boolean-widget"));
+    return await booleanEl.getAttribute("aria-checked") === "true" ? 1 : 0;
+  }
+  async getTagsValue(cellEl) {
+    const tagsCssSelector = ".multiselect-container .multiselect-cell";
+    const tags = await cellEl.findElements(By2.css(tagsCssSelector));
+    const values = [];
+    for (const tag of tags) {
+      values.push(await tag.getAttribute("textContent"));
+    }
+    return values;
+  }
+  async getElement() {
+    if (this._index == null) {
+      this.index = await this.getCellIndex();
+    }
+    return super.getElement();
+  }
+  async getValue() {
+    const cellEl = await this.getElement();
+    const cellElClass = await cellEl.getAttribute("class");
+    if (cellElClass.includes("boolean-column" /* Boolean */))
+      return this.getBooleanValue(cellEl);
+    if (cellElClass.includes("tags-column" /* Tags */))
+      return this.getTagsValue(cellEl);
+    return cellEl.getText();
+  }
+  getIndex() {
+    return this._index;
+  }
+};
+
+// src/pageObjects/elements/Table/elements/Row.ts
+var DX_SELECTION_CLASS = "dx-selection";
+var DX_ROW_EDIT_CLASS = "dx-edit-row";
+var DX_DATA_ROW_CLASS = "dx-data-row";
+var Row = class extends AbstractElementWithParent {
+  index;
+  getColumnBy;
+  constructor(parentCssSelector, index, driver, getColumnBy) {
+    super(parentCssSelector, getCssRowByIndexSelector(index), driver);
+    this.index = index;
+    this.getColumnBy = getColumnBy;
+  }
+  _getCell({ index, name, title }) {
+    return new Cell(
+      this.getFullCssSelector(),
+      () => {
+        return this.getColumnBy({ title, name }).getIndex();
+      },
+      index,
+      this.driver
+    );
+  }
+  getCellByIndex(index) {
+    return this._getCell({ index });
+  }
+  getCell(name) {
+    return this._getCell({ name });
+  }
+  getCellByTitle(title) {
+    return this._getCell({ title });
+  }
+  async select() {
+    const rowEl = await this.getElement();
+    await click(rowEl, this.driver);
+    await wait(
+      async () => {
+        const classes = await this.getClasses();
+        return classes.includes(DX_SELECTION_CLASS);
+      },
+      this.driver,
+      "Cannot select row"
+    );
+  }
+  async isSelected() {
+    const result = await this.getAttribute("aria-selected");
+    return result === "true";
+  }
+  getIndex() {
+    return this.index;
+  }
+  async getCells() {
+    const cells = await this.driver.findElements(By3.css(`${this.getFullCssSelector()} td[role="gridcell"]`));
+    const result = [];
+    cells.forEach((_, index) => {
+      const newCell = this.getCellByIndex(index);
+      result.push(newCell);
+    });
+    return result;
+  }
+  async clickInlineButton(buttonClass) {
+    const FIXED_TABLE_CSS_SELECTOR = ".dx-fixed-columns .dx-datagrid-content.dx-datagrid-content-fixed";
+    const buttonCssSelector = `.${DX_DATA_ROW_CLASS}[aria-rowindex="${transformInputIndex(
+      this.index
+    )}"] .${buttonClass}`;
+    const button = await this.driver.findElement(
+      By3.css(`${this.parentCssSelector} ${FIXED_TABLE_CSS_SELECTOR} ${buttonCssSelector}`)
+    );
+    return click(button, this.driver);
+  }
+  async checkEditingMode(isEditing, msg) {
+    await wait(
+      async () => {
+        return (await this.getClasses()).includes(DX_ROW_EDIT_CLASS) === isEditing;
+      },
+      this.driver,
+      msg
+    );
+  }
+  async edit() {
+    await this.clickInlineButton("edit");
+    await this.checkEditingMode(true, "Row did not switch to edit mode");
+  }
+  async save() {
+    await this.clickInlineButton("save");
+    await this.checkEditingMode(false, "Row did not saved");
+  }
+  async cancel() {
+    await this.clickInlineButton("cancel");
+    await this.checkEditingMode(false, "Row did not switch to normal mode");
+  }
+};
+
+// src/pageObjects/elements/Table/elements/Column.ts
+import { By as By4 } from "selenium-webdriver";
+var Column = class extends AbstractElementWithParent {
+  _index;
+  _caption;
+  _name;
+  headerCssSelector;
+  constructor({ parentCssSelector, headerCssSelector, name, caption, index, driver }) {
+    super(parentCssSelector, "", driver);
+    this._name = name;
+    this.index = index;
+    this._caption = caption;
+    this.headerCssSelector = headerCssSelector;
+  }
+  set index(index) {
+    this._index = index;
+    this.elementCssSelector = getColumnByIndexCssSelector(index);
+  }
+  get index() {
+    return this._index;
+  }
+  async getElement() {
+    await this.getIndex();
+    return super.getElement();
+  }
+  async getColumnHeaderIndexBy(cssSelector) {
+    const column = await fixElementStaleError(By4.css(`${this.parentCssSelector} ${this.headerCssSelector} ${cssSelector}`), this.driver);
+    return transformOutputIndex(await column.getAttribute("aria-colindex"));
+  }
+  async getIndexByCaption() {
+    return this.getColumnHeaderIndexBy(getColumnByCaptionCssSelector(this._caption));
+  }
+  async getIndexByName() {
+    return this.getColumnHeaderIndexBy(getColumnByNameCssSelector(this._name));
+  }
+  async caption() {
+    const el = await this.getElement();
+    return el.getText();
+  }
+  async getIndex() {
+    if (this.index != null) {
+      return this.index;
+    }
+    if (this._caption != null) {
+      this.index = await this.getIndexByCaption();
+      return this.index;
+    }
+    if (this._name != null) {
+      this.index = await this.getIndexByName();
+      return this.index;
+    }
+    throw new Error("Cant get the index in the column");
+  }
+};
+
+// src/pageObjects/elements/Table/Table.ts
+var Table = class extends AbstractElementWithParent {
+  formName;
+  headerCssSelector;
+  constructor(parentCssSelector, headerCssSelector, formName, driver) {
+    super(parentCssSelector, `#${createTableId(formName)}`, driver);
+    this.formName = formName;
+    this.headerCssSelector = headerCssSelector;
+  }
+  getColumnBy = (args) => {
+    if (args.title) {
+      return this.getColumnByTitle(args.title);
+    }
+    return this.getColumnByName(args.name);
+  };
+  getRowByIndex(index) {
+    return new Row(this.getFullCssSelector(), index, this.driver, this.getColumnBy);
+  }
+  getColumnByIndex(index) {
+    return new Column({
+      parentCssSelector: this.getFullCssSelector(),
+      driver: this.driver,
+      index
+    });
+  }
+  getColumnByTitle = (title) => {
+    return new Column({
+      parentCssSelector: this.getFullCssSelector(),
+      headerCssSelector: this.headerCssSelector,
+      caption: title,
+      driver: this.driver
+    });
+  };
+  getColumnByName = (name) => {
+    return new Column({
+      parentCssSelector: this.getFullCssSelector(),
+      headerCssSelector: this.headerCssSelector,
+      name,
+      driver: this.driver
+    });
+  };
+  selectRowByIndex(index) {
+    return this.getRowByIndex(index).select();
+  }
+  async getRows() {
+    const rows = await this.driver.findElements(By5.css(`${this.getFullCssSelector()} .dx-row.dx-data-row`));
+    const result = [];
+    rows.forEach((_, index) => {
+      const newRow = new Row(this.getFullCssSelector(), index, this.driver, this.getColumnBy);
+      result.push(newRow);
+    });
+    return result;
+  }
+  async getColumns() {
+    const columns = await this.driver.findElements(
+      By5.css(`${this.getFullCssSelector()} ${this.headerCssSelector} td[role="columnheader"]`)
+    );
+    const result = [];
+    columns.forEach((_, index) => {
+      const newCol = new Column({
+        parentCssSelector: this.getFullCssSelector(),
+        index,
+        driver: this.driver
+      });
+      result.push(newCol);
+    });
+    return result;
+  }
+  element() {
+    return this.getElement();
+  }
+  /**
+   * Находит поле когда форма находится в состоянии редактирования
+   * @example
+   * const form = new MyForm();
+   * //...
+   * expect(await form.field('Name').getValue()).toBe('test value');
+   */
+  field(name) {
+    return new FormField(this.getFullCssSelector(), this.formName, name, this.driver);
+  }
+};
+
+// src/pageObjects/elements/TableToolbar/ToolbarGroupButton.ts
+var ToolbarGroupButton = class extends AbstractButton {
+  name;
+  constructor(parentCssSelector, name, driver) {
+    super(parentCssSelector, ``, driver);
+    this.name = name;
+  }
+  buttonNotDisplayedError() {
+    return `Button ${this.name} cannot be clicked. It is not displayed or it is disabled`;
+  }
+};
+
+// src/pageObjects/elements/TableToolbar/ToolbarButton.ts
+var TOOLBAR_BUTTON_CLASS = "toolbar-button";
+var ToolbarButton = class extends AbstractButton {
+  name;
+  constructor(parentCssSelector, name, driver) {
+    super(parentCssSelector, `#${TOOLBAR_BUTTON_CLASS}-${name}`, driver);
+    this.name = name;
+  }
+  buttonNotDisplayedError() {
+    return `Button ${this.name} cannot be clicked. It is not displayed or it is disabled`;
+  }
+};
+
+// src/pageObjects/elements/TableToolbar/ToolbarMenu.ts
+import { By as By6 } from "selenium-webdriver";
+
+// src/utils/typesUtil.ts
+var types = {
+  "[object Array]": "array",
+  "[object Date]": "date",
+  "[object Object]": "object",
+  "[object String]": "string",
+  "[object Null]": "null"
+};
+var type = function(object) {
+  const typeOfObject = Object.prototype.toString.call(object);
+  return typeof object === "object" ? types[typeOfObject] || "object" : typeof object;
+};
+var isArray = function(value) {
+  return type(value) === "array";
+};
+var isString = function(object) {
+  return typeof object === "string";
+};
+
+// src/pageObjects/elements/TableToolbar/ToolbarMenu.ts
+var SPINDOWN_CLASS = ".dx-icon-spindown";
+var buttonGroupItemSelector = (formName, name) => byTestIdCssSelector(`ftb-${formName}-${name}`);
+var getFullCssSelector = (formName, name) => `${buttonGroupItemSelector(formName, name)} ${SPINDOWN_CLASS}`;
+var buttonByTextXpath = (text) => `.//span[contains(@class, "dx-menu-item-text") and contains(text(), "${text}")]`;
+var ToolbarMenu = class extends AbstractElementWithParent {
+  _formName;
+  constructor(parentCssSelector, formName, name, driver) {
+    super(parentCssSelector, getFullCssSelector(formName, name), driver);
+    this._formName = formName;
+  }
+  async openDropdownMenu() {
+    const dropdown = await this.getElement();
+    await click(dropdown, this.driver);
+  }
+  getCssSelectorToButton(name) {
+    return byTestId(`ftb-${this._formName}-${name}`);
+  }
+  buttonNotDisplayedError(name) {
+    return `Toolbar menu button ${name} cannot be clicked. It is not displayed or it is disabled`;
+  }
+  async goToButton(name, by) {
+    const toolbarMenuItem = await fixElementStaleError(by, this.driver);
+    await waitElementIsClickable({
+      element: toolbarMenuItem,
+      errorMessage: this.buttonNotDisplayedError(name),
+      driver: this.driver
+    });
+    await click(toolbarMenuItem, this.driver);
+  }
+  async clickButton(name) {
+    await this.openDropdownMenu();
+    if (!isString(name) && !isArray(name))
+      throw new Error(`"name" must be a string or array of string`);
+    let lName = isString(name) ? [name] : name;
+    for (let n of lName) {
+      await this.goToButton(n, this.getCssSelectorToButton(n));
+    }
+  }
+  async clickButtonByTitle(title) {
+    await this.openDropdownMenu();
+    if (!isString(title) && !isArray(title))
+      throw new Error(`"title" must be a string or array of string`);
+    let lTitle = isString(title) ? [title] : title;
+    for (let t of lTitle) {
+      await this.goToButton(t, By6.xpath(buttonByTextXpath(t)));
+    }
+  }
+};
+
+// src/pageObjects/elements/TableToolbar/ToolbarItem.ts
+var GROUP_BUTTON_CLASS = "toolbar-group-button";
+var toolbarItemSelector = (form, name) => byTestIdCssSelector(`ftb-${form}-${name}`);
+var ToolbarItem = class extends AbstractElementWithParent {
+  _button;
+  _formName;
+  _itemName;
+  constructor(parentCssSelector, formName, itemName, driver) {
+    super(parentCssSelector, toolbarItemSelector(formName, itemName), driver);
+    this._itemName = itemName;
+    this._formName = formName;
+  }
+  async init() {
+    if (this._button)
+      return this._button;
+    const classNames = await this.getClasses();
+    if (classNames.includes(GROUP_BUTTON_CLASS)) {
+      this._button = new ToolbarGroupButton(this.getFullCssSelector(), this._itemName, this.driver);
+      return;
+    }
+    this._button = new ToolbarButton(this.parentCssSelector, this._itemName, this.driver);
+  }
+  async click() {
+    await this.init();
+    await this._button.click();
+  }
+  async isDisabled() {
+    await this.init();
+    return await this._button.isDisabled();
+  }
+  get menu() {
+    return new ToolbarMenu(this.parentCssSelector, this._formName, this._itemName, this.driver);
+  }
+};
+
+// src/pageObjects/elements/TableToolbar/FormToolbar.ts
+var TABLE_TOOLBAR_CLASS = "d5-table-toolbar";
+var FormToolbar = class extends AbstractElementWithParent {
+  formName;
+  constructor(parentCssSelector, formName, driver) {
+    super(parentCssSelector, `#${TABLE_TOOLBAR_CLASS}-${formName}`, driver);
+    this.formName = formName;
+  }
+  button(name) {
+    return new ToolbarItem(this.getFullCssSelector(), this.formName, name, this.driver);
+  }
+};
+
+// src/pageObjects/elements/Filters/FormFilterField.ts
+var FormFilterField = class extends AbstractEditor {
+  constructor(parentCssSelector, formName, name, driver) {
+    super(parentCssSelector, byTestIdCssSelector(createLayoutFilterTestId(formName, name)), driver);
+  }
+  /**
+   * Возвращает значение в поле
+   * @example
+   * expect(await form.formFilter('NumberFld').getValue()).toBe(10);
+   * expect(await form.formFilter('TextFld').getValue()).toBe('TestValue');
+   */
+  async getValue() {
+    return super.getValue();
+  }
+  /**
+   * Устанавливает значение в поле
+   * @example
+   * await form.formFilter('NumberFld').setValue(123);
+   * await form.formFilter('TextFld').setValue('TestValue');
+   */
+  async setValue(value) {
+    return super.setValue(value);
+  }
+  /**
+   * Очищает значение в поле
+   * @example
+   * await form.formFilter('NumberFld').clear();
+   */
+  async clear() {
+    return super.clear();
+  }
+  /**
+   * Удаляет тег по переданному тексту
+   * @example
+   * await form.formFilter('TagBox').remove('test');
+   */
+  async remove(itemText) {
+    return super.remove(itemText);
+  }
+};
+
+// src/pageObjects/elements/Filters/FilterPanel.ts
+import { By as By7 } from "selenium-webdriver";
+
+// src/pageObjects/elements/Filters/PanelFilterField.ts
+var PanelFilterField = class extends AbstractEditor {
+  constructor(parentCssSelector, formName, name, driver) {
+    super(parentCssSelector, byTestIdCssSelector(createDocFilterTestId(formName, name)), driver);
+  }
+  /**
+   * Возвращает значение в поле
+   * @example
+   * expect(await form.filterPanel.filterField('NumberFld').getValue()).toBe(10);
+   * expect(await form.filterPanel.filterField('TextFld').getValue()).toBe('TestValue');
+   */
+  async getValue() {
+    return super.getValue();
+  }
+  /**
+   * Устанавливает значение в поле
+   * @example
+   * await form.filterPanel.filterField('NumberFld').setValue(123);
+   * await form.filterPanel.filterField('TextFld').setValue('TestValue');
+   */
+  async setValue(value) {
+    return super.setValue(value);
+  }
+  /**
+   * Очищает значение в поле
+   * @example
+   * await form.filterPanel.filterField('NumberFld').clear();
+   */
+  async clear() {
+    return super.clear();
+  }
+  /**
+   * Удаляет тег по переданному тексту
+   * @example
+   * await form.filterPanel.filterField('TagBox').remove('test');
+   */
+  async remove(itemText) {
+    return super.remove(itemText);
+  }
+};
+
+// src/pageObjects/elements/Filters/FilterPanel.ts
+var drawerSelector = (formName) => `.secondary-drawer-side-panel.form-${formName}`;
+var FILTER_PANEL_SELECTOR = ".filter-panel";
+var CLOSE_SELECTOR = ".button-close";
+var FilterPanel = class extends AbstractElement {
+  _formName;
+  get filterPanelSelector() {
+    return `${this.elementCssSelector} ${FILTER_PANEL_SELECTOR}`;
+  }
+  async filterPanelButtons() {
+    const selector = `${this.elementCssSelector} ${FILTER_PANEL_SELECTOR} .filter-panel__buttons-panel .dx-button-text`;
+    const el = await this.getElement();
+    return el.findElements(By7.css(selector));
+  }
+  constructor(formName, driver) {
+    super(driver, drawerSelector(formName));
+    this._formName = formName;
+  }
+  /**
+   * Возвращает фильтр на панели фильтрации
+   * @returns {PanelFilterField}
+   * @example
+   * await form.filterPanel.filterField('NumberFld');
+   */
+  filterField(name) {
+    return new PanelFilterField(this.filterPanelSelector, this._formName, name, this.driver);
+  }
+  async apply() {
+    const btn = await this.findButtonByTitle("\u0417\u0430\u0441\u0442\u043E\u0441\u0443\u0432\u0430\u0442\u0438");
+    await click(btn, this.driver);
+  }
+  async findButtonByTitle(title) {
+    const buttons = await this.filterPanelButtons();
+    for (const btn of buttons) {
+      if (await btn.getText() === title) {
+        return btn;
+      }
+    }
+  }
+  async clearAll() {
+    const btn = await this.findButtonByTitle("\u041E\u0447\u0438\u0441\u0442\u0438\u0442\u0438");
+    await click(btn, this.driver);
+    await this.driver.sleep(300);
+  }
+  async close() {
+    const btn = await this.driver.findElement(By7.css(`${this.elementCssSelector} ${CLOSE_SELECTOR}`));
+    await click(btn, this.driver);
+  }
+};
+
+// src/pageObjects/elements/Forms/ListForm.ts
+var DATAGRID_HEADER_CSS_SELECTOR = ".dx-datagrid-headers .dx-datagrid-content:not(.dx-datagrid-content-fixed)";
+var ListForm = class extends Form {
+  headerCssSelector;
+  constructor(driver) {
+    super(driver);
+    this.popupContainerCssSelector = `.popup .form-inline-${this.formName}`;
+    this.headerCssSelector = DATAGRID_HEADER_CSS_SELECTOR;
+  }
+  /**
+   * Находит таблицу
+   * @example
+   * const listForm = new MyForm();
+   * //...
+   * expect(listForm.table());
+   */
+  table() {
+    return new Table(this.containerCssSelector, this.headerCssSelector, this.formName, this.driver);
+  }
+  /**
+   * Находит таблицу
+   * @example
+   * const listForm = new MyForm();
+   * //...
+   * expect(listForm.toolbarButton());
+   */
+  toolbarButton(name) {
+    const toolbar = new FormToolbar(this.containerCssSelector, this.formName, this.driver);
+    return toolbar.button(name);
+  }
+  /**
+   * Фильтр который расположен на форме
+   * @example
+   * const listForm = new MyForm();
+   * //...
+   * expect(listForm.formFilter());
+   */
+  formFilter(name) {
+    return new FormFilterField(this.containerCssSelector, this.formName, name, this.driver);
+  }
+  /**
+   * Модель панели фильтрации
+   * @returns {FilterPanel}
+   * @example
+   * const listForm = new MyForm();
+   * //...
+   * expect(listForm.filterPanel());
+   */
+  get filterPanel() {
+    return new FilterPanel(this.formName, this.driver);
+  }
+};
+
+export {
+  FormFilterField,
+  PanelFilterField,
+  FilterPanel,
+  ListForm
+};