feat(router): edit test and type def

Author: paibamboo

src/app/containers/App.test.tsx

@@ -1,13 +1,47 @@
-import {TestHelper} from "../helpers/TestHelper";
-import {App, Styles} from "./App";
+import {shallow} from "enzyme";
+import * as React from "react";
+import {IntlProvider} from "react-intl";
+import {State as IRouteState} from "router5";
+import {IState} from "../redux/modules/baseModule";
+import {ILanguage} from "../redux/modules/languageModule";
+import {Styles, UnconnectedApp} from "./App";
 
 describe("<App />", () => {
-  const component = (new TestHelper())
-    .withState({language: {payload: {locale: "en", languageData: {}}}})
-    .mount(App);
+  const language: IState<ILanguage> = {
+    payload: {
+      languageData: {greeting: "Hello!"},
+      locale: "en-GB"
+    }
+  };
+  const route: IRouteState = {
+    name: "home",
+    params: {},
+    path: "/"
+  };
+  const routeUnavailable: IRouteState = {
+    name: "unavailable",
+    params: {},
+    path: "/"
+  };
 
-  it("Renders with correct style", () => {
+  it("renders with correct style", () => {
+    const component = shallow(<UnconnectedApp language={language} route={route} />);
     expect(component.find("section")).toHaveClassName(Styles.container);
   });
 
+  it("renders IntlProvider with correct props", () => {
+    const component = shallow(<UnconnectedApp language={language} route={route} />);
+    expect(component.find(IntlProvider)).toHaveProp("locale", language.payload.locale);
+    expect(component.find(IntlProvider)).toHaveProp("messages", language.payload.languageData);
+  });
+
+  it("renders Not Found when route is null", () => {
+    const component = shallow(<UnconnectedApp language={language} route={null} />);
+    expect(component.find("div")).toHaveText("Not found");
+  });
+
+  it("renders Not Found when segment is undefined", () => {
+    const component = shallow(<UnconnectedApp language={language} route={routeUnavailable} />);
+    expect(component.find("div")).toHaveText("Not found");
+  });
 });

src/app/containers/App.tsx

@@ -8,10 +8,18 @@ import * as es from "react-intl/locale-data/es";
 import * as fr from "react-intl/locale-data/fr";
 import {connect} from "react-redux";
 import {routeNodeSelector} from "redux-router5";
+import {State as IRouteState} from "router5";
 import {cssRaw, cssRule, style} from "typestyle";
 
 import {Header} from "../components";
-import {AboutPage, CounterPage, HomePage, StarsPage} from "./index";
+import {IStore} from "../redux/IStore";
+import {IState} from "../redux/modules/baseModule";
+import {ILanguage} from "../redux/modules/languageModule";
+import {AboutPage} from "./AboutPage";
+import {CounterPage} from "./CounterPage";
+import {HomePage} from "./HomePage";
+import {RegisterPage} from "./RegisterPage";
+import {StarsPage} from "./StarsPage";
 
 const appConfig = require("../../../config/main");
 
@@ -33,38 +41,45 @@ const Styles = {
   })
 };
 
-class App extends React.Component<any, any> {
+class App extends React.Component<IStateToProps, null> {
   private components: any = {
     about: AboutPage,
     counter: CounterPage,
     home: HomePage,
+    register: RegisterPage,
     stars: StarsPage
   };
+
   constructor() {
     super();
     addLocaleData([...en, ...es, ...fr, ...de]);
   }
 
   public render(): JSX.Element {
-    const {route} = this.props;
+    const {language, route} = this.props;
     const segment = route ? route.name.split(".")[0] : undefined;
     return (
-      <IntlProvider locale={this.props.languages.payload.locale} messages={this.props.languages.payload.languageData}>
+      <IntlProvider locale={language.payload.locale} messages={language.payload.languageData}>
         <section className={Styles.container}>
           <Helmet {...appConfig.app.head}/>
           <Header />
-          {React.createElement(this.components[segment]) || <div>Not found</div>}
+          {segment && this.components[segment] ? React.createElement(this.components[segment]) : <div>Not found</div>}
         </section>
       </IntlProvider>
     );
   }
 }
 
-const mapStateToProps = (state) => ({
+interface IStateToProps {
+  language: IState<ILanguage>;
+  route: IRouteState;
+}
+
+const mapStateToProps = (state: Partial<IStore>) => ({
   languages: state.language,
   ...routeNodeSelector("")(state)
 });
 
-const connectedApp = connect(mapStateToProps)(App);
+const connectedApp = connect<IStateToProps, null, null>(mapStateToProps, null)(App);
 
-export {connectedApp as App, Styles}
+export {connectedApp as App, App as UnconnectedApp, Styles}

src/app/redux/IStore.ts

@@ -1,11 +1,19 @@
-import {ICounter} from "modules/counterModule";
-import {IStars} from "modules/starsModule";
+import {State as IRouteState} from "router5";
 import {IState} from "./modules/baseModule";
+import {ICounter} from "./modules/counterModule";
 import {ILanguage} from "./modules/languageModule";
+import {IStars} from "./modules/starsModule";
+
+export interface IRouteReduxState {
+  route: IRouteState;
+  previousRoute?: IRouteState;
+  transitionRoute?: IRouteState;
+  transitionError?: string;
+}
 
 export interface IStore {
   counter: IState<ICounter>;
   language: IState<ILanguage>;
-  router: any;
+  router: IRouteReduxState;
   stars: IState<IStars>;
 }

src/app/routes/routes.ts

@@ -7,6 +7,7 @@ const routes: IRoute[] = [
   {name: "home", path: "/"},
   {name: "about", path: "/about"},
   {name: "counter", path: "/counter"},
+  {name: "register", path: "/register"},
   {name: "stars", path: "/stars"}
 ];