From 51500bd7d7e7fa8d6e5215665f7eceaa439b3463 Mon Sep 17 00:00:00 2001 From: Ramesh Mane <101566080+rameshmane7218@users.noreply.github.com> Date: Wed, 13 Dec 2023 20:50:13 +0530 Subject: [PATCH] test: user option cell operations --- .../nc-gui/components/smartsheet/Cell.vue | 2 +- .../Dashboard/Grid/Column/UserOptionColumn.ts | 7 +- .../Dashboard/common/Cell/UserOptionCell.ts | 154 ++++++++++++++++++ .../pages/Dashboard/common/Cell/index.ts | 3 + 4 files changed, 163 insertions(+), 3 deletions(-) create mode 100644 tests/playwright/pages/Dashboard/common/Cell/UserOptionCell.ts diff --git a/packages/nc-gui/components/smartsheet/Cell.vue b/packages/nc-gui/components/smartsheet/Cell.vue index 3436ef4724..672230bc36 100644 --- a/packages/nc-gui/components/smartsheet/Cell.vue +++ b/packages/nc-gui/components/smartsheet/Cell.vue @@ -246,7 +246,7 @@ onUnmounted(() => { - + diff --git a/tests/playwright/pages/Dashboard/Grid/Column/UserOptionColumn.ts b/tests/playwright/pages/Dashboard/Grid/Column/UserOptionColumn.ts index d261b1d491..4f318f07b5 100644 --- a/tests/playwright/pages/Dashboard/Grid/Column/UserOptionColumn.ts +++ b/tests/playwright/pages/Dashboard/Grid/Column/UserOptionColumn.ts @@ -31,13 +31,16 @@ export class UserOptionColumnPageObject extends BasePage { await this.column.get().locator('.nc-cell-user').click(); - const userDropdown = this.get().locator('[data-testid="select-option-User-undefined"]'); + const userDropdown = this.get().locator(`[data-testid="select-option-${columnTitle}-undefined"]`); await userDropdown.waitFor({ state: 'visible' }); console.log('userDropdown::::', userDropdown); await expect(userDropdown).toHaveCount(totalCount); await this.column.get().locator('.nc-cell-user').click(); - await this.column.save({ isUpdated: true }); + + // Press `Escape` to close the dropdown + await this.rootPage.keyboard.press('Escape'); + await this.get().waitFor({ state: 'hidden' }); } async clearDefaultValueOptions({ columnTitle }: { columnTitle: string }) { await this.column.openEdit({ title: columnTitle }); diff --git a/tests/playwright/pages/Dashboard/common/Cell/UserOptionCell.ts b/tests/playwright/pages/Dashboard/common/Cell/UserOptionCell.ts new file mode 100644 index 0000000000..c7a7a09e86 --- /dev/null +++ b/tests/playwright/pages/Dashboard/common/Cell/UserOptionCell.ts @@ -0,0 +1,154 @@ +import { expect } from '@playwright/test'; +import { CellPageObject } from '.'; +import BasePage from '../../../Base'; + +export class UserOptionCellPageObject extends BasePage { + readonly cell: CellPageObject; + + constructor(cell: CellPageObject) { + super(cell.rootPage); + this.cell = cell; + } + + get({ index, columnHeader }: { index: number; columnHeader: string }) { + return this.cell.get({ index, columnHeader }); + } + + async select({ + index, + columnHeader, + option, + multiSelect, + }: { + index: number; + columnHeader: string; + option: string; + multiSelect?: boolean; + }) { + const selectCell = this.get({ index, columnHeader }); + + // check if cell active + if ( + !(await selectCell.getAttribute('class')).includes('active') && + (await selectCell.locator('.nc-selected-option').count()) === 0 + ) { + await selectCell.click(); + } + + await selectCell.click(); + + if (index === -1) + await this.rootPage.getByTestId(`select-option-${columnHeader}-undefined`).getByText(option).click(); + else await this.rootPage.getByTestId(`select-option-${columnHeader}-${index}`).getByText(option).click(); + + if (multiSelect) await this.get({ index, columnHeader }).click(); + + await this.rootPage + .getByTestId(`select-option-${columnHeader}-${index}`) + .getByText(option) + .waitFor({ state: 'hidden' }); + } + + async clear({ index, columnHeader, multiSelect }: { index: number; columnHeader: string; multiSelect?: boolean }) { + if (multiSelect) { + await this.cell.get({ index, columnHeader }).click(); + await this.cell.get({ index, columnHeader }).click(); + + const optionCount = await this.cell.get({ index, columnHeader }).locator('.ant-tag').count(); + + for (let i = 0; i < optionCount; i++) { + await this.cell.get({ index, columnHeader }).locator('.ant-tag > .ant-tag-close-icon').first().click(); + // wait till number of options is less than before + await this.cell + .get({ index, columnHeader }) + .locator('.ant-tag') + .nth(optionCount - i - 1) + .waitFor({ state: 'hidden' }); + } + return; + } + + await this.get({ index, columnHeader }).click(); + await this.rootPage.locator('.ant-tag > .ant-tag-close-icon').click(); + + // Press `Escape` to close the dropdown + await this.rootPage.keyboard.press('Escape'); + await this.rootPage.locator('.nc-dropdown-user-select-cell').waitFor({ state: 'hidden' }); + } + + async verify({ + index = 0, + columnHeader, + option, + multiSelect, + }: { + index?: number; + columnHeader: string; + option: string; + multiSelect?: boolean; + }) { + if (multiSelect) { + return await expect(this.cell.get({ index, columnHeader })).toContainText(option, { useInnerText: true }); + } + + const locator = this.cell.get({ index, columnHeader }).locator('.ant-tag'); + await locator.waitFor({ state: 'visible' }); + const text = await locator.allInnerTexts(); + return expect(text).toContain(option); + } + + async verifyNoOptionsSelected({ index, columnHeader }: { index: number; columnHeader: string }) { + return await expect( + this.cell.get({ index, columnHeader }).locator('.ant-select-selection-overflow-item >> .ant-tag') + ).toBeHidden(); + } + + async verifyOptions({ + index = 0, + columnHeader, + options, + }: { + index?: number; + columnHeader: string; + options: string[]; + }) { + const selectCell = this.get({ index, columnHeader }); + + // check if cell active + // drag based non-primary cell will have 'active' attribute + // primary cell with blue border will have 'active-cell' attribute + if (!(await selectCell.getAttribute('class')).includes('active-cell')) { + await selectCell.click(); + } + + await this.get({ index, columnHeader }).click(); + await this.rootPage.waitForTimeout(500); + + let counter = 0; + for (const option of options) { + await expect(this.rootPage.locator(`div.ant-select-item-option`).nth(counter)).toHaveText(option); + counter++; + } + await this.rootPage.keyboard.press('Escape'); + await this.rootPage.locator(`.nc-dropdown-user-select-cell`).nth(index).waitFor({ state: 'hidden' }); + } + + async verifySelectedOptions({ + index, + options, + columnHeader, + }: { + columnHeader: string; + options: string[]; + index: number; + }) { + const selectCell = this.get({ index, columnHeader }); + await selectCell.click(); + + let counter = 0; + for (const option of options) { + await expect(selectCell.locator(`.nc-selected-option`).nth(counter)).toHaveText(option); + counter++; + } + } +} diff --git a/tests/playwright/pages/Dashboard/common/Cell/index.ts b/tests/playwright/pages/Dashboard/common/Cell/index.ts index 1e35e1622a..c1fdff7c1a 100644 --- a/tests/playwright/pages/Dashboard/common/Cell/index.ts +++ b/tests/playwright/pages/Dashboard/common/Cell/index.ts @@ -13,6 +13,7 @@ import { getTextExcludeIconText } from '../../../../tests/utils/general'; import { YearCellPageObject } from './YearCell'; import { TimeCellPageObject } from './TimeCell'; import { GroupPageObject } from '../../Grid/Group'; +import { UserOptionCellPageObject } from './UserOptionCell'; export interface CellProps { indexMap?: Array; @@ -31,6 +32,7 @@ export class CellPageObject extends BasePage { readonly geoData: GeoDataCellPageObject; readonly date: DateCellPageObject; readonly dateTime: DateTimeCellPageObject; + readonly userOption: UserOptionCellPageObject; constructor(parent: GridPage | SharedFormPage | GroupPageObject) { super(parent.rootPage); @@ -44,6 +46,7 @@ export class CellPageObject extends BasePage { this.geoData = new GeoDataCellPageObject(this); this.date = new DateCellPageObject(this); this.dateTime = new DateTimeCellPageObject(this); + this.userOption = new UserOptionCellPageObject(this); } get({ indexMap, index, columnHeader }: CellProps): Locator {