chore(VDatePicker): update cypress tests to vitest (#20810)

Co-authored-by: Kael <[email protected]>

Author: iNSaNiA0821

packages/vuetify/src/components/VDatePicker/VDatePickerControls.tsx

@@ -104,6 +104,7 @@ export const VDatePickerControls = genericComponent()({
         >
           <VBtn
             class="v-date-picker-controls__month-btn"
+            data-testid="month-btn"
             disabled={ disableMonth.value }
             text={ props.text }
             variant="text"
@@ -112,29 +113,28 @@ export const VDatePickerControls = genericComponent()({
           ></VBtn>
 
           <VBtn
-            key="mode-btn"
             class="v-date-picker-controls__mode-btn"
+            data-testid="year-btn"
             disabled={ disableYear.value }
             density="comfortable"
             icon={ props.modeIcon }
             variant="text"
             onClick={ onClickYear }
           />
 
-          <VSpacer key="mode-spacer" />
+          <VSpacer />
 
-          <div
-            key="month-buttons"
-            class="v-date-picker-controls__month"
-          >
+          <div class="v-date-picker-controls__month">
             <VBtn
+              data-testid="prev-month"
               disabled={ disablePrev.value }
               icon={ props.prevIcon }
               variant="text"
               onClick={ onClickPrev }
             />
 
             <VBtn
+              data-testid="next-month"
               disabled={ disableNext.value }
               icon={ props.nextIcon }
               variant="text"

packages/vuetify/src/components/VDatePicker/__tests__/VDatePicker.spec.browser.tsx

@@ -0,0 +1,43 @@
+// Components
+import { VDatePicker } from '..'
+
+// Utilities
+import { render, screen, userEvent } from '@test'
+import { ref } from 'vue'
+
+describe('VDatePicker', () => {
+  it('selects a range of dates', async () => {
+    const model = ref<unknown[]>([])
+    render(() => (
+      <VDatePicker v-model={ model.value } multiple="range" />
+    ))
+
+    // Select two days in the same month (e.g., 10th and 20th)
+    await userEvent.click(await screen.findByText(10))
+    await userEvent.click(await screen.findByText(20))
+
+    // Expect a 11-day range to be selected
+    await expect.poll(() => model.value).toHaveLength(11)
+  })
+
+  it('selects a range of dates across month boundary', async () => {
+    const model = ref<unknown[]>([])
+    render(() => (
+      <VDatePicker v-model={ model.value } multiple="range" />
+    ))
+
+    // Select 2025-01-07
+    await userEvent.click(await screen.findByTestId('year-btn'))
+    await userEvent.click(await screen.findByText('2025'))
+    await userEvent.click(await screen.findByTestId('month-btn'))
+    await userEvent.click(await screen.findByText('Jan'))
+    await userEvent.click(await screen.findByText(7))
+
+    // Select 2025-02-07
+    await userEvent.click(await screen.findByTestId('next-month'))
+    await userEvent.click(await screen.findByText(7))
+
+    // Expect a 32-day range spanning across two months
+    await expect.poll(() => model.value).toHaveLength(32)
+  })
+})