chore: 🤖 fix clutter in test terminal output (#720)

* chore: 🤖 IntersectionObserver mock in jest

fix "ERROR ReferenceError: IntersectionObserver is not defined"

* chore: 🤖 fix NG0912: Component ID generation collision detected

Author: chimurai

projects/spectator/jest/test/defer-block.spec.ts

@@ -5,7 +5,7 @@ import { createComponentFactory } from '@ngneat/spectator/jest';
 describe('DeferBlock', () => {
   describe('Playthrough Behavior', () => {
     @Component({
-      selector: 'app-root',
+      selector: 'app-root:not(.NG0912-a)',
       template: `
         <button data-test="button--isVisible" (click)="isVisible = !isVisible">Toggle</button>
 
@@ -42,7 +42,7 @@ describe('DeferBlock', () => {
 
   describe('Manual Behavior', () => {
     @Component({
-      selector: 'app-root',
+      selector: 'app-root:not(.NG0912-b)',
       template: `
         @defer (on viewport) {
           <div>empty defer block</div>
@@ -110,7 +110,7 @@ describe('DeferBlock', () => {
 
   describe('Manual Behavior with nested states', () => {
     @Component({
-      selector: 'app-root',
+      selector: 'app-root:not(.NG0912-c)',
       template: `
         @defer (on viewport) {
           <div>complete state #1</div>

projects/spectator/setup-jest.ts

@@ -6,3 +6,13 @@ defineGlobalsInjections({
   providers: [TranslateService],
   declarations: [TranslatePipe],
 });
+
+beforeEach(() => {
+  const mockIntersectionObserver = jest.fn<IntersectionObserver>();
+  mockIntersectionObserver.mockReturnValue({
+    observe: () => null,
+    unobserve: () => null,
+    disconnect: () => null,
+  });
+  window.IntersectionObserver = mockIntersectionObserver;
+});

projects/spectator/test/standalone/component/standalone-with-imports.component.ts

@@ -8,7 +8,7 @@ import { Component } from '@angular/core';
 export class StandaloneChildComponent {}
 
 @Component({
-  selector: `app-standalone-child`,
+  selector: `app-standalone-child:not(.NG0912)`,
   template: `<div id="child-standalone">Mocked!</div>`,
   standalone: true,
 })