test: duration column

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

scripts/playwright/pages/Dashboard/Grid/Column/index.ts

@@ -24,6 +24,7 @@ export class ColumnPageObject extends BasePage {
     childTable = "",
     childColumn = "",
     rollupType = "",
+    format = "",
   }: {
     title: string;
     type?: string;
@@ -31,6 +32,7 @@ export class ColumnPageObject extends BasePage {
     childTable?: string;
     childColumn?: string;
     rollupType?: string;
+    format?: string;
   }) {
     await this.grid.get().locator(".nc-column-add").click();
     await this.rootPage.waitForTimeout(500);
@@ -55,6 +57,14 @@ export class ColumnPageObject extends BasePage {
           skipColumnModal: true,
         });
         break;
+      case "Duration":
+        await this.get().locator(".ant-select-single").nth(1).click();
+        await this.rootPage
+          .locator(`.ant-select-item`, {
+            hasText: format,
+          })
+          .click();
+        break;
       case "Formula":
         await this.get().locator(".nc-formula-input").fill(formula);
         break;
@@ -142,10 +152,12 @@ export class ColumnPageObject extends BasePage {
     title,
     type = "SingleLineText",
     formula = "",
+    format,
   }: {
     title: string;
     type?: string;
     formula?: string;
+    format?: string;
   }) {
     await this.grid
       .get()
@@ -159,6 +171,14 @@ export class ColumnPageObject extends BasePage {
       case "Formula":
         await this.get().locator(".nc-formula-input").fill(formula);
         break;
+      case "Duration":
+        await this.get().locator(".ant-select-single").nth(1).click();
+        await this.rootPage
+          .locator(`.ant-select-item`, {
+            hasText: format,
+          })
+          .click();
+        break;
       default:
         break;
     }

scripts/playwright/pages/Dashboard/Grid/index.ts

@@ -51,13 +51,20 @@ export class GridPage extends BasePage {
       .poll(async () => await this.get().locator(".nc-grid-row").count())
       .toBe(rowCount + 1);
 
+    await this.editRow({ index, columnHeader, value });
+  }
+
+  async editRow({
+    index = 0,
+    columnHeader = "Title",
+    value,
+  }: { index?: number; columnHeader?: string; value?: string } = {}) {
     const cell = this.cell.get({ index, columnHeader });
     await this.cell.dblclick({
       index,
       columnHeader,
     });
 
-
     await cell.locator("input").fill(value ?? `Row ${index}`);
 
     await this.cell.grid
@@ -66,7 +73,9 @@ export class GridPage extends BasePage {
       .locator(`span[title="${columnHeader}"]`)
       .click();
 
-    await this.waitForResponseJson({responseSelector: (resJson) => resJson?.[columnHeader] === value});
+    await this.waitForResponseJson({
+      responseSelector: (resJson) => resJson?.[columnHeader] === value,
+    });
   }
 
   async verifyRow({ index }: { index: number }) {
@@ -114,7 +123,9 @@ export class GridPage extends BasePage {
   async openExpandedRow({ index }: { index: number }) {
     await this.row(index).locator(`td[pw-data="cell-id-${index}"]`).hover();
     await this.row(index).locator(`div[pw-data="nc-expand-${index}"]`).click();
-    await (await this.rootPage.locator('.ant-drawer-body').elementHandle())?.waitForElementState('stable');
+    await (
+      await this.rootPage.locator(".ant-drawer-body").elementHandle()
+    )?.waitForElementState("stable");
   }
 
   async selectAll() {
@@ -128,8 +139,16 @@ export class GridPage extends BasePage {
       });
 
     const rowCount = await this.rowCount();
-    for(let i = 0; i < rowCount; i++) {
+    for (let i = 0; i < rowCount; i++) {
-      await expect.poll(async () => await this.row(i).locator(`[pw-data="cell-id-${i}"]`).locator('span.ant-checkbox-checked').count()).toBe(1);
+      await expect
+        .poll(
+          async () =>
+            await this.row(i)
+              .locator(`[pw-data="cell-id-${i}"]`)
+              .locator("span.ant-checkbox-checked")
+              .count()
+        )
+        .toBe(1);
     }
     await this.rootPage.waitForTimeout(300);
   }
@@ -158,7 +177,9 @@ export class GridPage extends BasePage {
   async clickPagination({ page }: { page: string }) {
     (await this.pagination({ page })).click();
 
-    await this.waitForResponseJson({responseSelector: (resJson) => resJson?.pageInfo});
+    await this.waitForResponseJson({
+      responseSelector: (resJson) => resJson?.pageInfo,
+    });
 
     await this.waitLoading();
   }

scripts/playwright/tests/duration.spec.ts

@@ -0,0 +1,152 @@
+import { test } from "@playwright/test";
+import { DashboardPage } from "../pages/Dashboard";
+import setup from "../setup";
+
+// Storing one additional dummy value "10" at end of every input array
+// this will trigger update to previously committed data
+const durationData = [
+  {
+    format: "h:mm (e.g. 1:23)",
+    input: ["1:30", "30", "60", "80", "12:34", "15:130", "123123", "10"],
+    output: ["01:30", "00:30", "01:00", "01:20", "12:34", "17:10", "2052:03"],
+  },
+  {
+    format: "h:mm:ss (e.g. 3:45, 1:23:40)",
+    input: [
+      "11:22:33",
+      "1234",
+      "50",
+      "1:1111",
+      "1:11:1111",
+      "15:130",
+      "123123",
+      "10",
+    ],
+    output: [
+      "11:22:33",
+      "00:20:34",
+      "00:00:50",
+      "00:19:31",
+      "01:29:31",
+      "00:17:10",
+      "34:12:03",
+    ],
+  },
+  {
+    format: "h:mm:ss.s (e.g. 3:34.6, 1:23:40.0)",
+    input: [
+      "1234",
+      "12:34",
+      "12:34:56",
+      "12:34:999",
+      "12:999:56",
+      "12:34:56.12",
+      "12:34:56.199",
+      "10",
+    ],
+    output: [
+      "00:20:34.0",
+      "00:12:34.0",
+      "12:34:56.0",
+      "12:50:39.0",
+      "28:39:56.0",
+      "12:34:56.1",
+      "12:34:56.2",
+    ],
+  },
+  {
+    format: "h:mm:ss.ss (e.g. 3.45.67, 1:23:40.00)",
+    input: [
+      "1234",
+      "12:34",
+      "12:34:56",
+      "12:34:999",
+      "12:999:56",
+      "12:34:56.12",
+      "12:34:56.199",
+      "10",
+    ],
+    output: [
+      "00:20:34.00",
+      "00:12:34.00",
+      "12:34:56.00",
+      "12:50:39.00",
+      "28:39:56.00",
+      "12:34:56.12",
+      "12:34:56.20",
+    ],
+  },
+  {
+    format: "h:mm:ss.sss (e.g. 3.45.678, 1:23:40.000)",
+    input: [
+      "1234",
+      "12:34",
+      "12:34:56",
+      "12:34:999",
+      "12:999:56",
+      "12:34:56.12",
+      "12:34:56.199",
+      "10",
+    ],
+    output: [
+      "00:20:34.000",
+      "00:12:34.000",
+      "12:34:56.000",
+      "12:50:39.000",
+      "28:39:56.000",
+      "12:34:56.012",
+      "12:34:56.199",
+    ],
+  },
+];
+
+test.describe("Duration column", () => {
+  let dashboard: DashboardPage;
+  let context: any;
+
+  test.beforeEach(async ({ page }) => {
+    context = await setup({ page });
+    dashboard = new DashboardPage(page, context.project);
+  });
+
+  test("Create duration column", async () => {
+    await dashboard.treeView.createTable({ title: "tablex" });
+    // Create duration column
+    await dashboard.grid.column.create({
+      title: "NC_DURATION_0",
+      type: "Duration",
+      format: durationData[0].format,
+    });
+    for (let i = 0; i < 8; i++) {
+      await dashboard.grid.addNewRow({
+        index: i,
+        columnHeader: "NC_DURATION_0",
+        value: i.toString(),
+      });
+    }
+
+    for (let i = 0; i < durationData.length; i++) {
+      // Edit duration column
+      await dashboard.grid.column.openEdit({
+        title: "NC_DURATION_0",
+        type: "Duration",
+        format: durationData[i].format,
+      });
+      await dashboard.grid.column.save({ isUpdated: true });
+      for (let i = 0; i < durationData[i].input.length; i++) {
+        await dashboard.grid.editRow({
+          index: i,
+          columnHeader: "NC_DURATION_0",
+          value: durationData[i].input[i],
+        });
+      }
+      for (let i = 0; i < durationData[i].output.length; i++) {
+        await dashboard.grid.cell.verify({
+          index: i,
+          columnHeader: "NC_DURATION_0",
+          value: durationData[i].output[i],
+        });
+      }
+    }
+  });
+});