Adding tests for SVG components
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:
parent
19d34a4d9e
commit
6ff9145603
15
src/__mocks__/SVGElement.js
Normal file
15
src/__mocks__/SVGElement.js
Normal 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
53
src/components/SVG/Box.test.js
Normal 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();
|
||||
});
|
||||
});
|
@ -46,10 +46,6 @@ class HorizontalLayout extends Base {
|
||||
}
|
||||
|
||||
reflow() {
|
||||
if (this.children.length === 0) {
|
||||
return;
|
||||
}
|
||||
|
||||
const { spacing, withConnectors } = this.props;
|
||||
|
||||
const childBoxes = this.children.map(child => child.getBBox());
|
||||
|
34
src/components/SVG/HorizontalLayout.test.js
Normal file
34
src/components/SVG/HorizontalLayout.test.js
Normal 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
19
src/components/SVG/Image.test.js
Normal 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
86
src/components/SVG/Loop.test.js
Normal 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
15
src/components/SVG/Pin.test.js
Normal 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
36
src/components/SVG/Text.test.js
Normal 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();
|
||||
});
|
||||
});
|
@ -84,10 +84,6 @@ class VerticalLayout extends Base {
|
||||
}
|
||||
|
||||
reflow() {
|
||||
if (this.children.length === 0) {
|
||||
return Promise.resolve();
|
||||
}
|
||||
|
||||
const { spacing, withConnectors } = this.props;
|
||||
|
||||
const childBoxes = this.children.map(child => child.getBBox());
|
||||
|
34
src/components/SVG/VerticalLayout.test.js
Normal file
34
src/components/SVG/VerticalLayout.test.js
Normal 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
108
src/components/SVG/__snapshots__/Box.test.js.snap
Normal 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
139
src/components/SVG/__snapshots__/HorizontalLayout.test.js.snap
Normal 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
53
src/components/SVG/__snapshots__/Image.test.js.snap
Normal 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
213
src/components/SVG/__snapshots__/Loop.test.js.snap
Normal 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
19
src/components/SVG/__snapshots__/Pin.test.js.snap
Normal 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
55
src/components/SVG/__snapshots__/Text.test.js.snap
Normal 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
139
src/components/SVG/__snapshots__/VerticalLayout.test.js.snap
Normal 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>
|
||||
`;
|
Loading…
Reference in New Issue
Block a user