From 1ed7d1fd6604692111eb66ff65e1d0d45b6d022b Mon Sep 17 00:00:00 2001
From: Yauheni Prakopchyk <yauheni.prakopchyk@epicmax.co>
Date: Tue, 7 May 2024 23:03:28 +0400
Subject: [PATCH] feat: attempt at unified stateful test

---
 .../useStateful-template.ts                   | 47 +++++++++++++++++++
 .../va-checkbox/VaCheckbox.stories.ts         | 16 +++----
 .../components/va-switch/VaSwitch.demo.vue    |  6 ---
 .../components/va-switch/VaSwitch.stories.ts  |  9 ++++
 4 files changed, 63 insertions(+), 15 deletions(-)
 create mode 100644 packages/ui/.storybook/composable-templates/useStateful-template.ts

diff --git a/packages/ui/.storybook/composable-templates/useStateful-template.ts b/packages/ui/.storybook/composable-templates/useStateful-template.ts
new file mode 100644
index 0000000000..24e4def691
--- /dev/null
+++ b/packages/ui/.storybook/composable-templates/useStateful-template.ts
@@ -0,0 +1,47 @@
+import { DefineComponent } from 'vue'
+import { getStoryId } from '../interaction-utils/storySelector'
+import { expect } from '@storybook/jest'
+import { StoryFn } from '@storybook/vue3'
+
+export const UseStatefulTemplate = (
+  component: Record<string, DefineComponent>,
+  input: (el: HTMLElement) => void = el => el.click(),
+  defaultValue = false
+): StoryFn => {
+  const story = () => ({
+    setup () {
+      return {
+        component,
+        defaultValue,
+      }
+    },
+    template: `
+    <p>[true]</p>
+    <component
+      data-testid="true"
+      :is="component"
+      :stateful="defaultValue === true ? undefined : true"
+    />
+
+    <p>[false]</p>
+    <component
+      data-testid="false"
+      :is="component"
+      :stateful="defaultValue === false ? undefined : false"
+    />
+  `,
+  })
+  story.play = async () => {
+    /**
+     * To test stateful we need to test 2 things:
+     * * On user input for stateful="true" - there should be change
+     * * On user input for stateful="false" - there should be no change
+     */
+    input(getStoryId('true'))
+    input(getStoryId('false'))
+
+    // We rely on visual tests here
+    expect(true).toBe(true)
+  }
+  return story
+}
diff --git a/packages/ui/src/components/va-checkbox/VaCheckbox.stories.ts b/packages/ui/src/components/va-checkbox/VaCheckbox.stories.ts
index 9a5f569e31..efd141c532 100644
--- a/packages/ui/src/components/va-checkbox/VaCheckbox.stories.ts
+++ b/packages/ui/src/components/va-checkbox/VaCheckbox.stories.ts
@@ -1,6 +1,9 @@
 import { VaCheckbox } from './'
 import { VaButton } from '../va-button'
 import { defineStory } from '../../../.storybook/types'
+import {
+  UseStatefulTemplate,
+} from '../../../.storybook/composable-templates/useStateful-template'
 
 export default {
   title: 'VaCheckbox',
@@ -16,15 +19,10 @@ export const Default = () => ({
   `,
 })
 
-export const Stateful = () => ({
-  components: { VaCheckbox },
-  template: `
-    [true]
-    <VaCheckbox stateful/>
-    [false]
-    <VaCheckbox :stateful="false"/>
-  `,
-})
+export const Stateful = UseStatefulTemplate(
+  VaCheckbox,
+  (el) => (el.children[0] as HTMLInputElement).click(), // Clicking on checkbox container doesn't change value. see #4187
+)
 
 export const Color = () => ({
   components: { VaCheckbox },
diff --git a/packages/ui/src/components/va-switch/VaSwitch.demo.vue b/packages/ui/src/components/va-switch/VaSwitch.demo.vue
index 31e584fa6a..b9ef5e3941 100644
--- a/packages/ui/src/components/va-switch/VaSwitch.demo.vue
+++ b/packages/ui/src/components/va-switch/VaSwitch.demo.vue
@@ -207,12 +207,6 @@
         indeterminate-value="middle"
       />
     </VbCard>
-    <VbCard title="Stateless switch without v-model">
-      <va-switch />
-    </VbCard>
-    <VbCard title="Stateful">
-      <va-switch stateful />
-    </VbCard>
   </VbDemo>
 </template>
 
diff --git a/packages/ui/src/components/va-switch/VaSwitch.stories.ts b/packages/ui/src/components/va-switch/VaSwitch.stories.ts
index 784309e16b..0fb1745286 100644
--- a/packages/ui/src/components/va-switch/VaSwitch.stories.ts
+++ b/packages/ui/src/components/va-switch/VaSwitch.stories.ts
@@ -3,6 +3,10 @@ import { defineComponent } from 'vue'
 import VaSwitchDemo from './VaSwitch.demo.vue'
 import VaSwitch from './VaSwitch.vue'
 import { defineStory } from '../../../.storybook/types'
+import { expect } from '@storybook/jest'
+import {
+  UseStatefulTemplate,
+} from '../../../.storybook/composable-templates/useStateful-template'
 
 export default {
   title: 'VaSwitch',
@@ -14,6 +18,11 @@ export const Default = () => defineComponent({
   template: '<VaSwitch/>',
 })
 
+export const Stateful = UseStatefulTemplate(
+  VaSwitch,
+  el => (el.children[0].children[0].children[0] as HTMLInputElement).click(), // Clicking on checkbox container doesn't change value. see #4187
+)
+
 export const ChangeEvent = defineStory({
   story: () => ({
     components: { VaSwitch },