From 3749c7801c487ce561d2ac56c18f5b71a223410e Mon Sep 17 00:00:00 2001
From: Mike Huang <wellwind@mail2000.com.tw>
Date: Fri, 15 Sep 2023 21:57:39 +0800
Subject: [PATCH] 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.
---
 .../snapshot-serializers.spec.ts.snap         | 24 +++++++++++--------
 e2e/snapshot-serializers/foo.component.html   |  3 ++-
 src/serializers/no-ng-attributes.ts           |  9 +++++++
 3 files changed, 25 insertions(+), 11 deletions(-)

diff --git a/e2e/snapshot-serializers/__tests__/__snapshots__/snapshot-serializers.spec.ts.snap b/e2e/snapshot-serializers/__tests__/__snapshots__/snapshot-serializers.spec.ts.snap
index 80114aefa4..7789983806 100644
--- a/e2e/snapshot-serializers/__tests__/__snapshots__/snapshot-serializers.spec.ts.snap
+++ b/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>
diff --git a/e2e/snapshot-serializers/foo.component.html b/e2e/snapshot-serializers/foo.component.html
index cdd69d0efa..cfb25a5e4b 100644
--- a/e2e/snapshot-serializers/foo.component.html
+++ b/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>
diff --git a/src/serializers/no-ng-attributes.ts b/src/serializers/no-ng-attributes.ts
index 0fdc4169a9..bd1aed9d86 100644
--- a/src/serializers/no-ng-attributes.ts
+++ b/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));