Skip to content

Commit 93c0793

Browse files
matheuspsmatheusps
committed
test: 💍 improvements on the spinner tests
1 parent 72304e4 commit 93c0793

File tree

4 files changed

+129
-77
lines changed

4 files changed

+129
-77
lines changed

‎package.json

-1
Original file line numberDiff line numberDiff line change
@@ -71,7 +71,6 @@
7171
"react-dom": "^16.12.0",
7272
"react-styleguidist": "^9.1.12",
7373
"react-test-renderer": "^16.13.0",
74-
"snapshot-diff": "^0.7.0",
7574
"style-loader": "^0.23.1",
7675
"typescript": "^3.7.5",
7776
"url-loader": "^2.1.0",

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

+109-39
Original file line numberDiff line numberDiff line change
@@ -1,55 +1,125 @@
11
// Jest Snapshot v1, https://goo.gl/fbAQLP
22

3-
exports[`Spinner spec diffs snapshots with different colors 1`] = `
4-
"Snapshot Diff:
5-
- First value
6-
+ Second value
3+
exports[`Spinner spec matches snapshot 1`] = `
4+
<DocumentFragment>
5+
<svg
6+
class="vtex__icon-spinner c-action-primary "
7+
height="40"
8+
preserveAspectRatio="xMidYMid"
9+
viewBox="0 0 100 100"
10+
width="40"
11+
xmlns="http://www.w3.org/2000/svg"
12+
>
13+
<style>
14+
15+
@keyframes vtex-spinner-rotate {
16+
from {
17+
transform-origin: 50% 50%;
18+
transform: rotate(0deg);
19+
}
20+
to {
21+
transform-origin: 50% 50%;
22+
transform: rotate(360deg);
23+
}
24+
}
725
8-
@@ -41,11 +41,11 @@
9-
class=\\"vtex-spinner_circle\\"
10-
cx=\\"50\\"
11-
cy=\\"50\\"
12-
fill=\\"none\\"
13-
r=\\"40\\"
14-
- stroke=\\"#000\\"
15-
+ stroke=\\"#fff\\"
16-
stroke-dasharray=\\"0 0 188.49555921538757 251.32741228718345\\"
17-
stroke-dashoffset=\\"1\\"
18-
stroke-linecap=\\"round\\"
19-
stroke-width=\\"10\\"
20-
/>"
26+
@keyframes vtex-spinner-fill {
27+
0% {
28+
stroke-dasharray: 0 0 2 251.32741228718345;
29+
}
30+
50% {
31+
stroke-dasharray: 0 0 188.49555921538757 251.32741228718345;
32+
}
33+
100% {
34+
stroke-dasharray: 0 249.32741228718345 188.49555921538757 251.32741228718345;
35+
}
36+
}
37+
38+
.vtex-spinner_circle {
39+
animation: vtex-spinner-fill 1.25s infinite cubic-bezier(0.455, 0.030, 0.515, 0.955), vtex-spinner-rotate 0.625s infinite linear;
40+
}
41+
42+
</style>
43+
<circle
44+
class="vtex-spinner_circle"
45+
cx="50"
46+
cy="50"
47+
fill="none"
48+
r="40"
49+
stroke="currentColor"
50+
stroke-dasharray="0 0 188.49555921538757 251.32741228718345"
51+
stroke-dashoffset="1"
52+
stroke-linecap="round"
53+
stroke-width="10"
54+
/>
55+
</svg>
56+
</DocumentFragment>
2157
`;
2258

23-
exports[`Spinner spec diffs snapshots with different sizes 1`] = `
24-
"Snapshot Diff:
25-
- First value
26-
+ Second value
59+
exports[`Spinner spec renders with the correct color 1`] = `
60+
<DocumentFragment>
61+
<svg
62+
class="vtex__icon-spinner "
63+
height="40"
64+
preserveAspectRatio="xMidYMid"
65+
viewBox="0 0 100 100"
66+
width="40"
67+
xmlns="http://www.w3.org/2000/svg"
68+
>
69+
<style>
70+
71+
@keyframes vtex-spinner-rotate {
72+
from {
73+
transform-origin: 50% 50%;
74+
transform: rotate(0deg);
75+
}
76+
to {
77+
transform-origin: 50% 50%;
78+
transform: rotate(360deg);
79+
}
80+
}
2781
28-
@@ -1,12 +1,12 @@
29-
<DocumentFragment>
30-
<svg
31-
class=\\"vtex__icon-spinner c-action-primary \\"
32-
- height=\\"50\\"
33-
+ height=\\"100\\"
34-
preserveAspectRatio=\\"xMidYMid\\"
35-
viewBox=\\"0 0 100 100\\"
36-
- width=\\"50\\"
37-
+ width=\\"100\\"
38-
xmlns=\\"http://www.w3.org/2000/svg\\"
39-
>
40-
<style>
41-
42-
@keyframes vtex-spinner-rotate {"
82+
@keyframes vtex-spinner-fill {
83+
0% {
84+
stroke-dasharray: 0 0 2 251.32741228718345;
85+
}
86+
50% {
87+
stroke-dasharray: 0 0 188.49555921538757 251.32741228718345;
88+
}
89+
100% {
90+
stroke-dasharray: 0 249.32741228718345 188.49555921538757 251.32741228718345;
91+
}
92+
}
93+
94+
.vtex-spinner_circle {
95+
animation: vtex-spinner-fill 1.25s infinite cubic-bezier(0.455, 0.030, 0.515, 0.955), vtex-spinner-rotate 0.625s infinite linear;
96+
}
97+
98+
</style>
99+
<circle
100+
class="vtex-spinner_circle"
101+
cx="50"
102+
cy="50"
103+
fill="none"
104+
r="40"
105+
stroke="#000"
106+
stroke-dasharray="0 0 188.49555921538757 251.32741228718345"
107+
stroke-dashoffset="1"
108+
stroke-linecap="round"
109+
stroke-width="10"
110+
/>
111+
</svg>
112+
</DocumentFragment>
43113
`;
44114

45-
exports[`Spinner spec matches snapshot 1`] = `
115+
exports[`Spinner spec renders with the correct size 1`] = `
46116
<DocumentFragment>
47117
<svg
48118
class="vtex__icon-spinner c-action-primary "
49-
height="40"
119+
height="100"
50120
preserveAspectRatio="xMidYMid"
51121
viewBox="0 0 100 100"
52-
width="40"
122+
width="100"
53123
xmlns="http://www.w3.org/2000/svg"
54124
>
55125
<style>

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

+20-14
Original file line numberDiff line numberDiff line change
@@ -1,28 +1,34 @@
11
import React from 'react'
22
import { render } from '@testing-library/react'
3-
import snapshotDiff from 'snapshot-diff'
43

54
import Spinner from '../index'
65

7-
describe('Spinner spec', () => {
6+
describe('Spinner', () => {
87
it('matches snapshot', () => {
98
const component = render(<Spinner />)
109
expect(component.asFragment()).toMatchSnapshot()
1110
})
12-
it('diffs snapshots with different colors', () => {
13-
const black = render(<Spinner color="#000" />)
14-
const white = render(<Spinner color="#fff" />)
15-
11+
it('renders with the correct color', () => {
12+
const component = render(<Spinner color="#000" />)
13+
expect(component.asFragment()).toMatchSnapshot()
1614
expect(
17-
snapshotDiff(black.asFragment(), white.asFragment())
18-
).toMatchSnapshot()
15+
component.container
16+
.querySelector('.vtex-spinner_circle')
17+
.getAttribute('stroke')
18+
).toBe('#000')
1919
})
20-
it('diffs snapshots with different sizes', () => {
21-
const small = render(<Spinner size={50} />)
22-
const large = render(<Spinner size={100} />)
23-
20+
it('renders with the correct size', () => {
21+
const component = render(<Spinner size={100} />)
22+
expect(component.asFragment()).toMatchSnapshot()
23+
expect(
24+
component.container
25+
.querySelector('.vtex__icon-spinner')
26+
.getAttribute('height')
27+
).toBe('100')
2428
expect(
25-
snapshotDiff(small.asFragment(), large.asFragment())
26-
).toMatchSnapshot()
29+
component.container
30+
.querySelector('.vtex__icon-spinner')
31+
.getAttribute('width')
32+
).toBe('100')
2733
})
2834
})

‎yarn.lock

-23
Original file line numberDiff line numberDiff line change
@@ -5832,11 +5832,6 @@ indent-string@^4.0.0:
58325832
resolved "https://registry.yarnpkg.com/indent-string/-/indent-string-4.0.0.tgz#624f8f4497d619b2d9768531d58f4122854d7251"
58335833
integrity sha512-EdDDZu4A2OyIK7Lr/2zG+w5jmbuk1DVBnEwREQvBzspBJkCEbRa8GxU1lghYcaGJCnRWibjDXlq779X1/y5xwg==
58345834

5835-
indent-string@^4.0.0:
5836-
version "4.0.0"
5837-
resolved "https://registry.yarnpkg.com/indent-string/-/indent-string-4.0.0.tgz#624f8f4497d619b2d9768531d58f4122854d7251"
5838-
integrity sha512-EdDDZu4A2OyIK7Lr/2zG+w5jmbuk1DVBnEwREQvBzspBJkCEbRa8GxU1lghYcaGJCnRWibjDXlq779X1/y5xwg==
5839-
58405835
indexes-of@^1.0.1:
58415836
version "1.0.1"
58425837
resolved "https://registry.yarnpkg.com/indexes-of/-/indexes-of-1.0.1.tgz#f30f716c8e2bd346c7b67d3df3915566a7c05607"
@@ -9751,14 +9746,6 @@ scheduler@^0.19.0:
97519746
loose-envify "^1.1.0"
97529747
object-assign "^4.1.1"
97539748

9754-
scheduler@^0.19.0:
9755-
version "0.19.0"
9756-
resolved "https://registry.yarnpkg.com/scheduler/-/scheduler-0.19.0.tgz#a715d56302de403df742f4a9be11975b32f5698d"
9757-
integrity sha512-xowbVaTPe9r7y7RUejcK73/j8tt2jfiyTednOvHbA8JoClvMYCp+r8QegLwK/n8zWQAtZb1fFnER4XLBZXrCxA==
9758-
dependencies:
9759-
loose-envify "^1.1.0"
9760-
object-assign "^4.1.1"
9761-
97629749
schema-utils@^1.0.0:
97639750
version "1.0.0"
97649751
resolved "https://registry.yarnpkg.com/schema-utils/-/schema-utils-1.0.0.tgz#0b79a93204d7b600d4b2850d1f66c2a34951c770"
@@ -10014,16 +10001,6 @@ snapdragon@^0.8.1:
1001410001
source-map-resolve "^0.5.0"
1001510002
use "^3.1.0"
1001610003

10017-
snapshot-diff@^0.7.0:
10018-
version "0.7.0"
10019-
resolved "https://registry.yarnpkg.com/snapshot-diff/-/snapshot-diff-0.7.0.tgz#a9e93e848a90c9d3e6ffe645dfb89350e041f15e"
10020-
integrity sha512-KzFWZ02eu2BLAloZ4FlaMitUy7kw49Av8CGy50nZrl9mjqMAiibpYWgJppHDQwVcbPqt5HrdegDzF2J8Cmc+yg==
10021-
dependencies:
10022-
jest-diff "^25.1.0"
10023-
jest-snapshot "^25.1.0"
10024-
pretty-format "^25.1.0"
10025-
strip-ansi "^6.0.0"
10026-
1002710004
[email protected]:
1002810005
version "1.4.0"
1002910006
resolved "https://registry.yarnpkg.com/sockjs-client/-/sockjs-client-1.4.0.tgz#c9f2568e19c8fd8173b4997ea3420e0bb306c7d5"

0 commit comments

Comments
 (0)