test: form field re-order operations

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

@@ -584,7 +584,7 @@ const onFormItemClick = (element: any) => {
                     >
                       <div v-if="activeRow !== element.title">
                         <div>
-                          <span data-testid="nc-form-field-title">
+                          <span data-testid="nc-form-input-label">
                             {{ element.label || element.title }}
                           </span>
                           <span v-if="element.required" class="text-red-500">&nbsp;*</span>
@@ -607,7 +607,7 @@ const onFormItemClick = (element: any) => {
 
                           <NcTooltip class="truncate" show-on-truncate-only>
                             <template #title> {{ element.label || element.title }} </template>
-                            <span data-testid="nc-form-field-title">
+                            <span data-testid="nc-form-input-label">
                               {{ element.label || element.title }}
                             </span>
                           </NcTooltip>

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

@@ -22,14 +22,16 @@ export class FormPage extends BasePage {
   readonly formSubHeading: Locator;
   readonly afterSubmitMsg: Locator;
 
+  readonly formFields: Locator;
+
   constructor(dashboard: DashboardPage) {
     super(dashboard.rootPage);
     this.dashboard = dashboard;
     this.toolbar = new ToolbarPage(this);
     this.topbar = new TopbarPage(this);
 
-    this.addAllButton = dashboard.get().locator('[data-testid="nc-form-add-all"]');
-    this.removeAllButton = dashboard.get().locator('[data-testid="nc-form-remove-all"]');
+    this.addAllButton = dashboard.get().locator('[data-testid="nc-form-show-all-fields"]').locator('.nc-switch');
+    this.removeAllButton = dashboard.get().locator('[data-testid="nc-form-show-all-fields"]').locator('.nc-switch');
     this.submitButton = dashboard.get().locator('[data-testid="nc-form-submit"]');
 
     this.showAnotherFormRadioButton = dashboard.get().locator('[data-testid="nc-form-checkbox-submit-another-form"]');
@@ -40,6 +42,8 @@ export class FormPage extends BasePage {
     this.formHeading = dashboard.get().locator('[data-testid="nc-form-heading"]');
     this.formSubHeading = dashboard.get().locator('[data-testid="nc-form-sub-heading"]');
     this.afterSubmitMsg = dashboard.get().locator('[data-testid="nc-form-after-submit-msg"]');
+
+    this.formFields = dashboard.get().locator('.nc-form-fields-list');
   }
 
   get() {
@@ -50,21 +54,21 @@ export class FormPage extends BasePage {
     return this.dashboard.get().locator('[data-testid="nc-form-wrapper-submit"]');
   }
 
-  getFormHiddenColumn() {
-    return this.get().locator('[data-testid="nc-form-hidden-column"]');
-  }
+  // getFormHiddenColumn() {
+  //   return this.get().locator('[data-testid="nc-form-hidden-column"]');
+  // }
 
   getFormFields() {
     return this.get().locator('[data-testid="nc-form-fields"]');
   }
 
-  getDragNDropToHide() {
-    return this.get().locator('[data-testid="nc-drag-n-drop-to-hide"]');
-  }
-
-  getFormFieldsRemoveIcon() {
-    return this.get().locator('[data-testid="nc-field-remove-icon"]');
-  }
+  // getDragNDropToHide() {
+  //   return this.get().locator('[data-testid="nc-drag-n-drop-to-hide"]');
+  // }
+  //
+  // getFormFieldsRemoveIcon() {
+  //   return this.get().locator('[data-testid="nc-field-remove-icon"]');
+  // }
 
   getFormFieldsRequired() {
     return this.get().locator('[data-testid="nc-form-input-required"] + button');
@@ -124,8 +128,11 @@ export class FormPage extends BasePage {
       const dst = this.get().locator(`[data-testid="nc-drag-n-drop-to-hide"]`);
       await src.dragTo(dst);
     } else if (mode === 'hideField') {
-      const src = this.get().locator(`.nc-form-drag-${field.replace(' ', '')}`);
-      await src.locator(`[data-testid="nc-field-remove-icon"]`).click();
+      // const src = this.get().locator(`.nc-form-drag-${field.replace(' ', '')}`);
+      // await src.locator(`[data-testid="nc-field-remove-icon"]`).click();
+
+      // in form-v2, hide field will be using right sidebar
+      await this.formFields.locator(`[data-testid="nc-form-field-item-${field}"]`).locator('.nc-switch').click();
     }
   }
 
@@ -141,15 +148,13 @@ export class FormPage extends BasePage {
       await src.dragTo(dst, { trial: true });
       await src.dragTo(dst);
     } else if (mode === 'clickField') {
-      const src = this.get().locator(`[data-testid="nc-form-hidden-column-${field}"]`);
-      await src.click();
+      // const src = this.get().locator(`[data-testid="nc-form-hidden-column-${field}"]`);
+      // await src.click();
+      await this.formFields.locator(`[data-testid="nc-form-field-item-${field}"]`).locator('.nc-switch').click();
     }
   }
 
   async removeAllFields() {
-    // TODO: Otherwise form input boxes are not visible sometimes
-    await this.rootPage.waitForTimeout(1000);
-
     await this.removeAllButton.click();
   }
 

tests/playwright/tests/db/views/viewForm.spec.ts

@@ -49,17 +49,18 @@ test.describe('Form view', () => {
       fields: ['LastUpdate', 'Country', 'Cities'],
     });
 
+    // drag-drop feature to remove a field will not be supported in form v2
     // remove & verify (drag-drop)
-    await form.removeField({ field: 'Cities', mode: 'dragDrop' });
-    await form.verifyFormViewFieldsOrder({
-      fields: ['LastUpdate', 'Country'],
-    });
+    // await form.removeField({ field: 'Cities', mode: 'dragDrop' });
+    // await form.verifyFormViewFieldsOrder({
+    //   fields: ['LastUpdate', 'Country'],
+    // });
 
     // add & verify (drag-drop)
-    await form.addField({ field: 'Cities', mode: 'dragDrop' });
-    await form.verifyFormViewFieldsOrder({
-      fields: ['LastUpdate', 'Country', 'Cities'],
-    });
+    // await form.addField({ field: 'Cities', mode: 'dragDrop' });
+    // await form.verifyFormViewFieldsOrder({
+    //   fields: ['LastUpdate', 'Country', 'Cities'],
+    // });
 
     // remove & verify (hide field button)
     await form.removeField({ field: 'Cities', mode: 'hideField' });
@@ -88,7 +89,7 @@ test.describe('Form view', () => {
     });
   });
 
-  test('Form elements validation', async ({ page }) => {
+  test('Form elements validation', async () => {
     // close 'Team & Auth' tab
     await dashboard.closeTab({ title: 'Team & Auth' });
     await dashboard.treeView.openTable({ title: 'Country' });