Tests for Box rendering component
This commit is contained in:
Jeff Avallone
parent
5a782b439e
commit
59ebe433b6
329
src/rendering/Box/__snapshots__/test.js.snap
Normal file
329
src/rendering/Box/__snapshots__/test.js.snap
Normal 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
185
src/rendering/Box/test.js
Normal 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();
|
||||
});
|
||||
});
|
||||
Loading…
Reference in New Issue
Block a user