test: using custom doctype to test form builder

This commit is contained in:
Shariq Ansari 2022-12-06 22:12:59 +05:30
parent b7fea0ffe5
commit 3f00a7993c
2 changed files with 122 additions and 60 deletions

View file

@ -0,0 +1,65 @@
export default {
name: "Form Builder Doctype",
custom: 1,
actions: [],
doctype: "DocType",
engine: "InnoDB",
fields: [
{
fieldname: "data3",
fieldtype: "Data",
label: "Data 3",
},
{
fieldname: "tab",
fieldtype: "Tab Break",
label: "Tab 2",
},
{
fieldname: "data",
fieldtype: "Data",
label: "Data",
},
{
fieldname: "check",
fieldtype: "Check",
label: "Check",
},
{
fieldname: "column_1",
fieldtype: "Column Break",
},
{
fieldname: "data1",
fieldtype: "Data",
label: "Data 1",
},
{
fieldname: "section_1",
fieldtype: "Section Break",
},
{
fieldname: "data2",
fieldtype: "Data",
label: "Data 2",
},
],
modified_by: "Administrator",
module: "Custom",
owner: "Administrator",
permissions: [
{
create: 1,
delete: 1,
email: 1,
print: 1,
read: 1,
role: "System Manager",
share: 1,
write: 1,
},
],
sort_field: "modified",
sort_order: "ASC",
track_changes: 1,
};

View file

@ -1,7 +1,10 @@
import form_builder_doctype from "../fixtures/form_builder_doctype";
const doctype_name = form_builder_doctype.name;
context("Form Builder", () => {
before(() => {
cy.login();
cy.visit("/app");
return cy.insert_doc("DocType", form_builder_doctype, true);
});
it("Open Form Builder for Web Form Doctype/Customize Form", () => {
@ -15,124 +18,118 @@ context("Form Builder", () => {
});
it("Drag Field/Column/Section & Tab", () => {
cy.visit("/app/form-builder/Web Form");
cy.visit(`/app/form-builder/${doctype_name}`);
cy.get(".section-columns-container:first .column:first").as("first-column");
cy.get(".section-columns-container:first .column:first .field:first").as("first-field");
let first_column = ".tab-content.active .section-columns-container:first .column:first";
let first_field = first_column + " .field:first";
let label = "div[title='Double click to edit label'] span:first";
cy.get("@first-field")
.find("div[title='Double click to edit label'] span:first")
.as("first-field-title");
// drag first tab to second position
cy.get(".tabs .tab:first").drag(".tabs .tab:nth-child(2)", {
target: { x: 10, y: 10 },
force: true,
});
cy.get(".tabs .tab:first").find(label).should("have.text", "Tab 2");
cy.get(".tabs .tab:first").click();
cy.get(".sidebar-container .tab:first").click();
// drag check field to first column
cy.get(".fields-container .field[title='Check']").drag(
".section-columns-container:first .column:first .field:first",
{
target: { x: 100, y: 10 },
}
);
cy.get("@first-column").find(".field").should("have.length", 4);
cy.get(".fields-container .field[title='Check']").drag(first_field, {
target: { x: 100, y: 10 },
});
cy.get(first_column).find(".field").should("have.length", 3);
cy.get("@first-field")
cy.get(first_field)
.find("div[title='Double click to edit label']")
.dblclick()
.type("Test Check{enter}");
cy.get("@first-field-title").should("have.text", "Test Check");
cy.get(first_field).find(label).should("have.text", "Test Check");
// drag the first field to second position
cy.get("@first-field").drag(
".section-columns-container:first .column:first .field:nth-child(2)",
{
target: { x: 100, y: 10 },
}
);
cy.get("@first-field-title").should("have.text", "Title");
cy.get(first_field).drag(first_column + " .field:nth-child(2)", {
target: { x: 100, y: 10 },
});
cy.get(first_field).find(label).should("have.text", "Data");
// drag first column to second position
cy.get("@first-column").click().wait(200);
cy.get("@first-column")
cy.get(first_column).click().wait(200);
cy.get(first_column)
.find(".column-actions")
.drag(".section-columns-container:first .column:last", {
target: { x: 100, y: 10 },
force: true,
});
cy.get("@first-field-title").should("have.text", "Select DocType");
cy.get(first_field).find(label).should("have.text", "Data 1");
let first_section = ".tab-content.active .form-section-container:first";
cy.get(".form-section-container:first").as("first-section");
// drag first section to second position
cy.get("@first-section").click().wait(200);
cy.get("@first-section")
cy.get(first_section).click().wait(200);
cy.get(first_section)
.find(".section-header")
.drag(".form-section-container:nth-child(2)", {
target: { x: 100, y: 10 },
force: true,
});
cy.get(".section-columns-container:first .column:first .field:first").as("first-field");
cy.get("@first-field-title").should("have.text", "Introduction");
cy.get(".tabs .tab:first").as("first-tab");
cy.get("@first-tab")
.find("div[title='Double click to edit label'] span:first")
.as("first-tab-title");
// drag first tab to second position
cy.get("@first-tab").drag(".tabs .tab:nth-child(2)", {
target: { x: 10, y: 10 },
force: true,
});
cy.get("@first-tab-title").should("have.text", "Settings");
cy.get(first_field).find(label).should("have.text", "Data 2");
});
it("Add New Tab/Section/Column to Form", () => {
cy.visit("/app/form-builder/Web Form");
cy.visit(`/app/form-builder/${doctype_name}`);
let first_section = ".tab-content.active .form-section-container:first";
// add new tab
cy.get(".tab-header").realHover().find(".tab-actions .new-tab-btn").click();
cy.get(".tabs .tab").should("have.length", 4);
cy.get(".tab-content.active .form-section-container:first").as("first-section");
cy.get(".tabs .tab").should("have.length", 3);
// add new section
cy.get("@first-section").click(15, 10);
cy.get("@first-section").find(".section-actions button:first").click();
cy.get(first_section).click(15, 10);
cy.get(first_section).find(".section-actions button:first").click();
cy.get(".tab-content.active .form-section-container").should("have.length", 2);
// add new column
cy.get("@first-section").find(".column:first").click(15, 10);
cy.get("@first-section").find(".column:first .column-actions button:first").click();
cy.get("@first-section").find(".column").should("have.length", 3);
cy.get(first_section).find(".column:first").click(15, 10);
cy.get(first_section).find(".column:first .column-actions button:first").click();
cy.get(first_section).find(".column").should("have.length", 3);
});
it("Remove Tab/Section/Column", () => {
cy.get(".tab-content.active .form-section-container:first").as("first-section");
let first_section = ".tab-content.active .form-section-container:first";
// remove column
cy.get("@first-section").find(".column:first").click(15, 10);
cy.get("@first-section").find(".column:first .column-actions button:last").click();
cy.get("@first-section").find(".column").should("have.length", 2);
cy.get(first_section).find(".column:first").click(15, 10);
cy.get(first_section).find(".column:first .column-actions button:last").click();
cy.get(first_section).find(".column").should("have.length", 2);
// remove section
cy.get("@first-section").click(15, 10);
cy.get("@first-section").find(".section-actions button:last").click();
cy.get(first_section).click(15, 10);
cy.get(first_section).find(".section-actions button:last").click();
cy.get(".tab-content.active .form-section-container").should("have.length", 1);
// remove tab
cy.get(".tab-header").realHover().find(".tab-actions .remove-tab-btn").click();
cy.get(".tabs .tab").should("have.length", 3);
cy.get(".tabs .tab").should("have.length", 2);
});
it("Update Title field Label to New Title through Customize Form", () => {
cy.visit("/app/form-builder/Web Form/customize");
cy.visit(`/app/form-builder/${doctype_name}`);
cy.get(".section-columns-container:first .column:first .field:first")
let first_field =
".tab-content.active .section-columns-container:first .column:first .field:first";
cy.get(first_field)
.find("div[title='Double click to edit label']")
.dblclick()
.type("{selectall}New Title");
cy.findByRole("button", { name: "Save" }).click({ force: true });
cy.visit("/app/web-form/new");
cy.get("[data-fieldname='title'] .clearfix label").should("have.text", "New Title");
cy.visit("/app/form-builder-doctype/new");
cy.get("[data-fieldname='data3'] .clearfix label").should("have.text", "New Title");
});
});