From c741a00835ed6f5b1f8b4c7f294144df987c6d0f Mon Sep 17 00:00:00 2001
From: Marlen Brunner <klondikemarlen@gmail.com>
Date: Thu, 1 Aug 2024 11:34:16 -0700
Subject: [PATCH] :gear: Add minimal front-end testing setup for js files.

Why? so I can test the parse travel function.
---
 README.md                            |  9 +++++++++
 bin/dev                              | 16 +++++++++++++++-
 docker-compose.development.yml       | 12 ++++++++++++
 web/.eslintrc.js                     |  1 +
 web/tests/jsconfig.json              |  8 ++++++++
 web/tests/utils/parse-travel.test.js | 25 +++++++++++++++++++++++++
 web/vite.config.js                   | 15 +++++++++++++++
 7 files changed, 85 insertions(+), 1 deletion(-)
 create mode 100644 web/tests/jsconfig.json
 create mode 100644 web/tests/utils/parse-travel.test.js
 create mode 100644 web/vite.config.js

diff --git a/README.md b/README.md
index 68db1664c..7fe8a9377 100644
--- a/README.md
+++ b/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 ...`.
diff --git a/bin/dev b/bin/dev
index 839663ef0..3ba54d9e3 100755
--- a/bin/dev
+++ b/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
diff --git a/docker-compose.development.yml b/docker-compose.development.yml
index d8d6c43d2..41e950ea9 100644
--- a/docker-compose.development.yml
+++ b/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:
diff --git a/web/.eslintrc.js b/web/.eslintrc.js
index d60509c61..b8c25a8a6 100644
--- a/web/.eslintrc.js
+++ b/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: {
diff --git a/web/tests/jsconfig.json b/web/tests/jsconfig.json
new file mode 100644
index 000000000..fb9b249c3
--- /dev/null
+++ b/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
+  }
+}
diff --git a/web/tests/utils/parse-travel.test.js b/web/tests/utils/parse-travel.test.js
new file mode 100644
index 000000000..6aa0cf792
--- /dev/null
+++ b/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")
+    })
+  })
+})
diff --git a/web/vite.config.js b/web/vite.config.js
new file mode 100644
index 000000000..11635b4cc
--- /dev/null
+++ b/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
+  },
+}