Checkbox and radios checked (#88)

Author: TheJaredWilcurt

.github/PULL_REQUEST_TEMPLATE.md

@@ -11,5 +11,6 @@ Related to issue #0
 **Checklist:**
 
 * [ ] Update dependencies
+* [ ] Run `volta pin node@latest && volta pin npm@latest` 
 * [ ] Bump
 * [ ] If API changed, update `types.js`

package-lock.json

@@ -1,7 +1,7 @@
 {
   "name": "vue3-snapshot-serializer",
   "type": "module",
-  "version": "2.3.0",
+  "version": "2.4.0",
   "description": "Vitest snapshot serializer for Vue 3 components",
   "main": "index.js",
   "scripts": {

package.json

@@ -90,6 +90,9 @@ const addInputValues = function ($, vueWrapper) {
       const vnode = vueWrapper.find('[' + KEY_NAME + '="' + currentKey + '"]');
       const value = vnode.element.value;
       element.attribs.value = swapQuotes(stringify(value));
+      if (['checkbox', 'radio'].includes(element.attribs.type)) {
+        element.attribs.checked = String(vnode.element.checked);
+      }
     });
   }
 };

src/cheerioManipulation.js

@@ -0,0 +1,24 @@
+<template>
+  <div>
+    <input v-model="on" type="checkbox">
+    <input v-model="off" type="checkbox">
+    <fieldset>
+      <input v-model="animal" type="radio" name="animal" value="cat">
+      <input v-model="animal" type="radio" name="animal" value="cow">
+      <input v-model="animal" type="radio" name="animal" value="dog">
+    </fieldset>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'CheckboxesAndRadios',
+  data: function () {
+    return {
+      on: true,
+      off: false,
+      animal: 'cow'
+    };
+  }
+};
+</script>

tests/mockComponents/CheckboxesAndRadios.vue

@@ -3,6 +3,7 @@ import { mount } from '@vue/test-utils';
 import { cheerioManipulation } from '@/cheerioManipulation.js';
 
 import DataVId from '@@/mockComponents/DataVId.vue';
+import CheckboxesAndRadios from '@@/mockComponents/CheckboxesAndRadios.vue';
 import EmbeddedStyles from '@@/mockComponents/EmbeddedStyles.vue';
 import InlineFunctions from '@@/mockComponents/InlineFunctions.vue';
 import SeveralInputs from '@@/mockComponents/SeveralInputs.vue';
@@ -233,6 +234,47 @@ describe('Cheerio Manipulation', () => {
       expect(wrapper)
         .toMatchSnapshot();
     });
+
+    test('Checkboxes and radios', async () => {
+      const wrapper = await mount(CheckboxesAndRadios);
+      globalThis.vueSnapshots.addInputValues = true;
+
+      expect(wrapper)
+        .toMatchInlineSnapshot(`
+          <div>
+            <input
+              checked="true"
+              type="checkbox"
+              value="'on'"
+            />
+            <input
+              checked="false"
+              type="checkbox"
+              value="'on'"
+            />
+            <fieldset>
+              <input
+                checked="false"
+                name="animal"
+                type="radio"
+                value="'cat'"
+              />
+              <input
+                checked="true"
+                name="animal"
+                type="radio"
+                value="'cow'"
+              />
+              <input
+                checked="false"
+                name="animal"
+                type="radio"
+                value="'dog'"
+              />
+            </fieldset>
+          </div>
+        `);
+    });
   });
 
   describe('Stringify attributes', () => {