add test to check sortBy as label and value

appsmithorg · Jul 26, 2024 · 7f93e56 · 7f93e56
1 parent a78f61e
commit 7f93e56
Show file tree

Hide file tree

Showing 2 changed files with 140 additions and 4 deletions.
diff --git a/app/client/cypress/e2e/Regression/ClientSide/Widgets/TableV2/TableV2_Sorting_spec.js b/app/client/cypress/e2e/Regression/ClientSide/Widgets/TableV2/TableV2_Sorting_spec.js
@@ -1,15 +1,66 @@
+import { featureFlagIntercept } from "../../../../../support/Objects/FeatureFlags";
 import * as _ from "../../../../../support/Objects/ObjectsCore";
 const testdata = require("../../../../../fixtures/testdata.json");
+const commonlocators = require("../../../../../locators/commonlocators.json");
+import PageList from "../../../../../support/Pages/PageList";
+
+const demoTableData = `
+        {{
+[
+  {
+    role: 1,
+    id: 1,
+    name: "Alice Johnson",
+    email: "alice.johnson@example.com",
+    age: 28,
+    gender: 2
+  },
+  {
+    role: 2,
+    id: 2,
+    name: "Bob Smith",
+    email: "bob.smith@example.com",
+    age: 34,
+    gender: 1
+  },
+  {
+    role: 3,
+    id: 3,
+    name: "Charlie Brown",
+    email: "charlie.brown@example.com",
+    age: 25,
+    gender: 3
+  },
+  {
+    role: 2,
+    id: 4,
+    name: "Diana Prince",
+    email: "diana.prince@example.com",
+    age: 30,
+    gender: 2
+  },
+  {
+    role: 1,
+    id: 5,
+    name: "Evan Williams",
+    email: "evan.williams@example.com",
+    age: 27,
+    gender: 1
+  }
+]
+}}
+        `;
 
 describe(
   "Table Widget V2 Sorting",
   { tags: ["@tag.Widget", "@tag.Table"] },
   function () {
-    before(() => {
-      _.agHelper.AddDsl("tableV2NewDslWithPagination");
+    beforeEach(() => {
+      PageList.AddNewPage();
     });
 
-    it("verifies that table sorting works for a custom column with computed value even when it is renamed", function () {
+    it("1. Verifies that table sorting works for a custom column with computed value even when it is renamed", function () {
+      _.agHelper.AddDsl("tableV2NewDslWithPagination");
       cy.openPropertyPane("tablewidgetv2");
       cy.addColumnV2("customColumn1");
       cy.editColumn("customColumn1");
@@ -64,5 +115,89 @@ describe(
         expect(data).to.eq("8");
       });
     });
+
+    it("2. Verifies that default sorting works for a select column using the value property", function () {
+      // This flag is turned on to allow the label show in the table select cell content
+      // when this feature is turned on fully, this flag will be removed
+      featureFlagIntercept({ release_table_cell_label_value_enabled: true });
+      cy.dragAndDropToCanvas("tablewidgetv2", { x: 350, y: 500 });
+      _.propPane.EnterJSContext("Table data", demoTableData);
+
+      // edit role column to select type
+      cy.openPropertyPane("tablewidgetv2");
+      cy.editColumn("role");
+      cy.get(commonlocators.changeColType).last().click();
+      cy.get(".t--dropdown-option").children().contains("Select").click();
+      cy.wait("@updateLayout");
+
+      // add dummy select data to the column
+      cy.get(".t--property-control-options").should("exist");
+      cy.updateCodeInput(
+        ".t--property-control-options",
+        `
+      {{
+        [
+          {"label": "Software Engineer",
+          "value": 1,},
+          {"label": "Product Manager",
+          "value": 2,},
+          {"label": "UX Designer",
+          "value": 3,}
+        ]  
+      }}
+    `,
+      );
+      cy.backFromPropertyPanel();
+
+      // sort the column in ascending order
+      cy.sortColumn("role", "ascending");
+      cy.readTableV2data(0, 0).then((data) => {
+        expect(data).to.eq("Software Engineer");
+      });
+    });
+
+    it("3. Verifies that sorting works for the select column type when sortBy is set to label", function () {
+      // This flag is turned on to allow the label show in the table select cell content
+      // when this feature is turned on fully, this flag will be removed
+      featureFlagIntercept({ release_table_cell_label_value_enabled: true });
+      cy.dragAndDropToCanvas("tablewidgetv2", { x: 350, y: 500 });
+      _.propPane.EnterJSContext("Table data", demoTableData);
+
+      // edit role column to select type
+      cy.openPropertyPane("tablewidgetv2");
+      cy.editColumn("role");
+      cy.get(commonlocators.changeColType).last().click();
+      cy.get(".t--dropdown-option").children().contains("Select").click();
+
+      // change sortBy to label
+      cy.get(commonlocators.changeSortBy).last().click();
+      cy.get(".t--dropdown-option").children().contains("Label").click();
+      cy.wait("@updateLayout");
+
+      // add dummy select data to the column
+      cy.get(".t--property-control-options").should("exist");
+      cy.updateCodeInput(
+        ".t--property-control-options",
+        `
+      {{
+        [
+          {"label": "Software Engineer",
+          "value": 1,},
+          {"label": "Product Manager",
+          "value": 2,},
+          {"label": "UX Designer",
+          "value": 3,}
+        ]  
+      }}
+    `,
+      );
+      cy.backFromPropertyPanel();
+
+      // sort the column in ascending order
+      cy.sortColumn("role", "ascending");
+      cy.readTableV2data(0, 0).then((data) => {
+        expect(data).to.eq("Product Manager");
+      });
+    });
   },
 );
diff --git a/app/client/cypress/locators/commonlocators.json b/app/client/cypress/locators/commonlocators.json
@@ -106,6 +106,7 @@
   "editColTitle": ".t--property-pane-title",
   "editColText": ".t--property-pane-title span",
   "changeColType": ".t--property-control-columntype input",
+  "changeSortBy": ".t--property-control-sortby input",
   "selectedColType": ".t--property-control-columntype button span",
   "collapsesection": ".t--property-pane-section-collapse-general .bp3-icon",
   "selectTab": ".t--tab-Tab",
@@ -241,4 +242,4 @@
   "clientSideSearch": ".t--property-control-clientsidesearch input[type='checkbox']",
   "enableClientSideSearch": ".t--property-control-enableclientsidesearch input[type='checkbox']",
   "fixedFooterInput": ".t--property-control-fixedfooter input"
-}
+}