Merge eb9fefc into 27c914c

README.md

@@ -83,6 +83,7 @@ module.exports = {
       removeDataTestId: true,
       removeDataQa: false,
       removeDataVId: true,
+      removeIdTest: false,
       removeServerRendered: true,
       stringifyObjects: false
     }
@@ -99,6 +100,7 @@ removeDataTestid     | `true`            | Removes `data-testid="whatever"` from
 removeDataTestId     | `true`            | Removes `data-test-id="whatever"` from your snapshots if true.
 removeDataQa         | `false`           | Removes `data-qa="whatever"` from your snapshots if true. `data-qa` is usually used by non-dev QA members. If they change in your snapshot, that indicates it may break someone else's E2E tests. So most using `data-qa` prefer they be left in by default.
 removeDataVId        | `true`            | Removes `data-v-1234abcd=""` from your snapshots. Important if a 3rd-party component uses scoped styles, to prevent ID changes from breaking your `mount` based tests when updating a dependency.
+removeIdTest         | `false`           | Removes `id="test-whatever"` or `id="testWhatever"`from snapshots. You should never use ID's for test tokens, as they can also be used by JS and CSS, making them more brittle. Use `data-test` instead.
 removeServerRendered | `true`            | Removes `data-server-rendered="true"` from your snapshots if true.
 stringifyObjects     | `false`           | **EXPERIMENTAL** Replaces `title="[object Object]"` with `title="{a:'asdf'}"` in your snapshots, allowing you to see the data in the snapshot. Requires you to pass in `wrapper`, not `wrapper.html()`. This is still a work in progress. On deeply nested componets, it may exceed callstack.
 

index.js

@@ -1,4 +1,5 @@
 const pretty = require('pretty');
+const JSDOM = require('jsdom').JSDOM;
 
 const loadOptions = require('./src/loadOptions.js');
 const replaceObjectObject = require('./src/replaceObjectObject.js');
@@ -40,7 +41,14 @@ function isVueWrapper (received) {
  */
 function removeServerRenderedText (html, options) {
   if (!options || options.removeServerRendered) {
-    return html.replace(/ data-server-rendered="true"/g, '');
+    const dom = new JSDOM(html);
+
+    let elements = dom.window.document.querySelectorAll('[data-server-rendered]');
+    elements.forEach(function (element) {
+      element.removeAttribute('data-server-rendered');
+    });
+
+    return dom.window.document.body.innerHTML;
   }
   return html;
 }
@@ -59,20 +67,43 @@ function removeServerRenderedText (html, options) {
  * @param  {object} options  Options object for this serializer
  * @return {string}          Modified HTML string
  */
-function removeDataTestAttributes (html, options) {
+function removeTestTokens (html, options) {
+  const dom = new JSDOM(html);
+
   if (!options || options.removeDataTest) {
-    // [-\w]+ will catch 1 or more instaces of a-z, A-Z, 0-9, hyphen (-), or underscore (_)
-    html = html.replace(/ data-test="[-\w]+"/g, '');
+    let elements = dom.window.document.querySelectorAll('[data-test]');
+    elements.forEach(function (element) {
+      element.removeAttribute('data-test');
+    });
   }
   if (!options || options.removeDataTestid) {
-    html = html.replace(/ data-testid="[-\w]+"/g, '');
+    let elements = dom.window.document.querySelectorAll('[data-testid]');
+    elements.forEach(function (element) {
+      element.removeAttribute('data-testid');
+    });
   }
   if (!options || options.removeDataTestId) {
-    html = html.replace(/ data-test-id="[-\w]+"/g, '');
+    let elements = dom.window.document.querySelectorAll('[data-test-id]');
+    elements.forEach(function (element) {
+      element.removeAttribute('data-test-id');
+    });
   }
   if (options && options.removeDataQa) {
-    html = html.replace(/ data-qa="[-\w]+"/g, '');
+    let elements = dom.window.document.querySelectorAll('[data-qa]');
+    elements.forEach(function (element) {
+      element.removeAttribute('data-qa');
+    });
+  }
+  if (options && options.removeIdTest) {
+    const elements = dom.window.document.querySelectorAll('[id]');
+    elements.forEach(function (element) {
+      if (element.attributes.id.value.startsWith('test')) {
+        element.removeAttribute('id');
+      }
+    });
   }
+
+  html = dom.window.document.body.innerHTML;
   return html;
 }
 
@@ -136,7 +167,7 @@ module.exports = {
       html = replaceObjectObject(received, options) || '';
     }
     html = removeServerRenderedText(html, options);
-    html = removeDataTestAttributes(html, options);
+    html = removeTestTokens(html, options);
     html = removeScopedStylesDataVIDAttributes(html, options);
     html = removeAllComments(html, options);