Updating Text rendering to use react-testing-library

This commit is contained in:
Jeff Avallone 2019-03-24 14:54:13 -04:00
parent e449eade9d
commit f63e9b2a47
2 changed files with 70 additions and 75 deletions

View File

@ -18,75 +18,62 @@ Object {
`;
exports[`Text positioning text 1`] = `
<text
style={
Object {
"fontFamily": "Arial",
"fontSize": "16px",
}
}
transform="translate(1 2)"
>
Example
</text>
<DocumentFragment>
<svg>
<text
style="font-size: 16px; font-family: Arial;"
transform="translate(1 2)"
>
Example
</text>
</svg>
</DocumentFragment>
`;
exports[`Text rendering 1`] = `
<text
style={
Object {
"fontFamily": "Arial",
"fontSize": "16px",
}
}
>
Example
</text>
<DocumentFragment>
<svg>
<text
style="font-size: 16px; font-family: Arial;"
>
Example
</text>
</svg>
</DocumentFragment>
`;
exports[`Text rendering quoted text 1`] = `
<text
style={
Object {
"fontFamily": "Arial",
"fontSize": "16px",
}
}
>
<tspan
style={
Object {
"fill": "#908c83",
}
}
>
</tspan>
<tspan>
Example
</tspan>
<tspan
style={
Object {
"fill": "#908c83",
}
}
>
</tspan>
</text>
<DocumentFragment>
<svg>
<text
style="font-size: 16px; font-family: Arial;"
>
<tspan
style="fill: #908c83;"
>
</tspan>
<tspan>
Example
</tspan>
<tspan
style="fill: #908c83;"
>
</tspan>
</text>
</svg>
</DocumentFragment>
`;
exports[`Text rendering with a theme 1`] = `
<text
style={
Object {
"fill": "#fff",
"fontFamily": "Arial",
"fontSize": "16px",
}
}
>
Example
</text>
<DocumentFragment>
<svg>
<text
style="font-size: 16px; font-family: Arial; fill: #fff;"
>
Example
</text>
</svg>
</DocumentFragment>
`;

View File

@ -1,35 +1,43 @@
import React from 'react';
import { shallow } from 'enzyme';
import { render } from 'react-testing-library';
import Text, { layout } from 'rendering/Text';
describe('Text', () => {
test('rendering', () => {
const component = shallow(
<Text>Example</Text>
const { asFragment } = render(
<svg>
<Text>Example</Text>
</svg>
);
expect(component).toMatchSnapshot();
expect(asFragment()).toMatchSnapshot();
});
test('positioning text', () => {
const component = shallow(
<Text transform="translate(1 2)">Example</Text>
const { asFragment } = render(
<svg>
<Text transform="translate(1 2)">Example</Text>
</svg>
);
expect(component).toMatchSnapshot();
expect(asFragment()).toMatchSnapshot();
});
test('rendering with a theme', () => {
const component = shallow(
<Text theme="anchor">Example</Text>
const { asFragment } = render(
<svg>
<Text theme="anchor">Example</Text>
</svg>
);
expect(component).toMatchSnapshot();
expect(asFragment()).toMatchSnapshot();
});
test('rendering quoted text', () => {
const component = shallow(
<Text quoted={ true }>Example</Text>
const { asFragment } = render(
<svg>
<Text quoted={ true }>Example</Text>
</svg>
);
expect(component).toMatchSnapshot();
expect(asFragment()).toMatchSnapshot();
});
test('layout', () => {