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 {