From 5cff69bbd1b36ad7993901e633bf2092dd708b6a Mon Sep 17 00:00:00 2001
From: Pranav C <pranavxc@gmail.com>
Date: Tue, 13 Sep 2022 15:57:18 +0530
Subject: [PATCH] chore(cypress): improve date picker selection by filtering by
 classname

Signed-off-by: Pranav C <pranavxc@gmail.com>
---
 packages/nc-gui/components/cell/DatePicker.vue     |  2 +-
 packages/nc-gui/components/cell/DateTimePicker.vue |  2 +-
 packages/nc-gui/components/cell/TimePicker.vue     |  2 +-
 packages/nc-gui/components/cell/YearPicker.vue     |  2 +-
 scripts/cypress/support/commands.js                | 11 +++++++----
 5 files changed, 11 insertions(+), 8 deletions(-)

diff --git a/packages/nc-gui/components/cell/DatePicker.vue b/packages/nc-gui/components/cell/DatePicker.vue
index 381d643831..16ac154736 100644
--- a/packages/nc-gui/components/cell/DatePicker.vue
+++ b/packages/nc-gui/components/cell/DatePicker.vue
@@ -67,7 +67,7 @@ const placeholder = computed(() => (isDateInvalid ? 'Invalid date' : ''))
     :placeholder="placeholder"
     :allow-clear="!readOnly"
     :input-read-only="true"
-    :dropdown-class-name="randomClass"
+    :dropdown-class-name="`${randomClass} nc-picker-date`"
     :open="readOnly ? false : open"
     @click="open = !open"
   >
diff --git a/packages/nc-gui/components/cell/DateTimePicker.vue b/packages/nc-gui/components/cell/DateTimePicker.vue
index bdc30a158e..6f932de809 100644
--- a/packages/nc-gui/components/cell/DateTimePicker.vue
+++ b/packages/nc-gui/components/cell/DateTimePicker.vue
@@ -67,7 +67,7 @@ watch(
     :placeholder="isDateInvalid ? 'Invalid date' : ''"
     :allow-clear="!readOnly"
     :input-read-only="true"
-    :dropdown-class-name="randomClass"
+    :dropdown-class-name="`${randomClass} nc-picker-datetime`"
     :open="readOnly ? false : open"
     :disabled="readOnly"
     @click="open = !open"
diff --git a/packages/nc-gui/components/cell/TimePicker.vue b/packages/nc-gui/components/cell/TimePicker.vue
index 87a64a06c8..0fd82f3f68 100644
--- a/packages/nc-gui/components/cell/TimePicker.vue
+++ b/packages/nc-gui/components/cell/TimePicker.vue
@@ -79,7 +79,7 @@ watch(
     :allow-clear="!readOnly"
     :input-read-only="true"
     :open="readOnly ? false : open"
-    :popup-class-name="randomClass"
+    :popup-class-name="`${randomClass} nc-picker-time`"
     @click="open = !open"
     @ok="open = !open"
   >
diff --git a/packages/nc-gui/components/cell/YearPicker.vue b/packages/nc-gui/components/cell/YearPicker.vue
index b06bfa2db3..b7b435d651 100644
--- a/packages/nc-gui/components/cell/YearPicker.vue
+++ b/packages/nc-gui/components/cell/YearPicker.vue
@@ -66,7 +66,7 @@ const placeholder = computed(() => (isYearInvalid ? 'Invalid year' : ''))
     :allow-clear="!readOnly"
     :input-read-only="true"
     :open="readOnly ? false : open"
-    :dropdown-class-name="randomClass"
+    :dropdown-class-name="`${randomClass} nc-picker-year`"
     @click="open = !open"
     @change="open = !open"
   >
diff --git a/scripts/cypress/support/commands.js b/scripts/cypress/support/commands.js
index 94b4d6ad25..a8c2b2516a 100644
--- a/scripts/cypress/support/commands.js
+++ b/scripts/cypress/support/commands.js
@@ -283,7 +283,7 @@ Cypress.Commands.add('printLocalStorage', () => {
 });
 
 Cypress.Commands.add('getActiveModal', (wrapperSelector) => {
-  if(wrapperSelector){
+  if (wrapperSelector) {
     return cy.get(`${wrapperSelector} .ant-modal-content:visible`).last();
   }
   return cy.get('.ant-modal-content:visible').last();
@@ -301,20 +301,23 @@ Cypress.Commands.add('getActivePopUp', () => {
 });
 
 Cypress.Commands.add('getActiveSelection', (selector) => {
-  if(selector) {
+  if (selector) {
     return cy.get(`${selector}.ant-select-dropdown:visible`).last();
   }
   return cy.get('.ant-select-dropdown:visible').last();
 });
 
 Cypress.Commands.add('getActiveDrawer', (selector) => {
-  if(selector) {
+  if (selector) {
     return cy.get(`${selector} .ant-drawer-content:visible`).last();
   }
   return cy.get('.ant-drawer-content:visible').last();
 });
 
-Cypress.Commands.add('getActivePicker', () => {
+Cypress.Commands.add('getActivePicker', (dropdownSelector) => {
+  if (dropdownSelector) {
+    return cy.get(`${dropdownSelector}.ant-drawer-content:visible`).last();
+  }
   return cy.get('.ant-picker-dropdown :visible').last();
 });