nocodb/scripts/playwright/pages/Dashboard/Grid/Column/index.ts

import { Page, expect } from "@playwright/test";
import { GridPage } from "..";
import BasePage from "../../../Base";
import { SelectOptionColumnPageObject } from "./SelectOptionColumn";

export class ColumnPageObject extends BasePage {
  readonly grid: GridPage;
  readonly selectOption: SelectOptionColumnPageObject;

  constructor(grid: GridPage) {
    super(grid.rootPage);
    this.grid = grid;
    this.selectOption = new SelectOptionColumnPageObject(this);
  }

  get() {
    return this.rootPage.locator('form[data-pw="add-or-edit-column"]');
  }

  async create({
    title,
    type = "SingleLineText",
    formula = "",
    childTable = "",
    childColumn = "",
    rollupType = "",
  }: {
    title: string;
    type?: string;
    formula?: string;
    childTable?: string;
    childColumn?: string;
    rollupType?: string;
  }) {
    await this.grid.get().locator(".nc-column-add").click();
    await this.rootPage.waitForTimeout(500);
    await this.fillTitle({ title });
    await this.rootPage.waitForTimeout(500);
    await this.selectType({ type });
    await this.rootPage.waitForTimeout(500);

    switch (type) {
      case "SingleTextLine":
        break;
      case "SingleSelect":
      case "MultiSelect":
        await this.selectOption.addOption({
          index: 0,
          option: "Option 1",
          skipColumnModal: true,
        });
        await this.selectOption.addOption({
          index: 1,
          option: "Option 2",
          skipColumnModal: true,
        });
        break;
      case "Formula":
        await this.get().locator(".nc-formula-input").fill(formula);
        break;
      case "Lookup":
        await this.get().locator(".ant-select-single").nth(1).click();
        await this.rootPage
          .locator(`.ant-select-item`, {
            hasText: childTable,
          })
          .click();
        await this.get().locator(".ant-select-single").nth(2).click();
        await this.rootPage
          .locator(`.ant-select-item`, {
            hasText: childColumn,
          })
          .click();
        break;
      case "Rollup":
        await this.get().locator(".ant-select-single").nth(1).click();
        await this.rootPage
          .locator(`.ant-select-item`, {
            hasText: childTable,
          })
          .click();
        await this.get().locator(".ant-select-single").nth(2).click();
        await this.rootPage
          .locator(`.nc-dropdown-relation-column >> .ant-select-item`, {
            hasText: childColumn,
          })
          .click();
        await this.get().locator(".ant-select-single").nth(3).click();
        await this.rootPage
          .locator(`.nc-dropdown-rollup-function >> .ant-select-item`, {
            hasText: rollupType,
          })
          .nth(0)
          .click();
        break;
      default:
        break;
    }

    await this.save();
  }

  async fillTitle({ title }: { title: string }) {
    await this.get().locator(".nc-column-name-input").fill(title);
  }

  async selectType({ type }: { type: string }) {
    await this.get()
      .locator(".ant-select-selector > .ant-select-selection-item")
      .click();

    await this.get()
      .locator('.ant-select-selection-search-input[aria-expanded="true"]')
      .waitFor();
    await this.get()
      .locator('.ant-select-selection-search-input[aria-expanded="true"]')
      .fill(type);

    // Select column type
    await this.rootPage.locator(`text=${type}`).nth(1).click();
  }

  async delete({ title }: { title: string }) {
    await this.grid
      .get()
      .locator(`th[data-title="${title}"] >> svg.ant-dropdown-trigger`)
      .click();
    // await this.rootPage.locator('li[role="menuitem"]:has-text("Delete")').waitFor();
    await this.rootPage
      .locator('li[role="menuitem"]:has-text("Delete")')
      .click();

    await this.rootPage.locator('button:has-text("Delete")').click();

    // wait till modal is closed
    await this.rootPage
      .locator(".nc-modal-column-delete")
      .waitFor({ state: "hidden" });
  }

  async openEdit({
    title,
    type = "SingleLineText",
    formula = "",
  }: {
    title: string;
    type?: string;
    formula?: string;
  }) {
    await this.grid
      .get()
      .locator(`th[data-title="${title}"] .nc-ui-dt-dropdown`)
      .click();
    await this.rootPage.locator('li[role="menuitem"]:has-text("Edit")').click();

    await this.get().waitFor({ state: "visible" });

    // todo: Hack to wait for the modal to be fully loaded
    await this.fillTitle({ title: "dummy" });
    await this.fillTitle({ title });
    await this.get().locator('label[title="Column Name"]').click();

    switch (type) {
      case "Formula":
        await this.get().locator(".nc-formula-input").fill(formula);
        break;
      default:
        break;
    }
  }

  async save({ isUpdated }: { isUpdated?: boolean } = {}) {
    await this.get().locator('button:has-text("Save")').click();

    await this.toastWait({
      message: isUpdated ? "Column updated" : "Column created",
    });
    await this.get().waitFor({ state: "hidden" });
    await this.rootPage.waitForTimeout(200);
  }

  async verify({ title, isVisible }: { title: string; isVisible?: boolean }) {
    if (isVisible) {
      return expect(
        await this.rootPage.locator(`th[data-title="${title}"]`).count()
      ).toBe(0);
    }
    await expect(this.rootPage.locator(`th[data-title="${title}"]`)).toHaveText(
      title
    );
  }
}