chore: Abstraction of Bottom View in Cypress (appsmithorg#37410)

Namatek · Nov 17, 2024 · cd3ed89 · cd3ed89
1 parent 952fb93
commit cd3ed89
Show file tree

Hide file tree

Showing 9 changed files with 127 additions and 45 deletions.
diff --git a/app/client/cypress/e2e/Regression/ClientSide/Binding/JSObjectToListWidget_Spec.ts b/app/client/cypress/e2e/Regression/ClientSide/Binding/JSObjectToListWidget_Spec.ts
@@ -2,6 +2,8 @@ import * as _ from "../../../../support/Objects/ObjectsCore";
 import EditorNavigation, {
   EntityType,
 } from "../../../../support/Pages/EditorNavigation";
+import BottomPane from "../../../../support/Pages/IDE/BottomPane";
+
 let valueToTest: any, jsName: any;
 
 describe(
@@ -17,7 +19,7 @@ describe(
         _.dataManager.dsValues[_.dataManager.defaultEnviorment].mockApiUrl,
       );
       _.apiPage.RunAPI();
-      _.agHelper.GetNClick(_.dataSources._queryResponse("JSON"));
+      BottomPane.response.switchResponseType("JSON");
       _.apiPage.ReadApiResponsebyKey("name");
       cy.get("@apiResp").then((value) => {
         valueToTest = value;

diff --git a/app/client/cypress/e2e/Regression/ClientSide/BugTests/Binding_Bug28287_Spec.ts b/app/client/cypress/e2e/Regression/ClientSide/BugTests/Binding_Bug28287_Spec.ts
@@ -8,6 +8,7 @@ import {
 import EditorNavigation, {
   EntityType,
 } from "../../../../support/Pages/EditorNavigation";
+import BottomPane from "../../../../support/Pages/IDE/BottomPane";
 
 let dsName: any;
 let queryName: string;
@@ -43,7 +44,11 @@ describe(
 
         EditorNavigation.SelectEntityByName(queryName, EntityType.Query);
 
-        agHelper.AssertElementVisibility(dataSources._queryResponse("TABLE"));
+        BottomPane.response.switchToResponseTab();
+
+        agHelper.AssertElementVisibility(
+          BottomPane.response.getResponseTypeSelector("TABLE"),
+        );
       });
     });
   },

diff --git a/app/client/cypress/e2e/Regression/ServerSide/OnLoadTests/OnLoadActions_Spec.ts b/app/client/cypress/e2e/Regression/ServerSide/OnLoadTests/OnLoadActions_Spec.ts
@@ -13,6 +13,7 @@ import {
 import EditorNavigation, {
   EntityType,
 } from "../../../../support/Pages/EditorNavigation";
+import BottomPane from "../../../../support/Pages/IDE/BottomPane";
 
 describe(
   "Layout OnLoad Actions tests",
@@ -55,7 +56,7 @@ describe(
       );
 
       apiPage.RunAPI();
-      agHelper.GetNClick(dataSources._queryResponse("JSON"));
+      BottomPane.response.switchResponseType("JSON");
 
       apiPage.CreateAndFillApi(
         "http://host.docker.internal:5001/v1/favqs/qotd",
@@ -64,7 +65,7 @@ describe(
       );
       apiPage.EnterHeader("dependency", "{{RandomUser.data}}"); //via Params tab
       apiPage.RunAPI();
-      agHelper.GetNClick(dataSources._queryResponse("JSON"));
+      BottomPane.response.switchResponseType("JSON");
 
       apiPage.CreateAndFillApi(
         "http://host.docker.internal:5001/v1/boredapi/activity",
@@ -73,7 +74,7 @@ describe(
       );
       apiPage.EnterHeader("dependency", "{{InspiringQuotes.data.data}}");
       apiPage.RunAPI();
-      agHelper.GetNClick(dataSources._queryResponse("JSON"));
+      BottomPane.response.switchResponseType("JSON");
 
       apiPage.CreateAndFillApi(
         "http://host.docker.internal:5001/v1/genderize/sampledata",
@@ -82,7 +83,7 @@ describe(
       );
       apiPage.EnterParams("name", "{{RandomUser.data[0].name}}"); //via Params tab
       apiPage.RunAPI();
-      agHelper.GetNClick(dataSources._queryResponse("JSON"));
+      BottomPane.response.switchResponseType("JSON");
 
       //Adding dependency in right order matters!
       EditorNavigation.SelectEntityByName("Image1", EntityType.Widget);
@@ -162,7 +163,7 @@ describe(
         value: "{{RandomUser.data[0].name}}",
       }); // verifies Bug 10055
       apiPage.RunAPI();
-      agHelper.GetNClick(dataSources._queryResponse("JSON"));
+      BottomPane.response.switchResponseType("JSON");
 
       deployMode.DeployApp(
         locators._widgetInDeployed("textwidget"),

diff --git a/app/client/cypress/e2e/Regression/ServerSide/QueryPane/Mongo1_spec.ts b/app/client/cypress/e2e/Regression/ServerSide/QueryPane/Mongo1_spec.ts
@@ -16,6 +16,7 @@ import EditorNavigation, {
   EntityType,
 } from "../../../../support/Pages/EditorNavigation";
 import PageList from "../../../../support/Pages/PageList";
+import BottomPane from "../../../../support/Pages/IDE/BottomPane";
 
 let dsName: any;
 
@@ -429,8 +430,12 @@ describe(
           parseInt(JSON.stringify(resObj.response.body.data.body.n)),
         ).to.eq(3);
       });
-      agHelper.AssertElementVisibility(dataSources._queryResponse("JSON"));
-      agHelper.AssertElementVisibility(dataSources._queryResponse("RAW"));
+      agHelper.AssertElementVisibility(
+        BottomPane.response.getResponseTypeSelector("JSON"),
+      );
+      agHelper.AssertElementVisibility(
+        BottomPane.response.getResponseTypeSelector("RAW"),
+      );
       agHelper.ActionContextMenuWithInPane({
         action: "Delete",
         entityType: entityItems.Query,
@@ -462,8 +467,12 @@ describe(
           parseInt(JSON.stringify(resObj.response.body.data.body.nModified)),
         ).to.eq(0);
       });
-      agHelper.AssertElementVisibility(dataSources._queryResponse("JSON"));
-      agHelper.AssertElementVisibility(dataSources._queryResponse("RAW"));
+      agHelper.AssertElementVisibility(
+        BottomPane.response.getResponseTypeSelector("JSON"),
+      );
+      agHelper.AssertElementVisibility(
+        BottomPane.response.getResponseTypeSelector("RAW"),
+      );
       agHelper.ActionContextMenuWithInPane({
         action: "Delete",
         entityType: entityItems.Query,
@@ -505,8 +514,12 @@ describe(
           parseInt(JSON.stringify(resObj.response.body.data.body.nModified)),
         ).to.eq(2);
       });
-      agHelper.AssertElementVisibility(dataSources._queryResponse("JSON"));
-      agHelper.AssertElementVisibility(dataSources._queryResponse("RAW"));
+      agHelper.AssertElementVisibility(
+        BottomPane.response.getResponseTypeSelector("JSON"),
+      );
+      agHelper.AssertElementVisibility(
+        BottomPane.response.getResponseTypeSelector("RAW"),
+      );
       agHelper.ActionContextMenuWithInPane({
         action: "Delete",
         entityType: entityItems.Query,
@@ -543,8 +556,12 @@ describe(
           parseInt(JSON.stringify(resObj.response.body.data.body.nModified)),
         ).to.eq(1);
       });
-      agHelper.AssertElementVisibility(dataSources._queryResponse("JSON"));
-      agHelper.AssertElementVisibility(dataSources._queryResponse("RAW"));
+      agHelper.AssertElementVisibility(
+        BottomPane.response.getResponseTypeSelector("JSON"),
+      );
+      agHelper.AssertElementVisibility(
+        BottomPane.response.getResponseTypeSelector("RAW"),
+      );
       agHelper.ActionContextMenuWithInPane({
         action: "Delete",
         entityType: entityItems.Query,
@@ -570,8 +587,12 @@ describe(
           parseInt(JSON.stringify(resObj.response.body.data.body.n)),
         ).to.eq(0);
       });
-      agHelper.AssertElementVisibility(dataSources._queryResponse("JSON"));
-      agHelper.AssertElementVisibility(dataSources._queryResponse("RAW"));
+      agHelper.AssertElementVisibility(
+        BottomPane.response.getResponseTypeSelector("JSON"),
+      );
+      agHelper.AssertElementVisibility(
+        BottomPane.response.getResponseTypeSelector("RAW"),
+      );
       agHelper.ActionContextMenuWithInPane({
         action: "Delete",
         entityType: entityItems.Query,
@@ -599,8 +620,12 @@ describe(
           parseInt(JSON.stringify(resObj.response.body.data.body.n)),
         ).to.eq(1);
       });
-      agHelper.AssertElementVisibility(dataSources._queryResponse("JSON"));
-      agHelper.AssertElementVisibility(dataSources._queryResponse("RAW"));
+      agHelper.AssertElementVisibility(
+        BottomPane.response.getResponseTypeSelector("JSON"),
+      );
+      agHelper.AssertElementVisibility(
+        BottomPane.response.getResponseTypeSelector("RAW"),
+      );
       agHelper.ActionContextMenuWithInPane({
         action: "Delete",
         entityType: entityItems.Query,
@@ -632,8 +657,12 @@ describe(
           2,
         );
       });
-      agHelper.AssertElementVisibility(dataSources._queryResponse("JSON"));
-      agHelper.AssertElementVisibility(dataSources._queryResponse("RAW"));
+      agHelper.AssertElementVisibility(
+        BottomPane.response.getResponseTypeSelector("JSON"),
+      );
+      agHelper.AssertElementVisibility(
+        BottomPane.response.getResponseTypeSelector("RAW"),
+      );
       agHelper.ActionContextMenuWithInPane({
         action: "Delete",
         entityType: entityItems.Query,
@@ -653,8 +682,12 @@ describe(
           7,
         );
       });
-      agHelper.AssertElementVisibility(dataSources._queryResponse("JSON"));
-      agHelper.AssertElementVisibility(dataSources._queryResponse("RAW"));
+      agHelper.AssertElementVisibility(
+        BottomPane.response.getResponseTypeSelector("JSON"),
+      );
+      agHelper.AssertElementVisibility(
+        BottomPane.response.getResponseTypeSelector("RAW"),
+      );
       agHelper.ActionContextMenuWithInPane({
         action: "Delete",
         entityType: entityItems.Query,
@@ -686,8 +719,12 @@ describe(
           JSON.parse(JSON.stringify(resObj.response.body.data.body.values[1])),
         ).to.eql("51e062189c6ae665454e301d");
       });
-      agHelper.AssertElementVisibility(dataSources._queryResponse("JSON"));
-      agHelper.AssertElementVisibility(dataSources._queryResponse("RAW"));
+      agHelper.AssertElementVisibility(
+        BottomPane.response.getResponseTypeSelector("JSON"),
+      );
+      agHelper.AssertElementVisibility(
+        BottomPane.response.getResponseTypeSelector("RAW"),
+      );
       agHelper.ActionContextMenuWithInPane({
         action: "Delete",
         entityType: entityItems.Query,

diff --git a/app/client/cypress/e2e/Regression/ServerSide/QueryPane/Querypane_Mongo_Spec.js b/app/client/cypress/e2e/Regression/ServerSide/QueryPane/Querypane_Mongo_Spec.js
@@ -17,6 +17,7 @@ import {
   apiPage,
 } from "../../../../support/Objects/ObjectsCore";
 import { Widgets } from "../../../../support/Pages/DataSources";
+import BottomPane from "../../../../support/Pages/IDE/BottomPane";
 
 let datasourceName;
 
@@ -70,7 +71,7 @@ describe(
       dataSources.EnterQuery(`{"find": "listingAndReviews","limit": 10}`);
       agHelper.FocusElement(locators._codeMirrorTextArea);
       dataSources.RunQuery();
-      dataSources.CheckResponseRecordsCount(10);
+      BottomPane.response.validateRecordCount(10);
       cy.deleteQueryUsingContext();
     });
 
@@ -92,23 +93,23 @@ describe(
         fieldValue: "listingAndReviews",
       });
       dataSources.RunQuery();
-      dataSources.CheckResponseRecordsCount(10);
+      BottomPane.response.validateRecordCount(10);
 
       agHelper.EnterValue("{beds : {$lte: 2}}", {
         propFieldName: "",
         directInput: false,
         inputFieldName: "Query",
       });
       dataSources.RunQuery();
-      dataSources.CheckResponseRecordsCount(10);
+      BottomPane.response.validateRecordCount(10);
 
       agHelper.EnterValue("{number_of_reviews: -1}", {
         propFieldName: "",
         directInput: false,
         inputFieldName: "Sort",
       }); //sort descending
       dataSources.RunQuery();
-      dataSources.CheckResponseRecordsCount(10);
+      BottomPane.response.validateRecordCount(10);
 
       agHelper.EnterValue("{house_rules: 1, description:1}", {
         propFieldName: "",
@@ -130,7 +131,7 @@ describe(
           "Response is not as expected for Find commmand with multiple conditions",
         );
       });
-      dataSources.CheckResponseRecordsCount(5);
+      BottomPane.response.validateRecordCount(5);
 
       agHelper.EnterValue("2", {
         propFieldName: "",
@@ -144,7 +145,7 @@ describe(
           "Response is not as expected for Find commmand with multiple conditions",
         );
       });
-      dataSources.CheckResponseRecordsCount(5);
+      BottomPane.response.validateRecordCount(5);
       cy.deleteQueryUsingContext();
     });
 
@@ -432,7 +433,7 @@ describe(
       );
 
       dataSources.RunQuery();
-      dataSources.CheckResponseRecordsCount(3);
+      BottomPane.response.validateRecordCount(3);
 
       dataSources.AssertTableInVirtuosoList(datasourceName, "NonAsciiTest");
 

diff --git a/app/client/cypress/e2e/Regression/ServerSide/QueryPane/S3_1_spec.js b/app/client/cypress/e2e/Regression/ServerSide/QueryPane/S3_1_spec.js
@@ -1,5 +1,7 @@
 /// <reference types="Cypress" />
 
+import BottomPane from "../../../../support/Pages/IDE/BottomPane";
+
 const queryLocators = require("../../../../locators/QueryEditor.json");
 const generatePage = require("../../../../locators/GeneratePage.json");
 const formControls = require("../../../../locators/FormControl.json");
@@ -189,8 +191,8 @@ describe(
       cy.typeValueNValidate(fileName, formControls.s3ListPrefix);
       dataSources.RunQuery({ toValidateResponse: false });
 
-      agHelper.GetNClick(dataSources._queryResponse("TABLE"));
-      agHelper.GetNClick(dataSources._queryResponse("JSON"));
+      BottomPane.response.switchResponseType("TABLE");
+      BottomPane.response.switchResponseType("JSON");
 
       cy.wait("@postExecute").then(({ response }) => {
         expect(response.body.data.isExecutionSuccess).to.eq(true);

diff --git a/app/client/cypress/support/Pages/DataSources.ts b/app/client/cypress/support/Pages/DataSources.ts
@@ -11,6 +11,7 @@ import EditorNavigation, {
 import datasource from "../../locators/DatasourcesEditor.json";
 import PageList from "./PageList";
 import { anvilLocators } from "./Anvil/Locators";
+import BottomPane from "./IDE/BottomPane";
 
 export const DataSourceKVP = {
   Postgres: "PostgreSQL",
@@ -1137,17 +1138,18 @@ export class DataSources {
     tableCheck = true,
   ) {
     this.RunQuery();
-    tableCheck &&
-      this.agHelper.AssertElementVisibility(this._queryResponse("TABLE"));
-    this.agHelper.AssertElementVisibility(this._queryResponse("JSON"));
-    this.agHelper.AssertElementVisibility(this._queryResponse("RAW"));
-    this.CheckResponseRecordsCount(expectedRecordsCount);
-  }
-
-  public CheckResponseRecordsCount(expectedRecordCount: number) {
-    this.agHelper.AssertElementVisibility(
-      this._queryRecordResult(expectedRecordCount),
-    );
+    if (tableCheck) {
+      this.agHelper.AssertElementVisibility(
+        BottomPane.response.getResponseTypeSelector("TABLE"),
+      );
+      this.agHelper.AssertElementVisibility(
+        BottomPane.response.getResponseTypeSelector("JSON"),
+      );
+      this.agHelper.AssertElementVisibility(
+        BottomPane.response.getResponseTypeSelector("RAW"),
+      );
+    }
+    BottomPane.response.validateRecordCount(expectedRecordsCount);
   }
 
   public CreateDataSource(

diff --git a/app/client/cypress/support/Pages/IDE/BottomPane/Response.ts b/app/client/cypress/support/Pages/IDE/BottomPane/Response.ts
@@ -0,0 +1,21 @@
+class Response {
+  private ResponseTab = "//button[@data-testid='t--tab-RESPONSE_TAB']";
+
+  public switchToResponseTab(): void {
+    cy.xpath(this.ResponseTab).click({ force: true });
+  }
+
+  public getResponseTypeSelector(type: string): string {
+    return `//div[@data-testid='t--response-tab-segmented-control']//span[text()='${type}']`;
+  }
+
+  public switchResponseType(type: string): void {
+    this.switchToResponseTab();
+    cy.xpath(this.getResponseTypeSelector(type)).click({ force: true });
+  }
+
+  // TODO: Implement this method when response UI is ready
+  public validateRecordCount(count: number): void {}
+}
+
+export { Response };
diff --git a/app/client/cypress/support/Pages/IDE/BottomPane/index.ts b/app/client/cypress/support/Pages/IDE/BottomPane/index.ts
@@ -0,0 +1,11 @@
+import { Response } from "./Response";
+
+class BottomPane {
+  public readonly response: Response;
+
+  constructor() {
+    this.response = new Response();
+  }
+}
+
+export default new BottomPane();