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
Yu Tian committed
Dec 13, 2017 at 23:45 UTC
8ec146c38ee4f4c84b6ecf59f52de3371224e8bd
5 files changed
+212
packages/react-art/Circle.js
new
+14
@@ -0,0 +1,14 @@
1
+/**
2
+ * Copyright (c) 2013-present, Facebook, Inc.
3
+ *
4
+ * This source code is licensed under the MIT license found in the
5
+ * LICENSE file in the root directory of this source tree.
6
+ *
7
+ * @flow
8
+ */
9
+
10
+'use strict';
11
+
12
+const Circle = require('./npm/Circle');
13
+
14
+module.exports = Circle;
packages/react-art/Rectangle.js
new
+14
@@ -0,0 +1,14 @@
1
+/**
2
+ * Copyright (c) 2013-present, Facebook, Inc.
3
+ *
4
+ * This source code is licensed under the MIT license found in the
5
+ * LICENSE file in the root directory of this source tree.
6
+ *
7
+ * @flow
8
+ */
9
+
10
+'use strict';
11
+
12
+const Rectangle = require('./npm/Rectangle');
13
+
14
+module.exports = Rectangle;
packages/react-art/Wedge.js
new
+14
@@ -0,0 +1,14 @@
1
+/**
2
+ * Copyright (c) 2013-present, Facebook, Inc.
3
+ *
4
+ * This source code is licensed under the MIT license found in the
5
+ * LICENSE file in the root directory of this source tree.
6
+ *
7
+ * @flow
8
+ */
9
+
10
+'use strict';
11
+
12
+const Wedge = require('./npm/Wedge');
13
+
14
+module.exports = Wedge;
packages/react-art/src/__tests__/ReactART-test.js
+93
@@ -26,6 +26,11 @@ const ReactART = require('react-art');
26
const ARTSVGMode = require('art/modes/svg');
27
const ARTCurrentMode = require('art/modes/current');
28
29
+const renderer = require('react-test-renderer');
30
+const Circle = require('react-art/Circle');
31
+const Rectangle = require('react-art/Rectangle');
32
+const Wedge = require('react-art/Wedge');
33
+
34
function testDOMNodeStructure(domNode, expectedStructure) {
35
expect(domNode).toBeDefined();
36
expect(domNode.nodeName).toBe(expectedStructure.nodeName);
@@ -329,3 +334,91 @@ describe('ReactART', () => {
334
expect(onClick2).toBeCalled();
335
});
336
});
337
+
338
+describe('ReactARTComponents', () => {
339
+ function normalizeCodeLocInfo(str) {
340
+ return str && str.replace(/\(at .+?:\d+\)/g, '(at **)');
341
+ }
342
+
343
+ it('should generate a <Shape> with props for drawing the Circle', () => {
344
+ const circle = renderer.create(
345
+ <Circle radius={10} stroke="green" strokeWidth={3} fill="blue" />,
346
+ );
347
+ expect(circle.toJSON()).toMatchSnapshot();
348
+ });
349
+
350
+ it('should warn if radius is missing on a Circle component', () => {
351
+ spyOnDev(console, 'error');
352
+ renderer.create(<Circle stroke="green" strokeWidth={3} fill="blue" />);
353
+ if (__DEV__) {
354
+ expect(console.error.calls.count()).toBe(1);
355
+ expect(normalizeCodeLocInfo(console.error.calls.argsFor(0)[0])).toEqual(
356
+ 'Warning: Failed prop type: The prop `radius` is marked as required in `Circle`, ' +
357
+ 'but its value is `undefined`.' +
358
+ '\n in Circle (at **)',
359
+ );
360
+ }
361
+ });
362
+
363
+ it('should generate a <Shape> with props for drawing the Rectangle', () => {
364
+ const rectangle = renderer.create(
365
+ <Rectangle width={50} height={50} stroke="green" fill="blue" />,
366
+ );
367
+ expect(rectangle.toJSON()).toMatchSnapshot();
368
+ });
369
+
370
+ it('should warn if width/height is missing on a Rectangle component', () => {
371
+ spyOnDev(console, 'error');
372
+ renderer.create(<Rectangle stroke="green" fill="blue" />);
373
+ if (__DEV__) {
374
+ expect(console.error.calls.count()).toBe(2);
375
+ expect(normalizeCodeLocInfo(console.error.calls.argsFor(0)[0])).toEqual(
376
+ 'Warning: Failed prop type: The prop `width` is marked as required in `Rectangle`, ' +
377
+ 'but its value is `undefined`.' +
378
+ '\n in Rectangle (at **)',
379
+ );
380
+ expect(normalizeCodeLocInfo(console.error.calls.argsFor(1)[0])).toEqual(
381
+ 'Warning: Failed prop type: The prop `height` is marked as required in `Rectangle`, ' +
382
+ 'but its value is `undefined`.' +
383
+ '\n in Rectangle (at **)',
384
+ );
385
+ }
386
+ });
387
+
388
+ it('should generate a <Shape> with props for drawing the Wedge', () => {
389
+ const wedge = renderer.create(
390
+ <Wedge outerRadius={50} startAngle={0} endAngle={360} fill="blue" />,
391
+ );
392
+ expect(wedge.toJSON()).toMatchSnapshot();
393
+ });
394
+
395
+ it('should return null if startAngle equals to endAngle on Wedge', () => {
396
+ const wedge = renderer.create(
397
+ <Wedge outerRadius={50} startAngle={0} endAngle={0} fill="blue" />,
398
+ );
399
+ expect(wedge.toJSON()).toBeNull();
400
+ });
401
+
402
+ it('should warn if outerRadius/startAngle/endAngle is missing on a Wedge component', () => {
403
+ spyOnDev(console, 'error');
404
+ renderer.create(<Wedge fill="blue" />);
405
+ if (__DEV__) {
406
+ expect(console.error.calls.count()).toBe(3);
407
+ expect(normalizeCodeLocInfo(console.error.calls.argsFor(0)[0])).toEqual(
408
+ 'Warning: Failed prop type: The prop `outerRadius` is marked as required in `Wedge`, ' +
409
+ 'but its value is `undefined`.' +
410
+ '\n in Wedge (at **)',
411
+ );
412
+ expect(normalizeCodeLocInfo(console.error.calls.argsFor(1)[0])).toEqual(
413
+ 'Warning: Failed prop type: The prop `startAngle` is marked as required in `Wedge`, ' +
414
+ 'but its value is `undefined`.' +
415
+ '\n in Wedge (at **)',
416
+ );
417
+ expect(normalizeCodeLocInfo(console.error.calls.argsFor(2)[0])).toEqual(
418
+ 'Warning: Failed prop type: The prop `endAngle` is marked as required in `Wedge`, ' +
419
+ 'but its value is `undefined`.' +
420
+ '\n in Wedge (at **)',
421
+ );
422
+ }
423
+ });
424
+});
packages/react-art/src/__tests__/__snapshots__/ReactART-test.js.snap
new
+77
@@ -0,0 +1,77 @@
1
+// Jest Snapshot v1, https://goo.gl/fbAQLP
2
+
3
+exports[`ReactARTComponents should generate a <Shape> with props for drawing the Circle 1`] = `
4
+<Shape
5
+ d={
6
+ {
7
+ "_pivotX": 0,
8
+ "_pivotY": -10,
9
+ "path": Array [
10
+ [Function],
11
+ [Function],
12
+ [Function],
13
+ [Function],
14
+ ],
15
+ "penDownX": null,
16
+ "penDownY": -10,
17
+ "penX": 0,
18
+ "penY": -10,
19
+ }
20
+ }
21
+ fill="blue"
22
+ radius={10}
23
+ stroke="green"
24
+ strokeWidth={3}
25
+/>
26
+`;
27
+
28
+exports[`ReactARTComponents should generate a <Shape> with props for drawing the Rectangle 1`] = `
29
+<Shape
30
+ d={
31
+ {
32
+ "_pivotX": 0,
33
+ "_pivotY": 0,
34
+ "path": Array [
35
+ [Function],
36
+ [Function],
37
+ [Function],
38
+ [Function],
39
+ [Function],
40
+ ],
41
+ "penDownX": 0,
42
+ "penDownY": 0,
43
+ "penX": 0,
44
+ "penY": 0,
45
+ }
46
+ }
47
+ fill="blue"
48
+ height={50}
49
+ stroke="green"
50
+ width={50}
51
+/>
52
+`;
53
+
54
+exports[`ReactARTComponents should generate a <Shape> with props for drawing the Wedge 1`] = `
55
+<Shape
56
+ d={
57
+ {
58
+ "_pivotX": 0,
59
+ "_pivotY": 50,
60
+ "path": Array [
61
+ [Function],
62
+ [Function],
63
+ [Function],
64
+ [Function],
65
+ ],
66
+ "penDownX": null,
67
+ "penDownY": 50,
68
+ "penX": 0,
69
+ "penY": 50,
70
+ }
71
+ }
72
+ endAngle={360}
73
+ fill="blue"
74
+ outerRadius={50}
75
+ startAngle={0}
76
+/>
77
+`;