Fix tests (#914)

Fix tests for changes introduced prior to merging component tests to master.
auth0 · Sep 13, 2018 · b979036 · b979036
1 parent 5e52ff7
commit b979036
Show file tree

Hide file tree

Showing 9 changed files with 647 additions and 392 deletions.
diff --git a/core/components/molecules/button-group/button-group.js b/core/components/molecules/button-group/button-group.js
@@ -26,6 +26,8 @@ const groupRadiusStyles = css`
 `
 
 const marginForButton = props => {
+  if (!props.children) return ''
+
   const isSingleChild = props.children.constructor.name !== 'Array'
 
   if (isSingleChild || props.compressed) return null

diff --git a/internal/test/snapshot/__snapshots__/button-group.test.js.snap b/internal/test/snapshot/__snapshots__/button-group.test.js.snap
@@ -16,10 +16,6 @@ exports[`ButtonGroup renders with automation attribute 1`] = `
   left: 40%;
 }
 
-.c0 .sc-gqjmRU {
-  margin-right: 8px;
-}
-
 <div
   className="c0"
   data-cosmos-key="button-group"

diff --git a/internal/test/snapshot/__snapshots__/page-header.test.js.snap b/internal/test/snapshot/__snapshots__/page-header.test.js.snap
@@ -33,6 +33,10 @@ exports[`PageHeader renders with automation attribute 1`] = `
   margin-left: 8px;
 }
 
+.c2 .sc-gqjmRU:first-child {
+  margin-left: 0;
+}
+
 .c4 {
   margin: 1em 0;
   color: #212121;
@@ -46,11 +50,11 @@ exports[`PageHeader renders with automation attribute 1`] = `
   margin-bottom: 0;
 }
 
-.c5:hover .sc-dfVpRl {
+.c5:hover .sc-RefOD {
   border-color: transparent transparent transparent #053b4e;
 }
 
-.c5:hover .sc-gzOgki {
+.c5:hover .sc-iQKALj {
   color: #053b4e;
 }
 

diff --git a/internal/test/snapshot/__snapshots__/pagination-toolbar.test.js.snap b/internal/test/snapshot/__snapshots__/pagination-toolbar.test.js.snap
@@ -10,7 +10,7 @@ exports[`PaginationToolbar renders with automation attribute 1`] = `
   -webkit-justify-content: space-between;
   -ms-flex-pack: justify;
   justify-content: space-between;
-  margin-top: 10px;
+  margin-top: 24px;
 }
 
 .c1 {
@@ -28,7 +28,7 @@ exports[`PaginationToolbar renders with automation attribute 1`] = `
 }
 
 .c1 > * {
-  margin-right: 5px;
+  margin-right: 8px;
 }
 
 .c1 > *:last-child {
@@ -85,10 +85,6 @@ exports[`PaginationToolbar renders with automation attribute 1`] = `
   left: 40%;
 }
 
-.c4 .c6 {
-  margin-right: 0;
-}
-
 .c4 .c6:first-child {
   border-top-right-radius: 0;
   border-bottom-right-radius: 0;
@@ -103,15 +99,15 @@ exports[`PaginationToolbar renders with automation attribute 1`] = `
   border-radius: 0;
 }
 
-.c5 .c9 {
-  margin: 0;
+.c5 .c8 path {
+  fill: #555;
 }
 
 .c7 {
   display: inline-block;
   min-height: 34px;
   line-height: 34px;
-  min-width: auto;
+  min-width: 36px;
   box-sizing: border-box;
   text-transform: uppercase;
   text-align: center;
@@ -127,21 +123,21 @@ exports[`PaginationToolbar renders with automation attribute 1`] = `
   border-color: #F1F1F1;
   border-radius: 3px;
   color: #333;
-  padding: 0 16px;
+  padding: 0 0;
   opacity: 1;
   cursor: pointer;
   -webkit-transition: border-color 0.25s,background 0.25s;
   transition: border-color 0.25s,background 0.25s;
 }
 
-.c7 .c9,
+.c7 .c8,
 .c7 .sc-dnqmqq {
   position: relative;
   top: -1px;
-  margin-right: 8px;
+  margin-right: 0;
 }
 
-.c7 .c9 {
+.c7 .c8 {
   color: #333;
 }
 
@@ -163,24 +159,19 @@ exports[`PaginationToolbar renders with automation attribute 1`] = `
   outline: none;
 }
 
-.c8 {
-  display: inline-block;
-  vertical-align: middle;
-}
-
-.c10 {
+.c9 {
   display: inline-block;
   line-height: 1;
 }
 
-.c11 {
+.c10 {
   display: inline-block;
   vertical-align: middle;
   line-height: 1;
 }
 
-.c11 path {
-  fill: #333;
+.c10 path {
+  fill: #0a84ae;
 }
 
 <div
@@ -215,63 +206,55 @@ exports[`PaginationToolbar renders with automation attribute 1`] = `
       className="c5 c6 c7"
       data-cosmos-key="button"
       disabled={false}
-      icon={null}
+      icon="chevron-left"
       onClick={[Function]}
       size="compressed"
     >
-      <span
-        className="c8"
+      <i
+        className="c8 c9"
+        color="blue"
+        name="chevron-left"
+        size={16}
       >
-        <i
-          className="c9 c10"
-          color="default"
-          name="chevron-left"
-          size={20}
+        <svg
+          className="c10"
+          color="#0a84ae"
+          height={16}
+          viewBox="0 0 20 20"
+          width={16}
         >
-          <svg
-            className="c11"
-            color="#333"
-            height={20}
-            viewBox="0 0 20 20"
-            width={20}
-          >
-            <path
-              d="M6 9.659a.524.524 0 0 0 .152.394c.024.024.06.017.086.035l6.618 6.072a.53.53 0 0 0 .748-.749L7.331 9.657l6.274-5.755a.528.528 0 1 0-.748-.747L6.24 9.223c-.028.02-.065.013-.09.038a.522.522 0 0 0-.15.398z"
-            />
-          </svg>
-        </i>
-      </span>
+          <path
+            d="M6 9.659a.524.524 0 0 0 .152.394c.024.024.06.017.086.035l6.618 6.072a.53.53 0 0 0 .748-.749L7.331 9.657l6.274-5.755a.528.528 0 1 0-.748-.747L6.24 9.223c-.028.02-.065.013-.09.038a.522.522 0 0 0-.15.398z"
+          />
+        </svg>
+      </i>
     </button>
     <button
       className="c5 c6 c7"
       data-cosmos-key="button"
       disabled={false}
-      icon={null}
+      icon="chevron-right"
       onClick={[Function]}
       size="compressed"
     >
-      <span
-        className="c8"
+      <i
+        className="c8 c9"
+        color="blue"
+        name="chevron-right"
+        size={16}
       >
-        <i
-          className="c9 c10"
-          color="default"
-          name="chevron-right"
-          size={20}
+        <svg
+          className="c10"
+          color="#0a84ae"
+          height={16}
+          viewBox="0 0 20 20"
+          width={16}
         >
-          <svg
-            className="c11"
-            color="#333"
-            height={20}
-            viewBox="0 0 20 20"
-            width={20}
-          >
-            <path
-              d="M13.76 9.659a.524.524 0 0 1-.152.394c-.024.024-.06.017-.087.035L6.903 16.16a.53.53 0 0 1-.747-.749l6.273-5.754-6.274-5.755a.528.528 0 1 1 .748-.747l6.616 6.068c.028.02.065.013.09.038.11.109.156.254.15.398z"
-            />
-          </svg>
-        </i>
-      </span>
+          <path
+            d="M13.76 9.659a.524.524 0 0 1-.152.394c-.024.024-.06.017-.087.035L6.903 16.16a.53.53 0 0 1-.747-.749l6.273-5.754-6.274-5.755a.528.528 0 1 1 .748-.747l6.616 6.068c.028.02.065.013.09.038.11.109.156.254.15.398z"
+          />
+        </svg>
+      </i>
     </button>
   </div>
 </div>

diff --git a/internal/test/snapshot/__snapshots__/resource-list.test.js.snap b/internal/test/snapshot/__snapshots__/resource-list.test.js.snap
@@ -124,6 +124,10 @@ exports[`ResourceList renders with automation attribute 1`] = `
   margin-left: 8px;
 }
 
+.c7 .sc-gqjmRU:first-child {
+  margin-left: 0;
+}
+
 <ul
   className="c0"
   data-cosmos-key="resource-list"

diff --git a/internal/test/snapshot/__snapshots__/table.test.js.snap b/internal/test/snapshot/__snapshots__/table.test.js.snap
@@ -20,20 +20,19 @@ exports[`Table renders with automation attribute 1`] = `
   color: inherit;
 }
 
-.c2 {
-  padding-left: 8px;
-  visibility: hidden;
+.c1:hover .sc-gojNiO {
+  visibility: visible;
 }
 
-.c3 {
+.c2 {
   cursor: inherit;
 }
 
-.c3:hover {
+.c2:hover {
   background: #FAFAFA;
 }
 
-.c4 {
+.c3 {
   padding: 8px;
   border-top: 1px solid #D9D9D9;
   text-align: left;
@@ -58,12 +57,6 @@ exports[`Table renders with automation attribute 1`] = `
         onClick={[Function]}
       >
         Name
-        <span
-          className="c2"
-          display={false}
-        >
-          ↑
-        </span>
       </th>
     </tr>
   </thead>
@@ -72,12 +65,12 @@ exports[`Table renders with automation attribute 1`] = `
     data-cosmos-key="table.body"
   >
     <tr
-      className="c3"
+      className="c2"
       data-cosmos-key="table.row"
       onClick={null}
     >
       <td
-        className="c4"
+        className="c3"
       >
         john
       </td>