test: check that the month view sizes its chips from the chosen text size

components/calendar/__tests__/calendar-month-view-text-scale.test.ts

@@ -1,8 +1,16 @@
-import { describe, expect, it, vi } from 'vitest';
+import { createElement } from 'react';
+import { afterEach, describe, expect, it, vi } from 'vitest';
+import { render, screen } from '@testing-library/react';
+import type { Calendar, CalendarEvent } from '@/lib/jmap/types';
 
-vi.mock('next-intl', () => ({ useTranslations: () => (k: string) => k, useFormatter: () => ({}) }));
+vi.mock('next-intl', () => ({
+  useTranslations: () => (k: string) => k,
+  useLocale: () => 'en',
+  useFormatter: () => ({ dateTime: (d: Date, options: Intl.DateTimeFormatOptions) => new Intl.DateTimeFormat('en', options).format(d) }),
+}));
 
-const { monthGridMetrics } = await import('../calendar-month-view');
+const { CalendarMonthView, monthGridMetrics } = await import('../calendar-month-view');
+const { useSettingsStore } = await import('@/stores/settings-store');
 
 describe('monthGridMetrics', () => {
   it('keeps the 24px chip with a mouse at normal text size', () => {
@@ -23,3 +31,39 @@ describe('monthGridMetrics', () => {
     expect(monthGridMetrics(false, 0.875).chipHeight).toBe(24);
   });
 });
+
+describe('CalendarMonthView text size', () => {
+  const original = useSettingsStore.getState().fontSize;
+  afterEach(() => useSettingsStore.setState({ fontSize: original }));
+
+  const chipAt = (fontSize: 'medium' | 'huge') => {
+    useSettingsStore.setState({ fontSize });
+    render(createElement(CalendarMonthView, {
+      focus: { date: new Date(2026, 9, 7), nonce: 0 },
+      windowKey: 'month:2026-10-07',
+      rangeStart: new Date(2026, 8, 28),
+      rangeEnd: new Date(2026, 10, 1),
+      selectedDate: new Date(2026, 9, 7),
+      events: [{
+        id: 'e1', uid: 'u1', title: 'Birthday', start: '2026-10-07T00:00:00', duration: 'P1D', showWithoutTime: true,
+        calendarIds: { 'cal-1': true }, status: 'confirmed',
+      } as unknown as CalendarEvent],
+      calendars: [{ id: 'cal-1', name: 'Work', color: '#123456' }] as unknown as Calendar[],
+      onSelectDate: vi.fn(),
+      onSelectEvent: vi.fn(),
+    }));
+    return screen.getByRole('button', { name: /Birthday/ }).parentElement as HTMLElement;
+  };
+
+  it('keeps the normal chip at the normal text size', () => {
+    const chip = chipAt('medium');
+    expect(chip.style.height).toBe('24px');
+    expect(chip.style.top).toBe('30px');
+  });
+
+  it('sizes the chips from the text size the user chose', () => {
+    const chip = chipAt('huge');
+    expect(chip.style.height).toBe('50px');
+    expect(chip.style.top).toBe('60px');
+  });
+});