fix: fix testsuite and create a sample test for the footer

.babelrc

@@ -0,0 +1,11 @@
+{
+	"presets": [
+	   "react",
+	   "env"
+	],
+	"plugins": [
+		["transform-react-jsx", {
+		  "pragma": "h"
+		}]
+	  ]
+  }

package.json

@@ -4,7 +4,8 @@
 	"description": "A blazing fast & offline web playground",
 	"scripts": {
 		"start": "if-env NODE_ENV=production && npm run -s serve || npm run -s dev",
-		"build": "preact build --template src/index.html --no-prerender --service-worker false",
+		"build":
+			"preact build --template src/index.html --no-prerender --service-worker false",
 		"serve": "preact build && preact serve",
 		"dev": "preact watch --template src/index.html --https --no-prerender",
 		"lint": "eslint src",
@@ -22,10 +23,7 @@
 		"src/detached-window.js"
 	],
 	"lint-staged": {
-		"*.{js,jsx,json,css,md}": [
+		"*.{js,jsx,json,css,md}": ["prettier --write", "git add"]
-			"prettier --write",
-			"git add"
-		]
 	},
 	"devDependencies": {
 		"babel-eslint": "^7.2.3",
@@ -54,6 +52,8 @@
 	},
 	"dependencies": {
 		"@emmetio/codemirror-plugin": "^0.5.4",
+		"babel-preset-env": "^1.7.0",
+		"babel-preset-react": "^6.24.1",
 		"code-blast-codemirror": "chinchang/code-blast-codemirror#web-maker",
 		"codemirror": "^5.37.0",
 		"copy-webpack-plugin": "^4.5.1",
@@ -67,19 +67,13 @@
 	},
 	"jest": {
 		"verbose": true,
-		"setupFiles": [
+		"setupFiles": ["<rootDir>/src/tests/__mocks__/browserMocks.js"],
-			"<rootDir>/src/tests/__mocks__/browserMocks.js"
-		],
 		"testURL": "http://localhost:8080",
-		"moduleFileExtensions": [
+		"moduleFileExtensions": ["js", "jsx"],
-			"js",
+		"moduleDirectories": ["node_modules"],
-			"jsx"
-		],
-		"moduleDirectories": [
-			"node_modules"
-		],
 		"moduleNameMapper": {
-			"\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$": "<rootDir>/src/tests/__mocks__/fileMock.js",
+			"\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$":
+				"<rootDir>/src/tests/__mocks__/fileMock.js",
 			"\\.(css|less|scss)$": "identity-obj-proxy",
 			"^./style$": "identity-obj-proxy",
 			"^preact$": "<rootDir>/node_modules/preact/dist/preact.min.js",
@@ -89,20 +83,12 @@
 			"^react-addons-css-transition-group$": "preact-css-transition-group"
 		}
 	},
-	"browserslist": [
+	"browserslist": ["last 3 Chrome versions", "last 3 Firefox versions"],
-		"last 3 Chrome versions",
-		"last 3 Firefox versions"
-	],
 	"repository": {
 		"type": "git",
 		"url": "git+https://github.com/chinchang/web-maker.git"
 	},
-	"keywords": [
+	"keywords": ["frontend", "playground", "web", "editor"],
-		"frontend",
-		"playground",
-		"web",
-		"editor"
-	],
 	"author": "Kushagra Gour",
 	"license": "MIT",
 	"bugs": {

src/tests/footer.test.js

@@ -0,0 +1,12 @@
+import { h, Component } from 'preact';
+import Footer from '../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 />);
+		expect(context.find('#notificationsBtn').exists()).toBeTruthy();
+	});
+});

src/tests/header.test.js

@@ -1,14 +0,0 @@
-import { h, Component } from 'preact';
-import Header from '../components/header';
-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 Header', () => {
-
-    test('Header renders 3 nav items', () => {
-        const context = shallow(<Header />);
-        expect(context.find('h1').text()).toBe('Preact App');
-        expect(context.find(<Link />).length).toBe(3);
-    });
-});