Updating Box rendering to use react-testing-library
This commit is contained in:
parent
84fd88f1d0
commit
e449eade9d
@ -156,174 +156,149 @@ Object {
|
||||
`;
|
||||
|
||||
exports[`Box rendering 1`] = `
|
||||
<Fragment>
|
||||
<rect
|
||||
rx={3}
|
||||
ry={3}
|
||||
/>
|
||||
<g>
|
||||
Example
|
||||
</g>
|
||||
</Fragment>
|
||||
<DocumentFragment>
|
||||
<svg>
|
||||
<rect
|
||||
rx="3"
|
||||
ry="3"
|
||||
/>
|
||||
<g>
|
||||
Example
|
||||
</g>
|
||||
</svg>
|
||||
</DocumentFragment>
|
||||
`;
|
||||
|
||||
exports[`Box rendering with a corner radius 1`] = `
|
||||
<Fragment>
|
||||
<rect
|
||||
rx={5}
|
||||
ry={5}
|
||||
/>
|
||||
<g>
|
||||
Example
|
||||
</g>
|
||||
</Fragment>
|
||||
<DocumentFragment>
|
||||
<svg>
|
||||
<rect
|
||||
rx="5"
|
||||
ry="5"
|
||||
/>
|
||||
<g>
|
||||
Example
|
||||
</g>
|
||||
</svg>
|
||||
</DocumentFragment>
|
||||
`;
|
||||
|
||||
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>
|
||||
<DocumentFragment>
|
||||
<svg>
|
||||
<rect
|
||||
rx="3"
|
||||
ry="3"
|
||||
/>
|
||||
<text
|
||||
style="font-size: 12px; font-family: Arial;"
|
||||
>
|
||||
Test box
|
||||
</text>
|
||||
<g>
|
||||
Example
|
||||
</g>
|
||||
</svg>
|
||||
</DocumentFragment>
|
||||
`;
|
||||
|
||||
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>
|
||||
<DocumentFragment>
|
||||
<svg>
|
||||
<rect
|
||||
height="50"
|
||||
rx="3"
|
||||
ry="3"
|
||||
style="fill: #dae9e5; stroke-width: 1px; stroke: #6b6659;"
|
||||
transform="RECT TRANSFORM"
|
||||
width="100"
|
||||
/>
|
||||
<text
|
||||
style="font-size: 12px; font-family: Arial;"
|
||||
transform="LABEL TRANSFORM"
|
||||
>
|
||||
Test box
|
||||
</text>
|
||||
<g
|
||||
transform="CONTENT TRANSFORM"
|
||||
>
|
||||
Example
|
||||
</g>
|
||||
</svg>
|
||||
</DocumentFragment>
|
||||
`;
|
||||
|
||||
exports[`Box themes rendering a "anchor" Box 1`] = `
|
||||
<Fragment>
|
||||
<rect
|
||||
rx={3}
|
||||
ry={3}
|
||||
style={
|
||||
Object {
|
||||
"fill": "#6b6659",
|
||||
}
|
||||
}
|
||||
/>
|
||||
<g>
|
||||
Example
|
||||
</g>
|
||||
</Fragment>
|
||||
<DocumentFragment>
|
||||
<svg>
|
||||
<rect
|
||||
rx="3"
|
||||
ry="3"
|
||||
style="fill: #6b6659;"
|
||||
/>
|
||||
<g>
|
||||
Example
|
||||
</g>
|
||||
</svg>
|
||||
</DocumentFragment>
|
||||
`;
|
||||
|
||||
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>
|
||||
<DocumentFragment>
|
||||
<svg>
|
||||
<rect
|
||||
rx="3"
|
||||
ry="3"
|
||||
style="fill-opacity: 0; stroke-width: 2px; stroke: #908c83; stroke-dasharray: 6,2;"
|
||||
/>
|
||||
<g>
|
||||
Example
|
||||
</g>
|
||||
</svg>
|
||||
</DocumentFragment>
|
||||
`;
|
||||
|
||||
exports[`Box themes rendering a "charClass" Box 1`] = `
|
||||
<Fragment>
|
||||
<rect
|
||||
rx={3}
|
||||
ry={3}
|
||||
style={
|
||||
Object {
|
||||
"fill": "#cbcbba",
|
||||
}
|
||||
}
|
||||
/>
|
||||
<g>
|
||||
Example
|
||||
</g>
|
||||
</Fragment>
|
||||
<DocumentFragment>
|
||||
<svg>
|
||||
<rect
|
||||
rx="3"
|
||||
ry="3"
|
||||
style="fill: #cbcbba;"
|
||||
/>
|
||||
<g>
|
||||
Example
|
||||
</g>
|
||||
</svg>
|
||||
</DocumentFragment>
|
||||
`;
|
||||
|
||||
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>
|
||||
<DocumentFragment>
|
||||
<svg>
|
||||
<rect
|
||||
rx="3"
|
||||
ry="3"
|
||||
style="fill: #bada55; stroke-width: 1px; stroke: #6b6659;"
|
||||
/>
|
||||
<g>
|
||||
Example
|
||||
</g>
|
||||
</svg>
|
||||
</DocumentFragment>
|
||||
`;
|
||||
|
||||
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>
|
||||
<DocumentFragment>
|
||||
<svg>
|
||||
<rect
|
||||
rx="3"
|
||||
ry="3"
|
||||
style="fill: #dae9e5; stroke-width: 1px; stroke: #6b6659;"
|
||||
/>
|
||||
<g>
|
||||
Example
|
||||
</g>
|
||||
</svg>
|
||||
</DocumentFragment>
|
||||
`;
|
||||
|
@ -1,7 +1,7 @@
|
||||
jest.mock('rendering/getbbox', () => jest.fn());
|
||||
|
||||
import React from 'react';
|
||||
import { shallow } from 'enzyme';
|
||||
import { render } from 'react-testing-library';
|
||||
|
||||
import getBBox from 'rendering/getbbox';
|
||||
|
||||
@ -9,24 +9,30 @@ import Box, { layout } from 'rendering/Box';
|
||||
|
||||
describe('Box', () => {
|
||||
test('rendering', () => {
|
||||
const component = shallow(
|
||||
<Box>Example</Box>
|
||||
const { asFragment } = render(
|
||||
<svg>
|
||||
<Box>Example</Box>
|
||||
</svg>
|
||||
);
|
||||
expect(component).toMatchSnapshot();
|
||||
expect(asFragment()).toMatchSnapshot();
|
||||
});
|
||||
|
||||
test('rendering with a corner radius', () => {
|
||||
const component = shallow(
|
||||
<Box radius={ 5 }>Example</Box>
|
||||
const { asFragment } = render(
|
||||
<svg>
|
||||
<Box radius={ 5 }>Example</Box>
|
||||
</svg>
|
||||
);
|
||||
expect(component).toMatchSnapshot();
|
||||
expect(asFragment()).toMatchSnapshot();
|
||||
});
|
||||
|
||||
test('rendering with a label', () => {
|
||||
const component = shallow(
|
||||
<Box label="Test box">Example</Box>
|
||||
const { asFragment } = render(
|
||||
<svg>
|
||||
<Box label="Test box">Example</Box>
|
||||
</svg>
|
||||
);
|
||||
expect(component).toMatchSnapshot();
|
||||
expect(asFragment()).toMatchSnapshot();
|
||||
});
|
||||
|
||||
test('rendering with props from layout', () => {
|
||||
@ -39,46 +45,58 @@ describe('Box', () => {
|
||||
labelTransform: 'LABEL TRANSFORM',
|
||||
contentTransform: 'CONTENT TRANSFORM'
|
||||
};
|
||||
const component = shallow(
|
||||
<Box { ...props }>Example</Box>
|
||||
const { asFragment } = render(
|
||||
<svg>
|
||||
<Box { ...props }>Example</Box>
|
||||
</svg>
|
||||
);
|
||||
expect(component).toMatchSnapshot();
|
||||
expect(asFragment()).toMatchSnapshot();
|
||||
});
|
||||
|
||||
describe('themes', () => {
|
||||
test('rendering a "literal" Box', () => {
|
||||
const component = shallow(
|
||||
<Box theme="literal">Example</Box>
|
||||
const { asFragment } = render(
|
||||
<svg>
|
||||
<Box theme="literal">Example</Box>
|
||||
</svg>
|
||||
);
|
||||
expect(component).toMatchSnapshot();
|
||||
expect(asFragment()).toMatchSnapshot();
|
||||
});
|
||||
|
||||
test('rendering a "escape" Box', () => {
|
||||
const component = shallow(
|
||||
<Box theme="escape">Example</Box>
|
||||
const { asFragment } = render(
|
||||
<svg>
|
||||
<Box theme="escape">Example</Box>
|
||||
</svg>
|
||||
);
|
||||
expect(component).toMatchSnapshot();
|
||||
expect(asFragment()).toMatchSnapshot();
|
||||
});
|
||||
|
||||
test('rendering a "charClass" Box', () => {
|
||||
const component = shallow(
|
||||
<Box theme="charClass">Example</Box>
|
||||
const { asFragment } = render(
|
||||
<svg>
|
||||
<Box theme="charClass">Example</Box>
|
||||
</svg>
|
||||
);
|
||||
expect(component).toMatchSnapshot();
|
||||
expect(asFragment()).toMatchSnapshot();
|
||||
});
|
||||
|
||||
test('rendering a "capture" Box', () => {
|
||||
const component = shallow(
|
||||
<Box theme="capture">Example</Box>
|
||||
const { asFragment } = render(
|
||||
<svg>
|
||||
<Box theme="capture">Example</Box>
|
||||
</svg>
|
||||
);
|
||||
expect(component).toMatchSnapshot();
|
||||
expect(asFragment()).toMatchSnapshot();
|
||||
});
|
||||
|
||||
test('rendering a "anchor" Box', () => {
|
||||
const component = shallow(
|
||||
<Box theme="anchor">Example</Box>
|
||||
const { asFragment } = render(
|
||||
<svg>
|
||||
<Box theme="anchor">Example</Box>
|
||||
</svg>
|
||||
);
|
||||
expect(component).toMatchSnapshot();
|
||||
expect(asFragment()).toMatchSnapshot();
|
||||
});
|
||||
});
|
||||
|
||||
|
Loading…
Reference in New Issue
Block a user