fix(cashflow): defer period label translation (#427)

## Summary
- translate cashflow period type labels during render
- keep Spanish labels as Mes / Trimestre / Año
- add regression coverage for period label translation

## Tests
- npx eslint resources/js/components/cashflow/period-navigation.tsx
resources/js/components/cashflow/period-navigation.test.tsx
- npx vitest run
resources/js/components/cashflow/period-navigation.test.tsx
This commit is contained in:
Víctor Falcón 2026-05-25 17:00:23 +02:00 committed by GitHub
parent 949ca110fa
commit 1278a2b972
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 42 additions and 5 deletions

View File

@ -0,0 +1,37 @@
import { setTranslations } from '@/utils/i18n';
import { render, screen } from '@testing-library/react';
import { afterEach, describe, expect, it, vi } from 'vitest';
import { PeriodNavigation } from './period-navigation';
vi.mock('@inertiajs/react', () => ({
usePage: () => ({ props: { locale: 'es' } }),
}));
describe('PeriodNavigation', () => {
afterEach(() => {
setTranslations({});
});
it('translates period type labels at render time', () => {
setTranslations({
Month: 'Mes',
Quarter: 'Trimestre',
Year: 'Año',
});
render(
<PeriodNavigation
currentDate={new Date(2026, 0, 1)}
periodType="month"
onDateChange={() => undefined}
onPeriodTypeChange={() => undefined}
/>,
);
expect(screen.getByRole('button', { name: 'Mes' })).toBeInTheDocument();
expect(
screen.getByRole('button', { name: 'Trimestre' }),
).toBeInTheDocument();
expect(screen.getByRole('button', { name: 'Año' })).toBeInTheDocument();
});
});

View File

@ -31,11 +31,11 @@ interface PeriodNavigationProps {
const periodTypeOptions: Array<{
value: CashflowPeriodType;
label: string;
labelKey: string;
}> = [
{ value: 'month', label: __('Month') },
{ value: 'quarter', label: __('Quarter') },
{ value: 'year', label: __('Year') },
{ value: 'month', labelKey: 'Month' },
{ value: 'quarter', labelKey: 'Quarter' },
{ value: 'year', labelKey: 'Year' },
];
export function PeriodNavigation({
@ -77,7 +77,7 @@ export function PeriodNavigation({
'border-primary bg-primary text-primary-foreground',
)}
>
{option.label}
{__(option.labelKey)}
</Button>
))}
</ButtonGroup>