improve test

ProcessMaker · Oct 31, 2024 · 1254371 · 1254371
1 parent 54bf839
commit 1254371
Show file tree

Hide file tree

Showing 6 changed files with 168 additions and 5 deletions.
diff --git a/src/App.vue b/src/App.vue
@@ -114,6 +114,7 @@
           title="Default"
           :render-controls="displayBuilder"
           @change="updateConfig"
+          :screen-type="displayType"
         >
           <default-loading-spinner />
         </vue-form-builder>
@@ -448,6 +449,7 @@ export default {
       },
       showTemplatesPanel: false,
       sharedTemplatesData: null,
+      displayType: 'form'
     };
   },
   computed: {

diff --git a/tests/e2e/fixtures/displayScreenNext.json b/tests/e2e/fixtures/displayScreenNext.json
diff --git a/tests/e2e/specs/ClipboardDragPaste.spec.js b/tests/e2e/specs/ClipboardDragPaste.spec.js
@@ -84,7 +84,7 @@ describe("Clipboard Drag and Paste", () => {
     // Step 3: Verify the multicolumn element with TextArea exists (2 columns)
     cy.get('[data-cy="screen-element-container"]').should('have.length', 1);
     cy.get('[data-cy="screen-element-container"] .column-draggable').should('have.length', 2);
-    cy.get('[data-cy="screen-element-container"] .column-draggable').eq(1).find('textarea').should('exist');
+    cy.get('[data-cy="screen-element-container"] .column-draggable').eq(0).find('textarea').should('exist');
 
     // Step 4: Click on the screen element container to activate it
     cy.get('[data-cy="screen-element-container"]').click();
@@ -262,4 +262,139 @@ describe("Clipboard Drag and Paste", () => {
     cy.get('[data-cy="screen-element-container"]').should('have.length', 1);
     cy.get('[data-cy="screen-element-container"]').eq(0).find('input').should('exist');
   });
+
+  it("Drags and drops clipboard items into a multiColumn and verifies input count", () => {
+    // Helper function to open an accordion by label
+    function openAccordion(label) {
+        cy.openAcordeonByLabel(label);
+    }
+
+    // Helper function to drag and add controls inside a table
+    function addControlToTable(position, control) {
+        addControlInsideTable(position, control);
+    }
+
+    // Step 1: Visit the homepage and clear storage
+    cy.visit("/");
+    cy.clearLocalStorage();
+
+    // Step 2: Open necessary accordions
+    ["Content Fields", "Clipboard", "Input Fields"].forEach(openAccordion);
+
+    // Step 3: Add Loop and Clipboard controls to the screen's drop zone
+    cy.get("[data-cy=controls-FormMultiColumn]").drag("[data-cy=screen-drop-zone]", { position: "bottom" });
+    addControlToTable(1, nodeControls.formInput);
+    addControlToTable(2, nodeControls.formTextArea);
+
+    // Step 4: Select and copy the screen element to the clipboard
+    cy.get('[data-cy="screen-element-container"]').click();
+    cy.get('[data-cy="addToClipboard"]').should("be.visible").click();
+    cy.get('[data-cy="addToClipboard"]').should("not.exist");
+
+    // Step 5: Create a new page and name it
+    cy.get("[data-test=page-dropdown]").click();
+    cy.get("[data-test=add-page]").click({ force: true });
+    cy.get("[data-cy=add-page-name]").clear().type("Page_2");
+    cy.get("[data-cy=add-page-modal] button.btn").eq(1).click();
+    cy.wait(300);
+
+    // Step 6: Add another Loop control on the new page and place Clipboard controls inside it
+    cy.get("[data-cy=controls-FormMultiColumn]").drag("[data-cy=screen-drop-zone]", { position: "bottom" });
+    addControlToTable(1, nodeControls.formMultiColumn);
+
+    // Step 7: Drag Clipboard control into each `column-draggable` container
+    cy.get("[data-cy=controls-Clipboard]").then((clipboard) => {
+        cy.get("div.column-draggable.col-sm-6").each((target) => {
+            cy.wrap(clipboard).drag(target);
+        });
+    });
+
+    // Step 8: Verify input counts in each screen element container
+    cy.get('[data-cy=screen-element-container]').each(($container, index) => {
+        cy.wrap($container).should('be.visible');
+        cy.wrap($container).find('input').then($inputs => {
+            const inputCount = $inputs.length;
+            cy.log(`Container ${index + 1} has ${inputCount} input(s)`);
+            expect(inputCount).to.equal(3);
+        });
+    });
+    // Step 9: Verify textarea counts in each screen element container
+    cy.get('[data-cy=screen-element-container]').each(($container, index) => {
+      cy.wrap($container).should('be.visible');
+      cy.wrap($container).find('textarea').then($inputs => {
+          const inputCount = $inputs.length;
+          cy.log(`Container ${index + 1} has ${inputCount} input(s)`);
+          expect(inputCount).to.equal(3);
+      });
+    });
+  });
+
+  it("Verifies dragging and dropping clipboard items into a Loop creates the expected input and textarea elements", () => {
+    // Helper function to open an accordion by label
+    function openAccordion(label) {
+        cy.openAcordeonByLabel(label);
+    }
+
+    // Helper function to drag and add controls inside a table
+    function addControlToTable(position, control) {
+        addControlInsideTable(position, control);
+    }
+
+    // Step 1: Visit the homepage and clear any existing local storage
+    cy.visit("/");
+    cy.clearLocalStorage();
+
+    // Step 2: Open necessary accordions for access to controls
+    ["Content Fields", "Clipboard", "Input Fields"].forEach(openAccordion);
+
+    // Step 3: Drag a Loop control and multiple input/textarea controls into the screen's drop zone
+    cy.get("[data-cy=controls-FormMultiColumn]").drag("[data-cy=screen-drop-zone]", { position: "bottom" });
+    addControlToTable(1, nodeControls.formInput); // First Input
+    addControlToTable(1, nodeControls.formInput); // Second Input
+    addControlToTable(2, nodeControls.formTextArea); // First TextArea
+    addControlToTable(2, nodeControls.formTextArea); // Second TextArea
+
+    // Step 4: Select the screen element container and copy it to the clipboard
+    cy.get('[data-cy="screen-element-container"]').click();
+    cy.get('[data-cy="addToClipboard"]').should("be.visible").click();
+    cy.get('[data-cy="addToClipboard"]').should("not.exist");
+
+    // Step 5: Create a new page named "Page_2"
+    cy.get("[data-test=page-dropdown]").click();
+    cy.get("[data-test=add-page]").click({ force: true });
+    cy.get("[data-cy=add-page-name]").clear().type("Page_2");
+    cy.get("[data-cy=add-page-modal] button.btn").eq(1).click();
+    cy.wait(300); // Wait for the new page to be created
+
+    // Step 6: Drag another Loop control onto the new page
+    cy.get("[data-cy=controls-FormLoop]").drag("[data-cy=screen-drop-zone]", { position: "bottom" });
+
+    // Step 7: Drag Clipboard controls into each column-draggable container within the Loop
+    cy.get("[data-cy=controls-Clipboard]").then((clipboard) => {
+        cy.get("div.column-draggable").each((target) => {
+            cy.wrap(clipboard).drag(target);
+        });
+    });
+
+    // Step 8: Verify that each screen element container has the expected number of input elements
+    cy.get('[data-cy=screen-element-container]').each(($container, index) => {
+        cy.wrap($container).should('be.visible');
+        cy.wrap($container).find('input').then($inputs => {
+            const inputCount = $inputs.length;
+            cy.log(`Container ${index + 1} has ${inputCount} input(s)`);
+            expect(inputCount).to.equal(2); // Expecting 2 input elements
+        });
+    });
+
+    // Step 9: Verify that each screen element container has the expected number of textarea elements
+    cy.get('[data-cy=screen-element-container]').each(($container, index) => {
+        cy.wrap($container).should('be.visible');
+        cy.wrap($container).find('textarea').then($textareas => {
+            const textareaCount = $textareas.length;
+            cy.log(`Container ${index + 1} has ${textareaCount} textarea(s)`);
+            expect(textareaCount).to.equal(2); // Expecting 2 textarea elements
+        });
+    });
+  });
+
 });
diff --git a/tests/e2e/specs/ClipboardFormTypeDisplay.spec.js b/tests/e2e/specs/ClipboardFormTypeDisplay.spec.js
@@ -0,0 +1,22 @@
+import ClipboardManager from "../../../src/store/modules/ClipboardManager";
+
+describe("Clipboard Form Type Display", () => {
+  before(() => {
+    // Visit the home page and load the JSON data before the tests
+    cy.visit('/');
+    cy.loadFromJson('displayScreenNext.json', 0, 'display');
+  });
+
+  const checkAddToClipboardNotExist = (childIndex) => {
+    cy.get(`:nth-child(${childIndex}) > [data-cy="screen-element-container"]`)
+      .click({ force: true });
+    cy.get('[data-cy="addToClipboard"]').should("not.exist");
+  };
+
+  it("Verify add clipboard button does not exist in display mode", () => {
+    // Verify that the button does not exist for specific child elements
+    checkAddToClipboardNotExist(2);
+    checkAddToClipboardNotExist(3);
+    checkAddToClipboardNotExist(2); // This seems redundant; if necessary, ensure it's intentional
+  });
+});
diff --git a/tests/e2e/support/commands.js b/tests/e2e/support/commands.js
@@ -140,7 +140,7 @@ Cypress.Commands.add("assertComponentValueAsJson", (selector, expectedData) => {
  * @function
  * @param {String} filename - The screen filename to load
  */
-Cypress.Commands.add("loadFromJson", (filename, index) => {
+Cypress.Commands.add("loadFromJson", (filename, index, mode= 'form') => {
   return cy.readFile(`tests/e2e/fixtures/${filename}`).then((content) => {
     cy.window().then((win) => {
       win.exampleScreens = content.screens;
@@ -155,6 +155,11 @@ Cypress.Commands.add("loadFromJson", (filename, index) => {
         "$refs.builder.config",
         screen.config
       );
+      cy.setVueComponentProperty(
+        "#screen-builder-container",
+        "$refs.builder.$parent.displayType",
+        mode
+      );
       cy.setVueComponentProperty(
         "#screen-builder-container",
         "computed",

diff --git a/tests/e2e/support/utils.js b/tests/e2e/support/utils.js
@@ -59,9 +59,7 @@ export function addControlInsideTable(numColumn, control) {
       "numColumn",
       numColumn
     );
-  cy.get(control).drag(
-    '[data-cy=screen-element-container] >* div[class^= "column-draggable"]:nth-child(2)'
-  );
+  cy.get(control).drag(column);
   cy.get("[data-cy=screen-element-container]").last().click();
 }