test: user option cell operations

packages/nc-gui/components/smartsheet/Cell.vue

@@ -246,7 +246,7 @@ onUnmounted(() => {
         <LazyCellPhoneNumber v-else-if="isPhoneNumber(column)" v-model="vModel" />
         <LazyCellPercent v-else-if="isPercent(column)" v-model="vModel" />
         <LazyCellCurrency v-else-if="isCurrency(column)" v-model="vModel" @save="emit('save')" />
-        <LazyCellUser v-else-if="isUser(column)" v-model="vModel" />
+        <LazyCellUser v-else-if="isUser(column)" v-model="vModel" :row-index="props.rowIndex" />
         <LazyCellDecimal v-else-if="isDecimal(column)" v-model="vModel" />
         <LazyCellFloat v-else-if="isFloat(column, abstractType)" v-model="vModel" />
         <LazyCellText v-else-if="isString(column, abstractType)" v-model="vModel" />

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 });

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++;
+    }
+  }
+}

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<number>;
@@ -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 {