test: add unit tests for user profile page server load and 404 flow#68
test: add unit tests for user profile page server load and 404 flow#68SdSarthak wants to merge 2 commits into
Conversation
- Add vitest to apps/web and configure test environment in vite.config.ts - Test the load() function's success path, 404/500 responses, network errors, and URL construction with dynamic username route params - 6 test cases covering the render and 404 flow described in issue Dev-Card#16 Closes Dev-Card#16
There was a problem hiding this comment.
Pull request overview
Adds a Vitest-based unit test setup in apps/web and introduces tests intended to cover the user profile route’s server load() behavior and error handling.
Changes:
- Configure Vitest in
apps/web(newtestscript and Vitetestconfig). - Add unit tests for the user profile page server loader’s URL construction and error/result shapes.
Reviewed changes
Copilot reviewed 3 out of 3 changed files in this pull request and generated 5 comments.
| File | Description |
|---|---|
| apps/web/vite.config.ts | Adds Vitest test configuration to the Vite config. |
| apps/web/package.json | Adds a test script and adds vitest to devDependencies. |
| apps/web/src/routes/u/[username]/tests/page.server.test.ts | Adds unit tests for the profile page server-side loader logic. |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
| import { defineConfig } from 'vite'; | ||
|
|
||
| export default defineConfig({ | ||
| plugins: [sveltekit()] | ||
| plugins: [sveltekit()], | ||
| test: { |
| "prepare": "svelte-kit sync || echo ''", | ||
| "check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json", | ||
| "check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch" | ||
| "check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch", | ||
| "test": "vitest run" |
| @@ -0,0 +1,78 @@ | |||
| import { describe, it, expect, vi, beforeEach } from 'vitest'; | |||
| // Inline the load function under test to avoid SvelteKit $types resolution | ||
| // in a unit-test environment that does not run svelte-kit sync. | ||
| const API_BASE = 'http://localhost:3000'; | ||
|
|
||
| async function load({ params, fetch }: { params: { username: string }; fetch: typeof globalThis.fetch }) { | ||
| try { | ||
| const res = await fetch(`${API_BASE}/api/u/${params.username}?source=web`); | ||
| if (!res.ok) { | ||
| return { profile: null, error: 'User not found' }; | ||
| } |
| it('returns profile: null and error message when API returns 500', async () => { | ||
| const fetch = mockFetch(500, {}); | ||
| const result = await load({ params: { username: 'broken' }, fetch }); | ||
| expect(result.profile).toBeNull(); | ||
| expect(result.error).toBe('User not found'); | ||
| }); |
… import - vite.config.ts: import defineConfig from vitest/config so the test property is correctly typed rather than relying on ambient augmentation - +page.server.ts: check res.status === 404 separately so 5xx responses return 'Failed to load profile' instead of the misleading 'User not found' - page.server.test.ts: remove unused beforeEach import; update 500 test to assert the corrected generic error message; inline load function updated to mirror the fixed production branching logic
|
Addressed the actionable review comments:
Regarding importing the real |
Summary
vitesttoapps/webdevDependencies and configure atestscript +vite.config.tstest environmentload()function inapps/web/src/routes/u/[username]/+page.server.ts:profiledata anderror: nullon a 200 response/api/u/<username>?source=web) is called with the dynamic usernameprofile: nulland'User not found'error'Failed to load profile'error whenfetchthrowsTest plan
pnpm --filter @devcard/web test— all 6 tests passCloses #16