Skip to content

Commit 44c582b

Browse files
remarkablemarkremarkablemark
committed
test(html-to-react): refactor tests
1 parent d07c2a5 commit 44c582b

File tree

1 file changed

+164
-167
lines changed

1 file changed

+164
-167
lines changed

‎test/html-to-react.test.js

Lines changed: 164 additions & 167 deletions
Original file line numberDiff line numberDiff line change
@@ -2,222 +2,219 @@ const React = require('react');
22
const parse = require('..');
33
const { data, render } = require('./helpers/');
44

5-
describe('HTML to React', () => {
6-
describe('exports', () => {
7-
it('has default ES Module', () => {
8-
expect(parse.default).toBe(parse);
9-
});
10-
11-
it('has domToReact', () => {
12-
expect(parse.domToReact).toBe(require('../lib/dom-to-react'));
13-
});
5+
describe('exports', () => {
6+
it('has default ES Module', () => {
7+
expect(parse.default).toBe(parse);
8+
});
149

15-
it('has htmlToDOM', () => {
16-
expect(parse.htmlToDOM).toBe(require('html-dom-parser'));
17-
});
10+
it('has domToReact', () => {
11+
expect(parse.domToReact).toBe(require('../lib/dom-to-react'));
12+
});
1813

19-
it('has attributesToProps', () => {
20-
expect(parse.attributesToProps).toBe(
21-
require('../lib/attributes-to-props')
22-
);
23-
});
14+
it('has htmlToDOM', () => {
15+
expect(parse.htmlToDOM).toBe(require('html-dom-parser'));
2416
});
2517

26-
describe('parser', () => {
27-
it.each([undefined, null, {}, [], 0, 1, () => {}, new Date()])(
28-
'throws an error if first argument is %p',
29-
input => {
30-
expect(() => {
31-
parse(input);
32-
}).toThrow(TypeError);
33-
}
34-
);
18+
it('has attributesToProps', () => {
19+
expect(parse.attributesToProps).toBe(require('../lib/attributes-to-props'));
20+
});
21+
});
3522

36-
it('converts empty string to empty array', () => {
37-
expect(parse('')).toEqual([]);
38-
});
23+
describe('parser', () => {
24+
it.each([undefined, null, {}, [], true, false, 0, 1, () => {}, new Date()])(
25+
'throws error for value: %p',
26+
value => {
27+
expect(() => {
28+
parse(value);
29+
}).toThrow(TypeError);
30+
}
31+
);
32+
33+
it('converts "" to []', () => {
34+
expect(parse('')).toEqual([]);
35+
});
3936

40-
it('returns string if it cannot be parsed as HTML', () => {
41-
expect(parse('foo')).toBe('foo');
42-
});
37+
it('returns string if it cannot be parsed as HTML', () => {
38+
const string = 'foo';
39+
expect(parse(string)).toBe(string);
40+
});
4341

44-
it('converts single HTML element to React', () => {
45-
const html = data.html.single;
46-
const reactElement = parse(html);
42+
it('converts single HTML element to React', () => {
43+
const html = data.html.single;
44+
const reactElement = parse(html);
4745

48-
expect(render(reactElement)).toBe(html);
49-
});
46+
expect(render(reactElement)).toBe(html);
47+
});
5048

51-
it('converts single HTML element and ignores comment', () => {
52-
const html = data.html.single;
53-
// comment should be ignored
54-
const reactElement = parse(html + data.html.comment);
49+
it('converts single HTML element and ignores comment', () => {
50+
const html = data.html.single;
51+
// comment should be ignored
52+
const reactElement = parse(html + data.html.comment);
5553

56-
expect(render(reactElement)).toBe(html);
57-
});
54+
expect(render(reactElement)).toBe(html);
55+
});
5856

59-
it('converts multiple HTML elements to React', () => {
60-
const html = data.html.multiple;
61-
const reactElements = parse(html);
57+
it('converts multiple HTML elements to React', () => {
58+
const html = data.html.multiple;
59+
const reactElements = parse(html);
6260

63-
expect(
64-
render(React.createElement(React.Fragment, {}, reactElements))
65-
).toBe(html);
66-
});
61+
expect(render(React.createElement(React.Fragment, {}, reactElements))).toBe(
62+
html
63+
);
64+
});
6765

68-
it('converts complex HTML to React', () => {
69-
const html = data.html.complex;
70-
const reactElement = parse(data.html.doctype + html);
66+
it('converts complex HTML to React', () => {
67+
const html = data.html.complex;
68+
const reactElement = parse(data.html.doctype + html);
7169

72-
expect(render(reactElement)).toBe(html);
73-
});
70+
expect(render(reactElement)).toBe(html);
71+
});
7472

75-
it('converts empty <script> to React', () => {
76-
const html = '<script></script>';
77-
const reactElement = parse(html);
73+
it('converts empty <script> to React', () => {
74+
const html = '<script></script>';
75+
const reactElement = parse(html);
7876

79-
expect(render(reactElement)).toBe(html);
80-
});
77+
expect(render(reactElement)).toBe(html);
78+
});
8179

82-
it('converts empty <style> to React', () => {
83-
const html = '<style></style>';
84-
const reactElement = parse(html);
80+
it('converts empty <style> to React', () => {
81+
const html = '<style></style>';
82+
const reactElement = parse(html);
8583

86-
expect(render(reactElement)).toBe(html);
87-
});
84+
expect(render(reactElement)).toBe(html);
85+
});
8886

89-
it('converts SVG to React', () => {
90-
const svg = data.svg.complex;
91-
const reactElement = parse(svg);
87+
it('converts SVG to React', () => {
88+
const svg = data.svg.complex;
89+
const reactElement = parse(svg);
9290

93-
expect(render(reactElement)).toBe(svg);
94-
});
91+
expect(render(reactElement)).toBe(svg);
92+
});
9593

96-
it('decodes HTML entities', () => {
97-
const encodedEntities = 'asdf &amp; &yuml; &uuml; &apos;';
98-
const decodedEntities = "asdf & ÿ ü '";
99-
const reactElement = parse('<i>' + encodedEntities + '</i>');
94+
it('decodes HTML entities', () => {
95+
const encodedEntities = 'asdf &amp; &yuml; &uuml; &apos;';
96+
const decodedEntities = "asdf & ÿ ü '";
97+
const reactElement = parse('<i>' + encodedEntities + '</i>');
10098

101-
expect(reactElement.props.children).toBe(decodedEntities);
102-
});
99+
expect(reactElement.props.children).toBe(decodedEntities);
103100
});
101+
});
104102

105-
describe('options', () => {
106-
describe('replace', () => {
107-
it('overrides the element if a valid React element is returned', () => {
108-
const html = data.html.complex;
109-
const reactElement = parse(html, {
110-
replace: node => {
111-
if (node.name === 'title') {
112-
return React.createElement('title', {}, 'Replaced Title');
113-
}
103+
describe('options', () => {
104+
describe('replace', () => {
105+
it('overrides the element if a valid React element is returned', () => {
106+
const html = data.html.complex;
107+
const reactElement = parse(html, {
108+
replace: node => {
109+
if (node.name === 'title') {
110+
return React.createElement('title', {}, 'Replaced Title');
114111
}
115-
});
116-
117-
expect(render(reactElement)).toBe(
118-
html.replace('<title>Title</title>', '<title>Replaced Title</title>')
119-
);
112+
}
120113
});
121114

122-
it('does not override the element if an invalid React element is returned', () => {
123-
const html = data.html.complex;
124-
const options = {
125-
replace: node => {
126-
if (node.attribs && node.attribs.id === 'header') {
127-
return {
128-
type: 'h1',
129-
props: { children: 'Heading' }
130-
};
131-
}
115+
expect(render(reactElement)).toBe(
116+
html.replace('<title>Title</title>', '<title>Replaced Title</title>')
117+
);
118+
});
119+
120+
it('does not override the element if an invalid React element is returned', () => {
121+
const html = data.html.complex;
122+
const options = {
123+
replace: node => {
124+
if (node.attribs && node.attribs.id === 'header') {
125+
return {
126+
type: 'h1',
127+
props: { children: 'Heading' }
128+
};
132129
}
133-
};
134-
const reactElement = parse(html, options);
130+
}
131+
};
132+
const reactElement = parse(html, options);
135133

136-
expect(render(reactElement)).toBe(html);
137-
});
134+
expect(render(reactElement)).toBe(html);
135+
});
138136

139-
it('use attributesToProps to converts attributes to React props', () => {
140-
const { attributesToProps } = parse;
141-
const html = data.html.attributes;
142-
143-
let props;
144-
const options = {
145-
replace: node => {
146-
if (node.attribs && node.name === 'hr') {
147-
props = attributesToProps(node.attribs);
148-
return {
149-
type: 'hr',
150-
props
151-
};
152-
}
137+
it('use attributesToProps to converts attributes to React props', () => {
138+
const { attributesToProps } = parse;
139+
const html = data.html.attributes;
140+
141+
let props;
142+
const options = {
143+
replace: node => {
144+
if (node.attribs && node.name === 'hr') {
145+
props = attributesToProps(node.attribs);
146+
return {
147+
type: 'hr',
148+
props
149+
};
153150
}
154-
};
155-
const reactElement = parse(html, options);
156-
157-
expect(props).toEqual({
158-
id: 'foo',
159-
className: 'bar baz',
160-
style: {
161-
background: '#fff',
162-
textAlign: 'center'
163-
},
164-
['data-foo']: 'bar'
165-
});
166-
expect(render(reactElement)).toBe(html);
151+
}
152+
};
153+
const reactElement = parse(html, options);
154+
155+
expect(props).toEqual({
156+
id: 'foo',
157+
className: 'bar baz',
158+
style: {
159+
background: '#fff',
160+
textAlign: 'center'
161+
},
162+
['data-foo']: 'bar'
167163
});
164+
expect(render(reactElement)).toBe(html);
168165
});
166+
});
169167

170-
describe('library', () => {
171-
const Preact = require('preact');
168+
describe('library', () => {
169+
const Preact = require('preact');
172170

173-
it('converts with Preact instead of React', () => {
174-
const parsedElement = parse(data.html.single, { library: Preact });
175-
const preactElement = Preact.createElement('p', {}, 'foo');
171+
it('converts with Preact instead of React', () => {
172+
const parsedElement = parse(data.html.single, { library: Preact });
173+
const preactElement = Preact.createElement('p', {}, 'foo');
176174

177-
expect(React.isValidElement(parsedElement)).toBe(false);
178-
expect(Preact.isValidElement(parsedElement)).toBe(true);
175+
expect(React.isValidElement(parsedElement)).toBe(false);
176+
expect(Preact.isValidElement(parsedElement)).toBe(true);
179177

180-
// remove `__v` key since it's causing test equality to fail
181-
delete parsedElement.__v;
182-
delete preactElement.__v;
183-
expect(parsedElement).toEqual(preactElement);
184-
});
178+
// remove `__v` key since it's causing test equality to fail
179+
delete parsedElement.__v;
180+
delete preactElement.__v;
181+
expect(parsedElement).toEqual(preactElement);
185182
});
183+
});
186184

187-
describe('htmlparser2', () => {
188-
it('parses XHTML with xmlMode enabled', () => {
189-
// using self-closing syntax (`/>`) for non-void elements is invalid
190-
// which causes elements to nest instead of being rendered correctly
191-
// enabling htmlparser2 option xmlMode resolves this issue
192-
const html = '<ul><li/><li/></ul>';
193-
const options = { htmlparser2: { xmlMode: true } };
194-
const reactElements = parse(html, options);
185+
describe('htmlparser2', () => {
186+
it('parses XHTML with xmlMode enabled', () => {
187+
// using self-closing syntax (`/>`) for non-void elements is invalid
188+
// which causes elements to nest instead of being rendered correctly
189+
// enabling htmlparser2 option xmlMode resolves this issue
190+
const html = '<ul><li/><li/></ul>';
191+
const options = { htmlparser2: { xmlMode: true } };
192+
const reactElements = parse(html, options);
195193

196-
expect(render(reactElements)).toBe('<ul><li></li><li></li></ul>');
197-
});
194+
expect(render(reactElements)).toBe('<ul><li></li><li></li></ul>');
198195
});
196+
});
199197

200-
describe('trim', () => {
201-
it('preserves whitespace text nodes when disabled (default)', () => {
202-
const html = `<table>
198+
describe('trim', () => {
199+
it('preserves whitespace text nodes when disabled (default)', () => {
200+
const html = `<table>
203201
<tbody>
204202
</tbody>
205203
</table>`;
206-
const reactElement = parse(html);
204+
const reactElement = parse(html);
207205

208-
expect(render(reactElement)).toBe(html);
209-
});
206+
expect(render(reactElement)).toBe(html);
207+
});
210208

211-
it('removes whitespace text nodes when enabled', () => {
212-
const html = `<table>
209+
it('removes whitespace text nodes when enabled', () => {
210+
const html = `<table>
213211
<tbody><tr><td> text </td><td> </td>\t</tr>\r</tbody>\n</table>`;
214-
const options = { trim: true };
215-
const reactElement = parse(html, options);
212+
const options = { trim: true };
213+
const reactElement = parse(html, options);
216214

217-
expect(render(reactElement)).toBe(
218-
'<table><tbody><tr><td> text </td><td></td></tr></tbody></table>'
219-
);
220-
});
215+
expect(render(reactElement)).toBe(
216+
'<table><tbody><tr><td> text </td><td></td></tr></tbody></table>'
217+
);
221218
});
222219
});
223220
});

0 commit comments

Comments
 (0)