Merge snapshot indexed css class filtering with (#343)

removes Angular-generated snapshot classes that might change upon multiple test runs

Co-authored-by: Evan Rittenhouse <[email protected]>

CHANGELOG.md

@@ -5,6 +5,7 @@
 #### Fixes
 
 * Make `AngularSnapshotSerializer` compatible with Ivy ([#366](https://github.com/thymikee/jest-preset-angular/pull/366))
+* Make `AngularSnapshotSerializer` remove auto-generated angular classes in addition to attributes
 
 ### v8.1.2
 

example/src/app/__snapshots__/app.component.spec.ts.snap

@@ -7,20 +7,15 @@ exports[`AppComponent snaps 1`] = `
   title={[Function String]}
   variableWithPrecedingDolar={[Function Number]}
 >
-  <h1
-    class="ng-tns-c11-0"
-  >
+  <h1>
      app works! 
     <app-calc
-      class="ng-tns-c11-0"
+      class="custom-class25-0 margin-rem3-0"
     />
-    <span
-      class="ng-tns-c11-0"
-    >
+    <span>
       aaa $1234
     </span>
     <span
-      class="ng-tns-c11-0 ng-star-inserted"
       style=""
     >
       ddd

example/src/app/app.component.html

@@ -1,6 +1,6 @@
 <h1>
   {{title}}
-  <app-calc [hasAClass]="hasClass"></app-calc>
+  <app-calc class="custom-class25-0 margin-rem3-0" [hasAClass]="hasClass"></app-calc>
   <span>aaa ${{variableWithPrecedingDolar}}</span>
   <span *ngIf="hasClass">ddd</span>
   `test'chars""

src/AngularNoNgAttributesSnapshotSerializer.js

@@ -3,23 +3,55 @@
 const jestDOMElementSerializer = require('pretty-format').plugins.DOMElement;
 
 const attributesToRemovePatterns = ['ng-reflect', '_nghost', '_ngcontent', 'ng-version'];
+const attributesToClean = {
+  class: [/^(?:mat|cdk|ng).*-\w*\d+-\d+$/, /^ng-star-inserted$/], // e.g. "ng-tns-c25-1" or "ng-star-inserted", literally
+  id: [/^(?:mat|cdk|ng).*-\d+$/], // e.g. "mat-input-4", "cdk-step-content-0-0"
+  for: [/^(?:mat|cdk|ng).*-\d+$/], // e.g. "mat-form-field-label-9"
+  'aria-owns': [/^(?:mat|cdk|ng).*-\d+$/], // e.g. "mat-input-4"
+  'aria-labelledby': [/^(?:mat|cdk|ng).*-\d+$/], // e.g. "mat-input-4", "cdk-step-label-0-0"
+  'aria-controls': [/^(?:mat|cdk|ng).*-\d+$/], // e.g. "cdk-step-content-2-0"
+};
 
 const hasAttributesToRemove = (attribute) =>
   attributesToRemovePatterns
     .some(removePattern => attribute.name.startsWith(removePattern));
+const hasAttributesToClean = (attribute) => {
+  return Object.keys(attributesToClean).some(
+    removePatternKey => attribute.name === removePatternKey,
+  );
+};
 
 const serialize = (node, ...rest) => {
   const nodeCopy = node.cloneNode(true);
+  // Remove angular-specific attributes
   Object.values(nodeCopy.attributes)
     .filter(hasAttributesToRemove)
     .forEach(attribute => nodeCopy.attributes.removeNamedItem(attribute.name));
+  // Remove angular auto-added classes
+  Object.values(nodeCopy.attributes)
+    .filter(hasAttributesToClean)
+    .forEach(attribute => {
+      attribute.value = attribute.value
+        .split(' ')
+        .filter(attrValue => {
+          return !attributesToClean[attribute.name].some(attributeCleanRegex => 
+              attributeCleanRegex.test(attrValue),
+          );
+        })
+        .join(' ');
+      if (attribute.value === '') {
+        nodeCopy.attributes.removeNamedItem(attribute.name);
+      } else {
+        nodeCopy.attributes.setNamedItem(attribute);
+      }
+    });
 
   return jestDOMElementSerializer.serialize(nodeCopy, ...rest);
 };
 
 const serializeTestFn = (val) => {
   return val.attributes !== undefined && Object.values(val.attributes)
-    .some(hasAttributesToRemove)
+    .some(attribute => hasAttributesToRemove(attribute) || hasAttributesToClean(attribute))
 };
 const test = val =>
   jestDOMElementSerializer.test(val) && serializeTestFn(val);