Skip to content

test(web): add tests for user profile page render and 404 flow#512

Open
Satvik-art-creator wants to merge 6 commits into
Dev-Card:mainfrom
Satvik-art-creator:feat/web-profile-tests
Open

test(web): add tests for user profile page render and 404 flow#512
Satvik-art-creator wants to merge 6 commits into
Dev-Card:mainfrom
Satvik-art-creator:feat/web-profile-tests

Conversation

@Satvik-art-creator

Copy link
Copy Markdown

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/svelte and jsdom, 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

  • Bug fix
  • New feature
  • Refactor (no functional change)
  • UI / Design change
  • Tests only
  • Documentation
  • Infrastructure / DevOps
  • Security

What Changed

  • apps/web/package.json: Added test script and installed testing dependencies including vitest, 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 a jsdom environment, load jest-dom custom 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

  1. Fetch and checkout the branch: git fetch origin main && git checkout feat/web-profile-tests
  2. Install the new dependencies: run npm --prefix apps/web install (or your respective package manager command).
  3. Run the tests: npm --prefix apps/web run test
  4. Verify that the Vitest suite executes and both Profile Page tests pass successfully.

Checklist

  • My code follows the project's coding style (pnpm -r run lint passes).
  • TypeScript compiles without errors (pnpm -r run typecheck).
  • I have added or updated tests for the changes I made.
  • All tests pass locally (pnpm -r run test).
  • I have updated documentation where necessary.
  • No new console.log or debug statements left in the code.
  • Breaking changes are documented in this PR description.

Screenshots / Recordings

N/A


Additional Context

Per the explicit instructions of Issue #16, the tests were written using @testing-library/svelte and test files were placed in the apps/web/src/routes/u/[username]/ directory.

Copilot AI review requested due to automatic review settings June 9, 2026 06:21
@vercel

vercel Bot commented Jun 9, 2026

Copy link
Copy Markdown

@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.

@github-actions

github-actions Bot commented Jun 9, 2026

Copy link
Copy Markdown

CI — All Checks Passed

Backend — SKIP

Check Result
Lint -
Test -
Typecheck -

Mobile — SKIP

Check Result
Lint -
Test -

Web — PASS

Check Result
Check PASS
Build PASS

Last updated: Tue, 09 Jun 2026 06:45:20 GMT

Copilot AI left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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 test script 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.

Comment thread apps/web/vitest-setup.ts Outdated
Comment thread apps/web/src/routes/u/[username]/+page.test.ts Outdated
Comment thread apps/web/vitest.config.ts
Comment thread apps/web/src/routes/u/[username]/+page.svelte
@Satvik-art-creator

Copy link
Copy Markdown
Author

@ShantKhatri Kindly review my pr and merge it under the GSSOC 26 program

Copilot AI review requested due to automatic review settings June 9, 2026 06:35

Copilot AI left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Pull request overview

Copilot reviewed 12 out of 13 changed files in this pull request and generated 5 comments.

Files not reviewed (1)
  • apps/web/package-lock.json: Language not supported

Comment thread apps/web/src/pages/ProfilePage.tsx Outdated
Comment thread apps/web/src/pages/ProfilePage.tsx
Comment thread apps/web/src/pages/CardPage.tsx
Comment thread apps/web/src/pages/ProfilePage.tsx Outdated
Comment thread apps/web/src/routes/u/[username]/$types.ts
@Harxhit Harxhit added web gssoc:approved Required label for every approved PR. Gives the base +50 points and enables contribution tracking. labels Jun 9, 2026
Copilot AI review requested due to automatic review settings June 9, 2026 06:44

Copilot AI left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Pull request overview

Copilot reviewed 12 out of 13 changed files in this pull request and generated 6 comments.

Files not reviewed (1)
  • apps/web/package-lock.json: Language not supported

@@ -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
@ShantKhatri

Copy link
Copy Markdown
Contributor

@ShantKhatri Kindly review my pr and merge it under the GSSOC 26 program

The PR is for testing, and the chore functionality changes are there.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

gssoc:approved Required label for every approved PR. Gives the base +50 points and enables contribution tracking. web

Projects

None yet

Development

Successfully merging this pull request may close these issues.

web: add tests for user profile page render and 404 flow

4 participants