test: User field test cases

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

@@ -14,37 +14,104 @@ export class UserOptionColumnPageObject extends BasePage {
     return this.column.get();
   }
 
-  async allowMultipleUser({ columnTitle, allowMultiple = false }: { columnTitle: string; allowMultiple?: boolean }) {
+  async allowMultipleUser({
+    columnTitle,
+    allowMultiple = false,
+  }: {
+    columnTitle: string;
+    allowMultiple?: boolean;
+  }): Promise<void> {
     await this.column.openEdit({ title: columnTitle });
-    const checkbox = this.get().locator('[data-testid="user-column-allow-multiple"]');
+    const checkbox = this.get().getByTestId('user-column-allow-multiple');
     const isChecked = await checkbox.isChecked();
 
     if ((isChecked && !allowMultiple) || (!isChecked && allowMultiple)) {
       await checkbox.click();
     }
-    await this.rootPage.waitForTimeout(5000);
     await this.column.save({ isUpdated: true });
   }
 
-  async verifyDefaultValueOptions({ columnTitle, totalCount }: { columnTitle: string; totalCount: number }) {
+  async selectDefaultValueOption({
+    columnTitle,
+    option,
+    multiSelect,
+  }: {
+    columnTitle: string;
+    option: string | string[];
+    multiSelect?: boolean;
+  }): Promise<void> {
+    // Verify allow multiple checkbox before selecting default value
+    await this.allowMultipleUser({ columnTitle, allowMultiple: multiSelect });
+
     await this.column.openEdit({ title: columnTitle });
 
-    await this.column.get().locator('.nc-cell-user').click();
+    // Clear previous default value
+    await this.clearDefaultValue();
 
-    const userDropdown = this.get().locator(`[data-testid="select-option-${columnTitle}-undefined"]`);
-    await userDropdown.waitFor({ state: 'visible' });
-    console.log('userDropdown::::', userDropdown);
+    const selector = this.column.get().locator('.nc-user-select >> .ant-select-selector');
+    await selector.click();
 
-    await expect(userDropdown).toHaveCount(totalCount);
-    await this.column.get().locator('.nc-cell-user').click();
+    if (multiSelect) {
+      const optionsToSelect = Array.isArray(option) ? option : [option];
+
+      for (const op of optionsToSelect) {
+        await this.selectOption({ option: op });
+      }
+    } else if (!Array.isArray(option)) {
+      await this.selectOption({ option });
+    }
 
     // Press `Escape` to close the dropdown
     await this.rootPage.keyboard.press('Escape');
-    await this.get().waitFor({ state: 'hidden' });
+    await this.rootPage.locator('.nc-dropdown-user-select-cell').waitFor({ state: 'hidden' });
+
+    await this.column.save({ isUpdated: true });
+  }
+
+  async selectOption({ option }: { option: string }) {
+    await this.get().locator('.ant-select-selection-search-input[aria-expanded="true"]').waitFor();
+    await this.get().locator('.ant-select-selection-search-input[aria-expanded="true"]').fill(option);
+
+    // Select user option
+    await this.rootPage.locator('.rc-virtual-list-holder-inner > div').locator(`text="${option}"`).click();
+  }
+
+  async clearDefaultValue(): Promise<void> {
+    await this.column.get().locator('.nc-cell-user + svg.nc-icon').click();
   }
-  async clearDefaultValueOptions({ columnTitle }: { columnTitle: string }) {
+
+  async verifyDefaultValueOptionCount({
+    columnTitle,
+    totalCount,
+  }: {
+    columnTitle: string;
+    totalCount: number;
+  }): Promise<void> {
     await this.column.openEdit({ title: columnTitle });
 
-    await this.column.get().locator('.nc-cell-user + svg').click();
+    await this.column.get().locator('.nc-cell-user > .nc-user-select').click();
+
+    expect(await this.rootPage.getByTestId(`select-option-${columnTitle}-undefined`).count()).toEqual(totalCount);
+    await this.column.get().locator('.nc-cell-user').click();
+
+    // Press `Cancel` to close edit modal
+    await this.column.get().locator('button:has-text("Cancel")').click();
+    await this.get().waitFor({ state: 'hidden' });
+  }
+
+  async verifySelectedOptions({ options, columnHeader }: { columnHeader: string; options: string[] }) {
+    await this.column.openEdit({ title: columnHeader });
+
+    const defaultValueSelector = this.get().locator('.nc-user-select >> .ant-select-selector');
+
+    let counter = 0;
+    for (const option of options) {
+      await expect(defaultValueSelector.locator(`.nc-selected-option`).nth(counter)).toHaveText(option);
+      counter++;
+    }
+
+    // Press `Cancel` to close edit modal
+    await this.column.get().locator('button:has-text("Cancel")').click();
+    await this.get().waitFor({ state: 'hidden' });
   }
 }

tests/playwright/tests/db/columns/columnUserSelect.spec.ts

@@ -25,13 +25,24 @@ test.describe('User single select', () => {
     await unsetup(context);
   });
 
-  //   test('Verify default value options count and select default value', async () => {
-  //     // await dashboard.grid.column.userOption.verifyDefaultValueOptions({ columnTitle: 'User', totalCount: 5 });
-  //     await dashboard.grid.column.userOption.allowMultipleUser({ columnTitle: 'User', allowMultiple: true });
-  //   });
+  test('Verify the default option count, select default value and verify', async () => {
+    await dashboard.grid.column.userOption.verifyDefaultValueOptionCount({ columnTitle: 'User', totalCount: 1 });
+
+    await dashboard.grid.column.userOption.selectDefaultValueOption({
+      columnTitle: 'User',
+      option: 'user-0@nocodb.com',
+      multiSelect: false,
+    });
+
+    // Verify default value
+    await dashboard.grid.column.userOption.verifySelectedOptions({
+      columnHeader: 'User',
+      options: ['user-0@nocodb.com'],
+    });
+  });
 
   test('Rename column title and delete the column', async () => {
-    // Update column title, refresh and verify
+    // Rename column title, refresh and verify
     await dashboard.grid.column.openEdit({ title: 'User' });
     await dashboard.grid.column.fillTitle({ title: 'UserField' });
     await dashboard.grid.column.save({