Added test command, dependencies, files

Author: NikkelM

.eslintrc

@@ -11,7 +11,8 @@
   ],
   "env": {
     "browser": true,
-    "node": true
+    "node": true,
+	"mocha": true
   },
   "rules": {
     "@typescript-eslint/no-var-requires": 0

.gitignore

@@ -1,4 +1,5 @@
 dist
+coverage
 node_modules
 .DS_Store
 .env

.mocharc.json

@@ -0,0 +1,6 @@
+{
+	"extension": [
+		"ts, js"
+	],
+	"loader": "ts-node/esm"
+}

package-lock.json

@@ -3,33 +3,41 @@
   "version": "0.2.0",
   "description": "Get started with Chrome extensions development using webpack, Typescript, Sass, and more",
   "scripts": {
-    "start": "webpack --watch --config webpack.dev.js",
-    "build": "webpack --config webpack.prod.js",
+    "start": "webpack --watch --config webpack.dev.cjs",
+    "build": "webpack --config webpack.prod.cjs",
     "lint": "eslint --ext .ts,.js --max-warnings=0 .",
-    "prettier": "prettier --write"
+    "prettier": "prettier --write",
+    "test": "c8 mocha ./test/setup.js ./test/**/*.{js,ts}"
   },
+  "type": "module",
   "license": "MIT",
   "devDependencies": {
     "@babel/core": "^7.18.6",
     "@babel/plugin-transform-runtime": "^7.18.6",
     "@babel/preset-env": "^7.18.6",
     "@babel/preset-typescript": "^7.18.6",
     "@types/chrome": "^0.0.193",
+    "@types/mocha": "^10.0.1",
     "@typescript-eslint/eslint-plugin": "^5.30.5",
     "@typescript-eslint/parser": "^5.30.5",
     "babel-loader": "^8.2.5",
+    "c8": "^7.13.0",
     "copy-webpack-plugin": "^11.0.0",
     "css-loader": "^6.7.1",
     "dotenv-webpack": "^8.0.0",
     "eslint": "^8.19.0",
     "eslint-config-prettier": "^8.5.0",
     "eslint-webpack-plugin": "^3.2.0",
+    "expect.js": "^0.3.1",
     "husky": "^8.0.1",
     "lint-staged": "^13.0.3",
     "mini-css-extract-plugin": "^2.6.1",
+    "mocha": "^10.2.0",
     "prettier": "^2.7.1",
     "sass": "^1.53.0",
     "sass-loader": "^13.0.2",
+    "sinon-chrome": "^3.0.1",
+    "ts-node": "^10.9.1",
     "typescript": "^4.7.4",
     "webpack": "^5.73.0",
     "webpack-cli": "^4.10.0",

package.json

@@ -0,0 +1,32 @@
+// The chrome API won't be available in the test environment, so it has to be mocked
+// Of course, you can remove this setup file if you don't want to test interactions with the chrome API
+import sinonChrome from 'sinon-chrome';
+
+global.chrome = sinonChrome;
+
+let mockedStorage = {};
+
+// These are just the most important methods, feel free to add more if needed 
+chrome.storage.sync.get.callsFake(() => {
+	return Promise.resolve(mockedStorage)
+});
+
+chrome.storage.sync.set.callsFake((obj) => {
+	Object.assign(mockedStorage, obj);
+	return Promise.resolve()
+});
+
+chrome.storage.sync.clear.callsFake(() => {
+	for (const key in mockedStorage) {
+		delete mockedStorage[key];
+	}
+	return Promise.resolve()
+});
+
+beforeEach(() => {
+	chrome.storage.sync.set({});
+});
+
+afterEach(async function () {
+	await chrome.storage.sync.clear();
+});

test/setup.js

@@ -0,0 +1,22 @@
+import expect from 'expect.js';
+import { getStorageData, setStorageData } from '../src/storage.js';
+
+// The "npm test" command will run all test files and also create a coverage report using c8
+describe('storage.ts', () => {
+	it('should be able to get storage data', async () => {
+		getStorageData().then((data) => {
+			expect(data).to.be.an('object');
+			expect(data).to.be.empty();
+		});
+	});
+
+	it('should be able to set storage data', async () => {
+		setStorageData({ test: 'test' }).then(() => {
+			getStorageData().then((data) => {
+				expect(data).to.be.an('object');
+				expect(data).to.have.property('test');
+				expect(data.test).to.be('test');
+			});
+		});
+	});
+});

test/storage.test.js

@@ -1,5 +1,5 @@
 const { merge } = require('webpack-merge');
-const common = require('./webpack.common.js');
+const common = require('./webpack.common.cjs');
 
 module.exports = merge(common, {
   mode: 'development',

webpack.common.js renamed to webpack.common.cjs

@@ -1,5 +1,5 @@
 const { merge } = require('webpack-merge');
-const common = require('./webpack.common.js');
+const common = require('./webpack.common.cjs');
 
 module.exports = merge(common, {
   mode: 'production',