Updating Render to use react-testing-library
This commit is contained in:
Jeff Avallone
parent
26e0776f1d
commit
0473c27e39
@ -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`] = `
|
||||||
|
<DocumentFragment>
|
||||||
<div
|
<div
|
||||||
className="render"
|
class="render"
|
||||||
>
|
>
|
||||||
<SVG
|
<svg
|
||||||
onReflow={[Function]}
|
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>
|
||||||
|
</svg>
|
||||||
</div>
|
</div>
|
||||||
|
</DocumentFragment>
|
||||||
`;
|
`;
|
||||||
|
|
||||||
exports[`Render types Box 1`] = `
|
exports[`Render types Box 1`] = `
|
||||||
|
<DocumentFragment>
|
||||||
<div
|
<div
|
||||||
className="render"
|
class="render"
|
||||||
>
|
>
|
||||||
<SVG
|
<svg
|
||||||
onReflow={[Function]}
|
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#"
|
||||||
>
|
>
|
||||||
<Box
|
<metadata>
|
||||||
padding={5}
|
<rdf:rdf>
|
||||||
radius={3}
|
|
||||||
|
|
||||||
|
<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>
|
||||||
|
</svg>
|
||||||
</div>
|
</div>
|
||||||
|
</DocumentFragment>
|
||||||
`;
|
`;
|
||||||
|
|
||||||
exports[`Render types HorizontalLayout 1`] = `
|
exports[`Render types HorizontalLayout 1`] = `
|
||||||
|
<DocumentFragment>
|
||||||
<div
|
<div
|
||||||
className="render"
|
class="render"
|
||||||
>
|
>
|
||||||
<SVG
|
<svg
|
||||||
onReflow={[Function]}
|
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#"
|
||||||
>
|
>
|
||||||
<HorizontalLayout
|
<metadata>
|
||||||
spacing={10}
|
<rdf:rdf>
|
||||||
withConnectors={false}
|
|
||||||
|
|
||||||
|
<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>
|
||||||
|
</svg>
|
||||||
</div>
|
</div>
|
||||||
|
</DocumentFragment>
|
||||||
`;
|
`;
|
||||||
|
|
||||||
exports[`Render types Loop 1`] = `
|
exports[`Render types Loop 1`] = `
|
||||||
|
<DocumentFragment>
|
||||||
<div
|
<div
|
||||||
className="render"
|
class="render"
|
||||||
>
|
>
|
||||||
<SVG
|
<svg
|
||||||
onReflow={[Function]}
|
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>
|
||||||
|
</svg>
|
||||||
</div>
|
</div>
|
||||||
|
</DocumentFragment>
|
||||||
`;
|
`;
|
||||||
|
|
||||||
exports[`Render types Pin 1`] = `
|
exports[`Render types Pin 1`] = `
|
||||||
|
<DocumentFragment>
|
||||||
<div
|
<div
|
||||||
className="render"
|
class="render"
|
||||||
>
|
>
|
||||||
<SVG
|
<svg
|
||||||
onReflow={[Function]}
|
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#"
|
||||||
>
|
>
|
||||||
<Pin />
|
<metadata>
|
||||||
</SVG>
|
<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>
|
</div>
|
||||||
|
</DocumentFragment>
|
||||||
`;
|
`;
|
||||||
|
|
||||||
exports[`Render types Text 1`] = `
|
exports[`Render types Text 1`] = `
|
||||||
|
<DocumentFragment>
|
||||||
<div
|
<div
|
||||||
className="render"
|
class="render"
|
||||||
>
|
>
|
||||||
<SVG
|
<svg
|
||||||
onReflow={[Function]}
|
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>
|
||||||
|
</svg>
|
||||||
</div>
|
</div>
|
||||||
|
</DocumentFragment>
|
||||||
`;
|
`;
|
||||||
|
|
||||||
exports[`Render types VerticalLayout 1`] = `
|
exports[`Render types VerticalLayout 1`] = `
|
||||||
|
<DocumentFragment>
|
||||||
<div
|
<div
|
||||||
className="render"
|
class="render"
|
||||||
>
|
>
|
||||||
<SVG
|
<svg
|
||||||
onReflow={[Function]}
|
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#"
|
||||||
>
|
>
|
||||||
<VerticalLayout
|
<metadata>
|
||||||
spacing={10}
|
<rdf:rdf>
|
||||||
withConnectors={false}
|
|
||||||
|
|
||||||
|
<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>
|
||||||
|
</svg>
|
||||||
</div>
|
</div>
|
||||||
|
</DocumentFragment>
|
||||||
`;
|
`;
|
||||||
|
|||||||
@ -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', () => {
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user