chore(DateField): add tests for dayPeriod updates

unovue · May 31, 2024 · c2cd391 · c2cd391
1 parent 566ab28
commit c2cd391
Show file tree

Hide file tree

Showing 2 changed files with 36 additions and 2 deletions.
diff --git a/packages/radix-vue/src/DateField/DateField.test.ts b/packages/radix-vue/src/DateField/DateField.test.ts
@@ -42,13 +42,14 @@ function thisTimeZone(date: string): string {
 function setup(props: { dateFieldProps?: DateFieldRootProps, emits?: { 'onUpdate:modelValue'?: (data: DateValue) => void } } = {}) {
   const user = userEvent.setup()
   const returned = render(DateField, { props })
+  const value = returned.getByTestId('value')
   const month = returned.getByTestId('month')
   const day = returned.getByTestId('day')
   const year = returned.getByTestId('year')
   const input = returned.getByTestId('input')
   const label = returned.getByTestId('label')
 
-  return { ...returned, user, month, day, year, input, label }
+  return { ...returned, user, month, day, year, input, label, value }
 }
 
 it('should pass axe accessibility tests', async () => {
@@ -439,6 +440,37 @@ describe('dateField', async () => {
     expect(dayPeriod).toHaveFocus()
   })
 
+  it('updates the hour on the modelValue if the dayPeriod is updated', async () => {
+    const { getByTestId, user, value, rerender } = setup({
+      dateFieldProps: {
+        modelValue: calendarDateTime,
+        granularity: 'second',
+      },
+      emits: {
+        'onUpdate:modelValue': (data: DateValue) => {
+          return rerender({
+            dateFieldProps: {
+              modelValue: data,
+              granularity: 'second',
+            },
+          })
+        },
+      },
+    })
+
+    const dayPeriod = getByTestId('dayPeriod')
+    expect(value.textContent).toBe(calendarDateTime.toString())
+    await user.click(dayPeriod)
+    await user.keyboard('{a}')
+    expect(getByTestId('value').textContent).toBe(calendarDateTime.subtract({ hours: 12 }).toString())
+    await user.keyboard('{p}')
+    expect(getByTestId('value').textContent).toBe(calendarDateTime.toString())
+    await user.keyboard('{A}')
+    expect(getByTestId('value').textContent).toBe(calendarDateTime.subtract({ hours: 12 }).toString())
+    await user.keyboard('{P}')
+    expect(getByTestId('value').textContent).toBe(calendarDateTime.toString())
+  })
+
   it('fully overwrites on first click and type - `month`', async () => {
     const { user, month } = setup({
       dateFieldProps: {

diff --git a/packages/radix-vue/src/DateField/story/_DateField.vue b/packages/radix-vue/src/DateField/story/_DateField.vue
@@ -12,12 +12,14 @@ const props = defineProps<{ dateFieldProps?: DateFieldRootProps, emits?: { 'onUp
   <DateFieldRoot
     v-bind="props.dateFieldProps"
     id="date-field"
-    v-slot="{ segments }"
+    v-slot="{ segments, modelValue }"
     data-testid="input"
     v-on="{ 'update:modelValue': props.emits?.['onUpdate:modelValue'] }"
   >
     <DateFieldInput v-for="item in segments" :key="item.part" :part="item.part" :data-testid="item.part === 'literal' ? undefined : item.part">
       {{ item.value }}
     </DateFieldInput>
+
+    <span data-testid="value" tabindex="-1" disabled>{{ modelValue }}</span>
   </DateFieldRoot>
 </template>