diff --git a/src/components/vue-form-builder.vue b/src/components/vue-form-builder.vue index 02f7cd400..f0b0c56c6 100644 --- a/src/components/vue-form-builder.vue +++ b/src/components/vue-form-builder.vue @@ -127,6 +127,7 @@ v-if="isClipboardPage(tabPage)" variant="link" @click="clearClipboard" + class="no-text-transform" > {{ $t('Clear All') }} @@ -1745,4 +1746,7 @@ $side-bar-font-size: 0.875rem; cursor: not-allowed; /* Cambia el cursor cuando se pasa por encima */ pointer-events: all; /* Permite que el pseudo-elemento reciba eventos del ratón */ } +.no-text-transform { + text-transform: none; +} diff --git a/src/mixins/Clipboard.js b/src/mixins/Clipboard.js index 077729ff2..2b2f3ca63 100644 --- a/src/mixins/Clipboard.js +++ b/src/mixins/Clipboard.js @@ -144,6 +144,7 @@ export default { } ); if (confirm) { + this.clipboardPage.items = []; this.$store.dispatch("clipboardModule/clearClipboard"); this.$root.$emit('update-clipboard'); } diff --git a/tests/e2e/specs/ClipboardTabClearAll.spec.js b/tests/e2e/specs/ClipboardTabClearAll.spec.js new file mode 100644 index 000000000..561d1ac0b --- /dev/null +++ b/tests/e2e/specs/ClipboardTabClearAll.spec.js @@ -0,0 +1,42 @@ +describe("Clipboard Page and Clear All Functionality", () => { + + it("should remove all controls in the clipboard page when 'Clear All' is confirmed", () => { + // Clear local storage to ensure a clean test environment + cy.clearLocalStorage(); + + // Visit the home page + cy.visit("/"); + + // Open the 'Input Fields' accordion section + cy.openAcordeonByLabel("Input Fields"); + + // Navigate to the clipboard page + cy.get("[data-test=page-dropdown]").click(); + cy.get("[data-test=clipboard]").should("exist").click({ force: true }); + + // Step 1: Dragging controls to the screen drop zone in the clipboard + cy.get("[data-cy=controls-FormInput]").drag("[data-cy=editor-content]", { position: "bottom" }); + cy.get("[data-cy=controls-FormSelectList]").drag("[data-cy=screen-element-container]", { position: "top" }); + cy.get("[data-cy=controls-FormButton]").drag("[data-cy=screen-element-container]", { position: "top" }); + cy.get("[data-cy=controls-FormTextArea]").drag("[data-cy=screen-element-container]", { position: "top" }); + cy.get("[data-cy=controls-FormDatePicker]").drag("[data-cy=screen-element-container]", { position: "top" }); + cy.get("[data-cy=controls-FormCheckbox]").drag("[data-cy=screen-element-container]", { position: "top" }); + + // Verify that all controls have been successfully added + cy.get('[data-cy="screen-element-container"]').children().should('have.length', 6); + + // Step 2: Attempt to clear all controls but cancel the action + cy.contains('button', 'Clear All').click(); + cy.contains('button', 'Cancel').click(); + + // Ensure controls are still present after canceling + cy.get('[data-cy="screen-element-container"]').children().should('have.length', 6); + + // Step 3: Confirm clearing all controls + cy.contains('button', 'Clear All').click(); + cy.contains('button', 'Confirm').click(); + + // Validate that all controls have been removed + cy.get('[data-cy="editor-content"]').children().should('have.length', 0); + }); +});