From d4d4b28a10110bfbf32089d4e09767fcfd910394 Mon Sep 17 00:00:00 2001 From: Ashok Kumar M <35134347+marks0351@users.noreply.github.com> Date: Mon, 29 May 2023 14:28:02 +0530 Subject: [PATCH] test: Auto Layout uncovered test cases (#23626) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit > Pull Request Template > > Use this template to quickly create a well written pull request. Delete all quotes before creating the pull request. > ## Description Adding test cases to cover scenarios in resizing behaviour and suggested widgets in Auto Layout mode. #### PR fixes following issue(s) Fixes #23656 > if no issue exists, please create an issue and ask the maintainers about this first > > #### Media > A video or a GIF is preferred. when using Loom, don’t embed because it looks like it’s a GIF. instead, just link to the video > > #### Type of change > Please delete options that are not relevant. - Bug fix (non-breaking change which fixes an issue) - New feature (non-breaking change which adds functionality) - Breaking change (fix or feature that would cause existing functionality to not work as expected) - Chore (housekeeping or task changes that don't impact user perception) - This change requires a documentation update > > > ## Testing > #### How Has This Been Tested? > Please describe the tests that you ran to verify your changes. Also list any relevant details for your test configuration. > Delete anything that is not relevant - [ ] Manual - [ ] Jest - [x] Cypress > > #### Test Plan > Add Testsmith test cases links that relate to this PR > > #### Issues raised during DP testing > Link issues raised during DP testing for better visiblity and tracking (copy link from comments dropped on this PR) > > > ## Checklist: #### Dev activity - [ ] My code follows the style guidelines of this project - [ ] I have performed a self-review of my own code - [ ] I have commented my code, particularly in hard-to-understand areas - [ ] I have made corresponding changes to the documentation - [ ] My changes generate no new warnings - [ ] I have added tests that prove my fix is effective or that my feature works - [ ] New and existing unit tests pass locally with my changes - [ ] PR is being merged under a feature flag #### QA activity: - [ ] [Speedbreak features](https://github.com/appsmithorg/TestSmith/wiki/Test-plan-implementation#speedbreaker-features-to-consider-for-every-change) have been covered - [ ] Test plan covers all impacted features and [areas of interest](https://github.com/appsmithorg/TestSmith/wiki/Guidelines-for-test-plans/_edit#areas-of-interest) - [ ] Test plan has been peer reviewed by project stakeholders and other QA members - [ ] Manually tested functionality on DP - [ ] We had an implementation alignment call with stakeholders post QA Round 2 - [ ] Cypress test cases have been added and approved by SDET/manual QA - [ ] Added `Test Plan Approved` label after Cypress tests were reviewed - [ ] Added `Test Plan Approved` label after JUnit tests were reviewed --- .../MobileResponsiveTests/ResizingSpec.ts | 124 ++++++++++++++++++ .../SuggestedWidgets_spec.js | 63 +++++++++ app/client/cypress/limited-tests.txt | 2 +- .../cypress/support/Objects/CommonLocators.ts | 7 + 4 files changed, 195 insertions(+), 1 deletion(-) create mode 100644 app/client/cypress/e2e/Regression/ClientSide/MobileResponsiveTests/ResizingSpec.ts create mode 100644 app/client/cypress/e2e/Regression/ClientSide/MobileResponsiveTests/SuggestedWidgets_spec.js diff --git a/app/client/cypress/e2e/Regression/ClientSide/MobileResponsiveTests/ResizingSpec.ts b/app/client/cypress/e2e/Regression/ClientSide/MobileResponsiveTests/ResizingSpec.ts new file mode 100644 index 0000000000..cd95660b51 --- /dev/null +++ b/app/client/cypress/e2e/Regression/ClientSide/MobileResponsiveTests/ResizingSpec.ts @@ -0,0 +1,124 @@ +import * as commonlocators from "../../../../locators/commonlocators.json"; +import { ObjectsRegistry } from "../../../../support/Objects/Registry"; +import * as _ from "../../../../support/Objects/ObjectsCore"; + +const { AggregateHelper: agHelper, EntityExplorer: ee } = ObjectsRegistry; + +describe("Resizing Behaviour in Auto Layout", function () { + before(() => { + cy.get(commonlocators.autoConvert).click({ + force: true, + }); + cy.get(commonlocators.convert).click({ + force: true, + }); + cy.get(commonlocators.refreshApp).click({ + force: true, + }); + }); + beforeEach(() => { + const isMac = Cypress.platform === "darwin"; + cy.get(".appsmith_widget_0").type(isMac ? "{meta}A" : "{ctrl}A"); + agHelper.PressDelete(); + }); + it("1. Resizing Handles for center aligned free resizing widgets - image widget", function () { + cy.get("#canvas-viewport").then((canvas) => { + const mainCanvasWidth = canvas.width() || 0; + ee.DragDropWidgetNVerify("imagewidget", mainCanvasWidth / 2, 600); + Object.values(_.locators._resizeHandles).forEach((eachHandle) => { + cy.get(`[data-testid='${eachHandle}']`) + .first() + .should("not.have.css", "cursor", "undefined") + .should("not.have.css", "cursor", "grab"); + }); + }); + }); + it("2. Resizing Handles for center aligned non-resizing widgets - button widget", () => { + cy.get("#canvas-viewport").then((canvas) => { + const mainCanvasWidth = canvas.width() || 0; + ee.DragDropWidgetNVerify("buttonwidget", mainCanvasWidth / 2, 600); + Object.values(_.locators._resizeHandles).forEach((eachHandle) => { + cy.get(`[data-testid='${eachHandle}']`) + .first() + .should("have.css", "cursor", "grab"); + }); + }); + }); + it("3. Resizing Handles for center aligned height resiziable widgets - table widget", () => { + cy.get("#canvas-viewport").then((canvas) => { + const mainCanvasWidth = canvas.width() || 0; + ee.DragDropWidgetNVerify("tablewidgetv2", mainCanvasWidth / 2, 600); + cy.get(`[data-testid='t--resizable-handle-BOTTOM']`) + .first() + .should("not.have.css", "cursor", "undefined") + .should("not.have.css", "cursor", "grab"); + }); + }); + it("4. Resizing Handles for end aligned free resizing widgets - image widget", function () { + cy.get("#canvas-viewport").then((canvas) => { + const mainCanvasWidth = canvas.width() || 0; + ee.DragDropWidgetNVerify("imagewidget", mainCanvasWidth * 0.8, 600); + [ + _.locators._resizeHandles.left, + _.locators._resizeHandles.bottom, + _.locators._resizeHandles.bottomLeft, + _.locators._resizeHandles.bottomRight, + ].forEach((eachHandle) => { + cy.get(`[data-testid='${eachHandle}']`) + .first() + .should("not.have.css", "cursor", "undefined") + .should("not.have.css", "cursor", "grab"); + }); + }); + }); + it("5. Resizing Handles for end aligned non-resizing widgets - button widget", () => { + cy.get("#canvas-viewport").then((canvas) => { + const mainCanvasWidth = canvas.width() || 0; + ee.DragDropWidgetNVerify("buttonwidget", mainCanvasWidth * 0.8, 600); + [ + _.locators._resizeHandles.left, + _.locators._resizeHandles.bottom, + _.locators._resizeHandles.bottomLeft, + _.locators._resizeHandles.bottomRight, + ].forEach((eachHandle) => { + cy.get(`[data-testid='${eachHandle}']`) + .first() + .should("have.css", "cursor", "grab"); + }); + }); + }); + + it("6. Resizing Handles for start aligned free resizing widgets - image widget", function () { + cy.get("#canvas-viewport").then((canvas) => { + const mainCanvasWidth = canvas.width() || 0; + ee.DragDropWidgetNVerify("imagewidget", mainCanvasWidth * 0.1, 600); + [ + _.locators._resizeHandles.right, + _.locators._resizeHandles.bottom, + _.locators._resizeHandles.bottomLeft, + _.locators._resizeHandles.bottomRight, + ].forEach((eachHandle) => { + cy.get(`[data-testid='${eachHandle}']`) + .first() + .should("not.have.css", "cursor", "undefined") + .should("not.have.css", "cursor", "grab"); + }); + }); + }); + it("7. Resizing Handles for start aligned non-resizing widgets - button widget", () => { + cy.get("#canvas-viewport").then((canvas) => { + const mainCanvasWidth = canvas.width() || 0; + ee.DragDropWidgetNVerify("buttonwidget", mainCanvasWidth * 0.1, 600); + [ + _.locators._resizeHandles.right, + _.locators._resizeHandles.bottom, + _.locators._resizeHandles.bottomLeft, + _.locators._resizeHandles.bottomRight, + ].forEach((eachHandle) => { + cy.get(`[data-testid='${eachHandle}']`) + .first() + .should("have.css", "cursor", "grab"); + }); + }); + }); +}); diff --git a/app/client/cypress/e2e/Regression/ClientSide/MobileResponsiveTests/SuggestedWidgets_spec.js b/app/client/cypress/e2e/Regression/ClientSide/MobileResponsiveTests/SuggestedWidgets_spec.js new file mode 100644 index 0000000000..9e31ca7e7f --- /dev/null +++ b/app/client/cypress/e2e/Regression/ClientSide/MobileResponsiveTests/SuggestedWidgets_spec.js @@ -0,0 +1,63 @@ +const queryLocators = require("../../../../locators/QueryEditor.json"); +const queryEditor = require("../../../../locators/QueryEditor.json"); +const commonlocators = require("../../../../locators/commonlocators.json"); +import * as _ from "../../../../support/Objects/ObjectsCore"; + +let datasourceName; + +describe("Check Suggested Widgets Feature in Auto Layout", function () { + before(() => { + cy.get(commonlocators.autoConvert).click({ + force: true, + }); + cy.get(commonlocators.convert).click({ + force: true, + }); + cy.get(commonlocators.refreshApp).click({ + force: true, + }); + }); + + beforeEach(() => { + cy.startRoutesForDatasource(); + }); + + it("1. Create a PostgresDataSource", () => { + cy.createPostgresDatasource(); + cy.get("@saveDatasource").then((httpResponse) => { + datasourceName = httpResponse.response.body.data.name; + }); + }); + + it("2. Create a query and populate response by choosing addWidget and validate in Table Widget", () => { + cy.NavigateToActiveDSQueryPane(datasourceName); + cy.get(queryLocators.templateMenu).click(); + cy.get(".CodeMirror textarea") + .first() + .focus() + .type("SELECT * FROM configs LIMIT 10;"); + // eslint-disable-next-line cypress/no-unnecessary-waiting + cy.wait(500); + // Mock the response for this test + cy.intercept("/api/v1/actions/execute", { + fixture: "addWidgetTable-mock", + }); + + cy.onlyQueryRun(); + cy.xpath(queryEditor.queryResponse) + .first() + .invoke("text") + .then((text) => { + const tableRowTxt = text; + cy.get(queryEditor.suggestedTableWidget).click(); + _.entityExplorer.SelectEntityByName("Table1"); + cy.isSelectRow(1); + cy.readTableV2dataPublish("1", "0").then((tabData) => { + const tabValue = tabData; + cy.log("the value is" + tabValue); + expect(tabValue).to.be.equal("5"); + expect(tableRowTxt).to.equal(tabValue); + }); + }); + }); +}); diff --git a/app/client/cypress/limited-tests.txt b/app/client/cypress/limited-tests.txt index 315aa45cc9..c260d0c798 100644 --- a/app/client/cypress/limited-tests.txt +++ b/app/client/cypress/limited-tests.txt @@ -1 +1 @@ -cypress/e2e/**/**/* \ No newline at end of file +cypress/e2e/**/**/* diff --git a/app/client/cypress/support/Objects/CommonLocators.ts b/app/client/cypress/support/Objects/CommonLocators.ts index a2db90e473..b38af57e17 100644 --- a/app/client/cypress/support/Objects/CommonLocators.ts +++ b/app/client/cypress/support/Objects/CommonLocators.ts @@ -198,6 +198,13 @@ export class CommonLocators { _ds_uppy_crop_confirm = ".uppy-ImageCropper-controls .uppy-c-btn"; _ds_uppy_upload_btn = ".uppy-StatusBar-actionBtn--upload"; _goBack = this._visibleTextSpan("Back") + "/parent::a"; + _resizeHandles = { + left: "t--resizable-handle-LEFT", + right: "t--resizable-handle-RIGHT", + bottom: "t--resizable-handle-BOTTOM", + bottomLeft: "t--resizable-handle-BOTTOM|LEFT", + bottomRight: "t--resizable-handle-BOTTOM|RIGHT", + }; _popUpCloseBtn = (popupname: string) => `//*[text()='${popupname}']/following-sibling::button`; _selectByValue = (value: string) =>