test(switch): add tests for v-model + @change event

Author: codebender828

packages/chakra-ui-core/src/CSwitch/CSwitch.js

@@ -8,7 +8,7 @@
  * @see Source   https://github.com/chakra-ui/chakra-ui-vue/blob/master/packages/chakra-ui-core/src/CSwitch/CSwitch.js
  */
 
-import { forwardProps, extractListeners } from '../utils'
+import { forwardProps } from '../utils'
 
 import CBox from '../CBox'
 import CVisuallyHidden from '../CVisuallyHidden'
@@ -29,6 +29,15 @@ const switchSizes = {
   }
 }
 
+/** Emits events for functional components */
+const emitFunctionalEvent = (fn, ...args) => {
+  if (fn && typeof fn === 'function') {
+    fn(...args)
+  } else if (Array.isArray(fn)) {
+    fn.forEach(handler => typeof handler === 'function' && handler(...args))
+  }
+}
+
 /**
  * CSwitch component
  *
@@ -101,18 +110,14 @@ const CSwitch = {
       }
     }
 
-    // Events
-    const nonNativeEvents = {
+    const eventListeners = {
+      ...listeners,
       change: (e) => {
-        const emitChange = listeners.change
-        if (emitChange && typeof emitChange === 'function') {
-          emitChange(!props.isChecked)
-        }
+        const newValue = !props.isChecked
+        emitFunctionalEvent(listeners.change, newValue, e)
       }
     }
 
-    const { native, nonNative } = extractListeners({ listeners }, nonNativeEvents)
-
     return h(CBox, {
       ...rest,
       props: {
@@ -142,8 +147,7 @@ const CSwitch = {
           checked: props.isChecked,
           disabled: props.isDisabled
         },
-        on: nonNative,
-        nativeOn: native
+        on: eventListeners
       }),
       h(CControlBox, {
         attrs: styleProps

packages/chakra-ui-core/src/CSwitch/CSwitch.stories.js

@@ -44,3 +44,20 @@ storiesOf('UI | Switch', module)
       }
     }
   }))
+  .add('With v-model + @change', () => ({
+    components: { CBox, CSwitch },
+    data: () => ({
+      enable: false
+    }),
+    template: `
+      <p>
+        <span>{{enable}}</span>
+        <c-switch v-model="enable" id="email-alerts" @change="action"/>
+      </p>`,
+    methods: {
+      action: action('@change(event) + v-model'),
+      handleClick (e) {
+        console.log('Native event handler', e)
+      }
+    }
+  }))

packages/chakra-ui-core/src/CSwitch/tests/CSwitch.test.js

@@ -49,3 +49,29 @@ test('properly handles v-model', async () => {
 
   expect(screen.getByText('enabled')).toBeInTheDocument()
 })
+
+/**
+ * Because the CSwitch is a functional component, it
+ * handles event emission differently when the
+ * consumer uses both v-model and the @change
+ * event listener.
+ */
+it('should emit a change event when v-model + event listener are provided', async () => {
+  const onChange = jest.fn()
+  renderComponent({
+    data: () => ({
+      enable: false
+    }),
+    template: `
+      <div>
+        <span>{{enable ? 'enabled' : 'disabled'}}</span>
+        <CSwitch v-model="enable" data-testid="switch" @change="handleChange" />
+      </div>`,
+    methods: { handleChange: onChange }
+  })
+
+  expect(screen.getByText('disabled')).toBeInTheDocument()
+  await userEvent.click(screen.getByTestId('switch'))
+  expect(screen.getByText('enabled')).toBeInTheDocument()
+  expect(onChange).toHaveBeenCalledTimes(1)
+})

packages/chakra-ui-core/src/utils/vdom.js

@@ -127,7 +127,7 @@ export const extractListeners = (context, nonNative = {}) => {
 
   for (const listener in listeners) {
     if (!nonNative[listener]) {
-      native[listener] = listeners[listener]
+      nonNative[listener] = listeners[listener]
     }
   }