Skip to content

Commit d07c2a5

Browse files
remarkablemarkremarkablemark
committed
test(dom-to-react): refactor tests and snapshots
1 parent 65580d3 commit d07c2a5

File tree

2 files changed

+71
-92
lines changed

2 files changed

+71
-92
lines changed

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

Lines changed: 10 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,12 @@
11
// Jest Snapshot v1, https://goo.gl/fbAQLP
22

3-
exports[`DOM to React converts <textarea> correctly 1`] = `
3+
exports[`domToReact converts <textarea> correctly 1`] = `
44
<textarea
55
defaultValue="foo"
66
/>
77
`;
88
9-
exports[`DOM to React converts SVG element with viewBox attribute 1`] = `
9+
exports[`domToReact converts SVG element with viewBox attribute 1`] = `
1010
<svg
1111
id="foo"
1212
viewBox="0 0 512 512"
@@ -15,7 +15,7 @@ exports[`DOM to React converts SVG element with viewBox attribute 1`] = `
1515
</svg>
1616
`;
1717
18-
exports[`DOM to React converts multiple DOM nodes to React 1`] = `
18+
exports[`domToReact converts multiple DOM nodes to React 1`] = `
1919
Array [
2020
<p>
2121
foo
@@ -26,13 +26,13 @@ Array [
2626
]
2727
`;
2828
29-
exports[`DOM to React converts single DOM node to React 1`] = `
29+
exports[`domToReact converts single DOM node to React 1`] = `
3030
<p>
3131
foo
3232
</p>
3333
`;
3434
35-
exports[`DOM to React does not escape <script> content 1`] = `
35+
exports[`domToReact does not escape <script> content 1`] = `
3636
<script
3737
dangerouslySetInnerHTML={
3838
Object {
@@ -42,7 +42,7 @@ exports[`DOM to React does not escape <script> content 1`] = `
4242
/>
4343
`;
4444
45-
exports[`DOM to React does not escape <style> content 1`] = `
45+
exports[`domToReact does not escape <style> content 1`] = `
4646
<style
4747
dangerouslySetInnerHTML={
4848
Object {
@@ -52,14 +52,14 @@ exports[`DOM to React does not escape <style> content 1`] = `
5252
/>
5353
`;
5454
55-
exports[`DOM to React does not modify attributes on custom elements 1`] = `
55+
exports[`domToReact does not modify attributes on custom elements 1`] = `
5656
<custom-button
5757
class="myClass"
5858
custom-attribute="value"
5959
/>
6060
`;
6161
62-
exports[`DOM to React skips doctype and comments 1`] = `
62+
exports[`domToReact skips doctype and comments 1`] = `
6363
Array [
6464
<p>
6565
foo
@@ -70,13 +70,13 @@ Array [
7070
]
7171
`;
7272
73-
exports[`DOM to React when React <16 removes unknown attributes 1`] = `
73+
exports[`domToReact when React <16 removes unknown attributes 1`] = `
7474
<custom-button
7575
className="myClass"
7676
/>
7777
`;
7878
79-
exports[`DOM to React when React >=16 preserves unknown attributes 1`] = `
79+
exports[`domToReact when React >=16 preserves unknown attributes 1`] = `
8080
<custom-button
8181
class="myClass"
8282
custom-attribute="value"

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

Lines changed: 61 additions & 82 deletions
Original file line numberDiff line numberDiff line change
@@ -4,57 +4,43 @@ const domToReact = require('../lib/dom-to-react');
44
const { data, render } = require('./helpers/');
55
const utilities = require('../lib/utilities');
66

7-
describe('DOM to React', () => {
7+
describe('domToReact', () => {
88
it('converts single DOM node to React', () => {
9-
const html = data.html.single;
10-
const reactElement = domToReact(htmlToDOM(html));
11-
9+
const reactElement = domToReact(htmlToDOM(data.html.single));
1210
expect(reactElement).toMatchSnapshot();
1311
});
1412

1513
it('converts multiple DOM nodes to React', () => {
16-
const html = data.html.multiple;
17-
const reactElements = domToReact(htmlToDOM(html));
18-
14+
const reactElements = domToReact(htmlToDOM(data.html.multiple));
1915
reactElements.forEach((reactElement, index) => {
2016
expect(reactElement.key).toBe(String(index));
2117
});
22-
2318
expect(reactElements).toMatchSnapshot();
2419
});
2520

26-
// https://reactjs.org/docs/forms.html#the-textarea-tag
2721
it('converts <textarea> correctly', () => {
28-
const html = data.html.textarea;
29-
const reactElement = domToReact(htmlToDOM(html));
30-
22+
// https://reactjs.org/docs/forms.html#the-textarea-tag
23+
const reactElement = domToReact(htmlToDOM(data.html.textarea));
3124
expect(reactElement).toMatchSnapshot();
3225
});
3326

3427
it('does not escape <script> content', () => {
35-
const html = data.html.script;
36-
const reactElement = domToReact(htmlToDOM(html));
37-
28+
const reactElement = domToReact(htmlToDOM(data.html.script));
3829
expect(reactElement).toMatchSnapshot();
3930
});
4031

4132
it('does not escape <style> content', () => {
42-
const html = data.html.style;
43-
const reactElement = domToReact(htmlToDOM(html));
44-
33+
const reactElement = domToReact(htmlToDOM(data.html.style));
4534
expect(reactElement).toMatchSnapshot();
4635
});
4736

4837
it('does not have `children` for void elements', () => {
49-
const html = data.html.img;
50-
const reactElement = domToReact(htmlToDOM(html));
51-
38+
const reactElement = domToReact(htmlToDOM(data.html.img));
5239
expect(reactElement.props.children).toBe(null);
5340
});
5441

5542
it('does not throw an error for void elements', () => {
56-
const html = data.html.void;
57-
const reactElements = domToReact(htmlToDOM(html));
43+
const reactElements = domToReact(htmlToDOM(data.html.void));
5844
expect(() => {
5945
render(React.createElement('div', {}, reactElements));
6046
}).not.toThrow();
@@ -76,90 +62,83 @@ describe('DOM to React', () => {
7662
});
7763

7864
it('converts SVG element with viewBox attribute', () => {
79-
const html = data.svg.simple;
8065
const reactElement = domToReact(
81-
htmlToDOM(html, { lowerCaseAttributeNames: false })
66+
htmlToDOM(data.svg.simple, { lowerCaseAttributeNames: false })
8267
);
83-
8468
expect(reactElement).toMatchSnapshot();
8569
});
8670

8771
it('does not modify attributes on custom elements', () => {
88-
const html = data.html.customElement;
89-
const reactElement = domToReact(htmlToDOM(html));
90-
72+
const reactElement = domToReact(htmlToDOM(data.html.customElement));
9173
expect(reactElement).toMatchSnapshot();
9274
});
75+
});
9376

94-
describe('library', () => {
95-
const Preact = require('preact');
96-
97-
it('converts with React (default)', () => {
98-
const reactElement = domToReact(htmlToDOM(data.html.single));
77+
describe('domToReact with library option', () => {
78+
const Preact = require('preact');
9979

100-
expect(React.isValidElement(reactElement)).toBe(true);
101-
expect(Preact.isValidElement(reactElement)).toBe(false);
80+
it('converts with React by default', () => {
81+
const reactElement = domToReact(htmlToDOM(data.html.single));
82+
expect(React.isValidElement(reactElement)).toBe(true);
83+
expect(Preact.isValidElement(reactElement)).toBe(false);
84+
expect(reactElement).toEqual(React.createElement('p', {}, 'foo'));
85+
});
10286

103-
expect(reactElement).toEqual(React.createElement('p', {}, 'foo'));
87+
it('converts with Preact', () => {
88+
const parsedElement = domToReact(htmlToDOM(data.html.single), {
89+
library: Preact
10490
});
91+
const preactElement = Preact.createElement('p', {}, 'foo');
92+
expect(React.isValidElement(parsedElement)).toBe(false);
93+
expect(Preact.isValidElement(parsedElement)).toBe(true);
94+
// remove `__v` key since it's causing test equality to fail
95+
delete parsedElement.__v;
96+
delete preactElement.__v;
97+
expect(parsedElement).toEqual(preactElement);
98+
});
99+
});
105100

106-
it('converts with Preact instead of React', () => {
107-
const parsedElement = domToReact(htmlToDOM(data.html.single), {
108-
library: Preact
109-
});
110-
const preactElement = Preact.createElement('p', {}, 'foo');
111-
112-
expect(React.isValidElement(parsedElement)).toBe(false);
113-
expect(Preact.isValidElement(parsedElement)).toBe(true);
114-
115-
// remove `__v` key since it's causing test equality to fail
116-
delete parsedElement.__v;
117-
delete preactElement.__v;
118-
expect(parsedElement).toEqual(preactElement);
101+
describe('domToReact replace option', () => {
102+
it("does not set key if there's a single node", () => {
103+
const replaceElement = React.createElement('p');
104+
const reactElement = domToReact(htmlToDOM(data.html.single), {
105+
replace: () => replaceElement
119106
});
107+
expect(reactElement.key).toBe(null);
120108
});
121109

122-
describe('replace', () => {
123-
it("does not set key if there's a single node", () => {
124-
const replaceElement = React.createElement('p');
125-
const reactElement = domToReact(htmlToDOM(data.html.single), {
126-
replace: () => replaceElement
127-
});
128-
expect(reactElement.key).toBe(null);
129-
});
110+
it("does not modify keys if it's already set", () => {
111+
const html = data.html.single + data.html.customElement;
130112

131-
it("does not modify keys if it's already set", () => {
132-
const html = data.html.single + data.html.customElement;
133-
134-
const reactElements = domToReact(htmlToDOM(html), {
135-
replace: node => {
136-
if (node.name === 'p') {
137-
return React.createElement('p', {}, 'replaced foo');
138-
}
139-
if (node.name === 'custom-button') {
140-
return React.createElement(
141-
'custom-button',
142-
{
143-
key: 'myKey',
144-
class: 'myClass',
145-
'custom-attribute': 'replaced value'
146-
},
147-
null
148-
);
149-
}
113+
const reactElements = domToReact(htmlToDOM(html), {
114+
replace: node => {
115+
if (node.name === 'p') {
116+
return React.createElement('p', {}, 'replaced foo');
150117
}
151-
});
152-
153-
expect(reactElements[0].key).toBe('0');
154-
expect(reactElements[1].key).toBe('myKey');
118+
if (node.name === 'custom-button') {
119+
return React.createElement(
120+
'custom-button',
121+
{
122+
key: 'myKey',
123+
class: 'myClass',
124+
'custom-attribute': 'replaced value'
125+
},
126+
null
127+
);
128+
}
129+
}
155130
});
131+
132+
expect(reactElements[0].key).toBe('0');
133+
expect(reactElements[1].key).toBe('myKey');
156134
});
135+
});
157136

137+
describe('domToReact', () => {
158138
describe('when React >=16', () => {
159139
it('preserves unknown attributes', () => {
160140
const html = data.html.customElement;
161141
const reactElement = domToReact(htmlToDOM(html));
162-
163142
expect(reactElement).toMatchSnapshot();
164143
});
165144
});

0 commit comments

Comments
 (0)