From 6f1e11ebca5ebbe642903d5da4e29ddafa42b787 Mon Sep 17 00:00:00 2001 From: Midhun Kumar E Date: Wed, 10 May 2023 18:36:42 +0530 Subject: [PATCH] Added automation for CSA (#6342) * Add CSA for table * Add CSA for button * Add CSA for textinput * Remove it.only * Add CSA for text * Add CSA for modal * Add CSA for multiselect * Add CSA fix for text input --- .../e2e/editor/widget/buttonHappyPath.cy.js | 63 +++++++++++++++ .../e2e/editor/widget/modalHappyPath.cy.js | 27 ++++++- .../editor/widget/multiselectHappyPath.cy.js | 47 ++++++++++++ .../e2e/editor/widget/tableRegression.cy.js | 61 ++++++++++++++- .../e2e/editor/widget/textHappyPath.cy.js | 69 +++++++++++++++++ .../editor/widget/textInputHappyPath.cy.js | 76 +++++++++++++++++++ cypress-tests/cypress/support/commands.js | 10 ++- cypress-tests/cypress/support/utils/events.js | 18 +++-- 8 files changed, 361 insertions(+), 10 deletions(-) create mode 100644 cypress-tests/cypress/e2e/editor/widget/textHappyPath.cy.js diff --git a/cypress-tests/cypress/e2e/editor/widget/buttonHappyPath.cy.js b/cypress-tests/cypress/e2e/editor/widget/buttonHappyPath.cy.js index 75362db4f0..024ae5c1b9 100644 --- a/cypress-tests/cypress/e2e/editor/widget/buttonHappyPath.cy.js +++ b/cypress-tests/cypress/e2e/editor/widget/buttonHappyPath.cy.js @@ -25,6 +25,11 @@ import { verifyPropertiesGeneralAccordion, verifyStylesGeneralAccordion, } from "Support/utils/commonWidget"; +import { + selectCSA, + selectEvent, + addSupportCSAData, +} from "Support/utils/events"; describe("Editor- Test Button widget", () => { beforeEach(() => { @@ -335,4 +340,62 @@ describe("Editor- Test Button widget", () => { cy.get(commonSelectors.viewerPageLogo).click(); cy.deleteApp(data.appName); }); + + it("Should verify csa", () => { + // cy.dragAndDropWidget(buttonText.defaultWidgetText); + selectEvent("On click", "Show alert"); + + cy.get('[data-cy="real-canvas"]').click("topRight", { force: true }); + cy.dragAndDropWidget("Text input", 500, 50); + selectEvent("On change", "Control Component"); + selectCSA("button1", "Set text", "500"); + addSupportCSAData("Text", "{{components.textinput1.value"); + + cy.get('[data-cy="real-canvas"]').click("topRight", { force: true }); + cy.dragAndDropWidget(buttonText.defaultWidgetText, 500, 100); + selectEvent("On click", "Control Component"); + selectCSA("button1", "Click"); + + cy.get('[data-cy="real-canvas"]').click("topRight", { force: true }); + cy.dragAndDropWidget(buttonText.defaultWidgetText, 500, 150); + selectEvent("On click", "Control Component"); + selectCSA("button1", "Disable"); + cy.get('[data-cy="Value-toggle-button"]').click(); + + cy.get('[data-cy="real-canvas"]').click("topRight", { force: true }); + cy.dragAndDropWidget(buttonText.defaultWidgetText, 500, 200); + selectEvent("On click", "Control Component"); + selectCSA("button1", "Visibility"); + + cy.get('[data-cy="real-canvas"]').click("topRight", { force: true }); + cy.dragAndDropWidget(buttonText.defaultWidgetText, 500, 250); + selectEvent("On click", "Control Component"); + selectCSA("button1", "Loading"); + cy.get('[data-cy="Value-toggle-button"]').click(); + + cy.get(commonWidgetSelector.draggableWidget("textinput1")).type("testBtn"); + cy.wait(500); + cy.get(commonWidgetSelector.draggableWidget("button1")).should( + "have.text", + "testBtn" + ); + + cy.get(commonWidgetSelector.draggableWidget("button2")).click(); + cy.verifyToastMessage(commonSelectors.toastMessage, "Hello world!"); + + cy.get(commonWidgetSelector.draggableWidget("button5")).click(); + cy.get( + commonWidgetSelector.draggableWidget(buttonText.defaultWidgetName) + ).should("have.class", "btn-loading"); + + cy.get(commonWidgetSelector.draggableWidget("button3")).click(); + cy.get( + commonWidgetSelector.draggableWidget(buttonText.defaultWidgetName) + ).should("have.attr", "disabled"); + + cy.get(commonWidgetSelector.draggableWidget("button4")).click(); + cy.get( + commonWidgetSelector.draggableWidget(buttonText.defaultWidgetName) + ).should("not.be.visible"); + }); }); diff --git a/cypress-tests/cypress/e2e/editor/widget/modalHappyPath.cy.js b/cypress-tests/cypress/e2e/editor/widget/modalHappyPath.cy.js index 6f89b9a3e4..64d650c3bf 100644 --- a/cypress-tests/cypress/e2e/editor/widget/modalHappyPath.cy.js +++ b/cypress-tests/cypress/e2e/editor/widget/modalHappyPath.cy.js @@ -4,7 +4,6 @@ import { fake } from "Fixtures/fake"; import { commonWidgetText } from "Texts/common"; import { verifyControlComponentAction } from "Support/utils/button"; -import { selectEvent } from "Support/utils/events"; import { launchModal, closeModal, @@ -34,6 +33,11 @@ import { verifyPropertiesGeneralAccordion, verifyStylesGeneralAccordion, } from "Support/utils/commonWidget"; +import { + selectCSA, + selectEvent, + addSupportCSAData, +} from "Support/utils/events"; describe("Modal", () => { beforeEach(() => { @@ -420,4 +424,25 @@ describe("Modal", () => { launchModal("modal1"); cy.notVisible('[data-cy="modal-close-button"]'); }); + + it("should verify csa", () => { + cy.get('[data-cy="real-canvas"]').click("topRight", { force: true }); + cy.dragAndDropWidget(buttonText.defaultWidgetText, 500, 200); + selectEvent("On click", "Control Component"); + selectCSA("modal1", "open"); + + cy.get(commonWidgetSelector.draggableWidget("button1")).click(); + cy.get('[data-cy="modal-title"]').verifyVisibleElement( + "have.text", + "This title can be changed" + ); + + cy.get(".close-svg > path").click(); + cy.dragAndDropWidget("Button", 500, 300, "Button", "[id*=canvas]:eq(2)"); + selectEvent("On click", "Control Component"); + selectCSA("modal1", "close"); + // cy.realPress("Escape"); + cy.get(commonWidgetSelector.draggableWidget("button2")).click(); + cy.notVisible('[data-cy="modal-close-button"]'); + }); }); diff --git a/cypress-tests/cypress/e2e/editor/widget/multiselectHappyPath.cy.js b/cypress-tests/cypress/e2e/editor/widget/multiselectHappyPath.cy.js index 9615a8fe1d..7bc007740c 100644 --- a/cypress-tests/cypress/e2e/editor/widget/multiselectHappyPath.cy.js +++ b/cypress-tests/cypress/e2e/editor/widget/multiselectHappyPath.cy.js @@ -32,6 +32,12 @@ import { verifyWidgetText, } from "Support/utils/commonWidget"; +import { + selectCSA, + selectEvent, + addSupportCSAData, +} from "Support/utils/events"; + describe("Multiselect widget", () => { beforeEach(() => { cy.appUILogin(); @@ -342,4 +348,45 @@ describe("Multiselect widget", () => { verifyBoxShadowCss(data.widgetName, data.colour, data.boxShadowParam); }); + + it("should verify CSA", () => { + cy.get('[data-cy="real-canvas"]').click("topRight", { force: true }); + cy.dragAndDropWidget("Number input", 600, 50); + selectEvent("On change", "Control Component"); + selectCSA("multiselect1", "Select Option", "1000"); + addSupportCSAData("Option", "{{components.numberinput1.value"); + + cy.get('[data-cy="real-canvas"]').click("topRight", { force: true }); + cy.dragAndDropWidget("Number input", 600, 150); + selectEvent("On change", "Control Component"); + selectCSA("multiselect1", "Deselect Option", "1000"); + addSupportCSAData("Option", "{{components.numberinput2.value"); + + cy.get('[data-cy="real-canvas"]').click("topRight", { force: true }); + cy.dragAndDropWidget("Button", 600, 250); + selectEvent("On click", "Control Component"); + selectCSA("Multiselect1", "Clear selections"); + cy.get('[data-cy="real-canvas"]').click("topRight", { force: true }); + cy.waitForAutoSave(); + + cy.reload(); + cy.wait(3000); + + verifyMultipleComponentValuesFromInspector("multiselect1", [2, 3]); + cy.get(commonWidgetSelector.draggableWidget("numberinput1")) + .clear() + .type("1"); + verifyMultiselectHeader( + "multiselect1", + multiselectText.labelAllItemsSelected + ); + cy.get(commonWidgetSelector.draggableWidget("numberinput2")) + .clear() + .type("3"); + verifyMultipleComponentValuesFromInspector("multiselect1", [2, 1]); + + cy.get(commonWidgetSelector.draggableWidget("button1")).click(); + + verifyMultiselectHeader("multiselect1", "Select..."); + }); }); diff --git a/cypress-tests/cypress/e2e/editor/widget/tableRegression.cy.js b/cypress-tests/cypress/e2e/editor/widget/tableRegression.cy.js index ec5d8ce99c..892c6489f0 100644 --- a/cypress-tests/cypress/e2e/editor/widget/tableRegression.cy.js +++ b/cypress-tests/cypress/e2e/editor/widget/tableRegression.cy.js @@ -23,6 +23,11 @@ import { dataCsvAssertionHelper, addFilter, } from "Support/utils/table"; +import { + selectCSA, + selectEvent, + addSupportCSAData, +} from "Support/utils/events"; import { openAccordion, verifyAndModifyParameter, @@ -937,5 +942,59 @@ describe("Table", () => { ]); }); - it("should verify table preview", () => {}); + it("should verify table CSA", () => { + cy.get('[data-cy="column-id"]').click(); + cy.get('[data-cy="make-editable-toggle-button"]').click(); + + cy.get( + '[data-cy="number-of-rows-per-page-input-field"]' + ).clearAndTypeOnCodeMirror("{{2"); + verifyAndModifyToggleFx("Highlight selected row", "{{false}}", true); + + cy.get('[data-cy="real-canvas"]').click("topRight"); + cy.dragAndDropWidget("Button", 870, 50); + selectEvent("On click", "Control Component"); + selectCSA("table1", "Set page"); + addSupportCSAData("Page", "{{2"); + + cy.get('[data-cy="real-canvas"]').click("topRight"); + cy.dragAndDropWidget("Button", 870, 100); + selectEvent("On click", "Control Component"); + selectCSA("table1", "Select row"); + addSupportCSAData("Key", "name"); + addSupportCSAData("Value", "Lisa"); + + cy.get('[data-cy="real-canvas"]').click("topRight"); + cy.dragAndDropWidget("Button", 870, 150); + selectEvent("On click", "Control Component"); + selectCSA("table1", "Deselect row"); + + cy.get('[data-cy="real-canvas"]').click("topRight"); + cy.dragAndDropWidget("Button", 870, 200); + selectEvent("On click", "Control Component"); + selectCSA("table1", "Discard Changes"); + + cy.get(commonWidgetSelector.draggableWidget("button2")).click(); + cy.get('[role="row"]').eq(2).should("have.class", "selected"); + + cy.get(commonWidgetSelector.draggableWidget("button3")).click(); + cy.get('[role="row"]').eq(2).should("not.have.class", "selected"); + + cy.get(commonWidgetSelector.draggableWidget("button1")).click(); + cy.get('[data-cy*="-cell-1"] ').eq(1).should("have.text", "Jon"); + cy.get('[data-cy="page-index-details"]').should("have.text", "2 of 2"); + + cy.get('[data-cy="3-cell-0"]') + .click() + .find("input") + .clear() + .type("test123"); + + cy.get('[data-cy*="-cell-0"]') + .eq(0) + .find("input") + .should("have.value", "test123"); + cy.get(commonWidgetSelector.draggableWidget("button4")).click(); + cy.get('[data-cy*="-cell-0"]').eq(0).should("have.text", "3"); + }); }); diff --git a/cypress-tests/cypress/e2e/editor/widget/textHappyPath.cy.js b/cypress-tests/cypress/e2e/editor/widget/textHappyPath.cy.js new file mode 100644 index 0000000000..ab37ce2300 --- /dev/null +++ b/cypress-tests/cypress/e2e/editor/widget/textHappyPath.cy.js @@ -0,0 +1,69 @@ +import { fake } from "Fixtures/fake"; +import { textInputText } from "Texts/textInput"; +import { commonWidgetText, widgetValue, customValidation } from "Texts/common"; +import { commonSelectors, commonWidgetSelector } from "Selectors/common"; +import { buttonText } from "Texts/button"; +import { + verifyControlComponentAction, + randomString, +} from "Support/utils/textInput"; +import { + openAccordion, + verifyAndModifyParameter, + openEditorSidebar, + verifyAndModifyToggleFx, + addDefaultEventHandler, + verifyComponentValueFromInspector, + selectColourFromColourPicker, + verifyBoxShadowCss, + verifyLayout, + verifyTooltip, + editAndVerifyWidgetName, + verifyPropertiesGeneralAccordion, + verifyStylesGeneralAccordion, + randomNumber, + closeAccordions, +} from "Support/utils/commonWidget"; +import { + selectCSA, + selectEvent, + addSupportCSAData, +} from "Support/utils/events"; + +describe("Text Input", () => { + beforeEach(() => { + cy.appUILogin(); + cy.createApp(); + cy.dragAndDropWidget("Text"); + }); + + it("should verify CSA", () => { + const data = {}; + data.customText = randomString(12); + + cy.get('[data-cy="real-canvas"]').click("topRight", { force: true }); + cy.dragAndDropWidget(buttonText.defaultWidgetText, 500, 200); + selectEvent("On click", "Control Component"); + selectCSA("text1", "Visibility"); + + cy.get('[data-cy="real-canvas"]').click("topRight", { force: true }); + cy.dragAndDropWidget("Text input", 500, 50); + selectEvent("On change", "Control Component"); + selectCSA("text1", "Set text", "500"); + addSupportCSAData("Text", "{{components.textinput1.value"); + + cy.clearAndType( + commonWidgetSelector.draggableWidget("textinput1"), + data.customText + ); + cy.get(commonWidgetSelector.draggableWidget("text1")).verifyVisibleElement( + "have.text", + data.customText + ); + + cy.get(commonWidgetSelector.draggableWidget("button1")).click(); + cy.get(commonWidgetSelector.draggableWidget("textinput1")).should( + "not.be.visible" + ); + }); +}); diff --git a/cypress-tests/cypress/e2e/editor/widget/textInputHappyPath.cy.js b/cypress-tests/cypress/e2e/editor/widget/textInputHappyPath.cy.js index af898e6399..1a4f2bfb9d 100644 --- a/cypress-tests/cypress/e2e/editor/widget/textInputHappyPath.cy.js +++ b/cypress-tests/cypress/e2e/editor/widget/textInputHappyPath.cy.js @@ -24,6 +24,11 @@ import { randomNumber, closeAccordions, } from "Support/utils/commonWidget"; +import { + selectCSA, + selectEvent, + addSupportCSAData, +} from "Support/utils/events"; describe("Text Input", () => { beforeEach(() => { @@ -400,4 +405,75 @@ describe("Text Input", () => { data.tooltipText ); }); + + it("should verify CSA", () => { + const data = {}; + data.customText = randomString(12); + + cy.get('[data-cy="real-canvas"]').click("topRight", { force: true }); + cy.dragAndDropWidget(buttonText.defaultWidgetText, 500, 200); + selectEvent("On click", "Control Component"); + selectCSA("textinput1", "Visibility"); + + cy.get('[data-cy="real-canvas"]').click("topRight", { force: true }); + cy.dragAndDropWidget("Text input", 500, 50); + selectEvent("On change", "Control Component"); + selectCSA("textinput1", "Set text", "500"); + addSupportCSAData("text", "{{components.textinput2.value"); + + cy.get('[data-cy="real-canvas"]').click("topRight", { force: true }); + cy.dragAndDropWidget(buttonText.defaultWidgetText, 500, 275); + selectEvent("On click", "Control Component"); + selectCSA("textinput1", "Clear", "500"); + + cy.get('[data-cy="real-canvas"]').click("topRight", { force: true }); + cy.dragAndDropWidget(buttonText.defaultWidgetText, 500, 350); + selectEvent("On click", "Control Component"); + selectCSA("textinput1", "Disable", "500"); + cy.get('[data-cy="Value-toggle-button"]').click(); + + cy.get('[data-cy="real-canvas"]').click("topRight", { force: true }); + cy.dragAndDropWidget(buttonText.defaultWidgetText, 500, 425); + selectEvent("On click", "Control Component"); + selectCSA("textinput1", "Set blur", "500"); + + cy.get('[data-cy="real-canvas"]').click("topRight", { force: true }); + cy.dragAndDropWidget(buttonText.defaultWidgetText, 500, 500); + selectEvent("On click", "Control Component"); + selectCSA("textinput1", "Set focus"); + + cy.clearAndType( + commonWidgetSelector.draggableWidget("textinput2"), + data.customText + ); + cy.get( + commonWidgetSelector.draggableWidget("textinput1") + ).verifyVisibleElement("have.value", data.customText); + + cy.get(commonWidgetSelector.draggableWidget("button2")).click(); + cy.get( + commonWidgetSelector.draggableWidget("textinput1") + ).verifyVisibleElement("have.value", ""); + + cy.get(commonWidgetSelector.draggableWidget("button5")).click(); + cy.realType(data.customText); + cy.get( + commonWidgetSelector.draggableWidget("textinput1") + ).verifyVisibleElement("have.value", data.customText); + cy.get(commonWidgetSelector.draggableWidget("button4")).click(); + cy.realType("not working"); + cy.get( + commonWidgetSelector.draggableWidget("textinput1") + ).verifyVisibleElement("have.value", data.customText); + + cy.get(commonWidgetSelector.draggableWidget("button3")).click(); + cy.get(commonWidgetSelector.draggableWidget("textinput1")) + .parent() + .should("have.attr", "data-disabled", "true"); + + cy.get(commonWidgetSelector.draggableWidget("button1")).click(); + cy.get(commonWidgetSelector.draggableWidget("textinput1")).should( + "not.be.visible" + ); + }); }); diff --git a/cypress-tests/cypress/support/commands.js b/cypress-tests/cypress/support/commands.js index 66c6c6fa08..3bcb518aec 100644 --- a/cypress-tests/cypress/support/commands.js +++ b/cypress-tests/cypress/support/commands.js @@ -111,7 +111,13 @@ Cypress.Commands.add("createApp", (appName) => { Cypress.Commands.add( "dragAndDropWidget", - (widgetName, positionX = 190, positionY = 80, widgetName2 = widgetName) => { + ( + widgetName, + positionX = 190, + positionY = 80, + widgetName2 = widgetName, + canvas = commonSelectors.canvas + ) => { const dataTransfer = new DataTransfer(); cy.clearAndType(commonSelectors.searchField, widgetName); @@ -120,7 +126,7 @@ Cypress.Commands.add( { dataTransfer }, { force: true } ); - cy.get(commonSelectors.canvas).trigger("drop", positionX, positionY, { + cy.get(canvas).trigger("drop", positionX, positionY, { dataTransfer, force: true, }); diff --git a/cypress-tests/cypress/support/utils/events.js b/cypress-tests/cypress/support/utils/events.js index 4eb537a327..b43b27266a 100644 --- a/cypress-tests/cypress/support/utils/events.js +++ b/cypress-tests/cypress/support/utils/events.js @@ -1,6 +1,6 @@ export const selectEvent = (event, action) => { - cy.get('[data-cy="add-event-handler"]').click() - cy.get('[data-cy="event-handler"]').eq(0).click() + cy.get('[data-cy="add-event-handler"]').click(); + cy.get('[data-cy="event-handler"]').eq(0).click(); cy.get('[data-cy="event-selection"]') .click() .find("input") @@ -14,15 +14,21 @@ export const selectEvent = (event, action) => { export const selectCSA = ( component, componentAction, - dbounce = `{selectAll}{backspace}` + debounce = `{selectAll}{backspace}` ) => { cy.get('[data-cy="action-options-component-selection-field"]') .click() .find("input") - .type(`{selectAll}{backspace}${component}`); + .type(`{selectAll}{backspace}${component}{enter}`); cy.get('[data-cy="action-options-action-selection-field"]') .click() .find("input") - .type(`{selectAll}{backspace}${componentAction}`); - cy.get('[data-cy="-input-field"]').type(`{selectAll}{backspace}${debounce}`); + .type(`{selectAll}{backspace}${componentAction}{enter}`); + cy.get('[data-cy="-input-field"]').type( + `{selectAll}{backspace}${debounce}{enter}` + ); +}; + +export const addSupportCSAData = (field, data) => { + cy.get(`[data-cy="${field}-input-field"]`).clearAndTypeOnCodeMirror(data); };