Skip to content

Commit 42317c7

Browse files
remarkablemarkremarkablemark
authored
Merge pull request #191 from remarkablemark/test/refactor
test: modularize test data and refactor tests to snapshots
2 parents d4aa3c3 + e4bf975 commit 42317c7

File tree

9 files changed

+460
-280
lines changed

9 files changed

+460
-280
lines changed

‎test/__snapshots__/dom-to-react.test.js.snap

Lines changed: 17 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,14 @@ exports[`domToReact converts SVG element with viewBox attribute 1`] = `
1515
</svg>
1616
`;
1717
18+
exports[`domToReact converts custom element with attributes 1`] = `
19+
<custom-element
20+
class="myClass"
21+
custom-attribute="value"
22+
style="-o-transition: all .5s; line-height: 1;"
23+
/>
24+
`;
25+
1826
exports[`domToReact converts multiple DOM nodes to React 1`] = `
1927
Array [
2028
<p>
@@ -52,13 +60,6 @@ exports[`domToReact does not escape <style> content 1`] = `
5260
/>
5361
`;
5462
55-
exports[`domToReact does not modify attributes on custom elements 1`] = `
56-
<custom-button
57-
class="myClass"
58-
custom-attribute="value"
59-
/>
60-
`;
61-
6263
exports[`domToReact skips doctype and comments 1`] = `
6364
Array [
6465
<p>
@@ -71,14 +72,21 @@ Array [
7172
`;
7273
7374
exports[`domToReact when React <16 removes unknown attributes 1`] = `
74-
<custom-button
75+
<custom-element
7576
className="myClass"
77+
style={
78+
Object {
79+
"OTransition": "all .5s",
80+
"lineHeight": "1",
81+
}
82+
}
7683
/>
7784
`;
7885
7986
exports[`domToReact when React >=16 preserves unknown attributes 1`] = `
80-
<custom-button
87+
<custom-element
8188
class="myClass"
8289
custom-attribute="value"
90+
style="-o-transition: all .5s; line-height: 1;"
8391
/>
8492
`;

‎test/__snapshots__/index.test.js.snap

Lines changed: 249 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,249 @@
1+
// Jest Snapshot v1, https://goo.gl/fbAQLP
2+
3+
exports[`HTMLReactParser parses SVG 1`] = `
4+
<svg
5+
height="400"
6+
width="450"
7+
>
8+
<path
9+
d="M 100 350 l 150 -300"
10+
fill="none"
11+
id="lineAB"
12+
stroke="red"
13+
strokeWidth="3"
14+
/>
15+
<g
16+
fill="black"
17+
stroke="black"
18+
strokeWidth="3"
19+
>
20+
<circle
21+
cx="100"
22+
cy="350"
23+
id="pointA"
24+
r="3"
25+
/>
26+
</g>
27+
<g
28+
fill="black"
29+
fontFamily="sans-serif"
30+
fontSize="30"
31+
stroke="none"
32+
textAnchor="middle"
33+
>
34+
<text
35+
dx="-30"
36+
x="100"
37+
y="350"
38+
>
39+
A
40+
</text>
41+
</g>
42+
Your browser does not support inline SVG.
43+
</svg>
44+
`;
45+
46+
exports[`HTMLReactParser parses complex HTML with doctype 1`] = `
47+
<html>
48+
<head>
49+
<meta
50+
charSet="utf-8"
51+
/>
52+
<title>
53+
Title
54+
</title>
55+
<link
56+
href="style.css"
57+
rel="stylesheet"
58+
/>
59+
</head>
60+
<body>
61+
<header
62+
id="header"
63+
>
64+
Header
65+
</header>
66+
<h1
67+
style={
68+
Object {
69+
"color": "#000",
70+
"fontSize": "42px",
71+
}
72+
}
73+
>
74+
Heading
75+
</h1>
76+
<hr />
77+
<p>
78+
Paragraph
79+
</p>
80+
<img
81+
src="image.jpg"
82+
/>
83+
<div
84+
className="class1 class2"
85+
>
86+
Some
87+
<em>
88+
text
89+
</em>
90+
.
91+
</div>
92+
<script
93+
dangerouslySetInnerHTML={
94+
Object {
95+
"__html": "alert();",
96+
}
97+
}
98+
/>
99+
</body>
100+
</html>
101+
`;
102+
103+
exports[`HTMLReactParser parses empty <script> 1`] = `<script />`;
104+
105+
exports[`HTMLReactParser parses empty <style> 1`] = `<style />`;
106+
107+
exports[`HTMLReactParser parses multiple HTML elements 1`] = `
108+
Array [
109+
<p>
110+
foo
111+
</p>,
112+
<p>
113+
bar
114+
</p>,
115+
]
116+
`;
117+
118+
exports[`HTMLReactParser parses single HTML element 1`] = `
119+
<p>
120+
foo
121+
</p>
122+
`;
123+
124+
exports[`HTMLReactParser parses single HTML element with comment 1`] = `
125+
<p>
126+
foo
127+
</p>
128+
`;
129+
130+
exports[`htmlparser2 option parses XHTML with xmlMode enabled 1`] = `
131+
<ul>
132+
<li />
133+
<li />
134+
</ul>
135+
`;
136+
137+
exports[`replace option does not replace the element if an invalid React element is returned 1`] = `
138+
<html>
139+
<head>
140+
<meta
141+
charSet="utf-8"
142+
/>
143+
<title>
144+
Title
145+
</title>
146+
<link
147+
href="style.css"
148+
rel="stylesheet"
149+
/>
150+
</head>
151+
<body>
152+
<header
153+
id="header"
154+
>
155+
Header
156+
</header>
157+
<h1
158+
style={
159+
Object {
160+
"color": "#000",
161+
"fontSize": "42px",
162+
}
163+
}
164+
>
165+
Heading
166+
</h1>
167+
<hr />
168+
<p>
169+
Paragraph
170+
</p>
171+
<img
172+
src="image.jpg"
173+
/>
174+
<div
175+
className="class1 class2"
176+
>
177+
Some
178+
<em>
179+
text
180+
</em>
181+
.
182+
</div>
183+
<script
184+
dangerouslySetInnerHTML={
185+
Object {
186+
"__html": "alert();",
187+
}
188+
}
189+
/>
190+
</body>
191+
</html>
192+
`;
193+
194+
exports[`replace option replaces the element if a valid React element is returned 1`] = `
195+
<html>
196+
<head>
197+
<meta
198+
charSet="utf-8"
199+
/>
200+
<title>
201+
Replaced Title
202+
</title>
203+
<link
204+
href="style.css"
205+
rel="stylesheet"
206+
/>
207+
</head>
208+
<body>
209+
<header
210+
id="header"
211+
>
212+
Header
213+
</header>
214+
<h1
215+
style={
216+
Object {
217+
"color": "#000",
218+
"fontSize": "42px",
219+
}
220+
}
221+
>
222+
Heading
223+
</h1>
224+
<hr />
225+
<p>
226+
Paragraph
227+
</p>
228+
<img
229+
src="image.jpg"
230+
/>
231+
<div
232+
className="class1 class2"
233+
>
234+
Some
235+
<em>
236+
text
237+
</em>
238+
.
239+
</div>
240+
<script
241+
dangerouslySetInnerHTML={
242+
Object {
243+
"__html": "alert();",
244+
}
245+
}
246+
/>
247+
</body>
248+
</html>
249+
`;

‎test/helpers/data.js renamed to ‎test/data/html.js

Lines changed: 2 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,4 @@
1-
/**
2-
* HTML.
3-
*/
4-
module.exports.html = {
1+
module.exports = {
52
single: '<p>foo</p>',
63
multiple: '<p>foo</p><p>bar</p>',
74
nested: '<div><p>foo <em>bar</em></p></div>',
@@ -17,14 +14,5 @@ module.exports.html = {
1714
comment: '<!-- comment -->',
1815
doctype: '<!DOCTYPE html>',
1916
customElement:
20-
'<custom-button class="myClass" custom-attribute="value"></custom-button>'
21-
};
22-
23-
/**
24-
* SVG.
25-
*/
26-
module.exports.svg = {
27-
simple: '<svg viewBox="0 0 512 512" id="foo">Inner</svg>',
28-
complex:
29-
'<svg height="400" width="450"><path id="lineAB" d="M 100 350 l 150 -300" stroke="red" stroke-width="3" fill="none"></path><g stroke="black" stroke-width="3" fill="black"><circle id="pointA" cx="100" cy="350" r="3"></circle></g><g font-size="30" font-family="sans-serif" fill="black" stroke="none" text-anchor="middle"><text x="100" y="350" dx="-30">A</text></g>Your browser does not support inline SVG.</svg>'
17+
'<custom-element class="myClass" custom-attribute="value" style="-o-transition: all .5s; line-height: 1;"></custom-element>'
3018
};

‎test/data/index.js

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
module.exports = {
2+
html: require('./html'),
3+
svg: require('./svg')
4+
};

‎test/data/svg.js

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
module.exports = {
2+
simple: '<svg viewBox="0 0 512 512" id="foo">Inner</svg>',
3+
complex:
4+
'<svg height="400" width="450"><path id="lineAB" d="M 100 350 l 150 -300" stroke="red" stroke-width="3" fill="none"></path><g stroke="black" stroke-width="3" fill="black"><circle id="pointA" cx="100" cy="350" r="3"></circle></g><g font-size="30" font-family="sans-serif" fill="black" stroke="none" text-anchor="middle"><text x="100" y="350" dx="-30">A</text></g>Your browser does not support inline SVG.</svg>'
5+
};

0 commit comments

Comments
 (0)