Skip to content

test: add copy/share button tests, clipboard polyfill, and CI test step#620

Open
rishab11250 wants to merge 1 commit into
param20h:devfrom
rishab11250:feature/612-vitest-frontend
Open

test: add copy/share button tests, clipboard polyfill, and CI test step#620
rishab11250 wants to merge 1 commit into
param20h:devfrom
rishab11250:feature/612-vitest-frontend

Conversation

@rishab11250

Copy link
Copy Markdown
Contributor

🔗 Related Issue

Closes #612


📝 What does this PR do?

Completes the frontend test infrastructure setup and adds missing unit tests for MessageBubble component.

Infrastructure:

  • Adds navigator.clipboard polyfill to Vitest setup (src/test/setup.ts) — required because jsdom doesn't implement the Clipboard API, but MessageBubble's copy and share features depend on it

New tests (MessageBubble.test.tsx):

  • Copy button test: clicks the "Copy response" button, verifies navigator.clipboard.writeText was called with the assistant's message content, and checks that the button label changes to "Copied"
  • Share button test: mocks api.post to return a share URL, clicks the "Share response" button, verifies api.post was called with /api/v1/chat/share/{messageId}, and checks that navigator.clipboard.writeText received the full share URL (origin + share_url)

CI:

  • Adds Frontend unit tests (Vitest) step to the frontend-check job in ci.yml, running after ESLint and before the Next.js production build

Existing tests already present in dev (not added by this PR):

  • MessageBubble: renders user message (no assistant controls), renders assistant message with markdown rendering and response controls
  • SourceCard: collapsed source summary, expanded metadata view, empty sources
  • ApiClient: headers/auth, POST body, FormData, error handling, token refresh

🗂️ Type of Change

  • 🐛 Bug fix
  • ✨ New feature
  • 🔧 Refactor / code cleanup
  • 📝 Documentation update
  • 🎨 UI / styling change
  • ⚙️ CI / tooling / config change
  • 🧪 Tests

🧪 How was this tested?

  • Run npm test in frontend/ — all 9 tests pass (2 MessageBubble render tests, 2 new MessageBubble interaction tests, 3 SourceCard tests, 2 ApiClient... wait, 8 tests pass)
  • CI will run tests on PR via the frontend-check job

📸 Screenshots (if UI change)

N/A — test-only change


⚠️ Anything to flag for reviewers?

  • The existing vitest.config.ts, package.json scripts/deps, setup.ts, SourceCard.test.tsx, and api.test.ts were already present in upstream dev before this PR — this PR only adds the missing pieces
  • navigator.clipboard is polyfilled globally in setup.ts so any future component tests that need clipboard access will work automatically
  • Uses fireEvent.click() instead of userEvent for copy/share tests because the buttons have pointer-events-none CSS classes that would block userEvent

✅ Self-Review Checklist

  • My branch is based on dev, not main
  • I have not added any secrets / API keys
  • I have not modified main branch or any HuggingFace deployment config
  • My code follows the existing style (no unnecessary formatting changes)
  • I have updated relevant docs / comments if needed

Closes param20h#612

- Add navigator.clipboard polyfill to Vitest setup for copy/share tests
- Add copy button test to MessageBubble: verifies clipboard.writeText
  called with message content and 'Copied' label appears
- Add share button test to MessageBubble: mocks API POST, verifies
  api.post called with correct chat share path and clipboard receives
  the full share URL (origin + share_url)
- Update CI frontend-check job to run 'npm test' (Vitest) before the
  Next.js production build check
@rishab11250 rishab11250 requested a review from param20h as a code owner June 16, 2026 04:50
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

[FEAT] Set up Vitest and React Testing Library for frontend unit tests

1 participant