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:
parent
949ca110fa
commit
1278a2b972
|
|
@ -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();
|
||||
});
|
||||
});
|
||||
|
|
@ -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>
|
||||
|
|
|
|||
Loading…
Reference in New Issue