[Fiber] Simple test assertions
I'll split the coroutine and incremental testing into their own tests so that I can expand them with more edge cases.
Sebastian Markbage committed
May 31, 2016 at 13:52 UTC
8056fbc2c96c80217b5d6f8c5db8e7f431dfe791
2 files changed
+90
-36
src/renderers/shared/fiber/__tests__/ReactCoroutine-test.js
renamed
+21
-36
@@ -15,7 +15,7 @@ var React;
15
var ReactNoop;
16
var ReactCoroutine;
17
18
-describe('ReactComponent', function() {
18
+describe('ReactCoroutine', function() {
19
beforeEach(function() {
20
React = require('React');
21
ReactNoop = require('ReactNoop');
@@ -23,61 +23,32 @@ describe('ReactComponent', function() {
23
spyOn(console, 'log');
24
});
25
26
- it('should render a simple component', function() {
27
-
28
- function Bar() {
29
- return <div>Hello World</div>;
30
- }
31
-
32
- function Foo() {
33
- return <Bar isBar={true} />;
34
- }
35
-
36
- ReactNoop.render(<Foo />);
37
- ReactNoop.flush();
38
-
39
- });
40
-
41
- it('should render a simple component, in steps if needed', function() {
42
-
43
- function Bar() {
44
- return <span><div>Hello World</div></span>;
45
- }
46
-
47
- function Foo() {
48
- return [
49
- <Bar isBar={true} />,
50
- <Bar isBar={true} />,
51
- ];
52
- }
26
+ it('should render a coroutine', function() {
27
54
- ReactNoop.render(<Foo />);
55
- // console.log('Nothing done');
56
- ReactNoop.flushLowPri(7);
57
- // console.log('Yield');
58
- ReactNoop.flushLowPri(50);
59
- // console.log('Done');
60
- });
28
+ var ops = [];
29
62
- it('should render a coroutine', function() {
30
31
function Continuation({ isSame }) {
32
+ ops.push(['Continuation', isSame]);
33
return <span>{isSame ? 'foo==bar' : 'foo!=bar'}</span>;
34
}
35
36
// An alternative API could mark Continuation as something that needs
37
// yielding. E.g. Continuation.yieldType = 123;
38
function Child({ bar }) {
39
+ ops.push(['Child', bar]);
40
return ReactCoroutine.createYield({
41
bar: bar,
42
}, Continuation, null);
43
}
44
45
function Indirection() {
46
+ ops.push('Indirection');
47
return [<Child bar={true} />, <Child bar={false} />];
48
}
49
50
function HandleYields(props, yields) {
51
+ ops.push('HandleYields');
52
return yields.map(y =>
53
<y.continuation isSame={props.foo === y.props.bar} />
54
);
@@ -86,6 +57,7 @@ describe('ReactComponent', function() {
57
// An alternative API could mark Parent as something that needs
58
// yielding. E.g. Parent.handler = HandleYields;
59
function Parent(props) {
60
+ ops.push('Parent');
61
return ReactCoroutine.createCoroutine(
62
props.children,
63
HandleYields,
@@ -100,6 +72,19 @@ describe('ReactComponent', function() {
72
ReactNoop.render(<App />);
73
ReactNoop.flush();
74
75
+ expect(ops).toEqual([
76
+ 'Parent',
77
+ 'Indirection',
78
+ ['Child', true],
79
+ // Yield
80
+ ['Child', false],
81
+ // Yield
82
+ 'HandleYields',
83
+ // Continue yields
84
+ ['Continuation', true],
85
+ ['Continuation', false],
86
+ ]);
87
+
88
});
89
90
});
src/renderers/shared/fiber/__tests__/ReactIncremental-test.js
new
+69
@@ -0,0 +1,69 @@
1
+/**
2
+ * Copyright 2013-present, Facebook, Inc.
3
+ * All rights reserved.
4
+ *
5
+ * This source code is licensed under the BSD-style license found in the
6
+ * LICENSE file in the root directory of this source tree. An additional grant
7
+ * of patent rights can be found in the PATENTS file in the same directory.
8
+ *
9
+ * @emails react-core
10
+ */
11
+
12
+'use strict';
13
+
14
+var React;
15
+var ReactNoop;
16
+
17
+describe('ReactIncremental', function() {
18
+ beforeEach(function() {
19
+ React = require('React');
20
+ ReactNoop = require('ReactNoop');
21
+ spyOn(console, 'log');
22
+ });
23
+
24
+ it('should render a simple component', function() {
25
+
26
+ function Bar() {
27
+ return <div>Hello World</div>;
28
+ }
29
+
30
+ function Foo() {
31
+ return <Bar isBar={true} />;
32
+ }
33
+
34
+ ReactNoop.render(<Foo />);
35
+ ReactNoop.flush();
36
+
37
+ });
38
+
39
+ it('should render a simple component, in steps if needed', function() {
40
+
41
+ var barCalled = false;
42
+ function Bar() {
43
+ barCalled = true;
44
+ return <span><div>Hello World</div></span>;
45
+ }
46
+
47
+ var fooCalled = false;
48
+ function Foo() {
49
+ fooCalled = true;
50
+ return [
51
+ <Bar isBar={true} />,
52
+ <Bar isBar={true} />,
53
+ ];
54
+ }
55
+
56
+ ReactNoop.render(<Foo />);
57
+ expect(fooCalled).toBe(false);
58
+ expect(barCalled).toBe(false);
59
+ // Do one step of work.
60
+ ReactNoop.flushLowPri(7);
61
+ expect(fooCalled).toBe(true);
62
+ expect(barCalled).toBe(false);
63
+ // Do the rest of the work.
64
+ ReactNoop.flushLowPri(50);
65
+ expect(fooCalled).toBe(true);
66
+ expect(barCalled).toBe(true);
67
+ });
68
+
69
+});