Updating Render to use react-testing-library

This commit is contained in:
Jeff Avallone 2019-03-24 19:46:58 -04:00
parent 26e0776f1d
commit 0473c27e39
2 changed files with 497 additions and 129 deletions

View File

@ -1,155 +1,510 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP // Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`Render debugging 1`] = ` exports[`Render debugging 1`] = `
<div <DocumentFragment>
className="render" <div
> class="render"
<SVG >
onReflow={[Function]} <svg
style="background-color: rgb(255, 255, 255);"
viewBox="0 0 "
xmlns="http://www.w3.org/2000/svg"
xmlns:cc="http://creativecommons.org/ns#"
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
>
<metadata>
<rdf:rdf>
<cc:license
rdf:about="http://creativecommons.org/licenses/by/3.0/"
>
<cc:permits
rdf:resource="http://creativecommons.org/ns#Reproduction"
/>
<cc:permits
rdf:resource="http://creativecommons.org/ns#Distribution"
/>
<cc:requires
rdf:resource="http://creativecommons.org/ns#Notice"
/>
<cc:requires
rdf:resource="http://creativecommons.org/ns#Attribution"
/>
<cc:permits
rdf:resource="http://creativecommons.org/ns#DerivativeWorks"
/>
</cc:license>
</rdf:rdf>
</metadata>
<g
transform="translate(10 10)"
>
<span
data-component="Text"
data-props="{}"
> >
<Text>
Example Example
</Text> </span>
<rect <rect
height={50} height="50"
style={ style="fill: transparent; stroke: red; stroke-width: 1px; stroke-dasharray: 2,2; opacity: 0.5;"
Object { width="100"
"fill": "transparent",
"opacity": 0.5,
"stroke": "red",
"strokeDasharray": "2,2",
"strokeWidth": "1px",
}
}
width={100}
/> />
<circle <circle
cx={5} cx="5"
cy={10} cy="10"
r="3" r="3"
style={ style="fill: red; opacity: 0.5;"
Object {
"fill": "red",
"opacity": 0.5,
}
}
/> />
<circle <circle
cx={95} cx="95"
cy={10} cy="10"
r="3" r="3"
style={ style="fill: red; opacity: 0.5;"
Object {
"fill": "red",
"opacity": 0.5,
}
}
/> />
</SVG> </g>
</div> </svg>
</div>
</DocumentFragment>
`; `;
exports[`Render types Box 1`] = ` exports[`Render types Box 1`] = `
<div <DocumentFragment>
className="render" <div
> class="render"
<SVG
onReflow={[Function]}
> >
<Box <svg
padding={5} style="background-color: rgb(255, 255, 255);"
radius={3} viewBox="0 0 "
xmlns="http://www.w3.org/2000/svg"
xmlns:cc="http://creativecommons.org/ns#"
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
>
<metadata>
<rdf:rdf>
<cc:license
rdf:about="http://creativecommons.org/licenses/by/3.0/"
>
<cc:permits
rdf:resource="http://creativecommons.org/ns#Reproduction"
/>
<cc:permits
rdf:resource="http://creativecommons.org/ns#Distribution"
/>
<cc:requires
rdf:resource="http://creativecommons.org/ns#Notice"
/>
<cc:requires
rdf:resource="http://creativecommons.org/ns#Attribution"
/>
<cc:permits
rdf:resource="http://creativecommons.org/ns#DerivativeWorks"
/>
</cc:license>
</rdf:rdf>
</metadata>
<g
transform="translate(10 10)"
>
<span
data-component="Box"
data-props="{}"
>
<span
data-component="Text"
data-props="{}"
> >
<Text>
Example Example
</Text> </span>
</Box> </span>
</SVG> </g>
</div> </svg>
</div>
</DocumentFragment>
`; `;
exports[`Render types HorizontalLayout 1`] = ` exports[`Render types HorizontalLayout 1`] = `
<div <DocumentFragment>
className="render" <div
> class="render"
<SVG
onReflow={[Function]}
> >
<HorizontalLayout <svg
spacing={10} style="background-color: rgb(255, 255, 255);"
withConnectors={false} viewBox="0 0 "
xmlns="http://www.w3.org/2000/svg"
xmlns:cc="http://creativecommons.org/ns#"
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
>
<metadata>
<rdf:rdf>
<cc:license
rdf:about="http://creativecommons.org/licenses/by/3.0/"
>
<cc:permits
rdf:resource="http://creativecommons.org/ns#Reproduction"
/>
<cc:permits
rdf:resource="http://creativecommons.org/ns#Distribution"
/>
<cc:requires
rdf:resource="http://creativecommons.org/ns#Notice"
/>
<cc:requires
rdf:resource="http://creativecommons.org/ns#Attribution"
/>
<cc:permits
rdf:resource="http://creativecommons.org/ns#DerivativeWorks"
/>
</cc:license>
</rdf:rdf>
</metadata>
<g
transform="translate(10 10)"
>
<span
data-component="HorizontalLayout"
data-props="{}"
>
<span
data-component="Text"
data-props="{}"
> >
<Text>
Example Example
</Text> </span>
<Text> <span
data-component="Text"
data-props="{}"
>
Another Example Another Example
</Text> </span>
</HorizontalLayout> </span>
</SVG> </g>
</div> </svg>
</div>
</DocumentFragment>
`; `;
exports[`Render types Loop 1`] = ` exports[`Render types Loop 1`] = `
<div <DocumentFragment>
className="render" <div
> class="render"
<SVG >
onReflow={[Function]} <svg
style="background-color: rgb(255, 255, 255);"
viewBox="0 0 "
xmlns="http://www.w3.org/2000/svg"
xmlns:cc="http://creativecommons.org/ns#"
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
>
<metadata>
<rdf:rdf>
<cc:license
rdf:about="http://creativecommons.org/licenses/by/3.0/"
>
<cc:permits
rdf:resource="http://creativecommons.org/ns#Reproduction"
/>
<cc:permits
rdf:resource="http://creativecommons.org/ns#Distribution"
/>
<cc:requires
rdf:resource="http://creativecommons.org/ns#Notice"
/>
<cc:requires
rdf:resource="http://creativecommons.org/ns#Attribution"
/>
<cc:permits
rdf:resource="http://creativecommons.org/ns#DerivativeWorks"
/>
</cc:license>
</rdf:rdf>
</metadata>
<g
transform="translate(10 10)"
>
<span
data-component="Loop"
data-props="{}"
>
<span
data-component="Text"
data-props="{}"
> >
<Loop>
<Text>
Example Example
</Text> </span>
</Loop> </span>
</SVG> </g>
</div> </svg>
</div>
</DocumentFragment>
`; `;
exports[`Render types Pin 1`] = ` exports[`Render types Pin 1`] = `
<div <DocumentFragment>
className="render" <div
> class="render"
<SVG
onReflow={[Function]}
> >
<Pin /> <svg
</SVG> style="background-color: rgb(255, 255, 255);"
</div> viewBox="0 0 "
xmlns="http://www.w3.org/2000/svg"
xmlns:cc="http://creativecommons.org/ns#"
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
>
<metadata>
<rdf:rdf>
<cc:license
rdf:about="http://creativecommons.org/licenses/by/3.0/"
>
<cc:permits
rdf:resource="http://creativecommons.org/ns#Reproduction"
/>
<cc:permits
rdf:resource="http://creativecommons.org/ns#Distribution"
/>
<cc:requires
rdf:resource="http://creativecommons.org/ns#Notice"
/>
<cc:requires
rdf:resource="http://creativecommons.org/ns#Attribution"
/>
<cc:permits
rdf:resource="http://creativecommons.org/ns#DerivativeWorks"
/>
</cc:license>
</rdf:rdf>
</metadata>
<g
transform="translate(10 10)"
>
<span
data-component="Pin"
data-props="{}"
/>
</g>
</svg>
</div>
</DocumentFragment>
`; `;
exports[`Render types Text 1`] = ` exports[`Render types Text 1`] = `
<div <DocumentFragment>
className="render" <div
> class="render"
<SVG >
onReflow={[Function]} <svg
style="background-color: rgb(255, 255, 255);"
viewBox="0 0 "
xmlns="http://www.w3.org/2000/svg"
xmlns:cc="http://creativecommons.org/ns#"
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
>
<metadata>
<rdf:rdf>
<cc:license
rdf:about="http://creativecommons.org/licenses/by/3.0/"
>
<cc:permits
rdf:resource="http://creativecommons.org/ns#Reproduction"
/>
<cc:permits
rdf:resource="http://creativecommons.org/ns#Distribution"
/>
<cc:requires
rdf:resource="http://creativecommons.org/ns#Notice"
/>
<cc:requires
rdf:resource="http://creativecommons.org/ns#Attribution"
/>
<cc:permits
rdf:resource="http://creativecommons.org/ns#DerivativeWorks"
/>
</cc:license>
</rdf:rdf>
</metadata>
<g
transform="translate(10 10)"
>
<span
data-component="Text"
data-props="{}"
> >
<Text>
Example Example
</Text> </span>
</SVG> </g>
</div> </svg>
</div>
</DocumentFragment>
`; `;
exports[`Render types VerticalLayout 1`] = ` exports[`Render types VerticalLayout 1`] = `
<div <DocumentFragment>
className="render" <div
> class="render"
<SVG
onReflow={[Function]}
> >
<VerticalLayout <svg
spacing={10} style="background-color: rgb(255, 255, 255);"
withConnectors={false} viewBox="0 0 "
xmlns="http://www.w3.org/2000/svg"
xmlns:cc="http://creativecommons.org/ns#"
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
>
<metadata>
<rdf:rdf>
<cc:license
rdf:about="http://creativecommons.org/licenses/by/3.0/"
>
<cc:permits
rdf:resource="http://creativecommons.org/ns#Reproduction"
/>
<cc:permits
rdf:resource="http://creativecommons.org/ns#Distribution"
/>
<cc:requires
rdf:resource="http://creativecommons.org/ns#Notice"
/>
<cc:requires
rdf:resource="http://creativecommons.org/ns#Attribution"
/>
<cc:permits
rdf:resource="http://creativecommons.org/ns#DerivativeWorks"
/>
</cc:license>
</rdf:rdf>
</metadata>
<g
transform="translate(10 10)"
>
<span
data-component="VerticalLayout"
data-props="{}"
>
<span
data-component="Text"
data-props="{}"
> >
<Text>
Example Example
</Text> </span>
<Text> <span
data-component="Text"
data-props="{}"
>
Another Example Another Example
</Text> </span>
</VerticalLayout> </span>
</SVG> </g>
</div> </svg>
</div>
</DocumentFragment>
`; `;

View File

@ -1,20 +1,33 @@
jest.mock('rendering/Box', () =>
require('__mocks__/component-mock')('rendering/Box'));
jest.mock('rendering/HorizontalLayout', () =>
require('__mocks__/component-mock')('rendering/HorizontalLayout'));
jest.mock('rendering/Loop', () =>
require('__mocks__/component-mock')('rendering/Loop'));
jest.mock('rendering/Pin', () =>
require('__mocks__/component-mock')('rendering/Pin'));
jest.mock('rendering/Text', () =>
require('__mocks__/component-mock')('rendering/Text'));
jest.mock('rendering/VerticalLayout', () =>
require('__mocks__/component-mock')('rendering/VerticalLayout'));
import React from 'react'; import React from 'react';
import { render } from 'react-testing-library'; import { render } from 'react-testing-library';
import Render from 'components/Render'; import Render from 'components/Render';
const testType = (name, item) => { const testType = (name, item) => {
test.skip(name, () => { test(name, () => {
const data = { type: 'SVG', children: [item] }; const data = { type: 'SVG', children: [item] };
const component = shallow( const { asFragment } = render(
<Render data={ data } onRender={ jest.fn() }/> <Render data={ data } onRender={ jest.fn() }/>
); );
expect(component).toMatchSnapshot(); expect(asFragment()).toMatchSnapshot();
}); });
}; };
describe('Render', () => { describe('Render', () => {
test.skip('debugging', () => { test('debugging', () => {
const data = { const data = {
type: 'SVG', type: 'SVG',
children: [ children: [
@ -34,10 +47,10 @@ describe('Render', () => {
} }
] ]
}; };
const component = shallow( const { asFragment } = render(
<Render data={ data } onRender={ jest.fn() }/> <Render data={ data } onRender={ jest.fn() }/>
); );
expect(component).toMatchSnapshot(); expect(asFragment()).toMatchSnapshot();
}); });
describe('types', () => { describe('types', () => {