} query
32 | * @returns {String}
33 | */
34 | export function createHref(path, query = {}) {
35 | // if path contains ? strip it
36 | const match = path.match(/^([^?]*)(\?.*)?$/);
37 |
38 | let url = `${match[1]}`;
39 | let queryParams = match[2] ? parseQuery(match[2]) : {};
40 |
41 | // merge with query
42 | queryParams = { ...queryParams, ...query };
43 |
44 | // stringify params only if query contains something
45 | if (Object.keys(queryParams).length) {
46 | url += `?${stringifyQuery(queryParams)}`;
47 | }
48 |
49 | return url;
50 | }
51 |
--------------------------------------------------------------------------------
/test/Route.spec.js:
--------------------------------------------------------------------------------
1 | import { expect } from 'chai';
2 | import Route from '../src/Route';
3 |
4 | describe('Route', () => {
5 | describe('#constructor()', () => {
6 | it('throws if path is not an string', () => {
7 | [true, 1, 1.0, null].forEach((path) => {
8 | const type = typeof path;
9 |
10 | expect(() => new Route(path)).to.throw(
11 | `Route path should be string, ${type} given.`
12 | );
13 | });
14 | });
15 |
16 | it('throws if path is not an string', () => {
17 | [true, 1, 1.0, null].forEach((path) => {
18 | const type = typeof path;
19 |
20 | expect(() => new Route(path)).to.throw(
21 | `Route path should be string, ${type} given.`
22 | );
23 | });
24 | });
25 |
26 | it('throws if base path is not an string', () => {
27 | [true, 1, 1.0, null].forEach((path) => {
28 | const type = typeof path;
29 |
30 | expect(() => new Route('/', path)).to.throw(
31 | `Route base path should be string, ${type} given.`
32 | );
33 | });
34 | });
35 |
36 | it('throws if route children is not an array or function', () => {
37 | [true, 1].forEach((children) => {
38 | const type = typeof children;
39 |
40 | expect(() => new Route('/', '', children)).to.throw(
41 | `Route children should be an array or function, ${type} given.`
42 | );
43 | });
44 | });
45 |
46 | it('throws if route onEnter handler is not an function', () => {
47 | expect(() => new Route('/', '', [], 'a')).to.throw(
48 | `Route handler \`onEnter\` should be a function, string given.`
49 | );
50 | });
51 |
52 | it('throws if route onLeave handler is not an function', () => {
53 | expect(() => new Route('/', '', [], () => {}, 'a')).to.throw(
54 | `Route handler \`onLeave\` should be a function, string given.`
55 | );
56 | });
57 | });
58 |
59 | describe('#match()', () => {
60 | it('rejects if async route definition does not return Promise or array', (done) => {
61 | const steps = [true, 1, 'a', null];
62 |
63 | const stepper = (step, doneFn) => {
64 | if (step === steps.length) {
65 | return doneFn();
66 | }
67 |
68 | const asyncRoutes = () => steps[step];
69 | const route = new Route('/', '', asyncRoutes, () => {}, () => {});
70 |
71 | route.match('/test').then(
72 | doneFn.bind(this, Error('Route should reject for value of type ' + typeof steps[step])),
73 | () => stepper(step + 1, doneFn)
74 | );
75 | };
76 |
77 | stepper(0, done);
78 | });
79 |
80 | it('rejects if route contains multiple variables of the same name', () => {
81 | const asyncRoutes = () => {
82 | return Promise.resolve([
83 | {
84 | path: '/:variable',
85 | component: 'b'
86 | }
87 | ]);
88 | };
89 | const route = new Route('/:variable', '', asyncRoutes, () => {}, () => {}, 'a');
90 |
91 | return route.match('/test/test').catch((err) => {
92 | expect(err).to.be.eql(Error('Route parameter `variable` is already defined.'));
93 | });
94 | });
95 |
96 | it('resolves simple route without children', () => {
97 | const onEnter = () => {};
98 | const onLeave = () => {};
99 | const eagerlyMatchedRoute = new Route('/', '', [], onEnter, onLeave, 'a');
100 |
101 | return eagerlyMatchedRoute.match('/').then(
102 | (match) => {
103 | expect(match).be.an('object');
104 | expect(match)
105 | .to.have.property('pathname')
106 | .and.to.be.equal('/');
107 | expect(match)
108 | .to.have.property('fullPath')
109 | .and.to.be.equal('/');
110 | expect(match)
111 | .to.have.property('vars')
112 | .and.to.be.deep.equal({});
113 | expect(match)
114 | .to.have.property('onEnter')
115 | .and.to.be.an('array')
116 | .and.to.be.deep.equal([onEnter]);
117 | expect(match)
118 | .to.have.property('onLeave')
119 | .and.to.be.an('array')
120 | .and.to.be.deep.equal([onLeave]);
121 | expect(match)
122 | .to.have.property('components')
123 | .and.to.be.an('array')
124 | .and.to.be.deep.equal(['a']);
125 | expect(match)
126 | .to.have.property('attrs')
127 | .and.to.be.an('object')
128 | .and.to.be.deep.equal({});
129 | }
130 | );
131 | });
132 |
133 | it('resolves complex route with multiple variables', () => {
134 | const onEnter = () => {};
135 | const onLeave = () => {};
136 | const eagerlyMatchedRoute = new Route('/:from-:to', '', [], onEnter, onLeave, 'a');
137 |
138 | return eagerlyMatchedRoute.match('/10-11').then(
139 | (match) => {
140 | expect(match).be.an('object');
141 | expect(match)
142 | .to.have.property('vars')
143 | .and.to.be.deep.equal({
144 | from: '10',
145 | to: '11'
146 | });
147 | expect(match)
148 | .to.have.property('pathname')
149 | .and.to.be.equal('/10-11');
150 | expect(match)
151 | .to.have.property('fullPath')
152 | .and.to.be.equal('/10-11');
153 | expect(match)
154 | .to.have.property('onEnter')
155 | .and.to.be.an('array')
156 | .and.to.be.deep.equal([onEnter]);
157 | expect(match)
158 | .to.have.property('onLeave')
159 | .and.to.be.an('array')
160 | .and.to.be.deep.equal([onLeave]);
161 | expect(match)
162 | .to.have.property('components')
163 | .and.to.be.an('array')
164 | .and.to.be.deep.equal(['a']);
165 | expect(match)
166 | .to.have.property('attrs')
167 | .and.to.be.an('object')
168 | .and.to.be.deep.equal({});
169 | }
170 | );
171 | });
172 |
173 | it('resolves complex route with multiple variables (patterns)', () => {
174 | const onEnter = () => {};
175 | const onLeave = () => {};
176 | const eagerlyMatchedRoute = new Route('/:from{[0-9]+}-:to{[a-z]+}', '', [], onEnter, onLeave, 'a', { a: true });
177 |
178 | return eagerlyMatchedRoute.match('/10-a').then(
179 | (match) => {
180 | expect(match).be.an('object');
181 | expect(match)
182 | .to.have.property('vars')
183 | .and.to.be.deep.equal({
184 | from: '10',
185 | to: 'a'
186 | });
187 | expect(match)
188 | .to.have.property('pathname')
189 | .and.to.be.equal('/10-a');
190 | expect(match)
191 | .to.have.property('fullPath')
192 | .and.to.be.equal('/10-a');
193 | expect(match)
194 | .to.have.property('onEnter')
195 | .and.to.be.an('array')
196 | .and.to.be.deep.equal([onEnter]);
197 | expect(match)
198 | .to.have.property('onLeave')
199 | .and.to.be.an('array')
200 | .and.to.be.deep.equal([onLeave]);
201 | expect(match)
202 | .to.have.property('components')
203 | .and.to.be.an('array')
204 | .and.to.be.deep.equal(['a']);
205 | expect(match)
206 | .to.have.property('attrs')
207 | .and.to.be.an('object')
208 | .and.to.be.deep.equal({ a: true });
209 | }
210 | );
211 | });
212 |
213 | it('resolves complex route with complex children', () => {
214 | const onEnter = () => {};
215 | const onLeave = () => {};
216 | const children = [
217 | {
218 | path: '/detail/:id{[a-zA-Z0-9]+}-:slug',
219 | component: 'b',
220 | onEnter,
221 | onLeave,
222 | attrs: {
223 | a: false,
224 | b: true
225 | }
226 | }
227 | ];
228 | const eagerlyMatchedRoute = new Route('/:lang{(en|de)}', '', children, onEnter, onLeave, 'a', { a: true });
229 |
230 | return eagerlyMatchedRoute.match('/en/detail/565ee0d31709ae7b174eb8a1-test').then(
231 | (match) => {
232 | expect(match).be.an('object');
233 | expect(match)
234 | .to.have.property('vars')
235 | .and.to.be.deep.equal({
236 | lang: 'en',
237 | id: '565ee0d31709ae7b174eb8a1',
238 | slug: 'test'
239 | });
240 | expect(match)
241 | .to.have.property('pathname')
242 | .and.to.be.equal('/en/detail/565ee0d31709ae7b174eb8a1-test');
243 | expect(match)
244 | .to.have.property('fullPath')
245 | .and.to.be.equal('/en/detail/565ee0d31709ae7b174eb8a1-test');
246 | expect(match)
247 | .to.have.property('onEnter')
248 | .and.to.be.an('array')
249 | .and.to.be.deep.equal([onEnter, onEnter]);
250 | expect(match)
251 | .to.have.property('onLeave')
252 | .and.to.be.an('array')
253 | .and.to.be.deep.equal([onLeave, onLeave]);
254 | expect(match)
255 | .to.have.property('components')
256 | .and.to.be.an('array')
257 | .and.to.be.deep.equal(['a', 'b']);
258 | expect(match)
259 | .to.have.property('attrs')
260 | .and.to.be.an('object')
261 | .and.to.be.deep.equal({ a: false, b: true });
262 | }
263 | );
264 | });
265 |
266 | it('resolves route with async children', () => {
267 | const asyncRoutes = () => {
268 | return Promise.resolve([
269 | {
270 | path: '/',
271 | component: 'b'
272 | }
273 | ]);
274 | };
275 | const route = new Route('/', '', asyncRoutes, () => {}, () => {}, 'a');
276 |
277 | return route.match('/').then(
278 | (match) => {
279 | expect(match).be.an('object');
280 | expect(match)
281 | .to.have.property('pathname')
282 | .and.to.be.equal('/');
283 | expect(match)
284 | .to.have.property('fullPath')
285 | .and.to.be.equal('/');
286 | expect(match)
287 | .to.have.property('vars')
288 | .and.to.be.deep.equal({});
289 | expect(match)
290 | .to.have.property('onEnter')
291 | .and.to.be.an('array')
292 | .and.have.length(2);
293 | expect(match)
294 | .to.have.property('onLeave')
295 | .and.to.be.an('array')
296 | .and.have.length(2);
297 | expect(match)
298 | .to.have.property('components')
299 | .and.to.be.an('array')
300 | .and.to.be.deep.equal(['a', 'b']);
301 | expect(match)
302 | .to.have.property('attrs')
303 | .and.to.be.an('object')
304 | .and.to.be.deep.equal({});
305 | }
306 | );
307 | });
308 |
309 | it('resolves route with sync children', () => {
310 | const routes = [
311 | {
312 | path: '/',
313 | component: 'b'
314 | }
315 | ];
316 | const route = new Route('/', '', routes, () => {}, () => {}, 'a');
317 |
318 | return route.match('/').then(
319 | (match) => {
320 | expect(match).be.an('object');
321 | expect(match)
322 | .to.have.property('pathname')
323 | .and.to.be.equal('/');
324 | expect(match)
325 | .to.have.property('fullPath')
326 | .and.to.be.equal('/');
327 | expect(match)
328 | .to.have.property('vars')
329 | .and.to.be.deep.equal({});
330 | expect(match)
331 | .to.have.property('onEnter')
332 | .and.to.be.an('array')
333 | .and.have.length(2);
334 | expect(match)
335 | .to.have.property('onLeave')
336 | .and.to.be.an('array')
337 | .and.have.length(2);
338 | expect(match)
339 | .to.have.property('components')
340 | .and.to.be.an('array')
341 | .and.to.be.deep.equal(['a', 'b']);
342 | expect(match)
343 | .to.have.property('attrs')
344 | .and.to.be.an('object')
345 | .and.to.be.deep.equal({});
346 | }
347 | );
348 | });
349 |
350 | it('matches route with query params', () => {
351 | const routes = [
352 | {
353 | path: '/',
354 | component: 'b'
355 | }
356 | ];
357 | const route = new Route('/', '', routes, () => {}, () => {}, 'a');
358 |
359 | return route.match('/', { a: 1, b: 2 }).then(
360 | (match) => {
361 | expect(match).be.an('object');
362 | expect(match)
363 | .to.have.property('pathname')
364 | .and.to.be.equal('/');
365 | expect(match)
366 | .to.have.property('fullPath')
367 | .and.to.be.equal('/?a=1&b=2');
368 | expect(match)
369 | .to.have.property('vars')
370 | .and.to.be.deep.equal({});
371 | expect(match)
372 | .to.have.property('onEnter')
373 | .and.to.be.an('array')
374 | .and.have.length(2);
375 | expect(match)
376 | .to.have.property('onLeave')
377 | .and.to.be.an('array')
378 | .and.have.length(2);
379 | expect(match)
380 | .to.have.property('components')
381 | .and.to.be.an('array')
382 | .and.to.be.deep.equal(['a', 'b']);
383 | expect(match)
384 | .to.have.property('attrs')
385 | .and.to.be.an('object')
386 | .and.to.be.deep.equal({});
387 | }
388 | );
389 | });
390 |
391 | it('asynchronously tries to match a route and rejects with an error if not found', (done) => {
392 | const asyncRoutes = () => {
393 | return Promise.resolve([
394 | {
395 | path: '/',
396 | component: 'b'
397 | }
398 | ]);
399 | };
400 | const route = new Route('/', '', asyncRoutes, () => {}, () => {}, 'a');
401 |
402 | route.match('/test').then(
403 | () => done(Error('Should not found')),
404 | () => done()
405 | );
406 | });
407 | });
408 | });
409 |
--------------------------------------------------------------------------------
/test/Router.spec.js:
--------------------------------------------------------------------------------
1 | import { expect } from 'chai';
2 | import { spy, stub } from 'sinon';
3 | import { Component } from 'react';
4 | import Router from '../src/Router';
5 | import { createMemoryHistory } from 'history';
6 | import { RouteNotFoundError } from '../src/errors';
7 |
8 | describe('Router', () => {
9 | describe('#constructor()', () => {
10 | it('throws if routes are not an array', () => {
11 | [1, true, 1.0, Date()].forEach((routes) => {
12 | expect(
13 | () => new Router(routes)
14 | ).to.throw(
15 | `Routes should be an array, ${typeof routes} given.`
16 | );
17 | });
18 | });
19 |
20 | it('throws if onTransition is not an function or undefined', () => {
21 | [1, true, 1.0, Date()].forEach((callback) => {
22 | expect(
23 | () => new Router([], createMemoryHistory(), callback)
24 | ).to.throw(
25 | `Router onTransition callback should be a function, ${typeof callback} given.`
26 | );
27 | });
28 | });
29 | });
30 |
31 | describe('#listen()', () => {
32 | it(
33 | 'starts listening to pop state events and replaces state on initial and replaces state if undefined',
34 | (done) => {
35 | const changeStart = spy();
36 | const changeSuccess = spy();
37 | const onEnter = spy();
38 | const history = createMemoryHistory();
39 |
40 | const router = new Router(
41 | [{ path: '/', component: 'A', onEnter }],
42 | history,
43 | (err, resolvedRoute) => {
44 | try {
45 | expect(err).to.be.equal(null);
46 | expect(resolvedRoute).to.be.an('object');
47 | expect(resolvedRoute.pathname).to.be.equal('/');
48 | expect(resolvedRoute.fullPath).to.be.equal('/');
49 | expect(resolvedRoute.components).to.be.eql(['A']);
50 | expect(resolvedRoute.attrs).to.be.eql({});
51 |
52 | expect(history.replaceState.calledOnce).to.be.equal(true);
53 | expect(history.replaceState.getCall(0).args[0]).to.be.equal(resolvedRoute);
54 | expect(history.replaceState.getCall(0).args[1]).to.be.equal('/');
55 |
56 | expect(changeStart.called).to.be.equal(true);
57 | expect(changeSuccess.calledOnce).to.be.equal(true);
58 | expect(onEnter.called).to.be.equal(true);
59 |
60 | done();
61 | } catch (e) {
62 | done(e);
63 | }
64 | }
65 | );
66 |
67 | spy(history, 'replaceState');
68 |
69 | router.addChangeStartListener(changeStart);
70 | router.addChangeSuccessListener(changeSuccess);
71 |
72 | router.listen();
73 | }
74 | );
75 |
76 | it(
77 | 'starts listening to pop state events and calls not found listeners if current location is not mapped to route',
78 | (done) => {
79 | const changeStart = spy();
80 | const changeSuccess = spy();
81 | const notFound = spy();
82 | const history = createMemoryHistory([{ pathname: '/unknown', search: '?a=1&b=0' }]);
83 |
84 | const router = new Router(
85 | [{ path: '/', component: 'A' }],
86 | history,
87 | (err, resolvedRoute) => {
88 | try {
89 | expect(err).not.to.be.equal(null);
90 | expect(resolvedRoute).to.be.equal(undefined);
91 |
92 | expect(history.replaceState.called).to.be.equal(false);
93 |
94 | expect(changeStart.called).to.be.equal(false);
95 | expect(changeSuccess.called).to.be.equal(false);
96 | expect(notFound.calledOnce).to.be.equal(true);
97 | expect(notFound.getCall(0).args[0]).to.be.equal('/unknown');
98 | expect(notFound.getCall(0).args[1]).to.deep.equal({ a: '1', b: '0' });
99 |
100 | done();
101 | } catch (e) {
102 | done(e);
103 | }
104 | }
105 | );
106 |
107 | spy(history, 'replaceState');
108 |
109 | router.addChangeStartListener(changeStart);
110 | router.addChangeSuccessListener(changeSuccess);
111 | router.addNotFoundListener(notFound);
112 |
113 | router.listen();
114 | }
115 | );
116 | });
117 |
118 | describe('#run()', () => {
119 | it('resolves simple route with sync children and calls all callbacks', () => {
120 | const onTransition = spy();
121 | let history;
122 |
123 | const router = new Router(
124 | [
125 | {
126 | path: '/',
127 | component: 'a',
128 | children: () => Promise.resolve([{ path: 'test', component: 'b' }])
129 | }
130 | ],
131 | history = createMemoryHistory(),
132 | onTransition
133 | );
134 |
135 | spy(history, 'pushState');
136 |
137 | const changeStart = spy();
138 | const changeSuccess = spy();
139 |
140 | router.addChangeStartListener(changeStart);
141 | router.addChangeSuccessListener(changeSuccess);
142 |
143 | return router.run('/test', { a: 1, b: 0 }).then(
144 | (resolvedRoute) => {
145 | expect(resolvedRoute).to.be.an('object');
146 | expect(resolvedRoute).to.have.property('pathname').and.be.equal('/test');
147 | expect(resolvedRoute).to.have.property('components').and.be.deep.equal(['a', 'b']);
148 | expect(resolvedRoute).to.have.property('vars').and.be.deep.equal({});
149 | expect(resolvedRoute).to.have.property('query').and.be.deep.equal({ a: 1, b: 0 });
150 | expect(resolvedRoute).to.have.property('attrs').and.be.deep.equal({});
151 | expect(router.currentRoute()).to.be.an('object');
152 | expect(history.pushState.calledOnce).to.be.equal(true);
153 | expect(history.pushState.getCall(0).args[0]).to.be.equal(resolvedRoute);
154 | expect(history.pushState.getCall(0).args[1]).to.be.equal('/test?a=1&b=0');
155 | expect(changeStart.calledOnce).to.be.equal(true);
156 | expect(changeSuccess.calledOnce).to.be.equal(true);
157 | expect(onTransition.calledOnce).to.be.equal(true);
158 | }
159 | );
160 | });
161 |
162 | it('resolves route components asynchronously', () => {
163 | const onTransition = spy();
164 | let history;
165 |
166 | class App extends Component {}
167 |
168 | const router = new Router(
169 | [
170 | {
171 | path: '/',
172 | component: App,
173 | attrs: {
174 | overridden: false
175 | },
176 | children: () => Promise.resolve([
177 | {
178 | path: 'test',
179 | component: () => Promise.resolve(App)
180 | }
181 | ])
182 | }
183 | ],
184 | history = createMemoryHistory(),
185 | onTransition
186 | );
187 |
188 | stub(history);
189 |
190 | const changeStart = spy();
191 | const changeSuccess = spy();
192 |
193 | router.addChangeStartListener(changeStart);
194 | router.addChangeSuccessListener(changeSuccess);
195 |
196 | return router.run('/test').then(
197 | (resolvedRoute) => {
198 | expect(resolvedRoute).to.be.an('object');
199 | expect(resolvedRoute).to.have.property('pathname').and.be.equal('/test');
200 | expect(resolvedRoute).to.have.property('components').and.be.deep.equal([App, App]);
201 | expect(resolvedRoute).to.have.property('vars').and.be.deep.equal({});
202 | expect(resolvedRoute).to.have.property('query').and.be.deep.equal({});
203 | expect(resolvedRoute).to.have.property('attrs').and.be.deep.equal({ overridden: false });
204 | expect(router.currentRoute()).to.be.an('object');
205 | expect(history.pushState.calledOnce).to.be.equal(true);
206 | expect(changeStart.calledOnce).to.be.equal(true);
207 | expect(changeSuccess.calledOnce).to.be.equal(true);
208 | expect(onTransition.calledOnce).to.be.equal(true);
209 | }
210 | );
211 | });
212 |
213 | it('resolves a route with variables and calls all callbacks', () => {
214 | const onTransition = spy();
215 | let history;
216 |
217 | const router = new Router(
218 | [
219 | {
220 | path: '/',
221 | component: 'a',
222 | attrs: {
223 | override: true
224 | },
225 | children: () => Promise.resolve([{ path: 'test/:variable', component: 'b', attrs: { override: false } }])
226 | }
227 | ],
228 | history = createMemoryHistory(),
229 | onTransition
230 | );
231 |
232 | const changeStart = spy();
233 | const changeSuccess = spy();
234 |
235 | stub(history);
236 |
237 | router.addChangeStartListener(changeStart);
238 | router.addChangeSuccessListener(changeSuccess);
239 |
240 | return router.run('/test/10').then(
241 | (resolvedRoute) => {
242 | expect(resolvedRoute).to.be.an('object');
243 | expect(resolvedRoute).to.have.property('pathname').and.be.equal('/test/10');
244 | expect(resolvedRoute).to.have.property('components').and.be.deep.equal(['a', 'b']);
245 | expect(resolvedRoute).to.have.property('vars').and.be.deep.equal({
246 | variable: '10'
247 | });
248 | expect(resolvedRoute).to.have.property('query').and.be.deep.equal({});
249 | expect(resolvedRoute).to.have.property('attrs').and.be.deep.equal({ override: false });
250 | expect(router.currentRoute()).to.be.an('object');
251 | expect(history.pushState.calledOnce).to.be.equal(true);
252 | expect(changeStart.calledOnce).to.be.equal(true);
253 | expect(changeSuccess.calledOnce).to.be.equal(true);
254 | expect(onTransition.calledOnce).to.be.equal(true);
255 | }
256 | );
257 | });
258 |
259 | it('rejects if route is not found and calls callbacks', () => {
260 | const onTransition = spy();
261 | let history;
262 |
263 | const router = new Router(
264 | [
265 | {
266 | path: '/',
267 | component: 'a',
268 | children: () => Promise.resolve([{ path: 'test/:variable{\\d+}', component: 'b' }])
269 | }
270 | ],
271 | history = createMemoryHistory(),
272 | onTransition
273 | );
274 |
275 | const changeStart = spy();
276 | const changeFail = spy();
277 | const notFound = spy();
278 |
279 | stub(history);
280 |
281 | router.addChangeStartListener(changeStart);
282 | router.addChangeFailListener(changeFail);
283 | router.addNotFoundListener(notFound);
284 |
285 | return router.run('/test/abcd').catch(
286 | (err) => {
287 | expect(changeStart.called).to.be.equal(false);
288 | expect(changeFail.called).to.be.equal(false);
289 | expect(notFound.called).to.be.equal(true);
290 | expect(err).to.be.instanceof(RouteNotFoundError);
291 | expect(router.currentRoute()).to.be.equal(null);
292 | }
293 | );
294 | });
295 |
296 | it('resolves simple route and calls pushState on current and subsequent runs', () => {
297 | const onTransition = spy();
298 | let history;
299 |
300 | const router = new Router(
301 | [
302 | {
303 | path: '/',
304 | component: 'a',
305 | children: () => Promise.resolve([
306 | { path: '', component: 'b' },
307 | { path: 'test', component: 'c' }
308 | ])
309 | }
310 | ],
311 | history = createMemoryHistory(),
312 | onTransition
313 | );
314 |
315 | const changeStart = spy();
316 | const changeSuccess = spy();
317 |
318 | spy(history, 'pushState');
319 |
320 | router.addChangeStartListener(changeStart);
321 | router.addChangeSuccessListener(changeSuccess);
322 |
323 | return router.run('/').then(
324 | (resolvedRoute) => {
325 | expect(resolvedRoute).to.be.an('object');
326 | expect(resolvedRoute).to.have.property('pathname').and.be.equal('/');
327 | expect(resolvedRoute).to.have.property('components').and.be.deep.equal(['a', 'b']);
328 | expect(resolvedRoute).to.have.property('vars').and.be.deep.equal({});
329 | expect(resolvedRoute).to.have.property('query').and.be.deep.equal({});
330 | expect(resolvedRoute).to.have.property('attrs').and.be.deep.equal({});
331 | expect(router.currentRoute()).to.be.equal(resolvedRoute);
332 |
333 | expect(history.pushState.calledOnce).to.be.equal(true);
334 | expect(changeStart.calledOnce).to.be.equal(true);
335 | expect(changeSuccess.calledOnce).to.be.equal(true);
336 | expect(onTransition.calledOnce).to.be.equal(true);
337 |
338 | return router.run('/test').then(
339 | (_resolvedRoute) => {
340 | expect(_resolvedRoute).to.be.an('object');
341 | expect(_resolvedRoute).to.have.property('pathname').and.be.equal('/test');
342 | expect(_resolvedRoute).to.have.property('components').and.be.deep.equal(['a', 'c']);
343 | expect(_resolvedRoute).to.have.property('vars').and.be.deep.equal({});
344 | expect(_resolvedRoute).to.have.property('query').and.be.deep.equal({});
345 | expect(_resolvedRoute).to.have.property('attrs').and.be.deep.equal({});
346 | expect(router.currentRoute()).to.be.equal(_resolvedRoute);
347 |
348 | expect(history.pushState.calledTwice).to.be.equal(true);
349 | expect(changeStart.calledTwice).to.be.equal(true);
350 | expect(changeSuccess.calledTwice).to.be.equal(true);
351 | expect(onTransition.calledTwice).to.be.equal(true);
352 | }
353 | );
354 | }
355 | );
356 | });
357 |
358 | it('rejects not found route (and if has previous state, calls fail callback)', () => {
359 | const onTransition = spy();
360 | let history;
361 |
362 | const router = new Router(
363 | [
364 | {
365 | path: '/',
366 | component: 'a',
367 | children: () => Promise.resolve([
368 | { path: '', component: 'b' },
369 | { path: 'test', component: 'c' }
370 | ])
371 | }
372 | ],
373 | history = createMemoryHistory(),
374 | onTransition
375 | );
376 |
377 | const changeStart = spy();
378 | const changeSuccess = spy();
379 | const changeFail = spy();
380 |
381 | spy(history, 'pushState');
382 |
383 | router.addChangeStartListener(changeStart);
384 | router.addChangeSuccessListener(changeSuccess);
385 | router.addChangeFailListener(changeFail);
386 |
387 | return router.run('/').then(
388 | (resolvedRoute) => {
389 | expect(resolvedRoute).to.be.an('object');
390 | expect(resolvedRoute).to.have.property('pathname').and.be.equal('/');
391 | expect(resolvedRoute).to.have.property('components').and.be.deep.equal(['a', 'b']);
392 | expect(resolvedRoute).to.have.property('vars').and.be.deep.equal({});
393 | expect(resolvedRoute).to.have.property('attrs').and.be.deep.equal({});
394 | expect(router.currentRoute()).to.be.an('object');
395 | expect(router.currentRoute()).to.have.property('pathname').and.be.equal('/');
396 | expect(router.currentRoute()).to.have.property('components').and.be.deep.equal(['a', 'b']);
397 | expect(router.currentRoute()).to.have.property('vars').and.be.deep.equal({});
398 | expect(router.currentRoute()).to.have.property('attrs').and.be.deep.equal({});
399 | expect(history.pushState.calledOnce).to.be.equal(true);
400 | expect(changeStart.calledOnce).to.be.equal(true);
401 | expect(changeSuccess.calledOnce).to.be.equal(true);
402 | expect(changeFail.called).to.be.equal(false);
403 | expect(onTransition.calledOnce).to.be.equal(true);
404 |
405 | return router.run('/lalala').catch(
406 | (err) => {
407 | expect(router.currentRoute()).to.be.deep.equal(resolvedRoute);
408 | expect(err).to.be.instanceof(RouteNotFoundError);
409 |
410 | // change listeners should not be called at alle
411 | // because they are called only if route matches
412 | expect(changeStart.calledOnce).to.be.equal(true);
413 | expect(changeFail.called).to.be.equal(false);
414 | expect(changeSuccess.calledOnce).to.be.equal(true);
415 |
416 | // this is called everytime routes finishes
417 | expect(onTransition.calledTwice).to.be.equal(true);
418 |
419 | // we don't expect to change state of history
420 | // because we want user to do something about not found event
421 | expect(history.pushState.calledOnce).to.be.equal(true);
422 | }
423 | );
424 | }
425 | );
426 | });
427 |
428 | it('calls onEnter on route with current route and resolving route', () => {
429 | const onTransition = spy();
430 |
431 | const router = new Router(
432 | [
433 | {
434 | path: 'a',
435 | component: 'dashboard',
436 | children: [
437 | {
438 | path: 'b',
439 | component: 'newmessage'
440 | }
441 | ]
442 | },
443 | {
444 | path: '',
445 | component: 'login'
446 | },
447 | {
448 | path: 'registration',
449 | component: 'registration'
450 | }
451 | ],
452 | createMemoryHistory(),
453 | onTransition
454 | );
455 |
456 | const changeStart = spy();
457 |
458 | router.addChangeStartListener(changeStart);
459 |
460 | expect(router.currentRoute()).to.be.equal(null);
461 |
462 | return router.run('/').then(
463 | (resolvedRoute) => {
464 | expect(changeStart.calledOnce).to.be.equal(true);
465 | expect(router.currentRoute()).not.to.be.equal(null);
466 | expect(resolvedRoute).to.be.equal(router.currentRoute());
467 | const previousRoute = router.currentRoute();
468 |
469 | return router.run('/a/b', { a: 1 }).then(
470 | (newRoute) => {
471 | expect(changeStart.calledTwice).to.be.equal(true);
472 | expect(router.currentRoute()).not.to.be.equal(previousRoute);
473 | expect(newRoute).not.to.be.equal(previousRoute);
474 | expect(newRoute.fullPath).to.be.equal('/a/b?a=1');
475 | expect(router.currentRoute()).to.be.equal(newRoute);
476 | expect(changeStart.getCall(1).args[0]).to.be.deep.equal(previousRoute);
477 | expect(changeStart.getCall(1).args[1]).to.be.deep.equal(newRoute);
478 | }
479 | );
480 | }
481 | );
482 | });
483 |
484 | it('resolves onEnter handlers in order', () => {
485 | const onTransition = spy();
486 | const onEnter1 = spy(() => new Promise(resolve => {
487 | setTimeout(resolve, 150);
488 | }));
489 | const onEnter2 = spy(() => Promise.resolve());
490 |
491 | const router = new Router(
492 | [
493 | {
494 | path: 'a',
495 | component: 'dashboard',
496 | onEnter: onEnter1,
497 | children: [
498 | {
499 | path: 'b',
500 | component: 'newmessage',
501 | onEnter: onEnter2
502 | }
503 | ]
504 | }
505 | ],
506 | createMemoryHistory(),
507 | onTransition
508 | );
509 |
510 | return router.run('/a/b').then(
511 | (resolvedRoute) => {
512 | expect(router.currentRoute()).not.to.be.equal(null);
513 | expect(resolvedRoute).to.be.equal(router.currentRoute());
514 | expect(onEnter1.calledBefore(onEnter2)).to.be.equal(true);
515 | }
516 | );
517 | });
518 |
519 | it('resolves onLeave handlers in order', () => {
520 | const onTransition = spy();
521 | const onLeave1 = spy(() => new Promise(resolve => {
522 | setTimeout(resolve, 150);
523 | }));
524 | const onLeave2 = spy(() => Promise.resolve());
525 |
526 | const router = new Router(
527 | [
528 | {
529 | path: '/',
530 | component: 'a'
531 | },
532 | {
533 | path: 'a',
534 | component: 'dashboard',
535 | onLeave: onLeave1,
536 | children: [
537 | {
538 | path: 'b',
539 | component: 'newmessage',
540 | onLeave: onLeave2
541 | }
542 | ]
543 | }
544 | ],
545 | createMemoryHistory(),
546 | onTransition
547 | );
548 |
549 | return router.run('/a/b').then(
550 | () => {
551 | return router.run('/').then(() => {
552 | expect(onLeave2.calledBefore(onLeave1)).to.be.equal(true);
553 | });
554 | }
555 | );
556 | });
557 | });
558 |
559 | describe('handler wrapping', () => {
560 | function createRouterForWrappers() {
561 | const onAEnterSpy = spy();
562 | const onBLeaveSpy = spy();
563 |
564 | const router = new Router([
565 | { path: '/', component: 'A', onEnter: onAEnterSpy },
566 | { path: '/test', component: 'B', onLeave: onBLeaveSpy }
567 | ], createMemoryHistory());
568 |
569 | return {
570 | router,
571 | onAEnterSpy,
572 | onBLeaveSpy
573 | };
574 | }
575 |
576 | describe('#wrapOnEnterHandler()', () => {
577 | it('wraps route onEnter handler with provided function', () => {
578 | const { router, onAEnterSpy } = createRouterForWrappers();
579 |
580 | const onEnterSpy = spy((onEnter) => {
581 | return onEnter('a', 'b', 'c');
582 | });
583 |
584 | router.wrapOnEnterHandler(onEnterSpy);
585 |
586 | return router.run('/', {}).then(
587 | () => {
588 | expect(onEnterSpy.calledOnce).to.be.equal(true);
589 | expect(onAEnterSpy.calledOnce).to.be.equal(true);
590 |
591 | const call = onAEnterSpy.getCall(0);
592 | const [previous, current, _router, ...rest] = call.args;
593 |
594 | expect(call.args).to.have.length(6);
595 | expect(previous).to.be.equal(null); // previous route
596 | expect(current).to.be.an('object').with.property('pathname').equal('/'); // current route
597 | expect(_router).to.be.equal(router);
598 | expect(rest).to.be.eql(['a', 'b', 'c']);
599 | }
600 | );
601 | });
602 | });
603 |
604 | describe('#wrapOnLeaveHandler()', () => {
605 | it('wraps route onEnter handler with provided function', () => {
606 | const { router, onBLeaveSpy } = createRouterForWrappers();
607 |
608 | const onLeaveSpy = spy((onLeave) => {
609 | return onLeave('a', 'b', 'c');
610 | });
611 |
612 | router.wrapOnLeaveHandler(onLeaveSpy);
613 |
614 | return router.run('/test', {}).then(
615 | () => {
616 | return router.run('/', {}).then(
617 | () => {
618 | expect(onLeaveSpy.calledOnce).to.be.equal(true);
619 | expect(onBLeaveSpy.calledOnce).to.be.equal(true);
620 |
621 | const call = onBLeaveSpy.getCall(0);
622 | const [resolved, _router, ...rest] = call.args;
623 |
624 | expect(call.args).to.have.length(5);
625 | expect(resolved).to.be.an('object').with.property('pathname').equal('/'); // current route
626 | expect(_router).to.be.equal(router);
627 | expect(rest).to.be.eql(['a', 'b', 'c']);
628 | }
629 | );
630 | }
631 | );
632 | });
633 | });
634 | });
635 | });
636 |
--------------------------------------------------------------------------------
/test/createRoutex.spec.js:
--------------------------------------------------------------------------------
1 | import createRoutex from '../src/createRoutex';
2 | import { createMemoryHistory } from 'history';
3 | import { expect } from 'chai';
4 | import Router from '../src/Router';
5 | import { RouteNotFoundError } from '../src/errors';
6 | import { compose, createStore, combineReducers } from 'redux';
7 | import { transitionTo } from '../src/actions';
8 | import { spy } from 'sinon';
9 |
10 | describe('createRoutex()', () => {
11 | let routex;
12 |
13 | beforeEach(() => {
14 | routex = createRoutex([
15 | {
16 | path: '/',
17 | component: 'Index'
18 | },
19 | {
20 | path: '/test',
21 | component: 'Test'
22 | },
23 | {
24 | path: '/rejected',
25 | onEnter: () => Promise.reject()
26 | }
27 | ], createMemoryHistory());
28 | });
29 |
30 | it('exposes public API + router instance', () => {
31 | expect(routex).to.be.an('object');
32 | expect(routex).to.have.property('router').and.to.be.instanceof(Router);
33 | expect(routex).to.have.property('store').and.to.be.a('function');
34 | expect(routex).to.have.property('reducer').and.to.be.a('object');
35 | expect(routex.reducer).to.have.property('router').and.to.be.a('function');
36 | });
37 |
38 | it('exposes redux public API + router instance on redux store', () => {
39 | const store = compose(routex.store)(createStore)(combineReducers(routex.reducer));
40 |
41 | expect(store).to.be.an('object');
42 | expect(store).to.have.keys('dispatch', 'subscribe', 'getState', 'replaceReducer', 'router');
43 | expect(store.router).to.be.instanceof(Router);
44 | });
45 |
46 | it('starts listening to pop state event on initial store creation', () => {
47 | routex.router.listen = spy(routex.router.listen);
48 |
49 | compose(routex.store)(createStore)(combineReducers(routex.reducer));
50 |
51 | expect(routex.router.listen.calledOnce).to.be.equal(true);
52 | });
53 |
54 | it('runs listeners on successful transition dispatch and sets state in reducer', (done) => {
55 | routex.router.run = spy(routex.router.run);
56 |
57 | const store = compose(routex.store)(createStore)(combineReducers(routex.reducer));
58 | const startSpy = spy();
59 | const successSpy = spy();
60 | let indexRoute;
61 |
62 | const unsubscribe = store.router.addChangeSuccessListener((resolvedRoute) => {
63 | indexRoute = resolvedRoute;
64 | unsubscribe(); // unregister previous
65 |
66 | store.router.addChangeStartListener(startSpy);
67 | store.router.addChangeStartListener((currentRoute, nextRoute) => {
68 | try {
69 | expect(store.getState().router.state).to.be.equal('TRANSITIONING');
70 | expect(store.getState().router.route).to.be.equal(indexRoute);
71 | expect(store.getState().router.route).to.be.equal(currentRoute);
72 | expect(store.getState().router.nextRoute).to.be.equal(nextRoute);
73 | expect(currentRoute).to.not.be.equal(nextRoute);
74 | } catch (e) {
75 | done(e);
76 | }
77 | });
78 | store.router.addChangeSuccessListener(successSpy);
79 |
80 | store.dispatch(transitionTo('/test')).then(() => {
81 | try {
82 | expect(startSpy.calledOnce).to.be.equal(true);
83 |
84 | expect(startSpy.getCall(0).args[0]).to.contain.all.keys('pathname', 'components');
85 | expect(startSpy.getCall(0).args[0].pathname).to.be.equal('/');
86 | expect(startSpy.getCall(0).args[0].components).to.be.eql(['Index']);
87 |
88 | expect(startSpy.getCall(0).args[1]).to.contain.all.keys('pathname', 'components');
89 | expect(startSpy.getCall(0).args[1].pathname).to.be.equal('/test');
90 | expect(startSpy.getCall(0).args[1].components).to.be.eql(['Test']);
91 |
92 | expect(successSpy.calledOnce).to.be.equal(true);
93 |
94 | expect(successSpy.getCall(0).args[0]).to.contain.all.keys('pathname', 'components');
95 | expect(successSpy.getCall(0).args[0].pathname).to.be.equal('/test');
96 | expect(successSpy.getCall(0).args[0].components).to.be.eql(['Test']);
97 |
98 | expect(store.getState().router.state).to.be.equal('TRANSITIONED');
99 | expect(store.getState().router.route).to.be.equal(successSpy.getCall(0).args[0]);
100 | expect(store.getState().router).to.not.have.key('nextRoute');
101 |
102 | done();
103 | } catch (e) {
104 | done(e);
105 | }
106 | });
107 | });
108 | });
109 |
110 | it('runs listeners on failed transition dispatch and sets state in reducer', (done) => {
111 | routex.router.run = spy(routex.router.run);
112 |
113 | const store = compose(routex.store)(createStore)(combineReducers(routex.reducer));
114 | const startSpy = spy();
115 | const failSpy = spy();
116 | let indexRoute;
117 |
118 | const unsubscribe = store.router.addChangeSuccessListener((resolvedRoute) => {
119 | indexRoute = resolvedRoute;
120 | unsubscribe(); // unregister previous
121 |
122 | store.router.addChangeStartListener(startSpy);
123 | store.router.addChangeStartListener((currentRoute, nextRoute) => {
124 | try {
125 | expect(store.getState().router.state).to.be.equal('TRANSITIONING');
126 | expect(store.getState().router.route).to.be.equal(indexRoute);
127 | expect(store.getState().router.route).to.be.equal(currentRoute);
128 | expect(store.getState().router.nextRoute).to.be.equal(nextRoute);
129 | expect(currentRoute).to.not.be.equal(nextRoute);
130 | } catch (e) {
131 | done(e);
132 | }
133 | });
134 | store.router.addChangeFailListener(failSpy);
135 |
136 | store.dispatch(transitionTo('/rejected')).catch(() => {
137 | try {
138 | expect(failSpy.calledOnce).to.be.equal(true);
139 |
140 | expect(failSpy.getCall(0).args[1]).to.be.equal(indexRoute);
141 |
142 | expect(store.getState().router.state).to.be.equal('TRANSITIONED');
143 | expect(store.getState().router.route).to.be.equal(failSpy.getCall(0).args[1]);
144 | expect(store.getState().router).to.not.have.key('nextRoute');
145 |
146 | done();
147 | } catch (e) {
148 | done(e);
149 | }
150 | });
151 | });
152 | });
153 |
154 | it('runs only not found listeners on transition dispatch to non existing route', (done) => {
155 | routex.router.run = spy(routex.router.run);
156 |
157 | const store = compose(routex.store)(createStore)(combineReducers(routex.reducer));
158 | const startSpy = spy();
159 | const successSpy = spy();
160 | const failSpy = spy();
161 | const notFoundSpy = spy();
162 |
163 | const unsubscribe = store.router.addChangeSuccessListener((resolvedRoute) => {
164 | unsubscribe(); // unregister previous
165 |
166 | try {
167 | expect(store.getState().router.state).to.be.equal('TRANSITIONED');
168 | expect(store.getState().router.route).to.be.equal(resolvedRoute);
169 | } catch (e) {
170 | done(e);
171 | }
172 |
173 | store.router.addChangeStartListener(startSpy);
174 | store.router.addChangeFailListener(failSpy);
175 | store.router.addChangeSuccessListener(successSpy);
176 | store.router.addNotFoundListener(notFoundSpy);
177 |
178 | store.dispatch(transitionTo('/not-existing')).catch((err) => {
179 | try {
180 | expect(err).to.be.instanceof(RouteNotFoundError);
181 |
182 | expect(startSpy.called).to.be.equal(false);
183 | expect(failSpy.called).to.be.equal(false);
184 | expect(successSpy.called).to.be.equal(false);
185 | expect(notFoundSpy.calledOnce).to.be.equal(true);
186 |
187 | expect(notFoundSpy.getCall(0).args[0]).to.be.equal('/not-existing');
188 | expect(notFoundSpy.getCall(0).args[1]).to.be.eql({});
189 |
190 | // state is untouched
191 | expect(store.getState().router.state).to.be.equal('TRANSITIONED');
192 | expect(store.getState().router.route).to.be.equal(resolvedRoute);
193 |
194 | done();
195 | } catch (e) {
196 | done(e);
197 | }
198 | });
199 | });
200 | });
201 | });
202 |
--------------------------------------------------------------------------------
/test/react/Link.spec.js:
--------------------------------------------------------------------------------
1 | /* eslint func-names:0 */
2 | import { expect } from 'chai';
3 | import jsdom from 'mocha-jsdom';
4 | import { createStore, combineReducers, compose } from 'redux';
5 | import { createMemoryHistory } from 'history';
6 | import createRoutex from '../../src/createRoutex.js';
7 | import React from 'react';
8 | import { Provider } from 'react-redux';
9 | import { Link } from '../../src/react';
10 | import { renderToStaticMarkup } from 'react-dom/server';
11 | import { transitionTo } from '../../src/actions';
12 |
13 | describe('React', () => {
14 | describe('Link', () => {
15 | jsdom();
16 |
17 | let store;
18 |
19 | beforeEach(() => {
20 | const routex = createRoutex([
21 | {
22 | path: '/path/:id',
23 | component: 'b',
24 | children: [
25 | {
26 | path: 'messages',
27 | component: 'a'
28 | }
29 | ]
30 | },
31 | {
32 | path: '/',
33 | component: 'index',
34 | children: [
35 | {
36 | path: '/',
37 | component: 'nested-index'
38 | },
39 | {
40 | path: '/:id',
41 | component: 'nested-var-index'
42 | }
43 | ]
44 | }
45 | ], createMemoryHistory());
46 |
47 | store = compose(
48 | routex.store
49 | )(createStore)(
50 | combineReducers(routex.reducer)
51 | );
52 | });
53 |
54 | it('renders anchor with simple path', function() {
55 | const tree = renderToStaticMarkup(
56 |
57 |
58 |
59 | );
60 |
61 | expect(tree).to.be.equal('');
62 | });
63 |
64 | it('renders anchor with href and query string', function() {
65 | const tree = renderToStaticMarkup(
66 |
67 |
68 |
69 | );
70 |
71 | expect(tree).to.be.equal('');
72 | });
73 |
74 | describe('adds props from stateProps by current state', () => {
75 | it('short route', function(done) {
76 | const stateProps = {
77 | active: { className: 'active' },
78 | inactive: { className: 'inactive' }
79 | };
80 |
81 | store
82 | .dispatch(transitionTo('/path/123'))
83 | .then(
84 | () => {
85 | try {
86 | const tree = renderToStaticMarkup(
87 |
88 |
89 |
90 |
91 |
92 |
93 |
94 | );
95 |
96 | expect(tree).to.be.equal(
97 | '' +
98 | '
' +
99 | '
' +
100 | '
' +
101 | '
127 |
128 |
129 |
130 |
131 |
132 | );
133 |
134 | expect(tree).to.be.equal(
135 | '' +
136 | '
' +
137 | '
' +
138 | '
' +
139 | '
165 |
166 |
167 |
168 |
169 |
170 | );
171 |
172 | expect(tree).to.be.equal(
173 | '' +
174 | '
' +
175 | '
' +
176 | '
' +
177 | '
203 |
204 |
205 |
206 |
207 |
208 | );
209 |
210 | expect(tree).to.be.equal(
211 | '' +
212 | '
' +
213 | '
' +
214 | '
' +
215 | '
{this.props.children || 'Pom'}
;
30 | }
31 | }
32 |
33 | class Child extends Component {
34 | render() {
35 | return Child
;
36 | }
37 | }
38 |
39 | it('renders matched route on initial load when state is not provided (default state)', function(done) {
40 | const store = createRoutexStore(
41 | [
42 | {
43 | path: '/',
44 | component: App
45 | }
46 | ],
47 | undefined,
48 | (err) => {
49 | if (err) done(err);
50 |
51 | const tree = TestUtils.renderIntoDocument(
52 |
53 |
54 |
55 | );
56 |
57 | TestUtils.findRenderedComponentWithType(tree, App);
58 | done();
59 | });
60 | });
61 |
62 | it('renders matched route on initial load (rehydrated)', function(done) {
63 | const store = createRoutexStore(
64 | [
65 | {
66 | path: '/',
67 | component: App
68 | }
69 | ],
70 | {
71 | router: { state: 'TRANSITIONED', route: { pathname: '/', query: {}, vars: {} }}
72 | },
73 | (err) => {
74 | if (err) done(err);
75 |
76 | const tree = TestUtils.renderIntoDocument(
77 |
78 |
79 |
80 | );
81 |
82 | TestUtils.findRenderedComponentWithType(tree, App);
83 | done();
84 | }
85 | );
86 | });
87 |
88 | it('renders route components on successful transition', function(done) {
89 | let started = false;
90 |
91 | const store = createRoutexStore(
92 | [
93 | {
94 | path: '/',
95 | component: App,
96 | children: [
97 | {
98 | path: '/child',
99 | component: Child
100 | }
101 | ]
102 | }
103 | ],
104 | {
105 | router: { state: 'TRANSITIONED', route: { pathname: '/', query: {}, vars: {} }}
106 | },
107 | () => {
108 | if (started) {
109 | return;
110 | }
111 |
112 | started = true;
113 |
114 | try {
115 | expect(
116 | ReactDOM.renderToString(
117 |
118 |
119 |
120 | )
121 | ).to.match(/Pom/);
122 | } catch (e) {
123 | done(e);
124 | }
125 |
126 | setImmediate(
127 | () => {
128 | store.dispatch(actions.transitionTo('/child')).then(
129 | () => {
130 | try {
131 | expect(store.getState().router.route.pathname).to.be.equal('/child');
132 | expect(
133 | ReactDOM.renderToString(
134 |
135 |
136 |
137 | )
138 | ).to.match(/Child/);
139 | done();
140 | } catch (e) {
141 | done(e);
142 | }
143 | },
144 | done.bind(this, Error('Should transition to /child'))
145 | );
146 | }
147 | );
148 |
149 | }
150 | );
151 | });
152 | });
153 | });
154 |
--------------------------------------------------------------------------------
/test/routex.spec.js:
--------------------------------------------------------------------------------
1 | import { createStore, combineReducers, compose } from 'redux';
2 | import createRoutex from '../src/createRoutex';
3 | import { createMemoryHistory } from 'history';
4 | import * as actions from '../src/actions';
5 | import { spy } from 'sinon';
6 | import { expect } from 'chai';
7 |
8 | describe('routex', () => {
9 | let history;
10 | let store;
11 |
12 | const transitionTo = actions.transitionTo;
13 |
14 | function createRoutexStore(_history, onTransition, initialState) {
15 | const routex = createRoutex(
16 | [
17 | { path: '/', component: 'A' },
18 | { path: '/child', component: 'Child' },
19 | { path: '/rejected-on-enter', onEnter: () => Promise.reject(), component: 'RejectedOnEnter' },
20 | { path: '/rejected-on-leave', onLeave: () => Promise.reject(), component: 'RejectedOnLeave' },
21 | { path: '/with-variables/:user/:id{\\d+}', component: 'WithVariables' }
22 | ],
23 | _history,
24 | onTransition
25 | );
26 |
27 | return compose(routex.store)(createStore)(combineReducers(routex.reducer), initialState);
28 | }
29 |
30 | function stripRouteInfo(route) {
31 | const { pathname, query, vars, components } = route;
32 |
33 | return {
34 | pathname,
35 | query,
36 | vars,
37 | components
38 | };
39 | }
40 |
41 | function stepper(steps, done) {
42 | let currentStep = 0;
43 |
44 | return function nextStep() {
45 | try {
46 | steps[currentStep++]();
47 | } catch (e) {
48 | done(e);
49 | }
50 | };
51 | }
52 |
53 | beforeEach(() => {
54 | history = createMemoryHistory();
55 | });
56 |
57 | it('replaces state in history on initial load if router state is initial', (done) => {
58 | spy(history, 'replaceState');
59 |
60 | const onTransition = spy(() => {
61 | expect(onTransition.called).to.be.equal(true);
62 | expect(history.replaceState.called).to.be.equal(true);
63 | expect(store.getState().router.state).to.be.equal('TRANSITIONED');
64 | expect(stripRouteInfo(store.getState().router.route)).to.be.deep.equal({
65 | pathname: '/',
66 | query: {},
67 | vars: {},
68 | components: ['A']
69 | });
70 |
71 | done();
72 | });
73 | store = createRoutexStore(history, onTransition);
74 | });
75 |
76 | it('replaces state in history on initial load if current state is null (in browser after load)', (done) => {
77 | spy(history, 'replaceState');
78 |
79 | const onTransition = spy(() => {
80 | expect(onTransition.called).to.be.equal(true);
81 | expect(history.replaceState.called).to.be.equal(true);
82 | expect(store.getState().router.state).to.be.equal('TRANSITIONED');
83 | expect(stripRouteInfo(store.getState().router.route)).to.be.deep.equal({
84 | pathname: '/',
85 | query: {},
86 | vars: {},
87 | components: ['A']
88 | });
89 |
90 | done();
91 | });
92 |
93 | store = createRoutexStore(history, onTransition, {
94 | router: {
95 | state: 'TRANSITIONED',
96 | route: {
97 | pathname: '/',
98 | query: {},
99 | vars: {}
100 | }
101 | }
102 | });
103 | });
104 |
105 | it('pushes state to history on successful transition (from known state to another)', (done) => {
106 | let _stepper;
107 | spy(history, 'pushState');
108 |
109 | const steps = [
110 | () => {
111 | expect(store.getState().router.state).to.be.equal('TRANSITIONED');
112 | expect(stripRouteInfo(store.getState().router.route)).to.be.deep.equal({
113 | pathname: '/',
114 | query: {},
115 | vars: {},
116 | components: ['A']
117 | });
118 |
119 | store.dispatch(transitionTo('/child', {}));
120 | },
121 | () => {
122 | expect(_stepper.calledTwice).to.be.equal(true);
123 | expect(history.pushState.called).to.be.equal(true);
124 | expect(stripRouteInfo(store.getState().router.route)).to.deep.equal({
125 | pathname: '/child',
126 | query: {},
127 | vars: {},
128 | components: ['Child']
129 | });
130 |
131 | done();
132 | }
133 | ];
134 |
135 | _stepper = spy(stepper(steps, done));
136 |
137 | store = createRoutexStore(history, _stepper, {
138 | router: {
139 | state: 'TRANSITIONED',
140 | route: {
141 | pathname: '/',
142 | query: {},
143 | vars: {}
144 | }
145 | }
146 | });
147 | });
148 |
149 | it('changes state using change success action if pop state event is emitted', (done) => {
150 | const childState = {
151 | pathname: '/child',
152 | query: {},
153 | vars: {},
154 | components: ['Child']
155 | };
156 |
157 | const indexState = {
158 | pathname: '/',
159 | query: {},
160 | vars: {},
161 | components: ['A']
162 | };
163 |
164 | const steps = [
165 | () => {
166 | expect(store.getState().router.state).to.be.equal('TRANSITIONED');
167 | expect(stripRouteInfo(store.getState().router.route)).to.deep.equal(indexState);
168 |
169 | store.dispatch(transitionTo('/child', {}));
170 | },
171 | () => {
172 | expect(store.getState().router.state).to.be.equal('TRANSITIONED');
173 | expect(stripRouteInfo(store.getState().router.route)).to.deep.equal(childState);
174 |
175 | // call on pop state with state from history and return back
176 | // this dispatches ROUTE_CHANGE_SUCCESS immediately
177 | history.goBack();
178 | },
179 | () => {
180 | expect(store.getState().router.state).to.be.equal('TRANSITIONED');
181 | expect(stripRouteInfo(store.getState().router.route)).to.deep.equal(indexState);
182 |
183 | // go forward
184 | history.goForward();
185 | },
186 | () => {
187 | expect(store.getState().router.state).to.be.equal('TRANSITIONED');
188 | expect(stripRouteInfo(store.getState().router.route)).to.deep.equal(childState);
189 |
190 | done();
191 | }
192 | ];
193 |
194 | store = createRoutexStore(history, stepper(steps, done), {
195 | router: {
196 | state: 'TRANSITIONED',
197 | route: {
198 | pathname: '/',
199 | query: {},
200 | vars: {}
201 | }
202 | }
203 | });
204 | });
205 |
206 | it('cancels transition if one of onEnter handlers rejects', (done) => {
207 | const indexState = {
208 | pathname: '/',
209 | query: {},
210 | vars: {},
211 | components: ['A']
212 | };
213 |
214 | const steps = [
215 | () => {
216 | expect(store.getState().router.state).to.be.equal('TRANSITIONED');
217 | expect(stripRouteInfo(store.getState().router.route)).to.deep.equal(indexState);
218 |
219 | store.dispatch(transitionTo('/rejected-on-enter', {}));
220 | },
221 | () => {
222 | expect(store.getState().router.state).to.be.equal('TRANSITIONED');
223 | expect(store.getState().router.error).to.be.eql(Error('onEnter handlers on route rejected-on-enter are not resolved.'));
224 | expect(stripRouteInfo(store.getState().router.route)).to.deep.equal(indexState);
225 |
226 | done();
227 | }
228 | ];
229 |
230 | const _stepper = stepper(steps, done);
231 |
232 | store = createRoutexStore(createMemoryHistory(), _stepper, {
233 | router: {
234 | state: 'TRANSITIONED',
235 | route: {
236 | pathname: '/',
237 | query: {},
238 | vars: {}
239 | }
240 | }
241 | });
242 | });
243 |
244 | it('cancels transition if one of onLeave handlers rejects', (done) => {
245 | const indexState = {
246 | pathname: '/rejected-on-leave',
247 | query: {},
248 | vars: {},
249 | components: ['RejectedOnLeave']
250 | };
251 |
252 | const steps = [
253 | () => {
254 | expect(store.getState().router.state).to.be.equal('TRANSITIONED');
255 | expect(stripRouteInfo(store.getState().router.route)).to.deep.equal(indexState);
256 |
257 | store.dispatch(transitionTo('/', {}));
258 | },
259 | () => {
260 | expect(store.getState().router.state).to.be.equal('TRANSITIONED');
261 | expect(store.getState().router.error).to.be.eql(Error('onLeave handlers on route rejected-on-leave are not resolved.'));
262 | expect(stripRouteInfo(store.getState().router.route)).to.deep.equal(indexState);
263 |
264 | done();
265 | }
266 | ];
267 |
268 | const _stepper = stepper(steps, done);
269 |
270 | store = createRoutexStore(createMemoryHistory(['/rejected-on-leave']), _stepper, {
271 | router: {
272 | state: 'TRANSITIONED',
273 | route: {
274 | pathname: '/rejected-on-leave',
275 | query: {},
276 | vars: {}
277 | }
278 | }
279 | });
280 | });
281 |
282 | });
283 |
--------------------------------------------------------------------------------
/test/utils/urlUtils.spec.js:
--------------------------------------------------------------------------------
1 | import { expect } from 'chai';
2 | import { createHref } from '../../src/utils/urlUtils';
3 |
4 | describe('utils', () => {
5 |
6 | describe('createHref()', () => {
7 | it('creates simple href', () => {
8 | expect(createHref('/', { a: 1 })).to.be.equal('/?a=1');
9 | expect(createHref('/', { a: [1, 0] })).to.be.equal('/?a%5B%5D=1&a%5B%5D=0');
10 | });
11 |
12 | it('parses existing query string and merges with new query params', () => {
13 | expect(createHref('/?b=1', { a: [1, 0] })).to.be.equal('/?b=1&a%5B%5D=1&a%5B%5D=0');
14 | expect(createHref('/?', { a: 1 })).to.be.equal('/?a=1');
15 | });
16 |
17 | it('strips question mark if query string of given path is empty', () => {
18 | expect(createHref('/?')).to.be.equal('/');
19 | });
20 | });
21 |
22 | });
23 |
--------------------------------------------------------------------------------
/webpack.config.js:
--------------------------------------------------------------------------------
1 | 'use strict';
2 |
3 | var webpack = require('webpack');
4 |
5 | var plugins = [
6 | new webpack.optimize.OccurenceOrderPlugin(),
7 | new webpack.DefinePlugin({
8 | 'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV)
9 | })
10 | ];
11 |
12 | if (process.env.NODE_ENV === 'production') {
13 | plugins.push(
14 | new webpack.optimize.UglifyJsPlugin({
15 | compressor: {
16 | screw_ie8: true,
17 | warnings: false
18 | }
19 | })
20 | );
21 | }
22 |
23 | var reactExternal = {
24 | root: 'React',
25 | commonjs2: 'react',
26 | commonjs: 'react',
27 | amd: 'react'
28 | };
29 |
30 | var reduxExternal = {
31 | root: 'Redux',
32 | commonjs2: 'redux',
33 | commonjs: 'redux',
34 | amd: 'redux'
35 | };
36 |
37 | module.exports = {
38 | externals: {
39 | 'react': reactExternal,
40 | 'react-native': reactExternal,
41 | 'redux': reduxExternal
42 | },
43 | module: {
44 | loaders: [{
45 | test: /\.js$/,
46 | loaders: ['babel-loader'],
47 | exclude: /node_modules/
48 | }]
49 | },
50 | output: {
51 | library: !!process.env.MODULE_NAME ? process.env.MODULE_NAME : 'routex',
52 | libraryTarget: 'umd'
53 | },
54 | plugins: plugins,
55 | resolve: {
56 | extensions: ['', '.js']
57 | }
58 | };
59 |
--------------------------------------------------------------------------------