test: add route stories

Author: streamich

package.json

@@ -45,7 +45,6 @@
     "to-string-loader": "1.1.5",
     "gulp": "3.9.1",
     "gulp-typescript": "3",
-    "react-syntax-highlighter": "^6.1.2",
     "@types/node": "9.3.0",
     "@types/jest": "22.0.1",
     "@types/chai": "4.1.1",

src/route/__story__/StoryRouteExample.tsx

@@ -0,0 +1,53 @@
+import {createElement as h} from 'react';
+import {LocationSensor} from '../../LocationSensor';
+import {Router, Route} from '..';
+
+const StoryRouteExample = () => (
+  <Router>
+    <div>
+      <ul>
+        <li onClick={() => history.pushState(null, '', '/home.html')}>Home</li>
+        <li onClick={() => history.pushState(null, '', '/home/intro.html')}>Home / Intro</li>
+        <li onClick={() => history.pushState(null, '', '/home/more.html')}>Home / More</li>
+        <li onClick={() => history.pushState(null, '', '/page.html')}>Page</li>
+        <li onClick={() => history.pushState(null, '', '/404.html')}>404</li>
+      </ul>
+
+      <Route match='/home'>{() =>
+        <div>
+          <div>HOME</div>
+          <Route match='/intro' children={<div>INTRO</div>} />
+          <Route children={<div>HOME/404</div>} />
+        </div>
+      }</Route>
+      <Route match={/^\/page\.html/} children={<div>PAGE</div>} />
+      <Route children={<div>404</div>} />
+
+      <br />
+      <hr />
+
+      <LocationSensor>{(state) =>
+        <pre style={{fontFamily: 'monospace'}}>
+          {JSON.stringify(state, null, 4)}
+        </pre>
+      }</LocationSensor>
+
+      <br />
+      <hr />
+
+      <pre style={{fontFamily: 'monospace'}}>{`
+<Route match='/home'>{() =>
+  <div>
+    <div>HOME</div>
+    <Route match='/intro' children={<div>INTRO</div>} />
+    <Route children={<div>HOME/404</div>} />
+  </div>
+}</Route>
+<Route match={/^\/page\.html/} children={<div>PAGE</div>} />
+<Route children={<div>404</div>} />
+      `}</pre>
+    </div>
+  </Router>
+);
+
+export default StoryRouteExample;

src/route/__story__/StoryRoutePreserveRoute.tsx

@@ -0,0 +1,36 @@
+import {createElement as h} from 'react';
+import {LocationSensor} from '../../LocationSensor';
+import {Router, Route} from '..';
+
+const StoryRoutePreserveRoute = () =>
+  <div>
+    <Router route='/api/users/id/123'>
+      <Route preserve match='/api'>
+        <Route preserve match='/api/users'>
+          <Route preserve match='/api/users/id'>
+            <Route preserve match={/\/api\/users\/id\/(.*)/}>{(result) =>
+              <pre style={{fontFamily: 'monospace'}}>{JSON.stringify(result, null, 4)}</pre>
+            }</Route>
+          </Route>
+        </Route>
+      </Route>
+    </Router>
+
+    <hr />
+
+    <pre style={{fontFamily: 'monospace'}}>{`
+<Router route='/api/users/id/123'>
+  <Route preserve match='/api'>
+    <Route preserve match='/api/users'>
+      <Route preserve match='/api/users/id'>
+        <Route preserve match={/\/api\/users\/id\/(.*)/}>{(result) =>
+          <pre style={{fontFamily: 'monospace'}}>{JSON.stringify(result, null, 4)}</pre>
+        }</Route>
+      </Route>
+    </Route>
+  </Route>
+</Router>
+    `}</pre>
+  </div>;
+
+export default StoryRoutePreserveRoute;

src/route/__story__/StoryRouteTruncateRoute.tsx

@@ -0,0 +1,32 @@
+import {createElement as h} from 'react';
+import {LocationSensor} from '../../LocationSensor';
+import {Router, Route} from '..';
+
+const StoryRouteTruncateRoute = () =>
+  <div>
+    <Router route='/api/users/43f23f-23f34f43r.json'>
+      <Route match='/api'>
+        <Route match='/users'>
+          <Route match={/.*/}>{(result) =>
+            <pre style={{fontFamily: 'monospace'}}>{JSON.stringify(result, null, 4)}</pre>
+          }</Route>
+        </Route>
+      </Route>
+    </Router>
+
+    <hr />
+
+    <pre style={{fontFamily: 'monospace'}}>{`
+<Router route='/api/users/43f23f-23f34f43r.json'>
+  <Route match='/api'>
+    <Route match='/users'>
+      <Route match={/.*/}>{(result) =>
+        <pre style={{fontFamily: 'monospace'}}>{JSON.stringify(result, null, 4)}</pre>
+      }</Route>
+    </Route>
+  </Route>
+</Router>
+    `}</pre>
+  </div>;
+
+export default StoryRouteTruncateRoute;

src/route/__story__/story.tsx

@@ -0,0 +1,16 @@
+import {createElement as h} from 'react';
+import {storiesOf} from '@storybook/react';
+import {action} from '@storybook/addon-actions';
+import {linkTo} from '@storybook/addon-links';
+import {LocationSensor} from '../../LocationSensor';
+import {Router, Route} from '..';
+import ShowDocs from '../../../.storybook/ShowDocs'
+import StoryRouteExample from './StoryRouteExample';
+import StoryRouteTruncateRoute from './StoryRouteTruncateRoute';
+import StoryRoutePreserveRoute from './StoryRoutePreserveRoute';
+
+storiesOf('Context/route', module)
+  .add('Documentation', () => h(ShowDocs, {name: 'route'}))
+  .add('Example', () => h(StoryRouteExample))
+  .add('Truncates route', () => h(StoryRouteTruncateRoute))
+  .add('Preserve route', () => h(StoryRoutePreserveRoute));

src/route/index.ts

@@ -48,7 +48,7 @@ export class Router extends Component<IRouteProviderProps, any> {
 
 export interface TRouteMatchResult {
   length: number; // Length how many characters to truncate from route.
-  matches?: RegExpMatchArray;
+  matches?: RegExpMatchArray; // RegExp matches, if any.
 }
 
 export type TRouteMatcher = (route: string) => TRouteMatchResult;