From 65027c20bba9b8d9042c4a79d2f1d8b390540d30 Mon Sep 17 00:00:00 2001
From: Ramesh Mane <101566080+rameshmane7218@users.noreply.github.com>
Date: Wed, 13 Dec 2023 18:52:29 +0530
Subject: [PATCH] test: user option column

---
 .../smartsheet/column/UserOptions.vue         |  8 +++-
 .../Dashboard/Grid/Column/UserOptionColumn.ts | 47 +++++++++++++++++++
 .../pages/Dashboard/Grid/Column/index.ts      |  5 ++
 .../tests/db/columns/columnUserSelect.spec.ts | 47 +++++++++++++++++++
 4 files changed, 106 insertions(+), 1 deletion(-)
 create mode 100644 tests/playwright/pages/Dashboard/Grid/Column/UserOptionColumn.ts
 create mode 100644 tests/playwright/tests/db/columns/columnUserSelect.spec.ts

diff --git a/packages/nc-gui/components/smartsheet/column/UserOptions.vue b/packages/nc-gui/components/smartsheet/column/UserOptions.vue
index 1e6e4c38fa..17ae2035e1 100644
--- a/packages/nc-gui/components/smartsheet/column/UserOptions.vue
+++ b/packages/nc-gui/components/smartsheet/column/UserOptions.vue
@@ -44,7 +44,13 @@ const updateIsMulti = (e) => {
 <template>
   <div class="flex flex-col">
     <div>
-      <a-checkbox v-if="vModel.meta" :checked="vModel.meta.is_multi" class="ml-1 mb-1" @change="updateIsMulti">
+      <a-checkbox
+        v-if="vModel.meta"
+        :checked="vModel.meta.is_multi"
+        class="ml-1 mb-1"
+        data-testid="user-column-allow-multiple"
+        @change="updateIsMulti"
+      >
         <span class="text-[10px] text-gray-600">Allow adding multiple users</span>
       </a-checkbox>
     </div>
diff --git a/tests/playwright/pages/Dashboard/Grid/Column/UserOptionColumn.ts b/tests/playwright/pages/Dashboard/Grid/Column/UserOptionColumn.ts
new file mode 100644
index 0000000000..d261b1d491
--- /dev/null
+++ b/tests/playwright/pages/Dashboard/Grid/Column/UserOptionColumn.ts
@@ -0,0 +1,47 @@
+import { ColumnPageObject } from '.';
+import BasePage from '../../../Base';
+import { expect } from '@playwright/test';
+
+export class UserOptionColumnPageObject extends BasePage {
+  readonly column: ColumnPageObject;
+
+  constructor(column: ColumnPageObject) {
+    super(column.rootPage);
+    this.column = column;
+  }
+
+  get() {
+    return this.column.get();
+  }
+
+  async allowMultipleUser({ columnTitle, allowMultiple = false }: { columnTitle: string; allowMultiple?: boolean }) {
+    await this.column.openEdit({ title: columnTitle });
+    const checkbox = this.get().locator('[data-testid="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 }) {
+    await this.column.openEdit({ title: columnTitle });
+
+    await this.column.get().locator('.nc-cell-user').click();
+
+    const userDropdown = this.get().locator('[data-testid="select-option-User-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 });
+  }
+  async clearDefaultValueOptions({ columnTitle }: { columnTitle: string }) {
+    await this.column.openEdit({ title: columnTitle });
+
+    await this.column.get().locator('.nc-cell-user + svg').click();
+  }
+}
diff --git a/tests/playwright/pages/Dashboard/Grid/Column/index.ts b/tests/playwright/pages/Dashboard/Grid/Column/index.ts
index 21eb680434..097951c51f 100644
--- a/tests/playwright/pages/Dashboard/Grid/Column/index.ts
+++ b/tests/playwright/pages/Dashboard/Grid/Column/index.ts
@@ -4,17 +4,20 @@ import BasePage from '../../../Base';
 import { SelectOptionColumnPageObject } from './SelectOptionColumn';
 import { AttachmentColumnPageObject } from './Attachment';
 import { getTextExcludeIconText } from '../../../../tests/utils/general';
+import { UserOptionColumnPageObject } from './UserOptionColumn';
 
 export class ColumnPageObject extends BasePage {
   readonly grid: GridPage;
   readonly selectOption: SelectOptionColumnPageObject;
   readonly attachmentColumnPageObject: AttachmentColumnPageObject;
+  readonly userOption: UserOptionColumnPageObject;
 
   constructor(grid: GridPage) {
     super(grid.rootPage);
     this.grid = grid;
     this.selectOption = new SelectOptionColumnPageObject(this);
     this.attachmentColumnPageObject = new AttachmentColumnPageObject(this);
+    this.userOption = new UserOptionColumnPageObject(this);
   }
 
   get() {
@@ -185,6 +188,8 @@ export class ColumnPageObject extends BasePage {
           .nth(0)
           .click();
         break;
+      case 'User':
+        break;
       default:
         break;
     }
diff --git a/tests/playwright/tests/db/columns/columnUserSelect.spec.ts b/tests/playwright/tests/db/columns/columnUserSelect.spec.ts
new file mode 100644
index 0000000000..a4c08a5bd3
--- /dev/null
+++ b/tests/playwright/tests/db/columns/columnUserSelect.spec.ts
@@ -0,0 +1,47 @@
+import { test } from '@playwright/test';
+import { DashboardPage } from '../../../pages/Dashboard';
+import { GridPage } from '../../../pages/Dashboard/Grid';
+import setup, { unsetup } from '../../../setup';
+import { TopbarPage } from '../../../pages/Dashboard/common/Topbar';
+
+test.describe('User single select', () => {
+  let dashboard: DashboardPage, grid: GridPage, topbar: TopbarPage;
+  let context: any;
+
+  test.beforeEach(async ({ page }) => {
+    context = await setup({ page, isEmptyProject: false });
+    dashboard = new DashboardPage(page, context.base);
+    grid = dashboard.grid;
+    topbar = dashboard.grid.topbar;
+
+    await dashboard.treeView.createTable({ title: 'sheet1', baseTitle: context.base.title });
+
+    await grid.column.create({ title: 'User', type: 'User' });
+
+    await grid.addNewRow({ index: 0, value: 'Row 0' });
+  });
+
+  test.afterEach(async () => {
+    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('Rename column title and delete the column', async () => {
+    // Update column title, refresh and verify
+    await dashboard.grid.column.openEdit({ title: 'User' });
+    await dashboard.grid.column.fillTitle({ title: 'UserField' });
+    await dashboard.grid.column.save({
+      isUpdated: true,
+    });
+    await topbar.clickRefresh();
+    await grid.column.verify({ title: 'UserField', isVisible: true });
+
+    // delete column and verify
+    await grid.column.delete({ title: 'UserField' });
+    await grid.column.verify({ title: 'UserField', isVisible: false });
+  });
+});