JASPER-176/253: Testing Framework and Components

web/package.json

@@ -7,7 +7,8 @@
     "build": "vite build",
     "dev": "vite",
     "clean": "",
-    "lint": "eslint --ext .ts,.vue --ignore-path .gitignore --fix src"
+    "lint": "eslint --ext .ts,.vue --ignore-path .gitignore --fix src",
+    "test": "vitest"
   },
   "resolutions": {
     "glob-parent": "^5.1.2",
@@ -54,16 +55,19 @@
     "@vitejs/plugin-vue": "^5.2.1",
     "@vue/compiler-sfc": "^3.5.13",
     "@vue/eslint-config-typescript": "^14.1.4",
+    "@vue/test-utils": "^2.4.6",
     "buffer": "^6.0.3",
     "eslint": "^9.16.0",
     "eslint-plugin-vue": "^9.32.0",
+    "happy-dom": "^15.11.7",
     "prettier": "^3.4.2",
     "process": "^0.11.10",
     "ts-loader": "^9.5.1",
     "tslib": "^2.8.1",
     "typescript": "^5.7.2",
     "unplugin-vue-components": "^0.27.5",
-    "vite": "^6.0.2"
+    "vite": "^6.0.2",
+    "vitest": "^2.1.8"
   },
   "eslintConfig": {
     "root": true,

web/src/components/dashboard/Dashboard.vue

@@ -545,13 +545,11 @@
 </style>
 <script lang="ts">
   import { HttpService } from '@/services/HttpService';
-import NavigationTopbar from '@components/NavigationTopbar.vue';
 import Calendar from '@components/calendar/Calendar.vue';
 import { defineComponent, inject, onMounted, reactive, ref } from 'vue';
 
   export default defineComponent({
     components: {
-      NavigationTopbar,
       Calendar,
     },
     setup() {

web/src/components/shared/Form/ActionButtons.vue

@@ -0,0 +1,19 @@
+<template>
+  <v-btn-tertiary v-if="showSearch" type="submit" size="large" class="mr-2" text="Search" />
+  <v-btn v-if="showReset" size="large" text="Reset" @click="() => emit('reset')" />
+</template>
+
+<script setup>
+  const emit = defineEmits(['reset']);
+
+  const props = defineProps({
+    showSearch: {
+      type: Boolean,
+      default: true,
+    },
+    showReset: {
+      type: Boolean,
+      default: true,
+    },
+  });
+</script>

web/tests/components/shared/Form/ActionButtons.test.ts

@@ -0,0 +1,39 @@
+import { mount } from '@vue/test-utils';
+import { describe, it, expect } from 'vitest';
+import ActionButtons from 'CMP/shared/Form/ActionButtons.vue';
+
+describe('ActionButtons.vue', () => {
+    it('renders search button when showSearch is true', () => {
+      const wrapper = mount(ActionButtons, {
+        props: { showSearch: true }
+      });
+      expect(wrapper.find('v-btn-tertiary').exists()).toBe(true);
+    });
+
+    it('does not render search button when showSearch is false', () => {
+      const wrapper = mount(ActionButtons, {
+        props: { showSearch: false }
+      });
+      expect(wrapper.find('v-btn-tertiary').exists()).toBe(false);
+    });
+
+    it('renders reset button when showReset is true', () => {
+      const wrapper = mount(ActionButtons, {
+        props: { showReset: true }
+      });
+      expect(wrapper.find('v-btn').exists()).toBe(true);
+    });
+
+    it('does not render reset button when showReset is false', () => {
+      const wrapper = mount(ActionButtons, {
+        props: { showReset: false }
+      });
+      expect(wrapper.find('v-btn').exists()).toBe(false);
+    });
+
+    it('emits "reset" event when reset button is clicked', async () => {
+      const wrapper = mount(ActionButtons);
+      await wrapper.find('v-btn').trigger('click');
+      expect(wrapper.emitted()).toHaveProperty('reset');
+    });
+  });

web/vitest.config.js

@@ -0,0 +1,26 @@
+import Vue from '@vitejs/plugin-vue';
+import { dirname, resolve } from 'node:path';
+import { fileURLToPath } from 'node:url';
+import { defineConfig } from 'vitest/config';
+
+const basePath = dirname(fileURLToPath(import.meta.url));
+
+export default defineConfig({
+    plugins: [Vue()],
+    resolve: {
+        extensions: ['.ts', '.vue']
+    },
+    test: {
+        alias: [
+            { find: 'SRC', replacement: resolve(basePath, './src') },
+            { find: 'CMP', replacement: resolve(basePath, './src/components') }
+        ],
+        css: true,
+        environment: 'happy-dom',
+        globals: true,
+        logHeapUsage: true,
+        reporters: ['default', 'junit'],
+        outputFile: './coverage/junit.xml',
+        mockReset: true
+    }
+});

web/web.njsproj

@@ -95,8 +95,6 @@
     <Content Include="src\components\criminal\CriminalWitnesses.vue" />
     <Content Include="src\components\Home.vue" />
     <Content Include="src\components\LoadingSpinner.vue" />
-    <Content Include="src\components\NavigationFooter.vue" />
-    <Content Include="src\components\NavigationTopbar.vue" />
     <Content Include="tsconfig.json" />
     <Content Include="package.json" />
     <Content Include="README.md" />