fix(update tests): update tests for all components

ZopaPublic · Feb 5, 2021 · 09cc2b1 · 09cc2b1
1 parent b4d8418
commit 09cc2b1
Show file tree

Hide file tree

Showing 30 changed files with 443 additions and 344 deletions.
diff --git a/src/components/atoms/Dropdown/__snapshots__/Dropdown.test.tsx.snap b/src/components/atoms/Dropdown/__snapshots__/Dropdown.test.tsx.snap
@@ -48,7 +48,7 @@ exports[`<Dropdown /> renders the Dropdown with one option 1`] = `
   class="c0"
 >
   <option
-    class=""
+    class="sc-bdfBwQ"
     value="first"
   >
     First value
@@ -104,13 +104,13 @@ exports[`<Dropdown /> renders the Dropdown with options 1`] = `
   class="c0"
 >
   <option
-    class=""
+    class="sc-bdfBwQ"
     value="first"
   >
     First value
   </option>
   <option
-    class=""
+    class="sc-bdfBwQ"
     value="second"
   >
     Second value
@@ -166,13 +166,13 @@ exports[`<Dropdown /> renders the Dropdown with options and a default selected v
   class="c0"
 >
   <option
-    class=""
+    class="sc-bdfBwQ"
     value="otherValue"
   >
     Other Value
   </option>
   <option
-    class=""
+    class="sc-bdfBwQ"
     selected=""
     value="defaultValue"
   >
@@ -229,19 +229,19 @@ exports[`<Dropdown /> renders the Dropdown with options passed through an array.
   class="c0"
 >
   <option
-    class=""
+    class="sc-bdfBwQ"
     value=""
   >
     Select a value
   </option>
   <option
-    class=""
+    class="sc-bdfBwQ"
     value="value1"
   >
     value1
   </option>
   <option
-    class=""
+    class="sc-bdfBwQ"
     value="value2"
   >
     value2

diff --git a/src/components/molecules/CheckboxField/__snapshots__/CheckboxField.test.tsx.snap b/src/components/molecules/CheckboxField/__snapshots__/CheckboxField.test.tsx.snap
@@ -1,11 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`<CheckboxField /> renders the component with no control icon and no a11y violations 1`] = `
-.c0 {
-  max-width: 100%;
-  width: 100%;
-}
-
 .c2 {
   display: block;
   margin: 0 0 10px;
@@ -17,6 +12,14 @@ exports[`<CheckboxField /> renders the component with no control icon and no a11
   font-family: "Open Sans",Roboto,Helvetica,Arial,sans-serif;
   font-weight: 600;
   font-size: 15px;
+}
+
+.c0 {
+  max-width: 100%;
+  width: 100%;
+}
+
+.c3 {
   width: auto;
   display: -webkit-box;
   display: -webkit-flex;
@@ -42,7 +45,7 @@ exports[`<CheckboxField /> renders the component with no control icon and no a11
   margin-bottom: 0;
 }
 
-.c2:before {
+.c3:before {
   content: '';
   -webkit-flex-shrink: 0;
   -ms-flex-negative: 0;
@@ -61,7 +64,7 @@ exports[`<CheckboxField /> renders the component with no control icon and no a11
   display: block;
 }
 
-.c2:after {
+.c3:after {
   content: '';
   background-size: contain;
   background: transparent none no-repeat center;
@@ -72,7 +75,7 @@ exports[`<CheckboxField /> renders the component with no control icon and no a11
   top: 18px;
 }
 
-.c2:hover {
+.c3:hover {
   cursor: pointer;
 }
 
@@ -128,8 +131,8 @@ exports[`<CheckboxField /> renders the component with no control icon and no a11
 .c1:checked + label:after {
   background-size: contain;
   background-image: url(teal-check-mark.svg);
-  -webkit-animation: guYtTV 180ms ease-in-out;
-  animation: guYtTV 180ms ease-in-out;
+  -webkit-animation: icNfUr 180ms ease-in-out;
+  animation: icNfUr 180ms ease-in-out;
 }
 
 .c1 + label:before,
@@ -147,7 +150,7 @@ exports[`<CheckboxField /> renders the component with no control icon and no a11
     type="checkbox"
   />
   <label
-    class="c2"
+    class="c2 c3"
     for="checkbox-id-test1"
   >
     hello
@@ -156,11 +159,6 @@ exports[`<CheckboxField /> renders the component with no control icon and no a11
 `;
 
 exports[`<CheckboxField /> renders the component with props with no a11y violations 1`] = `
-.c0 {
-  max-width: 100%;
-  width: 100%;
-}
-
 .c2 {
   display: block;
   margin: 0 0 10px;
@@ -172,6 +170,14 @@ exports[`<CheckboxField /> renders the component with props with no a11y violati
   font-family: "Open Sans",Roboto,Helvetica,Arial,sans-serif;
   font-weight: 600;
   font-size: 15px;
+}
+
+.c0 {
+  max-width: 100%;
+  width: 100%;
+}
+
+.c3 {
   width: auto;
   display: -webkit-box;
   display: -webkit-flex;
@@ -197,7 +203,7 @@ exports[`<CheckboxField /> renders the component with props with no a11y violati
   margin-bottom: 0;
 }
 
-.c2:before {
+.c3:before {
   content: '';
   -webkit-flex-shrink: 0;
   -ms-flex-negative: 0;
@@ -216,7 +222,7 @@ exports[`<CheckboxField /> renders the component with props with no a11y violati
   display: block;
 }
 
-.c2:after {
+.c3:after {
   content: '';
   background-size: contain;
   background: transparent none no-repeat center;
@@ -227,7 +233,7 @@ exports[`<CheckboxField /> renders the component with props with no a11y violati
   top: 18px;
 }
 
-.c2:hover {
+.c3:hover {
   cursor: pointer;
 }
 
@@ -283,8 +289,8 @@ exports[`<CheckboxField /> renders the component with props with no a11y violati
 .c1:checked + label:after {
   background-size: contain;
   background-image: url(teal-check-mark.svg);
-  -webkit-animation: guYtTV 180ms ease-in-out;
-  animation: guYtTV 180ms ease-in-out;
+  -webkit-animation: icNfUr 180ms ease-in-out;
+  animation: icNfUr 180ms ease-in-out;
 }
 
 <div
@@ -297,7 +303,7 @@ exports[`<CheckboxField /> renders the component with props with no a11y violati
     type="checkbox"
   />
   <label
-    class="c2"
+    class="c2 c3"
     for="checkbox-id-test1"
   >
     hello

diff --git a/src/components/molecules/CheckboxGroupField/__snapshots__/CheckboxGroupField.test.tsx.snap b/src/components/molecules/CheckboxGroupField/__snapshots__/CheckboxGroupField.test.tsx.snap
@@ -35,11 +35,6 @@ exports[`<CheckboxGroupField /> renders the component with no control icon and n
   align-self: auto;
 }
 
-.c5 {
-  max-width: 100%;
-  width: 100%;
-}
-
 .c7 {
   display: block;
   margin: 0 0 10px;
@@ -51,6 +46,14 @@ exports[`<CheckboxGroupField /> renders the component with no control icon and n
   font-family: "Open Sans",Roboto,Helvetica,Arial,sans-serif;
   font-weight: 600;
   font-size: 15px;
+}
+
+.c5 {
+  max-width: 100%;
+  width: 100%;
+}
+
+.c8 {
   width: auto;
   display: -webkit-box;
   display: -webkit-flex;
@@ -76,7 +79,7 @@ exports[`<CheckboxGroupField /> renders the component with no control icon and n
   margin-bottom: 0;
 }
 
-.c7:before {
+.c8:before {
   content: '';
   -webkit-flex-shrink: 0;
   -ms-flex-negative: 0;
@@ -95,7 +98,7 @@ exports[`<CheckboxGroupField /> renders the component with no control icon and n
   display: block;
 }
 
-.c7:after {
+.c8:after {
   content: '';
   background-size: contain;
   background: transparent none no-repeat center;
@@ -106,7 +109,7 @@ exports[`<CheckboxGroupField /> renders the component with no control icon and n
   top: 18px;
 }
 
-.c7:hover {
+.c8:hover {
   cursor: pointer;
 }
 
@@ -162,8 +165,8 @@ exports[`<CheckboxGroupField /> renders the component with no control icon and n
 .c6:checked + label:after {
   background-size: contain;
   background-image: url(teal-check-mark.svg);
-  -webkit-animation: guYtTV 180ms ease-in-out;
-  animation: guYtTV 180ms ease-in-out;
+  -webkit-animation: icNfUr 180ms ease-in-out;
+  animation: icNfUr 180ms ease-in-out;
 }
 
 .c6 + label:before,
@@ -224,7 +227,7 @@ exports[`<CheckboxGroupField /> renders the component with no control icon and n
             type="checkbox"
           />
           <label
-            class="c7"
+            class="c7 c8"
             for="checkbox-id-option"
           >
             option
@@ -271,11 +274,6 @@ exports[`<CheckboxGroupField /> renders the component with props with no a11y vi
   align-self: auto;
 }
 
-.c5 {
-  max-width: 100%;
-  width: 100%;
-}
-
 .c7 {
   display: block;
   margin: 0 0 10px;
@@ -287,6 +285,14 @@ exports[`<CheckboxGroupField /> renders the component with props with no a11y vi
   font-family: "Open Sans",Roboto,Helvetica,Arial,sans-serif;
   font-weight: 600;
   font-size: 15px;
+}
+
+.c5 {
+  max-width: 100%;
+  width: 100%;
+}
+
+.c8 {
   width: auto;
   display: -webkit-box;
   display: -webkit-flex;
@@ -312,7 +318,7 @@ exports[`<CheckboxGroupField /> renders the component with props with no a11y vi
   margin-bottom: 0;
 }
 
-.c7:before {
+.c8:before {
   content: '';
   -webkit-flex-shrink: 0;
   -ms-flex-negative: 0;
@@ -331,7 +337,7 @@ exports[`<CheckboxGroupField /> renders the component with props with no a11y vi
   display: block;
 }
 
-.c7:after {
+.c8:after {
   content: '';
   background-size: contain;
   background: transparent none no-repeat center;
@@ -342,7 +348,7 @@ exports[`<CheckboxGroupField /> renders the component with props with no a11y vi
   top: 18px;
 }
 
-.c7:hover {
+.c8:hover {
   cursor: pointer;
 }
 
@@ -398,8 +404,8 @@ exports[`<CheckboxGroupField /> renders the component with props with no a11y vi
 .c6:checked + label:after {
   background-size: contain;
   background-image: url(teal-check-mark.svg);
-  -webkit-animation: guYtTV 180ms ease-in-out;
-  animation: guYtTV 180ms ease-in-out;
+  -webkit-animation: icNfUr 180ms ease-in-out;
+  animation: icNfUr 180ms ease-in-out;
 }
 
 .c0 {
@@ -456,7 +462,7 @@ exports[`<CheckboxGroupField /> renders the component with props with no a11y vi
             type="checkbox"
           />
           <label
-            class="c7"
+            class="c7 c8"
             for="checkbox-id-option"
           >
             option

diff --git a/src/components/molecules/DropdownField/__snapshots__/DropdownField.test.tsx.snap b/src/components/molecules/DropdownField/__snapshots__/DropdownField.test.tsx.snap
@@ -15,7 +15,7 @@ exports[`<DropdownField /> renders the component with props with no a11y violati
 }
 
 <label
-  class="c0"
+  class="c0 "
   for="text-id-dropdown-field-default"
 >
   Your cool dropdown ❤

diff --git a/src/components/molecules/Help/__snapshots__/Help.test.tsx.snap b/src/components/molecules/Help/__snapshots__/Help.test.tsx.snap
@@ -153,7 +153,7 @@ exports[`<Help /> renders the default Help component with no a11y violations 1`]
   flex-direction: column;
 }
 
-.c8 > .c18 {
+.c8 > .sc-jSgupP {
   -webkit-flex: 0 1  200px;
   -ms-flex: 0 1  200px;
   flex: 0 1  200px;
@@ -167,7 +167,7 @@ exports[`<Help /> renders the default Help component with no a11y violations 1`]
   font-size: 15px;
 }
 
-.c8 > .c19 {
+.c8 > .sc-pFZIQ {
   -webkit-align-self: center;
   -ms-flex-item-align: center;
   align-self: center;