test: 💍 spinner component

Author: matheusps

package.json

@@ -71,6 +71,7 @@
     "react-dom": "^16.12.0",
     "react-styleguidist": "^9.1.12",
     "react-test-renderer": "^16.13.0",
+    "snapshot-diff": "^0.7.0",
     "style-loader": "^0.23.1",
     "typescript": "^3.7.5",
     "url-loader": "^2.1.0",

react/components/Spinner/__tests__/__snapshots__/index.test.js.snap

@@ -0,0 +1,99 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Spinner spec diffs snapshots with different colors 1`] = `
+"Snapshot Diff:
+- First value
++ Second value
+
+@@ -41,11 +41,11 @@
+        class=\\"vtex-spinner_circle\\"
+        cx=\\"50\\"
+        cy=\\"50\\"
+        fill=\\"none\\"
+        r=\\"40\\"
+-       stroke=\\"#000\\"
++       stroke=\\"#fff\\"
+        stroke-dasharray=\\"0 0 188.49555921538757 251.32741228718345\\"
+        stroke-dashoffset=\\"1\\"
+        stroke-linecap=\\"round\\"
+        stroke-width=\\"10\\"
+      />"
+`;
+
+exports[`Spinner spec diffs snapshots with different sizes 1`] = `
+"Snapshot Diff:
+- First value
++ Second value
+
+@@ -1,12 +1,12 @@
+  <DocumentFragment>
+    <svg
+      class=\\"vtex__icon-spinner  c-action-primary \\"
+-     height=\\"50\\"
++     height=\\"100\\"
+      preserveAspectRatio=\\"xMidYMid\\"
+      viewBox=\\"0 0 100 100\\"
+-     width=\\"50\\"
++     width=\\"100\\"
+      xmlns=\\"http://www.w3.org/2000/svg\\"
+    >
+      <style>
+        
+              @keyframes vtex-spinner-rotate {"
+`;
+
+exports[`Spinner spec matches snapshot 1`] = `
+<DocumentFragment>
+  <svg
+    class="vtex__icon-spinner  c-action-primary "
+    height="40"
+    preserveAspectRatio="xMidYMid"
+    viewBox="0 0 100 100"
+    width="40"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <style>
+      
+            @keyframes vtex-spinner-rotate {
+              from {
+                transform-origin: 50% 50%;
+                transform: rotate(0deg);
+              }
+              to {
+                transform-origin: 50% 50%;
+                transform: rotate(360deg);
+              }
+            }
+
+            @keyframes vtex-spinner-fill {
+              0% {
+                stroke-dasharray: 0 0 2 251.32741228718345;
+              }
+              50% {
+                stroke-dasharray: 0 0 188.49555921538757 251.32741228718345;
+              }
+              100% {
+                stroke-dasharray: 0 249.32741228718345 188.49555921538757 251.32741228718345;
+              }
+            }
+
+            .vtex-spinner_circle {
+              animation: vtex-spinner-fill 1.25s infinite cubic-bezier(0.455, 0.030, 0.515, 0.955), vtex-spinner-rotate 0.625s infinite linear;
+            }
+          
+    </style>
+    <circle
+      class="vtex-spinner_circle"
+      cx="50"
+      cy="50"
+      fill="none"
+      r="40"
+      stroke="currentColor"
+      stroke-dasharray="0 0 188.49555921538757 251.32741228718345"
+      stroke-dashoffset="1"
+      stroke-linecap="round"
+      stroke-width="10"
+    />
+  </svg>
+</DocumentFragment>
+`;

react/components/Spinner/__tests__/index.test.js

@@ -0,0 +1,28 @@
+import React from 'react'
+import { render } from '@testing-library/react'
+import snapshotDiff from 'snapshot-diff'
+
+import Spinner from '../index'
+
+describe('Spinner spec', () => {
+  it('matches snapshot', () => {
+    const component = render(<Spinner />)
+    expect(component.asFragment()).toMatchSnapshot()
+  })
+  it('diffs snapshots with different colors', () => {
+    const black = render(<Spinner color="#000" />)
+    const white = render(<Spinner color="#fff" />)
+
+    expect(
+      snapshotDiff(black.asFragment(), white.asFragment())
+    ).toMatchSnapshot()
+  })
+  it('diffs snapshots with different sizes', () => {
+    const small = render(<Spinner size={50} />)
+    const large = render(<Spinner size={100} />)
+
+    expect(
+      snapshotDiff(small.asFragment(), large.asFragment())
+    ).toMatchSnapshot()
+  })
+})

yarn.lock

@@ -10014,6 +10014,16 @@ snapdragon@^0.8.1:
     source-map-resolve "^0.5.0"
     use "^3.1.0"
 
+snapshot-diff@^0.7.0:
+  version "0.7.0"
+  resolved "https://registry.yarnpkg.com/snapshot-diff/-/snapshot-diff-0.7.0.tgz#a9e93e848a90c9d3e6ffe645dfb89350e041f15e"
+  integrity sha512-KzFWZ02eu2BLAloZ4FlaMitUy7kw49Av8CGy50nZrl9mjqMAiibpYWgJppHDQwVcbPqt5HrdegDzF2J8Cmc+yg==
+  dependencies:
+    jest-diff "^25.1.0"
+    jest-snapshot "^25.1.0"
+    pretty-format "^25.1.0"
+    strip-ansi "^6.0.0"
+
 [email protected]:
   version "1.4.0"
   resolved "https://registry.yarnpkg.com/sockjs-client/-/sockjs-client-1.4.0.tgz#c9f2568e19c8fd8173b4997ea3420e0bb306c7d5"