feat(redux-saga): multiple things

- name changing
- edit tests for stars and counter reducer

Author: paibamboo

src/app/Sagas/fetchStars.ts

@@ -4,8 +4,10 @@ import {Stars} from "./Stars";
 /** Mock App. State */
 const state: object = {
   stars: {
-    count: 61,
-    isFetching: false
+    isFetching: false,
+    payload: {
+      stargazers_count: 61
+    }
   }
 };
 

src/app/containers/Stars.test.tsx

@@ -1,5 +1,6 @@
 import * as React from "react";
 import {IStars, IStarsAction} from "../models/starsModel";
+import {STARS_LOAD} from "../redux/modules/starsModule";
 const {connect} = require("react-redux");
 const {asyncConnect} = require("redux-connect");
 
@@ -10,7 +11,7 @@ interface IProps {
 
 @asyncConnect([{
   promise: ({store: {dispatch}}) => {
-    return dispatch({type: "stars/PAGE_LOAD"});
+    return dispatch({type: STARS_LOAD});
   }
 }])
 @connect(
@@ -22,7 +23,7 @@ class Stars extends React.Component<IProps, {}> {
 
     return (
       <div>
-        {stars.isFetching ? "Fetching Stars" : stars.count}
+        {stars.isFetching ? "Fetching Stars" : stars.payload.stargazers_count}
       </div>
     );
   }

src/app/containers/Stars.tsx

@@ -1,25 +1,19 @@
 import IBaseAction from "../models/IBaseAction";
 
-/**
- * @param name todo: change to a better name
- * @param state
- * @param action
- * @returns {any}
- */
-export default function baseReducer<TState, TAction>(name: string, state: TState, action: IBaseAction & TAction): TState {
+export default function promiseReducer<TState, TAction>(baseAction: string, state: TState, action: IBaseAction & TAction): TState {
   switch (action.type) {
-    case name + "_PENDING":
+    case baseAction + "_PENDING":
       return Object.assign({}, state, {
         isFetching: true
       });
 
-    case name + "_FULFILLED":
+    case baseAction + "_FULFILLED":
       return Object.assign({}, state, {
         isFetching: false,
         payload: action.payload
       });
 
-    case name + "_REJECTED":
+    case baseAction + "_REJECTED":
       return Object.assign({}, state, {
         error: true,
         isFetching: false,
@@ -29,4 +23,4 @@ export default function baseReducer<TState, TAction>(name: string, state: TState
     default:
       return state;
   }
-}
+}

src/app/helpers/baseReducer.ts src/app/helpers/promiseReducer.tssrc/app/helpers/baseReducer.ts renamed to src/app/helpers/promiseReducer.ts

@@ -1,15 +1,14 @@
 export interface IStars {
   isFetching?: boolean;
-  count?: number;
   error?: boolean;
-  message?: any;
+  payload?: {
+    stargazers_count: number;
+  };
 }
 
 export interface IStarsAction {
   type: string;
   payload?: {
-    count?: number;
     stargazers_count: number;
-    message?: any;
   };
 }

src/app/models/starsModel.ts

@@ -6,7 +6,7 @@ import {createLogger} from "redux-logger";
 import reduxPromiseMiddleware from "redux-promise-middleware";
 import createSagaMiddleware from "redux-saga";
 import thunk from "redux-thunk";
-import rootSaga from "../Sagas/rootSaga";
+import rootSaga from "../sagas/rootSaga";
 import {IStore} from "./IStore";
 import rootReducer from "./rootReducer";
 

src/app/redux/configureStore.ts

@@ -1,29 +1,7 @@
 import {ICounter, ICounterAction} from "models/counterModel";
 import * as counter from "./counterModule";
 
-/** Module */
-describe("Counter Module", () => {
-
-  /** Actions */
-  describe("Actions", () => {
-    describe("Increment", () => {
-      it("has the correct type", () => {
-        const action: ICounterAction = counter.increment();
-        expect(action.type).toBe(counter.INCREMENT);
-      });
-    });
-
-    describe("Decrement", () => {
-      it("has the correct type", () => {
-        const action: ICounterAction = counter.decrement();
-        expect(action.type).toBe(counter.DECREMENT);
-      });
-    });
-  });
-
-  /** Reducer */
-  describe("Reducer", () => {
-
+describe("Counter Reducer", () => {
     const state: ICounter = {count: 10};
 
     it("handles action of type INCREMENT", () => {
@@ -39,7 +17,4 @@ describe("Counter Module", () => {
     it("handles actions with unknown type", () => {
       expect(counter.counterReducer(state, {type: ""})).toEqual({count: state.count});
     });
-
-  });
-
 });

src/app/redux/modules/counterModule.test.ts

@@ -1,72 +1,58 @@
-import {IStarsAction} from "models/starsModel";
-import {fetchMock, mockStore} from "../../helpers/TestHelper";
-import * as stars from "./starsModule";
-
-/** Mock Data */
-const githubResponse = {
-  stargazers_count: 999
-};
-
-const errResponse = {
-  message: "ERROR :-O"
-};
-
-/** Stargazers Module */
-describe("Stars Module", () => {
-
-  /** Action Creators */
-  describe("Action Creators", () => {
-
-    describe("Get Stars (Async)", () => {
-
-      afterEach(() => {
-        fetchMock.restore();
-      });
-
-      /** 200 */
-      it("dispatches Request and Success Actions on OK requests", (done) => {
-
-        fetchMock.mock("https://api.github.com/repos/barbar/vortigern", {
-          body: githubResponse,
-          status: 200
-        });
-
-        const expectedActions: IStarsAction[] = [
-          {type: stars.GET_REQUEST},
-          {type: stars.GET_SUCCESS, payload: {count: githubResponse.stargazers_count}}
-        ];
-
-        const store = mockStore({});
-
-        store.dispatch(stars.getStars())
-          .then(() => expect(store.getActions()).toBe(expectedActions))
-          .then(() => done())
-          .catch((err) => done(err));
-      });
-
-      /** 400 */
-      it("dispatches Failure on failed requests", (done) => {
-
-        fetchMock.mock("https://api.github.com/repos/barbar/vortigern", {
-          body: errResponse,
-          status: 400
-        });
-
-        const expectedActions: IStarsAction[] = [
-          {type: stars.GET_REQUEST},
-          {type: stars.GET_FAILURE, payload: {message: errResponse}}
-        ];
-
-        const store = mockStore({});
+import {STARS_REQUEST, starsReducer} from "./starsModule";
+
+describe("Stars Reducer", () => {
+
+  it("handles action of type STARS_REQUEST_PENDING", () => {
+    const action = {
+      type: STARS_REQUEST + "_PENDING"
+    };
+    const stateBefore = {};
+    const stateAfter = {
+      isFetching: true
+    };
+    expect(starsReducer(stateBefore, action)).toEqual(stateAfter);
+  });
 
-        store.dispatch(stars.getStars())
-          .then(() => expect(store.getActions()).toBe(expectedActions))
-          .then(() => done())
-          .catch((err) => done(err));
-      });
+  it("handles action of type STARS_REQUEST_FULFILLED", () => {
+    const action = {
+      payload: {
+        stargazers_count: 99
+      },
+      type: STARS_REQUEST + "_FULFILLED"
+    };
+    const stateBefore = {};
+    const stateAfter = {
+      isFetching: false,
+      payload: {
+        stargazers_count: 99
+      }
+    };
+    expect(starsReducer(stateBefore, action)).toEqual(stateAfter);
+  });
 
-    });
+  it("handles action of type STARS_REQUEST_REJECTED", () => {
+    const action = {
+      type: STARS_REQUEST + "_REJECTED"
+    };
+    const stateBefore = {};
+    const stateAfter = {
+      error: true,
+      isFetching: false
+    };
+    expect(starsReducer(stateBefore, action)).toEqual(stateAfter);
+  });
 
+  it("handles actions with unknown type", () => {
+    const action = {
+      type: ""
+    };
+    const stateBefore = {
+      isFetching: false
+    };
+    const stateAfter = {
+      isFetching: false
+    };
+    expect(starsReducer(stateBefore, action)).toEqual(stateAfter);
   });
 
 });

src/app/redux/modules/starsModule.test.ts

@@ -1,8 +1,9 @@
 import {IStars, IStarsAction} from "models/starsModel";
-import baseReducer from "../../helpers/baseReducer";
+import promiseReducer from "../../helpers/promiseReducer";
 
 /** Action Types */
-export const GET_REQUEST: string = "stars/GET_REQUEST";
+export const STARS_LOAD: string = "stars/STARS_LOAD";
+export const STARS_REQUEST: string = "stars/STARS_REQUEST";
 
 /** Initial State */
 const initialState: IStars = {
@@ -11,5 +12,5 @@ const initialState: IStars = {
 
 /** Reducer */
 export function starsReducer(state: IStars = initialState, action: IStarsAction): IStars {
-  return baseReducer<IStars, IStarsAction>("stars/GET_REQUEST", state, action);
+  return promiseReducer<IStars, IStarsAction>(STARS_REQUEST, state, action);
 }