Updating Box rendering to use react-testing-library
This commit is contained in:
Jeff Avallone
parent
84fd88f1d0
commit
e449eade9d
|
|
@ -156,174 +156,149 @@ Object {
|
||||||
`;
|
`;
|
||||||
|
|
||||||
exports[`Box rendering 1`] = `
|
exports[`Box rendering 1`] = `
|
||||||
<Fragment>
|
<DocumentFragment>
|
||||||
<rect
|
<svg>
|
||||||
rx={3}
|
<rect
|
||||||
ry={3}
|
rx="3"
|
||||||
/>
|
ry="3"
|
||||||
<g>
|
/>
|
||||||
Example
|
<g>
|
||||||
</g>
|
Example
|
||||||
</Fragment>
|
</g>
|
||||||
|
</svg>
|
||||||
|
</DocumentFragment>
|
||||||
`;
|
`;
|
||||||
|
|
||||||
exports[`Box rendering with a corner radius 1`] = `
|
exports[`Box rendering with a corner radius 1`] = `
|
||||||
<Fragment>
|
<DocumentFragment>
|
||||||
<rect
|
<svg>
|
||||||
rx={5}
|
<rect
|
||||||
ry={5}
|
rx="5"
|
||||||
/>
|
ry="5"
|
||||||
<g>
|
/>
|
||||||
Example
|
<g>
|
||||||
</g>
|
Example
|
||||||
</Fragment>
|
</g>
|
||||||
|
</svg>
|
||||||
|
</DocumentFragment>
|
||||||
`;
|
`;
|
||||||
|
|
||||||
exports[`Box rendering with a label 1`] = `
|
exports[`Box rendering with a label 1`] = `
|
||||||
<Fragment>
|
<DocumentFragment>
|
||||||
<rect
|
<svg>
|
||||||
rx={3}
|
<rect
|
||||||
ry={3}
|
rx="3"
|
||||||
/>
|
ry="3"
|
||||||
<text
|
/>
|
||||||
style={
|
<text
|
||||||
Object {
|
style="font-size: 12px; font-family: Arial;"
|
||||||
"fontFamily": "Arial",
|
>
|
||||||
"fontSize": "12px",
|
Test box
|
||||||
}
|
</text>
|
||||||
}
|
<g>
|
||||||
>
|
Example
|
||||||
Test box
|
</g>
|
||||||
</text>
|
</svg>
|
||||||
<g>
|
</DocumentFragment>
|
||||||
Example
|
|
||||||
</g>
|
|
||||||
</Fragment>
|
|
||||||
`;
|
`;
|
||||||
|
|
||||||
exports[`Box rendering with props from layout 1`] = `
|
exports[`Box rendering with props from layout 1`] = `
|
||||||
<Fragment>
|
<DocumentFragment>
|
||||||
<rect
|
<svg>
|
||||||
height={50}
|
<rect
|
||||||
rx={3}
|
height="50"
|
||||||
ry={3}
|
rx="3"
|
||||||
style={
|
ry="3"
|
||||||
Object {
|
style="fill: #dae9e5; stroke-width: 1px; stroke: #6b6659;"
|
||||||
"fill": "#dae9e5",
|
transform="RECT TRANSFORM"
|
||||||
"stroke": "#6b6659",
|
width="100"
|
||||||
"strokeWidth": "1px",
|
/>
|
||||||
}
|
<text
|
||||||
}
|
style="font-size: 12px; font-family: Arial;"
|
||||||
transform="RECT TRANSFORM"
|
transform="LABEL TRANSFORM"
|
||||||
width={100}
|
>
|
||||||
/>
|
Test box
|
||||||
<text
|
</text>
|
||||||
style={
|
<g
|
||||||
Object {
|
transform="CONTENT TRANSFORM"
|
||||||
"fontFamily": "Arial",
|
>
|
||||||
"fontSize": "12px",
|
Example
|
||||||
}
|
</g>
|
||||||
}
|
</svg>
|
||||||
transform="LABEL TRANSFORM"
|
</DocumentFragment>
|
||||||
>
|
|
||||||
Test box
|
|
||||||
</text>
|
|
||||||
<g
|
|
||||||
transform="CONTENT TRANSFORM"
|
|
||||||
>
|
|
||||||
Example
|
|
||||||
</g>
|
|
||||||
</Fragment>
|
|
||||||
`;
|
`;
|
||||||
|
|
||||||
exports[`Box themes rendering a "anchor" Box 1`] = `
|
exports[`Box themes rendering a "anchor" Box 1`] = `
|
||||||
<Fragment>
|
<DocumentFragment>
|
||||||
<rect
|
<svg>
|
||||||
rx={3}
|
<rect
|
||||||
ry={3}
|
rx="3"
|
||||||
style={
|
ry="3"
|
||||||
Object {
|
style="fill: #6b6659;"
|
||||||
"fill": "#6b6659",
|
/>
|
||||||
}
|
<g>
|
||||||
}
|
Example
|
||||||
/>
|
</g>
|
||||||
<g>
|
</svg>
|
||||||
Example
|
</DocumentFragment>
|
||||||
</g>
|
|
||||||
</Fragment>
|
|
||||||
`;
|
`;
|
||||||
|
|
||||||
exports[`Box themes rendering a "capture" Box 1`] = `
|
exports[`Box themes rendering a "capture" Box 1`] = `
|
||||||
<Fragment>
|
<DocumentFragment>
|
||||||
<rect
|
<svg>
|
||||||
rx={3}
|
<rect
|
||||||
ry={3}
|
rx="3"
|
||||||
style={
|
ry="3"
|
||||||
Object {
|
style="fill-opacity: 0; stroke-width: 2px; stroke: #908c83; stroke-dasharray: 6,2;"
|
||||||
"fillOpacity": 0,
|
/>
|
||||||
"stroke": "#908c83",
|
<g>
|
||||||
"strokeDasharray": "6,2",
|
Example
|
||||||
"strokeWidth": "2px",
|
</g>
|
||||||
}
|
</svg>
|
||||||
}
|
</DocumentFragment>
|
||||||
/>
|
|
||||||
<g>
|
|
||||||
Example
|
|
||||||
</g>
|
|
||||||
</Fragment>
|
|
||||||
`;
|
`;
|
||||||
|
|
||||||
exports[`Box themes rendering a "charClass" Box 1`] = `
|
exports[`Box themes rendering a "charClass" Box 1`] = `
|
||||||
<Fragment>
|
<DocumentFragment>
|
||||||
<rect
|
<svg>
|
||||||
rx={3}
|
<rect
|
||||||
ry={3}
|
rx="3"
|
||||||
style={
|
ry="3"
|
||||||
Object {
|
style="fill: #cbcbba;"
|
||||||
"fill": "#cbcbba",
|
/>
|
||||||
}
|
<g>
|
||||||
}
|
Example
|
||||||
/>
|
</g>
|
||||||
<g>
|
</svg>
|
||||||
Example
|
</DocumentFragment>
|
||||||
</g>
|
|
||||||
</Fragment>
|
|
||||||
`;
|
`;
|
||||||
|
|
||||||
exports[`Box themes rendering a "escape" Box 1`] = `
|
exports[`Box themes rendering a "escape" Box 1`] = `
|
||||||
<Fragment>
|
<DocumentFragment>
|
||||||
<rect
|
<svg>
|
||||||
rx={3}
|
<rect
|
||||||
ry={3}
|
rx="3"
|
||||||
style={
|
ry="3"
|
||||||
Object {
|
style="fill: #bada55; stroke-width: 1px; stroke: #6b6659;"
|
||||||
"fill": "#bada55",
|
/>
|
||||||
"stroke": "#6b6659",
|
<g>
|
||||||
"strokeWidth": "1px",
|
Example
|
||||||
}
|
</g>
|
||||||
}
|
</svg>
|
||||||
/>
|
</DocumentFragment>
|
||||||
<g>
|
|
||||||
Example
|
|
||||||
</g>
|
|
||||||
</Fragment>
|
|
||||||
`;
|
`;
|
||||||
|
|
||||||
exports[`Box themes rendering a "literal" Box 1`] = `
|
exports[`Box themes rendering a "literal" Box 1`] = `
|
||||||
<Fragment>
|
<DocumentFragment>
|
||||||
<rect
|
<svg>
|
||||||
rx={3}
|
<rect
|
||||||
ry={3}
|
rx="3"
|
||||||
style={
|
ry="3"
|
||||||
Object {
|
style="fill: #dae9e5; stroke-width: 1px; stroke: #6b6659;"
|
||||||
"fill": "#dae9e5",
|
/>
|
||||||
"stroke": "#6b6659",
|
<g>
|
||||||
"strokeWidth": "1px",
|
Example
|
||||||
}
|
</g>
|
||||||
}
|
</svg>
|
||||||
/>
|
</DocumentFragment>
|
||||||
<g>
|
|
||||||
Example
|
|
||||||
</g>
|
|
||||||
</Fragment>
|
|
||||||
`;
|
`;
|
||||||
|
|
|
||||||
|
|
@ -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(
|
||||||
<Box>Example</Box>
|
<svg>
|
||||||
|
<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(
|
||||||
<Box radius={ 5 }>Example</Box>
|
<svg>
|
||||||
|
<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(
|
||||||
<Box label="Test box">Example</Box>
|
<svg>
|
||||||
|
<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(
|
||||||
<Box { ...props }>Example</Box>
|
<svg>
|
||||||
|
<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(
|
||||||
<Box theme="literal">Example</Box>
|
<svg>
|
||||||
|
<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(
|
||||||
<Box theme="escape">Example</Box>
|
<svg>
|
||||||
|
<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(
|
||||||
<Box theme="charClass">Example</Box>
|
<svg>
|
||||||
|
<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(
|
||||||
<Box theme="capture">Example</Box>
|
<svg>
|
||||||
|
<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(
|
||||||
<Box theme="anchor">Example</Box>
|
<svg>
|
||||||
|
<Box theme="anchor">Example</Box>
|
||||||
|
</svg>
|
||||||
);
|
);
|
||||||
expect(component).toMatchSnapshot();
|
expect(asFragment()).toMatchSnapshot();
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue