@wildpeaks/snapshot-dom - npm Package Compare versions

Comparing version 1.3.0 to 1.4.0

package.json

 {
   "name": "@wildpeaks/snapshot-dom",
-  "version": "1.3.0",
+  "version": "1.4.0",
   "description": "Converts a DOM element to a JSON tree",
+  "author": "Cecile Muller",
+  "license": "MIT",
+  "eslintConfig": {
+    "extends": "@wildpeaks/commonjs"
+  },
   "main": "src/snapshot.js",
@@ -11,3 +16,5 @@ "files": [
   "scripts": {
-    "test": "mocha"
+    "test:lint": "eslint ./src/**/*.js",
+    "test:specs": "mocha",
+    "test": "npm run test:lint && npm run test:specs"
   },
@@ -23,4 +30,2 @@ "repository": {
   ],
-  "author": "Cecile Muller",
-  "license": "MIT",
   "bugs": {
@@ -31,5 +36,7 @@ "url": "https://github.com/wildpeaks/package-snapshot-dom/issues"
   "devDependencies": {
+    "@wildpeaks/eslint-config-commonjs": "6.2.0",
+    "eslint": "6.1.0",
     "jsdom": "15.1.1",
-    "mocha": "6.1.4"
+    "mocha": "6.2.0"
   }
 }

README.md

@@ -11,34 +11,83 @@ # Snapshot
 
-	document.body.innerHTML = '<div class="class1"><div class="class2"></div><p>Hello World</p></div>';
+````js
+document.body.innerHTML = '<div class="class1"><div class="class2"></div><p>Hello World</p></div>';
 
-	assert.deepStrictEqual(
-		snapshot.toJSON(document.body),
-		{
-			tagName: 'body',
-			childNodes: [
-				{
-					tagName: 'div',
-					attributes: {
-						class: 'class1'
+assert.deepStrictEqual(
+	snapshot.toJSON(document.body),
+	{
+		tagName: 'body',
+		childNodes: [
+			{
+				tagName: 'div',
+				attributes: {
+					class: 'class1'
+				},
+				childNodes: [
+					{
+						tagName: 'div',
+						attributes: {
+							class: 'class2'
+						}
 					},
-					childNodes: [
-						{
-							tagName: 'div',
-							attributes: {
-								class: 'class2'
+					{
+						tagName: 'p',
+						childNodes: [
+							{
+								nodeName: '#text',
+								nodeValue: 'Hello World'
 							}
-						},
-						{
-							tagName: 'p',
-							childNodes: [
-								{
-									nodeName: '#text',
-									nodeValue: 'Hello World'
-								}
-							]
-						}
-					]
+						]
+					}
+				]
+			}
+		]
+	}
+);
+````
+
+---
+## Skip empty values
+
+It can optionally exclude empty values using the second parameter (default: `false`).
+
+
+````js
+document.body.innerHTML = '<img param1 param2="" param3="hello" />;
+
+// Without skipping
+assert.deepStrictEqual(
+	snapshot.toJSON(document.body, false),
+	{
+		tagName: 'body',
+		childNodes: [
+			{
+				tagName: 'img',
+				attributes: {
+					param1: '',
+					param2: '',
+					param3: 'hello'
 				}
-			]
-		}
-	);
+			}
+		]
+	}
+);
+
+// With skipping
+assert.deepStrictEqual(
+	snapshot.toJSON(document.body, true),
+	{
+		tagName: 'body',
+		childNodes: [
+			{
+				tagName: 'img',
+				attributes: {
+					param3: 'hello'
+				}
+			}
+		]
+	}
+);
+````
+
+Note that strings containing only whitespace are not empty.
+

src/snapshot.js

@@ -7,5 +7,6 @@ 'use strict';
  * @param  {Node} node
+ * @param  {Boolean} skipEmpty Skips node values that evaluate to false (undefined and empty strings)
  * @return {Object}
  */
-function toJSON(node){
+function toJSON(node, skipEmpty){
 	const serialized = {};
@@ -32,3 +33,6 @@ const isValid = (typeof node === 'object') && (node !== null);
 					const attr = attrs[i];
-					aggregated[attr.nodeName] = attr.nodeValue;
+					const skip = skipEmpty && !attr.nodeValue;
+					if (!skip){
+						aggregated[attr.nodeName] = attr.nodeValue;
+					}
 				}
@@ -39,3 +43,3 @@ serialized.attributes = aggregated;
 
-		const childNodes = node.childNodes;
+		const {childNodes} = node;
 		if (childNodes){
@@ -45,4 +49,4 @@ const l = childNodes.length;
 				const aggregated = new Array(l);
-				for (let i = 0; i < l; i++) {
-					aggregated[i] = toJSON(childNodes[i]);
+				for (let i = 0; i < l; i++){
+					aggregated[i] = toJSON(childNodes[i], skipEmpty);
 				}
@@ -49,0 +53,0 @@ serialized.childNodes = aggregated;

test/snapshot.tests.js

@@ -1,3 +0,5 @@
-/* eslint-env mocha */
-const assert = require('assert');
+/* eslint-env node, mocha */
+/* global document */
+'use strict';
+const {deepStrictEqual} = require('assert');
 const {JSDOM} = require('jsdom');
@@ -16,21 +18,21 @@ const snapshot = require('..');
 	it('Missing element', () => {
-		assert.deepStrictEqual(snapshot.toJSON(), {});
+		deepStrictEqual(snapshot.toJSON(), {});
 	});
 	it('Invalid element (0)', () => {
-		assert.deepStrictEqual(snapshot.toJSON(0), {});
+		deepStrictEqual(snapshot.toJSON(0), {});
 	});
 	it('Invalid element (1)', () => {
-		assert.deepStrictEqual(snapshot.toJSON(1), {});
+		deepStrictEqual(snapshot.toJSON(1), {});
 	});
 	it('Invalid element (false)', () => {
-		assert.deepStrictEqual(snapshot.toJSON(false), {});
+		deepStrictEqual(snapshot.toJSON(false), {});
 	});
 	it('Invalid element (true)', () => {
-		assert.deepStrictEqual(snapshot.toJSON(true), {});
+		deepStrictEqual(snapshot.toJSON(true), {});
 	});
 	it('Invalid element (null)', () => {
-		assert.deepStrictEqual(snapshot.toJSON(null), {});
+		deepStrictEqual(snapshot.toJSON(null), {});
 	});
 	it('Invalid element (undefined)', () => {
-		assert.deepStrictEqual(snapshot.toJSON(undefined), {}); // eslint-disable-line no-undefined
+		deepStrictEqual(snapshot.toJSON(undefined), {}); // eslint-disable-line no-undefined
 	});
@@ -40,3 +42,3 @@
 		document.body.innerHTML = '';
-		assert.deepStrictEqual(
+		deepStrictEqual(
 			snapshot.toJSON(document.body),
@@ -51,3 +53,3 @@ {
 		document.body.innerHTML = '<p class="test1"></p>';
-		assert.deepStrictEqual(
+		deepStrictEqual(
 			snapshot.toJSON(document.body),
@@ -71,3 +73,3 @@ {
 		element.className = 'test2';
-		assert.deepStrictEqual(
+		deepStrictEqual(
 			snapshot.toJSON(element),
@@ -85,3 +87,3 @@ {
 		document.body.innerHTML = '<div class="outer"><div class="inner"></div><p></p></div>';
-		assert.deepStrictEqual(
+		deepStrictEqual(
 			snapshot.toJSON(document.body),
@@ -115,3 +117,3 @@ {
 		document.body.innerHTML = '<p>Hello World</p>';
-		assert.deepStrictEqual(
+		deepStrictEqual(
 			snapshot.toJSON(document.body),
@@ -137,3 +139,3 @@ {
 		document.body.innerHTML = '<button role="heading" style="color: green">Search</button>';
-		assert.deepStrictEqual(
+		deepStrictEqual(
 			snapshot.toJSON(document.body),
@@ -163,3 +165,3 @@ {
 		document.body.innerHTML = '<div class="AAA" class="ZZZ"></div>';
-		assert.deepStrictEqual(
+		deepStrictEqual(
 			snapshot.toJSON(document.body),
@@ -181,3 +183,3 @@ {
 		document.body.innerHTML = '<div class="ZZZ" class="AAA"></div>';
-		assert.deepStrictEqual(
+		deepStrictEqual(
 			snapshot.toJSON(document.body),
@@ -197,2 +199,64 @@ {
 	});
+
+	it('Empty attributes (default behavior)', () => {
+		document.body.innerHTML = '<img data-param1 data-param2="" data-param3="  " data-param4="false" data-param5=false />';
+		deepStrictEqual(
+			snapshot.toJSON(document.body),
+			{
+				tagName: 'body',
+				childNodes: [
+					{
+						tagName: 'img',
+						attributes: {
+							'data-param1': '',
+							'data-param2': '',
+							'data-param3': '  ',
+							'data-param4': 'false',
+							'data-param5': 'false'
+						}
+					}
+				]
+			}
+		);
+	});
+	it('Empty attributes (skip: false)', () => {
+		document.body.innerHTML = '<img data-param1 data-param2="" data-param3="  " data-param4="false" data-param5=false />';
+		deepStrictEqual(
+			snapshot.toJSON(document.body, false),
+			{
+				tagName: 'body',
+				childNodes: [
+					{
+						tagName: 'img',
+						attributes: {
+							'data-param1': '',
+							'data-param2': '',
+							'data-param3': '  ',
+							'data-param4': 'false',
+							'data-param5': 'false'
+						}
+					}
+				]
+			}
+		);
+	});
+	it('Empty attributes (skip: true)', () => {
+		document.body.innerHTML = '<img data-param1 data-param2="" data-param3="  " data-param4="false" data-param5=false />';
+		deepStrictEqual(
+			snapshot.toJSON(document.body, true),
+			{
+				tagName: 'body',
+				childNodes: [
+					{
+						tagName: 'img',
+						attributes: {
+							'data-param3': '  ',
+							'data-param4': 'false',
+							'data-param5': 'false'
+						}
+					}
+				]
+			}
+		);
+	});
 });

Fixed alerts

New author

Supply chain risk

A new npm collaborator published a version of the package for the first time. New collaborators are usually benign additions to a project, but do indicate a change to the security surface area of a package.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

9915

increased by33.61%

Lines of code

291

increased by29.91%

Number of lines in readme file

93

increased by111.36%

Number of medium supply chain risk alerts

0

decreased by-100%

Worsened metrics

Dev dependency count

4

increased by100%

No dependency changes