use new subscribe function

wangtao0101 · Sep 28, 2018 · 3b40f18 · 3b40f18
1 parent 582fbe8
commit 3b40f18
Show file tree

Hide file tree

Showing 4 changed files with 264 additions and 176 deletions.
diff --git a/src/components/Subscribe.test.tsx b/src/components/Subscribe.test.tsx
@@ -1,9 +1,6 @@
 import * as React from 'react';
-import { init, Model, effect, reducer } from '../decorators';
-import createResa from '../resa';
+import createResa, { subscribe, Provider, init, Model, effect } from 'resa';
 import * as TestUtils from 'react-dom/test-utils';
-import Subscribe, { ThemeSubscribe } from './Subscribe';
-import Provider from './Provider';
 
 interface MyModelState {
     count: number;
@@ -21,7 +18,7 @@ class MyModel extends Model<MyModelState> {
     @effect()
     *add() {
         this.fulfilled({
-            count: 1,
+            count: this.state.count + 1,
         });
     }
 
@@ -44,60 +41,107 @@ class SecondModel extends Model<MyModelState> {
     @effect()
     *add() {
         this.fulfilled({
-            count: 1,
+            count: this.state.count + 1,
         });
     }
 }
 
+class Child extends React.Component<any, any> {
+    render() {
+        return <div>{this.props.myModel.state.count}</div>;
+    }
+}
+
 describe('Subscribe', () => {
-    it('calculateShouldUpdate should return true only when update used states', async () => {
+    it('should pass own props', async () => {
         const app = createResa();
+        interface TempChildProps {
+            myModel: MyModel;
+            k: string;
+        }
+        class TempChild extends React.Component<TempChildProps, any> {
+            render() {
+                return <div>{this.props.myModel.state.count}</div>;
+            }
+        }
+        const SubscribeChild = subscribe({ myModel: MyModel })(TempChild);
         const tree = TestUtils.renderIntoDocument(
             <Provider store={app.store} resa={app}>
-                <Subscribe to={[new MyModel()]}>{(myModel: MyModel) => <div>{myModel.state.count}</div>}</Subscribe>
+                <SubscribeChild k="k" />
             </Provider>,
         );
-        const container = TestUtils.findRenderedComponentWithType(tree, ThemeSubscribe);
-        container.render = jest.fn();
-        app.models.model.add();
-        app.models.model.ss();
-        expect(container.render).toBeCalledTimes(1);
+        const container = TestUtils.findRenderedComponentWithType(tree, TempChild);
+        expect(container.props.k).toEqual('k');
     });
 
-    it('new resa model', async () => {
+    it('calculateShouldUpdate should return true only when update used states', async () => {
         const app = createResa();
-        TestUtils.renderIntoDocument(
+        const SubscribeChild = subscribe({ myModel: MyModel })(Child);
+        const tree = TestUtils.renderIntoDocument(
             <Provider store={app.store} resa={app}>
-                <Subscribe to={[MyModel]}>{(myModel: MyModel) => <div>{myModel.state.count}</div>}</Subscribe>
+                <SubscribeChild />
             </Provider>,
         );
+        const container = TestUtils.findRenderedComponentWithType(tree, Child);
+        container.render = jest.fn();
         app.models.model.add();
+        app.models.model.ss();
+        expect(container.render).toBeCalledTimes(1);
     });
 
-    it.only('should not notify nested sub', async () => {
+    it('should notify nested sub only changed state', async () => {
         const app = createResa();
+
+        class SencondChild extends React.Component<any, any> {
+            render() {
+                return <div>{this.props.secondModel.state.count}</div>;
+            }
+        }
+        const SubscribeSencondChild = subscribe({ myModel: MyModel, secondModel: SecondModel })(SencondChild);
+
+        class FirstChild extends React.Component<any, any> {
+            render() {
+                return (
+                    <div>
+                        {this.props.myModel.state.count}
+                        <SubscribeSencondChild />
+                    </div>
+                );
+            }
+        }
+
+        const SubscribeFirstChild = subscribe({ myModel: MyModel })(FirstChild);
+
         const tree = TestUtils.renderIntoDocument(
             <Provider store={app.store} resa={app}>
-                <Subscribe to={[MyModel]}>
-                    {(myModel: MyModel) => (
-                        <div>
-                            {myModel.state.count}
-                            <Subscribe to={[SecondModel, MyModel]}>
-                                {(secondModel: SecondModel) => (
-                                    <div>
-                                        {secondModel.state.count}
-                                    </div>
-                                )}
-                            </Subscribe>
-                        </div>
-                    )}
-                </Subscribe>
+                <SubscribeFirstChild />
             </Provider>,
         );
-        // const container = TestUtils.scryRenderedComponentsWithType(tree, ThemeSubscribe)[1];
-        // container.render = jest.fn();
+        const container = TestUtils.findRenderedComponentWithType(tree, SencondChild);
+        container.render = jest.fn();
         app.models.model.add();
-        /* TODO: render should be called 1 */
-        // expect(container.render).toBeCalledTimes(0);
+        expect(container.render).toBeCalledTimes(0);
+        app.models.sencondModel.add();
+        expect(container.render).toBeCalledTimes(1);
+    });
+
+    it('should throw two same model name error', () => {
+        expect(() => {
+            @init<any>({
+                name: 'model',
+                state: {
+                },
+            })
+            class SameModel extends Model<MyModelState> {
+            }
+
+            const app: any = createResa();
+            const SubscribeChild = subscribe({ myModel: MyModel, sameModel: SameModel })(Child);
+            TestUtils.renderIntoDocument(
+                <Provider store={app.store} resa={app}>
+                    <SubscribeChild />
+                </Provider>,
+            );
+        }).toThrow(/Different Model should not use the same model name, Please check name: model/);
     });
 });