Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
14 changes: 14 additions & 0 deletions packages/react-art/Circle.js
Original file line number Diff line number Diff line change
@@ -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 changes: 14 additions & 0 deletions packages/react-art/Rectangle.js
Original file line number Diff line number Diff line change
@@ -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 changes: 14 additions & 0 deletions packages/react-art/Wedge.js
Original file line number Diff line number Diff line change
@@ -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;
93 changes: 93 additions & 0 deletions packages/react-art/src/__tests__/ReactART-test.js
Original file line number Diff line number Diff line change
Expand Up @@ -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);
Expand Down Expand Up @@ -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 **)',
);
}
});
});
Original file line number Diff line number Diff line change
@@ -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}
/>
`;