feat: attempt at unified stateful test

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
+}

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 },

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>
 

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 },