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
|
||||
|
||||
exports[`Render debugging 1`] = `
|
||||
<div
|
||||
className="render"
|
||||
>
|
||||
<SVG
|
||||
onReflow={[Function]}
|
||||
<DocumentFragment>
|
||||
<div
|
||||
class="render"
|
||||
>
|
||||
<Text>
|
||||
Example
|
||||
</Text>
|
||||
<rect
|
||||
height={50}
|
||||
style={
|
||||
Object {
|
||||
"fill": "transparent",
|
||||
"opacity": 0.5,
|
||||
"stroke": "red",
|
||||
"strokeDasharray": "2,2",
|
||||
"strokeWidth": "1px",
|
||||
}
|
||||
}
|
||||
width={100}
|
||||
/>
|
||||
<circle
|
||||
cx={5}
|
||||
cy={10}
|
||||
r="3"
|
||||
style={
|
||||
Object {
|
||||
"fill": "red",
|
||||
"opacity": 0.5,
|
||||
}
|
||||
}
|
||||
/>
|
||||
<circle
|
||||
cx={95}
|
||||
cy={10}
|
||||
r="3"
|
||||
style={
|
||||
Object {
|
||||
"fill": "red",
|
||||
"opacity": 0.5,
|
||||
}
|
||||
}
|
||||
/>
|
||||
</SVG>
|
||||
</div>
|
||||
<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="{}"
|
||||
>
|
||||
Example
|
||||
</span>
|
||||
<rect
|
||||
height="50"
|
||||
style="fill: transparent; stroke: red; stroke-width: 1px; stroke-dasharray: 2,2; opacity: 0.5;"
|
||||
width="100"
|
||||
/>
|
||||
<circle
|
||||
cx="5"
|
||||
cy="10"
|
||||
r="3"
|
||||
style="fill: red; opacity: 0.5;"
|
||||
/>
|
||||
<circle
|
||||
cx="95"
|
||||
cy="10"
|
||||
r="3"
|
||||
style="fill: red; opacity: 0.5;"
|
||||
/>
|
||||
</g>
|
||||
</svg>
|
||||
</div>
|
||||
</DocumentFragment>
|
||||
`;
|
||||
|
||||
exports[`Render types Box 1`] = `
|
||||
<div
|
||||
className="render"
|
||||
>
|
||||
<SVG
|
||||
onReflow={[Function]}
|
||||
<DocumentFragment>
|
||||
<div
|
||||
class="render"
|
||||
>
|
||||
<Box
|
||||
padding={5}
|
||||
radius={3}
|
||||
<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#"
|
||||
>
|
||||
<Text>
|
||||
Example
|
||||
</Text>
|
||||
</Box>
|
||||
</SVG>
|
||||
</div>
|
||||
<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="{}"
|
||||
>
|
||||
Example
|
||||
</span>
|
||||
</span>
|
||||
</g>
|
||||
</svg>
|
||||
</div>
|
||||
</DocumentFragment>
|
||||
`;
|
||||
|
||||
exports[`Render types HorizontalLayout 1`] = `
|
||||
<div
|
||||
className="render"
|
||||
>
|
||||
<SVG
|
||||
onReflow={[Function]}
|
||||
<DocumentFragment>
|
||||
<div
|
||||
class="render"
|
||||
>
|
||||
<HorizontalLayout
|
||||
spacing={10}
|
||||
withConnectors={false}
|
||||
<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#"
|
||||
>
|
||||
<Text>
|
||||
Example
|
||||
</Text>
|
||||
<Text>
|
||||
Another Example
|
||||
</Text>
|
||||
</HorizontalLayout>
|
||||
</SVG>
|
||||
</div>
|
||||
<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="{}"
|
||||
>
|
||||
Example
|
||||
</span>
|
||||
<span
|
||||
data-component="Text"
|
||||
data-props="{}"
|
||||
>
|
||||
Another Example
|
||||
</span>
|
||||
</span>
|
||||
</g>
|
||||
</svg>
|
||||
</div>
|
||||
</DocumentFragment>
|
||||
`;
|
||||
|
||||
exports[`Render types Loop 1`] = `
|
||||
<div
|
||||
className="render"
|
||||
>
|
||||
<SVG
|
||||
onReflow={[Function]}
|
||||
<DocumentFragment>
|
||||
<div
|
||||
class="render"
|
||||
>
|
||||
<Loop>
|
||||
<Text>
|
||||
Example
|
||||
</Text>
|
||||
</Loop>
|
||||
</SVG>
|
||||
</div>
|
||||
<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="{}"
|
||||
>
|
||||
Example
|
||||
</span>
|
||||
</span>
|
||||
</g>
|
||||
</svg>
|
||||
</div>
|
||||
</DocumentFragment>
|
||||
`;
|
||||
|
||||
exports[`Render types Pin 1`] = `
|
||||
<div
|
||||
className="render"
|
||||
>
|
||||
<SVG
|
||||
onReflow={[Function]}
|
||||
<DocumentFragment>
|
||||
<div
|
||||
class="render"
|
||||
>
|
||||
<Pin />
|
||||
</SVG>
|
||||
</div>
|
||||
<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="Pin"
|
||||
data-props="{}"
|
||||
/>
|
||||
</g>
|
||||
</svg>
|
||||
</div>
|
||||
</DocumentFragment>
|
||||
`;
|
||||
|
||||
exports[`Render types Text 1`] = `
|
||||
<div
|
||||
className="render"
|
||||
>
|
||||
<SVG
|
||||
onReflow={[Function]}
|
||||
<DocumentFragment>
|
||||
<div
|
||||
class="render"
|
||||
>
|
||||
<Text>
|
||||
Example
|
||||
</Text>
|
||||
</SVG>
|
||||
</div>
|
||||
<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="{}"
|
||||
>
|
||||
Example
|
||||
</span>
|
||||
</g>
|
||||
</svg>
|
||||
</div>
|
||||
</DocumentFragment>
|
||||
`;
|
||||
|
||||
exports[`Render types VerticalLayout 1`] = `
|
||||
<div
|
||||
className="render"
|
||||
>
|
||||
<SVG
|
||||
onReflow={[Function]}
|
||||
<DocumentFragment>
|
||||
<div
|
||||
class="render"
|
||||
>
|
||||
<VerticalLayout
|
||||
spacing={10}
|
||||
withConnectors={false}
|
||||
<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#"
|
||||
>
|
||||
<Text>
|
||||
Example
|
||||
</Text>
|
||||
<Text>
|
||||
Another Example
|
||||
</Text>
|
||||
</VerticalLayout>
|
||||
</SVG>
|
||||
</div>
|
||||
<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="{}"
|
||||
>
|
||||
Example
|
||||
</span>
|
||||
<span
|
||||
data-component="Text"
|
||||
data-props="{}"
|
||||
>
|
||||
Another Example
|
||||
</span>
|
||||
</span>
|
||||
</g>
|
||||
</svg>
|
||||
</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 { render } from 'react-testing-library';
|
||||
|
||||
import Render from 'components/Render';
|
||||
|
||||
const testType = (name, item) => {
|
||||
test.skip(name, () => {
|
||||
test(name, () => {
|
||||
const data = { type: 'SVG', children: [item] };
|
||||
const component = shallow(
|
||||
const { asFragment } = render(
|
||||
<Render data={ data } onRender={ jest.fn() }/>
|
||||
);
|
||||
expect(component).toMatchSnapshot();
|
||||
expect(asFragment()).toMatchSnapshot();
|
||||
});
|
||||
};
|
||||
|
||||
describe('Render', () => {
|
||||
test.skip('debugging', () => {
|
||||
test('debugging', () => {
|
||||
const data = {
|
||||
type: 'SVG',
|
||||
children: [
|
||||
@ -34,10 +47,10 @@ describe('Render', () => {
|
||||
}
|
||||
]
|
||||
};
|
||||
const component = shallow(
|
||||
const { asFragment } = render(
|
||||
<Render data={ data } onRender={ jest.fn() }/>
|
||||
);
|
||||
expect(component).toMatchSnapshot();
|
||||
expect(asFragment()).toMatchSnapshot();
|
||||
});
|
||||
|
||||
describe('types', () => {
|
||||
|
||||
Loading…
Reference in New Issue
Block a user