Refactor tests to remain 100% coverage with node 7

__tests__/router.spec.js

@@ -1,37 +1,15 @@
 import {createRouter} from '../index.js';
-let hashChangeHandlers = [];
-let loadHandlers = [];
 
 jest.mock('../core/dataProvider.js');
 
-// window mock
-window.addEventListener = (eventName, handler) => {
-	if (eventName === 'hashchange') {
-		hashChangeHandlers.push(handler);
-	}
-
-	if (eventName === 'load') {
-		loadHandlers.push(handler);
-	}
-};
-
-let lastHash;
-
 const simulateHashChange = hash => {
-	if (lastHash !== hash) {
-		window.location.hash = hash;
-		hashChangeHandlers.forEach(handler => handler());
-	}
+	window.location.hash = hash;
+	window.dispatchEvent(new Event('hashchange'));
 };
 
 const simulateLoad = hash => {
 	window.location.hash = hash;
-	loadHandlers.forEach(handler => handler());
-};
-
-const clearHandlers = () => {
-	hashChangeHandlers = [];
-	loadHandlers = [];
+	window.dispatchEvent(new Event('load'));
 };
 
 describe('router', () => {
@@ -44,7 +22,6 @@ describe('router', () => {
 	});
 
 	beforeEach(() => {
-		clearHandlers();
 		domEntryPoint.innerHTML = '';
 	});
 
@@ -141,8 +118,12 @@ describe('router', () => {
 				});
 				simulateLoad('');
 				simulateHashChange('');
-				expect(domEntryPoint.innerHTML).toEqual('<p>I am the default route</p>');
-				expect(spy.mock.calls.length).toBe(2);
+
+				setTimeout(() => {
+					expect(domEntryPoint.innerHTML).toEqual('<p>I am the default route</p>');
+					expect(spy.mock.calls.length).toBe(2);
+				}, 0);
+
 			});
 
 			describe('no routeHandler is defined', () => {
@@ -155,7 +136,9 @@ describe('router', () => {
 						simulateLoad('');
 						simulateHashChange('');
 					};
+
 					expect(init).not.toThrow();
+
 				});
 			});
 		});
@@ -171,8 +154,12 @@ describe('router', () => {
 				});
 				simulateLoad('');
 				simulateHashChange('');
-				expect(domEntryPoint.innerHTML).toEqual(expectedRenderedTemplate);
-				expect(spy.mock.calls.length).toBe(2);
+
+				setTimeout(() => {
+					expect(domEntryPoint.innerHTML).toEqual(expectedRenderedTemplate);
+					expect(spy.mock.calls.length).toBe(2);
+				}, 0);
+
 			});
 		});
 
@@ -192,8 +179,12 @@ describe('router', () => {
 				});
 				simulateLoad('');
 				simulateHashChange('');
-				expect(domEntryPoint.innerHTML).toEqual('<p>Rendered from template.html</p>');
-				expect(spy.mock.calls.length).toBe(2);
+
+				setTimeout(() => {
+					expect(domEntryPoint.innerHTML).toEqual('<p>Rendered from template.html</p>');
+					expect(spy.mock.calls.length).toBe(2);
+				}, 0);
+
 			});
 		});
 
@@ -209,10 +200,18 @@ describe('router', () => {
 						routeHandler: () => {},
 						dispose: spy
 					})
-					.addRoute('home', () => {});
+					.addRoute('home', {
+						routeHandler: () => {},
+						templateString: 'asdfasfasf',
+						dispose: () => {}
+					});
 				simulateHashChange('');
 				simulateHashChange('home');
-				expect(spy.mock.calls.length).toEqual(1);
+
+				setTimeout(() => {
+					expect(spy.mock.calls.length).toEqual(1);
+				}, 0);
+
 			});
 		});
 	});
@@ -225,7 +224,11 @@ describe('router', () => {
 			router
 				.addRoute('', spy, {dataToPass});
 			simulateHashChange('');
-			expect(spy.mock.calls[0][2]).toEqual({dataToPass});
+
+			setTimeout(() => {
+				expect(spy.mock.calls[0][2]).toEqual({dataToPass});
+			}, 0);
+
 		});
 
 		test('data is passed as last parameter into routeHandler function of routes with more complex configuration', () => {
@@ -239,7 +242,11 @@ describe('router', () => {
 					routeHandler: spy
 				}, {dataToPass});
 			simulateHashChange('');
-			expect(spy.mock.calls[0][2]).toEqual({dataToPass});
+
+			setTimeout(() => {
+				expect(spy.mock.calls[0][2]).toEqual({dataToPass});
+			}, 0);
+
 		});
 	});
 
@@ -254,15 +261,15 @@ describe('router', () => {
 				remove: undefined
 			};
 
-			const init = () => {
-				const router = createRouter(domEntryPointMock);
-				router
-				.addRoute('', () => {});
-				simulateHashChange('');
+			const router = createRouter(domEntryPointMock);
+			router
+				.addRoute('', () => {})
+				.addRoute('home', () => {});
+			simulateHashChange('');
+			simulateHashChange('home');
+			setTimeout(() => {
 				expect(domEntryPointMock.removeNode.mock.calls.length).toEqual(1);
-			};
-			expect(init).not.toThrow();
-
+			});
 		});
 	});
 });

core/__mocks__/httpRequestFactory.js

@@ -0,0 +1,27 @@
+export class XMLHttpRequestFactory {
+	constructor() {
+		this.shouldFail = false;
+		this.readyState = 4;
+	}
+
+	onreadystatechange() {}
+	open(httpVerb, url) {
+		if (url === '/path/to/success') {
+			this.shouldFail = false;
+		}
+
+		if (url === '/path/to/error') {
+			this.shouldFail = true;
+		}
+
+		if (url === '/path/to/not/ready') {
+			this.shouldFail = false;
+			this.readyState = 0;
+		}
+	}
+	send() {
+		if (this.shouldFail === false) {
+			this.onreadystatechange();
+		}
+	}
+}

core/__tests__/dataProvider.spec.js

@@ -1,36 +1,22 @@
 import {loadTemplate} from '../dataProvider';
-
-// Add a simple XMLHttpRequest mock which already succeeds to test functionality of the dataProvider
-
-const initXMLHttpReqestMock = shouldFail => {
-	class XMLHttpRequestMock {
-		constructor() {
-			this.readyState = shouldFail === true ? 0 : 4;
-		}
-		onreadystatechange() {}
-		open() {}
-		send() {
-			this.onreadystatechange();
-		}
-	}
-	window.XMLHttpRequest = XMLHttpRequestMock;
-
-};
+jest.mock('../httpRequestFactory.js');
 
 describe('loadTemplate()', () => {
 	test('invokes successCallback with template string if template is loaded', () => {
-		initXMLHttpReqestMock(false);
 		const spy = jest.fn();
-		loadTemplate('', spy);
-
+		loadTemplate('/path/to/success', spy);
 		expect(spy.mock.calls.length).toBe(1);
 	});
 
 	test('does not invoke successCallback if template could not get loaded', () => {
-		initXMLHttpReqestMock(true);
 		const spy = jest.fn();
-		loadTemplate('', spy);
+		loadTemplate('/path/to/error', spy);
+		expect(spy.mock.calls.length).toBe(0);
+	});
 
+	test('does not invoke successCallback if template loading is not ready', () => {
+		const spy = jest.fn();
+		loadTemplate('/path/to/not/ready', spy);
 		expect(spy.mock.calls.length).toBe(0);
 	});
 });

core/__tests__/templates.spec.js

@@ -1,4 +1,5 @@
 import {renderTemplates} from '../templates';
+jest.mock('../dataProvider.js');
 
 describe('template rendering', () => {
 	test('renders templateString, if it is defined inside the routeConfiguration', () => {
@@ -21,6 +22,34 @@ describe('template rendering', () => {
 		expect(spy.mock.calls.length).toEqual(0);
 	});
 
+	test('renders templateUrl, if it is defined inside the routeConfiguration', () => {
+		let domEntryPointMock = {
+			innerHTML: ''
+		};
+
+		const spy = jest.fn();
+		renderTemplates({templateUrl: 'path/to/template.html'}, domEntryPointMock, spy);
+		expect(domEntryPointMock.innerHTML).toEqual('<p>Rendered from template.html</p>');
+		expect(spy.mock.calls.length).toEqual(1);
+	});
+
+	test('renders templateId, if it is defined inside the routeConfiguration', () => {
+		let domEntryPointMock = {
+			innerHTML: ''
+		};
+
+		const templateScript = document.createElement('script');
+		templateScript.setAttribute('id', 'template4711');
+		templateScript.setAttribute('type', 'text/template');
+		templateScript.innerHTML = '<p>Rendered from template script with id 4711</p>';
+		document.body.appendChild(templateScript);
+
+		const spy = jest.fn();
+		renderTemplates({templateId: 'template4711'}, domEntryPointMock, spy);
+		expect(domEntryPointMock.innerHTML).toEqual('<p>Rendered from template script with id 4711</p>');
+		expect(spy.mock.calls.length).toEqual(1);
+	});
+
 	test('nothing is rendered if no routeConfiguration is defined', () => {
 		const d = {
 			innerHTML: ''

core/dataProvider.js

@@ -1,5 +1,7 @@
+import {XMLHttpRequestFactory} from './httpRequestFactory.js';
+
 export const loadTemplate = (templateUrl, successCallback) => {
-	var xhr = new XMLHttpRequest();
+	var xhr = new XMLHttpRequestFactory();
 	xhr.onreadystatechange = function () {
 		if (xhr.readyState === 4) {
 			successCallback(xhr.responseText);

core/httpRequestFactory.js

@@ -0,0 +1 @@
+export const XMLHttpRequestFactory = window.XMLHttpRequest;

package.json

@@ -11,6 +11,7 @@
     "core/dataProvider.js",
     "core/routeParams.js",
     "core/templates.js",
+    "core/httpRequestFactory.js",
     "index.js"
   ],
   "scripts": {