Skip to content

Commit fb90b8f

Browse files
remarkablemarkremarkablemark
committed
test(index): refactor HTMLReactParser tests to snapshots
1 parent 60f009e commit fb90b8f

File tree

2 files changed

+260
-35
lines changed

2 files changed

+260
-35
lines changed

‎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/index.test.js

Lines changed: 11 additions & 35 deletions
Original file line numberDiff line numberDiff line change
@@ -40,48 +40,32 @@ describe('HTMLReactParser', () => {
4040
});
4141

4242
it('parses single HTML element', () => {
43-
const html = data.html.single;
44-
const reactElement = parse(html);
45-
expect(render(reactElement)).toBe(html);
43+
expect(parse(data.html.single)).toMatchSnapshot();
4644
});
4745

4846
it('parses single HTML element with comment', () => {
49-
const html = data.html.single;
5047
// comment should be ignored
51-
const reactElement = parse(html + data.html.comment);
52-
expect(render(reactElement)).toBe(html);
48+
expect(parse(data.html.single + data.html.comment)).toMatchSnapshot();
5349
});
5450

5551
it('parses multiple HTML elements', () => {
56-
const html = data.html.multiple;
57-
const reactElements = parse(html);
58-
expect(render(React.createElement(React.Fragment, {}, reactElements))).toBe(
59-
html
60-
);
52+
expect(parse(data.html.multiple)).toMatchSnapshot();
6153
});
6254

63-
it('parses complex HTML', () => {
64-
const html = data.html.complex;
65-
const reactElement = parse(data.html.doctype + html);
66-
expect(render(reactElement)).toBe(html);
55+
it('parses complex HTML with doctype', () => {
56+
expect(parse(data.html.doctype + data.html.complex)).toMatchSnapshot();
6757
});
6858

6959
it('parses empty <script>', () => {
70-
const html = '<script></script>';
71-
const reactElement = parse(html);
72-
expect(render(reactElement)).toBe(html);
60+
expect(parse('<script></script>')).toMatchSnapshot();
7361
});
7462

7563
it('parses empty <style>', () => {
76-
const html = '<style></style>';
77-
const reactElement = parse(html);
78-
expect(render(reactElement)).toBe(html);
64+
expect(parse('<style></style>')).toMatchSnapshot();
7965
});
8066

8167
it('parses SVG', () => {
82-
const svg = data.svg.complex;
83-
const reactElement = parse(svg);
84-
expect(render(reactElement)).toBe(svg);
68+
expect(parse(data.svg.complex)).toMatchSnapshot();
8569
});
8670

8771
it('decodes HTML entities', () => {
@@ -94,22 +78,17 @@ describe('HTMLReactParser', () => {
9478

9579
describe('replace option', () => {
9680
it('replaces the element if a valid React element is returned', () => {
97-
const html = data.html.complex;
9881
const options = {
9982
replace: node => {
10083
if (node.name === 'title') {
10184
return React.createElement('title', {}, 'Replaced Title');
10285
}
10386
}
10487
};
105-
const reactElement = parse(html, options);
106-
expect(render(reactElement)).toBe(
107-
html.replace('<title>Title</title>', '<title>Replaced Title</title>')
108-
);
88+
expect(parse(data.html.complex, options)).toMatchSnapshot();
10989
});
11090

11191
it('does not replace the element if an invalid React element is returned', () => {
112-
const html = data.html.complex;
11392
const options = {
11493
replace: node => {
11594
if (node.attribs && node.attribs.id === 'header') {
@@ -120,8 +99,7 @@ describe('replace option', () => {
12099
}
121100
}
122101
};
123-
const reactElement = parse(html, options);
124-
expect(render(reactElement)).toBe(html);
102+
expect(parse(data.html.complex, options)).toMatchSnapshot();
125103
});
126104
});
127105

@@ -145,10 +123,8 @@ describe('htmlparser2 option', () => {
145123
// using self-closing syntax (`/>`) for non-void elements is invalid
146124
// which causes elements to nest instead of being rendered correctly
147125
// enabling htmlparser2 option xmlMode resolves this issue
148-
const html = '<ul><li/><li/></ul>';
149126
const options = { htmlparser2: { xmlMode: true } };
150-
const reactElements = parse(html, options);
151-
expect(render(reactElements)).toBe('<ul><li></li><li></li></ul>');
127+
expect(parse('<ul><li/><li/></ul>', options)).toMatchSnapshot();
152128
});
153129
});
154130

0 commit comments

Comments
 (0)