From ebcc185181e6de78927eaa516e37495a3fa6eee7 Mon Sep 17 00:00:00 2001
From: kostasdano <kostas.danochristos@orfium.com>
Date: Wed, 13 Sep 2023 13:06:30 +0300
Subject: [PATCH] feat(tests): snaps

---
 .../Day/__snapshots__/Day.test.tsx.snap       |   4 +
 .../Month/__snapshots__/Month.test.tsx.snap   |  30 +++
 .../OverlayComponent.test.tsx.snap            | 105 ++++++++++-
 .../__snapshots__/MonthWrapper.test.tsx.snap  |  34 +++-
 .../DatePicker.stories.storyshot              | 176 +++++++++++++++++-
 5 files changed, 340 insertions(+), 9 deletions(-)

diff --git a/src/components/DatePicker/Day/__snapshots__/Day.test.tsx.snap b/src/components/DatePicker/Day/__snapshots__/Day.test.tsx.snap
index aacca0b47..42880bbed 100644
--- a/src/components/DatePicker/Day/__snapshots__/Day.test.tsx.snap
+++ b/src/components/DatePicker/Day/__snapshots__/Day.test.tsx.snap
@@ -84,6 +84,7 @@ exports[`Day should render correctly 1`] = `
         >
           <div
             class="emotion-0"
+            data-testid="3_11_2020"
           >
             <div
               class="emotion-1"
@@ -172,6 +173,7 @@ exports[`Day should render disabled correctly 1`] = `
         >
           <div
             class="emotion-0"
+            data-testid="3_11_2020"
           >
             <div
               class="emotion-1"
@@ -304,6 +306,7 @@ exports[`Day should render isFirst, isLast correctly 1`] = `
         >
           <div
             class="emotion-0"
+            data-testid="3_11_2020"
           >
             <div
               class="emotion-1"
@@ -436,6 +439,7 @@ exports[`Day should render isFirst, isLast correctly 2`] = `
         >
           <div
             class="emotion-0"
+            data-testid="3_11_2020"
           >
             <div
               class="emotion-1"
diff --git a/src/components/DatePicker/Month/__snapshots__/Month.test.tsx.snap b/src/components/DatePicker/Month/__snapshots__/Month.test.tsx.snap
index 3b2910332..c32c3088b 100644
--- a/src/components/DatePicker/Month/__snapshots__/Month.test.tsx.snap
+++ b/src/components/DatePicker/Month/__snapshots__/Month.test.tsx.snap
@@ -467,6 +467,7 @@ exports[`Month should render correctly 1`] = `
         >
           <div
             class="emotion-15"
+            data-testid="1_11_2020"
           >
             <div
               class="emotion-16"
@@ -482,6 +483,7 @@ exports[`Month should render correctly 1`] = `
         >
           <div
             class="emotion-15"
+            data-testid="2_11_2020"
           >
             <div
               class="emotion-16"
@@ -495,6 +497,7 @@ exports[`Month should render correctly 1`] = `
         >
           <div
             class="emotion-19"
+            data-testid="3_11_2020"
           >
             <div
               class="emotion-20"
@@ -508,6 +511,7 @@ exports[`Month should render correctly 1`] = `
         >
           <div
             class="emotion-21"
+            data-testid="4_11_2020_selected"
           >
             <div
               class="emotion-22"
@@ -521,6 +525,7 @@ exports[`Month should render correctly 1`] = `
         >
           <div
             class="emotion-23"
+            data-testid="5_11_2020"
           >
             <div
               class="emotion-24"
@@ -534,6 +539,7 @@ exports[`Month should render correctly 1`] = `
         >
           <div
             class="emotion-23"
+            data-testid="6_11_2020"
           >
             <div
               class="emotion-24"
@@ -547,6 +553,7 @@ exports[`Month should render correctly 1`] = `
         >
           <div
             class="emotion-23"
+            data-testid="7_11_2020"
           >
             <div
               class="emotion-24"
@@ -560,6 +567,7 @@ exports[`Month should render correctly 1`] = `
         >
           <div
             class="emotion-23"
+            data-testid="8_11_2020"
           >
             <div
               class="emotion-24"
@@ -575,6 +583,7 @@ exports[`Month should render correctly 1`] = `
         >
           <div
             class="emotion-23"
+            data-testid="9_11_2020"
           >
             <div
               class="emotion-24"
@@ -588,6 +597,7 @@ exports[`Month should render correctly 1`] = `
         >
           <div
             class="emotion-23"
+            data-testid="10_11_2020"
           >
             <div
               class="emotion-24"
@@ -601,6 +611,7 @@ exports[`Month should render correctly 1`] = `
         >
           <div
             class="emotion-23"
+            data-testid="11_11_2020"
           >
             <div
               class="emotion-24"
@@ -614,6 +625,7 @@ exports[`Month should render correctly 1`] = `
         >
           <div
             class="emotion-23"
+            data-testid="12_11_2020"
           >
             <div
               class="emotion-24"
@@ -627,6 +639,7 @@ exports[`Month should render correctly 1`] = `
         >
           <div
             class="emotion-23"
+            data-testid="13_11_2020"
           >
             <div
               class="emotion-24"
@@ -640,6 +653,7 @@ exports[`Month should render correctly 1`] = `
         >
           <div
             class="emotion-23"
+            data-testid="14_11_2020"
           >
             <div
               class="emotion-24"
@@ -653,6 +667,7 @@ exports[`Month should render correctly 1`] = `
         >
           <div
             class="emotion-23"
+            data-testid="15_11_2020"
           >
             <div
               class="emotion-24"
@@ -668,6 +683,7 @@ exports[`Month should render correctly 1`] = `
         >
           <div
             class="emotion-23"
+            data-testid="16_11_2020"
           >
             <div
               class="emotion-24"
@@ -681,6 +697,7 @@ exports[`Month should render correctly 1`] = `
         >
           <div
             class="emotion-23"
+            data-testid="17_11_2020"
           >
             <div
               class="emotion-24"
@@ -694,6 +711,7 @@ exports[`Month should render correctly 1`] = `
         >
           <div
             class="emotion-23"
+            data-testid="18_11_2020"
           >
             <div
               class="emotion-24"
@@ -707,6 +725,7 @@ exports[`Month should render correctly 1`] = `
         >
           <div
             class="emotion-23"
+            data-testid="19_11_2020"
           >
             <div
               class="emotion-24"
@@ -720,6 +739,7 @@ exports[`Month should render correctly 1`] = `
         >
           <div
             class="emotion-23"
+            data-testid="20_11_2020"
           >
             <div
               class="emotion-24"
@@ -733,6 +753,7 @@ exports[`Month should render correctly 1`] = `
         >
           <div
             class="emotion-23"
+            data-testid="21_11_2020"
           >
             <div
               class="emotion-24"
@@ -746,6 +767,7 @@ exports[`Month should render correctly 1`] = `
         >
           <div
             class="emotion-23"
+            data-testid="22_11_2020"
           >
             <div
               class="emotion-24"
@@ -761,6 +783,7 @@ exports[`Month should render correctly 1`] = `
         >
           <div
             class="emotion-23"
+            data-testid="23_11_2020"
           >
             <div
               class="emotion-24"
@@ -774,6 +797,7 @@ exports[`Month should render correctly 1`] = `
         >
           <div
             class="emotion-23"
+            data-testid="24_11_2020"
           >
             <div
               class="emotion-24"
@@ -787,6 +811,7 @@ exports[`Month should render correctly 1`] = `
         >
           <div
             class="emotion-23"
+            data-testid="25_11_2020"
           >
             <div
               class="emotion-24"
@@ -800,6 +825,7 @@ exports[`Month should render correctly 1`] = `
         >
           <div
             class="emotion-23"
+            data-testid="26_11_2020"
           >
             <div
               class="emotion-24"
@@ -813,6 +839,7 @@ exports[`Month should render correctly 1`] = `
         >
           <div
             class="emotion-23"
+            data-testid="27_11_2020"
           >
             <div
               class="emotion-24"
@@ -826,6 +853,7 @@ exports[`Month should render correctly 1`] = `
         >
           <div
             class="emotion-23"
+            data-testid="28_11_2020"
           >
             <div
               class="emotion-24"
@@ -839,6 +867,7 @@ exports[`Month should render correctly 1`] = `
         >
           <div
             class="emotion-23"
+            data-testid="29_11_2020"
           >
             <div
               class="emotion-24"
@@ -854,6 +883,7 @@ exports[`Month should render correctly 1`] = `
         >
           <div
             class="emotion-23"
+            data-testid="30_11_2020"
           >
             <div
               class="emotion-24"
diff --git a/src/components/DatePicker/OverlayComponent/__snapshots__/OverlayComponent.test.tsx.snap b/src/components/DatePicker/OverlayComponent/__snapshots__/OverlayComponent.test.tsx.snap
index 864effd9f..4f34c4577 100644
--- a/src/components/DatePicker/OverlayComponent/__snapshots__/OverlayComponent.test.tsx.snap
+++ b/src/components/DatePicker/OverlayComponent/__snapshots__/OverlayComponent.test.tsx.snap
@@ -1071,6 +1071,7 @@ exports[`OverlayComponent should render correctly 1`] = `
           >
             <div
               class="emotion-5"
+              data-testid="month_back"
             >
               <span
                 class="emotion-6"
@@ -1091,7 +1092,7 @@ exports[`OverlayComponent should render correctly 1`] = `
                 >
                   <button
                     class="emotion-10"
-                    data-testid="button"
+                    data-testid="button-month"
                     type="button"
                   >
                     <span
@@ -1121,6 +1122,7 @@ exports[`OverlayComponent should render correctly 1`] = `
               </div>
               <div
                 class="emotion-16"
+                data-testid="month_forward"
               >
                 <span
                   class="emotion-6"
@@ -1199,6 +1201,7 @@ exports[`OverlayComponent should render correctly 1`] = `
                 >
                   <div
                     class="emotion-34"
+                    data-testid="1_11_2020"
                   >
                     <div
                       class="emotion-35"
@@ -1214,6 +1217,7 @@ exports[`OverlayComponent should render correctly 1`] = `
                 >
                   <div
                     class="emotion-34"
+                    data-testid="2_11_2020"
                   >
                     <div
                       class="emotion-35"
@@ -1227,6 +1231,7 @@ exports[`OverlayComponent should render correctly 1`] = `
                 >
                   <div
                     class="emotion-38"
+                    data-testid="3_11_2020"
                   >
                     <div
                       class="emotion-39"
@@ -1240,6 +1245,7 @@ exports[`OverlayComponent should render correctly 1`] = `
                 >
                   <div
                     class="emotion-40"
+                    data-testid="4_11_2020_selected"
                   >
                     <div
                       class="emotion-41"
@@ -1253,6 +1259,7 @@ exports[`OverlayComponent should render correctly 1`] = `
                 >
                   <div
                     class="emotion-42"
+                    data-testid="5_11_2020"
                   >
                     <div
                       class="emotion-43"
@@ -1266,6 +1273,7 @@ exports[`OverlayComponent should render correctly 1`] = `
                 >
                   <div
                     class="emotion-42"
+                    data-testid="6_11_2020"
                   >
                     <div
                       class="emotion-43"
@@ -1279,6 +1287,7 @@ exports[`OverlayComponent should render correctly 1`] = `
                 >
                   <div
                     class="emotion-42"
+                    data-testid="7_11_2020"
                   >
                     <div
                       class="emotion-43"
@@ -1292,6 +1301,7 @@ exports[`OverlayComponent should render correctly 1`] = `
                 >
                   <div
                     class="emotion-42"
+                    data-testid="8_11_2020"
                   >
                     <div
                       class="emotion-43"
@@ -1307,6 +1317,7 @@ exports[`OverlayComponent should render correctly 1`] = `
                 >
                   <div
                     class="emotion-42"
+                    data-testid="9_11_2020"
                   >
                     <div
                       class="emotion-43"
@@ -1320,6 +1331,7 @@ exports[`OverlayComponent should render correctly 1`] = `
                 >
                   <div
                     class="emotion-42"
+                    data-testid="10_11_2020"
                   >
                     <div
                       class="emotion-43"
@@ -1333,6 +1345,7 @@ exports[`OverlayComponent should render correctly 1`] = `
                 >
                   <div
                     class="emotion-42"
+                    data-testid="11_11_2020"
                   >
                     <div
                       class="emotion-43"
@@ -1346,6 +1359,7 @@ exports[`OverlayComponent should render correctly 1`] = `
                 >
                   <div
                     class="emotion-42"
+                    data-testid="12_11_2020"
                   >
                     <div
                       class="emotion-43"
@@ -1359,6 +1373,7 @@ exports[`OverlayComponent should render correctly 1`] = `
                 >
                   <div
                     class="emotion-42"
+                    data-testid="13_11_2020"
                   >
                     <div
                       class="emotion-43"
@@ -1372,6 +1387,7 @@ exports[`OverlayComponent should render correctly 1`] = `
                 >
                   <div
                     class="emotion-42"
+                    data-testid="14_11_2020"
                   >
                     <div
                       class="emotion-43"
@@ -1385,6 +1401,7 @@ exports[`OverlayComponent should render correctly 1`] = `
                 >
                   <div
                     class="emotion-42"
+                    data-testid="15_11_2020"
                   >
                     <div
                       class="emotion-43"
@@ -1400,6 +1417,7 @@ exports[`OverlayComponent should render correctly 1`] = `
                 >
                   <div
                     class="emotion-42"
+                    data-testid="16_11_2020"
                   >
                     <div
                       class="emotion-43"
@@ -1413,6 +1431,7 @@ exports[`OverlayComponent should render correctly 1`] = `
                 >
                   <div
                     class="emotion-42"
+                    data-testid="17_11_2020"
                   >
                     <div
                       class="emotion-43"
@@ -1426,6 +1445,7 @@ exports[`OverlayComponent should render correctly 1`] = `
                 >
                   <div
                     class="emotion-42"
+                    data-testid="18_11_2020"
                   >
                     <div
                       class="emotion-43"
@@ -1439,6 +1459,7 @@ exports[`OverlayComponent should render correctly 1`] = `
                 >
                   <div
                     class="emotion-42"
+                    data-testid="19_11_2020"
                   >
                     <div
                       class="emotion-43"
@@ -1452,6 +1473,7 @@ exports[`OverlayComponent should render correctly 1`] = `
                 >
                   <div
                     class="emotion-42"
+                    data-testid="20_11_2020"
                   >
                     <div
                       class="emotion-43"
@@ -1465,6 +1487,7 @@ exports[`OverlayComponent should render correctly 1`] = `
                 >
                   <div
                     class="emotion-42"
+                    data-testid="21_11_2020"
                   >
                     <div
                       class="emotion-43"
@@ -1478,6 +1501,7 @@ exports[`OverlayComponent should render correctly 1`] = `
                 >
                   <div
                     class="emotion-42"
+                    data-testid="22_11_2020"
                   >
                     <div
                       class="emotion-43"
@@ -1493,6 +1517,7 @@ exports[`OverlayComponent should render correctly 1`] = `
                 >
                   <div
                     class="emotion-42"
+                    data-testid="23_11_2020"
                   >
                     <div
                       class="emotion-43"
@@ -1506,6 +1531,7 @@ exports[`OverlayComponent should render correctly 1`] = `
                 >
                   <div
                     class="emotion-42"
+                    data-testid="24_11_2020"
                   >
                     <div
                       class="emotion-43"
@@ -1519,6 +1545,7 @@ exports[`OverlayComponent should render correctly 1`] = `
                 >
                   <div
                     class="emotion-42"
+                    data-testid="25_11_2020"
                   >
                     <div
                       class="emotion-43"
@@ -1532,6 +1559,7 @@ exports[`OverlayComponent should render correctly 1`] = `
                 >
                   <div
                     class="emotion-42"
+                    data-testid="26_11_2020"
                   >
                     <div
                       class="emotion-43"
@@ -1545,6 +1573,7 @@ exports[`OverlayComponent should render correctly 1`] = `
                 >
                   <div
                     class="emotion-42"
+                    data-testid="27_11_2020"
                   >
                     <div
                       class="emotion-43"
@@ -1558,6 +1587,7 @@ exports[`OverlayComponent should render correctly 1`] = `
                 >
                   <div
                     class="emotion-42"
+                    data-testid="28_11_2020"
                   >
                     <div
                       class="emotion-43"
@@ -1571,6 +1601,7 @@ exports[`OverlayComponent should render correctly 1`] = `
                 >
                   <div
                     class="emotion-42"
+                    data-testid="29_11_2020"
                   >
                     <div
                       class="emotion-43"
@@ -1586,6 +1617,7 @@ exports[`OverlayComponent should render correctly 1`] = `
                 >
                   <div
                     class="emotion-42"
+                    data-testid="30_11_2020"
                   >
                     <div
                       class="emotion-43"
@@ -2673,6 +2705,7 @@ exports[`OverlayComponent should render datepicker correctly 1`] = `
           >
             <div
               class="emotion-5"
+              data-testid="month_back"
             >
               <span
                 class="emotion-6"
@@ -2691,7 +2724,9 @@ exports[`OverlayComponent should render datepicker correctly 1`] = `
                 <div
                   class="emotion-9"
                 >
-                  <div>
+                  <div
+                    data-testid="left_month"
+                  >
                     November
                      
                     2020
@@ -2767,6 +2802,7 @@ exports[`OverlayComponent should render datepicker correctly 1`] = `
                 >
                   <div
                     class="emotion-25"
+                    data-testid="1_11_2020"
                   >
                     <div
                       class="emotion-26"
@@ -2782,6 +2818,7 @@ exports[`OverlayComponent should render datepicker correctly 1`] = `
                 >
                   <div
                     class="emotion-25"
+                    data-testid="2_11_2020"
                   >
                     <div
                       class="emotion-26"
@@ -2795,6 +2832,7 @@ exports[`OverlayComponent should render datepicker correctly 1`] = `
                 >
                   <div
                     class="emotion-29"
+                    data-testid="3_11_2020"
                   >
                     <div
                       class="emotion-30"
@@ -2808,6 +2846,7 @@ exports[`OverlayComponent should render datepicker correctly 1`] = `
                 >
                   <div
                     class="emotion-31"
+                    data-testid="4_11_2020_selected"
                   >
                     <div
                       class="emotion-32"
@@ -2821,6 +2860,7 @@ exports[`OverlayComponent should render datepicker correctly 1`] = `
                 >
                   <div
                     class="emotion-33"
+                    data-testid="5_11_2020"
                   >
                     <div
                       class="emotion-34"
@@ -2834,6 +2874,7 @@ exports[`OverlayComponent should render datepicker correctly 1`] = `
                 >
                   <div
                     class="emotion-33"
+                    data-testid="6_11_2020"
                   >
                     <div
                       class="emotion-34"
@@ -2847,6 +2888,7 @@ exports[`OverlayComponent should render datepicker correctly 1`] = `
                 >
                   <div
                     class="emotion-33"
+                    data-testid="7_11_2020"
                   >
                     <div
                       class="emotion-34"
@@ -2860,6 +2902,7 @@ exports[`OverlayComponent should render datepicker correctly 1`] = `
                 >
                   <div
                     class="emotion-33"
+                    data-testid="8_11_2020"
                   >
                     <div
                       class="emotion-34"
@@ -2875,6 +2918,7 @@ exports[`OverlayComponent should render datepicker correctly 1`] = `
                 >
                   <div
                     class="emotion-33"
+                    data-testid="9_11_2020"
                   >
                     <div
                       class="emotion-34"
@@ -2888,6 +2932,7 @@ exports[`OverlayComponent should render datepicker correctly 1`] = `
                 >
                   <div
                     class="emotion-33"
+                    data-testid="10_11_2020"
                   >
                     <div
                       class="emotion-34"
@@ -2901,6 +2946,7 @@ exports[`OverlayComponent should render datepicker correctly 1`] = `
                 >
                   <div
                     class="emotion-33"
+                    data-testid="11_11_2020"
                   >
                     <div
                       class="emotion-34"
@@ -2914,6 +2960,7 @@ exports[`OverlayComponent should render datepicker correctly 1`] = `
                 >
                   <div
                     class="emotion-33"
+                    data-testid="12_11_2020"
                   >
                     <div
                       class="emotion-34"
@@ -2927,6 +2974,7 @@ exports[`OverlayComponent should render datepicker correctly 1`] = `
                 >
                   <div
                     class="emotion-33"
+                    data-testid="13_11_2020"
                   >
                     <div
                       class="emotion-34"
@@ -2940,6 +2988,7 @@ exports[`OverlayComponent should render datepicker correctly 1`] = `
                 >
                   <div
                     class="emotion-33"
+                    data-testid="14_11_2020"
                   >
                     <div
                       class="emotion-34"
@@ -2953,6 +3002,7 @@ exports[`OverlayComponent should render datepicker correctly 1`] = `
                 >
                   <div
                     class="emotion-33"
+                    data-testid="15_11_2020"
                   >
                     <div
                       class="emotion-34"
@@ -2968,6 +3018,7 @@ exports[`OverlayComponent should render datepicker correctly 1`] = `
                 >
                   <div
                     class="emotion-33"
+                    data-testid="16_11_2020"
                   >
                     <div
                       class="emotion-34"
@@ -2981,6 +3032,7 @@ exports[`OverlayComponent should render datepicker correctly 1`] = `
                 >
                   <div
                     class="emotion-33"
+                    data-testid="17_11_2020"
                   >
                     <div
                       class="emotion-34"
@@ -2994,6 +3046,7 @@ exports[`OverlayComponent should render datepicker correctly 1`] = `
                 >
                   <div
                     class="emotion-33"
+                    data-testid="18_11_2020"
                   >
                     <div
                       class="emotion-34"
@@ -3007,6 +3060,7 @@ exports[`OverlayComponent should render datepicker correctly 1`] = `
                 >
                   <div
                     class="emotion-33"
+                    data-testid="19_11_2020"
                   >
                     <div
                       class="emotion-34"
@@ -3020,6 +3074,7 @@ exports[`OverlayComponent should render datepicker correctly 1`] = `
                 >
                   <div
                     class="emotion-33"
+                    data-testid="20_11_2020"
                   >
                     <div
                       class="emotion-34"
@@ -3033,6 +3088,7 @@ exports[`OverlayComponent should render datepicker correctly 1`] = `
                 >
                   <div
                     class="emotion-33"
+                    data-testid="21_11_2020"
                   >
                     <div
                       class="emotion-34"
@@ -3046,6 +3102,7 @@ exports[`OverlayComponent should render datepicker correctly 1`] = `
                 >
                   <div
                     class="emotion-33"
+                    data-testid="22_11_2020"
                   >
                     <div
                       class="emotion-34"
@@ -3061,6 +3118,7 @@ exports[`OverlayComponent should render datepicker correctly 1`] = `
                 >
                   <div
                     class="emotion-33"
+                    data-testid="23_11_2020"
                   >
                     <div
                       class="emotion-34"
@@ -3074,6 +3132,7 @@ exports[`OverlayComponent should render datepicker correctly 1`] = `
                 >
                   <div
                     class="emotion-33"
+                    data-testid="24_11_2020"
                   >
                     <div
                       class="emotion-34"
@@ -3087,6 +3146,7 @@ exports[`OverlayComponent should render datepicker correctly 1`] = `
                 >
                   <div
                     class="emotion-33"
+                    data-testid="25_11_2020"
                   >
                     <div
                       class="emotion-34"
@@ -3100,6 +3160,7 @@ exports[`OverlayComponent should render datepicker correctly 1`] = `
                 >
                   <div
                     class="emotion-33"
+                    data-testid="26_11_2020"
                   >
                     <div
                       class="emotion-34"
@@ -3113,6 +3174,7 @@ exports[`OverlayComponent should render datepicker correctly 1`] = `
                 >
                   <div
                     class="emotion-33"
+                    data-testid="27_11_2020"
                   >
                     <div
                       class="emotion-34"
@@ -3126,6 +3188,7 @@ exports[`OverlayComponent should render datepicker correctly 1`] = `
                 >
                   <div
                     class="emotion-33"
+                    data-testid="28_11_2020"
                   >
                     <div
                       class="emotion-34"
@@ -3139,6 +3202,7 @@ exports[`OverlayComponent should render datepicker correctly 1`] = `
                 >
                   <div
                     class="emotion-33"
+                    data-testid="29_11_2020"
                   >
                     <div
                       class="emotion-34"
@@ -3154,6 +3218,7 @@ exports[`OverlayComponent should render datepicker correctly 1`] = `
                 >
                   <div
                     class="emotion-33"
+                    data-testid="30_11_2020"
                   >
                     <div
                       class="emotion-34"
@@ -3199,7 +3264,9 @@ exports[`OverlayComponent should render datepicker correctly 1`] = `
                 <div
                   class="emotion-9"
                 >
-                  <div>
+                  <div
+                    data-testid="right_month"
+                  >
                     December
                      
                     2020
@@ -3208,6 +3275,7 @@ exports[`OverlayComponent should render datepicker correctly 1`] = `
               </div>
               <div
                 class="emotion-95"
+                data-testid="month_forward"
               >
                 <span
                   class="emotion-6"
@@ -3271,6 +3339,7 @@ exports[`OverlayComponent should render datepicker correctly 1`] = `
                 >
                   <div
                     class="emotion-33"
+                    data-testid="1_12_2020"
                   >
                     <div
                       class="emotion-34"
@@ -3284,6 +3353,7 @@ exports[`OverlayComponent should render datepicker correctly 1`] = `
                 >
                   <div
                     class="emotion-33"
+                    data-testid="2_12_2020"
                   >
                     <div
                       class="emotion-34"
@@ -3297,6 +3367,7 @@ exports[`OverlayComponent should render datepicker correctly 1`] = `
                 >
                   <div
                     class="emotion-33"
+                    data-testid="3_12_2020"
                   >
                     <div
                       class="emotion-34"
@@ -3310,6 +3381,7 @@ exports[`OverlayComponent should render datepicker correctly 1`] = `
                 >
                   <div
                     class="emotion-33"
+                    data-testid="4_12_2020"
                   >
                     <div
                       class="emotion-34"
@@ -3323,6 +3395,7 @@ exports[`OverlayComponent should render datepicker correctly 1`] = `
                 >
                   <div
                     class="emotion-33"
+                    data-testid="5_12_2020"
                   >
                     <div
                       class="emotion-34"
@@ -3336,6 +3409,7 @@ exports[`OverlayComponent should render datepicker correctly 1`] = `
                 >
                   <div
                     class="emotion-33"
+                    data-testid="6_12_2020"
                   >
                     <div
                       class="emotion-34"
@@ -3351,6 +3425,7 @@ exports[`OverlayComponent should render datepicker correctly 1`] = `
                 >
                   <div
                     class="emotion-33"
+                    data-testid="7_12_2020"
                   >
                     <div
                       class="emotion-34"
@@ -3364,6 +3439,7 @@ exports[`OverlayComponent should render datepicker correctly 1`] = `
                 >
                   <div
                     class="emotion-33"
+                    data-testid="8_12_2020"
                   >
                     <div
                       class="emotion-34"
@@ -3377,6 +3453,7 @@ exports[`OverlayComponent should render datepicker correctly 1`] = `
                 >
                   <div
                     class="emotion-33"
+                    data-testid="9_12_2020"
                   >
                     <div
                       class="emotion-34"
@@ -3390,6 +3467,7 @@ exports[`OverlayComponent should render datepicker correctly 1`] = `
                 >
                   <div
                     class="emotion-33"
+                    data-testid="10_12_2020"
                   >
                     <div
                       class="emotion-34"
@@ -3403,6 +3481,7 @@ exports[`OverlayComponent should render datepicker correctly 1`] = `
                 >
                   <div
                     class="emotion-33"
+                    data-testid="11_12_2020"
                   >
                     <div
                       class="emotion-34"
@@ -3416,6 +3495,7 @@ exports[`OverlayComponent should render datepicker correctly 1`] = `
                 >
                   <div
                     class="emotion-33"
+                    data-testid="12_12_2020"
                   >
                     <div
                       class="emotion-34"
@@ -3429,6 +3509,7 @@ exports[`OverlayComponent should render datepicker correctly 1`] = `
                 >
                   <div
                     class="emotion-33"
+                    data-testid="13_12_2020"
                   >
                     <div
                       class="emotion-34"
@@ -3444,6 +3525,7 @@ exports[`OverlayComponent should render datepicker correctly 1`] = `
                 >
                   <div
                     class="emotion-33"
+                    data-testid="14_12_2020"
                   >
                     <div
                       class="emotion-34"
@@ -3457,6 +3539,7 @@ exports[`OverlayComponent should render datepicker correctly 1`] = `
                 >
                   <div
                     class="emotion-33"
+                    data-testid="15_12_2020"
                   >
                     <div
                       class="emotion-34"
@@ -3470,6 +3553,7 @@ exports[`OverlayComponent should render datepicker correctly 1`] = `
                 >
                   <div
                     class="emotion-33"
+                    data-testid="16_12_2020"
                   >
                     <div
                       class="emotion-34"
@@ -3483,6 +3567,7 @@ exports[`OverlayComponent should render datepicker correctly 1`] = `
                 >
                   <div
                     class="emotion-140"
+                    data-testid="17_12_2020_selected"
                   >
                     <div
                       class="emotion-32"
@@ -3496,6 +3581,7 @@ exports[`OverlayComponent should render datepicker correctly 1`] = `
                 >
                   <div
                     class="emotion-25"
+                    data-testid="18_12_2020"
                   >
                     <div
                       class="emotion-26"
@@ -3509,6 +3595,7 @@ exports[`OverlayComponent should render datepicker correctly 1`] = `
                 >
                   <div
                     class="emotion-25"
+                    data-testid="19_12_2020"
                   >
                     <div
                       class="emotion-26"
@@ -3522,6 +3609,7 @@ exports[`OverlayComponent should render datepicker correctly 1`] = `
                 >
                   <div
                     class="emotion-25"
+                    data-testid="20_12_2020"
                   >
                     <div
                       class="emotion-26"
@@ -3537,6 +3625,7 @@ exports[`OverlayComponent should render datepicker correctly 1`] = `
                 >
                   <div
                     class="emotion-25"
+                    data-testid="21_12_2020"
                   >
                     <div
                       class="emotion-26"
@@ -3550,6 +3639,7 @@ exports[`OverlayComponent should render datepicker correctly 1`] = `
                 >
                   <div
                     class="emotion-25"
+                    data-testid="22_12_2020"
                   >
                     <div
                       class="emotion-26"
@@ -3563,6 +3653,7 @@ exports[`OverlayComponent should render datepicker correctly 1`] = `
                 >
                   <div
                     class="emotion-25"
+                    data-testid="23_12_2020"
                   >
                     <div
                       class="emotion-26"
@@ -3576,6 +3667,7 @@ exports[`OverlayComponent should render datepicker correctly 1`] = `
                 >
                   <div
                     class="emotion-25"
+                    data-testid="24_12_2020"
                   >
                     <div
                       class="emotion-26"
@@ -3589,6 +3681,7 @@ exports[`OverlayComponent should render datepicker correctly 1`] = `
                 >
                   <div
                     class="emotion-25"
+                    data-testid="25_12_2020"
                   >
                     <div
                       class="emotion-26"
@@ -3602,6 +3695,7 @@ exports[`OverlayComponent should render datepicker correctly 1`] = `
                 >
                   <div
                     class="emotion-25"
+                    data-testid="26_12_2020"
                   >
                     <div
                       class="emotion-26"
@@ -3615,6 +3709,7 @@ exports[`OverlayComponent should render datepicker correctly 1`] = `
                 >
                   <div
                     class="emotion-25"
+                    data-testid="27_12_2020"
                   >
                     <div
                       class="emotion-26"
@@ -3630,6 +3725,7 @@ exports[`OverlayComponent should render datepicker correctly 1`] = `
                 >
                   <div
                     class="emotion-25"
+                    data-testid="28_12_2020"
                   >
                     <div
                       class="emotion-26"
@@ -3643,6 +3739,7 @@ exports[`OverlayComponent should render datepicker correctly 1`] = `
                 >
                   <div
                     class="emotion-25"
+                    data-testid="29_12_2020"
                   >
                     <div
                       class="emotion-26"
@@ -3656,6 +3753,7 @@ exports[`OverlayComponent should render datepicker correctly 1`] = `
                 >
                   <div
                     class="emotion-25"
+                    data-testid="30_12_2020"
                   >
                     <div
                       class="emotion-26"
@@ -3669,6 +3767,7 @@ exports[`OverlayComponent should render datepicker correctly 1`] = `
                 >
                   <div
                     class="emotion-25"
+                    data-testid="31_12_2020"
                   >
                     <div
                       class="emotion-26"
diff --git a/src/components/DatePicker/OverlayComponent/components/MonthWrapper/__snapshots__/MonthWrapper.test.tsx.snap b/src/components/DatePicker/OverlayComponent/components/MonthWrapper/__snapshots__/MonthWrapper.test.tsx.snap
index 7938a2b85..a56749917 100644
--- a/src/components/DatePicker/OverlayComponent/components/MonthWrapper/__snapshots__/MonthWrapper.test.tsx.snap
+++ b/src/components/DatePicker/OverlayComponent/components/MonthWrapper/__snapshots__/MonthWrapper.test.tsx.snap
@@ -788,6 +788,7 @@ exports[`MonthWrapper should render correctly 1`] = `
     >
       <div
         class="emotion-2"
+        data-testid="month_back"
       >
         <span
           class="emotion-3"
@@ -808,7 +809,7 @@ exports[`MonthWrapper should render correctly 1`] = `
           >
             <button
               class="emotion-7"
-              data-testid="button"
+              data-testid="button-month"
               type="button"
             >
               <span
@@ -838,6 +839,7 @@ exports[`MonthWrapper should render correctly 1`] = `
         </div>
         <div
           class="emotion-13"
+          data-testid="month_forward"
         >
           <span
             class="emotion-3"
@@ -916,6 +918,7 @@ exports[`MonthWrapper should render correctly 1`] = `
           >
             <div
               class="emotion-31"
+              data-testid="1_11_2020"
             >
               <div
                 class="emotion-32"
@@ -931,6 +934,7 @@ exports[`MonthWrapper should render correctly 1`] = `
           >
             <div
               class="emotion-31"
+              data-testid="2_11_2020"
             >
               <div
                 class="emotion-32"
@@ -944,6 +948,7 @@ exports[`MonthWrapper should render correctly 1`] = `
           >
             <div
               class="emotion-35"
+              data-testid="3_11_2020"
             >
               <div
                 class="emotion-36"
@@ -957,6 +962,7 @@ exports[`MonthWrapper should render correctly 1`] = `
           >
             <div
               class="emotion-37"
+              data-testid="4_11_2020_selected"
             >
               <div
                 class="emotion-38"
@@ -970,6 +976,7 @@ exports[`MonthWrapper should render correctly 1`] = `
           >
             <div
               class="emotion-39"
+              data-testid="5_11_2020"
             >
               <div
                 class="emotion-40"
@@ -983,6 +990,7 @@ exports[`MonthWrapper should render correctly 1`] = `
           >
             <div
               class="emotion-39"
+              data-testid="6_11_2020"
             >
               <div
                 class="emotion-40"
@@ -996,6 +1004,7 @@ exports[`MonthWrapper should render correctly 1`] = `
           >
             <div
               class="emotion-39"
+              data-testid="7_11_2020"
             >
               <div
                 class="emotion-40"
@@ -1009,6 +1018,7 @@ exports[`MonthWrapper should render correctly 1`] = `
           >
             <div
               class="emotion-39"
+              data-testid="8_11_2020"
             >
               <div
                 class="emotion-40"
@@ -1024,6 +1034,7 @@ exports[`MonthWrapper should render correctly 1`] = `
           >
             <div
               class="emotion-39"
+              data-testid="9_11_2020"
             >
               <div
                 class="emotion-40"
@@ -1037,6 +1048,7 @@ exports[`MonthWrapper should render correctly 1`] = `
           >
             <div
               class="emotion-39"
+              data-testid="10_11_2020"
             >
               <div
                 class="emotion-40"
@@ -1050,6 +1062,7 @@ exports[`MonthWrapper should render correctly 1`] = `
           >
             <div
               class="emotion-39"
+              data-testid="11_11_2020"
             >
               <div
                 class="emotion-40"
@@ -1063,6 +1076,7 @@ exports[`MonthWrapper should render correctly 1`] = `
           >
             <div
               class="emotion-39"
+              data-testid="12_11_2020"
             >
               <div
                 class="emotion-40"
@@ -1076,6 +1090,7 @@ exports[`MonthWrapper should render correctly 1`] = `
           >
             <div
               class="emotion-39"
+              data-testid="13_11_2020"
             >
               <div
                 class="emotion-40"
@@ -1089,6 +1104,7 @@ exports[`MonthWrapper should render correctly 1`] = `
           >
             <div
               class="emotion-39"
+              data-testid="14_11_2020"
             >
               <div
                 class="emotion-40"
@@ -1102,6 +1118,7 @@ exports[`MonthWrapper should render correctly 1`] = `
           >
             <div
               class="emotion-39"
+              data-testid="15_11_2020"
             >
               <div
                 class="emotion-40"
@@ -1117,6 +1134,7 @@ exports[`MonthWrapper should render correctly 1`] = `
           >
             <div
               class="emotion-39"
+              data-testid="16_11_2020"
             >
               <div
                 class="emotion-40"
@@ -1130,6 +1148,7 @@ exports[`MonthWrapper should render correctly 1`] = `
           >
             <div
               class="emotion-39"
+              data-testid="17_11_2020"
             >
               <div
                 class="emotion-40"
@@ -1143,6 +1162,7 @@ exports[`MonthWrapper should render correctly 1`] = `
           >
             <div
               class="emotion-39"
+              data-testid="18_11_2020"
             >
               <div
                 class="emotion-40"
@@ -1156,6 +1176,7 @@ exports[`MonthWrapper should render correctly 1`] = `
           >
             <div
               class="emotion-39"
+              data-testid="19_11_2020"
             >
               <div
                 class="emotion-40"
@@ -1169,6 +1190,7 @@ exports[`MonthWrapper should render correctly 1`] = `
           >
             <div
               class="emotion-39"
+              data-testid="20_11_2020"
             >
               <div
                 class="emotion-40"
@@ -1182,6 +1204,7 @@ exports[`MonthWrapper should render correctly 1`] = `
           >
             <div
               class="emotion-39"
+              data-testid="21_11_2020"
             >
               <div
                 class="emotion-40"
@@ -1195,6 +1218,7 @@ exports[`MonthWrapper should render correctly 1`] = `
           >
             <div
               class="emotion-39"
+              data-testid="22_11_2020"
             >
               <div
                 class="emotion-40"
@@ -1210,6 +1234,7 @@ exports[`MonthWrapper should render correctly 1`] = `
           >
             <div
               class="emotion-39"
+              data-testid="23_11_2020"
             >
               <div
                 class="emotion-40"
@@ -1223,6 +1248,7 @@ exports[`MonthWrapper should render correctly 1`] = `
           >
             <div
               class="emotion-39"
+              data-testid="24_11_2020"
             >
               <div
                 class="emotion-40"
@@ -1236,6 +1262,7 @@ exports[`MonthWrapper should render correctly 1`] = `
           >
             <div
               class="emotion-39"
+              data-testid="25_11_2020"
             >
               <div
                 class="emotion-40"
@@ -1249,6 +1276,7 @@ exports[`MonthWrapper should render correctly 1`] = `
           >
             <div
               class="emotion-39"
+              data-testid="26_11_2020"
             >
               <div
                 class="emotion-40"
@@ -1262,6 +1290,7 @@ exports[`MonthWrapper should render correctly 1`] = `
           >
             <div
               class="emotion-39"
+              data-testid="27_11_2020"
             >
               <div
                 class="emotion-40"
@@ -1275,6 +1304,7 @@ exports[`MonthWrapper should render correctly 1`] = `
           >
             <div
               class="emotion-39"
+              data-testid="28_11_2020"
             >
               <div
                 class="emotion-40"
@@ -1288,6 +1318,7 @@ exports[`MonthWrapper should render correctly 1`] = `
           >
             <div
               class="emotion-39"
+              data-testid="29_11_2020"
             >
               <div
                 class="emotion-40"
@@ -1303,6 +1334,7 @@ exports[`MonthWrapper should render correctly 1`] = `
           >
             <div
               class="emotion-39"
+              data-testid="30_11_2020"
             >
               <div
                 class="emotion-40"
diff --git a/src/components/DatePicker/__snapshots__/DatePicker.stories.storyshot b/src/components/DatePicker/__snapshots__/DatePicker.stories.storyshot
index 85a5b50a3..f871f803f 100644
--- a/src/components/DatePicker/__snapshots__/DatePicker.stories.storyshot
+++ b/src/components/DatePicker/__snapshots__/DatePicker.stories.storyshot
@@ -790,6 +790,7 @@ exports[`Storyshots Design System/DatePicker Calendar 1`] = `
                   >
                     <div
                       className="emotion-11"
+                      data-testid="month_back"
                       onClick={[Function]}
                     >
                       <span
@@ -810,7 +811,9 @@ exports[`Storyshots Design System/DatePicker Calendar 1`] = `
                         <div
                           className="emotion-15"
                         >
-                          <div>
+                          <div
+                            data-testid="left_month"
+                          >
                             November
                              
                             2020
@@ -891,6 +894,7 @@ exports[`Storyshots Design System/DatePicker Calendar 1`] = `
                         >
                           <div
                             className="emotion-31"
+                            data-testid="1_11_2020"
                           >
                             <div
                               className="emotion-32"
@@ -911,6 +915,7 @@ exports[`Storyshots Design System/DatePicker Calendar 1`] = `
                         >
                           <div
                             className="emotion-31"
+                            data-testid="2_11_2020"
                           >
                             <div
                               className="emotion-32"
@@ -929,6 +934,7 @@ exports[`Storyshots Design System/DatePicker Calendar 1`] = `
                         >
                           <div
                             className="emotion-35"
+                            data-testid="3_11_2020"
                           >
                             <div
                               className="emotion-36"
@@ -947,6 +953,7 @@ exports[`Storyshots Design System/DatePicker Calendar 1`] = `
                         >
                           <div
                             className="emotion-37"
+                            data-testid="4_11_2020_selected"
                           >
                             <div
                               className="emotion-38"
@@ -965,6 +972,7 @@ exports[`Storyshots Design System/DatePicker Calendar 1`] = `
                         >
                           <div
                             className="emotion-39"
+                            data-testid="5_11_2020"
                           >
                             <div
                               className="emotion-40"
@@ -983,6 +991,7 @@ exports[`Storyshots Design System/DatePicker Calendar 1`] = `
                         >
                           <div
                             className="emotion-39"
+                            data-testid="6_11_2020"
                           >
                             <div
                               className="emotion-40"
@@ -1001,6 +1010,7 @@ exports[`Storyshots Design System/DatePicker Calendar 1`] = `
                         >
                           <div
                             className="emotion-39"
+                            data-testid="7_11_2020"
                           >
                             <div
                               className="emotion-40"
@@ -1019,6 +1029,7 @@ exports[`Storyshots Design System/DatePicker Calendar 1`] = `
                         >
                           <div
                             className="emotion-39"
+                            data-testid="8_11_2020"
                           >
                             <div
                               className="emotion-40"
@@ -1039,6 +1050,7 @@ exports[`Storyshots Design System/DatePicker Calendar 1`] = `
                         >
                           <div
                             className="emotion-39"
+                            data-testid="9_11_2020"
                           >
                             <div
                               className="emotion-40"
@@ -1057,6 +1069,7 @@ exports[`Storyshots Design System/DatePicker Calendar 1`] = `
                         >
                           <div
                             className="emotion-39"
+                            data-testid="10_11_2020"
                           >
                             <div
                               className="emotion-40"
@@ -1075,6 +1088,7 @@ exports[`Storyshots Design System/DatePicker Calendar 1`] = `
                         >
                           <div
                             className="emotion-39"
+                            data-testid="11_11_2020"
                           >
                             <div
                               className="emotion-40"
@@ -1093,6 +1107,7 @@ exports[`Storyshots Design System/DatePicker Calendar 1`] = `
                         >
                           <div
                             className="emotion-39"
+                            data-testid="12_11_2020"
                           >
                             <div
                               className="emotion-40"
@@ -1111,6 +1126,7 @@ exports[`Storyshots Design System/DatePicker Calendar 1`] = `
                         >
                           <div
                             className="emotion-39"
+                            data-testid="13_11_2020"
                           >
                             <div
                               className="emotion-40"
@@ -1129,6 +1145,7 @@ exports[`Storyshots Design System/DatePicker Calendar 1`] = `
                         >
                           <div
                             className="emotion-39"
+                            data-testid="14_11_2020"
                           >
                             <div
                               className="emotion-40"
@@ -1147,6 +1164,7 @@ exports[`Storyshots Design System/DatePicker Calendar 1`] = `
                         >
                           <div
                             className="emotion-39"
+                            data-testid="15_11_2020"
                           >
                             <div
                               className="emotion-40"
@@ -1167,6 +1185,7 @@ exports[`Storyshots Design System/DatePicker Calendar 1`] = `
                         >
                           <div
                             className="emotion-39"
+                            data-testid="16_11_2020"
                           >
                             <div
                               className="emotion-40"
@@ -1185,6 +1204,7 @@ exports[`Storyshots Design System/DatePicker Calendar 1`] = `
                         >
                           <div
                             className="emotion-39"
+                            data-testid="17_11_2020"
                           >
                             <div
                               className="emotion-40"
@@ -1203,6 +1223,7 @@ exports[`Storyshots Design System/DatePicker Calendar 1`] = `
                         >
                           <div
                             className="emotion-39"
+                            data-testid="18_11_2020"
                           >
                             <div
                               className="emotion-40"
@@ -1221,6 +1242,7 @@ exports[`Storyshots Design System/DatePicker Calendar 1`] = `
                         >
                           <div
                             className="emotion-39"
+                            data-testid="19_11_2020"
                           >
                             <div
                               className="emotion-40"
@@ -1239,6 +1261,7 @@ exports[`Storyshots Design System/DatePicker Calendar 1`] = `
                         >
                           <div
                             className="emotion-39"
+                            data-testid="20_11_2020"
                           >
                             <div
                               className="emotion-40"
@@ -1257,6 +1280,7 @@ exports[`Storyshots Design System/DatePicker Calendar 1`] = `
                         >
                           <div
                             className="emotion-39"
+                            data-testid="21_11_2020"
                           >
                             <div
                               className="emotion-40"
@@ -1275,6 +1299,7 @@ exports[`Storyshots Design System/DatePicker Calendar 1`] = `
                         >
                           <div
                             className="emotion-39"
+                            data-testid="22_11_2020"
                           >
                             <div
                               className="emotion-40"
@@ -1295,6 +1320,7 @@ exports[`Storyshots Design System/DatePicker Calendar 1`] = `
                         >
                           <div
                             className="emotion-39"
+                            data-testid="23_11_2020"
                           >
                             <div
                               className="emotion-40"
@@ -1313,6 +1339,7 @@ exports[`Storyshots Design System/DatePicker Calendar 1`] = `
                         >
                           <div
                             className="emotion-39"
+                            data-testid="24_11_2020"
                           >
                             <div
                               className="emotion-40"
@@ -1331,6 +1358,7 @@ exports[`Storyshots Design System/DatePicker Calendar 1`] = `
                         >
                           <div
                             className="emotion-39"
+                            data-testid="25_11_2020"
                           >
                             <div
                               className="emotion-40"
@@ -1349,6 +1377,7 @@ exports[`Storyshots Design System/DatePicker Calendar 1`] = `
                         >
                           <div
                             className="emotion-39"
+                            data-testid="26_11_2020"
                           >
                             <div
                               className="emotion-40"
@@ -1367,6 +1396,7 @@ exports[`Storyshots Design System/DatePicker Calendar 1`] = `
                         >
                           <div
                             className="emotion-39"
+                            data-testid="27_11_2020"
                           >
                             <div
                               className="emotion-40"
@@ -1385,6 +1415,7 @@ exports[`Storyshots Design System/DatePicker Calendar 1`] = `
                         >
                           <div
                             className="emotion-39"
+                            data-testid="28_11_2020"
                           >
                             <div
                               className="emotion-40"
@@ -1403,6 +1434,7 @@ exports[`Storyshots Design System/DatePicker Calendar 1`] = `
                         >
                           <div
                             className="emotion-39"
+                            data-testid="29_11_2020"
                           >
                             <div
                               className="emotion-40"
@@ -1423,6 +1455,7 @@ exports[`Storyshots Design System/DatePicker Calendar 1`] = `
                         >
                           <div
                             className="emotion-39"
+                            data-testid="30_11_2020"
                           >
                             <div
                               className="emotion-40"
@@ -1468,7 +1501,9 @@ exports[`Storyshots Design System/DatePicker Calendar 1`] = `
                         <div
                           className="emotion-15"
                         >
-                          <div>
+                          <div
+                            data-testid="right_month"
+                          >
                             December
                              
                             2020
@@ -1477,6 +1512,7 @@ exports[`Storyshots Design System/DatePicker Calendar 1`] = `
                       </div>
                       <div
                         className="emotion-101"
+                        data-testid="month_forward"
                         onClick={[Function]}
                       >
                         <span
@@ -1547,6 +1583,7 @@ exports[`Storyshots Design System/DatePicker Calendar 1`] = `
                         >
                           <div
                             className="emotion-39"
+                            data-testid="1_12_2020"
                           >
                             <div
                               className="emotion-40"
@@ -1565,6 +1602,7 @@ exports[`Storyshots Design System/DatePicker Calendar 1`] = `
                         >
                           <div
                             className="emotion-39"
+                            data-testid="2_12_2020"
                           >
                             <div
                               className="emotion-40"
@@ -1583,6 +1621,7 @@ exports[`Storyshots Design System/DatePicker Calendar 1`] = `
                         >
                           <div
                             className="emotion-39"
+                            data-testid="3_12_2020"
                           >
                             <div
                               className="emotion-40"
@@ -1601,6 +1640,7 @@ exports[`Storyshots Design System/DatePicker Calendar 1`] = `
                         >
                           <div
                             className="emotion-39"
+                            data-testid="4_12_2020"
                           >
                             <div
                               className="emotion-40"
@@ -1619,6 +1659,7 @@ exports[`Storyshots Design System/DatePicker Calendar 1`] = `
                         >
                           <div
                             className="emotion-39"
+                            data-testid="5_12_2020"
                           >
                             <div
                               className="emotion-40"
@@ -1637,6 +1678,7 @@ exports[`Storyshots Design System/DatePicker Calendar 1`] = `
                         >
                           <div
                             className="emotion-39"
+                            data-testid="6_12_2020"
                           >
                             <div
                               className="emotion-40"
@@ -1657,6 +1699,7 @@ exports[`Storyshots Design System/DatePicker Calendar 1`] = `
                         >
                           <div
                             className="emotion-39"
+                            data-testid="7_12_2020"
                           >
                             <div
                               className="emotion-40"
@@ -1675,6 +1718,7 @@ exports[`Storyshots Design System/DatePicker Calendar 1`] = `
                         >
                           <div
                             className="emotion-39"
+                            data-testid="8_12_2020"
                           >
                             <div
                               className="emotion-40"
@@ -1693,6 +1737,7 @@ exports[`Storyshots Design System/DatePicker Calendar 1`] = `
                         >
                           <div
                             className="emotion-39"
+                            data-testid="9_12_2020"
                           >
                             <div
                               className="emotion-40"
@@ -1711,6 +1756,7 @@ exports[`Storyshots Design System/DatePicker Calendar 1`] = `
                         >
                           <div
                             className="emotion-39"
+                            data-testid="10_12_2020"
                           >
                             <div
                               className="emotion-40"
@@ -1729,6 +1775,7 @@ exports[`Storyshots Design System/DatePicker Calendar 1`] = `
                         >
                           <div
                             className="emotion-39"
+                            data-testid="11_12_2020"
                           >
                             <div
                               className="emotion-40"
@@ -1747,6 +1794,7 @@ exports[`Storyshots Design System/DatePicker Calendar 1`] = `
                         >
                           <div
                             className="emotion-39"
+                            data-testid="12_12_2020"
                           >
                             <div
                               className="emotion-40"
@@ -1765,6 +1813,7 @@ exports[`Storyshots Design System/DatePicker Calendar 1`] = `
                         >
                           <div
                             className="emotion-39"
+                            data-testid="13_12_2020"
                           >
                             <div
                               className="emotion-40"
@@ -1785,6 +1834,7 @@ exports[`Storyshots Design System/DatePicker Calendar 1`] = `
                         >
                           <div
                             className="emotion-39"
+                            data-testid="14_12_2020"
                           >
                             <div
                               className="emotion-40"
@@ -1803,6 +1853,7 @@ exports[`Storyshots Design System/DatePicker Calendar 1`] = `
                         >
                           <div
                             className="emotion-39"
+                            data-testid="15_12_2020"
                           >
                             <div
                               className="emotion-40"
@@ -1821,6 +1872,7 @@ exports[`Storyshots Design System/DatePicker Calendar 1`] = `
                         >
                           <div
                             className="emotion-39"
+                            data-testid="16_12_2020"
                           >
                             <div
                               className="emotion-40"
@@ -1839,6 +1891,7 @@ exports[`Storyshots Design System/DatePicker Calendar 1`] = `
                         >
                           <div
                             className="emotion-146"
+                            data-testid="17_12_2020_selected"
                           >
                             <div
                               className="emotion-38"
@@ -1857,6 +1910,7 @@ exports[`Storyshots Design System/DatePicker Calendar 1`] = `
                         >
                           <div
                             className="emotion-31"
+                            data-testid="18_12_2020"
                           >
                             <div
                               className="emotion-32"
@@ -1875,6 +1929,7 @@ exports[`Storyshots Design System/DatePicker Calendar 1`] = `
                         >
                           <div
                             className="emotion-31"
+                            data-testid="19_12_2020"
                           >
                             <div
                               className="emotion-32"
@@ -1893,6 +1948,7 @@ exports[`Storyshots Design System/DatePicker Calendar 1`] = `
                         >
                           <div
                             className="emotion-31"
+                            data-testid="20_12_2020"
                           >
                             <div
                               className="emotion-32"
@@ -1913,6 +1969,7 @@ exports[`Storyshots Design System/DatePicker Calendar 1`] = `
                         >
                           <div
                             className="emotion-31"
+                            data-testid="21_12_2020"
                           >
                             <div
                               className="emotion-32"
@@ -1931,6 +1988,7 @@ exports[`Storyshots Design System/DatePicker Calendar 1`] = `
                         >
                           <div
                             className="emotion-31"
+                            data-testid="22_12_2020"
                           >
                             <div
                               className="emotion-32"
@@ -1949,6 +2007,7 @@ exports[`Storyshots Design System/DatePicker Calendar 1`] = `
                         >
                           <div
                             className="emotion-31"
+                            data-testid="23_12_2020"
                           >
                             <div
                               className="emotion-32"
@@ -1967,6 +2026,7 @@ exports[`Storyshots Design System/DatePicker Calendar 1`] = `
                         >
                           <div
                             className="emotion-31"
+                            data-testid="24_12_2020"
                           >
                             <div
                               className="emotion-32"
@@ -1985,6 +2045,7 @@ exports[`Storyshots Design System/DatePicker Calendar 1`] = `
                         >
                           <div
                             className="emotion-31"
+                            data-testid="25_12_2020"
                           >
                             <div
                               className="emotion-32"
@@ -2003,6 +2064,7 @@ exports[`Storyshots Design System/DatePicker Calendar 1`] = `
                         >
                           <div
                             className="emotion-31"
+                            data-testid="26_12_2020"
                           >
                             <div
                               className="emotion-32"
@@ -2021,6 +2083,7 @@ exports[`Storyshots Design System/DatePicker Calendar 1`] = `
                         >
                           <div
                             className="emotion-31"
+                            data-testid="27_12_2020"
                           >
                             <div
                               className="emotion-32"
@@ -2041,6 +2104,7 @@ exports[`Storyshots Design System/DatePicker Calendar 1`] = `
                         >
                           <div
                             className="emotion-31"
+                            data-testid="28_12_2020"
                           >
                             <div
                               className="emotion-32"
@@ -2059,6 +2123,7 @@ exports[`Storyshots Design System/DatePicker Calendar 1`] = `
                         >
                           <div
                             className="emotion-31"
+                            data-testid="29_12_2020"
                           >
                             <div
                               className="emotion-32"
@@ -2077,6 +2142,7 @@ exports[`Storyshots Design System/DatePicker Calendar 1`] = `
                         >
                           <div
                             className="emotion-31"
+                            data-testid="30_12_2020"
                           >
                             <div
                               className="emotion-32"
@@ -2095,6 +2161,7 @@ exports[`Storyshots Design System/DatePicker Calendar 1`] = `
                         >
                           <div
                             className="emotion-31"
+                            data-testid="31_12_2020"
                           >
                             <div
                               className="emotion-32"
@@ -2174,6 +2241,7 @@ exports[`Storyshots Design System/DatePicker Calendar 1`] = `
                   >
                     <div
                       className="emotion-11"
+                      data-testid="month_back"
                       onClick={[Function]}
                     >
                       <span
@@ -2194,7 +2262,9 @@ exports[`Storyshots Design System/DatePicker Calendar 1`] = `
                         <div
                           className="emotion-15"
                         >
-                          <div>
+                          <div
+                            data-testid="left_month"
+                          >
                             November
                              
                             2020
@@ -2275,6 +2345,7 @@ exports[`Storyshots Design System/DatePicker Calendar 1`] = `
                         >
                           <div
                             className="emotion-31"
+                            data-testid="1_11_2020"
                           >
                             <div
                               className="emotion-32"
@@ -2295,6 +2366,7 @@ exports[`Storyshots Design System/DatePicker Calendar 1`] = `
                         >
                           <div
                             className="emotion-31"
+                            data-testid="2_11_2020"
                           >
                             <div
                               className="emotion-32"
@@ -2313,6 +2385,7 @@ exports[`Storyshots Design System/DatePicker Calendar 1`] = `
                         >
                           <div
                             className="emotion-35"
+                            data-testid="3_11_2020"
                           >
                             <div
                               className="emotion-36"
@@ -2331,6 +2404,7 @@ exports[`Storyshots Design System/DatePicker Calendar 1`] = `
                         >
                           <div
                             className="emotion-37"
+                            data-testid="4_11_2020_selected"
                           >
                             <div
                               className="emotion-38"
@@ -2349,6 +2423,7 @@ exports[`Storyshots Design System/DatePicker Calendar 1`] = `
                         >
                           <div
                             className="emotion-39"
+                            data-testid="5_11_2020"
                           >
                             <div
                               className="emotion-40"
@@ -2367,6 +2442,7 @@ exports[`Storyshots Design System/DatePicker Calendar 1`] = `
                         >
                           <div
                             className="emotion-39"
+                            data-testid="6_11_2020"
                           >
                             <div
                               className="emotion-40"
@@ -2385,6 +2461,7 @@ exports[`Storyshots Design System/DatePicker Calendar 1`] = `
                         >
                           <div
                             className="emotion-39"
+                            data-testid="7_11_2020"
                           >
                             <div
                               className="emotion-40"
@@ -2403,6 +2480,7 @@ exports[`Storyshots Design System/DatePicker Calendar 1`] = `
                         >
                           <div
                             className="emotion-39"
+                            data-testid="8_11_2020"
                           >
                             <div
                               className="emotion-40"
@@ -2423,6 +2501,7 @@ exports[`Storyshots Design System/DatePicker Calendar 1`] = `
                         >
                           <div
                             className="emotion-39"
+                            data-testid="9_11_2020"
                           >
                             <div
                               className="emotion-40"
@@ -2441,6 +2520,7 @@ exports[`Storyshots Design System/DatePicker Calendar 1`] = `
                         >
                           <div
                             className="emotion-39"
+                            data-testid="10_11_2020"
                           >
                             <div
                               className="emotion-40"
@@ -2459,6 +2539,7 @@ exports[`Storyshots Design System/DatePicker Calendar 1`] = `
                         >
                           <div
                             className="emotion-39"
+                            data-testid="11_11_2020"
                           >
                             <div
                               className="emotion-40"
@@ -2477,6 +2558,7 @@ exports[`Storyshots Design System/DatePicker Calendar 1`] = `
                         >
                           <div
                             className="emotion-39"
+                            data-testid="12_11_2020"
                           >
                             <div
                               className="emotion-40"
@@ -2495,6 +2577,7 @@ exports[`Storyshots Design System/DatePicker Calendar 1`] = `
                         >
                           <div
                             className="emotion-39"
+                            data-testid="13_11_2020"
                           >
                             <div
                               className="emotion-40"
@@ -2513,6 +2596,7 @@ exports[`Storyshots Design System/DatePicker Calendar 1`] = `
                         >
                           <div
                             className="emotion-39"
+                            data-testid="14_11_2020"
                           >
                             <div
                               className="emotion-40"
@@ -2531,6 +2615,7 @@ exports[`Storyshots Design System/DatePicker Calendar 1`] = `
                         >
                           <div
                             className="emotion-39"
+                            data-testid="15_11_2020"
                           >
                             <div
                               className="emotion-40"
@@ -2551,6 +2636,7 @@ exports[`Storyshots Design System/DatePicker Calendar 1`] = `
                         >
                           <div
                             className="emotion-39"
+                            data-testid="16_11_2020"
                           >
                             <div
                               className="emotion-40"
@@ -2569,6 +2655,7 @@ exports[`Storyshots Design System/DatePicker Calendar 1`] = `
                         >
                           <div
                             className="emotion-39"
+                            data-testid="17_11_2020"
                           >
                             <div
                               className="emotion-40"
@@ -2587,6 +2674,7 @@ exports[`Storyshots Design System/DatePicker Calendar 1`] = `
                         >
                           <div
                             className="emotion-39"
+                            data-testid="18_11_2020"
                           >
                             <div
                               className="emotion-40"
@@ -2605,6 +2693,7 @@ exports[`Storyshots Design System/DatePicker Calendar 1`] = `
                         >
                           <div
                             className="emotion-39"
+                            data-testid="19_11_2020"
                           >
                             <div
                               className="emotion-40"
@@ -2623,6 +2712,7 @@ exports[`Storyshots Design System/DatePicker Calendar 1`] = `
                         >
                           <div
                             className="emotion-39"
+                            data-testid="20_11_2020"
                           >
                             <div
                               className="emotion-40"
@@ -2641,6 +2731,7 @@ exports[`Storyshots Design System/DatePicker Calendar 1`] = `
                         >
                           <div
                             className="emotion-39"
+                            data-testid="21_11_2020"
                           >
                             <div
                               className="emotion-40"
@@ -2659,6 +2750,7 @@ exports[`Storyshots Design System/DatePicker Calendar 1`] = `
                         >
                           <div
                             className="emotion-39"
+                            data-testid="22_11_2020"
                           >
                             <div
                               className="emotion-40"
@@ -2679,6 +2771,7 @@ exports[`Storyshots Design System/DatePicker Calendar 1`] = `
                         >
                           <div
                             className="emotion-39"
+                            data-testid="23_11_2020"
                           >
                             <div
                               className="emotion-40"
@@ -2697,6 +2790,7 @@ exports[`Storyshots Design System/DatePicker Calendar 1`] = `
                         >
                           <div
                             className="emotion-39"
+                            data-testid="24_11_2020"
                           >
                             <div
                               className="emotion-40"
@@ -2715,6 +2809,7 @@ exports[`Storyshots Design System/DatePicker Calendar 1`] = `
                         >
                           <div
                             className="emotion-39"
+                            data-testid="25_11_2020"
                           >
                             <div
                               className="emotion-40"
@@ -2733,6 +2828,7 @@ exports[`Storyshots Design System/DatePicker Calendar 1`] = `
                         >
                           <div
                             className="emotion-39"
+                            data-testid="26_11_2020"
                           >
                             <div
                               className="emotion-40"
@@ -2751,6 +2847,7 @@ exports[`Storyshots Design System/DatePicker Calendar 1`] = `
                         >
                           <div
                             className="emotion-39"
+                            data-testid="27_11_2020"
                           >
                             <div
                               className="emotion-40"
@@ -2769,6 +2866,7 @@ exports[`Storyshots Design System/DatePicker Calendar 1`] = `
                         >
                           <div
                             className="emotion-39"
+                            data-testid="28_11_2020"
                           >
                             <div
                               className="emotion-40"
@@ -2787,6 +2885,7 @@ exports[`Storyshots Design System/DatePicker Calendar 1`] = `
                         >
                           <div
                             className="emotion-39"
+                            data-testid="29_11_2020"
                           >
                             <div
                               className="emotion-40"
@@ -2807,6 +2906,7 @@ exports[`Storyshots Design System/DatePicker Calendar 1`] = `
                         >
                           <div
                             className="emotion-39"
+                            data-testid="30_11_2020"
                           >
                             <div
                               className="emotion-40"
@@ -2852,7 +2952,9 @@ exports[`Storyshots Design System/DatePicker Calendar 1`] = `
                         <div
                           className="emotion-15"
                         >
-                          <div>
+                          <div
+                            data-testid="right_month"
+                          >
                             December
                              
                             2020
@@ -2861,6 +2963,7 @@ exports[`Storyshots Design System/DatePicker Calendar 1`] = `
                       </div>
                       <div
                         className="emotion-101"
+                        data-testid="month_forward"
                         onClick={[Function]}
                       >
                         <span
@@ -2931,6 +3034,7 @@ exports[`Storyshots Design System/DatePicker Calendar 1`] = `
                         >
                           <div
                             className="emotion-39"
+                            data-testid="1_12_2020"
                           >
                             <div
                               className="emotion-40"
@@ -2949,6 +3053,7 @@ exports[`Storyshots Design System/DatePicker Calendar 1`] = `
                         >
                           <div
                             className="emotion-39"
+                            data-testid="2_12_2020"
                           >
                             <div
                               className="emotion-40"
@@ -2967,6 +3072,7 @@ exports[`Storyshots Design System/DatePicker Calendar 1`] = `
                         >
                           <div
                             className="emotion-39"
+                            data-testid="3_12_2020"
                           >
                             <div
                               className="emotion-40"
@@ -2985,6 +3091,7 @@ exports[`Storyshots Design System/DatePicker Calendar 1`] = `
                         >
                           <div
                             className="emotion-39"
+                            data-testid="4_12_2020"
                           >
                             <div
                               className="emotion-40"
@@ -3003,6 +3110,7 @@ exports[`Storyshots Design System/DatePicker Calendar 1`] = `
                         >
                           <div
                             className="emotion-39"
+                            data-testid="5_12_2020"
                           >
                             <div
                               className="emotion-40"
@@ -3021,6 +3129,7 @@ exports[`Storyshots Design System/DatePicker Calendar 1`] = `
                         >
                           <div
                             className="emotion-39"
+                            data-testid="6_12_2020"
                           >
                             <div
                               className="emotion-40"
@@ -3041,6 +3150,7 @@ exports[`Storyshots Design System/DatePicker Calendar 1`] = `
                         >
                           <div
                             className="emotion-39"
+                            data-testid="7_12_2020"
                           >
                             <div
                               className="emotion-40"
@@ -3059,6 +3169,7 @@ exports[`Storyshots Design System/DatePicker Calendar 1`] = `
                         >
                           <div
                             className="emotion-39"
+                            data-testid="8_12_2020"
                           >
                             <div
                               className="emotion-40"
@@ -3077,6 +3188,7 @@ exports[`Storyshots Design System/DatePicker Calendar 1`] = `
                         >
                           <div
                             className="emotion-39"
+                            data-testid="9_12_2020"
                           >
                             <div
                               className="emotion-40"
@@ -3095,6 +3207,7 @@ exports[`Storyshots Design System/DatePicker Calendar 1`] = `
                         >
                           <div
                             className="emotion-39"
+                            data-testid="10_12_2020"
                           >
                             <div
                               className="emotion-40"
@@ -3113,6 +3226,7 @@ exports[`Storyshots Design System/DatePicker Calendar 1`] = `
                         >
                           <div
                             className="emotion-39"
+                            data-testid="11_12_2020"
                           >
                             <div
                               className="emotion-40"
@@ -3131,6 +3245,7 @@ exports[`Storyshots Design System/DatePicker Calendar 1`] = `
                         >
                           <div
                             className="emotion-39"
+                            data-testid="12_12_2020"
                           >
                             <div
                               className="emotion-40"
@@ -3149,6 +3264,7 @@ exports[`Storyshots Design System/DatePicker Calendar 1`] = `
                         >
                           <div
                             className="emotion-39"
+                            data-testid="13_12_2020"
                           >
                             <div
                               className="emotion-40"
@@ -3169,6 +3285,7 @@ exports[`Storyshots Design System/DatePicker Calendar 1`] = `
                         >
                           <div
                             className="emotion-39"
+                            data-testid="14_12_2020"
                           >
                             <div
                               className="emotion-40"
@@ -3187,6 +3304,7 @@ exports[`Storyshots Design System/DatePicker Calendar 1`] = `
                         >
                           <div
                             className="emotion-39"
+                            data-testid="15_12_2020"
                           >
                             <div
                               className="emotion-40"
@@ -3205,6 +3323,7 @@ exports[`Storyshots Design System/DatePicker Calendar 1`] = `
                         >
                           <div
                             className="emotion-39"
+                            data-testid="16_12_2020"
                           >
                             <div
                               className="emotion-40"
@@ -3223,6 +3342,7 @@ exports[`Storyshots Design System/DatePicker Calendar 1`] = `
                         >
                           <div
                             className="emotion-146"
+                            data-testid="17_12_2020_selected"
                           >
                             <div
                               className="emotion-38"
@@ -3241,6 +3361,7 @@ exports[`Storyshots Design System/DatePicker Calendar 1`] = `
                         >
                           <div
                             className="emotion-31"
+                            data-testid="18_12_2020"
                           >
                             <div
                               className="emotion-32"
@@ -3259,6 +3380,7 @@ exports[`Storyshots Design System/DatePicker Calendar 1`] = `
                         >
                           <div
                             className="emotion-31"
+                            data-testid="19_12_2020"
                           >
                             <div
                               className="emotion-32"
@@ -3277,6 +3399,7 @@ exports[`Storyshots Design System/DatePicker Calendar 1`] = `
                         >
                           <div
                             className="emotion-31"
+                            data-testid="20_12_2020"
                           >
                             <div
                               className="emotion-32"
@@ -3297,6 +3420,7 @@ exports[`Storyshots Design System/DatePicker Calendar 1`] = `
                         >
                           <div
                             className="emotion-31"
+                            data-testid="21_12_2020"
                           >
                             <div
                               className="emotion-32"
@@ -3315,6 +3439,7 @@ exports[`Storyshots Design System/DatePicker Calendar 1`] = `
                         >
                           <div
                             className="emotion-31"
+                            data-testid="22_12_2020"
                           >
                             <div
                               className="emotion-32"
@@ -3333,6 +3458,7 @@ exports[`Storyshots Design System/DatePicker Calendar 1`] = `
                         >
                           <div
                             className="emotion-31"
+                            data-testid="23_12_2020"
                           >
                             <div
                               className="emotion-32"
@@ -3351,6 +3477,7 @@ exports[`Storyshots Design System/DatePicker Calendar 1`] = `
                         >
                           <div
                             className="emotion-31"
+                            data-testid="24_12_2020"
                           >
                             <div
                               className="emotion-32"
@@ -3369,6 +3496,7 @@ exports[`Storyshots Design System/DatePicker Calendar 1`] = `
                         >
                           <div
                             className="emotion-31"
+                            data-testid="25_12_2020"
                           >
                             <div
                               className="emotion-32"
@@ -3387,6 +3515,7 @@ exports[`Storyshots Design System/DatePicker Calendar 1`] = `
                         >
                           <div
                             className="emotion-31"
+                            data-testid="26_12_2020"
                           >
                             <div
                               className="emotion-32"
@@ -3405,6 +3534,7 @@ exports[`Storyshots Design System/DatePicker Calendar 1`] = `
                         >
                           <div
                             className="emotion-31"
+                            data-testid="27_12_2020"
                           >
                             <div
                               className="emotion-32"
@@ -3425,6 +3555,7 @@ exports[`Storyshots Design System/DatePicker Calendar 1`] = `
                         >
                           <div
                             className="emotion-31"
+                            data-testid="28_12_2020"
                           >
                             <div
                               className="emotion-32"
@@ -3443,6 +3574,7 @@ exports[`Storyshots Design System/DatePicker Calendar 1`] = `
                         >
                           <div
                             className="emotion-31"
+                            data-testid="29_12_2020"
                           >
                             <div
                               className="emotion-32"
@@ -3461,6 +3593,7 @@ exports[`Storyshots Design System/DatePicker Calendar 1`] = `
                         >
                           <div
                             className="emotion-31"
+                            data-testid="30_12_2020"
                           >
                             <div
                               className="emotion-32"
@@ -3479,6 +3612,7 @@ exports[`Storyshots Design System/DatePicker Calendar 1`] = `
                         >
                           <div
                             className="emotion-31"
+                            data-testid="31_12_2020"
                           >
                             <div
                               className="emotion-32"
@@ -3558,6 +3692,7 @@ exports[`Storyshots Design System/DatePicker Calendar 1`] = `
                   >
                     <div
                       className="emotion-11"
+                      data-testid="month_back"
                       onClick={[Function]}
                     >
                       <span
@@ -3580,7 +3715,7 @@ exports[`Storyshots Design System/DatePicker Calendar 1`] = `
                         >
                           <button
                             className="emotion-376"
-                            data-testid="button"
+                            data-testid="button-month"
                             disabled={false}
                             onClick={[Function]}
                             type="button"
@@ -3613,6 +3748,7 @@ exports[`Storyshots Design System/DatePicker Calendar 1`] = `
                       </div>
                       <div
                         className="emotion-101"
+                        data-testid="month_forward"
                         onClick={[Function]}
                       >
                         <span
@@ -3698,6 +3834,7 @@ exports[`Storyshots Design System/DatePicker Calendar 1`] = `
                         >
                           <div
                             className="emotion-31"
+                            data-testid="1_11_2020"
                           >
                             <div
                               className="emotion-32"
@@ -3718,6 +3855,7 @@ exports[`Storyshots Design System/DatePicker Calendar 1`] = `
                         >
                           <div
                             className="emotion-31"
+                            data-testid="2_11_2020"
                           >
                             <div
                               className="emotion-32"
@@ -3736,6 +3874,7 @@ exports[`Storyshots Design System/DatePicker Calendar 1`] = `
                         >
                           <div
                             className="emotion-35"
+                            data-testid="3_11_2020"
                           >
                             <div
                               className="emotion-36"
@@ -3754,6 +3893,7 @@ exports[`Storyshots Design System/DatePicker Calendar 1`] = `
                         >
                           <div
                             className="emotion-406"
+                            data-testid="4_11_2020_selected"
                           >
                             <div
                               className="emotion-38"
@@ -3772,6 +3912,7 @@ exports[`Storyshots Design System/DatePicker Calendar 1`] = `
                         >
                           <div
                             className="emotion-31"
+                            data-testid="5_11_2020"
                           >
                             <div
                               className="emotion-32"
@@ -3790,6 +3931,7 @@ exports[`Storyshots Design System/DatePicker Calendar 1`] = `
                         >
                           <div
                             className="emotion-31"
+                            data-testid="6_11_2020"
                           >
                             <div
                               className="emotion-32"
@@ -3808,6 +3950,7 @@ exports[`Storyshots Design System/DatePicker Calendar 1`] = `
                         >
                           <div
                             className="emotion-31"
+                            data-testid="7_11_2020"
                           >
                             <div
                               className="emotion-32"
@@ -3826,6 +3969,7 @@ exports[`Storyshots Design System/DatePicker Calendar 1`] = `
                         >
                           <div
                             className="emotion-31"
+                            data-testid="8_11_2020"
                           >
                             <div
                               className="emotion-32"
@@ -3846,6 +3990,7 @@ exports[`Storyshots Design System/DatePicker Calendar 1`] = `
                         >
                           <div
                             className="emotion-31"
+                            data-testid="9_11_2020"
                           >
                             <div
                               className="emotion-32"
@@ -3864,6 +4009,7 @@ exports[`Storyshots Design System/DatePicker Calendar 1`] = `
                         >
                           <div
                             className="emotion-31"
+                            data-testid="10_11_2020"
                           >
                             <div
                               className="emotion-32"
@@ -3882,6 +4028,7 @@ exports[`Storyshots Design System/DatePicker Calendar 1`] = `
                         >
                           <div
                             className="emotion-31"
+                            data-testid="11_11_2020"
                           >
                             <div
                               className="emotion-32"
@@ -3900,6 +4047,7 @@ exports[`Storyshots Design System/DatePicker Calendar 1`] = `
                         >
                           <div
                             className="emotion-31"
+                            data-testid="12_11_2020"
                           >
                             <div
                               className="emotion-32"
@@ -3918,6 +4066,7 @@ exports[`Storyshots Design System/DatePicker Calendar 1`] = `
                         >
                           <div
                             className="emotion-31"
+                            data-testid="13_11_2020"
                           >
                             <div
                               className="emotion-32"
@@ -3936,6 +4085,7 @@ exports[`Storyshots Design System/DatePicker Calendar 1`] = `
                         >
                           <div
                             className="emotion-31"
+                            data-testid="14_11_2020"
                           >
                             <div
                               className="emotion-32"
@@ -3954,6 +4104,7 @@ exports[`Storyshots Design System/DatePicker Calendar 1`] = `
                         >
                           <div
                             className="emotion-31"
+                            data-testid="15_11_2020"
                           >
                             <div
                               className="emotion-32"
@@ -3974,6 +4125,7 @@ exports[`Storyshots Design System/DatePicker Calendar 1`] = `
                         >
                           <div
                             className="emotion-31"
+                            data-testid="16_11_2020"
                           >
                             <div
                               className="emotion-32"
@@ -3992,6 +4144,7 @@ exports[`Storyshots Design System/DatePicker Calendar 1`] = `
                         >
                           <div
                             className="emotion-31"
+                            data-testid="17_11_2020"
                           >
                             <div
                               className="emotion-32"
@@ -4010,6 +4163,7 @@ exports[`Storyshots Design System/DatePicker Calendar 1`] = `
                         >
                           <div
                             className="emotion-31"
+                            data-testid="18_11_2020"
                           >
                             <div
                               className="emotion-32"
@@ -4028,6 +4182,7 @@ exports[`Storyshots Design System/DatePicker Calendar 1`] = `
                         >
                           <div
                             className="emotion-31"
+                            data-testid="19_11_2020"
                           >
                             <div
                               className="emotion-32"
@@ -4046,6 +4201,7 @@ exports[`Storyshots Design System/DatePicker Calendar 1`] = `
                         >
                           <div
                             className="emotion-31"
+                            data-testid="20_11_2020"
                           >
                             <div
                               className="emotion-32"
@@ -4064,6 +4220,7 @@ exports[`Storyshots Design System/DatePicker Calendar 1`] = `
                         >
                           <div
                             className="emotion-31"
+                            data-testid="21_11_2020"
                           >
                             <div
                               className="emotion-32"
@@ -4082,6 +4239,7 @@ exports[`Storyshots Design System/DatePicker Calendar 1`] = `
                         >
                           <div
                             className="emotion-31"
+                            data-testid="22_11_2020"
                           >
                             <div
                               className="emotion-32"
@@ -4102,6 +4260,7 @@ exports[`Storyshots Design System/DatePicker Calendar 1`] = `
                         >
                           <div
                             className="emotion-31"
+                            data-testid="23_11_2020"
                           >
                             <div
                               className="emotion-32"
@@ -4120,6 +4279,7 @@ exports[`Storyshots Design System/DatePicker Calendar 1`] = `
                         >
                           <div
                             className="emotion-31"
+                            data-testid="24_11_2020"
                           >
                             <div
                               className="emotion-32"
@@ -4138,6 +4298,7 @@ exports[`Storyshots Design System/DatePicker Calendar 1`] = `
                         >
                           <div
                             className="emotion-31"
+                            data-testid="25_11_2020"
                           >
                             <div
                               className="emotion-32"
@@ -4156,6 +4317,7 @@ exports[`Storyshots Design System/DatePicker Calendar 1`] = `
                         >
                           <div
                             className="emotion-31"
+                            data-testid="26_11_2020"
                           >
                             <div
                               className="emotion-32"
@@ -4174,6 +4336,7 @@ exports[`Storyshots Design System/DatePicker Calendar 1`] = `
                         >
                           <div
                             className="emotion-31"
+                            data-testid="27_11_2020"
                           >
                             <div
                               className="emotion-32"
@@ -4192,6 +4355,7 @@ exports[`Storyshots Design System/DatePicker Calendar 1`] = `
                         >
                           <div
                             className="emotion-31"
+                            data-testid="28_11_2020"
                           >
                             <div
                               className="emotion-32"
@@ -4210,6 +4374,7 @@ exports[`Storyshots Design System/DatePicker Calendar 1`] = `
                         >
                           <div
                             className="emotion-31"
+                            data-testid="29_11_2020"
                           >
                             <div
                               className="emotion-32"
@@ -4230,6 +4395,7 @@ exports[`Storyshots Design System/DatePicker Calendar 1`] = `
                         >
                           <div
                             className="emotion-31"
+                            data-testid="30_11_2020"
                           >
                             <div
                               className="emotion-32"