From 3f00a7993c72a1392ef1f7d7fa053e2e5fedfbb2 Mon Sep 17 00:00:00 2001 From: Shariq Ansari Date: Tue, 6 Dec 2022 22:12:59 +0530 Subject: [PATCH] test: using custom doctype to test form builder --- cypress/fixtures/form_builder_doctype.js | 65 +++++++++++++ cypress/integration/form_builder.js | 117 +++++++++++------------ 2 files changed, 122 insertions(+), 60 deletions(-) create mode 100644 cypress/fixtures/form_builder_doctype.js diff --git a/cypress/fixtures/form_builder_doctype.js b/cypress/fixtures/form_builder_doctype.js new file mode 100644 index 0000000000..08b598f82a --- /dev/null +++ b/cypress/fixtures/form_builder_doctype.js @@ -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, +}; diff --git a/cypress/integration/form_builder.js b/cypress/integration/form_builder.js index 06708a00dc..c63a4ac2fc 100644 --- a/cypress/integration/form_builder.js +++ b/cypress/integration/form_builder.js @@ -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"); }); });