From 34ffcd5215e92c26cd2ea7ae9fb3b89992befdbd Mon Sep 17 00:00:00 2001
From: Wing-Kam Wong <wingkwong.code@gmail.com>
Date: Mon, 5 Dec 2022 13:23:56 +0800
Subject: [PATCH] feat(playwright): datetime tests

---
 .../Dashboard/common/Cell/DateTimeCell.ts     | 21 ++++---
 tests/playwright/tests/columnDateTime.spec.ts | 61 ++++++++++---------
 2 files changed, 46 insertions(+), 36 deletions(-)

diff --git a/tests/playwright/pages/Dashboard/common/Cell/DateTimeCell.ts b/tests/playwright/pages/Dashboard/common/Cell/DateTimeCell.ts
index 0445b7fa60..50b762b618 100644
--- a/tests/playwright/pages/Dashboard/common/Cell/DateTimeCell.ts
+++ b/tests/playwright/pages/Dashboard/common/Cell/DateTimeCell.ts
@@ -14,18 +14,25 @@ export class DateTimeCellPageObject extends BasePage {
   }
 
   async open({ index, columnHeader }: { index: number; columnHeader: string }) {
+    await this.rootPage.locator('.nc-grid-add-new-cell').click();
+
     await this.cell.dblclick({
       index,
       columnHeader,
     });
   }
 
+  async save() {
+    await this.rootPage.locator('button:has-text("Ok")').click();
+  }
+
   async selectDate({
-    // date in format `YYYY-MM-DD`
+    // date formats in `YYYY-MM-DD`
     date,
   }: {
     date: string;
   }) {
+    // title date format needs to be YYYY-MM-DD
     await this.rootPage.locator(`td[title="${date}"]`).click();
   }
 
@@ -37,19 +44,19 @@ export class DateTimeCellPageObject extends BasePage {
     minute,
     second,
   }: {
-    hour: string;
-    minute: string;
-    second?: string;
+    hour: number;
+    minute: number;
+    second?: number | null;
   }) {
     await this.rootPage
-      .locator(`.ant-picker-time-panel-column:nth-child(1) > ant-picker-time-panel-cell:nth-child(${hour})`)
+      .locator(`.ant-picker-time-panel-column:nth-child(1) > .ant-picker-time-panel-cell:nth-child(${hour + 1})`)
       .click();
     await this.rootPage
-      .locator(`.ant-picker-time-panel-column:nth-child(2) > ant-picker-time-panel-cell:nth-child(${minute})`)
+      .locator(`.ant-picker-time-panel-column:nth-child(2) > .ant-picker-time-panel-cell:nth-child(${minute + 1})`)
       .click();
     if (second != null) {
       await this.rootPage
-        .locator(`.ant-picker-time-panel-column:nth-child(3) > ant-picker-time-panel-cell:nth-child(${second})`)
+        .locator(`.ant-picker-time-panel-column:nth-child(3) > .ant-picker-time-panel-cell:nth-child(${second + 1})`)
         .click();
     }
   }
diff --git a/tests/playwright/tests/columnDateTime.spec.ts b/tests/playwright/tests/columnDateTime.spec.ts
index bb6990be6b..e30e4837d1 100644
--- a/tests/playwright/tests/columnDateTime.spec.ts
+++ b/tests/playwright/tests/columnDateTime.spec.ts
@@ -2,59 +2,57 @@ 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',
+    hour: 10,
+    minute: 20,
     output: '2022-12-12 10:20',
   },
   {
     dateFormat: 'YYYY-MM-DD',
     timeFormat: 'HH:mm:ss',
-    date: '2022-12-12',
-    hour: '20',
-    minute: '30',
-    second: '40',
-    output: '2022-12-12 20:30:40',
+    date: '2022-12-11',
+    hour: 20,
+    minute: 30,
+    second: 40,
+    output: '2022-12-11 20:30:40',
   },
   {
     dateFormat: 'YYYY/MM/DD',
     timeFormat: 'HH:mm',
-    date: '2022/12/12',
-    hour: '10',
-    minute: '20',
-    output: '2022/12/12 10:20',
+    date: '2022-12-13',
+    hour: 10,
+    minute: 20,
+    output: '2022/12/13 10:20',
   },
   {
     dateFormat: 'YYYY/MM/DD',
     timeFormat: 'HH:mm:ss',
-    date: '2022/12/12',
-    hour: '5',
-    minute: '30',
-    second: '40',
-    output: '2022/12/12 05:30:40',
+    date: '2022-12-14',
+    hour: 5,
+    minute: 30,
+    second: 40,
+    output: '2022/12/14 05:30:40',
   },
   {
     dateFormat: 'DD-MM-YYYY',
     timeFormat: 'HH:mm',
-    date: '25-11-2022',
-    hour: '3',
-    minute: '20',
-    output: '12-12-2022 03:20',
+    date: '2022-12-10',
+    hour: 4,
+    minute: 30,
+    output: '10-12-2022 04:30',
   },
   {
     dateFormat: 'DD-MM-YYYY',
     timeFormat: 'HH:mm:ss',
-    date: '25-11-2022',
-    hour: '2',
-    minute: '30',
-    second: '40',
-    output: '25-11-2022 02:30:40',
+    date: '2022-12-26',
+    hour: 2,
+    minute: 30,
+    second: 40,
+    output: '26-12-2022 02:30:40',
   },
 ];
 
@@ -86,6 +84,8 @@ test.describe('DateTime Column', () => {
         timeFormat: dateTimeData[i].timeFormat,
       });
 
+      await dashboard.grid.column.save({ isUpdated: true });
+
       await dashboard.grid.cell.dateTime.open({
         index: 0,
         columnHeader: 'NC_DATETIME_0',
@@ -94,13 +94,16 @@ test.describe('DateTime Column', () => {
       await dashboard.grid.cell.dateTime.selectDate({
         date: dateTimeData[i].date,
       });
+
       await dashboard.grid.cell.dateTime.selectTime({
         hour: dateTimeData[i].hour,
         minute: dateTimeData[i].minute,
+        second: dateTimeData[i].second,
       });
-      await dashboard.grid.cell.dateTime.close();
 
-      await dashboard.grid.cell.verify({
+      await dashboard.grid.cell.dateTime.save();
+
+      await dashboard.grid.cell.verifyDateCell({
         index: 0,
         columnHeader: 'NC_DATETIME_0',
         value: dateTimeData[i].output,