Add regexToRemoveAttributes feature

Author: TheJaredWilcurt

package-lock.json

@@ -1,7 +1,7 @@
 {
   "name": "vue3-snapshot-serializer",
   "type": "module",
-  "version": "2.10.0",
+  "version": "2.11.0",
   "description": "Vitest snapshot serializer for Vue 3 components",
   "main": "index.js",
   "scripts": {
@@ -19,20 +19,20 @@
     "js-beautify": "^1.15.3"
   },
   "devDependencies": {
-    "@eslint/js": "^9.27.0",
+    "@eslint/js": "^9.28.0",
     "@stylistic/eslint-plugin": "^4.4.0",
     "@testing-library/user-event": "^14.6.1",
     "@testing-library/vue": "^8.1.0",
     "@vitejs/plugin-vue": "^5.2.4",
     "@vitest/coverage-v8": "^3.1.4",
     "@vue/test-utils": "^2.4.6",
-    "eslint": "^9.27.0",
+    "eslint": "^9.28.0",
     "eslint-config-tjw-base": "^4.2.0",
     "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.17",
-    "happy-dom": "^17.4.7",
+    "eslint-plugin-jest": "^28.12.0",
+    "eslint-plugin-jsdoc": "^50.7.0",
+    "happy-dom": "^17.5.6",
     "vitest": "^3.1.4"
   },
   "repository": {

package.json

@@ -263,6 +263,25 @@ const stringifyAttributes = function ($, vueWrapper) {
   }
 };
 
+/**
+ * Tests every attribute on every element to see if it matches the provided regex.
+ * If it is a match, remove the attribute from the snapshot.
+ *
+ * @param {object} $  The markup as a cheerio object
+ */
+const removeAttributesViaRegex = function ($) {
+  if (globalThis.vueSnapshots?.regexToRemoveAttributes) {
+    debugLogger({ function: 'cheerioManipulation.js:removeAttributesViaRegex' });
+    $('*').each(function (index, element) {
+      Object.keys(element.attribs).forEach(function (attributeName) {
+        if (globalThis.vueSnapshots?.regexToRemoveAttributes.test(attributeName)) {
+          $(element).removeAttr(attributeName);
+        }
+      });
+    });
+  }
+};
+
 /**
  * This removes data-v-1234abcd="" from your snapshots.
  *
@@ -504,6 +523,7 @@ export const cheerioManipulation = function (vueWrapper) {
   stringifyAttributes($, vueWrapper);
   // Uses CSS Selectors, so must run before test tokens are removed
   stubOutDom($);
+  removeAttributesViaRegex($);
   removeServerRenderedText($);
   removeTestTokens($);
   removeScopedStylesDataVIDAttributes($);

src/cheerioManipulation.js

@@ -232,6 +232,15 @@ export const loadOptions = function () {
   }
   globalThis.vueSnapshots.stubs = stubsToProcess;
 
+  const regexToRemoveAttributesValid = (
+    globalThis.vueSnapshots.regexToRemoveAttributes === undefined ||
+    globalThis.vueSnapshots.regexToRemoveAttributes instanceof RegExp
+  );
+  if (!regexToRemoveAttributesValid) {
+    logger('The global.vueSnapshots.regexToRemoveAttributes setting must be an instanceof RegExp or undefined. Received: ' + globalThis.vueSnapshots.regexToRemoveAttributes);
+    delete globalThis.vueSnapshots.regexToRemoveAttributes;
+  }
+
   // Formatter
   if (!ALLOWED_FORMATTERS.includes(globalThis.vueSnapshots.formatter)) {
     if (globalThis.vueSnapshots.formatter) {
@@ -391,6 +400,7 @@ export const loadOptions = function () {
     'formatter',
     'formatting',
     'postProcessor',
+    'regexToRemoveAttributes',
     'stubs'
   ];
   const permittedFormattingKeys = [

src/loadOptions.js

@@ -86,6 +86,54 @@ describe('Cheerio Manipulation', () => {
     });
   });
 
+  describe('Remove attributes via regex', () => {
+    const markup = `
+      <div class data-p data-pc-name data-pc-section data-scrollselectors pc51>
+        <div class data-p data-pc-section style>
+          <table class data-pc-section role="table">
+            <thead class data-p-scrollable="false" data-pc-section role="rowgroup" style>
+              <tr data-pc-section role="row">
+                <th class data-p-filter-column="false" data-p-reorderable-column="false" data-p-resizable-column="false" data-pc-name data-pc-section first="0" pc57 role="columnheader">
+                  <div class data-pc-section>
+                    <span class data-pc-section>
+                      Component DC
+                    </span>
+                  </div>
+                </th>
+              </tr>
+            </thead>
+          </table>
+        </div>
+      </div>
+    `.trim();
+    const cleaned = `
+      <div class data-scrollselectors pc51>
+        <div class style>
+          <table class role="table">
+            <thead class role="rowgroup" style>
+              <tr role="row">
+                <th class first="0" pc57 role="columnheader">
+                  <div class>
+                    <span class>
+                      Component DC
+                    </span>
+                  </div>
+                </th>
+              </tr>
+            </thead>
+          </table>
+        </div>
+      </div>
+    `.trim();
+
+    test('Removes data-p attributes', () => {
+      globalThis.vueSnapshots.regexToRemoveAttributes = new RegExp(/data-p.*/);
+
+      expect(cheerioManipulation(markup))
+        .toEqual(cleaned);
+    });
+  });
+
   describe('data-v-ids', () => {
     const markup = '<div data-v-34cd6f4f class="hello"> Hello World </div>';
     const cleaned = '<div class="hello"> Hello World </div>';