test: shared form single select

Signed-off-by: Raju Udava <86527202+dstala@users.noreply.github.com>

tests/playwright/pages/Dashboard/common/Cell/SelectOptionCell.ts

@@ -28,13 +28,18 @@ export class SelectOptionCellPageObject extends BasePage {
     const selectCell = this.get({ index, columnHeader });
 
     // check if cell active
-    if (!(await selectCell.getAttribute('class')).includes('active')) {
+    if (
+      !(await selectCell.getAttribute('class')).includes('active') &&
+      (await selectCell.locator('.nc-selected-option').count()) === 0
+    ) {
       await selectCell.click();
     }
 
     await selectCell.click();
 
-    await this.rootPage.getByTestId(`select-option-${columnHeader}-${index}`).getByText(option).click();
+    if (index === -1)
+      await this.rootPage.getByTestId(`select-option-${columnHeader}-undefined`).getByText(option).click();
+    else await this.rootPage.getByTestId(`select-option-${columnHeader}-${index}`).getByText(option).click();
 
     if (multiSelect) await this.get({ index, columnHeader }).click();
 
@@ -72,12 +77,12 @@ export class SelectOptionCellPageObject extends BasePage {
   }
 
   async verify({
-    index,
+    index = 0,
     columnHeader,
     option,
     multiSelect,
   }: {
-    index: number;
+    index?: number;
     columnHeader: string;
     option: string;
     multiSelect?: boolean;
@@ -85,7 +90,10 @@ export class SelectOptionCellPageObject extends BasePage {
     if (multiSelect) {
       return await expect(this.cell.get({ index, columnHeader })).toContainText(option, { useInnerText: true });
     }
-    const text = await (await this.cell.get({ index, columnHeader }).locator('.ant-tag')).allInnerTexts();
+
+    const locator = await this.cell.get({ index, columnHeader }).locator('.ant-tag');
+    await locator.waitFor({ state: 'visible' });
+    const text = await locator.allInnerTexts();
     return expect(text).toContain(option);
   }
 
@@ -95,7 +103,15 @@ export class SelectOptionCellPageObject extends BasePage {
     ).toBeHidden();
   }
 
-  async verifyOptions({ index, columnHeader, options }: { index: number; columnHeader: string; options: string[] }) {
+  async verifyOptions({
+    index = 0,
+    columnHeader,
+    options,
+  }: {
+    index?: number;
+    columnHeader: string;
+    options: string[];
+  }) {
     const selectCell = this.get({ index, columnHeader });
 
     // check if cell active

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

@@ -364,3 +364,98 @@ test.describe('Form view with LTAR', () => {
     });
   });
 });
+
+test.describe('Form view', () => {
+  let dashboard: DashboardPage;
+  let form: FormPage;
+  let context: any;
+
+  test.beforeEach(async ({ page }) => {
+    context = await setup({ page, isEmptyProject: true });
+    dashboard = new DashboardPage(page, context.project);
+    form = dashboard.form;
+  });
+
+  test('Select fields in form view', async () => {
+    api = new Api({
+      baseURL: `http://localhost:8080/`,
+      headers: {
+        'xc-auth': context.token,
+      },
+    });
+
+    const columns = [
+      {
+        column_name: 'Id',
+        title: 'Id',
+        uidt: UITypes.ID,
+      },
+      {
+        column_name: 'SingleSelect',
+        title: 'SingleSelect',
+        uidt: UITypes.SingleSelect,
+        dtxp: "'jan','feb','mar','apr','may','jun','jul','aug','sep','oct','nov','dec'",
+      },
+      {
+        column_name: 'MultiSelect',
+        title: 'MultiSelect',
+        uidt: UITypes.MultiSelect,
+        dtxp: "'jan','feb','mar','apr','may','jun','jul','aug','sep','oct','nov','dec'",
+      },
+    ];
+
+    const project = await api.project.read(context.project.id);
+    await api.base.tableCreate(context.project.id, project.bases?.[0].id, {
+      table_name: 'selectBased',
+      title: 'selectBased',
+      columns: columns,
+    });
+
+    await dashboard.rootPage.reload();
+
+    await dashboard.treeView.openTable({ title: 'selectBased' });
+    const url = dashboard.rootPage.url();
+
+    await dashboard.viewSidebar.createFormView({ title: 'NewForm' });
+    await dashboard.form.toolbar.clickShareView();
+    const formLink = await dashboard.form.toolbar.shareView.getShareLink();
+
+    await dashboard.rootPage.goto(formLink);
+
+    const sharedForm = new SharedFormPage(dashboard.rootPage);
+
+    // Click on single select options
+    await sharedForm.cell.selectOption.select({
+      index: -1,
+      columnHeader: 'SingleSelect',
+      option: 'jan',
+      multiSelect: false,
+    });
+
+    // Click on multi select options
+    const multiSelectParams = {
+      index: -1,
+      columnHeader: 'MultiSelect',
+      option: 'jan',
+      multiSelect: true,
+    };
+    await sharedForm.cell.selectOption.select({ ...multiSelectParams, option: 'jan' });
+    await sharedForm.cell.selectOption.select({ ...multiSelectParams, option: 'feb' });
+    await sharedForm.cell.selectOption.select({ ...multiSelectParams, option: 'mar' });
+
+    await sharedForm.submit();
+    await dashboard.rootPage.goto(url);
+    await dashboard.viewSidebar.openView({ title: 'selectBased' });
+
+    await dashboard.grid.cell.selectOption.verify({
+      columnHeader: 'SingleSelect',
+      option: 'jan',
+      multiSelect: false,
+    });
+
+    await dashboard.grid.cell.selectOption.verifyOptions({
+      columnHeader: 'MultiSelect',
+      options: ['jan', 'feb', 'mar'],
+    });
+  });
+});