test(web): add tests for user profile page render and 404 flow#512
test(web): add tests for user profile page render and 404 flow#512Satvik-art-creator wants to merge 6 commits into
Conversation
|
@Satvik-art-creator is attempting to deploy a commit to the Prashantkumar Khatri's projects Team on Vercel. A member of the Team first needs to authorize it. |
CI — All Checks PassedBackend — SKIP
Mobile — SKIP
Web — PASS
Last updated: |
There was a problem hiding this comment.
Pull request overview
Note
Copilot was unable to run its full agentic suite in this review.
Adds a Vitest + Testing Library setup for the web app and introduces an initial Svelte route (“profile page”) with component tests.
Changes:
- Add Vitest configuration and global test setup for jsdom + Testing Library matchers
- Add a Svelte profile page (
+page.svelte) and corresponding Vitest test (+page.test.ts) - Add required devDependencies and a
testscript to run Vitest
Reviewed changes
Copilot reviewed 5 out of 6 changed files in this pull request and generated 4 comments.
Show a summary per file
| File | Description |
|---|---|
| apps/web/vitest.config.ts | Introduces Vitest config (jsdom env, setup file, test include pattern, resolve conditions) |
| apps/web/vitest-setup.ts | Registers Testing Library DOM matchers globally for tests |
| apps/web/src/routes/u/[username]/+page.test.ts | Adds component tests for the profile page rendering and error state |
| apps/web/src/routes/u/[username]/+page.svelte | Adds the profile page UI with conditional rendering based on data |
| apps/web/package.json | Adds vitest run script and testing/Svelte-related devDependencies |
Files not reviewed (1)
- apps/web/package-lock.json: Language not supported
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
|
@ShantKhatri Kindly review my pr and merge it under the GSSOC 26 program |
| @@ -0,0 +1,11 @@ | |||
| <script lang="ts"> | |||
| import type { PageData } from './types'; | |||
| "lib": ["ES2023", "DOM"], | ||
| "module": "esnext", | ||
| "types": ["vite/client"], | ||
| "types": ["vite/client", "@testing-library/jest-dom"], |
| "noFallthroughCasesInSwitch": true | ||
| }, | ||
| "include": ["src"] | ||
| "include": ["src", "vitest-setup.ts"] |
| const [copyStatus, setCopyStatus] = useState<'success' | 'error'>('success'); | ||
|
|
||
| useEffect(() => { | ||
| // eslint-disable-next-line react-hooks/set-state-in-effect |
|
|
||
| useEffect(() => { | ||
| if (!username) return; | ||
| // eslint-disable-next-line react-hooks/set-state-in-effect |
|
|
||
| useEffect(() => { | ||
| if (!id) return; | ||
| // eslint-disable-next-line react-hooks/set-state-in-effect |
The PR is for testing, and the chore functionality changes are there. |
Summary
This PR adds unit tests to verify that the user profile page properly renders profile data and handles missing users. It sets up the Vitest testing environment with
@testing-library/svelteandjsdom, and implements the specific test cases outlined in the issue.This issue was successfully solved as part of the GirlScript Summer of Code (GSSoC) 2026 program.
Contributor: Satvik-art-creator (GSSoC '26)
Closes #16
Type of Change
What Changed
apps/web/package.json: Addedtestscript and installed testing dependencies includingvitest,svelte,@testing-library/svelte,jsdom,@testing-library/jest-dom, and@sveltejs/vite-plugin-svelte.apps/web/vitest.config.ts&apps/web/vitest-setup.ts: Configured Vitest to run in ajsdomenvironment, loadjest-domcustom matchers, and properly resolve Svelte browser conditions.apps/web/src/routes/u/[username]/+page.svelte: Created a mock Svelte component to consume loader data and render profile information or error messages.apps/web/src/routes/u/[username]/+page.test.ts: Created tests to assert that the profile name and avatar are rendered when data is present, and that the "User Not Found" message appears when a loader error is simulated.How to Test
git fetch origin main && git checkout feat/web-profile-testsnpm --prefix apps/web install(or your respective package manager command).npm --prefix apps/web run testProfile Pagetests pass successfully.Checklist
pnpm -r run lintpasses).pnpm -r run typecheck).pnpm -r run test).console.logor debug statements left in the code.Screenshots / Recordings
N/A
Additional Context
Per the explicit instructions of Issue #16, the tests were written using
@testing-library/svelteand test files were placed in theapps/web/src/routes/u/[username]/directory.