Skip to content

test: added test cases for breadcrumb.tsx & Badge.tsx with 100% coverage

Prashanth requested to merge test/contribution4 into test_cases

Summary

This MR adds comprehensive unit test coverage for two shadcn/ui components: Badge and Breadcrumb, achieving 100% test coverage for both components without modifying any production source files.

A total of 73 tests were added covering component rendering, variant behavior, accessibility attributes, HTML attribute forwarding, styling behavior, and integration scenarios. This improves code reliability and reduces regression risk for these reusable UI components.

Type of Change

  • Bug Fix
  • Feature Development
  • Documentation
  • Test Update
  • Configuration Change

Testing

  • Tested on desktop
  • Tested on mobile
  • Tested in different browsers (N/A – unit tests)

Test Results

Badge Component Tests

✓ 26 tests passed
✓ Statements: 100%
✓ Branches: 100%
✓ Functions: 100%
✓ Lines: 100%

Breadcrumb Component Tests

✓ 47 tests passed
✓ Statements: 100%
✓ Branches: 100%
✓ Functions: 100%
✓ Lines: 100%

Total:

✓ 73 tests passing
✓ 100% coverage for badge.tsx and breadcrumb.tsx

Coverage Report

File % Stmts % Branch % Funcs % Lines
components/ui/badge.tsx 100 100 100 100
components/ui/breadcrumb.tsx 100 100 100 100

Screenshot: Screenshot_from_2026-03-27_12-10-41

Changes Made

Badge Component Tests

tests/src/components/ui/badge.test.tsx

Coverage: 100%

Test coverage includes:

✓ badgeVariants function with all variants (default, secondary, destructive, outline)
✓ Default variant behavior
✓ Component rendering with all variants
✓ Custom className merging
✓ HTML attribute forwarding
✓ Children rendering scenarios
✓ Base styling consistency
✓ Variant switching validation

Tests added: 26

Breadcrumb Component Tests

tests/src/components/ui/breadcrumb.test.tsx

Coverage: 100%

Test coverage includes:

✓ Breadcrumb navigation rendering
✓ BreadcrumbList structure
✓ BreadcrumbItem rendering
✓ BreadcrumbLink with asChild variant
✓ BreadcrumbPage accessibility behavior
✓ BreadcrumbSeparator rendering
✓ BreadcrumbEllipsis rendering
✓ HTML attribute forwarding
✓ Custom className merging
✓ Integration tests for full breadcrumb structure

Tests added: 47

Technical Details

Tech Stack:

Framework: React 18 + TypeScript
Testing: Vitest + React Testing Library
UI Library: Radix UI + Lucide Icons
Styling: Tailwind CSS + class-variance-authority

Testing practices used:

✓ Component rendering validation
✓ DOM assertions
✓ Accessibility testing
✓ Ref forwarding verification
✓ ClassName merging validation
✓ Integration testing
✓ Edge case coverage

Commands Used for Verification

Run coverage:

npm run test:coverage

Run tests in UI mode:

npm run test:ui

Run lint checks:

npm run lint

Run type checks:

npm run type-check

Run formatting check:

npm run format:check

Full CI verification:

npm run ci-local

Files Changed

tests/src/components/ui/badge.test.tsx → Added 26 tests
tests/src/components/ui/breadcrumb.test.tsx → Added 47 tests

No files inside src/components/ui were modified.

Checklist

  • Tests pass locally
  • 100% coverage achieved
  • ESLint passes
  • TypeScript checks pass
  • Prettier formatting applied
  • Build passes successfully
  • No breaking changes introduced
  • Accessibility scenarios tested
  • No production behavior modified

Notes

• 73 tests added
• 100% coverage achieved for both components
• No source code modifications
• Only test files added
• Tests follow project conventions
• Edge cases fully covered
• No skipped tests
• No fake assertions
• Improves maintainability
• Improves regression protection

Closes #267 (closed)

Edited by Prashanth

Merge request reports