end-to-end testing setup

frontend/components/Form/Multiselect.vue

@@ -59,10 +59,8 @@
     const item = props.items[index];
 
     if (selectedIndexes.value[index]) {
-      console.log(value);
       value.value = [...value.value, item];
     } else {
-      console.log(value);
       value.value = value.value.filter(itm => itm !== item);
     }
   }

frontend/components/Form/TextArea.vue

@@ -38,8 +38,6 @@
 
   const value = useVModel(props, 'modelValue', emit);
   const valueLen = computed(() => {
-    console.log(value.value.length);
-
     return value.value ? value.value.length : 0;
   });
 </script>

frontend/lib/api/__test__/public.test.ts

@@ -0,0 +1,57 @@
+import { describe, it, expect } from 'vitest';
+import { Requests } from '../../requests';
+import { OverrideParts } from '../base/urls';
+import { PublicApi } from '../public';
+import * as config from '../../../test/config';
+import { UserApi } from '../user';
+
+function client() {
+  OverrideParts(config.BASE_URL, '/api/v1');
+  const requests = new Requests('');
+  return new PublicApi(requests);
+}
+
+function userClient(token: string) {
+  OverrideParts(config.BASE_URL, '/api/v1');
+  const requests = new Requests('', token);
+  return new UserApi(requests);
+}
+
+describe('[GET] /api/v1/status', () => {
+  it('basic query parameter', async () => {
+    const api = client();
+    const { response, data } = await api.status();
+    expect(response.status).toBe(200);
+    expect(data.health).toBe(true);
+  });
+});
+
+describe('first time user workflow (register, login)', () => {
+  const api = client();
+  const userData = {
+    groupName: 'test-group',
+    user: {
+      email: 'test-user@email.com',
+      name: 'test-user',
+      password: 'test-password',
+    },
+  };
+
+  it('user should be able to register', async () => {
+    const { response } = await api.register(userData);
+    expect(response.status).toBe(204);
+  });
+
+  it('user should be able to login', async () => {
+    const { response, data } = await api.login(userData.user.email, userData.user.password);
+    expect(response.status).toBe(200);
+    expect(data.token).toBeTruthy();
+
+    // Cleanup
+    const userApi = userClient(data.token);
+    {
+      const { response } = await userApi.deleteAccount();
+      expect(response.status).toBe(204);
+    }
+  });
+});

frontend/lib/api/base/urls.ts

@@ -1,31 +1,28 @@
-export const prefix = '/api/v1';
+const parts = {
+  host: 'http://localhost.com',
+  prefix: '/api/v1',
+};
 
-export type QueryValue =
-	| string
-	| string[]
-	| number
-	| number[]
-	| boolean
-	| null
-	| undefined;
-
-export function UrlBuilder(
-	rest: string,
-	params: Record<string, QueryValue> = {}
-): string {
-	// we use a stub base URL to leverage the URL class
-	const url = new URL(prefix + rest, 'http://localhost.com');
-
-	for (const [key, value] of Object.entries(params)) {
-		if (Array.isArray(value)) {
-			for (const item of value) {
-				url.searchParams.append(key, String(item));
-			}
-		} else {
-			url.searchParams.append(key, String(value));
-		}
-	}
-
-	// we return the path only, without the base URL
-	return url.toString().replace('http://localhost.com', '');
+export function OverrideParts(host: string, prefix: string) {
+  parts.host = host;
+  parts.prefix = prefix;
+}
+
+export type QueryValue = string | string[] | number | number[] | boolean | null | undefined;
+
+export function UrlBuilder(rest: string, params: Record<string, QueryValue> = {}): string {
+  const url = new URL(parts.prefix + rest, parts.host);
+
+  for (const [key, value] of Object.entries(params)) {
+    if (Array.isArray(value)) {
+      for (const item of value) {
+        url.searchParams.append(key, String(item));
+      }
+    } else {
+      url.searchParams.append(key, String(value));
+    }
+  }
+
+  // we return the path only, without the base URL
+  return url.toString().replace('http://localhost.com', '');
 }

frontend/lib/api/public.ts

@@ -19,7 +19,18 @@ export type RegisterPayload = {
   groupName: string;
 };
 
+export type StatusResult = {
+  health: boolean;
+  versions: string[];
+  title: string;
+  message: string;
+};
+
 export class PublicApi extends BaseAPI {
+  public status() {
+    return this.http.get<StatusResult>(UrlBuilder('/status'));
+  }
+
   public login(username: string, password: string) {
     return this.http.post<LoginPayload, LoginResult>(UrlBuilder('/users/login'), {
       username,

frontend/lib/api/user.ts

@@ -36,4 +36,8 @@ export class UserApi extends BaseAPI {
   public logout() {
     return this.http.post<object, void>(UrlBuilder('/users/logout'), {});
   }
+
+  public deleteAccount() {
+    return this.http.delete<void>(UrlBuilder('/users/self'));
+  }
 }

frontend/nuxt.config.ts

@@ -2,12 +2,14 @@ import { defineNuxtConfig } from 'nuxt';
 
 // https://v3.nuxtjs.org/api/configuration/nuxt.config
 export default defineNuxtConfig({
+  target: 'static',
   ssr: false,
   modules: ['@nuxtjs/tailwindcss', '@pinia/nuxt', '@vueuse/nuxt'],
   meta: {
     title: 'Homebox',
     link: [{ rel: 'icon', type: 'image/x-icon', href: '/favicon.svg' }],
   },
+  outDir: '../backend/app/api/public',
   vite: {
     server: {
       proxy: {

frontend/package.json

@@ -1,15 +1,16 @@
 {
   "private": true,
   "scripts": {
-    "build": "nuxt build",
+    "build": "nuxt generate",
     "dev": "nuxt dev",
-    "generate": "nuxt generate",
     "preview": "nuxt preview",
     "postinstall": "nuxt prepare",
-    "test": "vitest",
-    "test:ci": "vitest --run"
+    "test:ci": "TEST_SHUTDOWN_API_SERVER=true vitest --run --config ./test/vitest.config.ts",
+    "test:local": "TEST_SHUTDOWN_API_SERVER=false && vitest --run --config ./test/vitest.config.ts",
+    "test:watch": " TEST_SHUTDOWN_API_SERVER=false vitest --config ./test/vitest.config.ts"
   },
   "devDependencies": {
+    "isomorphic-fetch": "^3.0.0",
     "nuxt": "3.0.0-rc.8",
     "vitest": "^0.22.1"
   },

frontend/pages/label/[id].vue

@@ -92,7 +92,6 @@
     }
 
     toast.success('Label updated');
-    console.log(data);
     label.value = data;
     updateModal.value = false;
     updating.value = false;

frontend/pages/location/[id].vue

@@ -92,7 +92,6 @@
     }
 
     toast.success('Location updated');
-    console.log(data);
     location.value = data;
     updateModal.value = false;
     updating.value = false;

frontend/pnpm-lock.yaml

@@ -10,6 +10,7 @@ specifiers:
   '@vueuse/nuxt': ^9.1.1
   autoprefixer: ^10.4.8
   daisyui: ^2.24.0
+  isomorphic-fetch: ^3.0.0
   nuxt: 3.0.0-rc.8
   pinia: ^2.0.21
   postcss: ^8.4.16
@@ -33,6 +34,7 @@ dependencies:
   vue: 3.2.38
 
 devDependencies:
+  isomorphic-fetch: 3.0.0
   nuxt: 3.0.0-rc.8
   vitest: 0.22.1
 
@@ -3180,6 +3182,15 @@ packages:
     resolution: {integrity: sha512-RHxMLp9lnKHGHRng9QFhRCMbYAcVpn69smSGcq3f36xjgVVWThj4qqLbTLlq7Ssj8B+fIQ1EuCEGI2lKsyQeIw==}
     dev: true
 
+  /isomorphic-fetch/3.0.0:
+    resolution: {integrity: sha512-qvUtwJ3j6qwsF3jLxkZ72qCgjMysPzDfeV240JHiGZsANBYd+EEuu35v7dfrJ9Up0Ak07D7GGSkGhCHTqg/5wA==}
+    dependencies:
+      node-fetch: 2.6.7
+      whatwg-fetch: 3.6.2
+    transitivePeerDependencies:
+      - encoding
+    dev: true
+
   /jest-worker/26.6.2:
     resolution: {integrity: sha512-KWYVV1c4i+jbMpaBC+U++4Va0cp8OisU185o73T1vo99hqi7w8tSJfUXYswwqqrjzwxa6KpRK54WhPvwf5w6PQ==}
     engines: {node: '>= 10.13.0'}
@@ -5720,6 +5731,10 @@ packages:
   /webpack-virtual-modules/0.4.4:
     resolution: {integrity: sha512-h9atBP/bsZohWpHnr+2sic8Iecb60GxftXsWNLLLSqewgIsGzByd2gcIID4nXcG+3tNe4GQG3dLcff3kXupdRA==}
 
+  /whatwg-fetch/3.6.2:
+    resolution: {integrity: sha512-bJlen0FcuU/0EMLrdbJ7zOnW6ITZLrZMIarMUVmdKtsGvZna8vxKYaexICWPfZ8qwf9fzNq+UEIZrnSaApt6RA==}
+    dev: true
+
   /whatwg-url/5.0.0:
     resolution: {integrity: sha512-saE57nupxk6v3HY35+jzBwYa0rKSy0XR8JSxZPwgLr7ys0IBzhGviA1/TUGJLmSVqs8pb9AnvICXEuOHLprYTw==}
     dependencies:

frontend/test/config.ts

@@ -0,0 +1,4 @@
+export const PORT = "7745";
+export const HOST = "http://127.0.0.1";
+export const BASE_URL = HOST + ":" + PORT;
+

frontend/test/setup.ts

@@ -0,0 +1,20 @@
+import { exec } from 'child_process';
+import * as config from './config';
+
+export const setup = () => {
+  console.log('Starting Client Tests');
+  console.log({
+    PORT: config.PORT,
+    HOST: config.HOST,
+    BASE_URL: config.BASE_URL,
+  });
+};
+
+export const teardown = () => {
+  if (process.env.TEST_SHUTDOWN_API_SERVER) {
+    const pc = exec('pkill -SIGTERM api'); // Kill background API process
+    pc.stdout.on('data', data => {
+      console.log(`stdout: ${data}`);
+    });
+  }
+};

frontend/test/vitest.config.ts

@@ -0,0 +1,8 @@
+/// <reference types="vitest" />
+import { defineConfig } from "vite";
+
+export default defineConfig({
+  test: {
+    globalSetup: "./test/setup.ts",
+  },
+});