MALIO-DEV/malio-layer-ui
4
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

[#MUI-39] Création d'un sélecteur d'heure à molettes (MalioTimePicker) ; DateTime rebranché dessus (remplace l'input time natif intérimaire) (#55)

Browse Source 
| Numéro du ticket | Titre du ticket |
|------------------|-----------------|
|                  |                 |

## Description de la PR

## Modification du .env

## Check list

- [ ] Pas de régression
- [ ] TU/TI/TF rédigée
- [ ] TU/TI/TF OK
- [ ] CHANGELOG modifié

Reviewed-on: #55
Co-authored-by: tristan <tristan@yuno.malio.fr>
Co-committed-by: tristan <tristan@yuno.malio.fr>
This commit was merged in pull request #55.
This commit is contained in:
Autin
2026-05-27 12:01:29 +00:00
committed by Autin
parent 6efb830ffe
commit e6a46a9d60
20 changed files with 2604 additions and 30 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/components/malio/date/DateTime.test.ts
+14 -11
View File
@@ -2,6 +2,7 @@ import {afterEach, beforeEach, describe, expect, it, vi} from 'vitest'
import {mount} from '@vue/test-utils'
import type {DefineComponent} from 'vue'
import DateTime_ from './DateTime.vue'
import MalioTimePicker from '../time/TimePicker.vue'
type DateTimeProps = {
id?: string
@@ -30,7 +31,7 @@ const mountDateTime = (props: DateTimeProps = {}) =>
describe('MalioDateTime', () => {
beforeEach(() => {
vi.useFakeTimers()
vi.setSystemTime(new Date(2026, 4, 19)) // 19 mai 2026
vi.setSystemTime(new Date(2026, 4, 19, 9, 5, 0)) // 19 mai 2026, 09:05
})
afterEach(() => vi.useRealTimers())
@@ -49,28 +50,30 @@ describe('MalioDateTime', () => {
})
describe('popover', () => {
it('ouvre la grille et l\'input heure au clic', async () => {
it('ouvre la grille et le champ sélecteur d\'heure au clic', async () => {
const wrapper = mountDateTime()
await wrapper.get('[data-test="date-input"]').trigger('click')
expect(wrapper.find('[data-test="month-grid"]').exists()).toBe(true)
expect(wrapper.find('[data-test="time-input"]').exists()).toBe(true)
expect(wrapper.findComponent(MalioTimePicker).exists()).toBe(true)
expect(wrapper.find('[data-test="time-field"]').exists()).toBe(true)
})
})
describe('sélection', () => {
it('émet le jour à 00:00 et garde le popover ouvert', async () => {
it('émet le jour à l\'heure actuelle (si aucune heure choisie) et garde le popover ouvert', async () => {
const wrapper = mountDateTime()
await wrapper.get('[data-test="date-input"]').trigger('click')
await wrapper.get('[data-test="day"][data-iso="2026-05-19"]').trigger('click')
expect(wrapper.emitted('update:modelValue')?.at(-1)).toEqual(['2026-05-19T00:00:00'])
// heure système figée à 09:05
expect(wrapper.emitted('update:modelValue')?.at(-1)).toEqual(['2026-05-19T09:05:00'])
expect(wrapper.find('[data-test="popover"]').exists()).toBe(true)
})
it('applique l\'heure réglée avant le clic du jour', async () => {
const wrapper = mountDateTime()
await wrapper.get('[data-test="date-input"]').trigger('click')
await wrapper.get('[data-test="time-input"]').setValue('09:15')
// pas d'émission tant qu'aucun jour n'est choisi
wrapper.findComponent(MalioTimePicker).vm.$emit('update:modelValue', '09:15')
await wrapper.vm.$nextTick()
expect(wrapper.emitted('update:modelValue')).toBeUndefined()
await wrapper.get('[data-test="day"][data-iso="2026-05-19"]').trigger('click')
expect(wrapper.emitted('update:modelValue')?.at(-1)).toEqual(['2026-05-19T09:15:00'])
@@ -79,15 +82,15 @@ describe('MalioDateTime', () => {
it('met à jour l\'heure quand une date est déjà choisie', async () => {
const wrapper = mountDateTime({modelValue: '2026-05-20T14:30:00'})
await wrapper.get('[data-test="date-input"]').trigger('click')
await wrapper.get('[data-test="time-input"]').setValue('08:45')
wrapper.findComponent(MalioTimePicker).vm.$emit('update:modelValue', '08:45')
await wrapper.vm.$nextTick()
expect(wrapper.emitted('update:modelValue')?.at(-1)).toEqual(['2026-05-20T08:45:00'])
})
it('initialise l\'input heure depuis la valeur', async () => {
it('initialise le champ heure depuis la valeur', async () => {
const wrapper = mountDateTime({modelValue: '2026-05-20T14:30:00'})
await wrapper.get('[data-test="date-input"]').trigger('click')
const time = wrapper.get('[data-test="time-input"]').element as HTMLInputElement
expect(time.value).toBe('14:30')
expect(wrapper.findComponent(MalioTimePicker).props('modelValue')).toBe('14:30')
})
})