feat(ui) : MalioDate — markedDates (statut par jour) + event month-change (#MUI-45)

MonthGrid : prop markedDates (Record<ISO, 'success'|'danger'>) appliquant un fond tokenisé par jour (bg-m-success/15 / bg-m-danger/15). Précédence : sélection (primary) > variante marquée ; today garde sa bordure ET reçoit le fond marqué. CalendarField : emit month-change { month: 0-11, year } à l'ouverture du popover et à chaque navigation de mois (watch sur isOpen + currentMonth/currentYear). Date : expose markedDates (passée à MonthGrid via le slot) et réémet month-change. Tests MonthGrid (variantes + précédence today/sélection) et Date (month-change à l'ouverture/nav + passthrough markedDates). Doc COMPONENTS.md + CHANGELOG + story + playground. Sert l'écran Heures de SIRH (jours validés en vert, chargement du mois visible). Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
2026-06-16 11:38:58 +02:00
parent cca15524f4
commit f2c1845ea1
9 changed files with 225 additions and 2 deletions
@@ -0,0 +1,72 @@
+import {afterEach, beforeEach, describe, expect, it, vi} from 'vitest'
+import {mount} from '@vue/test-utils'
+import type {DefineComponent} from 'vue'
+import MonthGrid from './MonthGrid.vue'
+
+type MonthGridProps = {
+  month: number
+  year: number
+  selectedDate?: string | null
+  markedDates?: Record<string, 'success' | 'danger'>
+  min?: string
+  max?: string
+}
+
+const Grid = MonthGrid as DefineComponent<MonthGridProps>
+const mountGrid = (props: MonthGridProps) => mount(Grid, {props, attachTo: document.body})
+
+// Récupère la pastille (span rond) qui porte les classes de `cellClass` pour un jour donné.
+const pill = (wrapper: ReturnType<typeof mountGrid>, iso: string) =>
+  wrapper.get(`[data-iso="${iso}"]`).get('span.rounded-full')
+
+describe('MalioDateMonthGrid — markedDates', () => {
+  beforeEach(() => {
+    vi.useFakeTimers()
+    vi.setSystemTime(new Date(2026, 4, 19)) // 19 mai 2026
+  })
+  afterEach(() => vi.useRealTimers())
+
+  it('applique un fond success sur un jour marqué', () => {
+    const wrapper = mountGrid({month: 4, year: 2026, markedDates: {'2026-05-20': 'success'}})
+    expect(pill(wrapper, '2026-05-20').classes()).toContain('bg-m-success/15')
+  })
+
+  it('applique un fond danger sur un jour marqué', () => {
+    const wrapper = mountGrid({month: 4, year: 2026, markedDates: {'2026-05-21': 'danger'}})
+    expect(pill(wrapper, '2026-05-21').classes()).toContain('bg-m-danger/15')
+  })
+
+  it('ne marque pas les jours absents de markedDates', () => {
+    const wrapper = mountGrid({month: 4, year: 2026, markedDates: {'2026-05-20': 'success'}})
+    const classes = pill(wrapper, '2026-05-22').classes()
+    expect(classes).not.toContain('bg-m-success/15')
+    expect(classes).not.toContain('bg-m-danger/15')
+  })
+
+  it('précédence : la sélection (primary) prime sur la variante marquée', () => {
+    const wrapper = mountGrid({
+      month: 4,
+      year: 2026,
+      selectedDate: '2026-05-22',
+      markedDates: {'2026-05-22': 'success'},
+    })
+    const classes = pill(wrapper, '2026-05-22').classes()
+    expect(classes).toContain('bg-m-primary')
+    expect(classes).toContain('text-white')
+    expect(classes).not.toContain('bg-m-success/15')
+  })
+
+  it('today marqué : garde sa bordure ET reçoit le fond marqué', () => {
+    const wrapper = mountGrid({month: 4, year: 2026, markedDates: {'2026-05-19': 'success'}})
+    const classes = pill(wrapper, '2026-05-19').classes()
+    expect(classes).toContain('border-m-primary')
+    expect(classes).toContain('bg-m-success/15')
+  })
+
+  it('today non marqué : bordure sans fond marqué', () => {
+    const wrapper = mountGrid({month: 4, year: 2026, markedDates: {'2026-05-20': 'success'}})
+    const classes = pill(wrapper, '2026-05-19').classes()
+    expect(classes).toContain('border-m-primary')
+    expect(classes).not.toContain('bg-m-success/15')
+  })
+})