From 1cf043c40a4219174fb0a408d3e80a3090e8c86c Mon Sep 17 00:00:00 2001 From: Sagar Khalasi Date: Fri, 20 Sep 2024 12:44:14 +0530 Subject: [PATCH] fix: Inline editing flaky test fix (#36366) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit ## Description EE PR: [Appsmith EE Pull Request #5158](https://github.com/appsmithorg/appsmith-ee/pull/5158) Root Cause Analysis (RCA): The `updateCodeInput` function was identified as a source of flakiness due to improper execution. Additionally, the `SaveLocalStorageCache` caused issues by retaining the reset button after the 6th test case, resulting in a duplicate button in the 7th test case, which led to test failures. Solution: Replaced `updateCodeInput` with `EnterJSContext` from `agHelper` for more reliable execution. For the second flaky step, a new page was created, and a table with relevant data was added. This resolved the issue without requiring significant changes to the test case or workflow. Fixes #`36365` ## Automation /ok-to-test tags="@tag.ImportExport" ### :mag: Cypress test results > [!TIP] > 🟢 🟢 🟢 All cypress tests have passed! 🎉 🎉 🎉 > Workflow run: > Commit: 32d1be4c3dfe54bf8a0f8e9f54b20d2845c86407 > Cypress dashboard. > Tags: `@tag.ImportExport` > Spec: >
Thu, 19 Sep 2024 12:01:32 UTC ## Communication Should the DevRel and Marketing teams inform users about this change? - [ ] Yes - [x] No ## Summary by CodeRabbit ## Summary by CodeRabbit - **Bug Fixes** - Adjusted the inline editing test suite for the table widget to improve state management between tests. - **New Features** - Updated the limited tests to focus on inline editing functionality, enhancing testing priorities for the Table V2 widget. - Introduced new properties in the widget locators to enhance UI interactions, including selectors for various controls and elements within the property pane and cell editing functionalities. - Added a new JavaScript toggle selector to facilitate interactions in tests. --- .../Widgets/TableV2/Inline_editing_2_spec.js | 60 +++++++++---------- app/client/cypress/locators/WidgetLocators.ts | 1 + app/client/cypress/locators/Widgets.json | 6 +- 3 files changed, 34 insertions(+), 33 deletions(-) diff --git a/app/client/cypress/e2e/Regression/ClientSide/Widgets/TableV2/Inline_editing_2_spec.js b/app/client/cypress/e2e/Regression/ClientSide/Widgets/TableV2/Inline_editing_2_spec.js index b8ab5ef942e..6336b7f58b0 100644 --- a/app/client/cypress/e2e/Regression/ClientSide/Widgets/TableV2/Inline_editing_2_spec.js +++ b/app/client/cypress/e2e/Regression/ClientSide/Widgets/TableV2/Inline_editing_2_spec.js @@ -6,12 +6,12 @@ const commonlocators = require("../../../../../locators/commonlocators.json"); const widgetsPage = require("../../../../../locators/Widgets.json"); import { agHelper, - entityExplorer, propPane, table, - draggableWidgets, } from "../../../../../support/Objects/ObjectsCore"; import { PROPERTY_SELECTOR } from "../../../../../locators/WidgetLocators"; +import PageList from "../../../../../support/Pages/PageList"; +const publish = require("../../../../../locators/publishWidgetspage.json"); describe( "Table widget inline editing functionality", @@ -30,8 +30,7 @@ describe( cy.openPropertyPane("tablewidgetv2"); table.toggleColumnEditableViaColSettingsPane("step", "v2", true, true); cy.editColumn("EditActions1"); - cy.get(".t--property-pane-section-collapse-savebutton").click(); - //cy.get(".t--property-pane-section-collapse-discardbutton").click(); + cy.get(widgetsPage.propertyPaneSaveButton).click(); cy.getAlert("onDiscard", "discarded!!"); cy.editTableCell(0, 0); cy.enterTableCellValue(0, 0, "NewValue"); @@ -51,22 +50,16 @@ describe( cy.openPropertyPane("tablewidgetv2"); table.toggleColumnEditableViaColSettingsPane("step", "v2", true, true); cy.editTableCell(0, 0); - cy.get( - "[data-colindex=0][data-rowindex=0] .t--inlined-cell-editor input.bp3-input", - ).should("not.be.disabled"); + cy.get(widgetsPage.firstEditInput).should("not.be.disabled"); }); it("3. should check that inline editing works with text wrapping enabled", () => { cy.openPropertyPane("tablewidgetv2"); table.toggleColumnEditableViaColSettingsPane("step", "v2", true, true); cy.editColumn("step"); - cy.get(".t--property-control-cellwrapping .ads-v2-switch") - .first() - .click({ force: true }); + cy.get(widgetsPage.cellControlSwitch).first().click({ force: true }); cy.editTableCell(0, 0); - cy.get( - "[data-colindex=0][data-rowindex=0] .t--inlined-cell-editor input.bp3-input", - ).should("not.be.disabled"); + cy.get(widgetsPage.firstEditInput).should("not.be.disabled"); }); it("4. should check that cell column height doesn't grow taller when text wrapping is disabled", () => { @@ -114,16 +107,15 @@ describe( it("6. should check if updatedRowIndex is getting updated for single row update mode", () => { cy.dragAndDropToCanvas("textwidget", { x: 400, y: 400 }); - cy.get(".t--widget-textwidget").should("exist"); - cy.updateCodeInput( - ".t--property-control-text", - `{{Table1.updatedRowIndex}}`, - ); + cy.get(publish.textWidget).should("exist"); + cy.updateCodeInput(PROPERTY_SELECTOR.text, `{{Table1.updatedRowIndex}}`); cy.dragAndDropToCanvas("buttonwidget", { x: 300, y: 300 }); - cy.get(".t--widget-buttonwidget").should("exist"); - cy.get(PROPERTY_SELECTOR.onClick).find(".t--js-toggle").click(); - cy.updateCodeInput(".t--property-control-label", "Reset"); + cy.get(widgetsPage.widgetBtn).should("exist"); + cy.get(PROPERTY_SELECTOR.onClick) + .find(PROPERTY_SELECTOR.jsToggle) + .click(); + cy.updateCodeInput(widgetsPage.propertyControlLabel, "Reset"); cy.updateCodeInput( PROPERTY_SELECTOR.onClick, `{{resetWidget("Table1",true)}}`, @@ -161,19 +153,23 @@ describe( }); it("7. should check if updatedRowIndex is getting updated for multi row update mode", () => { + PageList.AddNewPage("New blank page"); + cy.dragAndDropToCanvas("tablewidgetv2", { x: 350, y: 500 }); + table.AddSampleTableData(); cy.dragAndDropToCanvas("textwidget", { x: 400, y: 400 }); - cy.get(".t--widget-textwidget").should("exist"); - cy.updateCodeInput( - ".t--property-control-text", - `{{Table1.updatedRowIndex}}`, - ); + cy.get(publish.textWidget).should("exist"); + cy.updateCodeInput(PROPERTY_SELECTOR.text, `{{Table1.updatedRowIndex}}`); cy.dragAndDropToCanvas("buttonwidget", { x: 300, y: 300 }); - cy.get(".t--widget-buttonwidget").should("exist"); - cy.get(PROPERTY_SELECTOR.onClick).find(".t--js-toggle").click(); - cy.updateCodeInput(".t--property-control-label", "Reset"); - cy.updateCodeInput( - PROPERTY_SELECTOR.onClick, - `{{resetWidget("Table1",true)}}`, + cy.get(widgetsPage.widgetBtn).should("exist"); + cy.get(PROPERTY_SELECTOR.onClick) + .find(PROPERTY_SELECTOR.jsToggle) + .click(); + cy.updateCodeInput(widgetsPage.propertyControlLabel, "Reset"); + propPane.EnterJSContext( + "onClick", + '{{resetWidget("Table1",true)}}', + true, + false, ); EditorNavigation.SelectEntityByName("Table1", EntityType.Widget); diff --git a/app/client/cypress/locators/WidgetLocators.ts b/app/client/cypress/locators/WidgetLocators.ts index 3f841874987..d60513acf5e 100644 --- a/app/client/cypress/locators/WidgetLocators.ts +++ b/app/client/cypress/locators/WidgetLocators.ts @@ -61,6 +61,7 @@ export const PROPERTY_SELECTOR = { TextFieldName: "Text", tableData: ".t--property-control-tabledata", tableColumnNames: '[data-rbd-draggable-id] input[type="text"]', + jsToggle : '.t--js-toggle', }; export const WIDGETSKIT = { diff --git a/app/client/cypress/locators/Widgets.json b/app/client/cypress/locators/Widgets.json index 090de4f8a90..92b161d141b 100644 --- a/app/client/cypress/locators/Widgets.json +++ b/app/client/cypress/locators/Widgets.json @@ -230,5 +230,9 @@ "showResult": ".t--property-control-showresult input[type='checkbox']", "infiniteLoading": ".t--property-control-infiniteloading input[type='checkbox']", "counterclockwise": ".t--property-control-counterclockwise input[type='checkbox']", - "serversideFilteringInput": ".t--property-control-serversidefiltering input[type='checkbox']" + "serversideFilteringInput": ".t--property-control-serversidefiltering input[type='checkbox']", + "propertyPaneSaveButton": ".t--property-pane-section-collapse-savebutton", + "firstEditInput":"[data-colindex=0][data-rowindex=0] .t--inlined-cell-editor input.bp3-input", + "cellControlSwitch" : ".t--property-control-cellwrapping .ads-v2-switch", + "propertyControlLabel" : ".t--property-control-label" }