fix(serializers): generated id="root{n}" should be removed

BREAKING CHANGE

This change will affect snapshot generation. One should update component snapshots via `-u` Jest CLI option. Since this change only removes the root `id`, it shouldn't affect the quality of snapshots in general.

Author: wellwind

e2e/snapshot-serializers/__tests__/__snapshots__/snapshot-serializers.spec.ts.snap

@@ -9,7 +9,9 @@ exports[`FooComponent should allow generating snapshot 1`] = `
 >
   <p>
     Line 1
-  </p><div>
+  </p><div
+    id="foo"
+  >
     <div>
        val1 
     </div>
@@ -18,13 +20,13 @@ exports[`FooComponent should allow generating snapshot 1`] = `
 `;
 
 exports[`FooComponent should allow generating snapshot 2`] = `
-<div
-  id="root1"
->
+<div>
   <p>
     Line 1
   </p>
-  <div>
+  <div
+    id="foo"
+  >
     <div>
        val1 
     </div>
@@ -38,7 +40,9 @@ exports[`FooComponent should allow generating snapshot with removed component at
 <foo>
   <p>
     Line 1
-  </p><div>
+  </p><div
+    id="foo"
+  >
     <div>
        val1 
     </div>
@@ -47,13 +51,13 @@ exports[`FooComponent should allow generating snapshot with removed component at
 `;
 
 exports[`FooComponent should allow generating snapshot with removed component attributes with snapshot serializer option 2`] = `
-<div
-  id="root0"
->
+<div>
   <p>
     Line 1
   </p>
-  <div>
+  <div
+    id="foo"
+  >
     <div>
        val1 
     </div>

e2e/snapshot-serializers/foo.component.html

@@ -1,6 +1,7 @@
 <!-- SOMETHING -->
 <p>Line 1</p>
-<div>
+<div id="foo">
+    <!-- this id attribute should not be eliminate -->
     <div *ngIf="condition1">
         {{ value1() }}
     </div>

src/serializers/no-ng-attributes.ts

@@ -19,6 +19,15 @@ const hasAttributesToClean = (attribute: Attr): boolean =>
 
 const removeAngularAttributes = (node: Element): Element => {
     const nodeCopy = node.cloneNode(true) as Element;
+    // if parent of original node is body,
+    // means the node is additionally generated when call TestBed.createComponent,
+    // this node will have id="root{n}", will cause snapshot testing not stable,
+    // so the id attribute should be removed
+    if (node.parentElement?.tagName === 'BODY') {
+        nodeCopy.removeAttribute('id');
+    }
+
+    // Remove angular-specific attributes
     Object.values(nodeCopy.attributes)
         .filter(hasAttributesToRemove)
         .forEach((attribute) => nodeCopy.attributes.removeNamedItem(attribute.name));