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

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");
+  });
 });

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"]');
+  });
 });

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...");
+  });
 });

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");
+  });
 });

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"
+    );
+  });
+});

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"
+    );
+  });
 });

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,
     });

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);
 };