Frontend tests

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/Model.ts

@@ -0,0 +1,26 @@
+export type Model = {
+	name: string;
+	id: string;
+	online: boolean;
+	production: boolean;
+	team: string;
+	modelType: string;
+	createTime: number;
+	lastUpdated: number;
+};
+
+export type ModelsResponse = {
+	offset: number;
+	items: Model[];
+};
+
+export type TimeSeriesItem = {
+	value: number;
+	ts: number;
+	label: string | null;
+};
+
+export type TimeSeriesResponse = {
+	id: string;
+	items: TimeSeriesItem[];
+};

frontend/src/routes/models/+page.server.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/[slug]/observability/+page.server.ts

@@ -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/vite.config.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}']
 	}
 });