Migrate from Jest Snapshots to Storyshots (#6)

* add storyshot * fix lint * run storyshots for testing components * add test watch mode for storyshots * Add command to update tests * remove old snapshot files * remove old test files * remove jest dependencies * update readme to reflect changes in testing
bufferapp · Dec 16, 2016 · 2d81298 · 2d81298
1 parent fde0f9e
commit 2d81298
Show file tree

Hide file tree

Showing 25 changed files with 368 additions and 705 deletions.
diff --git a/.eslintrc.json b/.eslintrc.json
@@ -10,8 +10,5 @@
     "no-param-reassign": 0,
     "no-underscore-dangle": 0,
     "space-before-function-paren": 0
-  },
-  "env": {
-    "jest": true
   }
 }
diff --git a/.storybook/__storyshots__/Button.shot b/.storybook/__storyshots__/Button.shot
@@ -0,0 +1,48 @@
+exports[`Default`] = `
+<button
+  className="">
+  Button text
+</button>
+`;
+
+exports[`borderless`] = `
+<button
+  className=" ">
+  Button text
+</button>
+`;
+
+exports[`error`] = `
+<button
+  className=" ">
+  An error button
+</button>
+`;
+
+exports[`inApp`] = `
+<button
+  className=" ">
+  Button text
+</button>
+`;
+
+exports[`secondary`] = `
+<button
+  className=" ">
+  Button text
+</button>
+`;
+
+exports[`small`] = `
+<button
+  className=" ">
+  Button text
+</button>
+`;
+
+exports[`tertiary`] = `
+<button
+  className=" ">
+  Button text
+</button>
+`;
diff --git a/.storybook/__storyshots__/Card.shot b/.storybook/__storyshots__/Card.shot
@@ -0,0 +1,34 @@
+exports[`Default`] = `
+<div
+  className="">
+  A Regular Old Card
+</div>
+`;
+
+exports[`doublePadding`] = `
+<div
+  className=" ">
+  A Card With Extra Padding
+</div>
+`;
+
+exports[`empty`] = `
+<div
+  className=" ">
+  An Empty Old Card
+</div>
+`;
+
+exports[`noBorder`] = `
+<div
+  className=" ">
+  A Borderless Old Card
+</div>
+`;
+
+exports[`noPadding`] = `
+<div
+  className=" ">
+  A Card With No Padding
+</div>
+`;
diff --git a/Icon/__snapshots__/test.js.snap → .storybook/__storyshots__/Icon.shot b/Icon/__snapshots__/test.js.snap → .storybook/__storyshots__/Icon.shot
@@ -1,30 +1,30 @@
-exports[`Icon Icon (buffer) 1`] = `
+exports[`Default`] = `
 <svg
   height={50}
   version="1.1"
-  viewBox="0 0 16 16"
+  viewBox="0 0 200 200"
   width={50}
   xmlns="http://www.w3.org/2000/svg">
-  <g
-    fill="none"
-    fillRule="evenodd"
-    stroke="none"
-    strokeWidth="1">
-    <g
-      fill="#323b43">
-      <path
-        d="M14.8975838,11.6596673 L13.3049713,10.9257049 C13.1684163,10.8627595 12.9449081,10.8627595 12.8082985,10.9257049 L8.24833642,13.0271856 C8.11178147,13.090131 7.88821853,13.090131 7.75166358,13.0271856 L3.19170155,10.9257049 C3.0550919,10.8627595 2.83158366,10.8627595 2.6950287,10.9257049 L1.10241622,11.6596673 C0.965861261,11.7226127 0.965861261,11.8255895 1.10241622,11.8885349 L7.75166358,14.9528456 C7.88821853,15.015791 8.11178147,15.015791 8.24833642,14.9528456 L14.8975838,11.8885349 C15.0341387,11.8255895 15.0341387,11.7226127 14.8975838,11.6596673 Z M14.8975838,7.88556618 L13.3049713,7.1516585 C13.1684163,7.08871306 12.9449081,7.08871306 12.8082985,7.1516585 L8.24833642,9.25308448 C8.11178147,9.31602991 7.88821853,9.31602991 7.75166358,9.25308448 L3.19170155,7.1516585 C3.0550919,7.08871306 2.83158366,7.08871306 2.6950287,7.1516585 L1.10241622,7.88556618 C0.965861261,7.94851162 0.965861261,8.05154307 1.10241622,8.1144885 L7.75166358,11.1787445 C7.88821853,11.2416899 8.11178147,11.2416899 8.24833642,11.1787445 L14.8975838,8.1144885 C15.0341387,8.05154307 15.0341387,7.94851162 14.8975838,7.88556618 Z M1.10241622,4.34038738 L7.75166358,7.40469806 C7.88821853,7.46764349 8.11178147,7.46764349 8.24833642,7.40469806 L14.8975838,4.34038738 C15.0341387,4.27744195 15.0341387,4.17446518 14.8975838,4.11151975 L8.24833642,1.04720908 C8.11178147,0.984263641 7.88821853,0.984263641 7.75166358,1.04720908 L1.10241622,4.11151975 C0.965861261,4.17446518 0.965861261,4.27744195 1.10241622,4.34038738 Z" />
-    </g>
+  <g>
+    <rect
+      fill="grey"
+      height="100%"
+      width="100%" />
+    <circle
+      cx="100"
+      cy="100"
+      fill="white"
+      r="80" />
   </g>
 </svg>
 `;
 
-exports[`Icon Icon component 1`] = `
+exports[`Large`] = `
 <svg
-  height={50}
+  height={100}
   version="1.1"
   viewBox="0 0 200 200"
-  width={50}
+  width={100}
   xmlns="http://www.w3.org/2000/svg">
   <g>
     <rect
@@ -39,3 +39,24 @@ exports[`Icon Icon component 1`] = `
   </g>
 </svg>
 `;
+
+exports[`buffer`] = `
+<svg
+  height={50}
+  version="1.1"
+  viewBox="0 0 16 16"
+  width={50}
+  xmlns="http://www.w3.org/2000/svg">
+  <g
+    fill="none"
+    fillRule="evenodd"
+    stroke="none"
+    strokeWidth="1">
+    <g
+      fill="#323b43">
+      <path
+        d="M14.8975838,11.6596673 L13.3049713,10.9257049 C13.1684163,10.8627595 12.9449081,10.8627595 12.8082985,10.9257049 L8.24833642,13.0271856 C8.11178147,13.090131 7.88821853,13.090131 7.75166358,13.0271856 L3.19170155,10.9257049 C3.0550919,10.8627595 2.83158366,10.8627595 2.6950287,10.9257049 L1.10241622,11.6596673 C0.965861261,11.7226127 0.965861261,11.8255895 1.10241622,11.8885349 L7.75166358,14.9528456 C7.88821853,15.015791 8.11178147,15.015791 8.24833642,14.9528456 L14.8975838,11.8885349 C15.0341387,11.8255895 15.0341387,11.7226127 14.8975838,11.6596673 Z M14.8975838,7.88556618 L13.3049713,7.1516585 C13.1684163,7.08871306 12.9449081,7.08871306 12.8082985,7.1516585 L8.24833642,9.25308448 C8.11178147,9.31602991 7.88821853,9.31602991 7.75166358,9.25308448 L3.19170155,7.1516585 C3.0550919,7.08871306 2.83158366,7.08871306 2.6950287,7.1516585 L1.10241622,7.88556618 C0.965861261,7.94851162 0.965861261,8.05154307 1.10241622,8.1144885 L7.75166358,11.1787445 C7.88821853,11.2416899 8.11178147,11.2416899 8.24833642,11.1787445 L14.8975838,8.1144885 C15.0341387,8.05154307 15.0341387,7.94851162 14.8975838,7.88556618 Z M1.10241622,4.34038738 L7.75166358,7.40469806 C7.88821853,7.46764349 8.11178147,7.46764349 8.24833642,7.40469806 L14.8975838,4.34038738 C15.0341387,4.27744195 15.0341387,4.17446518 14.8975838,4.11151975 L8.24833642,1.04720908 C8.11178147,0.984263641 7.88821853,0.984263641 7.75166358,1.04720908 L1.10241622,4.11151975 C0.965861261,4.17446518 0.965861261,4.27744195 1.10241622,4.34038738 Z" />
+    </g>
+  </g>
+</svg>
+`;
diff --git a/.storybook/__storyshots__/Image.shot b/.storybook/__storyshots__/Image.shot
@@ -0,0 +1,23 @@
+exports[`Default`] = `
+<img
+  alt="Image"
+  height={undefined}
+  src="https://buffer.com/images/app/[email protected]"
+  width={undefined} />
+`;
+
+exports[`W=100%`] = `
+<img
+  alt="Image"
+  height={undefined}
+  src="https://buffer.com/images/app/[email protected]"
+  width="100%" />
+`;
+
+exports[`W=200px H=40px`] = `
+<img
+  alt="Image"
+  height="40px"
+  src="https://buffer.com/images/app/[email protected]"
+  width="200px" />
+`;
diff --git a/NavBar/__snapshots__/test.js.snap → .storybook/__storyshots__/NavBar.shot b/NavBar/__snapshots__/test.js.snap → .storybook/__storyshots__/NavBar.shot
@@ -1,4 +1,4 @@
-exports[`NavBar NavBar component 1`] = `
+exports[`Default`] = `
 <div
   style={
     Object {
@@ -11,14 +11,14 @@ exports[`NavBar NavBar component 1`] = `
       "height": 64,
       "marginBottom": 32,
       "padding": "0 16px",
-      "width": "100%"
+      "width": "100%",
     }
   }>
   <div
     style={
       Object {
         "display": "flex",
-        "marginRight": 8
+        "marginRight": 8,
       }
     }>
     <svg
@@ -45,7 +45,7 @@ exports[`NavBar NavBar component 1`] = `
       Object {
         "color": "#323b43",
         "fontSize": 14,
-        "fontWeight": 600
+        "fontWeight": 600,
       }
     }>
     Buffer
@@ -55,15 +55,15 @@ exports[`NavBar NavBar component 1`] = `
       Object {
         "color": "#323b43",
         "fontSize": 14,
-        "fontWeight": 400
+        "fontWeight": 400,
       }
     }>
 
   </span>
 </div>
 `;
 
-exports[`NavBar NavBar w/subtitle 1`] = `
+exports[`Subtitle`] = `
 <div
   style={
     Object {
@@ -76,14 +76,14 @@ exports[`NavBar NavBar w/subtitle 1`] = `
       "height": 64,
       "marginBottom": 32,
       "padding": "0 16px",
-      "width": "100%"
+      "width": "100%",
     }
   }>
   <div
     style={
       Object {
         "display": "flex",
-        "marginRight": 8
+        "marginRight": 8,
       }
     }>
     <svg
@@ -110,7 +110,7 @@ exports[`NavBar NavBar w/subtitle 1`] = `
       Object {
         "color": "#323b43",
         "fontSize": 14,
-        "fontWeight": 600
+        "fontWeight": 600,
       }
     }>
     Buffer
@@ -120,75 +120,10 @@ exports[`NavBar NavBar w/subtitle 1`] = `
       Object {
         "color": "#323b43",
         "fontSize": 14,
-        "fontWeight": 400
+        "fontWeight": 400,
       }
     }>
-     subtitle
-  </span>
-</div>
-`;
-
-exports[`NavBar NavBar w/title 1`] = `
-<div
-  style={
-    Object {
-      "alignItems": "center",
-      "backgroundColor": "#fff",
-      "borderBottom": "1px solid #ced7df",
-      "boxSizing": "border-box",
-      "display": "flex",
-      "flexDirection": "row",
-      "height": 64,
-      "marginBottom": 32,
-      "padding": "0 16px",
-      "width": "100%"
-    }
-  }>
-  <div
-    style={
-      Object {
-        "display": "flex",
-        "marginRight": 8
-      }
-    }>
-    <svg
-      height={15}
-      version="1.1"
-      viewBox="0 0 16 16"
-      width={15}
-      xmlns="http://www.w3.org/2000/svg">
-      <g
-        fill="none"
-        fillRule="evenodd"
-        stroke="none"
-        strokeWidth="1">
-        <g
-          fill="#323b43">
-          <path
-            d="M14.8975838,11.6596673 L13.3049713,10.9257049 C13.1684163,10.8627595 12.9449081,10.8627595 12.8082985,10.9257049 L8.24833642,13.0271856 C8.11178147,13.090131 7.88821853,13.090131 7.75166358,13.0271856 L3.19170155,10.9257049 C3.0550919,10.8627595 2.83158366,10.8627595 2.6950287,10.9257049 L1.10241622,11.6596673 C0.965861261,11.7226127 0.965861261,11.8255895 1.10241622,11.8885349 L7.75166358,14.9528456 C7.88821853,15.015791 8.11178147,15.015791 8.24833642,14.9528456 L14.8975838,11.8885349 C15.0341387,11.8255895 15.0341387,11.7226127 14.8975838,11.6596673 Z M14.8975838,7.88556618 L13.3049713,7.1516585 C13.1684163,7.08871306 12.9449081,7.08871306 12.8082985,7.1516585 L8.24833642,9.25308448 C8.11178147,9.31602991 7.88821853,9.31602991 7.75166358,9.25308448 L3.19170155,7.1516585 C3.0550919,7.08871306 2.83158366,7.08871306 2.6950287,7.1516585 L1.10241622,7.88556618 C0.965861261,7.94851162 0.965861261,8.05154307 1.10241622,8.1144885 L7.75166358,11.1787445 C7.88821853,11.2416899 8.11178147,11.2416899 8.24833642,11.1787445 L14.8975838,8.1144885 C15.0341387,8.05154307 15.0341387,7.94851162 14.8975838,7.88556618 Z M1.10241622,4.34038738 L7.75166358,7.40469806 C7.88821853,7.46764349 8.11178147,7.46764349 8.24833642,7.40469806 L14.8975838,4.34038738 C15.0341387,4.27744195 15.0341387,4.17446518 14.8975838,4.11151975 L8.24833642,1.04720908 C8.11178147,0.984263641 7.88821853,0.984263641 7.75166358,1.04720908 L1.10241622,4.11151975 C0.965861261,4.17446518 0.965861261,4.27744195 1.10241622,4.34038738 Z" />
-        </g>
-      </g>
-    </svg>
-  </div>
-  <span
-    style={
-      Object {
-        "color": "#323b43",
-        "fontSize": 14,
-        "fontWeight": 600
-      }
-    }>
-    Title
-  </span>
-  <span
-    style={
-      Object {
-        "color": "#323b43",
-        "fontSize": 14,
-        "fontWeight": 400
-      }
-    }>
-    
+     NavBar
   </span>
 </div>
 `;