From 0849093020ae18004543f99b0ec0bf1209296928 Mon Sep 17 00:00:00 2001
From: iNSaNiA0821 <shinjisakai821@gmail.com>
Date: Fri, 27 Dec 2024 20:29:20 +0200
Subject: [PATCH] chore: add VDatePicker vitest file(#20517)

---
 .../__tests__/VDatePicker.spec.browser.tsx    | 56 +++++++++++++++++++
 .../__tests__/VDatePicker.spec.cy.tsx         | 43 --------------
 2 files changed, 56 insertions(+), 43 deletions(-)
 create mode 100644 packages/vuetify/src/components/VDatePicker/__tests__/VDatePicker.spec.browser.tsx
 delete mode 100644 packages/vuetify/src/components/VDatePicker/__tests__/VDatePicker.spec.cy.tsx

diff --git a/packages/vuetify/src/components/VDatePicker/__tests__/VDatePicker.spec.browser.tsx b/packages/vuetify/src/components/VDatePicker/__tests__/VDatePicker.spec.browser.tsx
new file mode 100644
index 00000000000..f7ba3f81083
--- /dev/null
+++ b/packages/vuetify/src/components/VDatePicker/__tests__/VDatePicker.spec.browser.tsx
@@ -0,0 +1,56 @@
+// Components
+import { VDatePicker } from '..'
+
+// Utilities
+import { render, screen } from '@test'
+import { fireEvent, waitFor } from '@testing-library/vue'
+import { ref } from 'vue'
+
+describe('VDatePicker', () => {
+  const selectDay = async (dayIndex: number, buttonClass = '.v-date-picker-month__day-btn') => {
+    const days = screen.getAllByCSS(buttonClass)
+    const dayButton = days[dayIndex]
+    await fireEvent.click(dayButton)
+  }
+
+  const selectMonth = async (monthName: string) => {
+    const monthButton = screen.getByCSS('.v-date-picker-controls__month-btn')
+    await fireEvent.click(monthButton)
+    const month = screen.getByText(monthName, { exact: false })
+    await fireEvent.click(month)
+  }
+
+  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 selectDay(10)
+    await selectDay(20)
+
+    await waitFor(() => {
+      expect(model.value).toHaveLength(11) // Expect a 11-day range to be selected
+    })
+  })
+
+  it('selects a range of dates across month boundary', async () => {
+    const model = ref<unknown[]>([])
+    render(() => (
+      <VDatePicker v-model={ model.value } multiple="range" />
+    ))
+
+    // Select day 7 in January
+    await selectMonth('Jan')
+    await selectDay(7)
+
+    // Switch to February and select day 7
+    await selectMonth('Feb')
+    await selectDay(7)
+
+    await waitFor(() => {
+      expect(model.value).toHaveLength(32) // Expect a 32-day range spanning across two months
+    })
+  })
+})
diff --git a/packages/vuetify/src/components/VDatePicker/__tests__/VDatePicker.spec.cy.tsx b/packages/vuetify/src/components/VDatePicker/__tests__/VDatePicker.spec.cy.tsx
deleted file mode 100644
index 9d328f6133d..00000000000
--- a/packages/vuetify/src/components/VDatePicker/__tests__/VDatePicker.spec.cy.tsx
+++ /dev/null
@@ -1,43 +0,0 @@
-/// <reference types="../../../../types/cypress" />
-
-import { VDatePicker } from '..'
-import { Application } from '@/../cypress/templates'
-
-// Utilities
-import { ref } from 'vue'
-
-describe('VDatePicker', () => {
-  it('selects a range of dates', () => {
-    const model = ref<unknown[]>([])
-    cy.mount(() => (
-      <Application>
-        <VDatePicker v-model={ model.value } multiple="range" />
-      </Application>
-    ))
-
-    cy.get('.v-date-picker-month__day').contains(10).click()
-    cy.get('.v-date-picker-month__day').contains(20).click()
-      .then(() => {
-        expect(model.value).to.have.length(11)
-      })
-  })
-
-  it('selects a range of dates across month boundary', () => {
-    const model = ref<unknown[]>([])
-    cy.mount(() => (
-      <Application>
-        <VDatePicker v-model={ model.value } multiple="range" />
-      </Application>
-    ))
-
-    cy.get('.v-date-picker-controls__month-btn').click()
-    cy.get('.v-date-picker-months__content').contains('Jan').click()
-    cy.get('.v-date-picker-month__day').contains(7).click()
-    cy.get('.v-date-picker-controls__month-btn').click()
-    cy.get('.v-date-picker-months__content').contains('Feb').click()
-    cy.get('.v-date-picker-month__day').contains(7).click()
-      .then(() => {
-        expect(model.value).to.have.length(32)
-      })
-  })
-})