From a290876657dd66421f162d6c83d92b9aef20266b Mon Sep 17 00:00:00 2001
From: Wing-Kam Wong <wingkwong.code@gmail.com>
Date: Sat, 3 Dec 2022 20:09:00 +0800
Subject: [PATCH] feat(playwright): add tests for datetime

---
 .../pages/Dashboard/Grid/Column/index.ts      | 24 +++++++
 tests/playwright/tests/columnDateTime.spec.ts | 69 +++++++++++++++++++
 2 files changed, 93 insertions(+)
 create mode 100644 tests/playwright/tests/columnDateTime.spec.ts

diff --git a/tests/playwright/pages/Dashboard/Grid/Column/index.ts b/tests/playwright/pages/Dashboard/Grid/Column/index.ts
index 48107c7800..1a35a7655a 100644
--- a/tests/playwright/pages/Dashboard/Grid/Column/index.ts
+++ b/tests/playwright/pages/Dashboard/Grid/Column/index.ts
@@ -35,6 +35,8 @@ export class ColumnPageObject extends BasePage {
     relationType = '',
     rollupType = '',
     format = '',
+    dateFormat = '',
+    timeFormat = '',
     insertAfterColumnTitle,
     insertBeforeColumnTitle,
   }: {
@@ -47,6 +49,8 @@ export class ColumnPageObject extends BasePage {
     relationType?: string;
     rollupType?: string;
     format?: string;
+    dateFormat?: string;
+    timeFormat?: string;
     insertBeforeColumnTitle?: string;
     insertAfterColumnTitle?: string;
   }) {
@@ -88,6 +92,14 @@ export class ColumnPageObject extends BasePage {
           })
           .click();
         break;
+      case 'DateTime':
+        // Date Format
+        await this.get().locator('.nc-date-select').click();
+        await this.rootPage.locator('.ant-select-item').locator(`text="${dateFormat}"`).click();
+        // Time Format
+        await this.get().locator('.nc-time-select').click();
+        await this.rootPage.locator('.ant-select-item').locator(`text="${timeFormat}"`).click();
+        break;
       case 'Formula':
         await this.get().locator('.nc-formula-input').fill(formula);
         break;
@@ -220,11 +232,15 @@ export class ColumnPageObject extends BasePage {
     type = 'SingleLineText',
     formula = '',
     format,
+    dateFormat = '',
+    timeFormat = '',
   }: {
     title: string;
     type?: string;
     formula?: string;
     format?: string;
+    dateFormat?: string;
+    timeFormat?: string;
   }) {
     await this.getColumnHeader(title).locator('.nc-ui-dt-dropdown').click();
     await this.rootPage.locator('li[role="menuitem"]:has-text("Edit")').click();
@@ -243,6 +259,14 @@ export class ColumnPageObject extends BasePage {
           })
           .click();
         break;
+      case 'DateTime':
+        // Date Format
+        await this.get().locator('.nc-date-select').click();
+        await this.rootPage.locator('.ant-select-item').locator(`text="${dateFormat}"`).click();
+        // Time Format
+        await this.get().locator('.nc-time-select').click();
+        await this.rootPage.locator('.ant-select-item').locator(`text="${timeFormat}"`).click();
+        break;
       default:
         break;
     }
diff --git a/tests/playwright/tests/columnDateTime.spec.ts b/tests/playwright/tests/columnDateTime.spec.ts
new file mode 100644
index 0000000000..faf81b627d
--- /dev/null
+++ b/tests/playwright/tests/columnDateTime.spec.ts
@@ -0,0 +1,69 @@
+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 dateTimeData = [
+  {
+    dateFormat: 'YYYY-MM-DD',
+    timeFormat: 'HH:mm',
+    date: '2022-12-12',
+    hour: '10',
+    minute: '20',
+  },
+  {
+    dateFormat: 'YYYY-MM-DD',
+    timeFormat: 'HH:mm:ss',
+    date: '2022-12-12',
+    hour: '10',
+    minute: '20',
+    second: '30',
+  },
+];
+
+test.describe('DateTime Column', () => {
+  let dashboard: DashboardPage;
+  let context: any;
+
+  test.beforeEach(async ({ page }) => {
+    context = await setup({ page });
+    dashboard = new DashboardPage(page, context.project);
+  });
+
+  test.only('Create DateTime Column', async () => {
+    await dashboard.treeView.createTable({ title: 'test_datetime' });
+    // Create DateTime column
+    await dashboard.grid.column.create({
+      title: 'NC_DATETIME_0',
+      type: 'DateTime',
+      dateFormat: dateTimeData[0].dateFormat,
+      timeFormat: dateTimeData[0].timeFormat,
+    });
+
+    await dashboard.grid.cell.dateTime.open({
+      index: 0,
+      columnHeader: 'NC_DATETIME_0',
+    });
+
+    await dashboard.grid.cell.dateTime.selectDate({
+      date: dateTimeData[0],
+    });
+    await dashboard.grid.cell.dateTime.selectTime({
+      hour: dateTimeData[0].hour,
+      minute: dateTimeData[0].minute,
+    });
+    await dashboard.grid.cell.dateTime.close();
+
+    for (let i = 0; i < dateTimeData.length; i++) {
+      // Edit DateTime column
+      await dashboard.grid.column.openEdit({
+        title: 'NC_DATETIME_0',
+        type: 'DateTime',
+        dateFormat: dateTimeData[i].dateFormat,
+        timeFormat: dateTimeData[i].timeFormat,
+      });
+      // TODO: ...
+    }
+  });
+});