nocodb/scripts/playwright/pages/Dashboard/Form/index.ts

// playwright-dev-page.ts
import { Locator, expect } from "@playwright/test";
import { DashboardPage } from "..";
import BasePage from "../../Base";
import { ToolbarPage } from "../common/Toolbar";

export class FormPage extends BasePage {
  readonly dashboard: DashboardPage;
  readonly toolbar: ToolbarPage;

  readonly addAllButton: Locator;
  readonly removeAllButton: Locator;
  readonly submitButton: Locator;

  readonly showAnotherFormRadioButton: Locator;
  readonly showAnotherFormAfter5SecRadioButton: Locator;
  readonly emailMeRadioButton: Locator;

  readonly formHeading: Locator;
  readonly formSubHeading: Locator;
  readonly afterSubmitMsg: Locator;

  constructor(dashboard: DashboardPage) {
    super(dashboard.rootPage);
    this.dashboard = dashboard;
    this.toolbar = new ToolbarPage(this);

    this.addAllButton = dashboard.get().locator('[data-pw="nc-form-add-all"]');
    this.removeAllButton = dashboard
      .get()
      .locator('[data-pw="nc-form-remove-all"]');
    this.submitButton = dashboard.get().locator('[data-pw="nc-form-submit"]');

    this.showAnotherFormRadioButton = dashboard
      .get()
      .locator('[data-pw="nc-form-checkbox-submit-another-form"]');
    this.showAnotherFormAfter5SecRadioButton = dashboard
      .get()
      .locator('[data-pw="nc-form-checkbox-show-blank-form"]');
    this.emailMeRadioButton = dashboard
      .get()
      .locator('[data-pw="nc-form-checkbox-send-email"]');
    this.formHeading = dashboard.get().locator('[data-pw="nc-form-heading"]');
    this.formSubHeading = dashboard
      .get()
      .locator('[data-pw="nc-form-sub-heading"]');
    this.afterSubmitMsg = dashboard
      .get()
      .locator('[data-pw="nc-form-after-submit-msg"]');
  }

  /*
  data-pw="nc-form-wrapper-submit"
  data-pw="nc-form-wrapper"

  data-pw="nc-form-heading"
  data-pw="nc-form-sub-heading"
  data-pw="nc-form-field"
  data-pw="nc-form-input-label"
  data-pw="nc-field-remove-icon"
  data-pw="nc-form-input-required"
  data-pw="nc-form-input-label"
  data-pw="nc-form-input-help-text"
  :data-pw="`nc-form-input-${element.title.replaceAll(' ', '')}`"
  data-pw="nc-form-submit"

  data-pw="nc-form-after-submit-msg"
  data-pw="nc-form-checkbox-submit-another-form"
  data-pw="nc-form-checkbox-show-blank-form"
  data-pw="nc-form-checkbox-send-email"

  data-pw="nc-form-add-all"
  data-pw="nc-form-remove-all"
  :data-pw="`nc-form-hidden-column-${element.label}`"
  data-pw="nc-drag-n-drop-to-hide"
  */

  get() {
    return this.dashboard.get().locator('[data-pw="nc-form-wrapper"]');
  }

  getFormAfterSubmit() {
    return this.dashboard.get().locator('[data-pw="nc-form-wrapper-submit"]');
  }

  getFormHiddenColumn() {
    return this.get().locator('[data-pw="nc-form-hidden-column"]');
  }

  getFormFields() {
    return this.get().locator('[data-pw="nc-form-fields"]');
  }

  getDragNDropToHide() {
    return this.get().locator('[data-pw="nc-drag-n-drop-to-hide"]');
  }

  getFormFieldsRemoveIcon() {
    return this.get().locator('[data-pw="nc-field-remove-icon"]');
  }

  getFormFieldsRequired() {
    return this.get().locator('[data-pw="nc-form-input-required"]');
  }

  getFormFieldsInputLabel() {
    return this.get().locator('input[data-pw="nc-form-input-label"]:visible');
  }

  getFormFieldsInputHelpText() {
    return this.get().locator(
      'input[data-pw="nc-form-input-help-text"]:visible'
    );
  }

  ///////////////////////////
  // Form Actions

  async verifyFormFieldLabel({
    index,
    label,
  }: {
    index: number;
    label: string;
  }) {
    await expect(
      await this.getFormFields()
        .nth(index)
        .locator('[data-pw="nc-form-input-label"]')
    ).toContainText(label);
  }

  async verifyFormFieldHelpText({
    index,
    helpText,
  }: {
    index: number;
    helpText: string;
  }) {
    await expect(
      await this.getFormFields()
        .nth(index)
        .locator('[pw-data="nc-form-input-help-text-label"]')
    ).toContainText(helpText);
  }

  async verifyFieldsIsEditable({ index }: { index: number }) {
    await expect(await this.getFormFields().nth(index)).toHaveClass(
      /nc-editable/
    );
  }

  async verifyAfterSubmitMsg({ msg }: { msg: string }) {
    await expect(
      (await this.afterSubmitMsg.inputValue()).includes(msg)
    ).toBeTruthy();
  }

  async verifyFormViewFieldsOrder({ fields }: { fields: string[] }) {
    let fieldLabels = await this.get().locator(
      '[data-pw="nc-form-input-label"]'
    );
    expect(await fieldLabels.count()).toBe(fields.length);
    for (let i = 0; i < fields.length; i++) {
      // using toContainText instead of toBe because of the extra
      // text (*) in the label for required fields
      await expect(await fieldLabels.nth(i)).toContainText(fields[i]);
    }
  }

  async reorderFields({
    sourceField,
    destinationField,
  }: {
    sourceField: string;
    destinationField: string;
  }) {
    expect(
      await this.get().locator(`.nc-form-drag-${sourceField}`)
    ).toBeVisible();
    expect(
      await this.get().locator(`.nc-form-drag-${destinationField}`)
    ).toBeVisible();
    let src = await this.get().locator(
      `.nc-form-drag-${sourceField.replace(" ", "")}`
    );
    let dst = await this.get().locator(
      `.nc-form-drag-${destinationField.replace(" ", "")}`
    );
    await src.dragTo(dst);
  }

  async removeField({ field, mode }: { mode: string; field: string }) {
    if (mode === "dragDrop") {
      let src = await this.get().locator(
        `.nc-form-drag-${field.replace(" ", "")}`
      );
      let dst = await this.get().locator(`[data-pw="nc-drag-n-drop-to-hide"]`);
      await src.dragTo(dst);
    } else if (mode === "hideField") {
      let src = await this.get().locator(
        `.nc-form-drag-${field.replace(" ", "")}`
      );
      await src.locator(`[data-pw="nc-field-remove-icon"]`).click();
    }
  }

  async addField({ field, mode }: { mode: string; field: string }) {
    if (mode === "dragDrop") {
      let src = await this.get().locator(
        `[data-pw="nc-form-hidden-column-${field}"]`
      );
      let dst = await this.get().locator(`.nc-form-drag-Country`);
      await src.dragTo(dst);
    } else if (mode === "clickField") {
      let src = await this.get().locator(
        `[data-pw="nc-form-hidden-column-${field}"]`
      );
      await src.click();
    }
  }

  async removeAllFields() {
    await this.removeAllButton.click();
  }

  async addAllFields() {
    await this.addAllButton.click();
  }

  async configureHeader(param: { subtitle: string; title: string }) {
    await this.formHeading.fill(param.title);
    await this.formSubHeading.fill(param.subtitle);
  }

  async verifyHeader(param: { subtitle: string; title: string }) {
    expect(await this.formHeading.inputValue()).toBe(param.title);
    expect(await this.formSubHeading.inputValue()).toBe(param.subtitle);
  }

  async fillForm(param: { field: string; value: string }[]) {
    for (let i = 0; i < param.length; i++) {
      await this.get()
        .locator(
          `[data-pw="nc-form-input-${param[i].field.replace(
            " ",
            ""
          )}"] >> input`
        )
        .fill(param[i].value);
    }
  }

  async configureField({
    field,
    required,
    label,
    helpText,
  }: {
    field: string;
    required: boolean;
    label: string;
    helpText: string;
  }) {
    await this.get()
      .locator(`.nc-form-drag-${field.replace(" ", "")}`)
      .locator('div[data-pw="nc-form-input-label"]')
      .click();
    await this.getFormFieldsInputLabel().fill(label);
    await this.getFormFieldsInputHelpText().fill(helpText);
    if (required) {
      await this.get()
        .locator(`.nc-form-drag-${field.replace(" ", "")}`)
        .click();
    }
    await this.formHeading.click();
  }

  async verifyField({
    field,
    required,
    label,
    helpText,
  }: {
    field: string;
    required: boolean;
    label: string;
    helpText: string;
  }) {
    let expectText = "";
    if (required) expectText = label + " *";
    else expectText = label;

    // data-pw="nc-form-input-label"
    // data-pw="nc-form-input-help-text-label"
    let fieldLabel = await this.get()
      .locator(`.nc-form-drag-${field.replace(" ", "")}`)
      .locator('div[data-pw="nc-form-input-label"]')
      .innerText();
    expect(fieldLabel).toBe(expectText);

    let fieldHelpText = await this.get()
      .locator(`.nc-form-drag-${field.replace(" ", "")}`)
      .locator('div[data-pw="nc-form-input-help-text-label"]')
      .innerText();
    expect(fieldHelpText).toBe(helpText);
  }

  async submitForm() {
    await this.submitButton.click();
  }

  async verifyStatePostSubmit(param: {
    message?: string;
    submitAnotherForm?: boolean;
    showBlankForm?: boolean;
  }) {
    if (undefined !== param.message) {
      expect(await this.getFormAfterSubmit()).toContainText(param.message);
    }
    if (true === param.submitAnotherForm) {
      expect(
        await this.getFormAfterSubmit().locator(
          'button:has-text("Submit Another Form")'
        )
      ).toBeVisible();
    }
    if (true === param.showBlankForm) {
      await this.get().waitFor();
    }
  }

  async configureSubmitMessage(param: { message: string }) {
    await this.afterSubmitMsg.fill(param.message);
  }

  submitAnotherForm() {
    return this.getFormAfterSubmit().locator(
      'button:has-text("Submit Another Form")'
    );
  }

  // todo: Wait for render to complete
  async waitLoading() {
    await this.rootPage.waitForTimeout(1000);
  }

  verifyAfterSubmitMenuState(param: {
    showBlankForm?: boolean;
    submitAnotherForm?: boolean;
    emailMe?: boolean;
  }) {
    if (true === param.showBlankForm) {
      expect(
        this.get().locator(
          '[data-pw="nc-form-checkbox-show-blank-form"][aria-checked="true"]'
        )
      ).toBeVisible();
    }
    if (true === param.submitAnotherForm) {
      expect(
        this.get().locator(
          '[data-pw="nc-form-checkbox-submit-another-form"][aria-checked="true"]'
        )
      ).toBeVisible();
    }
    if (true === param.emailMe) {
      expect(
        this.get().locator(
          '[data-pw="nc-form-checkbox-send-email"][aria-checked="true"]'
        )
      ).toBeVisible();
    }
  }
}