Skip to content

Commit e4bf975

Browse files
remarkablemarkremarkablemark
committed
test: refactor html and svg data to their own files and folder
1 parent fb90b8f commit e4bf975

File tree

6 files changed

+50
-57
lines changed

6 files changed

+50
-57
lines changed

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

Lines changed: 1 addition & 13 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>',
@@ -19,12 +16,3 @@ module.exports.html = {
1916
customElement:
2017
'<custom-element class="myClass" custom-attribute="value" style="-o-transition: all .5s; line-height: 1;"></custom-element>'
2118
};
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>'
30-
};

‎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+
};

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

Lines changed: 28 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,20 @@
11
const React = require('react');
22
const htmlToDOM = require('html-dom-parser');
3+
34
const domToReact = require('../lib/dom-to-react');
4-
const { data, render } = require('./helpers/');
55
const utilities = require('../lib/utilities');
66

7+
const { render } = require('./helpers');
8+
const { html, svg } = require('./data');
9+
710
describe('domToReact', () => {
811
it('converts single DOM node to React', () => {
9-
const reactElement = domToReact(htmlToDOM(data.html.single));
12+
const reactElement = domToReact(htmlToDOM(html.single));
1013
expect(reactElement).toMatchSnapshot();
1114
});
1215

1316
it('converts multiple DOM nodes to React', () => {
14-
const reactElements = domToReact(htmlToDOM(data.html.multiple));
17+
const reactElements = domToReact(htmlToDOM(html.multiple));
1518
reactElements.forEach((reactElement, index) => {
1619
expect(reactElement.key).toBe(String(index));
1720
});
@@ -20,41 +23,36 @@ describe('domToReact', () => {
2023

2124
it('converts <textarea> correctly', () => {
2225
// https://reactjs.org/docs/forms.html#the-textarea-tag
23-
const reactElement = domToReact(htmlToDOM(data.html.textarea));
26+
const reactElement = domToReact(htmlToDOM(html.textarea));
2427
expect(reactElement).toMatchSnapshot();
2528
});
2629

2730
it('does not escape <script> content', () => {
28-
const reactElement = domToReact(htmlToDOM(data.html.script));
31+
const reactElement = domToReact(htmlToDOM(html.script));
2932
expect(reactElement).toMatchSnapshot();
3033
});
3134

3235
it('does not escape <style> content', () => {
33-
const reactElement = domToReact(htmlToDOM(data.html.style));
36+
const reactElement = domToReact(htmlToDOM(html.style));
3437
expect(reactElement).toMatchSnapshot();
3538
});
3639

3740
it('does not have `children` for void elements', () => {
38-
const reactElement = domToReact(htmlToDOM(data.html.img));
41+
const reactElement = domToReact(htmlToDOM(html.img));
3942
expect(reactElement.props.children).toBe(null);
4043
});
4144

4245
it('does not throw an error for void elements', () => {
43-
const reactElements = domToReact(htmlToDOM(data.html.void));
46+
const reactElements = domToReact(htmlToDOM(html.void));
4447
expect(() => {
4548
render(React.createElement('div', {}, reactElements));
4649
}).not.toThrow();
4750
});
4851

4952
it('skips doctype and comments', () => {
50-
const html = [
51-
data.html.doctype,
52-
data.html.single,
53-
data.html.comment,
54-
data.html.single
55-
].join('');
56-
const reactElements = domToReact(htmlToDOM(html));
57-
53+
const reactElements = domToReact(
54+
htmlToDOM(html.doctype + html.single + html.comment + html.single)
55+
);
5856
expect(reactElements).toHaveLength(2);
5957
expect(reactElements[0].key).toBe('1');
6058
expect(reactElements[1].key).toBe('3');
@@ -63,13 +61,13 @@ describe('domToReact', () => {
6361

6462
it('converts SVG element with viewBox attribute', () => {
6563
const reactElement = domToReact(
66-
htmlToDOM(data.svg.simple, { lowerCaseAttributeNames: false })
64+
htmlToDOM(svg.simple, { lowerCaseAttributeNames: false })
6765
);
6866
expect(reactElement).toMatchSnapshot();
6967
});
7068

7169
it('converts custom element with attributes', () => {
72-
const reactElement = domToReact(htmlToDOM(data.html.customElement));
70+
const reactElement = domToReact(htmlToDOM(html.customElement));
7371
expect(reactElement).toMatchSnapshot();
7472
});
7573
});
@@ -78,14 +76,14 @@ describe('domToReact with library option', () => {
7876
const Preact = require('preact');
7977

8078
it('converts with React by default', () => {
81-
const reactElement = domToReact(htmlToDOM(data.html.single));
79+
const reactElement = domToReact(htmlToDOM(html.single));
8280
expect(React.isValidElement(reactElement)).toBe(true);
8381
expect(Preact.isValidElement(reactElement)).toBe(false);
8482
expect(reactElement).toEqual(React.createElement('p', {}, 'foo'));
8583
});
8684

8785
it('converts with Preact', () => {
88-
const parsedElement = domToReact(htmlToDOM(data.html.single), {
86+
const parsedElement = domToReact(htmlToDOM(html.single), {
8987
library: Preact
9088
});
9189
const preactElement = Preact.createElement('p', {}, 'foo');
@@ -101,16 +99,14 @@ describe('domToReact with library option', () => {
10199
describe('domToReact replace option', () => {
102100
it("does not set key if there's a single node", () => {
103101
const replaceElement = React.createElement('p');
104-
const reactElement = domToReact(htmlToDOM(data.html.single), {
102+
const reactElement = domToReact(htmlToDOM(html.single), {
105103
replace: () => replaceElement
106104
});
107105
expect(reactElement.key).toBe(null);
108106
});
109107

110-
it("does not modify keys if it's already set", () => {
111-
const html = data.html.single + data.html.customElement;
112-
113-
const reactElements = domToReact(htmlToDOM(html), {
108+
it("does not modify keys if they're already set", () => {
109+
const options = {
114110
replace: node => {
115111
if (node.name === 'p') {
116112
return React.createElement('p', {}, 'replaced foo');
@@ -127,8 +123,12 @@ describe('domToReact replace option', () => {
127123
);
128124
}
129125
}
130-
});
126+
};
131127

128+
const reactElements = domToReact(
129+
htmlToDOM(html.single + html.customElement),
130+
options
131+
);
132132
expect(reactElements[0].key).toBe('0');
133133
expect(reactElements[1].key).toBe('myKey');
134134
});
@@ -137,8 +137,7 @@ describe('domToReact replace option', () => {
137137
describe('domToReact', () => {
138138
describe('when React >=16', () => {
139139
it('preserves unknown attributes', () => {
140-
const html = data.html.customElement;
141-
const reactElement = domToReact(htmlToDOM(html));
140+
const reactElement = domToReact(htmlToDOM(html.customElement));
142141
expect(reactElement).toMatchSnapshot();
143142
});
144143
});
@@ -155,9 +154,7 @@ describe('domToReact', () => {
155154
});
156155

157156
it('removes unknown attributes', () => {
158-
const html = data.html.customElement;
159-
const reactElement = domToReact(htmlToDOM(html));
160-
157+
const reactElement = domToReact(htmlToDOM(html.customElement));
161158
expect(reactElement).toMatchSnapshot();
162159
});
163160
});

‎test/helpers/index.js

Lines changed: 2 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,9 @@
11
const { renderToStaticMarkup } = require('react-dom/server');
22

3-
module.exports.data = require('./data');
4-
53
/**
64
* Renders a React element to static HTML markup.
75
*
8-
* @param {ReactElement} reactElement - The React element.
9-
* @return {String} - The static HTML markup.
6+
* @param {ReactElement} reactElement - React element.
7+
* @return {string} - HTML markup.
108
*/
119
module.exports.render = reactElement => renderToStaticMarkup(reactElement);

‎test/index.test.js

Lines changed: 10 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
const React = require('react');
22
const parse = require('..');
3-
const { data, render } = require('./helpers/');
3+
const { html, svg } = require('./data');
4+
const { render } = require('./helpers');
45

56
describe('module', () => {
67
it('exports default', () => {
@@ -40,20 +41,20 @@ describe('HTMLReactParser', () => {
4041
});
4142

4243
it('parses single HTML element', () => {
43-
expect(parse(data.html.single)).toMatchSnapshot();
44+
expect(parse(html.single)).toMatchSnapshot();
4445
});
4546

4647
it('parses single HTML element with comment', () => {
4748
// comment should be ignored
48-
expect(parse(data.html.single + data.html.comment)).toMatchSnapshot();
49+
expect(parse(html.single + html.comment)).toMatchSnapshot();
4950
});
5051

5152
it('parses multiple HTML elements', () => {
52-
expect(parse(data.html.multiple)).toMatchSnapshot();
53+
expect(parse(html.multiple)).toMatchSnapshot();
5354
});
5455

5556
it('parses complex HTML with doctype', () => {
56-
expect(parse(data.html.doctype + data.html.complex)).toMatchSnapshot();
57+
expect(parse(html.doctype + html.complex)).toMatchSnapshot();
5758
});
5859

5960
it('parses empty <script>', () => {
@@ -65,7 +66,7 @@ describe('HTMLReactParser', () => {
6566
});
6667

6768
it('parses SVG', () => {
68-
expect(parse(data.svg.complex)).toMatchSnapshot();
69+
expect(parse(svg.complex)).toMatchSnapshot();
6970
});
7071

7172
it('decodes HTML entities', () => {
@@ -85,7 +86,7 @@ describe('replace option', () => {
8586
}
8687
}
8788
};
88-
expect(parse(data.html.complex, options)).toMatchSnapshot();
89+
expect(parse(html.complex, options)).toMatchSnapshot();
8990
});
9091

9192
it('does not replace the element if an invalid React element is returned', () => {
@@ -99,15 +100,15 @@ describe('replace option', () => {
99100
}
100101
}
101102
};
102-
expect(parse(data.html.complex, options)).toMatchSnapshot();
103+
expect(parse(html.complex, options)).toMatchSnapshot();
103104
});
104105
});
105106

106107
describe('library option', () => {
107108
const Preact = require('preact');
108109

109110
it('converts with Preact instead of React', () => {
110-
const parsedElement = parse(data.html.single, { library: Preact });
111+
const parsedElement = parse(html.single, { library: Preact });
111112
const preactElement = Preact.createElement('p', {}, 'foo');
112113
expect(React.isValidElement(parsedElement)).toBe(false);
113114
expect(Preact.isValidElement(parsedElement)).toBe(true);

0 commit comments

Comments
 (0)