fix: fix snapshots for components using Box component

cratebind · Dec 20, 2020 · 3db2b88 · 3db2b88
1 parent bcf9644
commit 3db2b88
Show file tree

Hide file tree

Showing 25 changed files with 482 additions and 534 deletions.
diff --git a/src/layout.tsx b/src/layout.tsx
@@ -316,7 +316,9 @@ export const shouldForwardProp = createShouldForwardProp([
   'onClose',
 ]);
 
-export const Box = styled.div<MinervaProps>(
+export const Box = styled('div').withConfig({
+  shouldForwardProp,
+})<MinervaProps>(
   {
     boxSizing: 'border-box',
     minWidth: 0,
@@ -369,15 +371,15 @@ export const Box = styled.div<MinervaProps>(
 export const Block = styled(Box)(
   {
     display: 'block',
-  }
-  // systemProps
+  },
+  systemProps
 );
 
-// export const Flex = styled(Box)(
-//   {
-//     display: 'flex',
-//   },
-//   systemProps
-// );
+export const Flex = styled(Box)(
+  {
+    display: 'flex',
+  },
+  systemProps
+);
 
-export const Flex = props => <Box display="flex" {...props} />;
+// export const Flex = props => <Box display="flex" {...props} />;
diff --git a/test/__snapshots__/GlobalStyles.test.tsx.snap b/test/__snapshots__/GlobalStyles.test.tsx.snap
@@ -3,7 +3,7 @@
 exports[`<GlobalStyles /> should render 1`] = `
 <div>
   <button
-    class=""
+    class="sc-citwmv"
   >
     Test
   </button>

diff --git a/test/__snapshots__/accordion.test.tsx.snap b/test/__snapshots__/accordion.test.tsx.snap
@@ -4,32 +4,18 @@ exports[`<Accordion /> should render 1`] = `
 .c0 {
   box-sizing: border-box;
   min-width: 0;
-  color: #374151;
   border-bottom-color: #e5e7eb;
   border-bottom-width: 1px;
 }
 
 .c1 {
   box-sizing: border-box;
   min-width: 0;
-  color: #374151;
-}
-
-.c3 {
-  box-sizing: border-box;
-  min-width: 0;
-  color: #374151;
-  padding-left: 14px;
-  padding-right: 14px;
-  padding-top: 14px;
-  padding-bottom: 14px;
-  width: 95%;
 }
 
 .c2 {
   box-sizing: border-box;
   min-width: 0;
-  color: #374151;
   -webkit-transition: all 150ms ease 0s;
   transition: all 150ms ease 0s;
   outline: none;
@@ -75,29 +61,39 @@ exports[`<Accordion /> should render 1`] = `
   border-top-width: 1px;
 }
 
-.c2:hover {
+.c4 {
+  box-sizing: border-box;
+  min-width: 0;
+  padding-left: 14px;
+  padding-right: 14px;
+  padding-top: 14px;
+  padding-bottom: 14px;
+  width: 95%;
+}
+
+.c3:hover {
   background-color: #f9fafb;
 }
 
-.c2:focus {
+.c3:focus {
   border-color: #a4cafe;
   box-shadow: 0 0 0 3px rgba(118,169,250,.45);
   outline: 0;
 }
 
-.c2:active,
-.c2[data-active=true] {
+.c3:active,
+.c3[data-active=true] {
   border-color: #a4cafe;
   box-shadow: 0 0 0 3px rgba(118,169,250,.45);
   outline: 0;
 }
 
-.c2:disabled,
-.c2:disabled:focus,
-.c2:disabled:hover,
-.c2[aria-disabled=true],
-.c2[aria-disabled=true]:focus,
-.c2[aria-disabled=true]:hover {
+.c3:disabled,
+.c3:disabled:focus,
+.c3:disabled:hover,
+.c3[aria-disabled=true],
+.c3[aria-disabled=true]:focus,
+.c3[aria-disabled=true]:hover {
   opacity: 0.4;
   cursor: not-allowed;
 }
@@ -116,7 +112,7 @@ exports[`<Accordion /> should render 1`] = `
         aria-busy="false"
         aria-controls="panel--1--0"
         aria-expanded="true"
-        class="c2"
+        class="c2 c3"
         data-reach-accordion-button=""
         id="button--1--0"
         role="button"
@@ -125,7 +121,7 @@ exports[`<Accordion /> should render 1`] = `
       </button>
       <div
         aria-labelledby="button--1--0"
-        class="c3"
+        class="c4"
         data-reach-accordion-panel=""
         data-state="open"
         id="panel--1--0"
@@ -144,7 +140,7 @@ exports[`<Accordion /> should render 1`] = `
         aria-busy="false"
         aria-controls="panel--1--1"
         aria-expanded="false"
-        class="c2"
+        class="c2 c3"
         data-reach-accordion-button=""
         id="button--1--1"
         role="button"
@@ -153,7 +149,7 @@ exports[`<Accordion /> should render 1`] = `
       </button>
       <div
         aria-labelledby="button--1--1"
-        class="c3"
+        class="c4"
         data-reach-accordion-panel=""
         data-state="collapsed"
         hidden=""

diff --git a/test/__snapshots__/alert.test.tsx.snap b/test/__snapshots__/alert.test.tsx.snap
@@ -1,29 +1,33 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`<Alert /> should render 1`] = `
-.c1 {
+.c0 {
   box-sizing: border-box;
   min-width: 0;
-  color: #374151;
-  margin: 0;
-  font-size: 16px;
+  background-color: #e5e7eb;
+  line-height: 1;
   font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";
 }
 
-.c0 {
+.c3 {
   box-sizing: border-box;
   min-width: 0;
-  color: #374151;
-  background-color: #e5e7eb;
-  line-height: 1;
+  margin: 0;
+  font-size: 16px;
   font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";
+}
+
+.c1 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
   display: flex;
   background-color: #e5e7eb;
   line-height: 1;
   font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";
+}
+
+.c2 {
   padding: 16px;
   border-radius: 5px;
   -webkit-align-items: center;
@@ -35,7 +39,7 @@ exports[`<Alert /> should render 1`] = `
   font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";
 }
 
-.c2 {
+.c4 {
   font-weight: bold;
   margin-right: 5px;
 }
@@ -44,11 +48,11 @@ exports[`<Alert /> should render 1`] = `
   <div
     aria-label="Test"
     aria-live="polite"
-    class="sc-AxiKw c0"
+    class="c0 c1 c2"
     role="alert"
   >
     <p
-      class="c1 c2"
+      class="c3 c4"
     >
       Test
     </p>