Stringify Attributes improvements (#104)

Author: TheJaredWilcurt

package-lock.json

@@ -1,7 +1,7 @@
 {
   "name": "vue3-snapshot-serializer",
   "type": "module",
-  "version": "2.7.1",
+  "version": "2.8.0",
   "description": "Vitest snapshot serializer for Vue 3 components",
   "main": "index.js",
   "scripts": {
@@ -29,8 +29,8 @@
     "eslint-config-tjw-jest": "^3.0.0",
     "eslint-config-tjw-jsdoc": "^2.0.1",
     "eslint-plugin-jest": "^28.11.0",
-    "eslint-plugin-jsdoc": "^50.6.3",
-    "happy-dom": "^17.4.3",
+    "eslint-plugin-jsdoc": "^50.6.6",
+    "happy-dom": "^17.4.4",
     "vitest": "^3.0.5"
   },
   "repository": {
@@ -57,6 +57,6 @@
   "homepage": "https://github.com/tjw-lint/vue3-snapshot-serializer#readme",
   "volta": {
     "node": "23.9.0",
-    "npm": "11.1.0"
+    "npm": "11.2.0"
   }
 }

package.json

@@ -173,11 +173,15 @@ export const stringify = function (obj) {
   let props = Object
     .keys(obj)
     .map((key) => {
-      return key + ':' + stringify(obj[key]);
+      if (obj[key] === undefined) {
+        return undefined;
+      }
+      return key + ': ' + stringify(obj[key]);
     })
-    .join(',');
+    .filter(Boolean)
+    .join(', ');
 
-  return '{' + props + '}';
+  return '{ ' + props + ' }';
 };
 
 /**

src/helpers.js

@@ -336,7 +336,7 @@ exports[`Cheerio Manipulation > Stringify attributes > Does not stringify attrib
 
 exports[`Cheerio Manipulation > Stringify attributes > Replaces attribute values including child components 1`] = `
 <div>
-  <h1 title="{x:'asdf'}">
+  <h1 title="{ x: 'asdf' }">
     Te
     <s>
       xt
@@ -348,7 +348,7 @@ exports[`Cheerio Manipulation > Stringify attributes > Replaces attribute values
     Text
   </strong>
 </p>
-<h2 title="{y:2}">
+<h2 title="{ y: 2 }">
   Words
 </h2>
 <div title="Function">
@@ -359,14 +359,14 @@ exports[`Cheerio Manipulation > Stringify attributes > Replaces attribute values
     stuff.
   </span>
 </div>
-<div title="{name:'bob'}">
+<div title="{ name: 'bob' }">
   bob
 </div>
 `;
 
 exports[`Cheerio Manipulation > Stringify attributes > Replaces attribute values with stubbed child component 1`] = `
 <div>
-  <h1 title="{x:'asdf'}">
+  <h1 title="{ x: 'asdf' }">
     Te
     <s>
       xt
@@ -378,7 +378,7 @@ exports[`Cheerio Manipulation > Stringify attributes > Replaces attribute values
     Text
   </strong>
 </p>
-<h2 title="{y:2}">
+<h2 title="{ y: 2 }">
   Words
 </h2>
 <div title="Function">
@@ -389,12 +389,12 @@ exports[`Cheerio Manipulation > Stringify attributes > Replaces attribute values
     stuff.
   </span>
 </div>
-<span person="{name:'bob'}"></span>
+<span person="{ name: 'bob' }"></span>
 `;
 
 exports[`Cheerio Manipulation > Stringify attributes > Replaces prop values on children in shallow mounts 1`] = `
 <div>
-  <h1 title="{x:'asdf'}">
+  <h1 title="{ x: 'asdf' }">
     Te
     <s>
       xt
@@ -406,7 +406,7 @@ exports[`Cheerio Manipulation > Stringify attributes > Replaces prop values on c
     Text
   </strong>
 </p>
-<h2 title="{y:2}">
+<h2 title="{ y: 2 }">
   Words
 </h2>
 <div title="Function">
@@ -417,5 +417,5 @@ exports[`Cheerio Manipulation > Stringify attributes > Replaces prop values on c
     stuff.
   </span>
 </div>
-<stringify-props-stub person="{name:'bob'}"></stringify-props-stub>
+<stringify-props-stub person="{ name: 'bob' }"></stringify-props-stub>
 `;

tests/unit/src/__snapshots__/cheerioManipulation.test.js.snap

@@ -20,7 +20,7 @@ exports[`TestingLibrary > Container > Contents change after toggle button clicke
       type="checkbox"
       value="'on'"
     />
-    <h1 title="{available:false}">
+    <h1 title="{ available: false }">
       Unavailable
     </h1>
   </div>
@@ -39,7 +39,7 @@ exports[`TestingLibrary > Container > Renders default contents 1`] = `
       type="checkbox"
       value="'on'"
     />
-    <h1 title="{available:true}">
+    <h1 title="{ available: true }">
       Available
     </h1>
   </div>
@@ -57,7 +57,7 @@ exports[`TestingLibrary > Wrapper > Contents change after toggle button clicked
     type="checkbox"
     value="'on'"
   />
-  <h1 title="{available:false}">
+  <h1 title="{ available: false }">
     Unavailable
   </h1>
 </div>
@@ -74,7 +74,7 @@ exports[`TestingLibrary > Wrapper > Renders default contents 1`] = `
     type="checkbox"
     value="'on'"
   />
-  <h1 title="{available:true}">
+  <h1 title="{ available: true }">
     Available
   </h1>
 </div>

tests/unit/src/__snapshots__/testingLibrary.test.js.snap

@@ -168,12 +168,14 @@ describe('Helpers', () => {
     test('Object', () => {
       const obj = {
         subValue: {
-          key: '2'
+          a: '2',
+          b: undefined,
+          c: 3
         }
       };
 
       expect(stringify(obj))
-        .toEqual('{subValue:{key:"2"}}');
+        .toEqual('{ subValue: { a: "2", c: 3 } }');
     });
   });