diff --git a/tests/playwright/pages/Dashboard/Grid/Column/UserOptionColumn.ts b/tests/playwright/pages/Dashboard/Grid/Column/UserOptionColumn.ts index 4f318f07b5..52feb78846 100644 --- a/tests/playwright/pages/Dashboard/Grid/Column/UserOptionColumn.ts +++ b/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 { 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 { + // 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 { + 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 { 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' }); } } diff --git a/tests/playwright/tests/db/columns/columnUserSelect.spec.ts b/tests/playwright/tests/db/columns/columnUserSelect.spec.ts index a4c08a5bd3..1acae45c9f 100644 --- a/tests/playwright/tests/db/columns/columnUserSelect.spec.ts +++ b/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({