From 95e61b5ce78a6792e94099fa25afa862d92c32e8 Mon Sep 17 00:00:00 2001 From: Yu Tian Date: Tue, 12 Dec 2017 11:33:20 +1100 Subject: [PATCH 1/5] Add basic snapshot tests to ReactART components (Circle, Rectangle, Wedge) --- packages/react-art/Circle.js | 14 ++++ packages/react-art/Rectangle.js | 14 ++++ packages/react-art/Wedge.js | 14 ++++ .../react-art/src/__tests__/ReactART-test.js | 29 +++++++ .../__snapshots__/ReactART-test.js.snap | 77 +++++++++++++++++++ 5 files changed, 148 insertions(+) create mode 100644 packages/react-art/Circle.js create mode 100644 packages/react-art/Rectangle.js create mode 100644 packages/react-art/Wedge.js create mode 100644 packages/react-art/src/__tests__/__snapshots__/ReactART-test.js.snap diff --git a/packages/react-art/Circle.js b/packages/react-art/Circle.js new file mode 100644 index 00000000000..5964953de9d --- /dev/null +++ b/packages/react-art/Circle.js @@ -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; diff --git a/packages/react-art/Rectangle.js b/packages/react-art/Rectangle.js new file mode 100644 index 00000000000..e3c16d36cc7 --- /dev/null +++ b/packages/react-art/Rectangle.js @@ -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; diff --git a/packages/react-art/Wedge.js b/packages/react-art/Wedge.js new file mode 100644 index 00000000000..906fbd00416 --- /dev/null +++ b/packages/react-art/Wedge.js @@ -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; diff --git a/packages/react-art/src/__tests__/ReactART-test.js b/packages/react-art/src/__tests__/ReactART-test.js index 2bc5314a1d0..ef55342d845 100644 --- a/packages/react-art/src/__tests__/ReactART-test.js +++ b/packages/react-art/src/__tests__/ReactART-test.js @@ -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,27 @@ describe('ReactART', () => { expect(onClick2).toBeCalled(); }); }); + +// TODO: more tests covering the components functionalities. +describe('ReactARTComponents', () => { + it('should generate a Shape module with props for drawing the Circle', () => { + const circle = renderer.create( + , + ); + expect(circle.toJSON()).toMatchSnapshot(); + }); + + it('should generate a Shape module with props for drawing the Rectangle', () => { + const rectangle = renderer.create( + , + ); + expect(rectangle.toJSON()).toMatchSnapshot(); + }); + + it('should generate a Shape module with props for drawing the Wedge', () => { + const wedge = renderer.create( + , + ); + expect(wedge.toJSON()).toMatchSnapshot(); + }); +}); diff --git a/packages/react-art/src/__tests__/__snapshots__/ReactART-test.js.snap b/packages/react-art/src/__tests__/__snapshots__/ReactART-test.js.snap new file mode 100644 index 00000000000..ace5b792ba0 --- /dev/null +++ b/packages/react-art/src/__tests__/__snapshots__/ReactART-test.js.snap @@ -0,0 +1,77 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`ReactARTComponents should generate a Shape module with props for drawing the Circle 1`] = ` + +`; + +exports[`ReactARTComponents should generate a Shape module with props for drawing the Rectangle 1`] = ` + +`; + +exports[`ReactARTComponents should generate a Shape module with props for drawing the Wedge 1`] = ` + +`; From ca963bee878527220472a5ec25e4da29624bd3ac Mon Sep 17 00:00:00 2001 From: Yu Tian Date: Tue, 12 Dec 2017 16:07:36 +1100 Subject: [PATCH 2/5] More tests on Circle, Rectangle, Wedge --- .../react-art/src/__tests__/ReactART-test.js | 80 ++++++++++++++++++- 1 file changed, 77 insertions(+), 3 deletions(-) diff --git a/packages/react-art/src/__tests__/ReactART-test.js b/packages/react-art/src/__tests__/ReactART-test.js index ef55342d845..064568b8030 100644 --- a/packages/react-art/src/__tests__/ReactART-test.js +++ b/packages/react-art/src/__tests__/ReactART-test.js @@ -335,8 +335,11 @@ describe('ReactART', () => { }); }); -// TODO: more tests covering the components functionalities. describe('ReactARTComponents', () => { + function normalizeCodeLocInfo(str) { + return str && str.replace(/\(at .+?:\d+\)/g, '(at **)'); + } + it('should generate a Shape module with props for drawing the Circle', () => { const circle = renderer.create( , @@ -344,17 +347,88 @@ describe('ReactARTComponents', () => { expect(circle.toJSON()).toMatchSnapshot(); }); + it('should warn if radius is missing on a Circle component', () => { + spyOnDev(console, 'error'); + const circle = renderer.create( + + ); + 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 module with props for drawing the Rectangle', () => { const rectangle = renderer.create( - , + ); expect(rectangle.toJSON()).toMatchSnapshot(); }); + it('should warn if width/height is missing on a Rectangle component', () => { + spyOnDev(console, 'error'); + const rectangle = renderer.create( + + ); + 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 module with props for drawing the Wedge', () => { const wedge = renderer.create( - , + ); expect(wedge.toJSON()).toMatchSnapshot(); }); + + it('should warn if outerRadius/startAngle/endAngle is missing on a Wedge component', () => { + spyOnDev(console, 'error'); + const wedge = renderer.create( + + ); + 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 **)' + ); + } + }); + + it('should turn degrees to radians', () => { + const wedgeInstance = renderer.create( + + ).getInstance(); + expect(wedgeInstance._degreesToRadians(0)).toBe(0); + expect(wedgeInstance._degreesToRadians(180)).toBe(3.141592653589793); + expect(wedgeInstance._degreesToRadians(720)).toBe(6.283185307179586); + expect(wedgeInstance._degreesToRadians(-180)).toBe(-3.141592653589793); + // Below are some edge cases we may need to handle in _degreesToRadians or _createArcPath + expect(wedgeInstance._degreesToRadians(NaN)).toEqual(NaN); + expect(wedgeInstance._degreesToRadians(Infinity)).toEqual(NaN); + // prop-types warns below cases in development environment, not production + expect(wedgeInstance._degreesToRadians({})).toEqual(NaN); + expect(wedgeInstance._degreesToRadians('')).toEqual(6.283185307179586); + expect(wedgeInstance._degreesToRadians([])).toEqual(6.283185307179586); + }); }); From 047389cd433397fa3fd61cb78d65c2235272250a Mon Sep 17 00:00:00 2001 From: Yu Tian Date: Tue, 12 Dec 2017 16:43:09 +1100 Subject: [PATCH 3/5] linc warning fixes --- .../react-art/src/__tests__/ReactART-test.js | 54 ++++++++++--------- 1 file changed, 28 insertions(+), 26 deletions(-) diff --git a/packages/react-art/src/__tests__/ReactART-test.js b/packages/react-art/src/__tests__/ReactART-test.js index 064568b8030..8de2f4d97bb 100644 --- a/packages/react-art/src/__tests__/ReactART-test.js +++ b/packages/react-art/src/__tests__/ReactART-test.js @@ -349,76 +349,78 @@ describe('ReactARTComponents', () => { it('should warn if radius is missing on a Circle component', () => { spyOnDev(console, 'error'); - const circle = renderer.create( - - ); + renderer.create(); 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 **)' + '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 module with props for drawing the Rectangle', () => { const rectangle = renderer.create( - + , ); expect(rectangle.toJSON()).toMatchSnapshot(); }); it('should warn if width/height is missing on a Rectangle component', () => { spyOnDev(console, 'error'); - const rectangle = renderer.create( - - ); + renderer.create(); 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 **)' + '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 **)' + '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 module with props for drawing the Wedge', () => { const wedge = renderer.create( - + , ); expect(wedge.toJSON()).toMatchSnapshot(); }); it('should warn if outerRadius/startAngle/endAngle is missing on a Wedge component', () => { spyOnDev(console, 'error'); - const wedge = renderer.create( - - ); + renderer.create(); 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 **)' + '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 **)' + '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 **)' + 'Warning: Failed prop type: The prop `endAngle` is marked as required in `Wedge`, ' + + 'but its value is `undefined`.' + + '\n in Wedge (at **)', ); } }); it('should turn degrees to radians', () => { - const wedgeInstance = renderer.create( - - ).getInstance(); + const wedgeInstance = renderer + .create( + , + ) + .getInstance(); expect(wedgeInstance._degreesToRadians(0)).toBe(0); expect(wedgeInstance._degreesToRadians(180)).toBe(3.141592653589793); expect(wedgeInstance._degreesToRadians(720)).toBe(6.283185307179586); From 4ab3ba881312cb7586a747c2192a8c1b2b3d84b3 Mon Sep 17 00:00:00 2001 From: Yu Tian Date: Wed, 13 Dec 2017 12:50:21 +1100 Subject: [PATCH 4/5] - remove tests to Wedge component internal function --- .../react-art/src/__tests__/ReactART-test.js | 25 +++---------------- 1 file changed, 3 insertions(+), 22 deletions(-) diff --git a/packages/react-art/src/__tests__/ReactART-test.js b/packages/react-art/src/__tests__/ReactART-test.js index 8de2f4d97bb..bcd284ae275 100644 --- a/packages/react-art/src/__tests__/ReactART-test.js +++ b/packages/react-art/src/__tests__/ReactART-test.js @@ -340,7 +340,7 @@ describe('ReactARTComponents', () => { return str && str.replace(/\(at .+?:\d+\)/g, '(at **)'); } - it('should generate a Shape module with props for drawing the Circle', () => { + it('should generate a with props for drawing the Circle', () => { const circle = renderer.create( , ); @@ -360,7 +360,7 @@ describe('ReactARTComponents', () => { } }); - it('should generate a Shape module with props for drawing the Rectangle', () => { + it('should generate a with props for drawing the Rectangle', () => { const rectangle = renderer.create( , ); @@ -385,7 +385,7 @@ describe('ReactARTComponents', () => { } }); - it('should generate a Shape module with props for drawing the Wedge', () => { + it('should generate a with props for drawing the Wedge', () => { const wedge = renderer.create( , ); @@ -414,23 +414,4 @@ describe('ReactARTComponents', () => { ); } }); - - it('should turn degrees to radians', () => { - const wedgeInstance = renderer - .create( - , - ) - .getInstance(); - expect(wedgeInstance._degreesToRadians(0)).toBe(0); - expect(wedgeInstance._degreesToRadians(180)).toBe(3.141592653589793); - expect(wedgeInstance._degreesToRadians(720)).toBe(6.283185307179586); - expect(wedgeInstance._degreesToRadians(-180)).toBe(-3.141592653589793); - // Below are some edge cases we may need to handle in _degreesToRadians or _createArcPath - expect(wedgeInstance._degreesToRadians(NaN)).toEqual(NaN); - expect(wedgeInstance._degreesToRadians(Infinity)).toEqual(NaN); - // prop-types warns below cases in development environment, not production - expect(wedgeInstance._degreesToRadians({})).toEqual(NaN); - expect(wedgeInstance._degreesToRadians('')).toEqual(6.283185307179586); - expect(wedgeInstance._degreesToRadians([])).toEqual(6.283185307179586); - }); }); From 22f9c7348c789577d1f10d30c54553af7db33dfd Mon Sep 17 00:00:00 2001 From: Yu Tian Date: Wed, 13 Dec 2017 13:14:15 +1100 Subject: [PATCH 5/5] More test on Wedge component, update snapshots --- packages/react-art/src/__tests__/ReactART-test.js | 7 +++++++ .../src/__tests__/__snapshots__/ReactART-test.js.snap | 6 +++--- 2 files changed, 10 insertions(+), 3 deletions(-) diff --git a/packages/react-art/src/__tests__/ReactART-test.js b/packages/react-art/src/__tests__/ReactART-test.js index bcd284ae275..5aed8ca6b22 100644 --- a/packages/react-art/src/__tests__/ReactART-test.js +++ b/packages/react-art/src/__tests__/ReactART-test.js @@ -392,6 +392,13 @@ describe('ReactARTComponents', () => { expect(wedge.toJSON()).toMatchSnapshot(); }); + it('should return null if startAngle equals to endAngle on Wedge', () => { + const wedge = renderer.create( + , + ); + expect(wedge.toJSON()).toBeNull(); + }); + it('should warn if outerRadius/startAngle/endAngle is missing on a Wedge component', () => { spyOnDev(console, 'error'); renderer.create(); diff --git a/packages/react-art/src/__tests__/__snapshots__/ReactART-test.js.snap b/packages/react-art/src/__tests__/__snapshots__/ReactART-test.js.snap index ace5b792ba0..6ee55d2081f 100644 --- a/packages/react-art/src/__tests__/__snapshots__/ReactART-test.js.snap +++ b/packages/react-art/src/__tests__/__snapshots__/ReactART-test.js.snap @@ -1,6 +1,6 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP -exports[`ReactARTComponents should generate a Shape module with props for drawing the Circle 1`] = ` +exports[`ReactARTComponents should generate a with props for drawing the Circle 1`] = ` `; -exports[`ReactARTComponents should generate a Shape module with props for drawing the Rectangle 1`] = ` +exports[`ReactARTComponents should generate a with props for drawing the Rectangle 1`] = ` `; -exports[`ReactARTComponents should generate a Shape module with props for drawing the Wedge 1`] = ` +exports[`ReactARTComponents should generate a with props for drawing the Wedge 1`] = `