fix: chromatic screenshots tests status (#4481)

Co-authored-by: TFX-98 <[email protected]>

Author: TFX-98

packages/ui/src/components/va-date-picker/VaDatePicker.demo.vue

@@ -16,18 +16,6 @@
       <va-date-picker mode="multiple" v-model="dates" />
     </VbCard>
 
-    <VbCard title="statefull">
-      <va-date-picker stateful />
-    </VbCard>
-
-    <VbCard title="readonly">
-      <va-date-picker readonly v-model:view="currentMonthDayView" />
-    </VbCard>
-
-    <VbCard title="without value">
-      <va-date-picker />
-    </VbCard>
-
     <VbCard title="weekday names">
       <va-date-picker v-model="value" :weekdayNames="['SUN', 'MON', 'TUE', 'WED', 'THU', 'FRI', 'SAT']" />
     </VbCard>
@@ -188,7 +176,6 @@ export default {
 
       dayView: { type: 'day', month: 6, year: 2020 } satisfies DatePickerViewProp,
       monthView: { type: 'month' } satisfies DatePickerViewProp,
-      currentMonthDayView: { type: 'day', month: new Date().getMonth(), year: new Date().getFullYear() } satisfies DatePickerViewProp,
       yearView: { type: 'year' } satisfies DatePickerViewProp,
     }
   },

packages/ui/src/components/va-date-picker/VaDatePicker.stories.ts

@@ -1,36 +1,111 @@
+import { StoryFn } from '@storybook/vue3'
+import { userEvent } from '@storybook/testing-library'
+import { expect } from '@storybook/jest'
 import VaDatePickerDemo from './VaDatePicker.demo.vue'
 import VaDatePicker from './VaDatePicker.vue'
-import { StoryFn } from '@storybook/vue3'
 
 export default {
   title: 'VaDatePicker',
   component: VaDatePicker,
+  tags: ['autodocs'],
 }
 
 export const Default: StoryFn = () => ({
   components: { VaDatePickerDemo },
   template: '<VaDatePickerDemo />',
 })
 
-export const firstWeekDay: StoryFn = () => ({
+export const WithoutValue: StoryFn = () => ({
+  components: { VaDatePicker },
+  template: '<VaDatePicker />',
+})
+WithoutValue.parameters = { chromatic: { disableSnapshot: true } } // Disable Chromatic snapshots to prevent visual test failures due to current date changes.
+
+export const Stateful: StoryFn = () => ({
+  components: { VaDatePicker },
+  template: '<VaDatePicker stateful />',
+})
+Stateful.parameters = { chromatic: { disableSnapshot: true } }
+
+export const Readonly: StoryFn = () => ({
+  components: { VaDatePicker },
+  template: '<VaDatePicker readonly />',
+})
+Readonly.parameters = { chromatic: { disableSnapshot: true } } // Disable Chromatic snapshots to prevent visual test failures due to current date changes.
+
+export const View: StoryFn = () => ({
   components: { VaDatePicker },
+
+  data: () => ({
+    dayView: {
+      type: 'day',
+      month: new Date().getMonth(),
+      year: new Date().getFullYear(),
+    },
+    monthView: {
+      type: 'month',
+      month: new Date().getMonth(),
+      year: new Date().getFullYear(),
+    },
+    yearView: {
+      type: 'year',
+      month: new Date().getMonth(),
+      year: new Date().getFullYear(),
+    },
+  }),
   template: `
-  <VaDatePicker firstWeekday="sunday"/>
-  <VaDatePicker firstWeekday="monday"/>
+  <VaDatePicker readonly v-model:view="dayView" />
+  <VaDatePicker readonly v-model:view="monthView" />
+  <VaDatePicker readonly v-model:view="yearView" />
   `,
 })
+View.parameters = { chromatic: { disableSnapshot: true } } // Disable Chromatic snapshots to prevent visual test failures due to current date changes.
 
-export const Range = () => ({
+export const FirstWeekDay: StoryFn = () => ({
   components: { VaDatePicker },
+  template: `
+    <VaDatePicker firstWeekday="sunday"/>
+    <VaDatePicker firstWeekday="monday"/>
+  `,
+})
+FirstWeekDay.parameters = { chromatic: { disableSnapshot: true } } // Disable Chromatic snapshots to prevent visual test failures due to current date changes.
 
-  data () {
-    return {
-      value: { start: new Date('2020-01-01T00:00:00.000Z'), end: new Date('2020-01-02T00:00:00.000Z') },
-    }
-  },
-
+export const Range: StoryFn = () => ({
+  components: { VaDatePicker },
+  data: () => ({
+    value: {
+      start: new Date('2020-01-01T00:00:00.000Z'),
+      end: new Date('2020-01-02T00:00:00.000Z'),
+    },
+  }),
   template: `
-  {{ value }}
-  <VaDatePicker v-model="value" />
+    {{ value }}
+    <VaDatePicker v-model="value" />
   `,
 })
+
+Range.play = async ({ step, canvasElement }) => {
+  const datePicker = canvasElement.querySelector('.va-date-picker')
+  expect(datePicker).toBeVisible()
+
+  await step('Click on the date picker to open', async () => {
+    await userEvent.click(datePicker!)
+  })
+
+  await step('Select a start date', async () => {
+    const startDate = canvasElement.querySelectorAll(
+      '.va-date-picker-cell',
+    )[10]
+    await userEvent.click(startDate!)
+  })
+
+  await step('Select an end date', async () => {
+    const endDate = canvasElement.querySelectorAll('.va-date-picker-cell')[15]
+    await userEvent.click(endDate!)
+  })
+
+  const selectedDates = canvasElement.querySelectorAll(
+    '.va-date-picker-cell_selected',
+  )
+  expect(selectedDates.length).toBeGreaterThan(1)
+}