split component testing and behavior testing

Author: jcouyang

examples/counter/bin/compiler.jar

@@ -0,0 +1,70 @@
+{
+  "name": "mostux-todomvc",
+  "version": "0.0.1",
+  "description": "",
+  "browserify": {
+    "transform": [
+      [
+        "babelify",
+        {
+          "extensions": [
+            ".es6",
+            ".jsx",
+            ".js"
+          ]
+        }
+      ]
+    ]
+  },
+  "scripts": {
+    "build": "NODE_ENV=production browserify src/app.jsx --extension=.jsx --extension=.es6 | java -jar bin/compiler.jar > public/app.js",
+    "start": "ecstatic -p 8000 public",
+    "watch": "watchify -d src/app.jsx --extension=.jsx --extension=.es6 -o public/app.js -dv",
+    "test": "jest"
+  },
+  "jest": {
+    "scriptPreprocessor": "<rootDir>/node_modules/babel-jest",
+    "testFileExtensions": [
+      "es6",
+      "js",
+      "jsx"
+    ],
+    "moduleFileExtensions": [
+      "js",
+      "json",
+      "es6",
+      "jsx"
+    ]
+  },
+  "dependencies": {
+    "classnames": "^2.2.0",
+    "lodash": "^4.0.0",
+    "react": "^0.14.2",
+    "react-dom": "^0.14.2",
+    "rest": "^1.3.1"
+  },
+  "devDependencies": {
+    "babel": "^6.1.18",
+    "babel-jest": "^6.0.0",
+    "babel-plugin-lodash": "^2.0.1",
+    "babel-plugin-transform-react-jsx": "^6.1.18",
+    "babel-preset-es2015": "^6.1.18",
+    "babelify": "^7.2.0",
+    "browserify": "^12.0.1",
+    "ecstatic": "^1.3.1",
+    "jest-cli": "^0.7.0",
+    "uglify-js": "^2.6.1",
+    "watchify": "^3.6.1"
+  },
+  "author": "Jichao Ouyang",
+  "license": "ISC",
+  "babel": {
+    "presets": [
+      "es2015"
+    ],
+    "plugins": [
+      "transform-react-jsx",
+      "lodash"
+    ]
+  }
+}

examples/counter/package.json

@@ -0,0 +1,55 @@
+import React, { Component, PropTypes } from 'react';
+import {render} from 'react-dom';
+import most from 'most';
+import Most from '../../../lib/react-most'
+import {connect} from '../../../lib/react-most'
+const App = React.createClass({
+
+  getInitialState(){
+    return {show: false}
+  },
+  componentDidMount() {
+    this.props.actions.add();
+    this.props.actions.add();
+    this.props.actions.add();
+    setTimeout(() => this.setState({
+      show: true
+    }, () => {
+      this.props.actions.add();
+      this.props.actions.add();
+      this.props.actions.add();
+    }), 2000);
+  },
+  render(){
+    return (
+      <div>
+        <RCount />
+        {this.state.show ? <RCount/> : null}
+        <button onClick={this.props.actions.add}>+</button>
+      </div>
+    )
+  }
+})
+
+const Count = (props) => {
+  return <div>{props.count}</div>
+}
+const RCount = connect((intent$)=>{
+  return {
+    countSink$: intent$
+    .filter(x => x.type === 'add')
+    .map(intent => state => ({count: (state.count||0) + 1})),
+  }
+})(Count)
+
+const RApp = connect((intent$) => {
+  return {
+    add: _=>({type: 'add'}),
+  }
+})(App)
+
+render(
+  <Most>
+    <RApp/>
+  </Most>
+  , document.getElementById('app'));

examples/counter/src/app.jsx

@@ -0,0 +1 @@
+jcouyang@CNjcouyang.local.799

examples/transducer-type-n-search/src/.#app.jsx

@@ -24,6 +24,9 @@
   },
   "jest": {
     "scriptPreprocessor": "<rootDir>/node_modules/babel-jest",
+    "unmockedModulePathPatterns": [
+      "<rootDir>/node_modules/*"
+    ],
     "testFileExtensions": [
       "es6",
       "js",

examples/type-n-search-with-undo/package.json

@@ -0,0 +1,36 @@
+'use strict';
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = initHistory;
+function initHistory(contextHistory) {
+  var history = contextHistory.timestamp().scan(function (acc, state) {
+    acc.push(state);
+    return acc;
+  }, []).tap(function (_) {
+    return console.log(_, 'history');
+  }).multicast();
+  var travel = contextHistory.travel;
+  history.cursor = -1;
+  history.travel = travel.sample(function (offset, states) {
+    var cursor = offset(states.length + history.cursor);
+    if (cursor < states.length && cursor >= 0) {
+      history.cursor = offset(history.cursor);
+      return states[cursor].value;
+    }
+  }, travel, history).filter(function (x) {
+    return !!x;
+  });
+  history.forward = function () {
+    travel.send(function (x) {
+      return x + 1;
+    });
+  };
+  history.backward = function () {
+    travel.send(function (x) {
+      return x - 1;
+    });
+  };
+  return history;
+}

history.js

@@ -1,5 +1,7 @@
 jest.dontMock('../react-most');
+jest.dontMock('../history');
 jest.dontMock('../engine/most');
+jest.dontMock('most')
 import React from 'react';
 import ReactDOM from 'react-dom';
 import TestUtils from 'react-addons-test-utils';
@@ -14,15 +16,6 @@ describe('mostux', () => {
         return <div className={'todo-'+this.props.todo.id} key={this.props.todo.id} data-complete={this.props.todo.done}>{this.props.todo.text}</div>
       }
     });
-    let Buttons = React.createClass({
-      render(){
-        return (
-          <div>
-            <button className="btn-complete" onClick={e=>this.props.actions.done(1)} >complete</button>
-            <button className="btn-remove" onClick={e=>this.props.actions.remove(1)} >add</button>
-          </div>)
-      }
-    });
 
     let TodoList = React.createClass({
       render(){
@@ -35,12 +28,17 @@ describe('mostux', () => {
         }
         return <div>
             {todoElements}
-            <Buttons actions={this.props.actions} />
         </div>
       }
     });
 
     let RxTodoList = connect(function(intent$){
+      let default$ = most.of(()=>({
+        todos: [
+          {id:1, text:5, done:false},
+          {id:2, text:'heheda', done:false},
+        ]
+      }))
       let done$ = intent$.filter(x=>x.type=='done');
       let delete$ = intent$.filter(x=>x.type=='remove');
       let doneState$ = done$.map((done)=>{
@@ -61,42 +59,51 @@ describe('mostux', () => {
         return state=>(
           {todos: state.todos.filter(todo=>todo.id!=deleted.id)}
         )
-      })
-                               .startWith(()=>({
-                                 todos: [
-                                   {id:1, text:5, done:false},
-                                   {id:2, text:'heheda', done:false},
-                                 ]
-                               }));
+      });
       return {
         done: (id)=>({type:'done', id}),
-        remove: (id)=>({type:'remove', id}),
+        remove: function remove(id){return {type:'remove', id}},
+        default$,
         deleteState$,
         doneState$,
       }
     })(TodoList);
-    beforeEach(()=>{
-      todolist = TestUtils.renderIntoDocument(
-        <Most>
-          <RxTodoList />
-        </Most>
+
+    it('render dump Component TodoList UI correctly', () => {
+      let todolist = TestUtils.renderIntoDocument(
+        <TodoList todos={[
+          {id:1, text:5, done:false},
+          {id:2, text:'heheda', done:false},
+        ]}/>
       )
+      jest.runAllTimers();
+      let todos = TestUtils.scryRenderedComponentsWithType(todolist, Todo)
+      expect(todos.length).toBe(2);
+      expect(todos[0].props.todo.done).toBe(false);
     });
 
-    it('click complete buttom will complete', () => {
-      jest.runAllTimers();
-      expect(TestUtils.scryRenderedComponentsWithType(todolist, Todo)[0].props.todo.done).toBe(false);
-      TestUtils.Simulate.click(TestUtils.findRenderedDOMComponentWithClass(todolist, 'btn-complete'));
-      jest.runAllTimers();
-      expect(TestUtils.scryRenderedComponentsWithType(todolist, Todo)[0].props.todo.done).toBe(true);
+    it('behavior connected to dump Component works as expected', ()=> {
+      let todolist = TestUtils.renderIntoDocument(
+        <Most >
+          <RxTodoList history={true}>
+          </RxTodoList>
+        </Most>
+      )
 
+      var div = TestUtils.
+findRenderedComponentWithType(todolist, RxTodoList)
+
+      let stream = div.context['__reactive.react.historyStream__']
+      var a = most.from([
+        ()=>div.actions.done(1),
+        ()=>div.actions.done(2),
+        ()=>div.actions.remove(2),
+        ()=>div.actions.done(1)
+      ])
+      a.reduce((acc,x)=>x())
+      return stream.take(5).forEach(_=>_).then(x=>expect(x).toEqual({todos: [
+        {id: 1, text: 5, done: false}
+      ]}))
     });
-    it('click remove button will remove item', ()=> {
-      jest.runAllTimers();
-      TestUtils.Simulate.click(TestUtils.findRenderedDOMComponentWithClass(todolist, 'btn-remove'));
-      TestUtils.Simulate.click(TestUtils.findRenderedDOMComponentWithClass(todolist, 'btn-remove'));
-      jest.runAllTimers();
-      jest.runAllTicks();
-      expect(TestUtils.scryRenderedComponentsWithType(todolist, Todo).length).toBe(1);
-    });  });
+  });
 })

lib/__tests__/react-most-test.jsx

@@ -1,12 +1,11 @@
 export default function initHistory(contextHistory){
   let history = contextHistory
-    .timestamp()
-    .scan((acc,state)=>{
-      acc.push(state)
-      return acc;
-    }, [])
-    .tap(_=>console.log(_,'history'))
-    .multicast()
+        .timestamp()
+        .scan((acc,state)=>{
+          acc.push(state)
+          return acc;
+        }, [])
+        .multicast()
   let travel = contextHistory.travel
   history.cursor = -1
   history.travel = travel

lib/history.js

@@ -21,6 +21,7 @@ export function connect(main, initprops={}) {
     class Connect extends React.Component {
       constructor(props, context) {
         super(props, context);
+        if(props.history) initprops.history=true
         this.actions = {
           fromEvent(e){
             let {type, target} = e;
@@ -39,10 +40,14 @@ export function connect(main, initprops={}) {
           })
         }
         for(let name in sinks){
-          if(observable(sinks[name]))
+
+          if(observable(sinks[name])){
             actionsSinks.push(sinks[name]);
+          }
           else if(sinks[name] instanceof Function){
-            this.actions[name] = (...args)=>this.context[intentStream].send(sinks[name].apply(null, args));
+            this.actions[name] = (...args)=>{
+              return this.context[intentStream].send(sinks[name].apply(null, args));
+            }
           }
         }
         this.context[flatObserve](actionsSinks, (action)=>{

lib/react-most.es6

@@ -1,6 +1,6 @@
 {
   "name": "react-most",
-  "version": "0.3.0",
+  "version": "0.4.0",
   "description": "High Prefomance Monadic Reactive State Container for React",
   "repository": {
     "type": "git",