From 232bb62c0f1d4a812bf716b9a04ad373718fd5d2 Mon Sep 17 00:00:00 2001
From: ahmad-demos <59571234+ahmad-demos@users.noreply.github.com>
Date: Thu, 17 Aug 2023 15:10:19 +0200
Subject: [PATCH] chore (refs T34082): add E2E Props. (#443)

* chore (refs T34082): add E2E Props.

* chore (refs T34082): add CHANGELOG.

* Update CHANGELOG.md

Co-authored-by: salisdemos <40487461+salisdemos@users.noreply.github.com>

* chore (refs T34082): add default value for prop.

---------

Co-authored-by: salisdemos <40487461+salisdemos@users.noreply.github.com>
---
 CHANGELOG.md                                        |  2 +-
 .../DpDateRangePicker/DpDateRangePicker.vue         | 13 +++++++++++--
 src/components/DpDatepicker/DpDatepicker.vue        |  8 +++++++-
 3 files changed, 19 insertions(+), 4 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 969dd31c3..359018897 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -6,7 +6,7 @@ Since v0.0.10, this Changelog is formatted according to the [Common Changelog][c
 
 ### Added
 
-- ([#437](https://github.com/demos-europe/demosplan-ui/pull/437)) Add missing Hooks/Selectors ([@ahmad-demos](https://github.com/@ahmad-demos))
+- ([#443](https://github.com/demos-europe/demosplan-ui/pull/443)), ([#437](https://github.com/demos-europe/demosplan-ui/pull/437)) Add E2E Props ([@ahmad-demos](https://github.com/@ahmad-demos))
 
 ## v0.1.11 - 2023-08-11
 
diff --git a/src/components/DpDateRangePicker/DpDateRangePicker.vue b/src/components/DpDateRangePicker/DpDateRangePicker.vue
index 6dc867d7b..b7e60f2c9 100644
--- a/src/components/DpDateRangePicker/DpDateRangePicker.vue
+++ b/src/components/DpDateRangePicker/DpDateRangePicker.vue
@@ -10,7 +10,7 @@
       :disabled="startDisabled"
       :value="startValue"
       :required="required || (endDate !== '' && endDate < currentDate)"
-      data-cy="startDateDescription"
+      :data-cy="dataCy.startDate"
       @input="handleInputStartDate" />
     <span>-</span>
     <dp-datepicker
@@ -23,7 +23,7 @@
       :disabled="endDisabled"
       :value="endValue"
       :required="required"
-      data-cy="endDateDescription"
+      :data-cy="dataCy.endDate"
       @input="handleInputEndDate" />
   </div>
 </template>
@@ -52,6 +52,15 @@ export default {
       default: 0
     },
 
+    dataCy: {
+      type: Object,
+      required: false,
+      default: () => ({}),
+      validator: (prop) => {
+        return Object.keys(prop).every(key => ['endDate', 'startDate'].includes(key))
+      }
+    },
+
     endDisabled: {
       type: Boolean,
       required: false,
diff --git a/src/components/DpDatepicker/DpDatepicker.vue b/src/components/DpDatepicker/DpDatepicker.vue
index 1143c84db..ee076d9f3 100644
--- a/src/components/DpDatepicker/DpDatepicker.vue
+++ b/src/components/DpDatepicker/DpDatepicker.vue
@@ -1,7 +1,7 @@
 <template>
   <div
     :id="id"
-    data-cy="datepicker"
+    :data-cy="dataCy"
     @input.stop.prevent="emitUpdate" />
 </template>
 
@@ -25,6 +25,12 @@ export default {
       default: 0
     },
 
+    dataCy: {
+      type: String,
+      required: false,
+      default: 'datepicker'
+    },
+
     disabled: {
       type: Boolean,
       required: false,