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

Tests for Box rendering component

Browse Source
This commit is contained in:
Jeff Avallone 2019-02-01 18:06:29 -05:00
parent 5a782b439e
commit 59ebe433b6
2 changed files with 514 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

329
src/rendering/Box/__snapshots__/test.js.snap Normal file
View File

@ -0,0 +1,329 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`Box layout 1`] = `
Object {
"box": Object {
"axisX1": 0,
"axisX2": 110,
"axisY": 30,
"height": 60,
"width": 110,
},
"children": Array [
Object {
"box": Object {
"axisX1": 5,
"axisX2": 95,
"axisY": 10,
"height": 50,
"width": 100,
},
},
],
"props": Object {
"contentTransform": "translate(5 5)",
"height": 60,
"labelTransform": "translate(0 NaN)",
"rectTransform": "translate(0 0)",
"width": 110,
},
}
`;
exports[`Box layout using axis anchors from child 1`] = `
Object {
"box": Object {
"axisX1": 10,
"axisX2": 100,
"axisY": 15,
"height": 60,
"width": 110,
},
"children": Array [
Object {
"box": Object {
"axisX1": 5,
"axisX2": 95,
"axisY": 10,
"height": 50,
"width": 100,
},
},
],
"props": Object {
"contentTransform": "translate(5 5)",
"height": 60,
"labelTransform": "translate(0 NaN)",
"rectTransform": "translate(0 0)",
"useAnchors": true,
"width": 110,
},
}
`;
exports[`Box layout with a label and using axis anchors from child 1`] = `
Object {
"box": Object {
"axisX1": 55,
"axisX2": 145,
"axisY": 25,
"height": 70,
"width": 200,
},
"children": Array [
Object {
"box": Object {
"axisX1": 5,
"axisX2": 95,
"axisY": 10,
"height": 50,
"width": 100,
},
},
],
"props": Object {
"contentTransform": "translate(50 15)",
"height": 60,
"label": "Test label",
"labelTransform": "translate(0 10)",
"rectTransform": "translate(0 10)",
"useAnchors": true,
"width": 200,
},
}
`;
exports[`Box layout with a label that is narrower than the box 1`] = `
Object {
"box": Object {
"axisX1": 0,
"axisX2": 110,
"axisY": 40,
"height": 70,
"width": 110,
},
"children": Array [
Object {
"box": Object {
"axisX1": 5,
"axisX2": 95,
"axisY": 10,
"height": 50,
"width": 100,
},
},
],
"props": Object {
"contentTransform": "translate(5 15)",
"height": 60,
"label": "Test label",
"labelTransform": "translate(0 10)",
"rectTransform": "translate(0 10)",
"width": 110,
},
}
`;
exports[`Box layout with a label that is wider than the box 1`] = `
Object {
"box": Object {
"axisX1": 0,
"axisX2": 200,
"axisY": 40,
"height": 70,
"width": 200,
},
"children": Array [
Object {
"box": Object {
"axisX1": 5,
"axisX2": 95,
"axisY": 10,
"height": 50,
"width": 100,
},
},
],
"props": Object {
"contentTransform": "translate(50 15)",
"height": 60,
"label": "Test label",
"labelTransform": "translate(0 10)",
"rectTransform": "translate(0 10)",
"width": 200,
},
}
`;
exports[`Box rendering 1`] = `
<Fragment>
<rect
rx={3}
ry={3}
/>
<g>
Example
</g>
</Fragment>
`;
exports[`Box rendering with a corner radius 1`] = `
<Fragment>
<rect
rx={5}
ry={5}
/>
<g>
Example
</g>
</Fragment>
`;
exports[`Box rendering with a label 1`] = `
<Fragment>
<rect
rx={3}
ry={3}
/>
<text
style={
Object {
"fontFamily": "Arial",
"fontSize": "12px",
}
}
>
Test box
</text>
<g>
Example
</g>
</Fragment>
`;
exports[`Box rendering with props from layout 1`] = `
<Fragment>
<rect
height={50}
rx={3}
ry={3}
style={
Object {
"fill": "#dae9e5",
"stroke": "#6b6659",
"strokeWidth": "1px",
}
}
transform="RECT TRANSFORM"
width={100}
/>
<text
style={
Object {
"fontFamily": "Arial",
"fontSize": "12px",
}
}
transform="LABEL TRANSFORM"
>
Test box
</text>
<g
transform="CONTENT TRANSFORM"
>
Example
</g>
</Fragment>
`;
exports[`Box themes rendering a "anchor" Box 1`] = `
<Fragment>
<rect
rx={3}
ry={3}
style={
Object {
"fill": "#6b6659",
}
}
/>
<g>
Example
</g>
</Fragment>
`;
exports[`Box themes rendering a "capture" Box 1`] = `
<Fragment>
<rect
rx={3}
ry={3}
style={
Object {
"fillOpacity": 0,
"stroke": "#908c83",
"strokeDasharray": "6,2",
"strokeWidth": "2px",
}
}
/>
<g>
Example
</g>
</Fragment>
`;
exports[`Box themes rendering a "charClass" Box 1`] = `
<Fragment>
<rect
rx={3}
ry={3}
style={
Object {
"fill": "#cbcbba",
}
}
/>
<g>
Example
</g>
</Fragment>
`;
exports[`Box themes rendering a "escape" Box 1`] = `
<Fragment>
<rect
rx={3}
ry={3}
style={
Object {
"fill": "#bada55",
"stroke": "#6b6659",
"strokeWidth": "1px",
}
}
/>
<g>
Example
</g>
</Fragment>
`;
exports[`Box themes rendering a "literal" Box 1`] = `
<Fragment>
<rect
rx={3}
ry={3}
style={
Object {
"fill": "#dae9e5",
"stroke": "#6b6659",
"strokeWidth": "1px",
}
}
/>
<g>
Example
</g>
</Fragment>
`;

185
src/rendering/Box/test.js Normal file
View File

@ -0,0 +1,185 @@
jest.mock('rendering/getbbox', () => jest.fn());
import React from 'react';
import { shallow } from 'enzyme';
import getBBox from 'rendering/getbbox';
import Box, { layout } from 'rendering/Box';
describe('Box', () => {
test('rendering', () => {
const component = shallow(
<Box>Example</Box>
);
expect(component).toMatchSnapshot();
});
test('rendering with a corner radius', () => {
const component = shallow(
<Box radius={ 5 }>Example</Box>
);
expect(component).toMatchSnapshot();
});
test('rendering with a label', () => {
const component = shallow(
<Box label="Test box">Example</Box>
);
expect(component).toMatchSnapshot();
});
test('rendering with props from layout', () => {
const props = {
theme: 'literal',
label: 'Test box',
width: 100,
height: 50,
rectTransform: 'RECT TRANSFORM',
labelTransform: 'LABEL TRANSFORM',
contentTransform: 'CONTENT TRANSFORM'
};
const component = shallow(
<Box { ...props }>Example</Box>
);
expect(component).toMatchSnapshot();
});
describe('themes', () => {
test('rendering a "literal" Box', () => {
const component = shallow(
<Box theme="literal">Example</Box>
);
expect(component).toMatchSnapshot();
});
test('rendering a "escape" Box', () => {
const component = shallow(
<Box theme="escape">Example</Box>
);
expect(component).toMatchSnapshot();
});
test('rendering a "charClass" Box', () => {
const component = shallow(
<Box theme="charClass">Example</Box>
);
expect(component).toMatchSnapshot();
});
test('rendering a "capture" Box', () => {
const component = shallow(
<Box theme="capture">Example</Box>
);
expect(component).toMatchSnapshot();
});
test('rendering a "anchor" Box', () => {
const component = shallow(
<Box theme="anchor">Example</Box>
);
expect(component).toMatchSnapshot();
});
});
test('layout', () => {
const processed = layout({
children: [
{
box: {
width: 100,
height: 50,
axisY: 10,
axisX1: 5,
axisX2: 95
}
}
]
});
expect(processed).toMatchSnapshot();
});
test('layout using axis anchors from child', () => {
const processed = layout({
props: {
useAnchors: true
},
children: [
{
box: {
width: 100,
height: 50,
axisY: 10,
axisX1: 5,
axisX2: 95
}
}
]
});
expect(processed).toMatchSnapshot();
});
test('layout with a label that is narrower than the box', () => {
getBBox.mockReturnValue({ y: -10, width: 50, height: 10 });
const processed = layout({
props: {
label: 'Test label'
},
children: [
{
box: {
width: 100,
height: 50,
axisY: 10,
axisX1: 5,
axisX2: 95
}
}
]
});
expect(processed).toMatchSnapshot();
});
test('layout with a label that is wider than the box', () => {
getBBox.mockReturnValue({ y: -10, width: 200, height: 10 });
const processed = layout({
props: {
label: 'Test label'
},
children: [
{
box: {
width: 100,
height: 50,
axisY: 10,
axisX1: 5,
axisX2: 95
}
}
]
});
expect(processed).toMatchSnapshot();
});
test('layout with a label and using axis anchors from child', () => {
getBBox.mockReturnValue({ y: -10, width: 200, height: 10 });
const processed = layout({
props: {
label: 'Test label',
useAnchors: true
},
children: [
{
box: {
width: 100,
height: 50,
axisY: 10,
axisX1: 5,
axisX2: 95
}
}
]
});
expect(processed).toMatchSnapshot();
});
});