test: added create and update field test cases

packages/nc-gui/components/smartsheet/details/Fields.vue

@@ -832,6 +832,7 @@ watch(
                 icon="close"
                 class="mx-1 h-3.5 w-3.5 text-gray-500 group-hover:text-black"
                 @click="searchQuery = ''"
+                data-testid="nc-field-clear-search"
               />
             </template>
           </a-input>
@@ -895,7 +896,7 @@ watch(
                   class="flex px-2 hover:bg-gray-100 first:rounded-t-lg border-b-1 last:rounded-b-none border-gray-200 pl-5 group"
                   :class="` ${compareCols(field, activeField) ? 'selected' : ''}`"
                   @click="changeField(field, $event)"
-                  :data-testid="`nc-field-item-${field.title}`"
+                  :data-testid="`nc-field-item-${fieldState(field)?.title || field.title}`"
                 >
                   <div class="flex items-center flex-1 py-2.5 gap-1 w-2/6">
                     <component
@@ -1106,6 +1107,7 @@ watch(
                   class="flex px-2 bg-white hover:bg-gray-100 border-b-1 border-gray-200 first:rounded-tl-lg last:border-b-1 pl-5 group"
                   :class="` ${compareCols(displayColumn, activeField) ? 'selected' : ''}`"
                   @click="changeField(displayColumn, $event)"
+                  :data-testid="`nc-field-item-${fieldState(displayColumn)?.title || displayColumn.title}`"
                 >
                   <div class="flex items-center flex-1 py-2.5 gap-1 w-2/6">
                     <component

tests/playwright/pages/Dashboard/Details/FieldsPage.ts

@@ -11,6 +11,7 @@ export class FieldsPage extends BasePage {
   readonly addNewFieldButton: Locator;
   readonly resetFieldChangesButton: Locator;
   readonly saveChangesButton: Locator;
+
   readonly addOrEditColumn: Locator;
   readonly fieldListWrapper: Locator;
 
@@ -29,13 +30,24 @@ export class FieldsPage extends BasePage {
     return this.detailsPage.get().locator('.nc-fields-wrapper');
   }
 
+  async fillSearch({ title }: { title: string }) {
+    const searchInput = this.get().getByTestId('nc-field-search-input');
+    await searchInput.click();
+    await searchInput.fill(title);
+  }
+
+  async clearSearch() {
+    await this.get().getByTestId('nc-field-clear-search').click();
+  }
+
   async clickNewField() {
     await this.addNewFieldButton.click();
   }
 
-  async create({
+  async createOrUpdate({
     title,
     type = 'SingleLineText',
+    isUpdateMode = false,
     formula = '',
     qrCodeValueColumnTitle = '',
     barcodeValueColumnTitle = '',
@@ -52,6 +64,7 @@ export class FieldsPage extends BasePage {
   }: {
     title: string;
     type?: string;
+    isUpdateMode?: boolean;
     formula?: string;
     qrCodeValueColumnTitle?: string;
     barcodeValueColumnTitle?: string;
@@ -66,14 +79,15 @@ export class FieldsPage extends BasePage {
     insertAboveColumnTitle?: string;
     insertBelowColumnTitle?: string;
   }) {
-    if (insertAboveColumnTitle) {
-      await this.selectFieldAction({ title: insertAboveColumnTitle, action: 'insert-above' });
-    } else if (insertBelowColumnTitle) {
-      await this.selectFieldAction({ title: insertBelowColumnTitle, action: 'insert-below' });
-    } else {
-      await this.clickNewField();
+    if (!isUpdateMode) {
+      if (insertAboveColumnTitle) {
+        await this.selectFieldAction({ title: insertAboveColumnTitle, action: 'insert-above' });
+      } else if (insertBelowColumnTitle) {
+        await this.selectFieldAction({ title: insertBelowColumnTitle, action: 'insert-below' });
+      } else {
+        await this.clickNewField();
+      }
     }
-
     await this.addOrEditColumn.waitFor({ state: 'visible' });
 
     await this.fillTitle({ title });
@@ -188,18 +202,20 @@ export class FieldsPage extends BasePage {
     const locator = this.fieldListWrapper.locator('>div');
     const count = await locator.count();
     for (let i = 0; i < count; i++) {
+      await locator.nth(i).scrollIntoViewIfNeeded();
       const text = await locator.nth(i).getByTestId('nc-field-title').textContent();
       fieldsText.push(text);
     }
 
-    // verify field inserted above the target field
     if (insertAboveColumnTitle) {
+      // verify field inserted above the target field
       expect(fieldsText[fieldsText.findIndex(title => title.startsWith(insertAboveColumnTitle)) - 1]).toBe(title);
-    }
-
-    // verify field inserted below the target field
-    if (insertBelowColumnTitle) {
-      expect(fieldsText[fieldsText.findIndex(title => title.startsWith(insertAboveColumnTitle)) + 1]).toBe(title);
+    } else if (insertBelowColumnTitle) {
+      // verify field inserted below the target field
+      expect(fieldsText[fieldsText.findIndex(title => title.startsWith(insertBelowColumnTitle)) + 1]).toBe(title);
+    } else {
+      // verify field inserted at the end
+      expect(fieldsText[fieldsText.length - 1]).toBe(title);
     }
   }
 
@@ -222,18 +238,19 @@ export class FieldsPage extends BasePage {
   async saveChanges() {
     await this.waitForResponse({
       uiAction: async () => await this.saveChangesButton.click(),
-      requestUrlPathToMatch: 'api/v1/db/meta/tables/',
-      httpMethodsToMatch: ['POST'],
-      responseJsonMatcher: json => json['failedOps']?.length === 0,
+      requestUrlPathToMatch: 'api/v1/db/meta/views/',
+      httpMethodsToMatch: ['GET'],
+      responseJsonMatcher: json => json['list'],
     });
+    await this.rootPage.waitForTimeout(200);
   }
 
-  async getField({ title }: { title: string }) {
-    return this.fieldListWrapper.getByTestId('nc-field-title').locator(`text=${title}`);
+  getField({ title }: { title: string }) {
+    return this.fieldListWrapper.getByTestId(`nc-field-item-${title}`);
   }
 
   async getFieldVisibilityCheckbox({ title }: { title: string }) {
-    return (await this.getField({ title })).getByTestId('nc-field-visibility-checkbox');
+    return this.getField({ title }).getByTestId('nc-field-visibility-checkbox');
   }
 
   async selectFieldAction({
@@ -245,10 +262,11 @@ export class FieldsPage extends BasePage {
     action: 'copy-id' | 'duplicate' | 'insert-above' | 'insert-below' | 'delete';
     isDisplayValueField?: boolean;
   }) {
-    const field = await this.getField({ title });
+    const field = this.getField({ title });
+    await field.scrollIntoViewIfNeeded();
 
     await field.hover();
-    await field.getByTestId('nc-field-item-action-button').waitFor({ state: 'visible' });
+    // await field.getByTestId('nc-field-item-action-button').waitFor({ state: 'visible' });
     await field.getByTestId('nc-field-item-action-button').click();
 
     const fieldActionDropdown = isDisplayValueField

tests/playwright/pages/Dashboard/Details/index.ts

@@ -4,12 +4,14 @@ import { TopbarPage } from '../common/Topbar';
 import { Locator } from '@playwright/test';
 import { WebhookPage } from './WebhookPage';
 import { ErdPage } from './ErdPage';
+import { FieldsPage } from './FieldsPage';
 
 export class DetailsPage extends BasePage {
   readonly dashboard: DashboardPage;
   readonly topbar: TopbarPage;
   readonly webhook: WebhookPage;
   readonly relations: ErdPage;
+  readonly fields: FieldsPage;
 
   readonly tab_webhooks: Locator;
   readonly tab_apiSnippet: Locator;
@@ -24,6 +26,7 @@ export class DetailsPage extends BasePage {
     this.topbar = dashboard.grid.topbar;
     this.webhook = new WebhookPage(this);
     this.relations = new ErdPage(this);
+    this.fields = new FieldsPage(this);
 
     this.tab_webhooks = this.get().locator(`[data-testid="nc-webhooks-tab"]`);
     this.tab_apiSnippet = this.get().locator(`[data-testid="nc-apis-tab"]`);

tests/playwright/tests/db/features/multiFieldEditor.spec.ts

@@ -0,0 +1,49 @@
+import { test } from '@playwright/test';
+import { DashboardPage } from '../../../pages/Dashboard';
+import { GridPage } from '../../../pages/Dashboard/Grid';
+import setup, { unsetup } from '../../../setup';
+import { FieldsPage } from '../../../pages/Dashboard/Details/FieldsPage';
+
+test.describe('Multi Field Editor', () => {
+  let dashboard: DashboardPage, grid: GridPage, fields: FieldsPage;
+  let context: any;
+  const defaultFieldName = 'Multi Field Editor';
+
+  test.beforeEach(async ({ page }) => {
+    context = await setup({ page, isEmptyProject: true });
+    dashboard = new DashboardPage(page, context.base);
+    grid = dashboard.grid;
+    fields = dashboard.details.fields;
+
+    await dashboard.treeView.createTable({ title: 'Multifield', baseTitle: context.base.title });
+    await dashboard.grid.topbar.openDetailedTab();
+    await dashboard.details.clickFieldsTab();
+
+    // Add New Field
+    await fields.createOrUpdate({ title: defaultFieldName });
+  });
+
+  test.afterEach(async () => {
+    await unsetup(context);
+  });
+
+  const openMultiFieldOfATable = async (tableName: string) => {
+    await dashboard.treeView.openTable({ title: tableName });
+    await dashboard.grid.topbar.openDetailedTab();
+    await dashboard.details.clickRelationsTab();
+  };
+
+  test('Add New field and update', async () => {
+    // Add New Field
+    await fields.createOrUpdate({ title: 'Name' });
+
+    // Update Field title
+    await fields.getField({ title: 'Name' }).click();
+    await fields.createOrUpdate({ title: 'Updated Name', isUpdateMode: true });
+  });
+
+  test('Field action menu: CopyId, Duplicate, InsertAbove, InsertBelow', async () => {
+    await fields.createOrUpdate({ title: 'Above Inserted Field', insertAboveColumnTitle: defaultFieldName });
+    await fields.createOrUpdate({ title: 'Below Inserted Field', insertBelowColumnTitle: defaultFieldName });
+  });
+});