root/regexper-static
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Adding tests for SVG components

Browse Source 
Jest/enzyme/jsdom is kicking out some nastly looking messages because it
doesn't recognize various SVG elements, but they appear to be harmless.
This commit is contained in:
Jeff Avallone 2018-02-17 13:04:19 -05:00
parent 19d34a4d9e
commit 6ff9145603
17 changed files with 1018 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
src/__mocks__/SVGElement.js Normal file
View File

@ -0,0 +1,15 @@
import React from 'react';
import Base from 'components/SVG/Base';
class SVGElement extends Base {
reflow() {
return this.setBBox(this.props.bbox);
}
render() {
return <text>Mock content</text>;
}
}
export default SVGElement;

53
src/components/SVG/Box.test.js Normal file
View File

@ -0,0 +1,53 @@
import React from 'react';
import { mount } from 'enzyme';
import Box from './Box';
import SVGElement from '__mocks__/SVGElement';
const originalGetBBox = window.Element.prototype.getBBox;
describe('Box', () => {
beforeEach(() => {
window.Element.prototype.getBBox = function() {
return { width: 100, height: 10 };
};
});
afterEach(() => {
window.Element.prototype.getBBox = originalGetBBox;
});
test('rendering', async () => {
const component = mount(
<Box>
<SVGElement bbox={{ width: 100, height: 100 }}/>
</Box>
);
await component.instance().doReflow();
component.update();
expect(component).toMatchSnapshot();
});
test('rendering with content anchors', async () => {
const component = mount(
<Box useAnchors>
<SVGElement bbox={{ width: 100, height: 100 }}/>
</Box>
);
await component.instance().doReflow();
component.update();
expect(component).toMatchSnapshot();
});
test('rendering with label', async () => {
const component = mount(
<Box label="Test label">
<SVGElement bbox={{ width: 100, height: 100 }}/>
</Box>
);
await component.instance().doReflow();
component.update();
expect(component).toMatchSnapshot();
});
});

4
src/components/SVG/HorizontalLayout.js
View File

@ -46,10 +46,6 @@ class HorizontalLayout extends Base {
} }
reflow() { reflow() {
if (this.children.length === 0) {
return;
}
const { spacing, withConnectors } = this.props; const { spacing, withConnectors } = this.props;
const childBoxes = this.children.map(child => child.getBBox()); const childBoxes = this.children.map(child => child.getBBox());

34
src/components/SVG/HorizontalLayout.test.js Normal file
View File

@ -0,0 +1,34 @@
import React from 'react';
import { mount } from 'enzyme';
import HorizontalLayout from './HorizontalLayout';
import SVGElement from '__mocks__/SVGElement';
describe('HorizontalLayout', () => {
test('rendering', async () => {
const component = mount(
<HorizontalLayout>
<SVGElement bbox={{ width: 100, height: 100 }}/>
<SVGElement bbox={{ width: 100, height: 100 }}/>
<SVGElement bbox={{ width: 100, height: 100 }}/>
</HorizontalLayout>
);
await component.instance().doReflow();
component.update();
expect(component).toMatchSnapshot();
});
test('rendering with connectors', async () => {
const component = mount(
<HorizontalLayout withConnectors>
<SVGElement bbox={{ width: 100, height: 100 }}/>
<SVGElement bbox={{ width: 100, height: 100 }}/>
<SVGElement bbox={{ width: 100, height: 100 }}/>
</HorizontalLayout>
);
await component.instance().doReflow();
component.update();
expect(component).toMatchSnapshot();
});
});

19
src/components/SVG/Image.test.js Normal file
View File

@ -0,0 +1,19 @@
import React from 'react';
import { mount } from 'enzyme';
import Image from './Image';
import SVGElement from '__mocks__/SVGElement';
describe('Image', () => {
test('rendering', async () => {
const component = mount(
<Image>
<SVGElement bbox={{ width: 100, height: 100 }}/>
</Image>
);
await component.instance().doReflow();
component.update();
expect(component).toMatchSnapshot();
});
});

86
src/components/SVG/Loop.test.js Normal file
View File

@ -0,0 +1,86 @@
import React from 'react';
import { mount } from 'enzyme';
import Loop from './Loop';
import SVGElement from '__mocks__/SVGElement';
const originalGetBBox = window.Element.prototype.getBBox;
describe('Loop', () => {
beforeEach(() => {
window.Element.prototype.getBBox = function() {
return { width: 100, height: 10 };
};
});
afterEach(() => {
window.Element.prototype.getBBox = originalGetBBox;
});
test('rendering', async () => {
const component = mount(
<Loop>
<SVGElement bbox={{ width: 100, height: 100 }}/>
</Loop>
);
await component.instance().doReflow();
component.update();
expect(component).toMatchSnapshot();
});
test('rendering with skip path', async () => {
const component = mount(
<Loop skip>
<SVGElement bbox={{ width: 100, height: 100 }}/>
</Loop>
);
await component.instance().doReflow();
component.update();
expect(component).toMatchSnapshot();
});
test('rendering with repeat path', async () => {
const component = mount(
<Loop repeat>
<SVGElement bbox={{ width: 100, height: 100 }}/>
</Loop>
);
await component.instance().doReflow();
component.update();
expect(component).toMatchSnapshot();
});
test('rendering with repeat path and label', async () => {
const component = mount(
<Loop repeat label="Test label">
<SVGElement bbox={{ width: 100, height: 100 }}/>
</Loop>
);
await component.instance().doReflow();
component.update();
expect(component).toMatchSnapshot();
});
test('rendering with skip and repeat paths', async () => {
const component = mount(
<Loop skip repeat>
<SVGElement bbox={{ width: 100, height: 100 }}/>
</Loop>
);
await component.instance().doReflow();
component.update();
expect(component).toMatchSnapshot();
});
test('rendering with greedy skip and repeat paths', async () => {
const component = mount(
<Loop greedy skip repeat>
<SVGElement bbox={{ width: 100, height: 100 }}/>
</Loop>
);
await component.instance().doReflow();
component.update();
expect(component).toMatchSnapshot();
});
});

15
src/components/SVG/Pin.test.js Normal file
View File

@ -0,0 +1,15 @@
import React from 'react';
import { mount } from 'enzyme';
import Pin from './Pin';
describe('Pin', () => {
test('rendering', async () => {
const component = mount(
<Pin/>
);
await component.instance().doReflow();
component.update();
expect(component).toMatchSnapshot();
});
});

36
src/components/SVG/Text.test.js Normal file
View File

@ -0,0 +1,36 @@
import React from 'react';
import { mount } from 'enzyme';
import Text from './Text';
const originalGetBBox = window.Element.prototype.getBBox;
describe('Text', () => {
beforeEach(() => {
window.Element.prototype.getBBox = function() {
return { x: 10, y: 10 };
};
});
afterEach(() => {
window.Element.prototype.getBBox = originalGetBBox;
});
test('rendering', async () => {
const component = mount(
<Text>Test content</Text>
);
await component.instance().doReflow();
component.update();
expect(component).toMatchSnapshot();
});
test('rendering with quotes', async () => {
const component = mount(
<Text quoted>Test content</Text>
);
await component.instance().doReflow();
component.update();
expect(component).toMatchSnapshot();
});
});

4
src/components/SVG/VerticalLayout.js
View File

@ -84,10 +84,6 @@ class VerticalLayout extends Base {
} }
reflow() { reflow() {
if (this.children.length === 0) {
return Promise.resolve();
}
const { spacing, withConnectors } = this.props; const { spacing, withConnectors } = this.props;
const childBoxes = this.children.map(child => child.getBBox()); const childBoxes = this.children.map(child => child.getBBox());

34
src/components/SVG/VerticalLayout.test.js Normal file
View File

@ -0,0 +1,34 @@
import React from 'react';
import { mount } from 'enzyme';
import VerticalLayout from './VerticalLayout';
import SVGElement from '__mocks__/SVGElement';
describe('VerticalLayout', () => {
test('rendering', async () => {
const component = mount(
<VerticalLayout>
<SVGElement bbox={{ width: 100, height: 100 }}/>
<SVGElement bbox={{ width: 100, height: 100 }}/>
<SVGElement bbox={{ width: 100, height: 100 }}/>
</VerticalLayout>
);
await component.instance().doReflow();
component.update();
expect(component).toMatchSnapshot();
});
test('rendering with connectors', async () => {
const component = mount(
<VerticalLayout withConnectors>
<SVGElement bbox={{ width: 100, height: 100 }}/>
<SVGElement bbox={{ width: 100, height: 100 }}/>
<SVGElement bbox={{ width: 100, height: 100 }}/>
</VerticalLayout>
);
await component.instance().doReflow();
component.update();
expect(component).toMatchSnapshot();
});
});

108
src/components/SVG/__snapshots__/Box.test.js.snap Normal file
View File

@ -0,0 +1,108 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`Box rendering 1`] = `
<Box
padding={5}
radius={3}
>
<rect
height={110}
rx={3}
ry={3}
transform="translate(0 0)"
width={110}
/>
<g
transform="translate(5 5)"
>
<SVGElement
bbox={
Object {
"height": 100,
"width": 100,
}
}
>
<text>
Mock content
</text>
</SVGElement>
</g>
</Box>
`;
exports[`Box rendering with content anchors 1`] = `
<Box
padding={5}
radius={3}
useAnchors={true}
>
<rect
height={110}
rx={3}
ry={3}
transform="translate(0 0)"
width={110}
/>
<g
transform="translate(5 5)"
>
<SVGElement
bbox={
Object {
"height": 100,
"width": 100,
}
}
>
<text>
Mock content
</text>
</SVGElement>
</g>
</Box>
`;
exports[`Box rendering with label 1`] = `
<Box
label="Test label"
padding={5}
radius={3}
>
<rect
height={110}
rx={3}
ry={3}
transform="translate(0 10)"
width={110}
/>
<text
style={
Object {
"dominantBaseline": "text-after-edge",
"fontFamily": "Arial",
"fontSize": "12px",
}
}
transform="translate(0 10)"
>
Test label
</text>
<g
transform="translate(5 15)"
>
<SVGElement
bbox={
Object {
"height": 100,
"width": 100,
}
}
>
<text>
Mock content
</text>
</SVGElement>
</g>
</Box>
`;

139
src/components/SVG/__snapshots__/HorizontalLayout.test.js.snap Normal file
View File

@ -0,0 +1,139 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`HorizontalLayout rendering 1`] = `
<HorizontalLayout
spacing={10}
withConnectors={false}
>
<path
d=""
style={
Object {
"fillOpacity": 0,
"stroke": "#000",
"strokeWidth": "2px",
}
}
/>
<g
key=".0"
transform="translate(0 0)"
>
<SVGElement
bbox={
Object {
"height": 100,
"width": 100,
}
}
>
<text>
Mock content
</text>
</SVGElement>
</g>
<g
key=".1"
transform="translate(110 0)"
>
<SVGElement
bbox={
Object {
"height": 100,
"width": 100,
}
}
>
<text>
Mock content
</text>
</SVGElement>
</g>
<g
key=".2"
transform="translate(220 0)"
>
<SVGElement
bbox={
Object {
"height": 100,
"width": 100,
}
}
>
<text>
Mock content
</text>
</SVGElement>
</g>
</HorizontalLayout>
`;
exports[`HorizontalLayout rendering with connectors 1`] = `
<HorizontalLayout
spacing={10}
withConnectors={true}
>
<path
d="M100,50H110M210,50H220"
style={
Object {
"fillOpacity": 0,
"stroke": "#000",
"strokeWidth": "2px",
}
}
/>
<g
key=".0"
transform="translate(0 0)"
>
<SVGElement
bbox={
Object {
"height": 100,
"width": 100,
}
}
>
<text>
Mock content
</text>
</SVGElement>
</g>
<g
key=".1"
transform="translate(110 0)"
>
<SVGElement
bbox={
Object {
"height": 100,
"width": 100,
}
}
>
<text>
Mock content
</text>
</SVGElement>
</g>
<g
key=".2"
transform="translate(220 0)"
>
<SVGElement
bbox={
Object {
"height": 100,
"width": 100,
}
}
>
<text>
Mock content
</text>
</SVGElement>
</g>
</HorizontalLayout>
`;

53
src/components/SVG/__snapshots__/Image.test.js.snap Normal file
View File

@ -0,0 +1,53 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`Image rendering 1`] = `
<Image
padding={10}
>
<svg
height={120}
style={
Object {
"backgroundColor": "#fff",
}
}
viewBox="0 0 120 120"
width={120}
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
dangerouslySetInnerHTML={
Object {
"__html": "<rdf:rdf>
<cc:license rdf:about=\\"http://creativecommons.org/licenses/by/3.0/\\">
<cc:permits rdf:resource=\\"http://creativecommons.org/ns#Reproduction\\"></cc:permits>
<cc:permits rdf:resource=\\"http://creativecommons.org/ns#Distribution\\"></cc:permits>
<cc:requires rdf:resource=\\"http://creativecommons.org/ns#Notice\\"></cc:requires>
<cc:requires rdf:resource=\\"http://creativecommons.org/ns#Attribution\\"></cc:requires>
<cc:permits rdf:resource=\\"http://creativecommons.org/ns#DerivativeWorks\\"></cc:permits>
</cc:license>
</rdf:rdf>",
}
}
/>
<g
transform="translate(10 10)"
>
<SVGElement
bbox={
Object {
"height": 100,
"width": 100,
}
}
>
<text>
Mock content
</text>
</SVGElement>
</g>
</svg>
</Image>
`;

213
src/components/SVG/__snapshots__/Loop.test.js.snap Normal file
View File

@ -0,0 +1,213 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`Loop rendering 1`] = `
<Loop>
<path
d=""
style={
Object {
"fillOpacity": 0,
"stroke": "#000",
"strokeWidth": "2px",
}
}
/>
<g
transform="translate(0 0)"
>
<SVGElement
bbox={
Object {
"height": 100,
"width": 100,
}
}
>
<text>
Mock content
</text>
</SVGElement>
</g>
</Loop>
`;
exports[`Loop rendering with greedy skip and repeat paths 1`] = `
<Loop
greedy={true}
repeat={true}
skip={true}
>
<path
d="M0,60q10,0 10,-10v-40q0,-10 10,-10h90q10,0 10,10v40q0,10 10,10M125,75l5,-5m-5,5l-5,-5M15,60q-10,0 -10,10v40q0,10 10,10h100q10,0 10,-10v-40q0,-10 -10,-10"
style={
Object {
"fillOpacity": 0,
"stroke": "#000",
"strokeWidth": "2px",
}
}
/>
<g
transform="translate(15 10)"
>
<SVGElement
bbox={
Object {
"height": 100,
"width": 100,
}
}
>
<text>
Mock content
</text>
</SVGElement>
</g>
</Loop>
`;
exports[`Loop rendering with repeat path 1`] = `
<Loop
repeat={true}
>
<path
d="M10,50q-10,0 -10,10v40q0,10 10,10h100q10,0 10,-10v-40q0,-10 -10,-10"
style={
Object {
"fillOpacity": 0,
"stroke": "#000",
"strokeWidth": "2px",
}
}
/>
<g
transform="translate(10 0)"
>
<SVGElement
bbox={
Object {
"height": 100,
"width": 100,
}
}
>
<text>
Mock content
</text>
</SVGElement>
</g>
</Loop>
`;
exports[`Loop rendering with repeat path and label 1`] = `
<Loop
label="Test label"
repeat={true}
>
<path
d="M10,50q-10,0 -10,10v40q0,10 10,10h100q10,0 10,-10v-40q0,-10 -10,-10"
style={
Object {
"fillOpacity": 0,
"stroke": "#000",
"strokeWidth": "2px",
}
}
/>
<text
style={
Object {
"dominantBaseline": "text-after-edge",
"fontFamily": "Arial",
"fontSize": "12px",
}
}
transform="translate(10 122)"
>
Test label
</text>
<g
transform="translate(10 0)"
>
<SVGElement
bbox={
Object {
"height": 100,
"width": 100,
}
}
>
<text>
Mock content
</text>
</SVGElement>
</g>
</Loop>
`;
exports[`Loop rendering with skip and repeat paths 1`] = `
<Loop
repeat={true}
skip={true}
>
<path
d="M10,45l5,5m-5,-5l-5,5M0,60q10,0 10,-10v-40q0,-10 10,-10h90q10,0 10,10v40q0,10 10,10M15,60q-10,0 -10,10v40q0,10 10,10h100q10,0 10,-10v-40q0,-10 -10,-10"
style={
Object {
"fillOpacity": 0,
"stroke": "#000",
"strokeWidth": "2px",
}
}
/>
<g
transform="translate(15 10)"
>
<SVGElement
bbox={
Object {
"height": 100,
"width": 100,
}
}
>
<text>
Mock content
</text>
</SVGElement>
</g>
</Loop>
`;
exports[`Loop rendering with skip path 1`] = `
<Loop
skip={true}
>
<path
d="M10,45l5,5m-5,-5l-5,5M0,60q10,0 10,-10v-40q0,-10 10,-10h90q10,0 10,10v40q0,10 10,10"
style={
Object {
"fillOpacity": 0,
"stroke": "#000",
"strokeWidth": "2px",
}
}
/>
<g
transform="translate(15 10)"
>
<SVGElement
bbox={
Object {
"height": 100,
"width": 100,
}
}
>
<text>
Mock content
</text>
</SVGElement>
</g>
</Loop>
`;

19
src/components/SVG/__snapshots__/Pin.test.js.snap Normal file
View File

@ -0,0 +1,19 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`Pin rendering 1`] = `
<Pin
radius={5}
>
<circle
r={5}
style={
Object {
"fill": "#6b6659",
"stroke": "#000",
"strokeWidth": "2px",
}
}
transform="translate(5 5)"
/>
</Pin>
`;

55
src/components/SVG/__snapshots__/Text.test.js.snap Normal file
View File

@ -0,0 +1,55 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`Text rendering 1`] = `
<Text>
<text
style={
Object {
"fontFamily": "Arial",
"fontSize": "16px",
}
}
transform="translate(-10 -10)"
>
Test content
</text>
</Text>
`;
exports[`Text rendering with quotes 1`] = `
<Text
quoted={true}
>
<text
style={
Object {
"fontFamily": "Arial",
"fontSize": "16px",
}
}
transform="translate(-10 -10)"
>
<tspan
style={
Object {
"fill": "#908c83",
}
}
>
“
</tspan>
<tspan>
Test content
</tspan>
<tspan
style={
Object {
"fill": "#908c83",
}
}
>
”
</tspan>
</text>
</Text>
`;

139
src/components/SVG/__snapshots__/VerticalLayout.test.js.snap Normal file
View File

@ -0,0 +1,139 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`VerticalLayout rendering 1`] = `
<VerticalLayout
spacing={10}
withConnectors={false}
>
<path
d=""
style={
Object {
"fillOpacity": 0,
"stroke": "#000",
"strokeWidth": "2px",
}
}
/>
<g
key=".0"
transform="translate(0 0)"
>
<SVGElement
bbox={
Object {
"height": 100,
"width": 100,
}
}
>
<text>
Mock content
</text>
</SVGElement>
</g>
<g
key=".1"
transform="translate(0 110)"
>
<SVGElement
bbox={
Object {
"height": 100,
"width": 100,
}
}
>
<text>
Mock content
</text>
</SVGElement>
</g>
<g
key=".2"
transform="translate(0 220)"
>
<SVGElement
bbox={
Object {
"height": 100,
"width": 100,
}
}
>
<text>
Mock content
</text>
</SVGElement>
</g>
</VerticalLayout>
`;
exports[`VerticalLayout rendering with connectors 1`] = `
<VerticalLayout
spacing={10}
withConnectors={true}
>
<path
d="M10,60q0,-10 10,-10H20M130,60q0,-10 -10,-10H120M0,160c15,0 10,0 20,0H20M140,160c-15,0 -10,0 -20,0H120M10,260q0,10 10,10H20M130,260q0,10 -10,10H120M0,160q10,0 10,-10V60M140,160q-10,0 -10,-10V60M0,160q10,0 10,10V260M140,160q-10,0 -10,10V260"
style={
Object {
"fillOpacity": 0,
"stroke": "#000",
"strokeWidth": "2px",
}
}
/>
<g
key=".0"
transform="translate(20 0)"
>
<SVGElement
bbox={
Object {
"height": 100,
"width": 100,
}
}
>
<text>
Mock content
</text>
</SVGElement>
</g>
<g
key=".1"
transform="translate(20 110)"
>
<SVGElement
bbox={
Object {
"height": 100,
"width": 100,
}
}
>
<text>
Mock content
</text>
</SVGElement>
</g>
<g
key=".2"
transform="translate(20 220)"
>
<SVGElement
bbox={
Object {
"height": 100,
"width": 100,
}
}
>
<text>
Mock content
</text>
</SVGElement>
</g>
</VerticalLayout>
`;