github
/
nocodb
mirror of https://github.com/nocodb/nocodb
1
0
Fork 0
Code Issues Releases Wiki Activity
Browse Source

test: form fields 

Signed-off-by: Raju Udava <86527202+dstala@users.noreply.github.com>
pull/3848/head
Raju Udava 2 years ago committed by Muhammed Mustafa
parent
773023b954
commit
986f95ad4a
2 changed files with 160 additions and 58 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 111
      scripts/playwright/pages/Dashboard/Form/index.ts
  2. 107
      scripts/playwright/tests/viewForm.spec.ts

111
scripts/playwright/pages/Dashboard/Form/index.ts
Unescape View File

@ -24,16 +24,12 @@ export class FormPage extends BasePage {
super(dashboard.rootPage);
this.dashboard = dashboard;
this.toolbar = new ToolbarPage(this);
this.addAllButton = dashboard
.get()
.locator('[data-pw="nc-form-add-all"]');
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.submitButton = dashboard.get().locator('[data-pw="nc-form-submit"]');
this.showAnotherFormRadioButton = dashboard
.get()
@ -44,9 +40,7 @@ export class FormPage extends BasePage {
this.emailMeRadioButton = dashboard
.get()
.locator('[data-pw="nc-form-checkbox-send-email"]');
this.formHeading = dashboard
.get()
.locator('[data-pw="nc-form-heading"]');
this.formHeading = dashboard.get().locator('[data-pw="nc-form-heading"]');
this.formSubHeading = dashboard
.get()
.locator('[data-pw="nc-form-sub-heading"]');
@ -110,30 +104,56 @@ export class FormPage extends BasePage {
}
getFormFieldsInputLabel() {
return this.get().locator('[data-pw="nc-form-input-label"]');
return this.get().locator('input[data-pw="nc-form-input-label"]:visible');
}
getFormFieldsInputHelpText() {
return this.get().locator('[data-pw="nc-form-input-help-text"]');
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 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 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/);
await expect(await this.getFormFields().nth(index)).toHaveClass(
/nc-editable/
);
}
async verifyAfterSubmitMsg({ msg }: { msg: string }) {
await expect((await this.afterSubmitMsg.inputValue()).includes(msg)).toBeTruthy()
await expect(
(await this.afterSubmitMsg.inputValue()).includes(msg)
).toBeTruthy();
}
async verifyFormViewFieldsOrder({ fields }: { fields: string[] }) {
@ -231,6 +251,61 @@ export class FormPage extends BasePage {
}
}
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();
}

107
scripts/playwright/tests/viewForm.spec.ts
Unescape View File

@ -2,14 +2,17 @@ import { test } from "@playwright/test";
import { DashboardPage } from "../pages/Dashboard";
import { SettingTab } from "../pages/Dashboard/Settings";
import setup from "../setup";
import { FormPage } from "../pages/Dashboard/Form";
test.describe("Form view", () => {
let dashboard: DashboardPage;
let form: FormPage;
let context: any;
test.beforeEach(async ({ page }) => {
context = await setup({ page });
dashboard = new DashboardPage(page, context.project);
form = dashboard.form;
});
test("Field re-order operations", async () => {
@ -21,54 +24,54 @@ test.describe("Form view", () => {
await dashboard.viewSidebar.verifyView({ title: "CountryForm", index: 1 });
// verify form-view fields order
await dashboard.form.verifyFormViewFieldsOrder({
await form.verifyFormViewFieldsOrder({
fields: ["Country", "LastUpdate", "City List"],
});
// reorder & verify
await dashboard.form.reorderFields({
await form.reorderFields({
sourceField: "LastUpdate",
destinationField: "Country",
});
await dashboard.form.verifyFormViewFieldsOrder({
await form.verifyFormViewFieldsOrder({
fields: ["LastUpdate", "Country", "City List"],
});
// remove & verify (drag-drop)
await dashboard.form.removeField({ field: "City List", mode: "dragDrop" });
await dashboard.form.verifyFormViewFieldsOrder({
await form.removeField({ field: "City List", mode: "dragDrop" });
await form.verifyFormViewFieldsOrder({
fields: ["LastUpdate", "Country"],
});
// add & verify (drag-drop)
await dashboard.form.addField({ field: "City List", mode: "dragDrop" });
await dashboard.form.verifyFormViewFieldsOrder({
await form.addField({ field: "City List", mode: "dragDrop" });
await form.verifyFormViewFieldsOrder({
fields: ["LastUpdate", "City List", "Country"],
});
// remove & verify (hide field button)
await dashboard.form.removeField({ field: "City List", mode: "hideField" });
await dashboard.form.verifyFormViewFieldsOrder({
await form.removeField({ field: "City List", mode: "hideField" });
await form.verifyFormViewFieldsOrder({
fields: ["LastUpdate", "Country"],
});
// add & verify (hide field button)
await dashboard.form.addField({ field: "City List", mode: "clickField" });
await dashboard.form.verifyFormViewFieldsOrder({
await form.addField({ field: "City List", mode: "clickField" });
await form.verifyFormViewFieldsOrder({
fields: ["LastUpdate", "Country", "City List"],
});
// remove-all & verify
await dashboard.form.removeAllFields();
await form.removeAllFields();
await dashboard.rootPage.waitForTimeout(2000);
await dashboard.form.verifyFormViewFieldsOrder({
await form.verifyFormViewFieldsOrder({
fields: ["Country"],
});
// // add-all & verify
await dashboard.form.addAllFields();
await form.addAllFields();
await dashboard.rootPage.waitForTimeout(2000);
await dashboard.form.verifyFormViewFieldsOrder({
await form.verifyFormViewFieldsOrder({
fields: ["LastUpdate", "Country", "City List"],
});
});
@ -81,61 +84,85 @@ test.describe("Form view", () => {
await dashboard.viewSidebar.createFormView({ title: "CountryForm" });
await dashboard.viewSidebar.verifyView({ title: "CountryForm", index: 1 });
await dashboard.form.configureHeader({
await form.configureHeader({
title: "Country",
subtitle: "Country subtitle",
});
await dashboard.form.verifyHeader({
await form.verifyHeader({
title: "Country",
subtitle: "Country subtitle",
});
// configure field title & description
await form.configureField({
field: "Country",
label: "Country new title",
helpText: "Country new description",
required: true,
});
await form.verifyFormFieldLabel({
index: 0,
label: "Country new title",
});
await form.verifyFormFieldHelpText({
index: 0,
helpText: "Country new description",
});
// revert configurations
await form.configureField({
field: "Country",
label: "Country",
helpText: "",
required: true,
});
// retain only 'Country' field
await dashboard.form.removeAllFields();
await form.removeAllFields();
// submit default form validation
await dashboard.form.fillForm([{ field: "Country", value: "_abc" }]);
await dashboard.form.submitForm();
await dashboard.form.verifyStatePostSubmit({
await form.fillForm([{ field: "Country", value: "_abc" }]);
await form.submitForm();
await form.verifyStatePostSubmit({
message: "Successfully submitted form data",
});
// submit custom form validation
await dashboard.viewSidebar.openView({ title: "CountryForm" });
await dashboard.form.configureSubmitMessage({
await form.configureSubmitMessage({
message: "Custom submit message",
});
await dashboard.form.fillForm([{ field: "Country", value: "_abc" }]);
await dashboard.form.submitForm();
await dashboard.form.verifyStatePostSubmit({
await form.fillForm([{ field: "Country", value: "_abc" }]);
await form.submitForm();
await form.verifyStatePostSubmit({
message: "Custom submit message",
});
// enable 'submit another form' option
await dashboard.viewSidebar.openView({ title: "CountryForm" });
await dashboard.form.showAnotherFormRadioButton.click();
await dashboard.form.fillForm([{ field: "Country", value: "_abc" }]);
await dashboard.form.submitForm();
await form.showAnotherFormRadioButton.click();
await form.fillForm([{ field: "Country", value: "_abc" }]);
await form.submitForm();
await dashboard.rootPage.waitForTimeout(2000);
await dashboard.form.verifyStatePostSubmit({
await form.verifyStatePostSubmit({
submitAnotherForm: true,
});
await dashboard.form.submitAnotherForm().click();
await form.submitAnotherForm().click();
// enable 'show another form' option
await dashboard.form.showAnotherFormRadioButton.click();
await dashboard.form.showAnotherFormAfter5SecRadioButton.click();
await dashboard.form.fillForm([{ field: "Country", value: "_abc" }]);
await dashboard.form.fillForm([{ field: "Country", value: "_abc" }]);
await dashboard.form.submitForm();
await form.showAnotherFormRadioButton.click();
await form.showAnotherFormAfter5SecRadioButton.click();
await form.fillForm([{ field: "Country", value: "_abc" }]);
await form.fillForm([{ field: "Country", value: "_abc" }]);
await form.submitForm();
await dashboard.rootPage.waitForTimeout(6000);
await dashboard.form.verifyStatePostSubmit({
await form.verifyStatePostSubmit({
showBlankForm: true,
});
// enable 'email-me' option
await dashboard.form.showAnotherFormAfter5SecRadioButton.click();
await dashboard.form.emailMeRadioButton.click();
await form.showAnotherFormAfter5SecRadioButton.click();
await form.emailMeRadioButton.click();
await dashboard.toastWait({
message:
"Please activate SMTP plugin in App store for enabling email notification",
@ -158,8 +185,8 @@ test.describe("Form view", () => {
// enable 'email-me' option
await dashboard.viewSidebar.openView({ title: "CountryForm" });
await dashboard.form.emailMeRadioButton.click();
await dashboard.form.verifyAfterSubmitMenuState({
await form.emailMeRadioButton.click();
await form.verifyAfterSubmitMenuState({
emailMe: true,
submitAnotherForm: false,
showBlankForm: false,

Write Preview
Loading…
Cancel
Save