diff --git a/packages/nc-gui/components/smartsheet/Form.vue b/packages/nc-gui/components/smartsheet/Form.vue index 0fd653a20c..d3c2c5ad9e 100644 --- a/packages/nc-gui/components/smartsheet/Form.vue +++ b/packages/nc-gui/components/smartsheet/Form.vue @@ -584,7 +584,7 @@ const onFormItemClick = (element: any) => { >
- + {{ element.label || element.title }}  * @@ -607,7 +607,7 @@ const onFormItemClick = (element: any) => { - + {{ element.label || element.title }} diff --git a/tests/playwright/pages/Dashboard/Form/index.ts b/tests/playwright/pages/Dashboard/Form/index.ts index c288acfafb..cef6fcc50b 100644 --- a/tests/playwright/pages/Dashboard/Form/index.ts +++ b/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(); } diff --git a/tests/playwright/tests/db/views/viewForm.spec.ts b/tests/playwright/tests/db/views/viewForm.spec.ts index 82fc2db602..a30c868a69 100644 --- a/tests/playwright/tests/db/views/viewForm.spec.ts +++ b/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' });