⚙️ Add minimal front-end testing setup for js files.

Why? so I can test the parse travel function.

README.md

@@ -113,10 +113,19 @@ by default.
 
 ## Testing
 
+With `dev` helper run: `dev test api` or `dev test web`.
+
+### Back-end
+
 1. Run the api test suite via `dev test_api`.
 
 See [api/tests/README.md](./api/tests/README.md) for more detailed info.
 
+### Front-end
+
+Run `dev test_web` to run the front-end tests.
+Currently can only test `.js` files. `.vue` files are not yet supported.
+
 ## Migrations
 
 You can generate migrations via the api service code. Currently uses [knex Migration CLI](https://knexjs.org/guide/migrations.html#migration-cli) using `dev knex ...` or `cd api && npm run knex ...`.

bin/dev

@@ -81,11 +81,25 @@ class DevHelper
     run(*%w[api npm run check-types], *args, **kwargs)
   end
 
+  def test(*args, **kwargs)
+    service = args[0]
+    if service == 'api'
+      test_api(*args.drop(1), **kwargs)
+    elsif service == 'web'
+      test_web(*args.drop(1), **kwargs)
+    else
+      test_api(*args, execution_mode: WAIT_FOR_PROCESS, **kwargs)
+      test_web(*args, **kwargs)
+    end
+  end
+
   def test_api(*args, **kwargs)
     run(*%w[test_api npm run test], *args, **kwargs)
   end
 
-  alias_method :test, :test_api
+  def test_web(*args, **kwargs)
+    run(*%w[test_web npm run test], *args, **kwargs)
+  end
 
   def psql(*args, **kwargs)
     # TODO: use environment variables for this instead

docker-compose.development.yml

@@ -66,6 +66,18 @@ services:
     depends_on:
       - db
 
+  test_web:
+    build:
+      context: ./web
+      dockerfile: development.Dockerfile
+    command: /bin/true
+    environment:
+      <<: *default-environment
+      NODE_ENV: test
+    tty: true
+    volumes:
+      - ./web:/usr/src/web
+
   db:
     image: "postgres:14.4"
     environment:

web/.eslintrc.js

@@ -4,6 +4,7 @@ module.exports = {
   root: true,
   env: {
     node: true,
+    "vitest/globals": true,
   },
   extends: ["plugin:vue/recommended", "eslint:recommended", "plugin:prettier/recommended"],
   parserOptions: {

web/tests/jsconfig.json

@@ -0,0 +1,8 @@
+// Helps VSCode detect typescript path aliases in test files
+{
+  "extends": "../jsconfig.json",
+  "include": ["./**/*.test.js"],
+  "compilerOptions": {
+    "types": ["vitest/globals"] // https://vitest.dev/config/#globals
+  }
+}

web/tests/utils/parse-travel.test.js

@@ -0,0 +1,25 @@
+import { parseTravel } from "@/utils/parse-travel"
+
+describe("web/src/utils/parse-travel.js", () => {
+  describe(".parseTravel", () => {
+    test("when given two flights from Air Canada, parses them correctly", () => {
+      const text = `Flights:
+        Air Canada AC303
+        Departure:	13 Jan 09:05	Pierre Elliott Trudeau Intl Arpt (YUL)	Terminal:
+        Arrival:		13 Jan 11:53	Vancouver Intl Arpt (YVR)	Terminal: M
+        Duration:	5 Hour(s) 48 Minutes
+        Status:		Confirmed
+        Class:		Q
+        Air Canada AC8099 - Operated By: AIR CANADA EXPRESS - JAZZ
+        Departure:	13 Jan 13:55	Vancouver Intl Arpt (YVR)	Terminal: M
+        Arrival:		13 Jan 17:19	Whitehorse Arpt (YXY)	Terminal:
+        Duration:	3 Hour(s) 24 Minutes
+        Status:		Confirmed
+        Class:		Q
+      `
+      const result = parseTravel(text)
+
+      expect(result).toEqual("will fail, not implemented")
+    })
+  })
+})

web/vite.config.js

@@ -0,0 +1,15 @@
+/// <reference types="vitest" />
+import path from "path"
+
+// Add @vitejs/plugin-vue2 if you want to test vue files.
+export default {
+  resolve: {
+    alias: {
+      "@/": `${path.resolve(__dirname, "src")}/`,
+    },
+    extensions: [".js", ".json", ".mjs", ".vue"],
+  },
+  test: {
+    globals: true, // https://vitest.dev/config/#globals
+  },
+}