nocodb/tests/playwright/pages/Dashboard/Grid/Column/SelectOptionColumn.ts

import { ColumnPageObject } from '.';
import BasePage from '../../../Base';
import { expect } from '@playwright/test';

export class SelectOptionColumnPageObject extends BasePage {
  readonly column: ColumnPageObject;

  constructor(column: ColumnPageObject) {
    super(column.rootPage);
    this.column = column;
  }

  get() {
    return this.column.get();
  }

  async addOption({
    index,
    columnTitle,
    option,
    skipColumnModal,
  }: {
    index: number;
    option: string;
    skipColumnModal?: boolean;
    columnTitle?: string;
  }) {
    if (!skipColumnModal && columnTitle) await this.column.openEdit({ title: columnTitle });

    await this.column.get().locator('button:has-text("Add option")').click();

    // Fill text=Select options can't be nullAdd option >> input[type="text"]
    await this.column.get().locator(`[data-testid="select-column-option-input-${index}"]`).click();
    await this.column.get().locator(`[data-testid="select-column-option-input-${index}"]`).fill(option);

    if (!skipColumnModal && columnTitle) await this.column.save({ isUpdated: true });
  }

  // add multiple options at once after column creation is completed
  //
  async addOptions({ columnTitle, options }: { columnTitle: string; options: string[] }) {
    await this.column.openEdit({ title: columnTitle });
    for (let i = 0; i < options.length; i++) {
      await this.column.get().locator('button:has-text("Add option")').click();
      await this.column.get().locator(`[data-testid="select-column-option-input-${i}"]`).click();
      await this.column.get().locator(`[data-testid="select-column-option-input-${i}"]`).fill(options[i]);
    }
    await this.column.save({ isUpdated: true });
  }

  async editOption({ columnTitle, index, newOption }: { index: number; columnTitle: string; newOption: string }) {
    await this.column.openEdit({ title: columnTitle });

    await this.column.get().locator(`[data-testid="select-column-option-input-${index}"]`).click();
    await this.column.get().locator(`[data-testid="select-column-option-input-${index}"]`).fill(newOption);

    await this.column.save({ isUpdated: true });
  }

  async deleteOption({ columnTitle, index }: { index: number; columnTitle: string }) {
    await this.column.openEdit({ title: columnTitle });

    await this.column.get().locator(`[data-testid="select-column-option-${index}"]`).hover();
    await this.column
      .get()
      .locator(`[data-testid="select-column-option-remove-${index}"]`)
      .waitFor({ state: 'visible' });
    await this.column.get().locator(`[data-testid="select-column-option-remove-${index}"]`).click();

    await expect(this.column.get().getByTestId(`select-column-option-${index}`)).toHaveClass(/removed/);

    await this.column.save({ isUpdated: true });
  }

  async deleteOptionWithUndo({ columnTitle, index }: { index: number; columnTitle: string }) {
    await this.column.openEdit({ title: columnTitle });

    await this.column.get().locator(`[data-testid="select-column-option-${index}"]`).hover();
    await this.column
      .get()
      .locator(`[data-testid="select-column-option-remove-${index}"]`)
      .waitFor({ state: 'visible' });
    await this.column.get().locator(`[data-testid="select-column-option-remove-${index}"]`).click();

    await expect(this.column.get().getByTestId(`select-column-option-${index}`)).toHaveClass(/removed/);

    await this.column.get().locator(`[data-testid="select-column-option-${index}"]`).hover();
    await this.column
      .get()
      .locator(`[data-testid="select-column-option-remove-undo-${index}"]`)
      .waitFor({ state: 'visible' });
    await this.column.get().locator(`[data-testid="select-column-option-remove-undo-${index}"]`).click();

    await expect(this.column.get().getByTestId(`select-column-option-${index}`)).not.toHaveClass(/removed/);

    await this.column.save({ isUpdated: true });
  }

  async reorderOption({
    columnTitle,
    sourceOption,
    destinationOption,
  }: {
    columnTitle: string;
    sourceOption: string;
    destinationOption: string;
  }) {
    await this.column.openEdit({ title: columnTitle });

    await this.column.rootPage.waitForTimeout(150);

    await this.column.rootPage.dragAndDrop(
      `[data-testid="select-option-column-handle-icon-${sourceOption}"]`,
      `[data-testid="select-option-column-handle-icon-${destinationOption}"]`,
      {
        force: true,
      }
    );

    await this.column.save({ isUpdated: true });
  }
}