fix(frontend): translate status badge labels via i18n helpers
StatusBadge and SimulationStatusBadge now call engagementStatusLabel() / simulationStatusLabel() from @/i18n/status.ts instead of hardcoded English strings. Tests updated to expect French labels (Planifié/Actif/Clôturé, En attente/En cours/Révision requise/Terminé). Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
@@ -1,11 +1,5 @@
|
|||||||
import type { SimulationStatus } from '@/api/types';
|
import type { SimulationStatus } from '@/api/types';
|
||||||
|
import { simulationStatusLabel } from '@/i18n/status';
|
||||||
const LABELS: Record<SimulationStatus, string> = {
|
|
||||||
pending: 'Pending',
|
|
||||||
in_progress: 'In progress',
|
|
||||||
review_required: 'Review required',
|
|
||||||
done: 'Done',
|
|
||||||
};
|
|
||||||
|
|
||||||
const STYLES: Record<SimulationStatus, string> = {
|
const STYLES: Record<SimulationStatus, string> = {
|
||||||
pending: 'bg-cloud text-graphite border border-hairline',
|
pending: 'bg-cloud text-graphite border border-hairline',
|
||||||
@@ -21,7 +15,7 @@ export function SimulationStatusBadge({ status }: { status: SimulationStatus }):
|
|||||||
data-testid="simulation-status-badge"
|
data-testid="simulation-status-badge"
|
||||||
data-status={status}
|
data-status={status}
|
||||||
>
|
>
|
||||||
{LABELS[status]}
|
{simulationStatusLabel(status)}
|
||||||
</span>
|
</span>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -1,10 +1,5 @@
|
|||||||
import type { EngagementStatus } from '@/api/types';
|
import type { EngagementStatus } from '@/api/types';
|
||||||
|
import { engagementStatusLabel } from '@/i18n/status';
|
||||||
const LABELS: Record<EngagementStatus, string> = {
|
|
||||||
planned: 'Planned',
|
|
||||||
active: 'Active',
|
|
||||||
closed: 'Closed',
|
|
||||||
};
|
|
||||||
|
|
||||||
const STYLES: Record<EngagementStatus, string> = {
|
const STYLES: Record<EngagementStatus, string> = {
|
||||||
planned: 'bg-warn-soft text-warn border border-warn',
|
planned: 'bg-warn-soft text-warn border border-warn',
|
||||||
@@ -19,7 +14,7 @@ export function StatusBadge({ status }: { status: EngagementStatus }): JSX.Eleme
|
|||||||
data-testid="status-badge"
|
data-testid="status-badge"
|
||||||
data-status={status}
|
data-status={status}
|
||||||
>
|
>
|
||||||
{LABELS[status]}
|
{engagementStatusLabel(status)}
|
||||||
</span>
|
</span>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -4,10 +4,10 @@ import { SimulationStatusBadge } from '@/components/SimulationStatusBadge';
|
|||||||
import type { SimulationStatus } from '@/api/types';
|
import type { SimulationStatus } from '@/api/types';
|
||||||
|
|
||||||
const CASES: { status: SimulationStatus; label: string }[] = [
|
const CASES: { status: SimulationStatus; label: string }[] = [
|
||||||
{ status: 'pending', label: 'Pending' },
|
{ status: 'pending', label: 'En attente' },
|
||||||
{ status: 'in_progress', label: 'In progress' },
|
{ status: 'in_progress', label: 'En cours' },
|
||||||
{ status: 'review_required', label: 'Review required' },
|
{ status: 'review_required', label: 'Révision requise' },
|
||||||
{ status: 'done', label: 'Done' },
|
{ status: 'done', label: 'Terminé' },
|
||||||
];
|
];
|
||||||
|
|
||||||
describe('SimulationStatusBadge', () => {
|
describe('SimulationStatusBadge', () => {
|
||||||
|
|||||||
@@ -2,12 +2,18 @@ import { describe, expect, it } from 'vitest';
|
|||||||
import { render, screen } from '@testing-library/react';
|
import { render, screen } from '@testing-library/react';
|
||||||
import { StatusBadge } from '@/components/StatusBadge';
|
import { StatusBadge } from '@/components/StatusBadge';
|
||||||
|
|
||||||
|
const LABELS: Record<string, string> = {
|
||||||
|
planned: 'Planifié',
|
||||||
|
active: 'Actif',
|
||||||
|
closed: 'Clôturé',
|
||||||
|
};
|
||||||
|
|
||||||
describe('StatusBadge', () => {
|
describe('StatusBadge', () => {
|
||||||
it.each(['planned', 'active', 'closed'] as const)('renders %s label and data attr', (status) => {
|
it.each(['planned', 'active', 'closed'] as const)('renders %s label and data attr', (status) => {
|
||||||
render(<StatusBadge status={status} />);
|
render(<StatusBadge status={status} />);
|
||||||
const badge = screen.getByTestId('status-badge');
|
const badge = screen.getByTestId('status-badge');
|
||||||
expect(badge).toHaveAttribute('data-status', status);
|
expect(badge).toHaveAttribute('data-status', status);
|
||||||
expect(badge.textContent?.toLowerCase()).toBe(status);
|
expect(badge.textContent).toBe(LABELS[status]);
|
||||||
});
|
});
|
||||||
|
|
||||||
it('applies warn-soft surface for planned', () => {
|
it('applies warn-soft surface for planned', () => {
|
||||||
|
|||||||
Reference in New Issue
Block a user