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

View File

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