refactor tests and babel config. Fixes target browsers.

This is basically the change propagated from the current
default preact tempalate. Now the code compiles according to set
browsers.

tests/__mocks__/browserMocks.js

@@ -0,0 +1,21 @@
+// Mock Browser API's which are not supported by JSDOM, e.g. ServiceWorker, LocalStorage
+/**
+ * An example how to mock localStorage is given below 👇
+ */
+
+/* 
+// Mocks localStorage
+const localStorageMock = (function() {
+	let store = {};
+
+	return {
+		getItem: (key) => store[key] || null,
+		setItem: (key, value) => store[key] = value.toString(),
+		clear: () => store = {}
+	};
+
+})();
+
+Object.defineProperty(window, 'localStorage', {
+	value: localStorageMock
+}); */

tests/__mocks__/fileMocks.js

@@ -0,0 +1,3 @@
+// This fixed an error related to the CSS and loading gif breaking my Jest test
+// See https://facebook.github.io/jest/docs/en/webpack.html#handling-static-assets
+module.exports = 'test-file-stub';

tests/fileUtils.test.js

@@ -0,0 +1,108 @@
+// See: https://github.com/mzgoddard/preact-render-spy
+import { shallow, deep } from 'preact-render-spy';
+import {
+	assignFilePaths,
+	getFileFromPath,
+	removeFileAtPath,
+	getParentPath,
+	getExtensionFromFileName
+} from '../src/fileUtils';
+
+function getNestedFiles() {
+	return [
+		{ name: 'index.html' },
+		{
+			name: 'styles',
+			isFolder: true,
+			children: [{ name: 'main.css' }, { name: 'style.css' }]
+		},
+		{ name: 'script.js' }
+	];
+}
+describe('getExtensionFromFileName', () => {
+	test('should return correct extension', () => {
+		expect(getExtensionFromFileName('test.js')).toBe('js');
+		expect(getExtensionFromFileName('test.css')).toBe('css');
+		expect(getExtensionFromFileName('test.main.css')).toBe('css');
+	});
+	test('should return empty string when no extension is found', () => {
+		expect(getExtensionFromFileName('hello')).toBe('');
+	});
+});
+
+describe('assignFilePaths', () => {
+	test('should assign path on linear file system', () => {
+		const files = [{ name: 'index.html' }, { name: 'main.css' }];
+		assignFilePaths(files);
+		expect(files[0].path).toBe('index.html');
+		expect(files[1].path).toBe('main.css');
+	});
+	test('should assign path on nested file system', () => {
+		const files = getNestedFiles();
+		assignFilePaths(files);
+		expect(files[0].path).toBe('index.html');
+		expect(files[1].children[0].path).toBe('styles/main.css');
+	});
+});
+
+describe('getFileFromPath', () => {
+	test('should return file and correct index', () => {
+		const files = getNestedFiles();
+		assignFilePaths(files);
+		const { index, file } = getFileFromPath(files, 'index.html');
+		expect(index).toBe(0);
+		expect(file).toBe(files[index]);
+	});
+	test('should return empty object for non-existent path', () => {
+		const files = getNestedFiles();
+		assignFilePaths(files);
+		const { index, file } = getFileFromPath(files, 'style.css');
+		expect(index).toBe(-1);
+		expect(file).toBe(undefined);
+	});
+	test('should return file and correct index for a nested file', () => {
+		const files = getNestedFiles();
+		assignFilePaths(files);
+		const { index, file } = getFileFromPath(files, 'styles/style.css');
+		expect(index).toBe(1);
+		expect(file).toBe(files[1].children[index]);
+	});
+});
+
+describe('removeFileAtPath', () => {
+	test('should remove direct child file', () => {
+		const files = getNestedFiles();
+		assignFilePaths(files);
+
+		expect(files.length).toBe(3);
+
+		removeFileAtPath(files, 'index.html');
+		expect(files.length).toBe(2);
+		expect(files[0].name).toBe('styles');
+	});
+
+	test('should remove a nested file', () => {
+		const files = getNestedFiles();
+		assignFilePaths(files);
+
+		expect(files.length).toBe(3);
+
+		removeFileAtPath(files, 'styles/style.css');
+		expect(files.length).toBe(3);
+		expect(files[1].children.length).toBe(1);
+		expect(files[0].name).toBe('index.html');
+		expect(files[2].name).toBe('script.js');
+	});
+});
+
+describe('getParentPath', () => {
+	test('should return correct parent path for root file', () => {
+		expect(getParentPath('style.css')).toBe('');
+	});
+
+	test('should return correct parent path for nested file', () => {
+		expect(getParentPath('styles/style.css')).toBe('styles');
+		expect(getParentPath('js/plugins/main.js')).toBe('js/plugins');
+		expect(getParentPath('js/plugins/readme')).toBe('js/plugins');
+	});
+});

tests/footer.test.js

@@ -0,0 +1,12 @@
+import { h, Component } from 'preact';
+import Footer from '../src/components/Footer';
+import { Link } from 'preact-router/match';
+// See: https://github.com/mzgoddard/preact-render-spy
+import { shallow, deep } from 'preact-render-spy';
+
+describe('Initial Test of the Footer', () => {
+	test('Footer renders 1 link with an ID of notificationsBtn', () => {
+		const context = shallow(<Footer prefs={{}} />);
+		expect(context.find('#notificationsBtn').exists()).toBeTruthy();
+	});
+});