From 7dc905683432ded2ed87a75fde69bb8e396f6472 Mon Sep 17 00:00:00 2001 From: Tolulope Adetula <31691737+Tooluloope@users.noreply.github.com> Date: Thu, 23 Feb 2023 15:32:31 +0000 Subject: [PATCH] chore: improve ListV2 cypress scripts (#20905) ## Description Improve Listv2 tests Fixes # (issue) https://theappsmith.slack.com/archives/C02JV8G1MP0/p1676925949886009 ## Type of change > Please delete options that are not relevant. - Bug fix (non-breaking change which fixes an issue) ## How Has This Been Tested? - Cypress ## Checklist: ### Dev activity - [x] My code follows the style guidelines of this project - [x] I have performed a self-review of my own code - [x] I have commented my code, particularly in hard-to-understand areas - [ ] I have made corresponding changes to the documentation - [x] My changes generate no new warnings - [x] I have added tests that prove my fix is effective or that my feature works - [x] New and existing unit tests pass locally with my changes - [ ] PR is being merged under a feature flag ### QA activity: - [ ] Test plan has been approved by relevant developers - [ ] Test plan has been peer reviewed by QA - [ ] Cypress test cases have been added and approved by either SDET or manual QA - [ ] Organized project review call with relevant stakeholders after Round 1/2 of QA - [ ] Added Test Plan Approved label after reveiwing all Cypress test --------- Co-authored-by: ashit-rath Co-authored-by: Favour Ohanekwu --- .../ListV2/ListV2_PageNo_PageSize_spec.js | 9 +-- ...Listv2_BasicChildWidgetInteraction_spec.js | 57 ++++++++++++------- .../Listv2_Meta_Hydration_ClientSide_spec.js | 12 +++- .../Listv2_Meta_Hydration_ServerSide_spec.js | 6 +- app/client/cypress/support/commands.js | 8 +++ 5 files changed, 65 insertions(+), 27 deletions(-) diff --git a/app/client/cypress/integration/Regression_TestSuite/ClientSideTests/Widgets/ListV2/ListV2_PageNo_PageSize_spec.js b/app/client/cypress/integration/Regression_TestSuite/ClientSideTests/Widgets/ListV2/ListV2_PageNo_PageSize_spec.js index 8d0a3ea6ec..ecfd29dd2e 100644 --- a/app/client/cypress/integration/Regression_TestSuite/ClientSideTests/Widgets/ListV2/ListV2_PageNo_PageSize_spec.js +++ b/app/client/cypress/integration/Regression_TestSuite/ClientSideTests/Widgets/ListV2/ListV2_PageNo_PageSize_spec.js @@ -173,10 +173,11 @@ describe("List widget V2 page number and page size", () => { // Choose the first data source which consists of users keyword & Click on the "New Query +"" button cy.get(`${datasource.datasourceCard}`) - .contains("Users") - .get(`${datasource.createQuery}`) - .last() - .click({ force: true }); + .filter(":contains('Users')") + .first() + .within(() => { + cy.get(`${datasource.createQuery}`).click({ force: true }); + }); // Click the editing field cy.get(".t--action-name-edit-field").click({ force: true }); diff --git a/app/client/cypress/integration/Regression_TestSuite/ClientSideTests/Widgets/ListV2/Listv2_BasicChildWidgetInteraction_spec.js b/app/client/cypress/integration/Regression_TestSuite/ClientSideTests/Widgets/ListV2/Listv2_BasicChildWidgetInteraction_spec.js index a303fdbae7..6c3000298e 100644 --- a/app/client/cypress/integration/Regression_TestSuite/ClientSideTests/Widgets/ListV2/Listv2_BasicChildWidgetInteraction_spec.js +++ b/app/client/cypress/integration/Regression_TestSuite/ClientSideTests/Widgets/ListV2/Listv2_BasicChildWidgetInteraction_spec.js @@ -7,6 +7,9 @@ const commonlocators = require("../../../../../locators/commonlocators.json"); import { ObjectsRegistry } from "../../../../../support/Objects/Registry"; let agHelper = ObjectsRegistry.AggregateHelper; +const widgetSelector = (name) => `[data-widgetname-cy="${name}"]`; +const containerWidgetSelector = `[type="CONTAINER_WIDGET"]`; + function dragAndDropToWidget(widgetType, destinationWidget, { x, y }) { const selector = `.t--widget-card-draggable-${widgetType}`; cy.wait(800); @@ -23,6 +26,20 @@ function dragAndDropToWidget(widgetType, destinationWidget, { x, y }) { .trigger("mouseup", x, y, { eventConstructor: "MouseEvent" }); } +function deleteAllWidgetsInContainer() { + const modifierKey = Cypress.platform === "darwin" ? "meta" : "ctrl"; + + cy.get(`${widgetSelector("List1")} ${containerWidgetSelector}`) + .first() + .click({ + force: true, + }); + cy.get("body").type(`{${modifierKey}}{a}`); + cy.get("body").type("{del}"); + + cy.wait(200); +} + function checkSelectedRadioValue(selector, value) { /** * This function checks if the radio button is checked. @@ -33,20 +50,20 @@ function checkSelectedRadioValue(selector, value) { } describe("List widget v2 - Basic Child Widget Interaction", () => { - beforeEach(() => { - agHelper.RestoreLocalStorageCache(); + before(() => { cy.addDsl(emptyListDSL); + agHelper.RestoreLocalStorageCache(); cy.get(publishLocators.containerWidget).should("have.length", 3); }); - afterEach(() => { + after(() => { agHelper.SaveLocalStorageCache(); }); - it("1. Input widget", () => { + it("1. Child widgets", () => { // Drop Input widget dragAndDropToWidget("inputwidgetv2", "containerwidget", { - x: 50, + x: 250, y: 50, }); @@ -62,12 +79,12 @@ describe("List widget v2 - Basic Child Widget Interaction", () => { cy.get(publishLocators.inputWidget) .find("input") .should("have.value", "abcd"); - }); - it("2. Select widget", () => { + deleteAllWidgetsInContainer(); + // Drop Select widget dragAndDropToWidget("selectwidget", "containerwidget", { - x: 50, + x: 250, y: 50, }); @@ -89,12 +106,12 @@ describe("List widget v2 - Basic Child Widget Interaction", () => { // Assert if the select widget has Red as the selected value cy.get(publishLocators.selectwidget).contains("Red"); cy.get(publishPage.backToEditor).click({ force: true }); - }); - it("3. Checkbox group widget", () => { - // Drop Select widget + deleteAllWidgetsInContainer(); + + // Drop Checkbox widget dragAndDropToWidget("checkboxgroupwidget", "containerwidget", { - x: 50, + x: 250, y: 50, }); @@ -103,7 +120,7 @@ describe("List widget v2 - Basic Child Widget Interaction", () => { cy.PublishtheApp(); - cy.wait(1000); + cy.wait(3000); // select green cy.get(publishLocators.checkboxGroupWidget) @@ -125,12 +142,11 @@ describe("List widget v2 - Basic Child Widget Interaction", () => { .siblings("input") .should("be.checked"); cy.get(publishPage.backToEditor).click({ force: true }); - }); + deleteAllWidgetsInContainer(); - it("4. Switch widget", () => { - // Drop Select widget + // Drop Switch widget dragAndDropToWidget("switchwidget", "containerwidget", { - x: 50, + x: 250, y: 50, }); @@ -156,12 +172,11 @@ describe("List widget v2 - Basic Child Widget Interaction", () => { .first() .should("not.be.checked"); cy.get(publishPage.backToEditor).click({ force: true }); - }); + deleteAllWidgetsInContainer(); - it("5. Radio group widget", () => { - // Drop Select widget + // Drop Radio widget dragAndDropToWidget("radiogroupwidget", "containerwidget", { - x: 50, + x: 250, y: 50, }); diff --git a/app/client/cypress/integration/Regression_TestSuite/ClientSideTests/Widgets/ListV2/Listv2_Meta_Hydration_ClientSide_spec.js b/app/client/cypress/integration/Regression_TestSuite/ClientSideTests/Widgets/ListV2/Listv2_Meta_Hydration_ClientSide_spec.js index d21843723c..40a80052b2 100644 --- a/app/client/cypress/integration/Regression_TestSuite/ClientSideTests/Widgets/ListV2/Listv2_Meta_Hydration_ClientSide_spec.js +++ b/app/client/cypress/integration/Regression_TestSuite/ClientSideTests/Widgets/ListV2/Listv2_Meta_Hydration_ClientSide_spec.js @@ -18,7 +18,7 @@ function changeValueOfWidget(widgetType, value, index) { cy.SelectDropDown(value); break; case "multiselectwidgetv2": - cy.RemoveMultiSelectItems(["Green", "Red"]); + cy.RemoveAllSelections(); cy.SelectFromMultiSelect(value); break; case "inputwidgetv2": @@ -80,6 +80,7 @@ describe("List widget v2 - meta hydration tests", () => { ); //FirstPage // First Row + cy.get(`${widgetSelector("List1")}`).scrollIntoView(); changeValueOfWidget("selectwidget", "Green", 0); changeValueOfWidget("inputwidgetv2", "First", 0); changeValueOfWidget("multiselectwidgetv2", ["Green"], 0); @@ -102,6 +103,7 @@ describe("List widget v2 - meta hydration tests", () => { // SecondPage // First Row + cy.get(`${widgetSelector("List1")}`).scrollIntoView(); changeValueOfWidget("selectwidget", "Blue", 0); changeValueOfWidget("inputwidgetv2", "Fourth", 0); changeValueOfWidget("multiselectwidgetv2", ["Blue"], 0); @@ -124,6 +126,8 @@ describe("List widget v2 - meta hydration tests", () => { //Validate values in FirstPage // First Row + cy.get(`${widgetSelector("List1")}`).scrollIntoView(); + verifyValueOfWidget("selectwidget", "Green", 0); verifyValueOfWidget("inputwidgetv2", "First", 0); verifyValueOfWidget("multiselectwidgetv2", ["Green"], 0); @@ -146,6 +150,8 @@ describe("List widget v2 - meta hydration tests", () => { //Validate values in SecondPage // First Row + cy.get(`${widgetSelector("List1")}`).scrollIntoView(); + verifyValueOfWidget("selectwidget", "Blue", 0); verifyValueOfWidget("inputwidgetv2", "Fourth", 0); verifyValueOfWidget("multiselectwidgetv2", ["Blue"], 0); @@ -214,6 +220,8 @@ describe("List widget v2 - meta hydration tests", () => { //Validate values in FirstPage // First Row + cy.get(`${widgetSelector("List1")}`).scrollIntoView(); + verifyValueOfWidget("selectwidget", "Green", 0); verifyValueOfWidget("inputwidgetv2", "First", 0); verifyValueOfWidget("multiselectwidgetv2", ["Green"], 0); @@ -236,6 +244,8 @@ describe("List widget v2 - meta hydration tests", () => { //Validate values in SecondPage // First Row + cy.get(`${widgetSelector("List1")}`).scrollIntoView(); + verifyValueOfWidget("selectwidget", "Blue", 0); verifyValueOfWidget("inputwidgetv2", "Fourth", 0); verifyValueOfWidget("multiselectwidgetv2", ["Blue"], 0); diff --git a/app/client/cypress/integration/Regression_TestSuite/ClientSideTests/Widgets/ListV2/Listv2_Meta_Hydration_ServerSide_spec.js b/app/client/cypress/integration/Regression_TestSuite/ClientSideTests/Widgets/ListV2/Listv2_Meta_Hydration_ServerSide_spec.js index 81497bbd5d..87248e68d1 100644 --- a/app/client/cypress/integration/Regression_TestSuite/ClientSideTests/Widgets/ListV2/Listv2_Meta_Hydration_ServerSide_spec.js +++ b/app/client/cypress/integration/Regression_TestSuite/ClientSideTests/Widgets/ListV2/Listv2_Meta_Hydration_ServerSide_spec.js @@ -21,7 +21,7 @@ function changeValueOfWidget(widgetType, value, index) { cy.SelectDropDown(value); break; case "multiselectwidgetv2": - cy.RemoveMultiSelectItems(["Green", "Red"]); + cy.RemoveAllSelections(); cy.SelectFromMultiSelect(value); break; case "inputwidgetv2": @@ -198,6 +198,7 @@ describe("List widget v2 - meta hydration tests", () => { //Validate values in FirstPage // First Row cy.wait(10000); + cy.get(`${widgetSelector("List1")}`).scrollIntoView(); verifyValueOfWidget("selectwidget", "Green", 0); verifyValueOfWidget("inputwidgetv2", "First", 0); verifyValueOfWidget("multiselectwidgetv2", ["Green"], 0); @@ -220,6 +221,7 @@ describe("List widget v2 - meta hydration tests", () => { //Validate values in SecondPage // First Row cy.wait(10000); + cy.get(`${widgetSelector("List1")}`).scrollIntoView(); verifyValueOfWidget("selectwidget", "Blue", 0); verifyValueOfWidget("inputwidgetv2", "Fourth", 0); verifyValueOfWidget("multiselectwidgetv2", ["Blue"], 0); @@ -287,6 +289,7 @@ describe("List widget v2 - meta hydration tests", () => { //Validate values in FirstPage // First Row cy.wait(10000); + cy.get(`${widgetSelector("List1")}`).scrollIntoView(); verifyValueOfWidget("selectwidget", "Green", 0); verifyValueOfWidget("inputwidgetv2", "First", 0); verifyValueOfWidget("multiselectwidgetv2", ["Green"], 0); @@ -309,6 +312,7 @@ describe("List widget v2 - meta hydration tests", () => { //Validate values in SecondPage // First Row cy.wait(10000); + cy.get(`${widgetSelector("List1")}`).scrollIntoView(); verifyValueOfWidget("selectwidget", "Blue", 0); verifyValueOfWidget("inputwidgetv2", "Fourth", 0); verifyValueOfWidget("multiselectwidgetv2", ["Blue"], 0); diff --git a/app/client/cypress/support/commands.js b/app/client/cypress/support/commands.js index 3142bffb5e..4326f22b4a 100644 --- a/app/client/cypress/support/commands.js +++ b/app/client/cypress/support/commands.js @@ -2075,6 +2075,14 @@ Cypress.Commands.add("RemoveMultiSelectItems", (dropdownOptions) => { }); }); +Cypress.Commands.add("RemoveAllSelections", () => { + cy.get(`.rc-select-selection-overflow-item .remove-icon`).each(($each) => { + cy.wrap($each) + .click({ force: true }) + .wait(1000); + }); +}); + Cypress.Commands.add("SelectFromMultiSelect", (options) => { const option = (value) => `.rc-select-item-option[title=${value}] input[type='checkbox']`;