From 333f4267c024af57c08ed83dae130c07d437e2ad Mon Sep 17 00:00:00 2001
From: hawkgs <hawk.dvp@gmail.com>
Date: Fri, 13 Mar 2026 16:32:48 +0200
Subject: [PATCH] test(devtools): fix and update flaky component-tree tests

Due to the design of the `ng.getComponent` spy and a race condition where sometimes a `<script>` is added to the test DOM, the `getRootElements` tests used to fail sometimes because those `<script>`s were marked as roots which caused a distortion in the roots count checks. The commit addresses that and also adds an additional test for non-application root Angular components.
---
 .../lib/component-tree/component-tree.spec.ts | 23 ++++++++++++++++++-
 1 file changed, 22 insertions(+), 1 deletion(-)

diff --git a/devtools/projects/ng-devtools-backend/src/lib/component-tree/component-tree.spec.ts b/devtools/projects/ng-devtools-backend/src/lib/component-tree/component-tree.spec.ts
index 00601d20e700..15fa0e79e721 100644
--- a/devtools/projects/ng-devtools-backend/src/lib/component-tree/component-tree.spec.ts
+++ b/devtools/projects/ng-devtools-backend/src/lib/component-tree/component-tree.spec.ts
@@ -59,7 +59,13 @@ describe('component-tree', () => {
   describe('getRootElements', () => {
     beforeEach(() => {
       const ng: Partial<Ng> = {
-        getComponent: jasmine.createSpy('getComponent').and.returnValue({}),
+        getComponent: jasmine.createSpy('getComponent').and.callFake((element: HTMLElement) => {
+          // Will treat only `ng-*` elements as Angular components.
+          if (element.tagName.toLowerCase().startsWith('ng-')) {
+            return element;
+          }
+          return null;
+        }),
       };
       (window as any).ng = ng;
     });
@@ -105,6 +111,21 @@ describe('component-tree', () => {
       expect(roots.length).toEqual(1);
       expect(roots).toContain(document.body);
     });
+
+    it('should return all root elements with all non-application root components', () => {
+      const rootElement = createRoot();
+      const childElement = createRoot();
+      const nonAppRootCmp = document.createElement('ng-cmp');
+
+      rootElement.appendChild(childElement);
+      document.body.appendChild(rootElement);
+      document.body.appendChild(nonAppRootCmp);
+
+      const roots = getRootElements();
+
+      expect(roots.length).toEqual(2);
+      expect(roots).toEqual([rootElement, nonAppRootCmp]);
+    });
   });
 
   describe('serializeProviderRecord', () => {