Browse Source

container

Daniel Zlotin 8 years ago
parent
commit
45f088176c
3 changed files with 64 additions and 14 deletions
  1. 1
    2
      package.json
  2. 12
    3
      src2/containers/ContainerRegistry.js
  3. 51
    9
      src2/containers/ContainerRegistry.test.js

+ 1
- 2
package.json View File

57
   "jest": {
57
   "jest": {
58
     "preset": "jest-react-native",
58
     "preset": "jest-react-native",
59
     "resetMocks": true,
59
     "resetMocks": true,
60
-    "resetModules": true,
61
-    "verbose": true
60
+    "resetModules": true
62
   }
61
   }
63
 }
62
 }

+ 12
- 3
src2/containers/ContainerRegistry.js View File

3
 
3
 
4
 export function registerContainer(containerKey, getContainerFunc) {
4
 export function registerContainer(containerKey, getContainerFunc) {
5
   const OriginalContainer = getContainerFunc();
5
   const OriginalContainer = getContainerFunc();
6
-  const WrappedContainer = wrapContainer(OriginalContainer);
7
-  AppRegistry.registerComponent(containerKey, () => WrappedContainer);
6
+  const NavigationContainer = wrapContainer(OriginalContainer);
7
+  AppRegistry.registerComponent(containerKey, () => NavigationContainer);
8
 }
8
 }
9
 
9
 
10
 function wrapContainer(OriginalContainer) {
10
 function wrapContainer(OriginalContainer) {
11
   return class extends Component {
11
   return class extends Component {
12
     constructor(props) {
12
     constructor(props) {
13
       super(props);
13
       super(props);
14
+      this.state = {
15
+        allProps: {...props}
16
+      };
17
+    }
18
+
19
+    componentWillReceiveProps(nextProps) {
20
+      this.setState({
21
+        allProps: {...nextProps}
22
+      });
14
     }
23
     }
15
 
24
 
16
     render() {
25
     render() {
17
       return (
26
       return (
18
-        <OriginalContainer/>
27
+        <OriginalContainer {...this.state.allProps}/>
19
       );
28
       );
20
     }
29
     }
21
   };
30
   };

+ 51
- 9
src2/containers/ContainerRegistry.test.js View File

1
+import _ from 'lodash';
1
 import {AppRegistry, Text} from 'react-native';
2
 import {AppRegistry, Text} from 'react-native';
2
 import React, {Component} from 'react';
3
 import React, {Component} from 'react';
4
+import renderer from 'react-test-renderer';
3
 
5
 
4
 class MyContainer extends Component {
6
 class MyContainer extends Component {
5
   render() {
7
   render() {
8
+    const txt = `Hello, ${_.get(this.props, 'name', 'World')}!`;
6
     return (
9
     return (
7
-      <Text>{'Hello, World!'}</Text>
10
+      <Text>{txt}</Text>
8
     );
11
     );
9
   }
12
   }
10
 }
13
 }
11
 
14
 
12
-import renderer from 'react-test-renderer';
13
-
14
 describe('ComponentRegistry', () => {
15
 describe('ComponentRegistry', () => {
15
   let uut;
16
   let uut;
16
 
17
 
17
   beforeEach(() => {
18
   beforeEach(() => {
18
     AppRegistry.registerComponent = jest.fn(AppRegistry.registerComponent);
19
     AppRegistry.registerComponent = jest.fn(AppRegistry.registerComponent);
19
-    //jest.mock('react-native', () => ({AppRegistry}));
20
     uut = require('./ContainerRegistry');
20
     uut = require('./ContainerRegistry');
21
   });
21
   });
22
 
22
 
23
-  it('registers container component into AppRegistry', () => {
23
+  function getRegisteredComponentClassFromAppRegistry() {
24
+    return AppRegistry.registerComponent.mock.calls[0][1]();
25
+  }
26
+
27
+  it('registers container component by containerKey into AppRegistry', () => {
24
     expect(AppRegistry.registerComponent).not.toHaveBeenCalled();
28
     expect(AppRegistry.registerComponent).not.toHaveBeenCalled();
25
 
29
 
26
-    uut.registerContainer('example.MyContainer', () => MyContainer);
30
+    uut.registerContainer('example.MyContainer.key', () => MyContainer);
27
 
31
 
28
     expect(AppRegistry.registerComponent).toHaveBeenCalledTimes(1);
32
     expect(AppRegistry.registerComponent).toHaveBeenCalledTimes(1);
29
-    expect(AppRegistry.registerComponent.mock.calls[0][0]).toEqual('example.MyContainer');
33
+    expect(AppRegistry.registerComponent.mock.calls[0][0]).toEqual('example.MyContainer.key');
30
   });
34
   });
31
 
35
 
32
   it('wraps the container', () => {
36
   it('wraps the container', () => {
33
     uut.registerContainer('example.MyContainer', () => MyContainer);
37
     uut.registerContainer('example.MyContainer', () => MyContainer);
34
 
38
 
35
-    const WrappedClass = AppRegistry.registerComponent.mock.calls[0][1]();
39
+    const NavigationContainer = getRegisteredComponentClassFromAppRegistry();
36
     const tree = renderer.create(
40
     const tree = renderer.create(
37
-      <WrappedClass/>
41
+      <NavigationContainer/>
38
     );
42
     );
39
     expect(tree.toJSON().children).toEqual(['Hello, World!']);
43
     expect(tree.toJSON().children).toEqual(['Hello, World!']);
40
   });
44
   });
45
+
46
+  it('passes props from wrapper into original container', () => {
47
+    uut.registerContainer('example.MyContainer', () => MyContainer);
48
+
49
+    const NavigationContainer = getRegisteredComponentClassFromAppRegistry();
50
+    const tree = renderer.create(
51
+      <NavigationContainer name="Daniel"/>
52
+    );
53
+    expect(tree.toJSON().children).toEqual(['Hello, Daniel!']);
54
+  });
55
+  //
56
+  //xit('updates props into original container', () => {
57
+  //uut.registerContainer('example.MyContainer', () => MyContainer);
58
+  //
59
+  //const NavigationContainer = getRegisteredComponentClassFromAppRegistry();
60
+  //
61
+  //class TestParent extends Component {
62
+  //  constructor(props) {
63
+  //    super(props);
64
+  //    this.state = {};
65
+  //  }
66
+  //
67
+  //  render() {
68
+  //    return (
69
+  //      <NavigationContainer/>
70
+  //    );
71
+  //  }
72
+  //}
73
+  //
74
+  //let navContainerRef;
75
+  //const NavigationContainer = getRegisteredComponentClassFromAppRegistry();
76
+  //const tree = renderer.create(
77
+  //  <NavigationContainer ref={(r) => navContainerRef = r} name={_.get(navContainerRef, 'state.name')}/>
78
+  //);
79
+  //expect(tree.toJSON().children).toEqual(['Hello, World!']);
80
+  //navContainerRef.setState({name: 'Gandalf'});
81
+  //expect(tree.toJSON().children).toEqual(['Hello, Gandalf!']);
82
+  //});
41
 });
83
 });