Setup unit tests for the frontend (#772)

* Keep track of FE dependencies in `package.json` file

* Setup unit tests with Mocha

* Fix Circle config

* Pin dependencies to the exact version

* Upgrade NodeJS to the latest available LTS

* Add FE test script to `build` script

* Replace dummy test with real one

.circleci/config.yml

@@ -37,17 +37,17 @@ jobs:
             pip install --requirement requirements.txt
             pip install --requirement dev_requirements.txt
             ./dev-scripts/build-python
-  format_frontend:
+  build_javascript:
     docker:
-      - image: circleci/node:13.2.0-stretch
+      - image: circleci/node:14.17.5-stretch
     steps:
       - checkout
       - run:
-          name: Install prettier globally
-          command: npm install prettier@2.0.5
+          name: Install dependencies
+          command: npm install
       - run:
-          name: Check frontend formatting
-          command: ./dev-scripts/check-frontend-format
+          name: Run build script
+          command: ./dev-scripts/build-javascript
   e2e:
     machine:
       image: ubuntu-2004:202010-01
@@ -62,7 +62,7 @@ workflows:
       - check_whitespace
       - check_bash
       - build_python
-      - format_frontend
+      - build_javascript
       - e2e:
           filters:
             branches:

CONTRIBUTING.md

@@ -9,7 +9,7 @@ The steps below show you how to quickly set up a development environment for Tin
 ### Requirements
 
 * Python 3.7 or higher
-* Node.js 13.x or higher
+* Node.js 14.17.5 or higher
 * [shellcheck](https://github.com/koalaman/shellcheck#installing)
 
 ### Install packages
@@ -21,7 +21,7 @@ python3.7 -m venv venv && \
   . venv/bin/activate && \
   pip install --requirement requirements.txt && \
   pip install --requirement dev_requirements.txt && \
-  npm install prettier@2.0.5
+  npm install
 ```
 
 ### Run automated tests

app/static/js/keycodes.test.js

@@ -0,0 +1,10 @@
+import { describe, it } from "mocha";
+import assert from "assert";
+import { findKeyCode } from "./keycodes.js";
+
+describe("findKeyCode", () => {
+  it("maps keys by language code", () => {
+    assert.strictEqual(findKeyCode("@", "en-US"), "Digit2");
+    assert.strictEqual(findKeyCode("@", "en-GB"), "Quote");
+  });
+});

dev-scripts/build

@@ -13,4 +13,4 @@ set -u
 ./dev-scripts/check-trailing-newline
 ./dev-scripts/check-bash
 ./dev-scripts/build-python
-./dev-scripts/check-frontend-format
+./dev-scripts/build-javascript

dev-scripts/build-javascript

@@ -0,0 +1,24 @@
+#!/bin/bash
+
+# Exit build script on first failure.
+set -e
+
+# Echo commands to stdout.
+set -x
+
+# Exit on unset variable.
+set -u
+
+# Location of app source files.
+SOURCE_DIR="app"
+
+# Check code style with the Prettier libary.
+if ! ./node_modules/.bin/prettier --check "${SOURCE_DIR}" ; then
+  echo "Try running ./dev-scripts/fix-frontend-format to fix formatting" >&2
+  exit 1
+fi
+
+# Run unit tests.
+./node_modules/.bin/mocha \
+  --recursive \
+  "${SOURCE_DIR}/**/*.test.js"

dev-scripts/check-frontend-format

@@ -1,12 +0,0 @@
-#!/bin/bash
-
-# Exit build script on first failure.
-set -e
-
-# Exit on unset variable.
-set -u
-
-if ! ./node_modules/.bin/prettier --check app ; then
-  echo "Try running ./dev-scripts/fix-frontend-format to fix formatting" >&2
-  exit 1
-fi

package.json

@@ -0,0 +1,7 @@
+{
+  "type": "module",
+  "devDependencies": {
+    "mocha": "9.1.0",
+    "prettier": "2.0.5"
+  }
+}