Rudimentary tests for not covered entry points (#11835)

* Add basic snapshot tests to ReactART components (Circle, Rectangle, Wedge)

* More tests on Circle, Rectangle, Wedge

* linc warning fixes

* - remove tests to Wedge component internal function

* More test on Wedge component, update snapshots
This commit is contained in:
Yu Tian 2017-12-13 23:45:30 +11:00 committed by Dan Abramov
parent 7a72aa0a4a
commit 8ec146c38e
5 changed files with 212 additions and 0 deletions

14
packages/react-art/Circle.js vendored Normal file
View File

@ -0,0 +1,14 @@
/**
* Copyright (c) 2013-present, Facebook, Inc.
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*
* @flow
*/
'use strict';
const Circle = require('./npm/Circle');
module.exports = Circle;

14
packages/react-art/Rectangle.js vendored Normal file
View File

@ -0,0 +1,14 @@
/**
* Copyright (c) 2013-present, Facebook, Inc.
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*
* @flow
*/
'use strict';
const Rectangle = require('./npm/Rectangle');
module.exports = Rectangle;

14
packages/react-art/Wedge.js vendored Normal file
View File

@ -0,0 +1,14 @@
/**
* Copyright (c) 2013-present, Facebook, Inc.
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*
* @flow
*/
'use strict';
const Wedge = require('./npm/Wedge');
module.exports = Wedge;

View File

@ -26,6 +26,11 @@ const ReactART = require('react-art');
const ARTSVGMode = require('art/modes/svg');
const ARTCurrentMode = require('art/modes/current');
const renderer = require('react-test-renderer');
const Circle = require('react-art/Circle');
const Rectangle = require('react-art/Rectangle');
const Wedge = require('react-art/Wedge');
function testDOMNodeStructure(domNode, expectedStructure) {
expect(domNode).toBeDefined();
expect(domNode.nodeName).toBe(expectedStructure.nodeName);
@ -329,3 +334,91 @@ describe('ReactART', () => {
expect(onClick2).toBeCalled();
});
});
describe('ReactARTComponents', () => {
function normalizeCodeLocInfo(str) {
return str && str.replace(/\(at .+?:\d+\)/g, '(at **)');
}
it('should generate a <Shape> with props for drawing the Circle', () => {
const circle = renderer.create(
<Circle radius={10} stroke="green" strokeWidth={3} fill="blue" />,
);
expect(circle.toJSON()).toMatchSnapshot();
});
it('should warn if radius is missing on a Circle component', () => {
spyOnDev(console, 'error');
renderer.create(<Circle stroke="green" strokeWidth={3} fill="blue" />);
if (__DEV__) {
expect(console.error.calls.count()).toBe(1);
expect(normalizeCodeLocInfo(console.error.calls.argsFor(0)[0])).toEqual(
'Warning: Failed prop type: The prop `radius` is marked as required in `Circle`, ' +
'but its value is `undefined`.' +
'\n in Circle (at **)',
);
}
});
it('should generate a <Shape> with props for drawing the Rectangle', () => {
const rectangle = renderer.create(
<Rectangle width={50} height={50} stroke="green" fill="blue" />,
);
expect(rectangle.toJSON()).toMatchSnapshot();
});
it('should warn if width/height is missing on a Rectangle component', () => {
spyOnDev(console, 'error');
renderer.create(<Rectangle stroke="green" fill="blue" />);
if (__DEV__) {
expect(console.error.calls.count()).toBe(2);
expect(normalizeCodeLocInfo(console.error.calls.argsFor(0)[0])).toEqual(
'Warning: Failed prop type: The prop `width` is marked as required in `Rectangle`, ' +
'but its value is `undefined`.' +
'\n in Rectangle (at **)',
);
expect(normalizeCodeLocInfo(console.error.calls.argsFor(1)[0])).toEqual(
'Warning: Failed prop type: The prop `height` is marked as required in `Rectangle`, ' +
'but its value is `undefined`.' +
'\n in Rectangle (at **)',
);
}
});
it('should generate a <Shape> with props for drawing the Wedge', () => {
const wedge = renderer.create(
<Wedge outerRadius={50} startAngle={0} endAngle={360} fill="blue" />,
);
expect(wedge.toJSON()).toMatchSnapshot();
});
it('should return null if startAngle equals to endAngle on Wedge', () => {
const wedge = renderer.create(
<Wedge outerRadius={50} startAngle={0} endAngle={0} fill="blue" />,
);
expect(wedge.toJSON()).toBeNull();
});
it('should warn if outerRadius/startAngle/endAngle is missing on a Wedge component', () => {
spyOnDev(console, 'error');
renderer.create(<Wedge fill="blue" />);
if (__DEV__) {
expect(console.error.calls.count()).toBe(3);
expect(normalizeCodeLocInfo(console.error.calls.argsFor(0)[0])).toEqual(
'Warning: Failed prop type: The prop `outerRadius` is marked as required in `Wedge`, ' +
'but its value is `undefined`.' +
'\n in Wedge (at **)',
);
expect(normalizeCodeLocInfo(console.error.calls.argsFor(1)[0])).toEqual(
'Warning: Failed prop type: The prop `startAngle` is marked as required in `Wedge`, ' +
'but its value is `undefined`.' +
'\n in Wedge (at **)',
);
expect(normalizeCodeLocInfo(console.error.calls.argsFor(2)[0])).toEqual(
'Warning: Failed prop type: The prop `endAngle` is marked as required in `Wedge`, ' +
'but its value is `undefined`.' +
'\n in Wedge (at **)',
);
}
});
});

View File

@ -0,0 +1,77 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`ReactARTComponents should generate a <Shape> with props for drawing the Circle 1`] = `
<Shape
d={
{
"_pivotX": 0,
"_pivotY": -10,
"path": Array [
[Function],
[Function],
[Function],
[Function],
],
"penDownX": null,
"penDownY": -10,
"penX": 0,
"penY": -10,
}
}
fill="blue"
radius={10}
stroke="green"
strokeWidth={3}
/>
`;
exports[`ReactARTComponents should generate a <Shape> with props for drawing the Rectangle 1`] = `
<Shape
d={
{
"_pivotX": 0,
"_pivotY": 0,
"path": Array [
[Function],
[Function],
[Function],
[Function],
[Function],
],
"penDownX": 0,
"penDownY": 0,
"penX": 0,
"penY": 0,
}
}
fill="blue"
height={50}
stroke="green"
width={50}
/>
`;
exports[`ReactARTComponents should generate a <Shape> with props for drawing the Wedge 1`] = `
<Shape
d={
{
"_pivotX": 0,
"_pivotY": 50,
"path": Array [
[Function],
[Function],
[Function],
[Function],
],
"penDownX": null,
"penDownY": 50,
"penX": 0,
"penY": 50,
}
}
endAngle={360}
fill="blue"
outerRadius={50}
startAngle={0}
/>
`;