test: sort & filter

Signed-off-by: Raju Udava <86527202+dstala@users.noreply.github.com>

tests/playwright/pages/Dashboard/common/Toolbar/Filter.ts

@@ -38,53 +38,53 @@ export class ToolbarFilterPage extends BasePage {
   }
 
   async add({
-    columnTitle,
-    opType,
-    opSubType,
+    title,
+    operation,
+    subOperation,
     value,
-    isLocallySaved,
+    locallySaved = false,
     dataType,
     openModal = false,
   }: {
-    columnTitle: string;
-    opType: string;
-    opSubType?: string; // for date datatype
+    title: string;
+    operation: string;
+    subOperation?: string; // for date datatype
     value?: string;
-    isLocallySaved: boolean;
+    locallySaved?: boolean;
     dataType?: string;
     openModal?: boolean;
   }) {
     if (!openModal) await this.get().locator(`button:has-text("Add Filter")`).first().click();
 
     const selectedField = await this.rootPage.locator('.nc-filter-field-select').textContent();
-    if (selectedField !== columnTitle) {
+    if (selectedField !== title) {
       await this.rootPage.locator('.nc-filter-field-select').last().click();
       await this.rootPage
         .locator('div.ant-select-dropdown.nc-dropdown-toolbar-field-list')
-        .locator(`div[label="${columnTitle}"]:visible`)
+        .locator(`div[label="${title}"]:visible`)
         .click();
     }
 
     const selectedOpType = await this.rootPage.locator('.nc-filter-operation-select').textContent();
-    if (selectedOpType !== opType) {
+    if (selectedOpType !== operation) {
       await this.rootPage.locator('.nc-filter-operation-select').click();
       // first() : filter list has >, >=
       await this.rootPage
         .locator('.nc-dropdown-filter-comp-op')
-        .locator(`.ant-select-item:has-text("${opType}")`)
+        .locator(`.ant-select-item:has-text("${operation}")`)
         .first()
         .click();
     }
 
     // subtype for date
-    if (dataType === UITypes.Date && opSubType) {
+    if (dataType === UITypes.Date && subOperation) {
       const selectedSubType = await this.rootPage.locator('.nc-filter-sub_operation-select').textContent();
-      if (selectedSubType !== opSubType) {
+      if (selectedSubType !== subOperation) {
         await this.rootPage.locator('.nc-filter-sub_operation-select').click();
         // first() : filter list has >, >=
         await this.rootPage
           .locator('.nc-dropdown-filter-comp-sub-op')
-          .locator(`.ant-select-item:has-text("${opSubType}")`)
+          .locator(`.ant-select-item:has-text("${subOperation}")`)
           .first()
           .click();
       }
@@ -115,7 +115,7 @@ export class ToolbarFilterPage extends BasePage {
           await this.rootPage.locator(`.ant-btn-primary:has-text("Ok")`).click();
           break;
         case UITypes.Date:
-          if (opSubType === 'exact date') {
+          if (subOperation === 'exact date') {
             await this.get().locator('.nc-filter-value-select').click();
             await this.rootPage.locator(`.ant-picker-dropdown:visible`);
             await this.rootPage.locator(`.ant-picker-cell-inner:has-text("${value}")`).click();
@@ -124,7 +124,7 @@ export class ToolbarFilterPage extends BasePage {
             await this.waitForResponse({
               uiAction: fillFilter,
               httpMethodsToMatch: ['GET'],
-              requestUrlPathToMatch: isLocallySaved ? `/api/v1/db/public/` : `/api/v1/db/data/noco/`,
+              requestUrlPathToMatch: locallySaved ? `/api/v1/db/public/` : `/api/v1/db/data/noco/`,
             });
             await this.toolbar.parent.dashboard.waitForLoaderToDisappear();
             await this.toolbar.parent.waitLoading();
@@ -174,7 +174,7 @@ export class ToolbarFilterPage extends BasePage {
           await this.waitForResponse({
             uiAction: fillFilter,
             httpMethodsToMatch: ['GET'],
-            requestUrlPathToMatch: isLocallySaved ? `/api/v1/db/public/` : `/api/v1/db/data/noco/`,
+            requestUrlPathToMatch: locallySaved ? `/api/v1/db/public/` : `/api/v1/db/data/noco/`,
           });
           await this.toolbar.parent.dashboard.waitForLoaderToDisappear();
           await this.toolbar.parent.waitLoading();

tests/playwright/pages/Dashboard/common/Toolbar/Sort.ts

@@ -25,27 +25,19 @@ export class ToolbarSortPage extends BasePage {
     ).toHaveText(direction);
   }
 
-  async add({
-    columnTitle,
-    isAscending,
-    isLocallySaved,
-  }: {
-    columnTitle: string;
-    isAscending: boolean;
-    isLocallySaved: boolean;
-  }) {
+  async add({ title, ascending, locallySaved }: { title: string; ascending: boolean; locallySaved: boolean }) {
     // open sort menu
     await this.toolbar.clickSort();
 
     await this.get().locator(`button:has-text("Add Sort Option")`).click();
 
     // read content of the dropdown
-    const col = await this.rootPage.locator('.nc-sort-field-select').textContent();
-    if (col !== columnTitle) {
+    const col = await this.rootPage.locator('.nc-sort-field-select').last().textContent();
+    if (col !== title) {
       await this.rootPage.locator('.nc-sort-field-select').last().click();
       await this.rootPage
         .locator('div.ant-select-dropdown.nc-dropdown-toolbar-field-list')
-        .locator(`div[label="${columnTitle}"]`)
+        .locator(`div[label="${title}"]`)
         .last()
         .click();
     }
@@ -68,14 +60,15 @@ export class ToolbarSortPage extends BasePage {
     const selectSortDirection = () =>
       this.rootPage
         .locator('.nc-dropdown-sort-dir')
+        .last()
         .locator('.ant-select-item')
-        .nth(isAscending ? 0 : 1)
+        .nth(ascending ? 0 : 1)
         .click();
 
     await this.waitForResponse({
       uiAction: selectSortDirection,
       httpMethodsToMatch: ['GET'],
-      requestUrlPathToMatch: isLocallySaved ? `/api/v1/db/public/` : `/api/v1/db/data/noco/`,
+      requestUrlPathToMatch: locallySaved ? `/api/v1/db/public/` : `/api/v1/db/data/noco/`,
     });
     await this.toolbar.parent.dashboard.waitForLoaderToDisappear();
     // close sort menu
@@ -88,7 +81,7 @@ export class ToolbarSortPage extends BasePage {
     // open sort menu
     await this.toolbar.clickSort();
 
-    await this.get().locator('.nc-sort-item-remove-btn').click();
+    await this.get().locator('.nc-sort-item-remove-btn').last().click();
 
     // close sort menu
     await this.toolbar.clickSort();

tests/playwright/tests/columnCheckbox.spec.ts

@@ -22,10 +22,10 @@ test.describe('Checkbox - cell, filter, sort', () => {
   async function verifyFilter(param: { opType: string; value?: string; result: string[] }) {
     await toolbar.clickFilter();
     await toolbar.filter.add({
-      columnTitle: 'checkbox',
-      opType: param.opType,
+      title: 'checkbox',
+      operation: param.opType,
       value: param.value,
-      isLocallySaved: false,
+      locallySaved: false,
       dataType: 'Checkbox',
     });
     await toolbar.clickFilter();
@@ -94,18 +94,18 @@ test.describe('Checkbox - cell, filter, sort', () => {
 
     // Sort column
     await toolbar.sort.add({
-      columnTitle: 'checkbox',
-      isAscending: true,
-      isLocallySaved: false,
+      title: 'checkbox',
+      ascending: true,
+      locallySaved: false,
     });
     await validateRowArray(['1b', '1d', '1e', '1a', '1c', '1f']);
     await toolbar.sort.reset();
 
     // sort descending & validate
     await toolbar.sort.add({
-      columnTitle: 'checkbox',
-      isAscending: false,
-      isLocallySaved: false,
+      title: 'checkbox',
+      ascending: false,
+      locallySaved: false,
     });
     await validateRowArray(['1a', '1c', '1f', '1b', '1d', '1e']);
     await toolbar.sort.reset();

tests/playwright/tests/columnMultiSelect.spec.ts

@@ -241,10 +241,10 @@ test.describe('Multi select - filters', () => {
   async function verifyFilter(param: { opType: string; value?: string; result: string[] }) {
     await toolbar.clickFilter();
     await toolbar.filter.add({
-      columnTitle: 'MultiSelect',
-      opType: param.opType,
+      title: 'MultiSelect',
+      operation: param.opType,
       value: param.value,
-      isLocallySaved: false,
+      locallySaved: false,
       dataType: 'MultiSelect',
     });
     await toolbar.clickFilter();
@@ -267,18 +267,18 @@ test.describe('Multi select - filters', () => {
 
     // Sort column
     await toolbar.sort.add({
-      columnTitle: 'MultiSelect',
-      isAscending: true,
-      isLocallySaved: false,
+      title: 'MultiSelect',
+      ascending: true,
+      locallySaved: false,
     });
     await validateRowArray(['1', '3', '4', '2', '5', '6']);
     await toolbar.sort.reset();
 
     // sort descending & validate
     await toolbar.sort.add({
-      columnTitle: 'MultiSelect',
-      isAscending: false,
-      isLocallySaved: false,
+      title: 'MultiSelect',
+      ascending: false,
+      locallySaved: false,
     });
     await validateRowArray(['6', '5', '2', '4', '3', '1']);
     await toolbar.sort.reset();

tests/playwright/tests/columnRating.spec.ts

@@ -22,10 +22,10 @@ test.describe('Rating - cell, filter, sort', () => {
   async function verifyFilter(param: { opType: string; value?: string; result: string[] }) {
     await toolbar.clickFilter();
     await toolbar.filter.add({
-      columnTitle: 'rating',
-      opType: param.opType,
+      title: 'rating',
+      operation: param.opType,
       value: param.value,
-      isLocallySaved: false,
+      locallySaved: false,
       dataType: 'Rating',
     });
     await toolbar.clickFilter();
@@ -88,18 +88,18 @@ test.describe('Rating - cell, filter, sort', () => {
 
     // Sort column
     await toolbar.sort.add({
-      columnTitle: 'rating',
-      isAscending: true,
-      isLocallySaved: false,
+      title: 'rating',
+      ascending: true,
+      locallySaved: false,
     });
     await validateRowArray(['1b', '1d', '1e', '1f', '1c', '1a']);
     await toolbar.sort.reset();
 
     // sort descending & validate
     await toolbar.sort.add({
-      columnTitle: 'rating',
-      isAscending: false,
-      isLocallySaved: false,
+      title: 'rating',
+      ascending: false,
+      locallySaved: false,
     });
     await validateRowArray(['1a', '1c', '1f', '1b', '1d', '1e']);
     await toolbar.sort.reset();

tests/playwright/tests/columnSingleSelect.spec.ts

@@ -150,10 +150,10 @@ test.describe('Single select - filter & sort', () => {
   async function verifyFilter(param: { opType: string; value?: string; result: string[] }) {
     await toolbar.clickFilter();
     await toolbar.filter.add({
-      columnTitle: 'SingleSelect',
-      opType: param.opType,
+      title: 'SingleSelect',
+      operation: param.opType,
       value: param.value,
-      isLocallySaved: false,
+      locallySaved: false,
       dataType: 'SingleSelect',
     });
     await toolbar.clickFilter();
@@ -171,18 +171,18 @@ test.describe('Single select - filter & sort', () => {
 
     // Sort column
     await toolbar.sort.add({
-      columnTitle: 'SingleSelect',
-      isAscending: true,
-      isLocallySaved: false,
+      title: 'SingleSelect',
+      ascending: true,
+      locallySaved: false,
     });
     await validateRowArray(['1', '3', '4', '2']);
     await toolbar.sort.reset();
 
     // sort descending & validate
     await toolbar.sort.add({
-      columnTitle: 'SingleSelect',
-      isAscending: false,
-      isLocallySaved: false,
+      title: 'SingleSelect',
+      ascending: false,
+      locallySaved: false,
     });
     await validateRowArray(['2', '4', '3', '1']);
     await toolbar.sort.reset();

tests/playwright/tests/expandedFormUrl.spec.ts

@@ -151,10 +151,10 @@ test.describe('Expanded record duplicate & delete options', () => {
     // create filter to narrow down the number of records
     await toolbar.clickFilter();
     await toolbar.filter.add({
-      columnTitle: 'FirstName',
-      opType: 'is equal',
+      title: 'FirstName',
+      operation: 'is equal',
       value: 'NICK',
-      isLocallySaved: false,
+      locallySaved: false,
     });
     await toolbar.clickFilter();
 

tests/playwright/tests/filters.spec.ts

@@ -60,11 +60,11 @@ async function verifyFilter_withFixedModal(param: {
   }
 
   await toolbar.filter.add({
-    columnTitle: param.column,
-    opType: param.opType,
-    opSubType: param.opSubType,
+    title: param.column,
+    operation: param.opType,
+    subOperation: param.opSubType,
     value: param.value,
-    isLocallySaved: false,
+    locallySaved: false,
     dataType: param?.dataType,
     openModal: true,
   });
@@ -90,11 +90,11 @@ async function verifyFilter(param: {
 
   await toolbar.clickFilter();
   await toolbar.filter.add({
-    columnTitle: param.column,
-    opType: param.opType,
-    opSubType: param.opSubType,
+    title: param.column,
+    operation: param.opType,
+    subOperation: param.opSubType,
     value: param.value,
-    isLocallySaved: false,
+    locallySaved: false,
     dataType: param?.dataType,
   });
   await toolbar.clickFilter();
@@ -1271,10 +1271,10 @@ test.describe('Filter Tests: Toggle button', () => {
 
     await toolbar.clickFilter({ networkValidation: false });
     await toolbar.filter.add({
-      columnTitle: 'Country',
-      opType: 'is null',
+      title: 'Country',
+      operation: 'is null',
       value: null,
-      isLocallySaved: false,
+      locallySaved: false,
       dataType: 'SingleLineText',
     });
     await toolbar.clickFilter({ networkValidation: false });

tests/playwright/tests/metaSync.spec.ts

@@ -258,17 +258,17 @@ test.describe('Meta sync', () => {
     await dashboard.grid.toolbar.clickFields();
 
     await dashboard.grid.toolbar.sort.add({
-      columnTitle: 'Col2',
-      isAscending: false,
-      isLocallySaved: false,
+      title: 'Col2',
+      ascending: false,
+      locallySaved: false,
     });
 
     await dashboard.grid.toolbar.clickFilter();
     await dashboard.grid.toolbar.filter.add({
-      columnTitle: 'Col2',
-      opType: '>=',
+      title: 'Col2',
+      operation: '>=',
       value: '5',
-      isLocallySaved: false,
+      locallySaved: false,
     });
     await dashboard.grid.toolbar.clickFilter();
 

tests/playwright/tests/toolbarOperations.spec.ts

@@ -48,7 +48,7 @@ test.describe('Toolbar operations (GRID)', () => {
 
     await validateFirstRow('Afghanistan');
     // Sort column
-    await toolbar.sort.add({ columnTitle: 'Country', isAscending: false, isLocallySaved: false });
+    await toolbar.sort.add({ title: 'Country', ascending: false, locallySaved: false });
     await validateFirstRow('Zambia');
 
     // reset sort
@@ -58,10 +58,10 @@ test.describe('Toolbar operations (GRID)', () => {
     // Filter column
     await toolbar.clickFilter();
     await toolbar.filter.add({
-      columnTitle: 'Country',
+      title: 'Country',
       value: 'India',
-      opType: 'is equal',
-      isLocallySaved: false,
+      operation: 'is equal',
+      locallySaved: false,
     });
     await toolbar.clickFilter();
 

tests/playwright/tests/undo-redo.spec.ts

@@ -215,6 +215,71 @@ test.describe('Undo Redo', () => {
     await undo({ page });
     await verifyFieldsOrder(['Number', 'Decimal', 'Currency']);
   });
+
+  test('Fields: Sort', async ({ page }) => {
+    await dashboard.closeTab({ title: 'Team & Auth' });
+    await dashboard.treeView.openTable({ title: 'numberBased' });
+
+    async function verifyRecords({ sorted }: { sorted: boolean }) {
+      // inserted values
+      const expectedSorted = [NaN, 33, 33, 34, 44, 267, 333, 456, 3234, 8754];
+      const expectedUnsorted = [33, NaN, 456, 333, 267, 34, 8754, 3234, 44, 33];
+
+      const currentRecords: Record<string, any> = await api.dbTableRow.list('noco', context.project.id, table.id, {
+        fields: ['Number'],
+        limit: 100,
+        sort: sorted ? ['Number'] : [],
+      });
+
+      // verify if expectedValues are same as currentRecords
+      expect(currentRecords.list.map(r => parseInt(r.Number))).toEqual(sorted ? expectedSorted : expectedUnsorted);
+    }
+
+    await toolbar.sort.add({ title: 'Number', ascending: true, locallySaved: false });
+    await verifyRecords({ sorted: true });
+    await toolbar.sort.reset();
+    await verifyRecords({ sorted: false });
+
+    await undo({ page });
+    await verifyRecords({ sorted: true });
+    await undo({ page });
+    await verifyRecords({ sorted: false });
+  });
+
+  test('Fields: Filter', async ({ page }) => {
+    await dashboard.closeTab({ title: 'Team & Auth' });
+    await dashboard.treeView.openTable({ title: 'numberBased' });
+
+    async function verifyRecords({ filtered }: { filtered: boolean }) {
+      // inserted values
+      const expectedFiltered = [33, 33];
+      const expectedUnfiltered = [33, NaN, 456, 333, 267, 34, 8754, 3234, 44, 33];
+
+      const currentRecords: Record<string, any> = await api.dbTableRow.list('noco', context.project.id, table.id, {
+        fields: ['Number'],
+        limit: 100,
+        where: filtered ? '(Number,eq,33)' : '',
+      });
+
+      // verify if expectedValues are same as currentRecords
+      expect(currentRecords.list.map(r => parseInt(r.Number))).toEqual(
+        filtered ? expectedFiltered : expectedUnfiltered
+      );
+    }
+
+    await toolbar.clickFilter();
+    await toolbar.filter.add({ title: 'Number', operation: '=', value: '33' });
+    await toolbar.clickFilter();
+
+    await verifyRecords({ filtered: true });
+    await toolbar.filter.reset();
+    await verifyRecords({ filtered: false });
+
+    await undo({ page });
+    await verifyRecords({ filtered: true });
+    await undo({ page });
+    await verifyRecords({ filtered: false });
+  });
 });
 
 test.describe('Undo Redo - 2', () => {

tests/playwright/tests/viewGridShare.spec.ts

@@ -34,17 +34,17 @@ test.describe('Shared view', () => {
     await dashboard.grid.toolbar.fields.toggle({ title: 'Address2' });
     // sort
     await dashboard.grid.toolbar.sort.add({
-      columnTitle: 'District',
-      isAscending: false,
-      isLocallySaved: false,
+      title: 'District',
+      ascending: false,
+      locallySaved: false,
     });
     // filter
     await dashboard.grid.toolbar.clickFilter();
     await dashboard.grid.toolbar.filter.add({
-      columnTitle: 'Address',
+      title: 'Address',
       value: 'Ab',
-      opType: 'is like',
-      isLocallySaved: false,
+      operation: 'is like',
+      locallySaved: false,
     });
     await dashboard.grid.toolbar.clickFilter();
 
@@ -103,18 +103,18 @@ test.describe('Shared view', () => {
     // create new sort & filter criteria in shared view
     await sharedPage.grid.toolbar.sort.reset();
     await sharedPage.grid.toolbar.sort.add({
-      columnTitle: 'Address',
-      isAscending: true,
-      isLocallySaved: true,
+      title: 'Address',
+      ascending: true,
+      locallySaved: true,
     });
 
     if (isMysql(context)) {
       await sharedPage.grid.toolbar.clickFilter();
       await sharedPage.grid.toolbar.filter.add({
-        columnTitle: 'District',
+        title: 'District',
         value: 'Ta',
-        opType: 'is like',
-        isLocallySaved: true,
+        operation: 'is like',
+        locallySaved: true,
       });
       await sharedPage.grid.toolbar.clickFilter();
     }
@@ -198,10 +198,10 @@ test.describe('Shared view', () => {
     });
     await sharedPage2.grid.toolbar.clickFilter();
     await sharedPage2.grid.toolbar.filter.add({
-      columnTitle: 'Country',
+      title: 'Country',
       value: 'New Country',
-      opType: 'is like',
-      isLocallySaved: true,
+      operation: 'is like',
+      locallySaved: true,
     });
     await sharedPage2.grid.toolbar.clickFilter();
 

tests/playwright/tests/viewKanban.spec.ts

@@ -119,9 +119,9 @@ test.describe('View', () => {
 
     // verify sort
     await toolbar.sort.add({
-      columnTitle: 'Title',
-      isAscending: false,
-      isLocallySaved: false,
+      title: 'Title',
+      ascending: false,
+      locallySaved: false,
     });
     // verify card order
     const order2 = [
@@ -150,10 +150,10 @@ test.describe('View', () => {
       networkValidation: true,
     });
     await toolbar.filter.add({
-      columnTitle: 'Title',
-      opType: 'is like',
+      title: 'Title',
+      operation: 'is like',
       value: 'BA',
-      isLocallySaved: false,
+      locallySaved: false,
     });
     await toolbar.clickFilter();
 
@@ -193,17 +193,17 @@ test.describe('View', () => {
     });
 
     await toolbar.sort.add({
-      columnTitle: 'Title',
-      isAscending: false,
-      isLocallySaved: false,
+      title: 'Title',
+      ascending: false,
+      locallySaved: false,
     });
 
     await toolbar.clickFilter();
     await toolbar.filter.add({
-      columnTitle: 'Title',
-      opType: 'is like',
+      title: 'Title',
+      operation: 'is like',
       value: 'BA',
-      isLocallySaved: false,
+      locallySaved: false,
     });
     await toolbar.clickFilter();