Unit tests for issue #149

examples/counter/actions/search-actions.ts

@@ -0,0 +1,39 @@
+import { NgRedux } from 'ng2-redux';
+
+export const SEARCH_ACTIONS = {
+  SEARCH: 'SEARCH',
+  SEARCH_RESULT: 'SEARCH_RESULT',
+  TERMINATE: 'TERMINATE',
+  SEARCH_NEXT: 'SEARCH_NEXT',
+  SEARCH_PREVIOUS: 'SEARCH_PREVIOUS'
+};
+
+import { Injectable } from '@angular/core';
+@Injectable()
+export class SearchActions {
+  constructor(private ngRedux: NgRedux<any>) {}
+
+  searchDispatch(keyword: string) {
+    this.ngRedux.dispatch(this.search(keyword));
+  }
+
+  fetchResultDispatch(total: number) {
+    this.ngRedux.dispatch(this.fetchResult(total));
+  }
+
+  private search(keyword: string) {
+    return {
+      type: SEARCH_ACTIONS.SEARCH,
+      payload: keyword
+    };
+  }
+
+  private fetchResult(total: number) {
+    return {
+      type: SEARCH_ACTIONS.SEARCH_RESULT,
+      payload: {
+        total: total
+      }
+    };
+  }
+}

examples/counter/components/search-info.component.ts

@@ -0,0 +1,35 @@
+import { Component, Input } from '@angular/core';
+import { Observable } from 'rxjs/Observable';
+import { NgRedux } from 'ng2-redux';
+import 'rxjs/add/operator/combineLatest';
+import { SearchActions } from '../actions/search-actions';
+
+@Component({
+    selector: 'search-info',
+    providers: [SearchActions],
+    template: `
+  <ul>
+     <li>{{ search$ | async | json}}</li>
+  </ul>
+  `
+})
+export class SearchInfo {
+
+    private search$: Observable<any>;
+    private test;
+
+    constructor(private ngRedux: NgRedux<any>, private actions: SearchActions) { }
+
+    ngOnInit() {
+        this.search$ = this.ngRedux.select(state => state.searchReducer.keyword);
+         this.search$.subscribe((keyword) => {
+            if (keyword != '') {
+                this.actions.fetchResultDispatch(keyword.length)
+            }
+        });
+    }    
+    ngAfterViewInit() {
+
+
+    }
+}

examples/counter/components/search.component.ts

@@ -0,0 +1,52 @@
+import { Component } from '@angular/core';
+import { NgRedux, select } from 'ng2-redux';
+import { SearchActions } from '../actions/search-actions';
+import { Observable } from 'rxjs/Rx';
+
+@Component({
+  selector: 'search',
+  providers: [SearchActions],
+  template: `
+  <p>
+    Counter: {{ counter }} <br/> 
+    Counter$ Async: {{ counter$ | async }} <br/>
+    <input id='search-input' type="text" class="search"
+    [(ngModel)]="keyword" (ngModelChange)="searchKeyword()"/>
+  </p>
+  `
+})
+export class Search {
+  counter$: Observable<any>;
+  search$: Observable<any>;
+  counter;
+  keyword: string;
+
+  constructor(private actions: SearchActions, private ngRedux: NgRedux<any>) { }
+
+  ngOnInit() {
+    this.counter$ = this.ngRedux.select(state => state.searchReducer.total);
+    this.search$ = this.ngRedux.select(state => state.searchReducer.keyword);
+
+
+
+this.search$.subscribe((keyword) => {
+      if (keyword != '') {
+        this.actions.fetchResultDispatch(keyword.length)
+      }
+    });
+
+    this.counter$.subscribe(state => {
+
+      this.counter = state;
+    });
+
+
+
+
+
+  }
+
+  private searchKeyword() {
+    this.actions.searchDispatch(this.keyword);
+  }
+}

examples/counter/containers/App.ts

@@ -4,20 +4,26 @@ import { NgRedux, DevToolsExtension } from 'ng2-redux';
 
 import { Counter } from '../components/Counter';
 import { CounterInfo } from '../components/CounterInfo';
+import { Search } from '../components/search.component';
+import { SearchInfo } from '../components/search-info.component';
 import { RootState, enhancers } from '../store';
 
 import reducer from '../reducers/index';
 const createLogger = require('redux-logger');
 
 @Component({
     selector: 'root',
-    directives: [Counter, CounterInfo],
+    directives: [Counter, CounterInfo, Search, SearchInfo],
     pipes: [AsyncPipe],
-    template: `
-        <counter></counter>
-        <counter-info></counter-info>
-    `,
-    providers: [ DevToolsExtension ]
+    providers: [ DevToolsExtension ],
+    template: `   
+    <br/>
+    <counter></counter>
+    <counter-info></counter-info>
+    <search-info></search-info>
+    <search></search>
+  `
+
 })
 export class App {
     constructor(

examples/counter/index.ts

@@ -1,5 +1,6 @@
 import { bootstrap } from '@angular/platform-browser-dynamic';
 import { App } from './containers/App';
 import { NgRedux } from 'ng2-redux';
+import { SearchActions } from './actions/search-actions';
 
-bootstrap(App, [ NgRedux ]);
+bootstrap(App, [ NgRedux, SearchActions]);

examples/counter/package.json

@@ -6,7 +6,7 @@
   "scripts": {
     "postinstall": "typings install",
     "start": "webpack-dev-server -d --inline --progress --no-info --config webpack.config.js",
-    "dev": "webpack-dev-server -d --inline --progress --no-info --config webpack.dev.config.js"
+    "dev": "webpack-dev-server -d --inline --progress --no-info --config webpack.dev.config.js --host 127.0.0.1"
   },
   "repository": {
     "type": "git",

examples/counter/reducers/index.ts

@@ -3,10 +3,11 @@ const { combineReducers } = Redux;
 import { RootState } from '../store';
 import counter from './counter';
 import pathDemo from './path-demo';
-
+import searchReducer from './search';
 const rootReducer = combineReducers<RootState>({
   counter,
-  pathDemo
+  pathDemo,
+  searchReducer
 });
 
 export default rootReducer;

examples/counter/reducers/search.ts

@@ -0,0 +1,34 @@
+import { SEARCH_ACTIONS } from '../actions/search-actions';
+
+export interface SearchState {
+  onSearch: boolean;
+  keyword: string;
+  total: number;
+}
+
+const searchInitState: SearchState = {
+  onSearch: false,
+  keyword: '',
+  total: -1
+};
+
+export default function searchReducer(state = searchInitState, action):
+  SearchState {
+  switch (action.type) {
+    case SEARCH_ACTIONS.SEARCH:
+      return Object.assign({}, state, {
+        onSearch: true,
+        keyword: action.payload,
+        total: state.total
+      });
+    case SEARCH_ACTIONS.SEARCH_RESULT:
+      let total = action.payload.total;
+      return Object.assign({}, state, {
+        onSearch: state.onSearch,
+        keyword: state.keyword,
+        total
+      });
+    default:
+      return state;
+  }
+}

examples/counter/store/index.ts

@@ -7,4 +7,4 @@ export const enhancers = [
 export interface RootState {
   counter: number;
   pathDemo: Object;
-}
+};

package.json

@@ -1,11 +1,11 @@
 {
   "name": "ng2-redux",
-  "version": "3.2.0",
+  "version": "3.2.1-beta.1",
   "description": "Angular 2 bindings for Redux",
   "main": "./lib/index.js",
   "scripts": {
     "build": "npm run typings && rimraf ./lib; tsc; rimraf ./lib/___tests___",
-    "test": "npm run typings && npm run lint && npm run mocha",
+    "test": "npm run typings  && npm run lint && npm run mocha",
     "typings": "rimraf ./typings && typings install",
     "mocha": "ts-node ./node_modules/mocha/bin/_mocha  --opts ./src/___tests___/mocha.opts",
     "lint": "tslint 'src/**/*.ts' 'examples/counter/**.ts --exclude 'examples/counter/node_modules"
@@ -58,6 +58,7 @@
     "rxjs": "5.0.0-beta.6",
     "sinon": "^1.16.1",
     "sinon-chai": "^2.8.0",
+    "symbol-observable": "^1.0.1",
     "ts-loader": "^0.8.1",
     "ts-node": "^0.5.5",
     "tslint": "^3.11.0",