fix: Popover in Multi select widget inside modals breaks away from the widget

app/client/cypress/integration/Smoke_TestSuite/ClientSideTests/FormWidgets/MultiSelect_spec.js

@@ -10,9 +10,6 @@ describe("MultiSelect Widget Functionality", function() {
   before(() => {
     cy.addDsl(dsl);
   });
-  beforeEach(() => {
-    cy.wait(7000);
-  });
   it("Selects value with invalid default value", () => {
     cy.openPropertyPane("multiselectwidgetv2");
     cy.testJsontext("options", JSON.stringify(data.input));
@@ -31,37 +28,7 @@ describe("MultiSelect Widget Functionality", function() {
       .first()
       .should("have.text", "Option 3");
   });
-  it("Selects value with enter in default value", () => {
-    cy.testJsontext(
-      "defaultvalue",
-      '[\n  {\n    "label": "Option 3",\n    "value": "3"\n  }\n]',
-    );
-    cy.get(formWidgetsPage.multiselectwidgetv2)
-      .find(".rc-select-selection-item-content")
-      .first()
-      .should("have.text", "Option 3");
-  });
-  it("Dropdown Functionality To Validate Options", function() {
-    cy.get(".rc-select-selector").click({ force: true });
-    cy.dropdownMultiSelectDynamic("Option 2");
-  });
-  it("Dropdown Functionality To Unchecked Visible Widget", function() {
-    cy.togglebarDisable(commonlocators.visibleCheckbox);
-    cy.PublishtheApp();
-    cy.get(publish.multiselectwidgetv2 + " " + ".rc-select-selector").should(
-      "not.exist",
-    );
-    cy.get(publish.backToEditor).click();
-  });
-  it("Dropdown Functionality To Check Visible Widget", function() {
-    cy.openPropertyPane("multiselectwidgetv2");
-    cy.togglebar(commonlocators.visibleCheckbox);
-    cy.PublishtheApp();
-    cy.get(publish.multiselectwidgetv2 + " " + ".rc-select-selector").should(
-      "be.visible",
-    );
-    cy.get(publish.backToEditor).click();
-  });
+
   it("Dropdown Functionality To Check Allow select all option", function() {
     // select all option is not enable
     cy.get(formWidgetsPage.multiselectwidgetv2)
@@ -114,6 +81,37 @@ describe("MultiSelect Widget Functionality", function() {
     // Check if isDirty is set to false
     cy.get(".t--widget-textwidget").should("contain", "false");
   });
+  it("Selects value with enter in default value", () => {
+    cy.updateCodeInput(
+      ".t--property-control-defaultvalue",
+      '[\n  {\n    "label": "Option 3",\n    "value": "3"\n  }\n]',
+    );
+    cy.get(formWidgetsPage.multiselectwidgetv2)
+      .find(".rc-select-selection-item-content")
+      .first()
+      .should("have.text", "Option 3");
+  });
+  it("Dropdown Functionality To Validate Options", function() {
+    cy.get(".rc-select-selector").click({ force: true });
+    cy.dropdownMultiSelectDynamic("Option 2");
+  });
+  it("Dropdown Functionality To Unchecked Visible Widget", function() {
+    cy.togglebarDisable(commonlocators.visibleCheckbox);
+    cy.PublishtheApp();
+    cy.get(publish.multiselectwidgetv2 + " " + ".rc-select-selector").should(
+      "not.exist",
+    );
+    cy.get(publish.backToEditor).click();
+  });
+  it("Dropdown Functionality To Check Visible Widget", function() {
+    cy.openPropertyPane("multiselectwidgetv2");
+    cy.togglebar(commonlocators.visibleCheckbox);
+    cy.PublishtheApp();
+    cy.get(publish.multiselectwidgetv2 + " " + ".rc-select-selector").should(
+      "be.visible",
+    );
+    cy.get(publish.backToEditor).click();
+  });
 });
 afterEach(() => {
   // put your clean up code if any

app/client/cypress/integration/Smoke_TestSuite/ClientSideTests/FormWidgets/Multi_Select_Tree_spec.js

@@ -9,6 +9,32 @@ describe("MultiSelectTree Widget Functionality", function() {
     cy.addDsl(dsl);
   });
 
+  it("Check isDirty meta property", function() {
+    cy.get(explorer.addWidget).click();
+    cy.dragAndDropToCanvas("textwidget", { x: 300, y: 500 });
+    cy.openPropertyPane("textwidget");
+    cy.updateCodeInput(
+      ".t--property-control-text",
+      `{{MultiSelectTree1.isDirty}}`,
+    );
+    // Change defaultValue
+    cy.openPropertyPane("multiselecttreewidget");
+    cy.testJsontext("defaultvalue", "GREEN\n");
+    // Check if isDirty is set to false
+    cy.get(".t--widget-textwidget").should("contain", "false");
+    // Interact with UI
+    cy.get(formWidgetsPage.treeSelectInput)
+      .first()
+      .click({ force: true });
+    cy.treeMultiSelectDropdown("Red");
+    // Check if isDirty is set to true
+    cy.get(".t--widget-textwidget").should("contain", "true");
+    // Reset isDirty by changing defaultValue
+    cy.testJsontext("defaultvalue", "BLUE\n");
+    // Check if isDirty is set to false
+    cy.get(".t--widget-textwidget").should("contain", "false");
+  });
+
   it("Selects value with enter in default value", () => {
     cy.openPropertyPane("multiselecttreewidget");
     cy.testJsontext("defaultvalue", "RED\n");
@@ -43,32 +69,6 @@ describe("MultiSelectTree Widget Functionality", function() {
     ).should("be.visible");
     cy.get(publish.backToEditor).click();
   });
-
-  it("Check isDirty meta property", function() {
-    cy.get(explorer.addWidget).click();
-    cy.dragAndDropToCanvas("textwidget", { x: 300, y: 500 });
-    cy.openPropertyPane("textwidget");
-    cy.updateCodeInput(
-      ".t--property-control-text",
-      `{{MultiSelectTree1.isDirty}}`,
-    );
-    // Change defaultValue
-    cy.openPropertyPane("multiselecttreewidget");
-    cy.testJsontext("defaultvalue", "GREEN\n");
-    // Check if isDirty is set to false
-    cy.get(".t--widget-textwidget").should("contain", "false");
-    // Interact with UI
-    cy.get(formWidgetsPage.treeSelectInput)
-      .first()
-      .click({ force: true });
-    cy.treeMultiSelectDropdown("Red");
-    // Check if isDirty is set to true
-    cy.get(".t--widget-textwidget").should("contain", "true");
-    // Reset isDirty by changing defaultValue
-    cy.testJsontext("defaultvalue", "BLUE\n");
-    // Check if isDirty is set to false
-    cy.get(".t--widget-textwidget").should("contain", "false");
-  });
 });
 afterEach(() => {
   // put your clean up code if any

app/client/cypress/integration/Smoke_TestSuite/ClientSideTests/FormWidgets/Single_Select_Tree_spec.js

@@ -7,6 +7,34 @@ describe("Single Select Widget Functionality", function() {
   before(() => {
     cy.addDsl(dsl);
   });
+
+  it("Check isDirty meta property", function() {
+    cy.openPropertyPane("textwidget");
+    cy.updateCodeInput(
+      ".t--property-control-text",
+      `{{SingleSelectTree1.isDirty}}`,
+    );
+    // Change defaultText
+    cy.openPropertyPane("singleselecttreewidget");
+    cy.updateCodeInput(".t--property-control-defaultvalue", "GREEN");
+    // Check if isDirty is reset to false
+    cy.get(".t--widget-textwidget").should("contain", "false");
+    // Interact with UI
+    cy.get(formWidgetsPage.treeSelectInput)
+      .last()
+      .click({ force: true });
+    cy.get(formWidgetsPage.treeSelectFilterInput)
+      .click()
+      .type("light");
+    cy.treeSelectDropdown("Light Blue");
+    // Check if isDirty is set to true
+    cy.get(".t--widget-textwidget").should("contain", "true");
+    // Change defaultText
+    cy.openPropertyPane("singleselecttreewidget");
+    cy.updateCodeInput(".t--property-control-defaultvalue", "RED");
+    // Check if isDirty is reset to false
+    cy.get(".t--widget-textwidget").should("contain", "false");
+  });
   it("Selects value with enter in default value", () => {
     cy.openPropertyPane("singleselecttreewidget");
     cy.testJsontext("defaultvalue", "RED\n");
@@ -41,35 +69,6 @@ describe("Single Select Widget Functionality", function() {
     ).should("be.visible");
     cy.get(publish.backToEditor).click();
   });
-
-  it("Check isDirty meta property", function() {
-    cy.openPropertyPane("textwidget");
-    cy.updateCodeInput(
-      ".t--property-control-text",
-      `{{SingleSelectTree1.isDirty}}`,
-    );
-    // Change defaultText
-    cy.openPropertyPane("singleselecttreewidget");
-    cy.updateCodeInput(".t--property-control-defaultvalue", "GREEN");
-    cy.closePropertyPane();
-    // Check if isDirty is reset to false
-    cy.get(".t--widget-textwidget").should("contain", "false");
-    // Interact with UI
-    cy.get(formWidgetsPage.treeSelectInput)
-      .last()
-      .click({ force: true });
-    cy.get(formWidgetsPage.treeSelectFilterInput)
-      .click()
-      .type("light");
-    cy.treeSelectDropdown("Light Blue");
-    // Check if isDirty is set to true
-    cy.get(".t--widget-textwidget").should("contain", "true");
-    // Change defaultText
-    cy.openPropertyPane("singleselecttreewidget");
-    cy.updateCodeInput(".t--property-control-defaultvalue", "RED");
-    // Check if isDirty is reset to false
-    cy.get(".t--widget-textwidget").should("contain", "false");
-  });
 });
 afterEach(() => {
   // put your clean up code if any

app/client/cypress/support/Pages/AggregateHelper.ts

@@ -34,7 +34,7 @@ export class AggregateHelper {
     LOCAL_STORAGE_MEMORY = {};
   }
 
-  public TypeTab(shiftKey: boolean = false, ctrlKey: boolean = false) {
+  public TypeTab(shiftKey = false, ctrlKey = false) {
     cy.focused().trigger("keydown", {
       keyCode: 9,
       which: 9,
@@ -86,8 +86,8 @@ export class AggregateHelper {
   }
 
   public RenameWithInPane(renameVal: string, query = true) {
-    let name = query ? this.locator._queryName : this.locator._dsName;
-    let text = query ? this.locator._queryNameTxt : this.locator._dsNameTxt;
+    const name = query ? this.locator._queryName : this.locator._dsName;
+    const text = query ? this.locator._queryNameTxt : this.locator._dsNameTxt;
     cy.get(name).click({ force: true });
     cy.get(text)
       .clear({ force: true })
@@ -228,8 +228,8 @@ export class AggregateHelper {
     cy.get(this.locator._dropDownValue(ddOption)).click();
   }
 
-  public SelectDropDown(ddOption: string, endp: string = "selectwidget") {
-    let mode = window.localStorage.getItem("inDeployedMode");
+  public SelectDropDown(ddOption: string, endp = "selectwidget") {
+    const mode = window.localStorage.getItem("inDeployedMode");
     if (mode == "false") {
       cy.xpath(this.locator._selectWidgetDropdown(endp))
         .first()
@@ -250,17 +250,17 @@ export class AggregateHelper {
 
   public SelectFromDropDown(
     ddOption: string,
-    insideParent: string = "",
+    insideParent = "",
     index = 0,
-    endp: string = "dropdownwidget",
+    endp = "dropdownwidget",
   ) {
-    let mode = window.localStorage.getItem("inDeployedMode");
+    const mode = window.localStorage.getItem("inDeployedMode");
     //cy.log("mode frm deployed is:" + mode)
-    let modeSelector =
+    const modeSelector =
       mode == "true"
         ? this.locator._selectWidgetDropdownInDeployed(endp)
         : this.locator._selectWidgetDropdown(endp);
-    let finalSelector = insideParent
+    const finalSelector = insideParent
       ? this.locator._divWithClass(insideParent) + modeSelector
       : modeSelector;
     cy.log(finalSelector);
@@ -283,7 +283,7 @@ export class AggregateHelper {
     options: string[],
     index = 0,
     check = true,
-    endp: string = "multiselectwidgetv2",
+    endp = "multiselectwidgetv2",
   ) {
     cy.get(this.locator._widgetInDeployed(endp) + " div.rc-select-selector")
       .eq(index)
@@ -365,7 +365,7 @@ export class AggregateHelper {
   }
 
   public GetNClick(selector: string, index = 0, force = false) {
-    let locator = selector.startsWith("//")
+    const locator = selector.startsWith("//")
       ? cy.xpath(selector)
       : cy.get(selector);
     return locator
@@ -387,7 +387,7 @@ export class AggregateHelper {
   }
 
   public CheckUncheck(selector: string, check = true) {
-    let locator = selector.startsWith("//")
+    const locator = selector.startsWith("//")
       ? cy.xpath(selector)
       : cy.get(selector);
     if (check) {
@@ -435,7 +435,7 @@ export class AggregateHelper {
   }
 
   public GetElementLength(selector: string) {
-    let locator = selector.startsWith("//")
+    const locator = selector.startsWith("//")
       ? cy.xpath(selector)
       : cy.get(selector);
     return locator.its("length");
@@ -485,7 +485,7 @@ export class AggregateHelper {
     valueToEnter: string,
     options: IEnterValue = DEFAULT_ENTERVALUE_OPTIONS,
   ) {
-    const { propFieldName, directInput, inputFieldName } = options;
+    const { directInput, inputFieldName, propFieldName } = options;
 
     if (propFieldName && !directInput && !inputFieldName) {
       cy.xpath(this.locator._existingFieldTextByName(propFieldName)).then(
@@ -511,16 +511,20 @@ export class AggregateHelper {
     this.AssertAutoSave();
   }
 
-  public EnterInputText(name: string, input: string, toClear = false, isInput = true) {
-    toClear && this.ClearInputText(name)
+  public EnterInputText(
+    name: string,
+    input: string,
+    toClear = false,
+    isInput = true,
+  ) {
+    toClear && this.ClearInputText(name);
     cy.xpath(this.locator._inputWidgetValueField(name, isInput))
-      .trigger('click')
+      .trigger("click")
       .type(input);
   }
 
   public ClearInputText(name: string, isInput = true) {
-    cy.xpath(this.locator._inputWidgetValueField(name, isInput))
-      .clear();
+    cy.xpath(this.locator._inputWidgetValueField(name, isInput)).clear();
   }
 
   public UpdateCodeInput(selector: string, value: string) {
@@ -603,7 +607,7 @@ export class AggregateHelper {
 
   public AssertElementAbsence(selector: string) {
     //Should not exists - cannot take indexes
-    let locator = selector.startsWith("//")
+    const locator = selector.startsWith("//")
       ? cy.xpath(selector, { timeout: 0 })
       : cy.get(selector, { timeout: 0 });
     locator.should("not.exist");
@@ -614,14 +618,14 @@ export class AggregateHelper {
     textOrValue: "text" | "val" = "text",
     index = 0,
   ) {
-    let locator = selector.startsWith("//")
+    const locator = selector.startsWith("//")
       ? cy.xpath(selector)
       : cy.get(selector);
     return locator.eq(index).invoke(textOrValue);
   }
 
   public AssertElementVisible(selector: string, index = 0) {
-    let locator = selector.startsWith("//")
+    const locator = selector.startsWith("//")
       ? cy.xpath(selector)
       : cy.get(selector);
     locator
@@ -631,7 +635,7 @@ export class AggregateHelper {
   }
 
   public AssertElementExist(selector: string, index = 0) {
-    let locator = selector.startsWith("//")
+    const locator = selector.startsWith("//")
       ? cy.xpath(selector)
       : cy.get(selector);
     locator.eq(index).should("exist");
@@ -642,7 +646,7 @@ export class AggregateHelper {
     length: number,
     index: number | null = null,
   ) {
-    let locator = selector.startsWith("//")
+    const locator = selector.startsWith("//")
       ? cy.xpath(selector)
       : cy.get(selector);
     if (index) locator.eq(index).should("have.length", length);