test(web): add tests for user profile page render and 404 flow by Satvik-art-creator · Pull Request #512 · Dev-Card/DevCard

Satvik-art-creator · 2026-06-09T06:21:33Z

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

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

Fetch and checkout the branch: git fetch origin main && git checkout feat/web-profile-tests
Install the new dependencies: run npm --prefix apps/web install (or your respective package manager command).
Run the tests: npm --prefix apps/web run test
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.

vercel · 2026-06-09T06:21:37Z

@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 · 2026-06-09T06:22:14Z

CI — Checks Failed

Backend — SKIP

Check	Result
Lint	-
Test	-
Typecheck	-

Mobile — SKIP

Check	Result
Lint	-
Test	-

Web — FAIL

Check	Result
Check	FAIL
Build	PASS

Last updated: Sat, 13 Jun 2026 11:38:42 GMT

Copilot

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.

Satvik-art-creator · 2026-06-09T06:32:42Z

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

Copilot

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

Copilot

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 · 2026-06-09T17:18:20Z

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

Satvik-art-creator · 2026-06-10T00:42:46Z

@ShantKhatri

Yes! I included the chore changes to fix existing ESLint bugs that were blocking the test builds. Since this PR also resolves those bugs, could you please add the type:bug and type:testing label as well? Let me know if it looks good to merge for GSSoC 26. Thanks! 🚀

ShantKhatri · 2026-06-13T07:14:02Z

Hi @Satvik-art-creator , We are not supposed to have changes in svelt, as devcard is fully migrated to React. Also for testing PR, we should not have changes in core.

Satvik-art-creator · 2026-06-13T09:46:35Z

@ShantKhatri
Got it! The original issue description mentioned Svelte, so I was following that strictly. I will remove the Svelte files, rewrite the tests in React, and revert my changes to the core files so this PR is strictly for testing. I'll update the PR shortly! 🚀

Copilot

Pull request overview

Copilot reviewed 6 out of 7 changed files in this pull request and generated 4 comments.

Files not reviewed (1)

apps/web/package-lock.json: Generated file

+export function isSupportedPlatform(id: string): boolean {
+  return id in PLATFORMS;
+}


+  };
+
+  it('renders loading state initially', () => {
+    (apiFetch as any).mockImplementation(() => new Promise(() => {}));


    "lib": ["ES2023", "DOM"],
    "module": "esnext",
-    "types": ["vite/client"],
+    "types": ["vite/client", "@testing-library/jest-dom"],


    "noFallthroughCasesInSwitch": true
  },
-  "include": ["src"]
+  "include": ["src", "vitest-setup.ts"]


- Extract useTheme hook and ThemeContext to separate files (react-refresh/only-export-components) - Add async/await with cleanup in CardPage and ProfilePage effects (react-hooks/set-state-in-effect) - Remove redundant mounted state in ProfilePage - Replace 'any' with vi.mocked() and PublicProfile type in tests (no-explicit-any) - Revert out-of-scope platforms.ts change

Copilot

Pull request overview

Copilot reviewed 11 out of 12 changed files in this pull request and generated 3 comments.

Files not reviewed (1)

apps/web/package-lock.json: Generated file

  useEffect(() => {
    if (!username) return;
-    setLoading(true);
-    apiFetch<PublicProfile>(`/api/u/${username}?source=web`)
-      .then((data) => {
-        setProfile(data);
-        setError(null);
-      })
-      .catch(() => {
-        setProfile(null);
-        setError('User not found');
-      })
-      .finally(() => setLoading(false));
+
+    let cancelled = false;
+
+    const fetchProfile = async () => {
+      try {
+        const data = await apiFetch<PublicProfile>(`/api/u/${username}?source=web`);
+        if (!cancelled) {
+          setProfile(data);
+          setError(null);
+        }
+      } catch {
+        if (!cancelled) {
+          setProfile(null);
+          setError('User not found');
+        }
+      } finally {
+        if (!cancelled) setLoading(false);
+      }
+    };


  useEffect(() => {
    if (!id) return;
-    setLoading(true);
-    apiFetch<PublicCard>(`/api/u/card/${id}`)
-      .then((data) => {
-        setCard(data);
-        setError(null);
-      })
-      .catch(() => {
-        setCard(null);
-        setError('Card not found');
-      })
-      .finally(() => setLoading(false));
+
+    let cancelled = false;
+
+    const fetchCard = async () => {
+      try {
+        const data = await apiFetch<PublicCard>(`/api/u/card/${id}`);
+        if (!cancelled) {
+          setCard(data);
+          setError(null);
+        }
+      } catch {
+        if (!cancelled) {
+          setCard(null);
+          setError('Card not found');
+        }
+      } finally {
+        if (!cancelled) setLoading(false);
+      }
+    };


+import { ThemeContext } from './ThemeContext';
+import type { ThemeContextValue } from './ThemeContext';

 type Theme = 'light' | 'dark';


Satvik-art-creator · 2026-06-13T10:25:33Z

Hi @ShantKhatri, all changes done — Svelte removed, tests rewritten in React, all ESLint errors fixed. CI passes now. Please review and merge under GSSoC '26. 🚀

ShantKhatri · 2026-06-13T11:29:10Z

Hi @Satvik-art-creator , We are not supposed to have changes in svelt, as devcard is fully migrated to React. Also for testing PR, we should not have changes in core.

Here with respect to core changes, I'm refering to changed under /src, which is not accepetable here.

Copilot

Pull request overview

Copilot reviewed 5 out of 6 changed files in this pull request and generated 4 comments.

Files not reviewed (1)

apps/web/package-lock.json: Generated file

    "lib": ["ES2023", "DOM"],
    "module": "esnext",
-    "types": ["vite/client"],
+    "types": ["vite/client", "@testing-library/jest-dom"],


    "noFallthroughCasesInSwitch": true
  },
-  "include": ["src"]
+  "include": ["src", "vitest-setup.ts"]


+    await waitFor(() => {
+      expect(screen.getByText('Test User')).toBeInTheDocument();
+    });


+    await waitFor(() => {
+      expect(screen.getByText('Profile not found')).toBeInTheDocument();
+    });


Satvik-art-creator · 2026-06-13T11:40:20Z

@ShantKhatri Done! Reverted all core /src changes. The PR now only contains test files and test configuration — no changes to application source code. Please review. 🚀

Satvik-art-creator · 2026-06-15T05:54:51Z

@ShantKhatri Kindly merge this if there has been no issue in the pr

Satvik-art-creator added 2 commits June 9, 2026 11:42

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

366bec5

chore: fix TS types in test file

64af322

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

Copilot AI reviewed Jun 9, 2026

View reviewed changes

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 Outdated

Comment thread apps/web/src/routes/u/[username]/+page.svelte Outdated

fix(web): resolve ESLint errors in React components

109b602

chore(web): apply PR review suggestions for test setup

de6976f

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

chore(web): update tsconfig to resolve jest-dom matchers globally

13e86a4

Copilot AI reviewed Jun 9, 2026

View reviewed changes

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 Outdated

Harxhit added web gssoc:approved Required label for every approved PR. Gives the base +50 points and enables contribution tracking. labels Jun 9, 2026

chore(web): apply Copilot PR review suggestions

82ace4d

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

Copilot AI reviewed Jun 9, 2026

View reviewed changes

Merge remote-tracking branch 'upstream/main' into feat/web-profile-tests

d504503

Satvik-art-creator added 2 commits June 13, 2026 15:19

refactor(web): rewrite tests in React and revert core changes

0e8ebf5

feat(shared): add isSupportedPlatform helper

777b9be

Copilot AI review requested due to automatic review settings June 13, 2026 09:52

Copilot AI reviewed Jun 13, 2026

View reviewed changes

Satvik-art-creator added 2 commits June 13, 2026 15:31

fix(web): remove invalid profileId from test mock

b6e6ca4

Copilot AI review requested due to automatic review settings June 13, 2026 10:06

Copilot AI reviewed Jun 13, 2026

View reviewed changes

fix(web): align test mock with PublicProfile and PlatformLink types

2135c2b

revert(web): remove all core /src changes, keep only test files

aa84f5b

Copilot AI review requested due to automatic review settings June 13, 2026 11:37

Copilot AI reviewed Jun 13, 2026

View reviewed changes

		@@ -0,0 +1,11 @@
		<script lang="ts">
		import type { PageData } from './types';

Conversation

Satvik-art-creator commented Jun 9, 2026

Summary

Type of Change

What Changed

How to Test

Checklist

Screenshots / Recordings

Additional Context

Uh oh!

vercel Bot commented Jun 9, 2026

Uh oh!

github-actions Bot commented Jun 9, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

CI — Checks Failed

Backend — SKIP

Mobile — SKIP

Web — FAIL

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Reviewed changes

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Satvik-art-creator commented Jun 9, 2026

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Uh oh!

ShantKhatri commented Jun 9, 2026

Uh oh!

Satvik-art-creator commented Jun 10, 2026

Uh oh!

ShantKhatri commented Jun 13, 2026

Uh oh!

Satvik-art-creator commented Jun 13, 2026

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Uh oh!

Satvik-art-creator commented Jun 13, 2026

Uh oh!

ShantKhatri commented Jun 13, 2026

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Uh oh!

Satvik-art-creator commented Jun 13, 2026

Uh oh!

Satvik-art-creator commented Jun 15, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

github-actions Bot commented Jun 9, 2026 •

edited

Loading