tristan
f2c1845ea1
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>
73 lines
2.8 KiB
TypeScript
73 lines
2.8 KiB
TypeScript
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')
|
|
})
|
|
})
|