瀏覽代碼

tests pass initially

Daniel Zlotin 7 年之前
父節點
當前提交
05f755e82a

+ 2
- 2
lib/src/adapters/Element.tsx 查看文件

3
 import { requireNativeComponent } from 'react-native';
3
 import { requireNativeComponent } from 'react-native';
4
 
4
 
5
 interface ElementProps {
5
 interface ElementProps {
6
-  elementId: any;
7
-  resizeMode: any;
6
+  elementId;
7
+  resizeMode;
8
 }
8
 }
9
 
9
 
10
 let RNNElement: React.ComponentClass;
10
 let RNNElement: React.ComponentClass;

+ 1
- 1
lib/src/adapters/NativeCommandsSender.ts 查看文件

1
 import { NativeModules } from 'react-native';
1
 import { NativeModules } from 'react-native';
2
 
2
 
3
 export class NativeCommandsSender {
3
 export class NativeCommandsSender {
4
-  private nativeCommandsModule: any;
4
+  private nativeCommandsModule;
5
 
5
 
6
   constructor() {
6
   constructor() {
7
     this.nativeCommandsModule = NativeModules.RNNBridgeModule;
7
     this.nativeCommandsModule = NativeModules.RNNBridgeModule;

+ 5
- 5
lib/src/adapters/NativeEventsReceiver.ts 查看文件

1
 import { NativeModules, NativeEventEmitter } from 'react-native';
1
 import { NativeModules, NativeEventEmitter } from 'react-native';
2
 
2
 
3
 export class NativeEventsReceiver {
3
 export class NativeEventsReceiver {
4
-  private emitter: NativeEventEmitter;
4
+  private emitter;
5
 
5
 
6
   constructor() {
6
   constructor() {
7
     this.emitter = new NativeEventEmitter(NativeModules.RNNEventEmitter);
7
     this.emitter = new NativeEventEmitter(NativeModules.RNNEventEmitter);
8
   }
8
   }
9
 
9
 
10
-  registerComponentDidAppear(callback: any) {
10
+  registerComponentDidAppear(callback) {
11
     this.emitter.addListener('RNN.componentDidAppear', callback);
11
     this.emitter.addListener('RNN.componentDidAppear', callback);
12
   }
12
   }
13
 
13
 
14
-  registerComponentDidDisappear(callback: any) {
14
+  registerComponentDidDisappear(callback) {
15
     this.emitter.addListener('RNN.componentDidDisappear', callback);
15
     this.emitter.addListener('RNN.componentDidDisappear', callback);
16
   }
16
   }
17
 
17
 
18
-  registerAppLaunched(callback: any) {
18
+  registerAppLaunched(callback) {
19
     this.emitter.addListener('RNN.appLaunched', callback);
19
     this.emitter.addListener('RNN.appLaunched', callback);
20
   }
20
   }
21
 
21
 
22
-  registerNavigationButtonPressed(callback: any) {
22
+  registerNavigationButtonPressed(callback) {
23
     this.emitter.addListener('RNN.navigationButtonPressed', callback);
23
     this.emitter.addListener('RNN.navigationButtonPressed', callback);
24
   }
24
   }
25
 }
25
 }

+ 4
- 4
lib/src/commands/Commands.ts 查看文件

2
 import { OptionsProcessor } from './OptionsProcessor';
2
 import { OptionsProcessor } from './OptionsProcessor';
3
 
3
 
4
 export class Commands {
4
 export class Commands {
5
-  private nativeCommandsSender: any;
6
-  private layoutTreeParser: any;
7
-  private layoutTreeCrawler: any;
5
+  private nativeCommandsSender;
6
+  private layoutTreeParser;
7
+  private layoutTreeCrawler;
8
 
8
 
9
   constructor(nativeCommandsSender, layoutTreeParser, layoutTreeCrawler) {
9
   constructor(nativeCommandsSender, layoutTreeParser, layoutTreeCrawler) {
10
     this.nativeCommandsSender = nativeCommandsSender;
10
     this.nativeCommandsSender = nativeCommandsSender;
12
     this.layoutTreeCrawler = layoutTreeCrawler;
12
     this.layoutTreeCrawler = layoutTreeCrawler;
13
   }
13
   }
14
 
14
 
15
-  setRoot(simpleApi: any) {
15
+  setRoot(simpleApi) {
16
     const input = _.cloneDeep(simpleApi);
16
     const input = _.cloneDeep(simpleApi);
17
     const layout = this.layoutTreeParser.parse(input);
17
     const layout = this.layoutTreeParser.parse(input);
18
     this.layoutTreeCrawler.crawl(layout);
18
     this.layoutTreeCrawler.crawl(layout);

+ 1
- 1
lib/src/commands/LayoutTreeCrawler.test.ts 查看文件

2
 import { LayoutTreeCrawler } from './LayoutTreeCrawler';
2
 import { LayoutTreeCrawler } from './LayoutTreeCrawler';
3
 import { UniqueIdProvider } from '../adapters/UniqueIdProvider.mock';
3
 import { UniqueIdProvider } from '../adapters/UniqueIdProvider.mock';
4
 import { LayoutNode } from './values/LayoutNode';
4
 import { LayoutNode } from './values/LayoutNode';
5
-const Store = require('../components/Store');
5
+import { Store } from '../components/Store';
6
 
6
 
7
 describe('LayoutTreeCrawler', () => {
7
 describe('LayoutTreeCrawler', () => {
8
   let uut;
8
   let uut;

+ 1
- 1
lib/src/commands/LayoutTreeParser.ts 查看文件

7
     this.parse = this.parse.bind(this);
7
     this.parse = this.parse.bind(this);
8
   }
8
   }
9
 
9
 
10
-  parse(api: any): LayoutNode {
10
+  parse(api): LayoutNode {
11
     if (api.topTabs) {
11
     if (api.topTabs) {
12
       return this._topTabs(api.topTabs);
12
       return this._topTabs(api.topTabs);
13
     } else if (api.sideMenu) {
13
     } else if (api.sideMenu) {

+ 1
- 1
lib/src/commands/OptionsProcessor.test.ts 查看文件

1
 import { OptionsProcessor } from './OptionsProcessor';
1
 import { OptionsProcessor } from './OptionsProcessor';
2
 
2
 
3
 describe('navigation options', () => {
3
 describe('navigation options', () => {
4
-  let options: any;
4
+  let options;
5
 
5
 
6
   beforeEach(() => {
6
   beforeEach(() => {
7
     options = {};
7
     options = {};

+ 1
- 1
lib/src/commands/OptionsProcessor.ts 查看文件

3
 import * as resolveAssetSource from 'react-native/Libraries/Image/resolveAssetSource';
3
 import * as resolveAssetSource from 'react-native/Libraries/Image/resolveAssetSource';
4
 
4
 
5
 export class OptionsProcessor {
5
 export class OptionsProcessor {
6
-  static processOptions(options: any) {
6
+  static processOptions(options) {
7
     _.forEach(options, (value, key) => {
7
     _.forEach(options, (value, key) => {
8
       if (!value) return
8
       if (!value) return
9
 
9
 

lib/src/components/ComponentRegistry.test.ts → lib/src/components/ComponentRegistry.test.tsx 查看文件

1
-const React = require('react');
2
-const { Component } = require('react');
3
-const { AppRegistry, Text } = require('react-native');
4
-
5
-const renderer = require('react-test-renderer');
6
-const ComponentRegistry = require('./ComponentRegistry');
7
-const Store = require('./Store');
1
+import * as React from 'react';
2
+import { AppRegistry, Text } from 'react-native';
3
+import * as renderer from 'react-test-renderer';
4
+import { ComponentRegistry } from './ComponentRegistry';
5
+import { Store } from './Store';
8
 
6
 
9
 describe('ComponentRegistry', () => {
7
 describe('ComponentRegistry', () => {
10
   let uut;
8
   let uut;
11
   let store;
9
   let store;
10
+  let mockRegistry: any;
12
 
11
 
13
-  class MyComponent extends Component {
12
+  class MyComponent extends React.Component {
14
     render() {
13
     render() {
15
-      return <Text>{'Hello, World!'}</Text>;
14
+      return (
15
+        <Text>
16
+          {
17
+            'Hello, World!'
18
+          }
19
+        </Text>);
16
     }
20
     }
17
   }
21
   }
18
 
22
 
19
   beforeEach(() => {
23
   beforeEach(() => {
20
     store = new Store();
24
     store = new Store();
21
-    AppRegistry.registerComponent = jest.fn(AppRegistry.registerComponent);
25
+    mockRegistry = AppRegistry.registerComponent = jest.fn(AppRegistry.registerComponent);
22
     uut = new ComponentRegistry(store);
26
     uut = new ComponentRegistry(store);
23
   });
27
   });
24
 
28
 
25
   it('registers component component by componentName into AppRegistry', () => {
29
   it('registers component component by componentName into AppRegistry', () => {
26
-    expect(AppRegistry.registerComponent).not.toHaveBeenCalled();
30
+    expect(mockRegistry).not.toHaveBeenCalled();
27
     uut.registerComponent('example.MyComponent.name', () => MyComponent);
31
     uut.registerComponent('example.MyComponent.name', () => MyComponent);
28
-    expect(AppRegistry.registerComponent).toHaveBeenCalledTimes(1);
29
-    expect(AppRegistry.registerComponent.mock.calls[0][0]).toEqual('example.MyComponent.name');
32
+    expect(mockRegistry).toHaveBeenCalledTimes(1);
33
+    expect(mockRegistry.mock.calls[0][0]).toEqual('example.MyComponent.name');
30
   });
34
   });
31
 
35
 
32
   it('saves the original component into the store', () => {
36
   it('saves the original component into the store', () => {
35
     const Class = store.getOriginalComponentClassForName('example.MyComponent.name');
39
     const Class = store.getOriginalComponentClassForName('example.MyComponent.name');
36
     expect(Class).not.toBeUndefined();
40
     expect(Class).not.toBeUndefined();
37
     expect(Class).toEqual(MyComponent);
41
     expect(Class).toEqual(MyComponent);
38
-    expect(Object.getPrototypeOf(Class)).toEqual(Component);
42
+    expect(Object.getPrototypeOf(Class)).toEqual(React.Component);
39
   });
43
   });
40
 
44
 
41
   it('resulting in a normal component', () => {
45
   it('resulting in a normal component', () => {
42
     uut.registerComponent('example.MyComponent.name', () => MyComponent);
46
     uut.registerComponent('example.MyComponent.name', () => MyComponent);
43
-    const Component = AppRegistry.registerComponent.mock.calls[0][1]();
47
+    const Component = mockRegistry.mock.calls[0][1]();
44
     const tree = renderer.create(<Component componentId="123" />);
48
     const tree = renderer.create(<Component componentId="123" />);
45
     expect(tree.toJSON().children).toEqual(['Hello, World!']);
49
     expect(tree.toJSON().children).toEqual(['Hello, World!']);
46
   });
50
   });

+ 4
- 4
lib/src/components/ComponentRegistry.ts 查看文件

1
 import * as React from 'react';
1
 import * as React from 'react';
2
-import { AppRegistry } from 'react-native';
3
-import {ComponentWrapper} from './ComponentWrapper';
2
+import { AppRegistry, ComponentProvider } from 'react-native';
3
+import { ComponentWrapper } from './ComponentWrapper';
4
 
4
 
5
 export class ComponentRegistry {
5
 export class ComponentRegistry {
6
-  private store: any;
6
+  private store;
7
 
7
 
8
   constructor(store) {
8
   constructor(store) {
9
     this.store = store;
9
     this.store = store;
10
   }
10
   }
11
 
11
 
12
-  registerComponent(componentName: string, getComponentClassFunc: ()=>React.Component) {
12
+  registerComponent(componentName: string, getComponentClassFunc: ComponentProvider) {
13
     const OriginalComponentClass = getComponentClassFunc();
13
     const OriginalComponentClass = getComponentClassFunc();
14
     const NavigationComponent = ComponentWrapper.wrap(componentName, OriginalComponentClass, this.store);
14
     const NavigationComponent = ComponentWrapper.wrap(componentName, OriginalComponentClass, this.store);
15
     this.store.setOriginalComponentClassForName(componentName, OriginalComponentClass);
15
     this.store.setOriginalComponentClassForName(componentName, OriginalComponentClass);

lib/src/components/ComponentWrapper.test.ts → lib/src/components/ComponentWrapper.test.tsx 查看文件

1
-const React = require('react');
2
-const { Component } = require('react');
3
-
4
-const { Text } = require('react-native');
5
-const renderer = require('react-test-renderer');
6
-const ComponentWrapper = require('./ComponentWrapper');
7
-const Store = require('./Store');
1
+import * as React from 'react';
2
+import { Text } from 'react-native';
3
+import * as renderer from 'react-test-renderer';
4
+import { ComponentWrapper } from './ComponentWrapper';
5
+import { Store } from './Store';
6
+
7
+declare module 'react-test-renderer' {
8
+  interface ReactTestInstance {
9
+    [P: string]: any;
10
+  }
11
+}
8
 
12
 
9
 describe('ComponentWrapper', () => {
13
 describe('ComponentWrapper', () => {
10
   let store;
14
   let store;
11
   const componentName = 'example.MyComponent';
15
   const componentName = 'example.MyComponent';
12
   let childRef;
16
   let childRef;
13
 
17
 
14
-  class MyComponent extends Component {
18
+  class MyComponent extends React.Component {
15
     render() {
19
     render() {
16
       return <Text>{'Hello, World!'}</Text>;
20
       return <Text>{'Hello, World!'}</Text>;
17
     }
21
     }
18
   }
22
   }
19
 
23
 
20
-  class TestParent extends Component {
24
+
25
+
26
+  class TestParent extends React.Component<any, { propsFromState: {} }> {
27
+    private ChildClass;
28
+
21
     constructor(props) {
29
     constructor(props) {
22
       super(props);
30
       super(props);
23
       this.ChildClass = props.ChildClass;
31
       this.ChildClass = props.ChildClass;
25
     }
33
     }
26
 
34
 
27
     render() {
35
     render() {
28
-      const Child = this.ChildClass;
29
       return (
36
       return (
30
-        <Child
37
+        <this.ChildClass
31
           ref={(r) => childRef = r}
38
           ref={(r) => childRef = r}
32
           componentId="component1"
39
           componentId="component1"
33
           {...this.state.propsFromState}
40
           {...this.state.propsFromState}
46
     console.error = (a) => a;
53
     console.error = (a) => a;
47
     expect(() => {
54
     expect(() => {
48
       renderer.create(<NavigationComponent />);
55
       renderer.create(<NavigationComponent />);
49
-    }).toThrow(new Error('Component example.MyComponent does not have a componentId!'));
56
+    }).toThrowError('Component example.MyComponent does not have a componentId!');
50
     console.error = orig;
57
     console.error = orig;
51
   });
58
   });
52
 
59
 
132
     const NavigationComponent = ComponentWrapper.wrap(componentName, MyComponent, store);
139
     const NavigationComponent = ComponentWrapper.wrap(componentName, MyComponent, store);
133
     const tree = renderer.create(<NavigationComponent componentId={'component1'} />);
140
     const tree = renderer.create(<NavigationComponent componentId={'component1'} />);
134
     const instance = tree.getInstance();
141
     const instance = tree.getInstance();
135
-    expect(instance.originalComponentRef).toBeInstanceOf(Component);
142
+    expect(instance.originalComponentRef).toBeInstanceOf(React.Component);
136
     tree.unmount();
143
     tree.unmount();
137
     expect(instance.originalComponentRef).toBeFalsy();
144
     expect(instance.originalComponentRef).toBeFalsy();
138
   });
145
   });

+ 0
- 73
lib/src/components/ComponentWrapper.ts 查看文件

1
-import * as React from 'react';
2
-import * as  _ from 'lodash';
3
-
4
-interface State {
5
-  componentId: string,
6
-  allProps: {}
7
-}
8
-
9
-export class ComponentWrapper {
10
-  static wrap(componentName: string, OriginalComponentClass: React.ComponentClass | React.StatelessComponent, store: any): React.ComponentClass {
11
-    class WrappedComponent extends React.Component<any, State> {
12
-      render() {
13
-        return <div />;
14
-      }
15
-    };
16
-
17
-    return WrappedComponent;
18
-  }
19
-}
20
-
21
-// this._saveComponentRef = this._saveComponentRef.bind(this);
22
-//         this._assertComponentId(props);
23
-//         this.state = {
24
-//           componentId: props.componentId,
25
-//           allProps: _.merge({}, props, store.getPropsForComponentId(props.componentId))
26
-//         };
27
-
28
-// _assertComponentId(props) {
29
-//   if (!props.componentId) {
30
-//     throw new Error(`Component ${componentName} does not have a componentId!`);
31
-//   }
32
-// }
33
-
34
-// _saveComponentRef(r) {
35
-//   this.originalComponentRef = r;
36
-// }
37
-
38
-// componentWillMount() {
39
-//   store.setRefForComponentId(this.state.componentId, this);
40
-// }
41
-
42
-// componentWillUnmount() {
43
-//   store.cleanId(this.state.componentId);
44
-// }
45
-
46
-// didAppear() {
47
-//   if (this.originalComponentRef.didAppear) {
48
-//     this.originalComponentRef.didAppear();
49
-//   }
50
-// }
51
-
52
-// didDisappear() {
53
-//   if (this.originalComponentRef.didDisappear) {
54
-//     this.originalComponentRef.didDisappear();
55
-//   }
56
-// }
57
-
58
-// onNavigationButtonPressed(buttonId) {
59
-//   if (this.originalComponentRef.onNavigationButtonPressed) {
60
-//     this.originalComponentRef.onNavigationButtonPressed(buttonId);
61
-//   }
62
-// }
63
-
64
-// componentWillReceiveProps(nextProps) {
65
-//   this.setState({
66
-//     allProps: _.merge({}, nextProps, store.getPropsForComponentId(this.state.componentId))
67
-//   });
68
-// }
69
-
70
-// ref= { this._saveComponentRef }
71
-//         {...this.state.allProps }
72
-//         componentId = { this.state.componentId }
73
-//         key = { this.state.componentId }

+ 82
- 0
lib/src/components/ComponentWrapper.tsx 查看文件

1
+import * as React from 'react';
2
+import * as  _ from 'lodash';
3
+
4
+interface State {
5
+  componentId: string,
6
+  allProps: {}
7
+}
8
+
9
+export class ComponentWrapper {
10
+  static wrap(componentName: string, OriginalComponentClass: React.ComponentType<any>, store): React.ComponentType<any> {
11
+
12
+    class WrappedComponent extends React.Component<any, State> {
13
+
14
+      private originalComponentRef;
15
+
16
+      constructor(props) {
17
+        super(props);
18
+        this._saveComponentRef = this._saveComponentRef.bind(this);
19
+        this._assertComponentId(props);
20
+        this.state = {
21
+          componentId: props.componentId,
22
+          allProps: _.merge({}, props, store.getPropsForComponentId(props.componentId))
23
+        };
24
+      }
25
+
26
+      _assertComponentId(props) {
27
+        if (!props.componentId) {
28
+          throw new Error(`Component ${componentName} does not have a componentId!`);
29
+        }
30
+      }
31
+
32
+      _saveComponentRef(r) {
33
+        this.originalComponentRef = r;
34
+      }
35
+
36
+      componentWillMount() {
37
+        store.setRefForComponentId(this.state.componentId, this);
38
+      }
39
+
40
+      componentWillUnmount() {
41
+        store.cleanId(this.state.componentId);
42
+      }
43
+
44
+      didAppear() {
45
+        if (this.originalComponentRef.didAppear) {
46
+          this.originalComponentRef.didAppear();
47
+        }
48
+      }
49
+
50
+      didDisappear() {
51
+        if (this.originalComponentRef.didDisappear) {
52
+          this.originalComponentRef.didDisappear();
53
+        }
54
+      }
55
+
56
+      onNavigationButtonPressed(buttonId) {
57
+        if (this.originalComponentRef.onNavigationButtonPressed) {
58
+          this.originalComponentRef.onNavigationButtonPressed(buttonId);
59
+        }
60
+      }
61
+
62
+      componentWillReceiveProps(nextProps) {
63
+        this.setState({
64
+          allProps: _.merge({}, nextProps, store.getPropsForComponentId(this.state.componentId))
65
+        });
66
+      }
67
+
68
+      render() {
69
+        return (
70
+          <OriginalComponentClass
71
+            ref={this._saveComponentRef}
72
+            { ...this.state.allProps }
73
+            componentId={this.state.componentId}
74
+            key={this.state.componentId}
75
+          />
76
+        );
77
+      }
78
+    };
79
+
80
+    return WrappedComponent;
81
+  }
82
+}

+ 1
- 1
lib/src/components/Lifecycle.ts 查看文件

1
 export class Lifecycle {
1
 export class Lifecycle {
2
-  private store: any;
2
+  private store;
3
 
3
 
4
   constructor(store) {
4
   constructor(store) {
5
     this.store = store;
5
     this.store = store;

+ 2
- 2
lib/src/events/PrivateEventsListener.test.ts 查看文件

4
 
4
 
5
 describe('PrivateEventsListener', () => {
5
 describe('PrivateEventsListener', () => {
6
   let uut: PrivateEventsListener;
6
   let uut: PrivateEventsListener;
7
-  let nativeEventsReceiver: any;
8
-  let store: any;
7
+  let nativeEventsReceiver;
8
+  let store;
9
 
9
 
10
   beforeEach(() => {
10
   beforeEach(() => {
11
     nativeEventsReceiver = new NativeEventsReceiver();
11
     nativeEventsReceiver = new NativeEventsReceiver();

+ 4
- 4
lib/src/events/PrivateEventsListener.ts 查看文件

1
-import * as Lifecycle from '../components/Lifecycle';
1
+import { Lifecycle } from '../components/Lifecycle';
2
 
2
 
3
 export class PrivateEventsListener {
3
 export class PrivateEventsListener {
4
-  private nativeEventsReceiver: any;
5
-  private lifecycle: any;
4
+  private nativeEventsReceiver;
5
+  private lifecycle;
6
 
6
 
7
-  constructor(nativeEventsReceiver: any, store: any) {
7
+  constructor(nativeEventsReceiver, store) {
8
     this.nativeEventsReceiver = nativeEventsReceiver;
8
     this.nativeEventsReceiver = nativeEventsReceiver;
9
     this.lifecycle = new Lifecycle(store);
9
     this.lifecycle = new Lifecycle(store);
10
   }
10
   }

+ 1
- 1
lib/src/events/PublicEventsRegistry.ts 查看文件

1
 export class PublicEventsRegistry {
1
 export class PublicEventsRegistry {
2
-  private nativeEventsReceiver: any;
2
+  private nativeEventsReceiver;
3
 
3
 
4
   constructor(nativeEventsReceiver) {
4
   constructor(nativeEventsReceiver) {
5
     this.nativeEventsReceiver = nativeEventsReceiver;
5
     this.nativeEventsReceiver = nativeEventsReceiver;