Merge pull request #9 from brunolm/routes

Add routes, component and tests

Author: brunolm

package-lock.json

@@ -5,6 +5,8 @@
   "dependencies": {
     "react": "^16.1.1",
     "react-dom": "^16.1.1",
+    "react-router": "^4.2.0",
+    "react-router-dom": "^4.2.2",
     "react-scripts-ts": "2.8.0"
   },
   "scripts": {
@@ -29,6 +31,8 @@
     "@types/node": "^8.0.53",
     "@types/react": "^16.0.25",
     "@types/react-dom": "^16.0.3",
+    "@types/react-router": "^4.0.17",
+    "@types/react-router-dom": "^4.2.1",
     "coveralls": "^3.0.0",
     "enzyme": "^3.2.0",
     "enzyme-adapter-react-16": "^1.1.0",

package.json

@@ -1,19 +1,41 @@
 import * as React from 'react';
 import './App.css';
 
-const logo = require('./logo.svg');
+import { createBrowserHistory } from 'history';
+import { Link, Route, Router, Switch } from 'react-router-dom';
+
+import Home from './components/home';
+
+const history = createBrowserHistory();
 
 class App extends React.Component {
   render() {
     return (
-      <div className="App">
-        <div className="App-header">
-          <img src={logo} className="App-logo" alt="logo" />
-          <h2>Welcome to React</h2>
-        </div>
-        <p className="App-intro">
-          To get started, edit <code>src/App.tsx</code> and save to reload.
-        </p>
+      <div>
+        <Router history={history}>
+          <div>
+            <header>
+              <h2>React / TS</h2>
+            </header>
+            <main>
+              <ul>
+                <li>
+                  <Link to="/">/</Link>
+                </li>
+                <li>
+                  <Link to="/home/brunolm">Home</Link>
+                </li>
+              </ul>
+
+              <hr />
+
+              <Switch>
+                <Route exact={true} path="/" component={Home} />
+                <Route path="/home/:name" component={Home} />
+              </Switch>
+            </main>
+          </div>
+        </Router>
       </div>
     );
   }

src/App.tsx

@@ -0,0 +1,59 @@
+import Home, { Props, PropsWithRoute, State } from './';
+
+import { shallow, ShallowWrapper } from '../../specHelper';
+
+describe('Home', () => {
+  let component: ShallowWrapper<Props & PropsWithRoute, State>;
+
+  beforeEach(() => {
+    const routerProps = {
+      match: {
+        params: {
+          name: 'brunolm',
+        },
+      },
+    };
+
+    component = shallow(Home, { props: routerProps });
+  });
+
+  it('renders without crashing', () => {
+    expect(component).toBeTruthy();
+  });
+
+  it('toggles status on button click', () => {
+    const toggleStatusButton = component.find('.toggle-status');
+
+    expect(component.state().loading).toBeFalsy();
+
+    toggleStatusButton.simulate('click');
+
+    expect(component.state().loading).toBeTruthy();
+  });
+
+  it('displays name value from url param', () => {
+    const nameTitle = component.find('h3.name-title');
+
+    expect(nameTitle.text()).toBe('Hello brunolm');
+  });
+
+  describe('', () => {
+    beforeEach(() => {
+      const routerProps = {
+        match: {
+          params: {
+            name: undefined,
+          },
+        },
+      };
+
+      component = shallow(Home, { props: routerProps });
+    });
+
+    it('displays "no name" when there are no values from url param', () => {
+      const nameTitle = component.find('h3.name-title');
+
+      expect(nameTitle.text()).toBe('Hello no name');
+    });
+  });
+});

src/components/home/index.css

@@ -0,0 +1,55 @@
+import './index.css';
+
+import * as React from 'react';
+
+export interface Props {
+  something?: string;
+}
+export interface PropsWithRoute {
+  match: {
+    params: {
+      name: string;
+    };
+  };
+}
+
+export interface State {
+  loading: boolean;
+}
+
+export default class Home extends React.Component<Props & PropsWithRoute, State> {
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      loading: false,
+    };
+  }
+
+  toggleStatus = () => {
+    const { loading } = this.state;
+
+    this.setState({ loading: !loading });
+  }
+
+  render() {
+    const { params } = this.props.match;
+    const { loading } = this.state;
+
+    const name = params.name || 'no name';
+
+    return (
+      <div>
+        <h3 className="name-title">Hello {name}</h3>
+        <button className="toggle-status" onClick={this.toggleStatus}>Toggle Status</button>
+
+        {loading &&
+          <span>Loading...</span>
+        }
+        {!loading &&
+          <span>Done.</span>
+        }
+      </div>
+    );
+  }
+}

src/components/home/index.spec.tsx

@@ -9,4 +9,4 @@ export function shallow(Component, { store, props }: any) {
   return Enzyme.shallow(<Component {...props} />);
 }
 
-export type ShallowWrapper = Enzyme.ShallowWrapper<any, any>;
+export type ShallowWrapper<TProps, TState> = Enzyme.ShallowWrapper<TProps, TState>;