From 698482dbdd4f8d5e5490cbaefb90b068c8803867 Mon Sep 17 00:00:00 2001
From: Ramesh Mane <101566080+rameshmane7218@users.noreply.github.com>
Date: Thu, 11 Jan 2024 12:39:52 +0000
Subject: [PATCH] test: added multifield editor fieldPage class

---
 .../components/smartsheet/details/Fields.vue  | 56 ++++++++---
 .../pages/Dashboard/Details/FieldsPage.ts     | 94 +++++++++++--------
 2 files changed, 101 insertions(+), 49 deletions(-)

diff --git a/packages/nc-gui/components/smartsheet/details/Fields.vue b/packages/nc-gui/components/smartsheet/details/Fields.vue
index ad62f2c65b..2da889f028 100644
--- a/packages/nc-gui/components/smartsheet/details/Fields.vue
+++ b/packages/nc-gui/components/smartsheet/details/Fields.vue
@@ -916,7 +916,7 @@ watch(
                           toggleVisibility(event.target.checked, viewFieldsMap[field.id])
                         }
                       "
-                      data-testid="nc-field-checkbox"
+                      data-testid="nc-field-visibility-checkbox"
                     />
                     <NcCheckbox v-else :disabled="true" class="opacity-0" :checked="true" />
                     <SmartsheetHeaderVirtualCellIcon
@@ -948,7 +948,13 @@ watch(
                   </div>
                   <div class="flex items-center justify-end gap-1">
                     <div class="nc-field-status-wrapper flex items-center">
-                      <NcBadge v-if="fieldStatus(field) === 'delete'" color="red" :border="false" class="bg-red-50 text-red-700">
+                      <NcBadge
+                        v-if="fieldStatus(field) === 'delete'"
+                        color="red"
+                        :border="false"
+                        class="bg-red-50 text-red-700"
+                        data-testid="nc-field-status-deleted-field"
+                      >
                         Deleted field
                       </NcBadge>
                       <NcBadge
@@ -956,6 +962,7 @@ watch(
                         color="orange"
                         :border="false"
                         class="bg-green-50 text-green-700"
+                        data-testid="nc-field-status-new-field"
                       >
                         New field
                       </NcBadge>
@@ -965,6 +972,7 @@ watch(
                         color="orange"
                         :border="false"
                         class="bg-orange-50 text-orange-700"
+                        data-testid="nc-field-status-updated-field"
                       >
                         Updated field
                       </NcBadge>
@@ -973,6 +981,7 @@ watch(
                         color="yellow"
                         :border="false"
                         class="ml-1 bg-yellow-50 text-yellow-700"
+                        data-testid="nc-field-status-incomplete-configuration"
                       >
                         Incomplete configuration
                       </NcBadge>
@@ -984,6 +993,7 @@ watch(
                       class="no-action mr-2"
                       :disabled="loading"
                       @click="recoverField(field)"
+                      data-testid="nc-field-restore-changes"
                     >
                       <div class="flex items-center text-xs gap-1">
                         <GeneralIcon icon="reload" />
@@ -993,7 +1003,7 @@ watch(
                     <NcDropdown
                       v-else
                       :trigger="['click']"
-                      overlay-class-name="nc-dropdown-table-explorer"
+                      overlay-class-name="nc-field-item-action-dropdown nc-dropdown-table-explorer"
                       @update:visible="onFieldOptionUpdate"
                       @click.stop
                     >
@@ -1005,7 +1015,7 @@ watch(
                           '!hover:(text-brand-700 bg-brand-100) !group-hover:(text-brand-500)': compareCols(field, activeField),
                           '!hover:(text-gray-700 bg-gray-200) !group-hover:(text-gray-500)': !compareCols(field, activeField),
                         }"
-                        data-testid="nc-table-explorer-dropdown-button"
+                        data-testid="nc-field-item-action-button"
                       >
                         <GeneralIcon icon="threeDotVertical" class="no-action text-inherit" />
                       </NcButton>
@@ -1019,6 +1029,7 @@ watch(
                               <div
                                 class="flex flex-row px-3 py-2 w-46 justify-between items-center group hover:bg-gray-100 cursor-pointer"
                                 @click="onClickCopyFieldUrl(field)"
+                                data-testid="nc-field-item-action-copy-id"
                               >
                                 <div class="flex flex-row items-baseline gap-x-1 font-bold text-xs">
                                   <div class="text-gray-600">{{ $t('labels.idColon') }}</div>
@@ -1036,19 +1047,37 @@ watch(
                           </template>
 
                           <template v-if="!isLocked">
-                            <NcMenuItem key="table-explorer-duplicate" @click="duplicateField(field)">
+                            <NcMenuItem
+                              key="table-explorer-duplicate"
+                              @click="duplicateField(field)"
+                              data-testid="nc-field-item-action-duplicate"
+                            >
                               <Icon class="iconify text-gray-800" icon="lucide:copy" /><span>Duplicate</span>
                             </NcMenuItem>
-                            <NcMenuItem v-if="!field.pv" key="table-explorer-insert-above" @click="addField(field, true)">
+                            <NcMenuItem
+                              v-if="!field.pv"
+                              key="table-explorer-insert-above"
+                              @click="addField(field, true)"
+                              data-testid="nc-field-item-action-insert-above"
+                            >
                               <Icon class="iconify text-gray-800" icon="lucide:arrow-up" /><span>Insert above</span>
                             </NcMenuItem>
-                            <NcMenuItem key="table-explorer-insert-below" @click="addField(field)">
+                            <NcMenuItem
+                              key="table-explorer-insert-below"
+                              @click="addField(field)"
+                              data-testid="nc-field-item-action-insert-below"
+                            >
                               <Icon class="iconify text-gray-800" icon="lucide:arrow-down" /><span>Insert below</span>
                             </NcMenuItem>
 
                             <a-menu-divider class="my-1.5" />
 
-                            <NcMenuItem key="table-explorer-delete" class="!hover:bg-red-50" @click="onFieldDelete(field)">
+                            <NcMenuItem
+                              key="table-explorer-delete"
+                              class="!hover:bg-red-50"
+                              @click="onFieldDelete(field)"
+                              data-testid="nc-field-item-action-delete"
+                            >
                               <div class="text-red-500">
                                 <GeneralIcon icon="delete" class="group-hover:text-accent -ml-0.25 -mt-0.75 mr-0.5" />
                                 Delete
@@ -1086,7 +1115,7 @@ watch(
                         'opacity-0 !cursor-default': isLocked,
                       }"
                     />
-                    <NcCheckbox :disabled="true" :checked="true" />
+                    <NcCheckbox :disabled="true" :checked="true" data-testid="nc-field-visibility-checkbox" />
                     <SmartsheetHeaderCellIcon
                       v-if="displayColumn"
                       :column-meta="fieldState(displayColumn) || displayColumn"
@@ -1102,7 +1131,7 @@ watch(
                       show-on-truncate-only
                     >
                       <template #title> {{ fieldState(displayColumn)?.title || displayColumn.title }} </template>
-                      <span>
+                      <span data-testid="nc-field-title">
                         {{ fieldState(displayColumn)?.title || displayColumn.title }}
                       </span>
                     </NcTooltip>
@@ -1114,6 +1143,7 @@ watch(
                         color="red"
                         :border="false"
                         class="bg-red-50 text-red-700"
+                        data-testid="nc-field-status-deleted-field"
                       >
                         Deleted field
                       </NcBadge>
@@ -1123,6 +1153,7 @@ watch(
                         color="orange"
                         :border="false"
                         class="bg-orange-50 text-orange-700"
+                        data-testid="nc-field-status-updated-field"
                       >
                         Updated field
                       </NcBadge>
@@ -1134,6 +1165,7 @@ watch(
                       class="no-action mr-2"
                       :disabled="loading"
                       @click="recoverField(displayColumn)"
+                      data-testid="nc-field-restore-changes"
                     >
                       <div class="flex items-center text-xs gap-1">
                         <GeneralIcon icon="reload" />
@@ -1143,7 +1175,7 @@ watch(
                     <NcDropdown
                       v-else
                       :trigger="['click']"
-                      overlay-class-name="nc-dropdown-table-explorer-display-column"
+                      overlay-class-name="nc-field-item-action-dropdown-display-column nc-dropdown-table-explorer-display-column"
                       @update:visible="onFieldOptionUpdate"
                       @click.stop
                     >
@@ -1161,6 +1193,7 @@ watch(
                             activeField,
                           ),
                         }"
+                        data-testid="nc-field-item-action-button"
                       >
                         <GeneralIcon icon="threeDotVertical" class="no-action text-inherit" />
                       </NcButton>
@@ -1173,6 +1206,7 @@ watch(
                             <div
                               class="flex flex-row px-3 py-2 w-46 justify-between items-center group hover:bg-gray-100 cursor-pointer"
                               @click="onClickCopyFieldUrl(displayColumn)"
+                              data-testid="nc-field-item-action-copy-id"
                             >
                               <div class="flex flex-row items-baseline gap-x-1 font-bold text-xs">
                                 <div class="text-gray-600">{{ $t('labels.idColon') }}</div>
diff --git a/tests/playwright/pages/Dashboard/Details/FieldsPage.ts b/tests/playwright/pages/Dashboard/Details/FieldsPage.ts
index e00cd8188c..0047a4a5e5 100644
--- a/tests/playwright/pages/Dashboard/Details/FieldsPage.ts
+++ b/tests/playwright/pages/Dashboard/Details/FieldsPage.ts
@@ -31,7 +31,6 @@ export class FieldsPage extends BasePage {
 
   async clickNewField() {
     await this.addNewFieldButton.click();
-    await this.addOrEditColumn.waitFor({ state: 'visible' });
   }
 
   async create({
@@ -68,17 +67,9 @@ export class FieldsPage extends BasePage {
     insertBelowColumnTitle?: string;
   }) {
     if (insertAboveColumnTitle) {
-      await this.grid.get().locator(`th[data-title="${insertBeforeColumnTitle}"] .nc-ui-dt-dropdown`).click();
-
-      if (isDisplayValue) {
-        await expect(this.rootPage.locator('li[role="menuitem"]:has-text("Insert Before")')).toHaveCount(0);
-        return;
-      }
-
-      await this.rootPage.locator('li[role="menuitem"]:has-text("Insert Before"):visible').click();
+      await this.selectFieldAction({ title: insertAboveColumnTitle, action: 'insert-above' });
     } else if (insertBelowColumnTitle) {
-      await this.grid.get().locator(`th[data-title="${insertAfterColumnTitle}"] .nc-ui-dt-dropdown`).click();
-      await this.rootPage.locator('li[role="menuitem"]:has-text("Insert After"):visible').click();
+      await this.selectFieldAction({ title: insertBelowColumnTitle, action: 'insert-below' });
     } else {
       await this.clickNewField();
     }
@@ -96,7 +87,7 @@ export class FieldsPage extends BasePage {
         break;
       case 'Duration':
         if (format) {
-          await this.get().locator('.ant-select-single').nth(1).click();
+          await this.addOrEditColumn.locator('.ant-select-single').nth(1).click();
           await this.rootPage
             .locator(`.ant-select-item`, {
               hasText: format,
@@ -105,30 +96,30 @@ export class FieldsPage extends BasePage {
         }
         break;
       case 'Date':
-        await this.get().locator('.nc-date-select').click();
+        await this.addOrEditColumn.locator('.nc-date-select').click();
         await this.rootPage.locator('.nc-date-select').pressSequentially(dateFormat);
         await this.rootPage.locator('.ant-select-item').locator(`text="${dateFormat}"`).click();
         break;
       case 'DateTime':
         // Date Format
-        await this.get().locator('.nc-date-select').click();
+        await this.addOrEditColumn.locator('.nc-date-select').click();
         await this.rootPage.locator('.ant-select-item').locator(`text="${dateFormat}"`).click();
         // Time Format
-        await this.get().locator('.nc-time-select').click();
+        await this.addOrEditColumn.locator('.nc-time-select').click();
         await this.rootPage.locator('.ant-select-item').locator(`text="${timeFormat}"`).click();
         break;
       case 'Formula':
-        await this.get().locator('.nc-formula-input').fill(formula);
+        await this.addOrEditColumn.locator('.nc-formula-input').fill(formula);
         break;
       case 'QrCode':
-        await this.get().locator('.ant-select-single').nth(1).click();
+        await this.addOrEditColumn.locator('.ant-select-single').nth(1).click();
         await this.rootPage
           .locator(`.ant-select-item`)
           .locator(`[data-testid="nc-qr-${qrCodeValueColumnTitle}"]`)
           .click();
         break;
       case 'Barcode':
-        await this.get().locator('.ant-select-single').nth(1).click();
+        await this.addOrEditColumn.locator('.ant-select-single').nth(1).click();
         await this.rootPage
           .locator(`.ant-select-item`, {
             hasText: new RegExp(`^${barcodeValueColumnTitle}$`),
@@ -136,13 +127,13 @@ export class FieldsPage extends BasePage {
           .click();
         break;
       case 'Lookup':
-        await this.get().locator('.ant-select-single').nth(1).click();
+        await this.addOrEditColumn.locator('.ant-select-single').nth(1).click();
         await this.rootPage
           .locator(`.ant-select-item`, {
             hasText: childTable,
           })
           .click();
-        await this.get().locator('.ant-select-single').nth(2).click();
+        await this.addOrEditColumn.locator('.ant-select-single').nth(2).click();
         await this.rootPage
           .locator(`.ant-select-item`, {
             hasText: childColumn,
@@ -151,19 +142,19 @@ export class FieldsPage extends BasePage {
           .click();
         break;
       case 'Rollup':
-        await this.get().locator('.ant-select-single').nth(1).click();
+        await this.addOrEditColumn.locator('.ant-select-single').nth(1).click();
         await this.rootPage
           .locator(`.ant-select-item`, {
             hasText: childTable,
           })
           .click();
-        await this.get().locator('.ant-select-single').nth(2).click();
+        await this.addOrEditColumn.locator('.ant-select-single').nth(2).click();
         await this.rootPage
           .locator(`.nc-dropdown-relation-column >> .ant-select-item`, {
             hasText: childColumn,
           })
           .click();
-        await this.get().locator('.ant-select-single').nth(3).click();
+        await this.addOrEditColumn.locator('.ant-select-single').nth(3).click();
         await this.rootPage
           .locator(`.nc-dropdown-rollup-function >> .ant-select-item`, {
             hasText: rollupType,
@@ -172,11 +163,11 @@ export class FieldsPage extends BasePage {
           .click();
         break;
       case 'Links':
-        await this.get()
+        await this.addOrEditColumn
           .locator('.nc-ltar-relation-type >> .ant-radio')
           .nth(relationType === 'Has Many' ? 0 : 1)
           .click();
-        await this.get().locator('.ant-select-single').nth(1).click();
+        await this.addOrEditColumn.locator('.ant-select-single').nth(1).click();
         await this.rootPage.locator(`.nc-ltar-child-table >> input[type="search"]`).fill(childTable);
         await this.rootPage
           .locator(`.nc-dropdown-ltar-child-table >> .ant-select-item`, {
@@ -193,37 +184,36 @@ export class FieldsPage extends BasePage {
 
     await this.saveChanges();
 
-    const headersText = [];
-    const locator = this.grid.get().locator(`th`);
+    const fieldsText = [];
+    const locator = this.fieldListWrapper.locator('>div');
     const count = await locator.count();
     for (let i = 0; i < count; i++) {
-      const header = locator.nth(i);
-      const text = await getTextExcludeIconText(header);
-      headersText.push(text);
+      const text = await locator.nth(i).getByTestId('nc-field-title').textContent();
+      fieldsText.push(text);
     }
 
-    // verify column inserted after the target column
+    // verify field inserted above the target field
     if (insertAboveColumnTitle) {
-      expect(headersText[headersText.findIndex(title => title.startsWith(insertAboveColumnTitle)) + 1]).toBe(title);
+      expect(fieldsText[fieldsText.findIndex(title => title.startsWith(insertAboveColumnTitle)) - 1]).toBe(title);
     }
 
-    // verify column inserted before the target column
+    // verify field inserted below the target field
     if (insertBelowColumnTitle) {
-      expect(headersText[headersText.findIndex(title => title.startsWith(insertAboveColumnTitle)) - 1]).toBe(title);
+      expect(fieldsText[fieldsText.findIndex(title => title.startsWith(insertAboveColumnTitle)) + 1]).toBe(title);
     }
   }
 
   async fillTitle({ title }: { title: string }) {
-    const fieldTitleInput = this.get().locator('.nc-fields-input');
+    const fieldTitleInput = this.addOrEditColumn.locator('.nc-fields-input');
     await fieldTitleInput.click();
     await fieldTitleInput.fill(title);
   }
 
   async selectType({ type }: { type: string }) {
-    await this.get().locator('.ant-select-selector > .ant-select-selection-item').click();
+    await this.addOrEditColumn.locator('.ant-select-selector > .ant-select-selection-item').click();
 
-    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(type);
+    await this.addOrEditColumn.locator('.ant-select-selection-search-input[aria-expanded="true"]').waitFor();
+    await this.addOrEditColumn.locator('.ant-select-selection-search-input[aria-expanded="true"]').fill(type);
 
     // Select column type
     await this.rootPage.locator('.rc-virtual-list-holder-inner > div').locator(`text="${type}"`).click();
@@ -241,4 +231,32 @@ export class FieldsPage extends BasePage {
   async getField({ title }: { title: string }) {
     return this.fieldListWrapper.getByTestId('nc-field-title').locator(`text=${title}`);
   }
+
+  async getFieldVisibilityCheckbox({ title }: { title: string }) {
+    return (await this.getField({ title })).getByTestId('nc-field-visibility-checkbox');
+  }
+
+  async selectFieldAction({
+    title,
+    action,
+    isDisplayValueField = false,
+  }: {
+    title: string;
+    action: 'copy-id' | 'duplicate' | 'insert-above' | 'insert-below' | 'delete';
+    isDisplayValueField?: boolean;
+  }) {
+    const field = await this.getField({ title });
+
+    await field.hover();
+    await field.getByTestId('nc-field-item-action-button').waitFor({ state: 'visible' });
+    await field.getByTestId('nc-field-item-action-button').click();
+
+    const fieldActionDropdown = isDisplayValueField
+      ? this.rootPage.locator('.nc-field-item-action-dropdown-display-column')
+      : this.rootPage.locator('.nc-field-item-action-dropdown');
+
+    await fieldActionDropdown.waitFor({ state: 'visible' });
+    await fieldActionDropdown.getByTestId(`nc-field-item-action-${action}`).click();
+    await fieldActionDropdown.waitFor({ state: 'hidden' });
+  }
 }