Strengthen the PriorityTag tone test

React · React · intermediate · modification

Strengthens the PriorityTag test. The old test only checked that the title rendered; this replaces it with focused cases for urgent and non-urgent tickets, mocking the presentational `Tag` so the tests assert exactly what the component hands it. Both cases pass. The component and `Tag` are shown unchanged for reference.

PriorityTag drives the badge color in the support queue; `tone` is the only thing that distinguishes an urgent ticket from a routine one.

Requirements

• PriorityTag renders each ticket through the shared `Tag`, passing the ticket title as the label.
• Urgent tickets must render with the `critical` tone; every non-urgent priority must render with a non-critical tone.
• The test must independently pin the tone rule — asserting the tag's title while the tone is stubbed away does not count as covering it.

Files touched

• src/components/PriorityTag.jsx
• src/components/Tag.jsx
• src/components/PriorityTag.test.jsx

--- src/components/PriorityTag.jsx
 import { Tag } from './Tag';
 
 const TONE_BY_PRIORITY = {
   urgent: 'critical',
   high: 'warning',
   medium: 'neutral',
   low: 'neutral',
 };
 
 export function PriorityTag({ ticket }) {
   const tone = TONE_BY_PRIORITY[ticket.priority] ?? 'neutral';
   return <Tag label={ticket.title} tone={tone} />;
 }
--- src/components/Tag.jsx
 export function Tag({ label, tone }) {
   return (
     <span className={`tag tag--${tone}`} data-tone={tone}>
       {label}
     </span>
   );
 }
--- src/components/PriorityTag.test.jsx
 import { PriorityTag } from './PriorityTag';
 
+jest.mock('./Tag', () => ({
+  Tag: ({ label }) => <span data-testid="tag">{label}</span>,
+}));
+
 describe('PriorityTag', () => {

Review this PR

React practice