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.

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', () => {