Frontend tests (#32)

## Summary

Added unit tests to ensure that our core API implementation is working,
and to ensure type consistency with the backend. If the backend
changes/removes any existing fields, then the frontend tests will fail.
If the backend adds an additional field, the tests will succeed but show
a warning in the console.

First, start the backend:
`sbt "project hub" run`

Next, run your unit tests:
`npm run test:unit`

They will automatically re-run if you change the testing code. When we
need CI/CD we can start the backend before running tests.

## Checklist
- [x] Added Unit Tests
- [x] Covered by existing CI
- [ ] Integration tested
- [x] Documentation update



<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->

## Summary by CodeRabbit

## Release Notes

- **New Features**
- Added a "Running Tests" section in the README to guide users on
executing tests, including backend startup requirements.
- Introduced unit tests for API functions and model response structures
to ensure data integrity.

- **Bug Fixes**
- Updated import paths for type definitions in various files to improve
organization without affecting functionality.

- **Chores**
  - Removed an obsolete unit test file.
- Modified the test configuration to include all test files across the
source directory for better test coverage.

<!-- end of auto-generated comment: release notes by coderabbit.ai -->

---------

Co-authored-by: Piyush Narang <[email protected]>

Author: ken-zlai

frontend/README.md

@@ -68,6 +68,8 @@ npm run preview
 
 ### Running Tests
 
+> **Important:** You must start the backend before running tests. In the future, we can add scripts to automatically start the backend before any tests are run.
+
 #### All Tests
 
 To run both unit and integration tests together:

frontend/src/lib/api/api.test.ts

@@ -0,0 +1,62 @@
+import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest';
+import { get } from './api';
+import { error } from '@sveltejs/kit';
+
+// Mock the fetch function
+const mockFetch = vi.fn();
+global.fetch = mockFetch;
+
+// Mock the error function from @sveltejs/kit
+vi.mock('@sveltejs/kit', () => ({
+	error: vi.fn()
+}));
+
+describe('API module', () => {
+	beforeEach(() => {
+		vi.resetAllMocks();
+	});
+
+	afterEach(() => {
+		vi.clearAllMocks();
+	});
+
+	describe('get function', () => {
+		it('should make a GET request and return parsed JSON data', async () => {
+			const mockResponse = { data: 'test data' };
+			mockFetch.mockResolvedValueOnce({
+				ok: true,
+				text: () => Promise.resolve(JSON.stringify(mockResponse))
+			});
+
+			const result = await get('test-path');
+
+			expect(mockFetch).toHaveBeenCalledWith(
+				`${import.meta.env.VITE_API_BASE_URL}/api/v1/test-path`,
+				{ method: 'GET', headers: {} }
+			);
+			expect(result).toEqual(mockResponse);
+		});
+
+		it('should return an empty object if the response is empty', async () => {
+			mockFetch.mockResolvedValueOnce({
+				ok: true,
+				text: () => Promise.resolve('')
+			});
+
+			const result = await get('empty-path');
+
+			expect(result).toEqual({});
+		});
+
+		it('should throw an error if the response is not ok', async () => {
+			mockFetch.mockResolvedValueOnce({
+				ok: false,
+				status: 404
+			});
+
+			await get('error-path');
+
+			expect(error).toHaveBeenCalledWith(404);
+		});
+	});
+});

frontend/src/lib/types/Model/Model.test.ts

@@ -0,0 +1,75 @@
+import { describe, it, expect } from 'vitest';
+import * as api from '$lib/api/api';
+import type { ModelsResponse, TimeSeriesResponse, Model } from '$lib/types/Model/Model';
+
+describe('Model types', () => {
+	it('should match ModelsResponse type', async () => {
+		const result = (await api.get('models')) as ModelsResponse;
+
+		const expectedKeys = ['offset', 'items'];
+		expect(Object.keys(result)).toEqual(expect.arrayContaining(expectedKeys));
+
+		// Log a warning if there are additional fields
+		const additionalKeys = Object.keys(result).filter((key) => !expectedKeys.includes(key));
+		if (additionalKeys.length > 0) {
+			console.warn(`Additional fields found in ModelsResponse: ${additionalKeys.join(', ')}`);
+		}
+
+		expect(Array.isArray(result.items)).toBe(true);
+
+		if (result.items.length > 0) {
+			const model = result.items[0];
+			const expectedModelKeys: (keyof Model)[] = [
+				'name',
+				'id',
+				'online',
+				'production',
+				'team',
+				'modelType',
+				'createTime',
+				'lastUpdated'
+			];
+			expect(Object.keys(model)).toEqual(expect.arrayContaining(expectedModelKeys));
+
+			// Log a warning if there are additional fields
+			const additionalModelKeys = Object.keys(model).filter(
+				(key) => !expectedModelKeys.includes(key as keyof Model)
+			);
+			if (additionalModelKeys.length > 0) {
+				console.warn(`Additional fields found in Model: ${additionalModelKeys.join(', ')}`);
+			}
+		}
+	});
+
+	it('should match TimeSeriesResponse type', async () => {
+		const modelId = '0';
+		const result = (await api.get(
+			`model/${modelId}/timeseries?startTs=1725926400000&endTs=1726106400000&offset=10h&algorithm=psi`
+		)) as TimeSeriesResponse;
+
+		const expectedKeys = ['id', 'items'];
+		expect(Object.keys(result)).toEqual(expect.arrayContaining(expectedKeys));
+
+		// Log a warning if there are additional fields
+		const additionalKeys = Object.keys(result).filter((key) => !expectedKeys.includes(key));
+		if (additionalKeys.length > 0) {
+			console.warn(`Additional fields found in TimeSeriesResponse: ${additionalKeys.join(', ')}`);
+		}
+
+		expect(Array.isArray(result.items)).toBe(true);
+
+		if (result.items.length > 0) {
+			const item = result.items[0];
+			const expectedItemKeys = ['value', 'ts', 'label'];
+			expect(Object.keys(item)).toEqual(expect.arrayContaining(expectedItemKeys));
+
+			// Log a warning if there are additional fields
+			const additionalItemKeys = Object.keys(item).filter((key) => !expectedItemKeys.includes(key));
+			if (additionalItemKeys.length > 0) {
+				console.warn(
+					`Additional fields found in TimeSeriesResponse item: ${additionalItemKeys.join(', ')}`
+				);
+			}
+		}
+	});
+});

frontend/src/lib/types/Model.ts renamed to frontend/src/lib/types/Model/Model.ts

@@ -1,5 +1,5 @@
 import type { PageServerLoad } from './$types';
-import type { ModelsResponse } from '$lib/types/Model';
+import type { ModelsResponse } from '$lib/types/Model/Model';
 import * as api from '$lib/api/api';
 
 export const load: PageServerLoad = async (): Promise<{ models: ModelsResponse }> => {

frontend/src/routes/models/+page.server.ts

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import type { Model } from '$lib/types/Model.js';
+	import type { Model } from '$lib/types/Model/Model';
 	import {
 		Table,
 		TableBody,

frontend/src/routes/models/+page.svelte

@@ -1,6 +1,6 @@
 import type { PageServerLoad } from './$types';
 import * as api from '$lib/api/api';
-import type { TimeSeriesResponse } from '$lib/types/Model';
+import type { TimeSeriesResponse } from '$lib/types/Model/Model';
 
 export const load: PageServerLoad = async ({
 	params

frontend/src/routes/models/[slug]/observability/+page.server.ts

@@ -4,6 +4,6 @@ import { defineConfig } from 'vitest/config';
 export default defineConfig({
 	plugins: [sveltekit()],
 	test: {
-		include: ['./src/test/unit/**/*.{test,spec}.{js,ts}']
+		include: ['./src/**/*.{test,spec}.{js,ts}']
 	}
 });