diff --git a/docs/testing/TRUST_BADGE_TESTS.md b/docs/testing/TRUST_BADGE_TESTS.md new file mode 100644 index 0000000..07fe037 --- /dev/null +++ b/docs/testing/TRUST_BADGE_TESTS.md @@ -0,0 +1,17 @@ +# TrustBadge Test Coverage + +`src/components/__tests__/TrustBadge.test.tsx` covers the TrustBadge component with React Testing Library and Vitest. + +Covered behavior: + +- Every supported `TrustLevel` value renders its visible label and icon. +- Tooltip-enabled badges expose the tooltip text through `aria-describedby`. +- `showTooltip={false}` removes the tooltip and accessible description. +- Custom `className` values are merged without dropping trust-level styling. +- Unknown trust levels fall back to the unverified badge copy. + +Run the focused test locally with: + +```bash +pnpm test -- --run src/components/__tests__/TrustBadge.test.tsx +``` diff --git a/src/components/TrustBadge.tsx b/src/components/TrustBadge.tsx index 2cb714f..8960c86 100644 --- a/src/components/TrustBadge.tsx +++ b/src/components/TrustBadge.tsx @@ -16,6 +16,9 @@ export const TrustBadge: React.FC = ({ className = '', showTooltip = true }) => { + const tooltipId = React.useId(); + const tooltipDescriptionId = `${tooltipId}-description`; + const getBadgeConfig = () => { switch (level) { case 'verified': @@ -46,13 +49,22 @@ export const TrustBadge: React.FC = ({ const config = getBadgeConfig(); return ( -
+
{config.icon} {config.label} {showTooltip && ( -
-

{config.description}

+