Merge pull request #4882 from nocodb/test/column-multiselect

refactor: tests better org & clean-up

tests/playwright/pages/Dashboard/Grid/Column/SelectOptionColumn.ts

@@ -36,6 +36,18 @@ export class SelectOptionColumnPageObject extends BasePage {
     if (!skipColumnModal && columnTitle) await this.column.save({ isUpdated: true });
   }
 
+  // add multiple options at once after column creation is completed
+  //
+  async addOptions({ columnTitle, options }: { columnTitle: string; options: string[] }) {
+    await this.column.openEdit({ title: columnTitle });
+    for (let i = 0; i < options.length; i++) {
+      await this.column.get().locator('button:has-text("Add option")').click();
+      await this.column.get().locator(`[data-testid="select-column-option-input-${i}"]`).click();
+      await this.column.get().locator(`[data-testid="select-column-option-input-${i}"]`).fill(options[i]);
+    }
+    await this.column.save({ isUpdated: true });
+  }
+
   async editOption({ columnTitle, index, newOption }: { index: number; columnTitle: string; newOption: string }) {
     await this.column.openEdit({ title: columnTitle });
 

tests/playwright/pages/Dashboard/Grid/Column/index.ts

@@ -77,16 +77,6 @@ export class ColumnPageObject extends BasePage {
     switch (type) {
       case 'SingleSelect':
       case 'MultiSelect':
-        await this.selectOption.addOption({
-          index: 0,
-          option: 'Option 1',
-          skipColumnModal: true,
-        });
-        await this.selectOption.addOption({
-          index: 1,
-          option: 'Option 2',
-          skipColumnModal: true,
-        });
         break;
       case 'Duration':
         if (format) {
@@ -279,7 +269,7 @@ export class ColumnPageObject extends BasePage {
     timeFormat?: string;
   }) {
     await this.getColumnHeader(title).locator('.nc-ui-dt-dropdown').click();
-    await this.rootPage.locator('li[role="menuitem"]:has-text("Edit")').click();
+    await this.rootPage.locator('li[role="menuitem"]:has-text("Edit")').last().click();
 
     await this.get().waitFor({ state: 'visible' });
 

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

@@ -28,8 +28,7 @@ export class ToolbarFilterPage extends BasePage {
     ).toBeChecked();
   }
 
-  // Todo: Handle the case of operator does not need a value
-  async addNew({
+  async add({
     columnTitle,
     opType,
     value,
@@ -83,7 +82,7 @@ export class ToolbarFilterPage extends BasePage {
     }
   }
 
-  async resetFilter() {
+  async reset() {
     await this.toolbar.clickFilter();
     await this.waitForResponse({
       uiAction: this.get().locator('.nc-filter-item-remove-btn').click(),

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

@@ -21,7 +21,7 @@ export class ToolbarSortPage extends BasePage {
     ).toHaveText(direction);
   }
 
-  async addSort({
+  async add({
     columnTitle,
     isAscending,
     isLocallySaved,
@@ -67,7 +67,7 @@ export class ToolbarSortPage extends BasePage {
   }
 
   // todo: remove this opening sort menu logic
-  async resetSort() {
+  async reset() {
     // open sort menu
     await this.toolbar.clickSort();
 

tests/playwright/tests/columnCheckbox.spec.ts

@@ -22,7 +22,7 @@ test.describe('Checkbox - cell, filter, sort', () => {
 
   async function verifyFilter(param: { opType: string; value?: string; result: string[] }) {
     await toolbar.clickFilter();
-    await toolbar.filter.addNew({
+    await toolbar.filter.add({
       columnTitle: 'checkbox',
       opType: param.opType,
       value: param.value,
@@ -33,7 +33,7 @@ test.describe('Checkbox - cell, filter, sort', () => {
     // verify filtered rows
     await validateRowArray(param.result);
     // Reset filter
-    await toolbar.filter.resetFilter();
+    await toolbar.filter.reset();
   }
 
   test.beforeEach(async ({ page }) => {
@@ -93,7 +93,7 @@ test.describe('Checkbox - cell, filter, sort', () => {
     await verifyFilter({ opType: 'is not null', result: ['1a', '1b', '1c', '1f'] });
 
     // Sort column
-    await toolbar.sort.addSort({
+    await toolbar.sort.add({
       columnTitle: 'checkbox',
       isAscending: true,
       isLocallySaved: false,
@@ -103,10 +103,10 @@ test.describe('Checkbox - cell, filter, sort', () => {
     } else {
       await validateRowArray(['1d', '1e', '1b', '1a', '1c', '1f']);
     }
-    await toolbar.sort.resetSort();
+    await toolbar.sort.reset();
 
     // sort descending & validate
-    await toolbar.sort.addSort({
+    await toolbar.sort.add({
       columnTitle: 'checkbox',
       isAscending: false,
       isLocallySaved: false,
@@ -116,7 +116,7 @@ test.describe('Checkbox - cell, filter, sort', () => {
     } else {
       await validateRowArray(['1a', '1c', '1f', '1b', '1d', '1e']);
     }
-    await toolbar.sort.resetSort();
+    await toolbar.sort.reset();
 
     // wait for 10 seconds
     await dashboard.rootPage.waitForTimeout(10000);

tests/playwright/tests/columnMultiSelect.spec.ts

@@ -15,6 +15,10 @@ test.describe('Multi select', () => {
     await dashboard.treeView.createTable({ title: 'sheet1' });
 
     await grid.column.create({ title: 'MultiSelect', type: 'MultiSelect' });
+    await grid.column.selectOption.addOptions({
+      columnTitle: 'MultiSelect',
+      options: ['Option 1', 'Option 2'],
+    });
     await grid.addNewRow({ index: 0, value: 'Row 0' });
   });
 

tests/playwright/tests/columnSingleSelect.spec.ts

@@ -15,6 +15,10 @@ test.describe('Single select', () => {
     await dashboard.treeView.createTable({ title: 'sheet1' });
 
     await grid.column.create({ title: 'SingleSelect', type: 'SingleSelect' });
+    await grid.column.selectOption.addOptions({
+      columnTitle: 'SingleSelect',
+      options: ['Option 1', 'Option 2'],
+    });
     await grid.addNewRow({ index: 0, value: 'Row 0' });
   });
 

tests/playwright/tests/keyboardShortcuts.spec.ts

@@ -156,10 +156,18 @@ test.describe('Verify shortcuts', () => {
       title: 'SingleSelect',
       type: 'SingleSelect',
     });
+    await dashboard.grid.column.selectOption.addOptions({
+      columnTitle: 'SingleSelect',
+      options: ['Option 1', 'Option 2'],
+    });
     await dashboard.grid.column.create({
       title: 'MultiSelect',
       type: 'MultiSelect',
     });
+    await dashboard.grid.column.selectOption.addOptions({
+      columnTitle: 'MultiSelect',
+      options: ['Option 1', 'Option 2'],
+    });
     await dashboard.grid.column.create({
       title: 'Checkbox',
       type: 'Checkbox',

tests/playwright/tests/metaSync.spec.ts

@@ -255,14 +255,14 @@ test.describe('Meta sync', () => {
     await dashboard.grid.toolbar.fields.click({ title: 'Col1' });
     await dashboard.grid.toolbar.clickFields();
 
-    await dashboard.grid.toolbar.sort.addSort({
+    await dashboard.grid.toolbar.sort.add({
       columnTitle: 'Col1',
       isAscending: false,
       isLocallySaved: false,
     });
 
     await dashboard.grid.toolbar.clickFilter();
-    await dashboard.grid.toolbar.filter.addNew({
+    await dashboard.grid.toolbar.filter.add({
       columnTitle: 'Col1',
       opType: '>=',
       value: '5',

tests/playwright/tests/toolbarOperations.spec.ts

@@ -48,16 +48,16 @@ test.describe('Toolbar operations (GRID)', () => {
 
     await validateFirstRow('Afghanistan');
     // Sort column
-    await toolbar.sort.addSort({ columnTitle: 'Country', isAscending: false, isLocallySaved: false });
+    await toolbar.sort.add({ columnTitle: 'Country', isAscending: false, isLocallySaved: false });
     await validateFirstRow('Zambia');
 
     // reset sort
-    await toolbar.sort.resetSort();
+    await toolbar.sort.reset();
     await validateFirstRow('Afghanistan');
 
     // Filter column
     await toolbar.clickFilter();
-    await toolbar.filter.addNew({
+    await toolbar.filter.add({
       columnTitle: 'Country',
       value: 'India',
       opType: 'is equal',
@@ -68,7 +68,7 @@ test.describe('Toolbar operations (GRID)', () => {
     await validateFirstRow('India');
 
     // Reset filter
-    await toolbar.filter.resetFilter();
+    await toolbar.filter.reset();
     await validateFirstRow('Afghanistan');
 
     await dashboard.closeTab({ title: 'Country' });

tests/playwright/tests/viewGridShare.spec.ts

@@ -33,14 +33,14 @@ test.describe('Shared view', () => {
     // hide column
     await dashboard.grid.toolbar.fields.toggle({ title: 'Address2' });
     // sort
-    await dashboard.grid.toolbar.sort.addSort({
+    await dashboard.grid.toolbar.sort.add({
       columnTitle: 'District',
       isAscending: false,
       isLocallySaved: false,
     });
     // filter
     await dashboard.grid.toolbar.clickFilter();
-    await dashboard.grid.toolbar.filter.addNew({
+    await dashboard.grid.toolbar.filter.add({
       columnTitle: 'Address',
       value: 'Ab',
       opType: 'is like',
@@ -101,7 +101,7 @@ test.describe('Shared view', () => {
      **/
 
     // create new sort & filter criteria in shared view
-    await sharedPage.grid.toolbar.sort.addSort({
+    await sharedPage.grid.toolbar.sort.add({
       columnTitle: 'Address',
       isAscending: true,
       isLocallySaved: true,
@@ -109,7 +109,7 @@ test.describe('Shared view', () => {
 
     if (isMysql(context)) {
       await sharedPage.grid.toolbar.clickFilter();
-      await sharedPage.grid.toolbar.filter.addNew({
+      await sharedPage.grid.toolbar.filter.add({
         columnTitle: 'District',
         value: 'Ta',
         opType: 'is like',
@@ -196,7 +196,7 @@ test.describe('Shared view', () => {
       isVisible: true,
     });
     await sharedPage2.grid.toolbar.clickFilter();
-    await sharedPage2.grid.toolbar.filter.addNew({
+    await sharedPage2.grid.toolbar.filter.add({
       columnTitle: 'Country',
       value: 'New Country',
       opType: 'is like',

tests/playwright/tests/viewKanban.spec.ts

@@ -118,7 +118,7 @@ test.describe('View', () => {
     });
 
     // verify sort
-    await toolbar.sort.addSort({
+    await toolbar.sort.add({
       columnTitle: 'Title',
       isAscending: false,
       isLocallySaved: false,
@@ -133,7 +133,7 @@ test.describe('View', () => {
         stackIndex: i,
         order: order2[i - 1],
       });
-    await toolbar.sort.resetSort();
+    await toolbar.sort.reset();
     // verify card order
     const order3 = [
       ['ACE GOLDFINGER', 'AFFAIR PREJUDICE', 'AFRICAN EGG'],
@@ -149,7 +149,7 @@ test.describe('View', () => {
     await toolbar.clickFilter({
       networkValidation: true,
     });
-    await toolbar.filter.addNew({
+    await toolbar.filter.add({
       columnTitle: 'Title',
       opType: 'is like',
       value: 'BA',
@@ -167,7 +167,7 @@ test.describe('View', () => {
         stackIndex: i,
         order: order4[i - 1],
       });
-    await toolbar.filter.resetFilter();
+    await toolbar.filter.reset();
     const order5 = [
       ['ACE GOLDFINGER', 'AFFAIR PREJUDICE', 'AFRICAN EGG'],
       ['ACADEMY DINOSAUR', 'AGENT TRUMAN', 'ALASKA PHANTOM'],
@@ -192,14 +192,14 @@ test.describe('View', () => {
       index: 1,
     });
 
-    await toolbar.sort.addSort({
+    await toolbar.sort.add({
       columnTitle: 'Title',
       isAscending: false,
       isLocallySaved: false,
     });
 
     await toolbar.clickFilter();
-    await toolbar.filter.addNew({
+    await toolbar.filter.add({
       columnTitle: 'Title',
       opType: 'is like',
       value: 'BA',
@@ -267,8 +267,8 @@ test.describe('View', () => {
     await toolbar.fields.toggleShowSystemFields();
     await toolbar.fields.toggle({ title: 'LanguageId' });
     await toolbar.fields.toggle({ title: 'Title' });
-    await toolbar.sort.resetSort();
-    await toolbar.filter.resetFilter();
+    await toolbar.sort.reset();
+    await toolbar.filter.reset();
 
     await kanban.addCard({ stackIndex: 6 });
     await dashboard.expandedForm.fillField({