From 0c002e5ce4962faa2d8b54f09f97b6270e5885f3 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C5=81ukasz=20Mierzwa?= <l.mierzwa@gmail.com>
Date: Sat, 31 Aug 2019 00:09:20 +0100
Subject: [PATCH] fix(tests): update tests for react-datepicker 2.9.3

---
 .../__snapshots__/index.test.js.snap          | 74 ++++++++++++++++++-
 .../SilenceModal/DateTimeSelect/index.test.js | 30 +++-----
 2 files changed, 84 insertions(+), 20 deletions(-)

diff --git a/ui/src/Components/SilenceModal/DateTimeSelect/__snapshots__/index.test.js.snap b/ui/src/Components/SilenceModal/DateTimeSelect/__snapshots__/index.test.js.snap
index 21e2131be..8d85e8145 100644
--- a/ui/src/Components/SilenceModal/DateTimeSelect/__snapshots__/index.test.js.snap
+++ b/ui/src/Components/SilenceModal/DateTimeSelect/__snapshots__/index.test.js.snap
@@ -274,7 +274,7 @@ exports[`<DateTimeSelect /> 'Ends' tab matches snapshot 1`] = `
       <button type=\\"button\\"
               class=\\"react-datepicker__navigation react-datepicker__navigation--next react-datepicker__navigation--next--with-today-button\\"
       >
-        Next month
+        Next Month
       </button>
       <div class=\\"react-datepicker__month-container\\">
         <div class=\\"react-datepicker__header\\">
@@ -315,42 +315,49 @@ exports[`<DateTimeSelect /> 'Ends' tab matches snapshot 1`] = `
             <div class=\\"react-datepicker__day react-datepicker__day--030 react-datepicker__day--weekend react-datepicker__day--outside-month\\"
                  aria-label=\\"day-30\\"
                  role=\\"option\\"
+                 aria-disabled=\\"false\\"
             >
               30
             </div>
             <div class=\\"react-datepicker__day react-datepicker__day--031 react-datepicker__day--outside-month\\"
                  aria-label=\\"day-31\\"
                  role=\\"option\\"
+                 aria-disabled=\\"false\\"
             >
               31
             </div>
             <div class=\\"react-datepicker__day react-datepicker__day--001 react-datepicker__day--selected\\"
                  aria-label=\\"day-1\\"
                  role=\\"option\\"
+                 aria-disabled=\\"false\\"
             >
               1
             </div>
             <div class=\\"react-datepicker__day react-datepicker__day--002\\"
                  aria-label=\\"day-2\\"
                  role=\\"option\\"
+                 aria-disabled=\\"false\\"
             >
               2
             </div>
             <div class=\\"react-datepicker__day react-datepicker__day--003\\"
                  aria-label=\\"day-3\\"
                  role=\\"option\\"
+                 aria-disabled=\\"false\\"
             >
               3
             </div>
             <div class=\\"react-datepicker__day react-datepicker__day--004\\"
                  aria-label=\\"day-4\\"
                  role=\\"option\\"
+                 aria-disabled=\\"false\\"
             >
               4
             </div>
             <div class=\\"react-datepicker__day react-datepicker__day--005 react-datepicker__day--weekend\\"
                  aria-label=\\"day-5\\"
                  role=\\"option\\"
+                 aria-disabled=\\"false\\"
             >
               5
             </div>
@@ -359,42 +366,49 @@ exports[`<DateTimeSelect /> 'Ends' tab matches snapshot 1`] = `
             <div class=\\"react-datepicker__day react-datepicker__day--006 react-datepicker__day--weekend\\"
                  aria-label=\\"day-6\\"
                  role=\\"option\\"
+                 aria-disabled=\\"false\\"
             >
               6
             </div>
             <div class=\\"react-datepicker__day react-datepicker__day--007\\"
                  aria-label=\\"day-7\\"
                  role=\\"option\\"
+                 aria-disabled=\\"false\\"
             >
               7
             </div>
             <div class=\\"react-datepicker__day react-datepicker__day--008\\"
                  aria-label=\\"day-8\\"
                  role=\\"option\\"
+                 aria-disabled=\\"false\\"
             >
               8
             </div>
             <div class=\\"react-datepicker__day react-datepicker__day--009\\"
                  aria-label=\\"day-9\\"
                  role=\\"option\\"
+                 aria-disabled=\\"false\\"
             >
               9
             </div>
             <div class=\\"react-datepicker__day react-datepicker__day--010\\"
                  aria-label=\\"day-10\\"
                  role=\\"option\\"
+                 aria-disabled=\\"false\\"
             >
               10
             </div>
             <div class=\\"react-datepicker__day react-datepicker__day--011\\"
                  aria-label=\\"day-11\\"
                  role=\\"option\\"
+                 aria-disabled=\\"false\\"
             >
               11
             </div>
             <div class=\\"react-datepicker__day react-datepicker__day--012 react-datepicker__day--weekend\\"
                  aria-label=\\"day-12\\"
                  role=\\"option\\"
+                 aria-disabled=\\"false\\"
             >
               12
             </div>
@@ -403,42 +417,49 @@ exports[`<DateTimeSelect /> 'Ends' tab matches snapshot 1`] = `
             <div class=\\"react-datepicker__day react-datepicker__day--013 react-datepicker__day--weekend\\"
                  aria-label=\\"day-13\\"
                  role=\\"option\\"
+                 aria-disabled=\\"false\\"
             >
               13
             </div>
             <div class=\\"react-datepicker__day react-datepicker__day--014\\"
                  aria-label=\\"day-14\\"
                  role=\\"option\\"
+                 aria-disabled=\\"false\\"
             >
               14
             </div>
             <div class=\\"react-datepicker__day react-datepicker__day--015\\"
                  aria-label=\\"day-15\\"
                  role=\\"option\\"
+                 aria-disabled=\\"false\\"
             >
               15
             </div>
             <div class=\\"react-datepicker__day react-datepicker__day--016\\"
                  aria-label=\\"day-16\\"
                  role=\\"option\\"
+                 aria-disabled=\\"false\\"
             >
               16
             </div>
             <div class=\\"react-datepicker__day react-datepicker__day--017\\"
                  aria-label=\\"day-17\\"
                  role=\\"option\\"
+                 aria-disabled=\\"false\\"
             >
               17
             </div>
             <div class=\\"react-datepicker__day react-datepicker__day--018\\"
                  aria-label=\\"day-18\\"
                  role=\\"option\\"
+                 aria-disabled=\\"false\\"
             >
               18
             </div>
             <div class=\\"react-datepicker__day react-datepicker__day--019 react-datepicker__day--weekend\\"
                  aria-label=\\"day-19\\"
                  role=\\"option\\"
+                 aria-disabled=\\"false\\"
             >
               19
             </div>
@@ -447,42 +468,49 @@ exports[`<DateTimeSelect /> 'Ends' tab matches snapshot 1`] = `
             <div class=\\"react-datepicker__day react-datepicker__day--020 react-datepicker__day--weekend\\"
                  aria-label=\\"day-20\\"
                  role=\\"option\\"
+                 aria-disabled=\\"false\\"
             >
               20
             </div>
             <div class=\\"react-datepicker__day react-datepicker__day--021\\"
                  aria-label=\\"day-21\\"
                  role=\\"option\\"
+                 aria-disabled=\\"false\\"
             >
               21
             </div>
             <div class=\\"react-datepicker__day react-datepicker__day--022\\"
                  aria-label=\\"day-22\\"
                  role=\\"option\\"
+                 aria-disabled=\\"false\\"
             >
               22
             </div>
             <div class=\\"react-datepicker__day react-datepicker__day--023\\"
                  aria-label=\\"day-23\\"
                  role=\\"option\\"
+                 aria-disabled=\\"false\\"
             >
               23
             </div>
             <div class=\\"react-datepicker__day react-datepicker__day--024\\"
                  aria-label=\\"day-24\\"
                  role=\\"option\\"
+                 aria-disabled=\\"false\\"
             >
               24
             </div>
             <div class=\\"react-datepicker__day react-datepicker__day--025\\"
                  aria-label=\\"day-25\\"
                  role=\\"option\\"
+                 aria-disabled=\\"false\\"
             >
               25
             </div>
             <div class=\\"react-datepicker__day react-datepicker__day--026 react-datepicker__day--weekend\\"
                  aria-label=\\"day-26\\"
                  role=\\"option\\"
+                 aria-disabled=\\"false\\"
             >
               26
             </div>
@@ -491,42 +519,49 @@ exports[`<DateTimeSelect /> 'Ends' tab matches snapshot 1`] = `
             <div class=\\"react-datepicker__day react-datepicker__day--027 react-datepicker__day--weekend\\"
                  aria-label=\\"day-27\\"
                  role=\\"option\\"
+                 aria-disabled=\\"false\\"
             >
               27
             </div>
             <div class=\\"react-datepicker__day react-datepicker__day--028\\"
                  aria-label=\\"day-28\\"
                  role=\\"option\\"
+                 aria-disabled=\\"false\\"
             >
               28
             </div>
             <div class=\\"react-datepicker__day react-datepicker__day--001 react-datepicker__day--outside-month\\"
                  aria-label=\\"day-1\\"
                  role=\\"option\\"
+                 aria-disabled=\\"false\\"
             >
               1
             </div>
             <div class=\\"react-datepicker__day react-datepicker__day--002 react-datepicker__day--outside-month\\"
                  aria-label=\\"day-2\\"
                  role=\\"option\\"
+                 aria-disabled=\\"false\\"
             >
               2
             </div>
             <div class=\\"react-datepicker__day react-datepicker__day--003 react-datepicker__day--outside-month\\"
                  aria-label=\\"day-3\\"
                  role=\\"option\\"
+                 aria-disabled=\\"false\\"
             >
               3
             </div>
             <div class=\\"react-datepicker__day react-datepicker__day--004 react-datepicker__day--outside-month\\"
                  aria-label=\\"day-4\\"
                  role=\\"option\\"
+                 aria-disabled=\\"false\\"
             >
               4
             </div>
             <div class=\\"react-datepicker__day react-datepicker__day--005 react-datepicker__day--weekend react-datepicker__day--outside-month\\"
                  aria-label=\\"day-5\\"
                  role=\\"option\\"
+                 aria-disabled=\\"false\\"
             >
               5
             </div>
@@ -685,7 +720,7 @@ exports[`<DateTimeSelect /> 'Starts' tab matches snapshot 1`] = `
       <button type=\\"button\\"
               class=\\"react-datepicker__navigation react-datepicker__navigation--next react-datepicker__navigation--next--with-today-button\\"
       >
-        Next month
+        Next Month
       </button>
       <div class=\\"react-datepicker__month-container\\">
         <div class=\\"react-datepicker__header\\">
@@ -726,42 +761,49 @@ exports[`<DateTimeSelect /> 'Starts' tab matches snapshot 1`] = `
             <div class=\\"react-datepicker__day react-datepicker__day--001 react-datepicker__day--selected react-datepicker__day--today react-datepicker__day--weekend\\"
                  aria-label=\\"day-1\\"
                  role=\\"option\\"
+                 aria-disabled=\\"false\\"
             >
               1
             </div>
             <div class=\\"react-datepicker__day react-datepicker__day--002\\"
                  aria-label=\\"day-2\\"
                  role=\\"option\\"
+                 aria-disabled=\\"false\\"
             >
               2
             </div>
             <div class=\\"react-datepicker__day react-datepicker__day--003\\"
                  aria-label=\\"day-3\\"
                  role=\\"option\\"
+                 aria-disabled=\\"false\\"
             >
               3
             </div>
             <div class=\\"react-datepicker__day react-datepicker__day--004\\"
                  aria-label=\\"day-4\\"
                  role=\\"option\\"
+                 aria-disabled=\\"false\\"
             >
               4
             </div>
             <div class=\\"react-datepicker__day react-datepicker__day--005\\"
                  aria-label=\\"day-5\\"
                  role=\\"option\\"
+                 aria-disabled=\\"false\\"
             >
               5
             </div>
             <div class=\\"react-datepicker__day react-datepicker__day--006\\"
                  aria-label=\\"day-6\\"
                  role=\\"option\\"
+                 aria-disabled=\\"false\\"
             >
               6
             </div>
             <div class=\\"react-datepicker__day react-datepicker__day--007 react-datepicker__day--weekend\\"
                  aria-label=\\"day-7\\"
                  role=\\"option\\"
+                 aria-disabled=\\"false\\"
             >
               7
             </div>
@@ -770,42 +812,49 @@ exports[`<DateTimeSelect /> 'Starts' tab matches snapshot 1`] = `
             <div class=\\"react-datepicker__day react-datepicker__day--008 react-datepicker__day--weekend\\"
                  aria-label=\\"day-8\\"
                  role=\\"option\\"
+                 aria-disabled=\\"false\\"
             >
               8
             </div>
             <div class=\\"react-datepicker__day react-datepicker__day--009\\"
                  aria-label=\\"day-9\\"
                  role=\\"option\\"
+                 aria-disabled=\\"false\\"
             >
               9
             </div>
             <div class=\\"react-datepicker__day react-datepicker__day--010\\"
                  aria-label=\\"day-10\\"
                  role=\\"option\\"
+                 aria-disabled=\\"false\\"
             >
               10
             </div>
             <div class=\\"react-datepicker__day react-datepicker__day--011\\"
                  aria-label=\\"day-11\\"
                  role=\\"option\\"
+                 aria-disabled=\\"false\\"
             >
               11
             </div>
             <div class=\\"react-datepicker__day react-datepicker__day--012\\"
                  aria-label=\\"day-12\\"
                  role=\\"option\\"
+                 aria-disabled=\\"false\\"
             >
               12
             </div>
             <div class=\\"react-datepicker__day react-datepicker__day--013\\"
                  aria-label=\\"day-13\\"
                  role=\\"option\\"
+                 aria-disabled=\\"false\\"
             >
               13
             </div>
             <div class=\\"react-datepicker__day react-datepicker__day--014 react-datepicker__day--weekend\\"
                  aria-label=\\"day-14\\"
                  role=\\"option\\"
+                 aria-disabled=\\"false\\"
             >
               14
             </div>
@@ -814,42 +863,49 @@ exports[`<DateTimeSelect /> 'Starts' tab matches snapshot 1`] = `
             <div class=\\"react-datepicker__day react-datepicker__day--015 react-datepicker__day--weekend\\"
                  aria-label=\\"day-15\\"
                  role=\\"option\\"
+                 aria-disabled=\\"false\\"
             >
               15
             </div>
             <div class=\\"react-datepicker__day react-datepicker__day--016\\"
                  aria-label=\\"day-16\\"
                  role=\\"option\\"
+                 aria-disabled=\\"false\\"
             >
               16
             </div>
             <div class=\\"react-datepicker__day react-datepicker__day--017\\"
                  aria-label=\\"day-17\\"
                  role=\\"option\\"
+                 aria-disabled=\\"false\\"
             >
               17
             </div>
             <div class=\\"react-datepicker__day react-datepicker__day--018\\"
                  aria-label=\\"day-18\\"
                  role=\\"option\\"
+                 aria-disabled=\\"false\\"
             >
               18
             </div>
             <div class=\\"react-datepicker__day react-datepicker__day--019\\"
                  aria-label=\\"day-19\\"
                  role=\\"option\\"
+                 aria-disabled=\\"false\\"
             >
               19
             </div>
             <div class=\\"react-datepicker__day react-datepicker__day--020\\"
                  aria-label=\\"day-20\\"
                  role=\\"option\\"
+                 aria-disabled=\\"false\\"
             >
               20
             </div>
             <div class=\\"react-datepicker__day react-datepicker__day--021 react-datepicker__day--weekend\\"
                  aria-label=\\"day-21\\"
                  role=\\"option\\"
+                 aria-disabled=\\"false\\"
             >
               21
             </div>
@@ -858,42 +914,49 @@ exports[`<DateTimeSelect /> 'Starts' tab matches snapshot 1`] = `
             <div class=\\"react-datepicker__day react-datepicker__day--022 react-datepicker__day--weekend\\"
                  aria-label=\\"day-22\\"
                  role=\\"option\\"
+                 aria-disabled=\\"false\\"
             >
               22
             </div>
             <div class=\\"react-datepicker__day react-datepicker__day--023\\"
                  aria-label=\\"day-23\\"
                  role=\\"option\\"
+                 aria-disabled=\\"false\\"
             >
               23
             </div>
             <div class=\\"react-datepicker__day react-datepicker__day--024\\"
                  aria-label=\\"day-24\\"
                  role=\\"option\\"
+                 aria-disabled=\\"false\\"
             >
               24
             </div>
             <div class=\\"react-datepicker__day react-datepicker__day--025\\"
                  aria-label=\\"day-25\\"
                  role=\\"option\\"
+                 aria-disabled=\\"false\\"
             >
               25
             </div>
             <div class=\\"react-datepicker__day react-datepicker__day--026\\"
                  aria-label=\\"day-26\\"
                  role=\\"option\\"
+                 aria-disabled=\\"false\\"
             >
               26
             </div>
             <div class=\\"react-datepicker__day react-datepicker__day--027\\"
                  aria-label=\\"day-27\\"
                  role=\\"option\\"
+                 aria-disabled=\\"false\\"
             >
               27
             </div>
             <div class=\\"react-datepicker__day react-datepicker__day--028 react-datepicker__day--weekend\\"
                  aria-label=\\"day-28\\"
                  role=\\"option\\"
+                 aria-disabled=\\"false\\"
             >
               28
             </div>
@@ -902,42 +965,49 @@ exports[`<DateTimeSelect /> 'Starts' tab matches snapshot 1`] = `
             <div class=\\"react-datepicker__day react-datepicker__day--029 react-datepicker__day--weekend\\"
                  aria-label=\\"day-29\\"
                  role=\\"option\\"
+                 aria-disabled=\\"false\\"
             >
               29
             </div>
             <div class=\\"react-datepicker__day react-datepicker__day--001 react-datepicker__day--outside-month\\"
                  aria-label=\\"day-1\\"
                  role=\\"option\\"
+                 aria-disabled=\\"false\\"
             >
               1
             </div>
             <div class=\\"react-datepicker__day react-datepicker__day--002 react-datepicker__day--outside-month\\"
                  aria-label=\\"day-2\\"
                  role=\\"option\\"
+                 aria-disabled=\\"false\\"
             >
               2
             </div>
             <div class=\\"react-datepicker__day react-datepicker__day--003 react-datepicker__day--outside-month\\"
                  aria-label=\\"day-3\\"
                  role=\\"option\\"
+                 aria-disabled=\\"false\\"
             >
               3
             </div>
             <div class=\\"react-datepicker__day react-datepicker__day--004 react-datepicker__day--outside-month\\"
                  aria-label=\\"day-4\\"
                  role=\\"option\\"
+                 aria-disabled=\\"false\\"
             >
               4
             </div>
             <div class=\\"react-datepicker__day react-datepicker__day--005 react-datepicker__day--outside-month\\"
                  aria-label=\\"day-5\\"
                  role=\\"option\\"
+                 aria-disabled=\\"false\\"
             >
               5
             </div>
             <div class=\\"react-datepicker__day react-datepicker__day--006 react-datepicker__day--weekend react-datepicker__day--outside-month\\"
                  aria-label=\\"day-6\\"
                  role=\\"option\\"
+                 aria-disabled=\\"false\\"
             >
               6
             </div>
diff --git a/ui/src/Components/SilenceModal/DateTimeSelect/index.test.js b/ui/src/Components/SilenceModal/DateTimeSelect/index.test.js
index 7111aa412..3f0b8b5f3 100644
--- a/ui/src/Components/SilenceModal/DateTimeSelect/index.test.js
+++ b/ui/src/Components/SilenceModal/DateTimeSelect/index.test.js
@@ -162,22 +162,19 @@ const ValidateTimeButton = (
   expect(diffMS).toBe(expectedDiff);
 };
 
-const ShallowTabContentStart = () => {
-  return shallow(<TabContentStart silenceFormStore={silenceFormStore} />);
-};
-
 const MountedTabContentStart = () => {
   return mount(<TabContentStart silenceFormStore={silenceFormStore} />);
 };
 
 describe("<TabContentStart />", () => {
   it("selecting date on DatePicker updates startsAt", () => {
-    const tree = ShallowTabContentStart();
-    const picker = tree.find("DatePicker");
-    const startsAt = moment([2063, 10, 10, 0, 1, 2]);
-    picker.simulate("change", startsAt);
+    const tree = MountedTabContentStart();
     expect(silenceFormStore.data.startsAt.toISOString()).toBe(
-      startsAt.toISOString()
+      moment([2060, 1, 1, 0, 0, 0]).toISOString()
+    );
+    tree.find("div.react-datepicker__day--018").simulate("click");
+    expect(silenceFormStore.data.startsAt.toISOString()).toBe(
+      moment([2060, 1, 18, 0, 0, 0]).toISOString()
     );
   });
 
@@ -202,22 +199,19 @@ describe("<TabContentStart />", () => {
   });
 });
 
-const ShallowTabContentEnd = () => {
-  return shallow(<TabContentEnd silenceFormStore={silenceFormStore} />);
-};
-
 const MountedTabContentEnd = () => {
   return mount(<TabContentEnd silenceFormStore={silenceFormStore} />);
 };
 
 describe("<TabContentEnd />", () => {
   it("Selecting date on DatePicker updates endsAt", () => {
-    const tree = ShallowTabContentEnd();
-    const picker = tree.find("DatePicker");
-    const endsAt = moment([2063, 11, 5, 1, 3, 2]);
-    picker.simulate("change", endsAt);
+    const tree = MountedTabContentEnd();
     expect(silenceFormStore.data.endsAt.toISOString()).toBe(
-      endsAt.toISOString()
+      moment([2061, 1, 1, 0, 0, 0]).toISOString()
+    );
+    tree.find("div.react-datepicker__day--024").simulate("click");
+    expect(silenceFormStore.data.endsAt.toISOString()).toBe(
+      moment([2061, 1, 24, 0, 0, 0]).toISOString()
     );
   });