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

Updating Box rendering to use react-testing-library

This commit is contained in:
Jeff Avallone 2019-03-24 14:44:54 -04:00
parent 84fd88f1d0
commit e449eade9d
2 changed files with 167 additions and 174 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

153
src/rendering/Box/__snapshots__/test.js.snap
View File

@ -156,74 +156,65 @@ Object {
`; `;
exports[`Box rendering 1`] = ` exports[`Box rendering 1`] = `
<Fragment> <DocumentFragment>
<svg>
<rect <rect
rx={3} rx="3"
ry={3} ry="3"
/> />
<g> <g>
Example Example
</g> </g>
</Fragment> </svg>
</DocumentFragment>
`; `;
exports[`Box rendering with a corner radius 1`] = ` exports[`Box rendering with a corner radius 1`] = `
<Fragment> <DocumentFragment>
<svg>
<rect <rect
rx={5} rx="5"
ry={5} ry="5"
/> />
<g> <g>
Example Example
</g> </g>
</Fragment> </svg>
</DocumentFragment>
`; `;
exports[`Box rendering with a label 1`] = ` exports[`Box rendering with a label 1`] = `
<Fragment> <DocumentFragment>
<svg>
<rect <rect
rx={3} rx="3"
ry={3} ry="3"
/> />
<text <text
style={ style="font-size: 12px; font-family: Arial;"
Object {
"fontFamily": "Arial",
"fontSize": "12px",
}
}
> >
Test box Test box
</text> </text>
<g> <g>
Example Example
</g> </g>
</Fragment> </svg>
</DocumentFragment>
`; `;
exports[`Box rendering with props from layout 1`] = ` exports[`Box rendering with props from layout 1`] = `
<Fragment> <DocumentFragment>
<svg>
<rect <rect
height={50} height="50"
rx={3} rx="3"
ry={3} ry="3"
style={ style="fill: #dae9e5; stroke-width: 1px; stroke: #6b6659;"
Object {
"fill": "#dae9e5",
"stroke": "#6b6659",
"strokeWidth": "1px",
}
}
transform="RECT TRANSFORM" transform="RECT TRANSFORM"
width={100} width="100"
/> />
<text <text
style={ style="font-size: 12px; font-family: Arial;"
Object {
"fontFamily": "Arial",
"fontSize": "12px",
}
}
transform="LABEL TRANSFORM" transform="LABEL TRANSFORM"
> >
Test box Test box
@ -233,97 +224,81 @@ exports[`Box rendering with props from layout 1`] = `
> >
Example Example
</g> </g>
</Fragment> </svg>
</DocumentFragment>
`; `;
exports[`Box themes rendering a "anchor" Box 1`] = ` exports[`Box themes rendering a "anchor" Box 1`] = `
<Fragment> <DocumentFragment>
<svg>
<rect <rect
rx={3} rx="3"
ry={3} ry="3"
style={ style="fill: #6b6659;"
Object {
"fill": "#6b6659",
}
}
/> />
<g> <g>
Example Example
</g> </g>
</Fragment> </svg>
</DocumentFragment>
`; `;
exports[`Box themes rendering a "capture" Box 1`] = ` exports[`Box themes rendering a "capture" Box 1`] = `
<Fragment> <DocumentFragment>
<svg>
<rect <rect
rx={3} rx="3"
ry={3} ry="3"
style={ style="fill-opacity: 0; stroke-width: 2px; stroke: #908c83; stroke-dasharray: 6,2;"
Object {
"fillOpacity": 0,
"stroke": "#908c83",
"strokeDasharray": "6,2",
"strokeWidth": "2px",
}
}
/> />
<g> <g>
Example Example
</g> </g>
</Fragment> </svg>
</DocumentFragment>
`; `;
exports[`Box themes rendering a "charClass" Box 1`] = ` exports[`Box themes rendering a "charClass" Box 1`] = `
<Fragment> <DocumentFragment>
<svg>
<rect <rect
rx={3} rx="3"
ry={3} ry="3"
style={ style="fill: #cbcbba;"
Object {
"fill": "#cbcbba",
}
}
/> />
<g> <g>
Example Example
</g> </g>
</Fragment> </svg>
</DocumentFragment>
`; `;
exports[`Box themes rendering a "escape" Box 1`] = ` exports[`Box themes rendering a "escape" Box 1`] = `
<Fragment> <DocumentFragment>
<svg>
<rect <rect
rx={3} rx="3"
ry={3} ry="3"
style={ style="fill: #bada55; stroke-width: 1px; stroke: #6b6659;"
Object {
"fill": "#bada55",
"stroke": "#6b6659",
"strokeWidth": "1px",
}
}
/> />
<g> <g>
Example Example
</g> </g>
</Fragment> </svg>
</DocumentFragment>
`; `;
exports[`Box themes rendering a "literal" Box 1`] = ` exports[`Box themes rendering a "literal" Box 1`] = `
<Fragment> <DocumentFragment>
<svg>
<rect <rect
rx={3} rx="3"
ry={3} ry="3"
style={ style="fill: #dae9e5; stroke-width: 1px; stroke: #6b6659;"
Object {
"fill": "#dae9e5",
"stroke": "#6b6659",
"strokeWidth": "1px",
}
}
/> />
<g> <g>
Example Example
</g> </g>
</Fragment> </svg>
</DocumentFragment>
`; `;

56
src/rendering/Box/test.js
View File

@ -1,7 +1,7 @@
jest.mock('rendering/getbbox', () => jest.fn()); jest.mock('rendering/getbbox', () => jest.fn());
import React from 'react'; import React from 'react';
import { shallow } from 'enzyme'; import { render } from 'react-testing-library';
import getBBox from 'rendering/getbbox'; import getBBox from 'rendering/getbbox';
@ -9,24 +9,30 @@ import Box, { layout } from 'rendering/Box';
describe('Box', () => { describe('Box', () => {
test('rendering', () => { test('rendering', () => {
const component = shallow( const { asFragment } = render(
<svg>
<Box>Example</Box> <Box>Example</Box>
</svg>
); );
expect(component).toMatchSnapshot(); expect(asFragment()).toMatchSnapshot();
}); });
test('rendering with a corner radius', () => { test('rendering with a corner radius', () => {
const component = shallow( const { asFragment } = render(
<svg>
<Box radius={ 5 }>Example</Box> <Box radius={ 5 }>Example</Box>
</svg>
); );
expect(component).toMatchSnapshot(); expect(asFragment()).toMatchSnapshot();
}); });
test('rendering with a label', () => { test('rendering with a label', () => {
const component = shallow( const { asFragment } = render(
<svg>
<Box label="Test box">Example</Box> <Box label="Test box">Example</Box>
</svg>
); );
expect(component).toMatchSnapshot(); expect(asFragment()).toMatchSnapshot();
}); });
test('rendering with props from layout', () => { test('rendering with props from layout', () => {
@ -39,46 +45,58 @@ describe('Box', () => {
labelTransform: 'LABEL TRANSFORM', labelTransform: 'LABEL TRANSFORM',
contentTransform: 'CONTENT TRANSFORM' contentTransform: 'CONTENT TRANSFORM'
}; };
const component = shallow( const { asFragment } = render(
<svg>
<Box { ...props }>Example</Box> <Box { ...props }>Example</Box>
</svg>
); );
expect(component).toMatchSnapshot(); expect(asFragment()).toMatchSnapshot();
}); });
describe('themes', () => { describe('themes', () => {
test('rendering a "literal" Box', () => { test('rendering a "literal" Box', () => {
const component = shallow( const { asFragment } = render(
<svg>
<Box theme="literal">Example</Box> <Box theme="literal">Example</Box>
</svg>
); );
expect(component).toMatchSnapshot(); expect(asFragment()).toMatchSnapshot();
}); });
test('rendering a "escape" Box', () => { test('rendering a "escape" Box', () => {
const component = shallow( const { asFragment } = render(
<svg>
<Box theme="escape">Example</Box> <Box theme="escape">Example</Box>
</svg>
); );
expect(component).toMatchSnapshot(); expect(asFragment()).toMatchSnapshot();
}); });
test('rendering a "charClass" Box', () => { test('rendering a "charClass" Box', () => {
const component = shallow( const { asFragment } = render(
<svg>
<Box theme="charClass">Example</Box> <Box theme="charClass">Example</Box>
</svg>
); );
expect(component).toMatchSnapshot(); expect(asFragment()).toMatchSnapshot();
}); });
test('rendering a "capture" Box', () => { test('rendering a "capture" Box', () => {
const component = shallow( const { asFragment } = render(
<svg>
<Box theme="capture">Example</Box> <Box theme="capture">Example</Box>
</svg>
); );
expect(component).toMatchSnapshot(); expect(asFragment()).toMatchSnapshot();
}); });
test('rendering a "anchor" Box', () => { test('rendering a "anchor" Box', () => {
const component = shallow( const { asFragment } = render(
<svg>
<Box theme="anchor">Example</Box> <Box theme="anchor">Example</Box>
</svg>
); );
expect(component).toMatchSnapshot(); expect(asFragment()).toMatchSnapshot();
}); });
}); });