test(@angular/ssr): refine spec setup to resolve component ID collisi…

…on warnings This update addresses excessive log noise caused by the following warning: `NG0912: Component ID generation collision detected. Components 'AppComponent' and 'AppComponent' with selector 'app-root' generated the same component ID. To fix this, you can change the selector of one of those components or add an extra host attribute to force a different ID. Find more at https://angular.dev/errors/NG0912`.
alan-agius4 · Dec 6, 2024 · 6647247 · 6647247
1 parent fb41d18
commit 6647247
Show file tree

Hide file tree

Showing 3 changed files with 32 additions and 35 deletions.
diff --git a/packages/angular/ssr/test/app-engine_spec.ts b/packages/angular/ssr/test/app-engine_spec.ts
@@ -19,21 +19,21 @@ import { RenderMode } from '../src/routes/route-config';
 import { setAngularAppTestingManifest } from './testing-utils';
 
 function createEntryPoint(locale: string) {
-  return async () => {
-    @Component({
-      standalone: true,
-      selector: `app-ssr-${locale}`,
-      template: `SSR works ${locale.toUpperCase()}`,
-    })
-    class SSRComponent {}
-
-    @Component({
-      standalone: true,
-      selector: `app-ssg-${locale}`,
-      template: `SSG works ${locale.toUpperCase()}`,
-    })
-    class SSGComponent {}
+  @Component({
+    standalone: true,
+    selector: `app-ssr-${locale}`,
+    template: `SSR works ${locale.toUpperCase()}`,
+  })
+  class SSRComponent {}
+
+  @Component({
+    standalone: true,
+    selector: `app-ssg-${locale}`,
+    template: `SSG works ${locale.toUpperCase()}`,
+  })
+  class SSGComponent {}
 
+  return async () => {
     setAngularAppTestingManifest(
       [
         { path: 'ssg', component: SSGComponent },
@@ -74,8 +74,6 @@ describe('AngularAppEngine', () => {
 
   describe('Localized app', () => {
     beforeAll(() => {
-      destroyAngularServerApp();
-
       setAngularAppEngineManifest({
         // Note: Although we are testing only one locale, we need to configure two or more
         // to ensure that we test a different code path.
@@ -142,18 +140,16 @@ describe('AngularAppEngine', () => {
 
   describe('Non-localized app', () => {
     beforeAll(() => {
-      destroyAngularServerApp();
+      @Component({
+        standalone: true,
+        selector: 'app-home',
+        template: `Home works`,
+      })
+      class HomeComponent {}
 
       setAngularAppEngineManifest({
         entryPoints: {
           '': async () => {
-            @Component({
-              standalone: true,
-              selector: 'app-home',
-              template: `Home works`,
-            })
-            class HomeComponent {}
-
             setAngularAppTestingManifest(
               [{ path: 'home', component: HomeComponent }],
               [{ path: '**', renderMode: RenderMode.Server }],

diff --git a/packages/angular/ssr/test/app_spec.ts b/packages/angular/ssr/test/app_spec.ts
@@ -12,16 +12,14 @@ import '@angular/compiler';
 /* eslint-enable import/no-unassigned-import */
 
 import { Component } from '@angular/core';
-import { AngularServerApp, destroyAngularServerApp } from '../src/app';
+import { AngularServerApp } from '../src/app';
 import { RenderMode } from '../src/routes/route-config';
 import { setAngularAppTestingManifest } from './testing-utils';
 
 describe('AngularServerApp', () => {
   let app: AngularServerApp;
 
   beforeAll(() => {
-    destroyAngularServerApp();
-
     @Component({
       standalone: true,
       selector: 'app-home',

diff --git a/packages/angular/ssr/test/testing-utils.ts b/packages/angular/ssr/test/testing-utils.ts
@@ -10,6 +10,7 @@ import { Component, provideExperimentalZonelessChangeDetection } from '@angular/
 import { bootstrapApplication } from '@angular/platform-browser';
 import { provideServerRendering } from '@angular/platform-server';
 import { RouterOutlet, Routes, provideRouter } from '@angular/router';
+import { destroyAngularServerApp } from '../src/app';
 import { ServerAsset, setAngularAppManifest } from '../src/manifest';
 import { ServerRoute, provideServerRoutesConfig } from '../src/routes/route-config';
 
@@ -29,6 +30,16 @@ export function setAngularAppTestingManifest(
   baseHref = '/',
   additionalServerAssets: Record<string, ServerAsset> = {},
 ): void {
+  destroyAngularServerApp();
+
+  @Component({
+    standalone: true,
+    selector: 'app-root',
+    template: '<router-outlet />',
+    imports: [RouterOutlet],
+  })
+  class AppComponent {}
+
   setAngularAppManifest({
     inlineCriticalCss: false,
     baseHref,
@@ -65,14 +76,6 @@ export function setAngularAppTestingManifest(
       },
     },
     bootstrap: async () => () => {
-      @Component({
-        standalone: true,
-        selector: 'app-root',
-        template: '<router-outlet />',
-        imports: [RouterOutlet],
-      })
-      class AppComponent {}
-
       return bootstrapApplication(AppComponent, {
         providers: [
           provideServerRendering(),