Browse Source

remx update

Daniel Zlotin 7 years ago
parent
commit
0c6638ceab
3 changed files with 33 additions and 28 deletions
  1. 16
    14
      integration/remx/component.js
  2. 15
    12
      integration/remx/remx.test.js
  3. 2
    2
      integration/remx/store.js

+ 16
- 14
integration/remx/component.js View File

1
-import { Text } from 'react-native';
2
 import React, { Component } from 'react';
1
 import React, { Component } from 'react';
2
+import { Text } from 'react-native';
3
 
3
 
4
 import { connect } from 'remx/react-native';
4
 import { connect } from 'remx/react-native';
5
 
5
 
6
-import { selectors } from './store';
6
+import * as store from './store';
7
 
7
 
8
 class MyContainer extends Component {
8
 class MyContainer extends Component {
9
   constructor(props) {
9
   constructor(props) {
10
     super(props);
10
     super(props);
11
-    this.renders = 0;
12
   }
11
   }
13
 
12
 
14
   render() {
13
   render() {
15
-    this.renders++;
14
+    if (this.props.renderCountIncrement) {
15
+      this.props.renderCountIncrement();
16
+    }
16
     if (this.props.printAge) {
17
     if (this.props.printAge) {
17
-      return this.renderAge();
18
+      return this.renderText(this.props.age);
18
     } else {
19
     } else {
19
-      return this.renderName();
20
+      return this.renderText(this.props.name);
20
     }
21
     }
21
   }
22
   }
22
 
23
 
23
-  renderName() {
24
+  renderText(txt) {
24
     return (
25
     return (
25
-      <Text>{selectors.getName()}</Text>
26
+      <Text>{txt}</Text>
26
     );
27
     );
27
   }
28
   }
29
+}
28
 
30
 
29
-  renderAge() {
30
-    return (
31
-      <Text>{selectors.getAge()}</Text>
32
-    );
33
-  }
31
+function mapStateToProps(ownProps) {
32
+  return {
33
+    name: store.getters.getName(),
34
+    age: store.getters.getAge()
35
+  };
34
 }
36
 }
35
 
37
 
36
-export default connect(MyContainer);
38
+export default connect(mapStateToProps)(MyContainer);

+ 15
- 12
integration/remx/remx.test.js View File

1
-require('react-native');
2
 import React from 'react';
1
 import React from 'react';
2
+require('react-native');
3
 import renderer from 'react-test-renderer';
3
 import renderer from 'react-test-renderer';
4
 
4
 
5
 describe('remx support', () => {
5
 describe('remx support', () => {
7
   let store;
7
   let store;
8
 
8
 
9
   beforeEach(() => {
9
   beforeEach(() => {
10
+    jest.resetModules();
10
     MyConnectedContainer = require('./component').default;
11
     MyConnectedContainer = require('./component').default;
11
     store = require('./store');
12
     store = require('./store');
12
   });
13
   });
13
 
14
 
14
   it('renders normally', () => {
15
   it('renders normally', () => {
15
-    const tree = renderer.create(<MyConnectedContainer/>);
16
+    const tree = renderer.create(<MyConnectedContainer />);
16
     expect(tree.toJSON().children).toEqual(['no name']);
17
     expect(tree.toJSON().children).toEqual(['no name']);
17
   });
18
   });
18
 
19
 
19
   it('rerenders as a result of an underlying state change (by selector)', () => {
20
   it('rerenders as a result of an underlying state change (by selector)', () => {
20
-    const tree = renderer.create(<MyConnectedContainer/>);
21
+    const renderCountIncrement = jest.fn();
22
+    const tree = renderer.create(<MyConnectedContainer renderCountIncrement={renderCountIncrement} />);
21
     const instance = tree.getInstance();
23
     const instance = tree.getInstance();
22
 
24
 
23
     expect(tree.toJSON().children).toEqual(['no name']);
25
     expect(tree.toJSON().children).toEqual(['no name']);
24
-    expect(instance.renders).toEqual(1);
26
+    expect(renderCountIncrement).toHaveBeenCalledTimes(1);
25
 
27
 
26
-    store.mutators.setName('Bob');
27
-    expect(store.selectors.getName()).toEqual('Bob');
28
+    store.setters.setName('Bob');
29
+    expect(store.getters.getName()).toEqual('Bob');
28
     expect(tree.toJSON().children).toEqual(['Bob']);
30
     expect(tree.toJSON().children).toEqual(['Bob']);
29
 
31
 
30
-    expect(instance.renders).toEqual(2);
32
+    expect(renderCountIncrement).toHaveBeenCalledTimes(2);
31
   });
33
   });
32
 
34
 
33
   it('rerenders as a result of an underlying state change with a new key using merge', () => {
35
   it('rerenders as a result of an underlying state change with a new key using merge', () => {
34
-    const tree = renderer.create(<MyConnectedContainer printAge={true}/>);
36
+    const renderCountIncrement = jest.fn();
37
+    const tree = renderer.create(<MyConnectedContainer printAge={true} renderCountIncrement={renderCountIncrement} />);
35
     const instance = tree.getInstance();
38
     const instance = tree.getInstance();
36
 
39
 
37
     expect(tree.toJSON().children).toEqual(null);
40
     expect(tree.toJSON().children).toEqual(null);
38
-    expect(instance.renders).toEqual(1);
41
+    expect(renderCountIncrement).toHaveBeenCalledTimes(1);
39
 
42
 
40
-    store.mutators.setAge(30);
41
-    expect(store.selectors.getAge()).toEqual(30);
43
+    store.setters.setAge(30);
44
+    expect(store.getters.getAge()).toEqual(30);
42
     expect(tree.toJSON().children).toEqual([30]);
45
     expect(tree.toJSON().children).toEqual([30]);
43
 
46
 
44
-    expect(instance.renders).toEqual(2);
47
+    expect(renderCountIncrement).toHaveBeenCalledTimes(2);
45
   });
48
   });
46
 });
49
 });

+ 2
- 2
integration/remx/store.js View File

7
   }
7
   }
8
 });
8
 });
9
 
9
 
10
-export const mutators = remx.setters({
10
+export const setters = remx.setters({
11
   setName(newName) {
11
   setName(newName) {
12
     state.person.name = newName;
12
     state.person.name = newName;
13
   },
13
   },
17
   }
17
   }
18
 });
18
 });
19
 
19
 
20
-export const selectors = remx.getters({
20
+export const getters = remx.getters({
21
   getName() {
21
   getName() {
22
     return _.get(state, ['person', 'name']);
22
     return _.get(state, ['person', 'name']);
23
   },
23
   },