From 9140d4bfdd0b05064baea3a75a412f3416c0b69e Mon Sep 17 00:00:00 2001
From: musharaf-nocodb <musharaf@nocodb.com>
Date: Tue, 12 Dec 2023 08:09:35 +0530
Subject: [PATCH] fix : fixed test cases for webhook and date options

---
 .../smartsheet/column/DateOptions.vue         |  6 ++--
 .../smartsheet/column/DateTimeOptions.vue     |  2 +-
 .../pages/Dashboard/Grid/Column/index.ts      | 30 +++++++++----------
 .../pages/Dashboard/WebhookForm/index.ts      |  8 +----
 4 files changed, 19 insertions(+), 27 deletions(-)

diff --git a/packages/nc-gui/components/smartsheet/column/DateOptions.vue b/packages/nc-gui/components/smartsheet/column/DateOptions.vue
index 181894fb5e..cb59ad96ca 100644
--- a/packages/nc-gui/components/smartsheet/column/DateOptions.vue
+++ b/packages/nc-gui/components/smartsheet/column/DateOptions.vue
@@ -18,9 +18,9 @@ if (!vModel.value.meta?.date_format) {
 
 <template>
   <a-form-item :label="$t('labels.dateFormat')">
-    <a-select v-model:value="vModel.meta.date_format" class="nc-date-select" dropdown-class-name="nc-dropdown-date-format">
-      <a-select-option v-for="(format, i) of [...dateMonthFormats, ...dateFormats]" :key="i" :value="format">
-        <div class="flex gap-2 justify-between items-center" :data-testid="`nc-date-select-${format}`">
+    <a-select show-search v-model:value="vModel.meta.date_format"  class="nc-date-select" dropdown-class-name="nc-dropdown-date-format">
+      <a-select-option v-for="(format, i) of [ ...dateFormats,...dateMonthFormats]" :key="i" :value="format">
+        <div class="flex gap-2 justify-between items-center">
           {{ format }}
           <component
             :is="iconMap.check"
diff --git a/packages/nc-gui/components/smartsheet/column/DateTimeOptions.vue b/packages/nc-gui/components/smartsheet/column/DateTimeOptions.vue
index b1e7b0e1ca..555739e707 100644
--- a/packages/nc-gui/components/smartsheet/column/DateTimeOptions.vue
+++ b/packages/nc-gui/components/smartsheet/column/DateTimeOptions.vue
@@ -25,7 +25,7 @@ if (!vModel.value.meta?.time_format) {
   <a-form-item :label="$t('labels.dateFormat')">
     <a-select v-model:value="vModel.meta.date_format" class="nc-date-select" dropdown-class-name="nc-dropdown-date-format">
       <a-select-option v-for="(format, i) of dateFormats" :key="i" :value="format">
-        <div class="flex gap-2 w-full justify-between items-center" :data-testid="`nc-date-${format}`">
+        <div class="flex gap-2 w-full justify-between items-center">
           {{ format }}
           <component
             :is="iconMap.check"
diff --git a/tests/playwright/pages/Dashboard/Grid/Column/index.ts b/tests/playwright/pages/Dashboard/Grid/Column/index.ts
index 600ef15f13..21eb680434 100644
--- a/tests/playwright/pages/Dashboard/Grid/Column/index.ts
+++ b/tests/playwright/pages/Dashboard/Grid/Column/index.ts
@@ -104,20 +104,19 @@ export class ColumnPageObject extends BasePage {
             .click();
         }
         break;
+      case 'Date':
+        await this.get().locator('.nc-date-select').click();
+        await this.rootPage.locator('.nc-date-select').pressSequentially(dateFormat);
+        await this.rootPage.locator('.ant-select-item').locator(`text="${dateFormat}"`).click();
+        break;
       case 'DateTime':
         // Date Format
         await this.get().locator('.nc-date-select').click();
-        await this.rootPage.locator('.ant-select-item').locator(`[data-testid="nc-date-${dateFormat}"]`).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(`[data-testid="nc-time-${timeFormat}"]`).click();
-        break;
-      case 'Date': {
-        // Date Format
-        await this.get().locator('.nc-date-select').click();
-        await this.rootPage.locator('.ant-select-item').locator(`[data-testid="nc-date-select-${dateFormat}"]`).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;
@@ -307,19 +306,18 @@ export class ColumnPageObject extends BasePage {
           })
           .click();
         break;
-      case 'Date': {
-        // Date Format
-        await this.get().locator('.nc-date-select').click();
-        await this.rootPage.locator('.ant-select-item').locator(`[data-testid="nc-date-select-${dateFormat}"]`).click();
-        break;
-      }
       case 'DateTime':
         // Date Format
         await this.get().locator('.nc-date-select').click();
-        await this.rootPage.locator('.ant-select-item').locator(`[data-testid="nc-date-${dateFormat}"]`).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(`[data-testid="nc-time-${timeFormat}"]`).click();
+        await this.rootPage.locator('.ant-select-item').locator(`text="${timeFormat}"`).click();
+        break;
+      case 'Date':
+        await this.get().locator('.nc-date-select').click();
+        await this.rootPage.locator('.nc-date-select').pressSequentially(dateFormat);
+        await this.rootPage.locator('.ant-select-item').locator(`text="${dateFormat}"`).click();
         break;
       default:
         break;
diff --git a/tests/playwright/pages/Dashboard/WebhookForm/index.ts b/tests/playwright/pages/Dashboard/WebhookForm/index.ts
index 33696d178a..f1398fd9ed 100644
--- a/tests/playwright/pages/Dashboard/WebhookForm/index.ts
+++ b/tests/playwright/pages/Dashboard/WebhookForm/index.ts
@@ -154,13 +154,7 @@ export class WebhookFormPage extends BasePage {
     await this.rootPage.waitForTimeout(500);
 
     // kludge, as the dropdown is not visible even after scroll into view
-    await this.rootPage.locator('.ant-select-dropdown:visible').hover();
-    await this.rootPage
-      .locator('.ant-select-dropdown:visible')
-      .locator(`.ant-select-item`)
-      .last()
-      .scrollIntoViewIfNeeded();
-
+    await this.rootPage.locator('.ant-select-selection-search').pressSequentially(key);
     await this.rootPage
       .locator('.ant-select-dropdown:visible')
       .locator(`.ant-select-item:has-text("${key}")`)