Merge pull request #2 from NikkelM/main

Added a simple test suite using `mocha`

.eslintrc

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

.github/workflows/test.yml

@@ -0,0 +1,35 @@
+name: Run Tests
+
+# These rules will run the workflow when a commit is pushed to the main branch, or a PR against the main branch is opened or updated
+on:
+  push:
+    branches:
+      - main
+  pull_request:
+    branches:
+      - main
+
+# This concurrency mode will cancel in-progress workflows if a new commit is pushed   
+concurrency: 
+  group: ${{ github.head_ref || github.ref_name }} 
+  cancel-in-progress: true
+
+jobs:
+  Test:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Set up Git repository
+        uses: actions/checkout@v3
+
+      - name: Set up node 
+        uses: actions/setup-node@v3
+
+      - name: Install dependencies
+        run: npm install
+
+      - name: Run tests
+        run: npm test
+
+      # If you want to use coveralls to report the coverage produced by c8, uncomment this step
+      # - name: Coveralls
+      #   uses: coverallsapp/github-action@v2

.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"
+}

README.md

@@ -20,6 +20,7 @@ It features:
 - [Babel](https://babeljs.io/)
 - [ESLint](https://eslint.org/)
 - [Prettier](https://prettier.io/)
+- [Mocha](https://mochajs.org/)
 
 If you need React support, please check this awesome boilerplate created by [Michael Xieyang Liu](https://github.com/lxieyang): [chrome-extension-boilerplate-react](https://github.com/lxieyang/chrome-extension-boilerplate-react).
 
@@ -48,7 +49,9 @@ All TypeScript files are placed in `src` directory. There are few files already
 Style files are placed in `styles` directory. There you can find per-page stylesheets and `common.scss` with stylings common across the pages.
 We also use [Normalize.css](https://necolas.github.io/normalize.css/) so your extensions look good and consistent wherever they are installed.
 
-`static` directory includes all the files to be copied over to the final build. It consists of `manifest.json` defining our extension, `.html` pages and icon set.
+The `static` directory includes all the files to be copied over to the final build. It consists of `manifest.json` defining our extension, `.html` pages and icon set.
+
+The `test` directory contains your tests. See the dedicated section below for some more information on this topic.
 
 ### Pages
 
@@ -193,6 +196,15 @@ You can edit the service worker at `src/serviceWorker.ts`.
 
 Read more about service workers [here](https://developer.chrome.com/docs/extensions/mv3/service_workers/).
 
+### Tests
+
+The boilerplate comes with a test suite using [mocha](https://mochajs.org/), and coverage tracking using [c8](https://github.com/bcoe/c8). 
+
+Some basic tests that test the interaction with the chrome storage API have already been implemented to get you started. You can run the test suite using `npm test`.
+Testing the chrome API is especially interesting, as it is not available in the test environment. To get around this, you can use the `sinon-chrome` package to mock the API, some examples of this have been pre-implemented and can be found in `test/setup.js`. This setup file will run before the other tests.
+
+The `test.yml` file in `.github/workflows` contains a GitHub Actions workflow that will run the test suite on every PR against the `main` branch and every push to the `main` branch.
+
 ## More resources
 
 - [Welcome to Manifest V3](https://developer.chrome.com/docs/extensions/mv3/intro/)