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

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

@ -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>
`;

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

@ -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();
});
});