Skip to content

Commit 0768408

Browse files
author
Ives van Hoorne
committed
Use styled components jest for snapshot testing
1 parent a7ea03f commit 0768408

File tree

10 files changed

+559
-37
lines changed

10 files changed

+559
-37
lines changed

‎package.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -49,6 +49,7 @@
4949
"http-proxy-middleware": "^0.17.3",
5050
"husky": "^0.14.3",
5151
"jest": "^20.0.0",
52+
"jest-styled-components": "^4.3.0",
5253
"json-loader": "0.5.4",
5354
"lint-staged": "^4.0.1",
5455
"object-assign": "^4.1.1",

‎src/app/components/buttons/__snapshots__/Button.test.js.snap‎

Lines changed: 305 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,51 +1,350 @@
11
// Jest Snapshot v1, https://goo.gl/fbAQLP
22

33
exports[`Button renders 1`] = `
4+
.c0 {
5+
-webkit-transition: 0.3s ease all;
6+
transition: 0.3s ease all;
7+
-webkit-animation-name: cUPaoU;
8+
animation-name: cUPaoU;
9+
-webkit-animation-duration: 300ms;
10+
animation-duration: 300ms;
11+
-webkit-animation-timing-function: ease;
12+
animation-timing-function: ease;
13+
border: none;
14+
outline: none;
15+
background-image: linear-gradient(270deg, #fed29d, #A58B66, #7abae8, #56a0d6);
16+
background-size: 720%;
17+
border-radius: 4px;
18+
box-sizing: border-box;
19+
font-size: 1.125rem;
20+
text-align: center;
21+
color: white;
22+
font-weight: 400;
23+
box-shadow: 0 3px 3px rgba(0, 0, 0, 0.5);
24+
width: inherit;
25+
padding: 0.65rem 2.25rem;
26+
-webkit-user-select: none;
27+
-moz-user-select: none;
28+
-ms-user-select: none;
29+
user-select: none;
30+
text-decoration: none;
31+
cursor: pointer;
32+
}
33+
34+
.c0:hover {
35+
-webkit-animation-name: eEnBCQ;
36+
animation-name: eEnBCQ;
37+
-webkit-animation-duration: 300ms;
38+
animation-duration: 300ms;
39+
-webkit-animation-timing-function: ease;
40+
animation-timing-function: ease;
41+
-webkit-animation-direction: normal;
42+
animation-direction: normal;
43+
-webkit-animation-fill-mode: forwards;
44+
animation-fill-mode: forwards;
45+
box-shadow: 0 7px 10px rgba(0, 0, 0, 0.5);
46+
-webkit-transform: translateY(-1px);
47+
-ms-transform: translateY(-1px);
48+
transform: translateY(-1px);
49+
}
50+
51+
.c0:active {
52+
-webkit-transform: translateY(1px);
53+
-ms-transform: translateY(1px);
54+
transform: translateY(1px);
55+
box-shadow: 0 0 0 rgba(0, 0, 0, 0.5);
56+
}
57+
458
<button
5-
className="sc-htpNat hCsYOm"
59+
className="c0"
660
>
761
Test
862
</button>
963
`;
1064

1165
exports[`Button renders disabled 1`] = `
66+
.c0 {
67+
-webkit-transition: 0.3s ease all;
68+
transition: 0.3s ease all;
69+
-webkit-animation-name: cUPaoU;
70+
animation-name: cUPaoU;
71+
-webkit-animation-duration: 300ms;
72+
animation-duration: 300ms;
73+
-webkit-animation-timing-function: ease;
74+
animation-timing-function: ease;
75+
border: none;
76+
outline: none;
77+
background: rgb(25, 29, 31);
78+
background-size: 720%;
79+
border-radius: 4px;
80+
box-sizing: border-box;
81+
font-size: 1.125rem;
82+
text-align: center;
83+
color: rgb(69, 79, 84);
84+
font-weight: 400;
85+
width: inherit;
86+
padding: 0.65rem 2.25rem;
87+
-webkit-user-select: none;
88+
-moz-user-select: none;
89+
-ms-user-select: none;
90+
user-select: none;
91+
text-decoration: none;
92+
}
93+
1294
<button
13-
className="sc-htpNat hsOzQt"
95+
className="c0"
1496
disabled={true}
1597
>
1698
Test
1799
</button>
18100
`;
19101

20102
exports[`Button renders href 1`] = `
103+
.c0 {
104+
-webkit-transition: 0.3s ease all;
105+
transition: 0.3s ease all;
106+
-webkit-animation-name: cUPaoU;
107+
animation-name: cUPaoU;
108+
-webkit-animation-duration: 300ms;
109+
animation-duration: 300ms;
110+
-webkit-animation-timing-function: ease;
111+
animation-timing-function: ease;
112+
border: none;
113+
outline: none;
114+
background-image: linear-gradient(270deg, #fed29d, #A58B66, #7abae8, #56a0d6);
115+
background-size: 720%;
116+
border-radius: 4px;
117+
box-sizing: border-box;
118+
font-size: 1.125rem;
119+
text-align: center;
120+
color: white;
121+
font-weight: 400;
122+
box-shadow: 0 3px 3px rgba(0, 0, 0, 0.5);
123+
width: inherit;
124+
padding: 0.65rem 2.25rem;
125+
-webkit-user-select: none;
126+
-moz-user-select: none;
127+
-ms-user-select: none;
128+
user-select: none;
129+
text-decoration: none;
130+
cursor: pointer;
131+
}
132+
133+
.c0:hover {
134+
-webkit-animation-name: eEnBCQ;
135+
animation-name: eEnBCQ;
136+
-webkit-animation-duration: 300ms;
137+
animation-duration: 300ms;
138+
-webkit-animation-timing-function: ease;
139+
animation-timing-function: ease;
140+
-webkit-animation-direction: normal;
141+
animation-direction: normal;
142+
-webkit-animation-fill-mode: forwards;
143+
animation-fill-mode: forwards;
144+
box-shadow: 0 7px 10px rgba(0, 0, 0, 0.5);
145+
-webkit-transform: translateY(-1px);
146+
-ms-transform: translateY(-1px);
147+
transform: translateY(-1px);
148+
}
149+
150+
.c0:active {
151+
-webkit-transform: translateY(1px);
152+
-ms-transform: translateY(1px);
153+
transform: translateY(1px);
154+
box-shadow: 0 0 0 rgba(0, 0, 0, 0.5);
155+
}
156+
21157
<a
22-
className="sc-bwzfXH djbEWS"
158+
className="c0"
23159
href="https://ivesvh.com"
24160
>
25161
Test
26162
</a>
27163
`;
28164

29165
exports[`Button renders onClick 1`] = `
166+
.c0 {
167+
-webkit-transition: 0.3s ease all;
168+
transition: 0.3s ease all;
169+
-webkit-animation-name: cUPaoU;
170+
animation-name: cUPaoU;
171+
-webkit-animation-duration: 300ms;
172+
animation-duration: 300ms;
173+
-webkit-animation-timing-function: ease;
174+
animation-timing-function: ease;
175+
border: none;
176+
outline: none;
177+
background-image: linear-gradient(270deg, #fed29d, #A58B66, #7abae8, #56a0d6);
178+
background-size: 720%;
179+
border-radius: 4px;
180+
box-sizing: border-box;
181+
font-size: 1.125rem;
182+
text-align: center;
183+
color: white;
184+
font-weight: 400;
185+
box-shadow: 0 3px 3px rgba(0, 0, 0, 0.5);
186+
width: inherit;
187+
padding: 0.65rem 2.25rem;
188+
-webkit-user-select: none;
189+
-moz-user-select: none;
190+
-ms-user-select: none;
191+
user-select: none;
192+
text-decoration: none;
193+
cursor: pointer;
194+
}
195+
196+
.c0:hover {
197+
-webkit-animation-name: eEnBCQ;
198+
animation-name: eEnBCQ;
199+
-webkit-animation-duration: 300ms;
200+
animation-duration: 300ms;
201+
-webkit-animation-timing-function: ease;
202+
animation-timing-function: ease;
203+
-webkit-animation-direction: normal;
204+
animation-direction: normal;
205+
-webkit-animation-fill-mode: forwards;
206+
animation-fill-mode: forwards;
207+
box-shadow: 0 7px 10px rgba(0, 0, 0, 0.5);
208+
-webkit-transform: translateY(-1px);
209+
-ms-transform: translateY(-1px);
210+
transform: translateY(-1px);
211+
}
212+
213+
.c0:active {
214+
-webkit-transform: translateY(1px);
215+
-ms-transform: translateY(1px);
216+
transform: translateY(1px);
217+
box-shadow: 0 0 0 rgba(0, 0, 0, 0.5);
218+
}
219+
30220
<button
31-
className="sc-htpNat hCsYOm"
221+
className="c0"
32222
onClick={[Function]}
33223
>
34224
Test
35225
</button>
36226
`;
37227

38228
exports[`Button renders properties 1`] = `
229+
.c0 {
230+
-webkit-transition: 0.3s ease all;
231+
transition: 0.3s ease all;
232+
-webkit-animation-name: cUPaoU;
233+
animation-name: cUPaoU;
234+
-webkit-animation-duration: 300ms;
235+
animation-duration: 300ms;
236+
-webkit-animation-timing-function: ease;
237+
animation-timing-function: ease;
238+
border: none;
239+
outline: none;
240+
background-image: linear-gradient(270deg, #fed29d, #A58B66, #7abae8, #56a0d6);
241+
background-size: 720%;
242+
border-radius: 4px;
243+
box-sizing: border-box;
244+
font-size: 1.125rem;
245+
text-align: center;
246+
color: white;
247+
font-weight: 400;
248+
box-shadow: 0 3px 3px rgba(0, 0, 0, 0.5);
249+
width: inherit;
250+
padding: 0.5rem 0.75rem;
251+
font-size: 0.875rem;
252+
-webkit-user-select: none;
253+
-moz-user-select: none;
254+
-ms-user-select: none;
255+
user-select: none;
256+
text-decoration: none;
257+
cursor: pointer;
258+
}
259+
260+
.c0:hover {
261+
-webkit-animation-name: eEnBCQ;
262+
animation-name: eEnBCQ;
263+
-webkit-animation-duration: 300ms;
264+
animation-duration: 300ms;
265+
-webkit-animation-timing-function: ease;
266+
animation-timing-function: ease;
267+
-webkit-animation-direction: normal;
268+
animation-direction: normal;
269+
-webkit-animation-fill-mode: forwards;
270+
animation-fill-mode: forwards;
271+
box-shadow: 0 7px 10px rgba(0, 0, 0, 0.5);
272+
-webkit-transform: translateY(-1px);
273+
-ms-transform: translateY(-1px);
274+
transform: translateY(-1px);
275+
}
276+
277+
.c0:active {
278+
-webkit-transform: translateY(1px);
279+
-ms-transform: translateY(1px);
280+
transform: translateY(1px);
281+
box-shadow: 0 0 0 rgba(0, 0, 0, 0.5);
282+
}
283+
39284
<button
40-
className="sc-htpNat cGrUyB"
285+
className="c0"
41286
>
42287
Test
43288
</button>
44289
`;
45290

46291
exports[`Button renders to 1`] = `
292+
.c0 {
293+
-webkit-transition: 0.3s ease all;
294+
transition: 0.3s ease all;
295+
-webkit-animation-name: cUPaoU;
296+
animation-name: cUPaoU;
297+
-webkit-animation-duration: 300ms;
298+
animation-duration: 300ms;
299+
-webkit-animation-timing-function: ease;
300+
animation-timing-function: ease;
301+
border: none;
302+
outline: none;
303+
background-image: linear-gradient(270deg, #fed29d, #A58B66, #7abae8, #56a0d6);
304+
background-size: 720%;
305+
border-radius: 4px;
306+
box-sizing: border-box;
307+
font-size: 1.125rem;
308+
text-align: center;
309+
color: white;
310+
font-weight: 400;
311+
box-shadow: 0 3px 3px rgba(0, 0, 0, 0.5);
312+
width: inherit;
313+
padding: 0.65rem 2.25rem;
314+
-webkit-user-select: none;
315+
-moz-user-select: none;
316+
-ms-user-select: none;
317+
user-select: none;
318+
text-decoration: none;
319+
cursor: pointer;
320+
}
321+
322+
.c0:hover {
323+
-webkit-animation-name: eEnBCQ;
324+
animation-name: eEnBCQ;
325+
-webkit-animation-duration: 300ms;
326+
animation-duration: 300ms;
327+
-webkit-animation-timing-function: ease;
328+
animation-timing-function: ease;
329+
-webkit-animation-direction: normal;
330+
animation-direction: normal;
331+
-webkit-animation-fill-mode: forwards;
332+
animation-fill-mode: forwards;
333+
box-shadow: 0 7px 10px rgba(0, 0, 0, 0.5);
334+
-webkit-transform: translateY(-1px);
335+
-ms-transform: translateY(-1px);
336+
transform: translateY(-1px);
337+
}
338+
339+
.c0:active {
340+
-webkit-transform: translateY(1px);
341+
-ms-transform: translateY(1px);
342+
transform: translateY(1px);
343+
box-shadow: 0 0 0 rgba(0, 0, 0, 0.5);
344+
}
345+
47346
<a
48-
className="sc-bdVaJa dRYfIP"
347+
className="c0"
49348
href="https://ivesvh.com"
50349
onClick={[Function]}
51350
>

0 commit comments

Comments
 (0)