add some unit tests on pages

packages/frontend/src/pages/Model.spec.ts

@@ -0,0 +1,39 @@
+import { vi, test, expect } from 'vitest';
+import { screen, render } from '@testing-library/svelte';
+import Model from './Model.svelte';
+import catalog from '../../../backend/src/ai-user-test.json';
+
+const mocks = vi.hoisted(() => {
+  return {
+    getCatalogMock: vi.fn(),
+  };
+});
+
+vi.mock('../utils/client', async () => {
+  return {
+    studioClient: {
+      getCatalog: mocks.getCatalogMock,
+    },
+    rpcBrowser: {
+      subscribe: () => {
+        return {
+          unsubscribe: () => {},
+        };
+      },
+    },
+  };
+});
+
+test('should display model information', async () => {
+  const model = catalog.models.find(m => m.id === 'model1');
+  expect(model).not.toBeUndefined();
+
+  mocks.getCatalogMock.mockResolvedValue(catalog);
+  render(Model, {
+    modelId: 'model1',
+  });
+  await new Promise(resolve => setTimeout(resolve, 200));
+
+  screen.getByText(model!.name);
+  screen.getByText(model!.description);
+});

packages/frontend/src/pages/Recipe.spec.ts

@@ -0,0 +1,39 @@
+import { vi, test, expect } from 'vitest';
+import { screen, render } from '@testing-library/svelte';
+import catalog from '../../../backend/src/ai-user-test.json';
+import Recipe from './Recipe.svelte';
+
+const mocks = vi.hoisted(() => {
+  return {
+    getCatalogMock: vi.fn(),
+  };
+});
+
+vi.mock('../utils/client', async () => {
+  return {
+    studioClient: {
+      getCatalog: mocks.getCatalogMock,
+    },
+    rpcBrowser: {
+      subscribe: () => {
+        return {
+          unsubscribe: () => {},
+        };
+      },
+    },
+  };
+});
+
+test('should display recipe information', async () => {
+  const recipe = catalog.recipes.find(r => r.id === 'recipe 1');
+  expect(recipe).not.toBeUndefined();
+
+  mocks.getCatalogMock.mockResolvedValue(catalog);
+  render(Recipe, {
+    recipeId: 'recipe 1',
+  });
+  await new Promise(resolve => setTimeout(resolve, 200));
+
+  screen.getByText(recipe!.name);
+  screen.getByText(recipe!.readme);
+});