test(frontend): create shared badge test factory (Phase 3.2)

[gander]

Summary

Phase 3.2 of Test Suite Quality Improvements - Create shared badge test factory utility to eliminate redundant badge component test patterns.

Changes

New Files:

• packages/frontend/tests/utils/badge-test-factory.ts - Shared test utility for badge components

  • Generic createBadgeTestSuite<T> function
  • Supports custom prop names (default: 'status')
  • Supports multiple statuses with expected text and type
  • Tests standard badge behaviors: rendering, sizes, data-test attributes
  • Uses proper TypeScript types (Component instead of any)

• packages/frontend/tests/utils/badge-test-factory.test.ts - Tests for factory utility

  • Verifies factory creates test suites without errors
  • Tests custom prop name support - Tests multiple status handling
  • Tests TypeScript type safety

Benefits

• DRY Principle: Single source of truth for badge component test patterns
• Type Safety: Full TypeScript support with generic types
• Reusability: Can be used for all future badge components
• Maintainability: Changes to standard badge tests only need to be made in one place

Future Usage

Once badge components exist in the frontend, this factory will be used to refactor:

• ProjectStatusBadge
• RunStatusBadge
• PageStatusBadge
• DiffBadge
• RuleScopeBadge

Test Results

• ✅ 501 tests passing on Node 22.21.1
• ✅ 501 tests passing on Node 24.12.0
• ✅ Biome CI passing for Phase 3.2 files
• ✅ No any types used (proper TypeScript types throughout)

Related

• Part of Milestone Enhancement: Missing, redundant and incorrect test cases in Diff Voyager test suite #333: Test Suite Quality Improvements
• Follows plan from .claude-config/plans/cuddly-soaring-origami.md
• Phase 3.2: Create Shared Badge Test Utility (lines 427-505)

🤖 Generated with Claude Code