diff --git a/src/components/vue-form-builder.vue b/src/components/vue-form-builder.vue index 538881cc0..f5868058e 100644 --- a/src/components/vue-form-builder.vue +++ b/src/components/vue-form-builder.vue @@ -711,7 +711,7 @@ export default { clipboardItems() { return this.$store.getters["clipboardModule/clipboardItems"]; }, - + sortedPages() { return [...this.config].sort((a, b) => a.order - b.order); }, @@ -1189,6 +1189,9 @@ export default { }); }, updateState() { + if (this.selected) { + this.checkAndRefreshUuids(this.selected, this.clipboardPage.items); + } // paste the clipboard items into the current page this.replaceClipboardContent(this.config); this.$store.dispatch("undoRedoModule/pushState", { @@ -1523,6 +1526,26 @@ export default { this.updateState(); this.inspect(clone); }, + /** + * Compares a config with an array and updates UUIDs if different. + * + * @param {Object} selected - The config to compare. + * @param {Array} clipboardItems - Array of configs to check. + * @returns {Array} - Updated array with new UUIDs. + */ + checkAndRefreshUuids(selected, clipboardItems) { + return clipboardItems.map(config => { + // Use lodash to compare the config objects + const isEqual = _.isEqual(selected.config, config.config); + + // If they are not equal, update the UUID + if (!isEqual) { + config.uuid = this.generateUUID(); // Update UUID + } + + return config; + }); + }, } }; diff --git a/tests/e2e/specs/TCP4-4447VerifyUpdateConfigurationClipboard.spec.js b/tests/e2e/specs/TCP4-4447VerifyUpdateConfigurationClipboard.spec.js new file mode 100644 index 000000000..2700ee9f0 --- /dev/null +++ b/tests/e2e/specs/TCP4-4447VerifyUpdateConfigurationClipboard.spec.js @@ -0,0 +1,86 @@ +describe("TCP4-4474 Verify that the configuration made in line controls", () => { + beforeEach(() => { + // Step 1: Navigate to the homepage, show validation, and clear local storage + cy.visit("/"); // Visit the application homepage + cy.showValidationOnLoad(); // Show validation rules on page load + cy.clearLocalStorage(); // Clear local storage before each test to start fresh + }); + + const verifyClipboardSync = (elementType, name, label) => { + // Step 1: Clear local storage and re-visit the homepage + cy.clearLocalStorage(); + cy.visit("/"); + + // Step 2: Open the "Input Fields" accordion + cy.openAcordeonByLabel("Input Fields"); + + // Step 3: Drag the specified control to the screen drop zone + cy.get(`[data-cy=controls-${elementType}]`).drag("[data-cy=screen-drop-zone]", { position: "bottom" }); + + // Step 4: Interact with the first screen element to open the inspector + cy.get(':nth-child(1) > [data-cy="screen-element-container"]').click({ force: true }); + + // Step 5: Ensure the "Add to Clipboard" button is visible + cy.get('[data-cy="addToClipboard"]').should("be.visible"); + + // Step 6: Fill in the inspector fields + cy.get("[data-cy=inspector-name]").clear().type(name); + cy.get("[data-cy=inspector-label]").clear().type(label); + + // Step 7: Set validation rules in the inspector + cy.get('[data-cy="inspector-validation"]') + .find('input[type="checkbox"]') + .should('be.visible') + .check() + .should('be.checked'); + + // Step 8: Click the "Add to Clipboard" button + cy.get('[data-cy="addToClipboard"]').click(); + + // Step 9: Open the clipboard and verify the added checkbox + cy.get("[data-test=page-dropdown]").click(); + cy.get("[data-test=clipboard]").should("exist").click({ force: true }); + + // Step 10: Verify the inspector fields after selecting the copied element + cy.get(':nth-child(1) > [data-cy="screen-element-container"]').click({ force: true }); + cy.get("[data-cy=inspector-name]").should('have.value', name); // Verify the name + cy.get("[data-cy=inspector-label]").should('have.value', label); // Verify the label + cy.get('[data-cy="inspector-validation"]') + .find('input[type="checkbox"]') + .should('be.checked'); // Verify validation checkbox + + // Step 11: Navigate back to the original page and update the element name + cy.get("[data-test=page-dropdown]").click(); + cy.get('[data-cy="page-0"]').should("exist").click({ force: true }); + cy.get(':nth-child(1) > [data-cy="screen-element-container"]').click({ force: true }); + cy.get("[data-cy=inspector-name]").clear().type(`${name}Updated`).blur(); + + // Step 12: Ensure the "Add to Clipboard" button is still visible after update + cy.get('[data-cy="addToClipboard"]').should("exist"); + }; + + it("Verify FormInput configuration updates sync with clipboard", () => { + verifyClipboardSync("FormInput", "inputTest", "Input Test"); + }); + + it("Verify FormCheckbox configuration updates sync with clipboard", () => { + verifyClipboardSync("FormCheckbox", "checkboxTest", "Checkbox Test"); + + // Additional steps specific to FormCheckbox + cy.get('[data-cy="inspector-initiallyChecked"]').check().should('be.checked'); // Check Initially Checked + cy.get('[data-cy="inspector-disabled"]').check().should('be.checked'); // Check Disabled + }); + + it("Verify FormSelectList configuration updates sync with clipboard", () => { + verifyClipboardSync("FormSelectList", "selectTest", "Select Test"); + }); + + it("Verify FormTextArea configuration updates sync with clipboard", () => { + verifyClipboardSync("FormTextArea", "textTest", "Text Test"); + }); + + + it("Verify FormDatePicker configuration updates sync with clipboard", () => { + verifyClipboardSync("FormDatePicker", "dateTest", "Date Test"); + }); +});