fix: test coverage

krunalshahcodes · Jun 18, 2019 · 0b6a3db · 0b6a3db
1 parent 78cae4f
commit 0b6a3db
Show file tree

Hide file tree

Showing 8 changed files with 235 additions and 0 deletions.
diff --git a/src/Ball/Ball.test.js b/src/Ball/Ball.test.js
@@ -9,3 +9,8 @@ it('ball renders correctly', () => {
  const tree = renderer.create(<Ball />).toJSON()
  expect(tree).toMatchSnapshot()
 })
+
+it('px converts', () => {
+ const tree = renderer.create(<Ball size={10} sizeUnit="em" />).toJSON()
+ expect(tree).toMatchSnapshot()
+})
diff --git a/src/Ball/__snapshots__/Ball.test.js.snap b/src/Ball/__snapshots__/Ball.test.js.snap
@@ -59,3 +59,63 @@ exports[`ball renders correctly 1`] = `
  </div>
 </div>
 `;
+
+exports[`px converts 1`] = `
+@keyframes animation-0 {
+ 0%, 100% {
+ -webkit-animation-timing-function: cubic-bezier(0.45,0,0.9,0.55);
+ animation-timing-function: cubic-bezier(0.45,0,0.9,0.55);
+ }
+
+ 0% {
+ -webkit-transform: translate(0,0);
+ -ms-transform: translate(0,0);
+ transform: translate(0,0);
+ }
+
+ 50% {
+ -webkit-transform: translate(0,108px);
+ -ms-transform: translate(0,108px);
+ transform: translate(0,108px);
+ -webkit-animation-timing-function: cubic-bezier(0,0.45,0.55,0.9);
+ animation-timing-function: cubic-bezier(0,0.45,0.55,0.9);
+ }
+
+ 100% {
+ -webkit-transform: translate(0,0);
+ -ms-transform: translate(0,0);
+ transform: translate(0,0);
+ }
+}
+
+.emotion-0 {
+ position: absolute;
+ -webkit-animation: animation-0 1s linear infinite;
+ animation: animation-0 1s linear infinite;
+ width: 52px;
+ height: 52px;
+ top: 20px;
+ left: 74px;
+ border-radius: 50%;
+ background: #f08d43;
+}
+
+.emotion-1 {
+ position: relative;
+ width: 10em !important;
+ height: 10em !important;
+ -webkit-transform: translate( -8em,-8em ) scale(0.8) translate( 8em,8em );
+ -ms-transform: translate( -8em,-8em ) scale(0.8) translate( 8em,8em );
+ transform: translate( -8em,-8em ) scale(0.8) translate( 8em,8em );
+}
+
+<div>
+ <div
+ className="emotion-1"
+ >
+ <div
+ className="emotion-0"
+ />
+ </div>
+</div>
+`;
diff --git a/src/DualRing/DualRing.test.js b/src/DualRing/DualRing.test.js
@@ -9,3 +9,8 @@ it('dual ring renders correctly', () => {
  const tree = renderer.create(<DualRing />).toJSON()
  expect(tree).toMatchSnapshot()
 })
+
+it('px converts', () => {
+ const tree = renderer.create(<DualRing size={10} sizeUnit="em" />).toJSON()
+ expect(tree).toMatchSnapshot()
+})
diff --git a/src/DualRing/__snapshots__/DualRing.test.js.snap b/src/DualRing/__snapshots__/DualRing.test.js.snap
@@ -47,3 +47,51 @@ exports[`dual ring renders correctly 1`] = `
  </div>
 </div>
 `;
+
+exports[`px converts 1`] = `
+@keyframes animation-0 {
+ 0% {
+ -webkit-transform: rotate(0deg);
+ -ms-transform: rotate(0deg);
+ transform: rotate(0deg);
+ }
+
+ 100% {
+ -webkit-transform: rotate(360deg);
+ -ms-transform: rotate(360deg);
+ transform: rotate(360deg);
+ }
+}
+
+.emotion-0 {
+ position: absolute;
+ -webkit-animation: animation-0 1s linear infinite;
+ animation: animation-0 1s linear infinite;
+ width: 160px;
+ height: 160px;
+ top: 20px;
+ left: 20px;
+ border-radius: 50%;
+ border: 8px solid #f08d43;
+ border-color: #f08d43 transparent #f08d43 transparent;
+}
+
+.emotion-1 {
+ position: relative;
+ width: 10em !important;
+ height: 10em !important;
+ -webkit-transform: translate( -8em,-8em ) scale(0.8) translate( 8em,8em );
+ -ms-transform: translate( -8em,-8em ) scale(0.8) translate( 8em,8em );
+ transform: translate( -8em,-8em ) scale(0.8) translate( 8em,8em );
+}
+
+<div>
+ <div
+ className="emotion-1"
+ >
+ <div
+ className="emotion-0"
+ />
+ </div>
+</div>
+`;
diff --git a/src/Eclipse/Eclipse.test.js b/src/Eclipse/Eclipse.test.js
@@ -9,3 +9,8 @@ it('eclipse renders correctly', () => {
  const tree = renderer.create(<Eclipse />).toJSON()
  expect(tree).toMatchSnapshot()
 })
+
+it('px converts', () => {
+ const tree = renderer.create(<Eclipse size={10} sizeUnit="em" />).toJSON()
+ expect(tree).toMatchSnapshot()
+})
diff --git a/src/Eclipse/__snapshots__/Eclipse.test.js.snap b/src/Eclipse/__snapshots__/Eclipse.test.js.snap
@@ -55,3 +55,59 @@ exports[`eclipse renders correctly 1`] = `
  </div>
 </div>
 `;
+
+exports[`px converts 1`] = `
+@keyframes animation-0 {
+ 0% {
+ -webkit-transform: rotate(0deg);
+ -ms-transform: rotate(0deg);
+ transform: rotate(0deg);
+ }
+
+ 50% {
+ -webkit-transform: rotate(180deg);
+ -ms-transform: rotate(180deg);
+ transform: rotate(180deg);
+ }
+
+ 100% {
+ -webkit-transform: rotate(360deg);
+ -ms-transform: rotate(360deg);
+ transform: rotate(360deg);
+ }
+}
+
+.emotion-0 {
+ position: absolute;
+ -webkit-animation: animation-0 1s linear infinite;
+ animation: animation-0 1s linear infinite;
+ width: 160px;
+ height: 160px;
+ top: 20px;
+ left: 20px;
+ border-radius: 50%;
+ box-shadow: 0 4px 0 0 #f08d43;
+ -webkit-transform-origin: 80px 82px;
+ -ms-transform-origin: 80px 82px;
+ transform-origin: 80px 82px;
+}
+
+.emotion-1 {
+ position: relative;
+ width: 10em !important;
+ height: 10em !important;
+ -webkit-transform: translate( -8em,-8em ) scale(0.8) translate( 8em,8em );
+ -ms-transform: translate( -8em,-8em ) scale(0.8) translate( 8em,8em );
+ transform: translate( -8em,-8em ) scale(0.8) translate( 8em,8em );
+}
+
+<div>
+ <div
+ className="emotion-1"
+ >
+ <div
+ className="emotion-0"
+ />
+ </div>
+</div>
+`;
diff --git a/src/Rolling/Rolling.test.js b/src/Rolling/Rolling.test.js
@@ -9,3 +9,8 @@ it('rolling renders correctly', () => {
  const tree = renderer.create(<Rolling />).toJSON()
  expect(tree).toMatchSnapshot()
 })
+
+it('px converts', () => {
+ const tree = renderer.create(<Rolling size={10} sizeUnit="em" />).toJSON()
+ expect(tree).toMatchSnapshot()
+})
diff --git a/src/Rolling/__snapshots__/Rolling.test.js.snap b/src/Rolling/__snapshots__/Rolling.test.js.snap
@@ -1,5 +1,56 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`px converts 1`] = `
+@keyframes animation-0 {
+ 0% {
+ -webkit-transform: translate(-50%,-50%) rotate(0deg);
+ -ms-transform: translate(-50%,-50%) rotate(0deg);
+ transform: translate(-50%,-50%) rotate(0deg);
+ }
+
+ 100% {
+ -webkit-transform: translate(-50%,-50%) rotate(360deg);
+ -ms-transform: translate(-50%,-50%) rotate(360deg);
+ transform: translate(-50%,-50%) rotate(360deg);
+ }
+}
+
+.emotion-0 {
+ position: absolute;
+ width: 160px;
+ height: 160px;
+ border: 20px solid #f08d43;
+ border-top-color: transparent;
+ border-radius: 50%;
+ -webkit-animation: animation-0 1s linear infinite;
+ animation: animation-0 1s linear infinite;
+ top: 100px;
+ left: 100px;
+ -webkit-transform: rotate(90deg);
+ -ms-transform: rotate(90deg);
+ transform: rotate(90deg);
+}
+
+.emotion-1 {
+ position: relative;
+ width: 10em !important;
+ height: 10em !important;
+ -webkit-transform: translate( -8em,-8em ) scale(0.8) translate( 8em,8em );
+ -ms-transform: translate( -8em,-8em ) scale(0.8) translate( 8em,8em );
+ transform: translate( -8em,-8em ) scale(0.8) translate( 8em,8em );
+}
+
+<div>
+ <div
+ className="emotion-1"
+ >
+ <div
+ className="emotion-0"
+ />
+ </div>
+</div>
+`;
+
 exports[`rolling renders correctly 1`] = `
 @keyframes animation-0 {
  0% {