Skip to content

Commit d72fcfb

Browse files
oyvinmaroyvinmar
committed
test: use jest emotion for better snapshotting
1 parent 10b2ce4 commit d72fcfb

File tree

6 files changed

+510
-19
lines changed

6 files changed

+510
-19
lines changed

‎.prettierignore

+2-1
Original file line numberDiff line numberDiff line change
@@ -1,2 +1,3 @@
11
package.json
2-
e2e/fixtures/*
2+
e2e/fixtures/*
3+
node_modules

‎jest.config.js

+1
Original file line numberDiff line numberDiff line change
@@ -4,4 +4,5 @@ module.exports = {
44
setupTestFrameworkScriptFile: './src/__tests__/jest.setup.js',
55
testURL: 'http://localhost/', // Needed until fixed: https://github.com/jsdom/jsdom/issues/2304
66
testEnvironment: 'node',
7+
snapshotSerializers: ['jest-emotion/serializer'],
78
};

‎package.json

+2-1
Original file line numberDiff line numberDiff line change
@@ -39,6 +39,7 @@
3939
"eslint-config-ndla": "^1.0.0",
4040
"eslint-plugin-graphql": "^2.1.1",
4141
"flux-standard-action": "^2.0.3",
42+
"jest-emotion": "9",
4243
"nock": "^10.0.1",
4344
"prettier": "^1.14.3",
4445
"react-test-renderer": "^16.5.2",
@@ -57,7 +58,7 @@
5758
"@ndla/pager": "^0.3.4",
5859
"@ndla/tabs": "^0.9.4",
5960
"@ndla/tracker": "^0.3.1",
60-
"@ndla/ui": "^0.19.0",
61+
"@ndla/ui": "^0.19.1",
6162
"@ndla/util": "^0.3.1",
6263
"apollo-cache-inmemory": "^1.3.5",
6364
"apollo-client": "^2.4.2",

‎src/containers/ErrorPage/__tests__/__snapshots__/ErrorPage-test.js.snap

+204-6
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,204 @@
11
// Jest Snapshot v1, https://goo.gl/fbAQLP
22

33
exports[`ErrorPage renderers correctly 1`] = `
4+
.emotion-4 {
5+
margin-top: 6.5px;
6+
}
7+
8+
.emotion-5 {
9+
text-align: center;
10+
}
11+
12+
.emotion-5 a {
13+
color: #20588f;
14+
}
15+
16+
.emotion-5 h1 {
17+
margin-top: 0;
18+
}
19+
20+
.emotion-0 {
21+
margin-bottom: 26px;
22+
}
23+
24+
@media (min-width:37.5625em) {
25+
.emotion-0 {
26+
margin-top: 52px;
27+
}
28+
}
29+
30+
.emotion-2 {
31+
margin-bottom: 26px;
32+
}
33+
34+
@media (min-width:37.5625em) {
35+
.emotion-2 {
36+
margin-bottom: 52px;
37+
}
38+
}
39+
40+
.emotion-7 {
41+
display: inline-block;
42+
color: #ffffff;
43+
background-color: #20588f;
44+
border: 2px solid #20588f;
45+
border-radius: 4px;
46+
padding: 4px 13px;
47+
outline-width: 0;
48+
cursor: pointer;
49+
-webkit-text-decoration: none;
50+
text-decoration: none;
51+
font-size: 16px;
52+
font-size: 0.8888888888888888rem;
53+
line-height: 1.625;
54+
font-family: 'Source Sans Pro',Helvetica,Arial,STKaiti,'华文楷体',KaiTi,SimKai,'楷体',KaiU,DFKai-SB,'標楷體',SongTi,'宋体',sans-serif;
55+
font-weight: 700;
56+
-webkit-transition: all .2s cubic-bezier(0.17,0.04,0.03,0.94);
57+
transition: all .2s cubic-bezier(0.17,0.04,0.03,0.94);
58+
color: #20588f;
59+
background-color: transparent;
60+
border: 2px solid #20588f;
61+
font-weight: 700;
62+
box-shadow: none;
63+
}
64+
65+
.emotion-7:hover,
66+
.emotion-7:focus {
67+
color: white;
68+
background-color: #184673;
69+
border: 2px solid rgba(32,88,143,0);
70+
-webkit-transform: translateY(1px) translateX(1px);
71+
-ms-transform: translateY(1px) translateX(1px);
72+
transform: translateY(1px) translateX(1px);
73+
}
74+
75+
.emotion-7:active {
76+
-webkit-transform: translateY(2px) translateX(2px);
77+
-ms-transform: translateY(2px) translateX(2px);
78+
transform: translateY(2px) translateX(2px);
79+
}
80+
81+
.emotion-7[disabled] {
82+
color: #777777;
83+
background-color: #e6e6e6;
84+
border-color: transparent;
85+
cursor: not-allowed;
86+
-webkit-transform: translateY(0) translateX(0);
87+
-ms-transform: translateY(0) translateX(0);
88+
transform: translateY(0) translateX(0);
89+
}
90+
91+
.emotion-7:focus {
92+
box-shadow: 0 0 2px #20588f;
93+
}
94+
95+
.emotion-7:hover,
96+
.emotion-7:focus {
97+
color: white;
98+
background-color: #20588f;
99+
border: 2px solid transparent;
100+
-webkit-transform: translateY(0) translateX(0);
101+
-ms-transform: translateY(0) translateX(0);
102+
transform: translateY(0) translateX(0);
103+
}
104+
105+
.emotion-7:disabled {
106+
border: 2px solid transparent;
107+
cursor: not-allowed;
108+
-webkit-transform: translateY(0) translateX(0);
109+
-ms-transform: translateY(0) translateX(0);
110+
transform: translateY(0) translateX(0);
111+
}
112+
113+
.emotion-9 {
114+
display: inline-block;
115+
color: #ffffff;
116+
background-color: #20588f;
117+
border: 2px solid #20588f;
118+
border-radius: 4px;
119+
padding: 4px 13px;
120+
outline-width: 0;
121+
cursor: pointer;
122+
-webkit-text-decoration: none;
123+
text-decoration: none;
124+
font-size: 16px;
125+
font-size: 0.8888888888888888rem;
126+
line-height: 1.625;
127+
font-family: 'Source Sans Pro',Helvetica,Arial,STKaiti,'华文楷体',KaiTi,SimKai,'楷体',KaiU,DFKai-SB,'標楷體',SongTi,'宋体',sans-serif;
128+
font-weight: 700;
129+
-webkit-transition: all .2s cubic-bezier(0.17,0.04,0.03,0.94);
130+
transition: all .2s cubic-bezier(0.17,0.04,0.03,0.94);
131+
-webkit-transition: background-color none;
132+
transition: background-color none;
133+
padding: 0;
134+
border-radius: 0;
135+
color: inherit;
136+
font-size: inherit;
137+
background-color: transparent;
138+
box-shadow: none;
139+
border: none;
140+
font-weight: 400;
141+
font-size: inherit;
142+
line-height: inherit;
143+
color: #20588f;
144+
box-shadow: inset 0 -1px;
145+
}
146+
147+
.emotion-9:hover,
148+
.emotion-9:focus {
149+
color: white;
150+
background-color: #184673;
151+
border: 2px solid rgba(32,88,143,0);
152+
-webkit-transform: translateY(1px) translateX(1px);
153+
-ms-transform: translateY(1px) translateX(1px);
154+
transform: translateY(1px) translateX(1px);
155+
}
156+
157+
.emotion-9:active {
158+
-webkit-transform: translateY(2px) translateX(2px);
159+
-ms-transform: translateY(2px) translateX(2px);
160+
transform: translateY(2px) translateX(2px);
161+
}
162+
163+
.emotion-9[disabled] {
164+
color: #777777;
165+
background-color: #e6e6e6;
166+
border-color: transparent;
167+
cursor: not-allowed;
168+
-webkit-transform: translateY(0) translateX(0);
169+
-ms-transform: translateY(0) translateX(0);
170+
transform: translateY(0) translateX(0);
171+
}
172+
173+
.emotion-9:focus {
174+
box-shadow: 0 0 2px #20588f;
175+
}
176+
177+
.emotion-9:hover,
178+
.emotion-9:active,
179+
.emotion-9:disabled,
180+
.emotion-9:focus {
181+
box-shadow: none;
182+
color: #20588f;
183+
background-color: transparent;
184+
-webkit-transform: none;
185+
-ms-transform: none;
186+
transform: none;
187+
border: none;
188+
}
189+
190+
.emotion-9:focus {
191+
outline-width: medium;
192+
}
193+
194+
.emotion-9:hover {
195+
box-shadow: none;
196+
}
197+
198+
.emotion-9:focus {
199+
box-shadow: none;
200+
}
201+
4202
<div
5203
className="o-container o-container--backgroundWide"
6204
>
@@ -61,26 +259,26 @@ exports[`ErrorPage renderers correctly 1`] = `
61259
className="o-wrapper o-wrapper--clear undefined"
62260
>
63261
<article
64-
className="css-7ifh8p eoxglug0"
262+
className="emotion-5 emotion-6"
65263
>
66264
<img
67265
alt="Ops, noe gikk galt"
68-
className="css-156n74x eoxglug1"
266+
className="emotion-0 emotion-1"
69267
src="/static/oops.gif"
70268
/>
71269
<h1>
72270
Ops, noe gikk galt
73271
</h1>
74272
<p
75-
className="css-1x3wxmt eoxglug2"
273+
className="emotion-2 emotion-3"
76274
>
77275
Beklager, en feil oppsto.
78276
</p>
79277
<h2>
80278
Kom igang:
81279
</h2>
82280
<div
83-
className="css-v57cu9"
281+
className="emotion-4"
84282
>
85283
<a
86284
href="/"
@@ -92,7 +290,7 @@ exports[`ErrorPage renderers correctly 1`] = `
92290
</div>
93291
</div>
94292
<button
95-
className="c-button c-button--outline c-zendesk__button"
293+
className="c-zendesk__button emotion-7 emotion-8"
96294
disabled={false}
97295
onClick={[Function]}
98296
type="button"
@@ -167,7 +365,7 @@ exports[`ErrorPage renderers correctly 1`] = `
167365
</p>
168366
<div>
169367
<button
170-
className="c-button c-button--link"
368+
className="emotion-9 emotion-8"
171369
disabled={false}
172370
onClick={[Function]}
173371
type="button"

0 commit comments

Comments
 (0)