test: update tests to remove deprecated withServerTransition (#49422)

alan-agius4 · alxhub · commit cf987771530d · 2023-03-15T17:08:18.000-07:00
This commit removes the usages of `withServerTransition` form tests. PR Close #49422
diff --git a/aio/content/examples/universal/src/app/app.module.ts b/aio/content/examples/universal/src/app/app.module.ts
@@ -21,7 +21,7 @@ import { isPlatformBrowser } from '@angular/common';
 
 @NgModule({
   imports: [
-    BrowserModule.withServerTransition({ appId: 'tour-of-heroes' }),
+    BrowserModule,
     FormsModule,
     AppRoutingModule,
     HttpClientModule,
diff --git a/integration/cli-elements-universal/src/app/app.module.ts b/integration/cli-elements-universal/src/app/app.module.ts
@@ -1,5 +1,5 @@
 import { isPlatformBrowser } from '@angular/common';
-import { CUSTOM_ELEMENTS_SCHEMA, Inject, Injector, NgModule, PLATFORM_ID } from '@angular/core';
+import { APP_ID, CUSTOM_ELEMENTS_SCHEMA, Inject, Injector, NgModule, PLATFORM_ID } from '@angular/core';
 import { createCustomElement } from '@angular/elements';
 import { BrowserModule } from '@angular/platform-browser';
 import { RouterModule } from '@angular/router';
@@ -16,7 +16,7 @@ import { TitleComponent } from './title.component';
     TitleComponent,
   ],
   imports: [
-    BrowserModule.withServerTransition({ appId: 'serverApp' }),
+    BrowserModule,
     RouterModule.forRoot([]),
   ],
   schemas: [
diff --git a/integration/injectable-def/src/app.ts b/integration/injectable-def/src/app.ts
@@ -14,7 +14,7 @@ export class TestApp {}
   bootstrap: [TestApp],
   imports: [
     Lib2Module,
-    BrowserModule.withServerTransition({appId: 'appId'}),
+    BrowserModule,
     ServerModule,
   ],
 })
diff --git a/integration/platform-server/e2e/helloworld-spec.ts b/integration/platform-server/e2e/helloworld-spec.ts
@@ -15,7 +15,7 @@ describe('Hello world E2E Tests', function() {
     // Load the page without waiting for Angular since it is not bootstrapped automatically.
     browser.driver.get(browser.baseUrl + 'helloworld');
 
-    const style = browser.driver.findElement(by.css('style[ng-app="hlw"]'));
+    const style = browser.driver.findElement(by.css('style[ng-app="ng"]'));
     expect(style.getText()).not.toBeNull();
 
     // Test the contents from the server.
@@ -28,7 +28,7 @@ describe('Hello world E2E Tests', function() {
     expect(element(by.css('div')).getText()).toEqual('Hello world!');
 
     // Make sure the server styles get reused by the client.
-    expect(element(by.css('style[ng-app="hlw"]')).isPresent()).toBeFalsy();
+    expect(element(by.css('style[ng-app="ng"]')).isPresent()).toBeFalsy();
     expect(element(by.css('style[ng-style-reused]')).isPresent()).toBeTruthy()
     expect(element(by.css('style')).getText()).toBe('');
 
diff --git a/integration/platform-server/src/helloworld/app.ts b/integration/platform-server/src/helloworld/app.ts
@@ -14,7 +14,7 @@ import {HelloWorldComponent} from './hello-world.component';
 @NgModule({
   declarations: [HelloWorldComponent],
   bootstrap: [HelloWorldComponent],
-  imports: [BrowserModule.withServerTransition({appId: 'hlw'})],
+  imports: [BrowserModule],
 })
 export class HelloWorldModule {
 }
diff --git a/integration/platform-server/src/transferstate/app.ts b/integration/platform-server/src/transferstate/app.ts
@@ -15,7 +15,7 @@ import {TransferStateComponent} from './transfer-state.component';
   declarations: [TransferStateComponent],
   bootstrap: [TransferStateComponent],
   imports: [
-    BrowserModule.withServerTransition({appId: 'ts'}),
+    BrowserModule,
   ],
 })
 export class TransferStateModule {
diff --git a/packages/compiler-cli/integrationtest/bazel/injectable_def/app/src/basic.ts b/packages/compiler-cli/integrationtest/bazel/injectable_def/app/src/basic.ts
@@ -21,7 +21,7 @@ export class AppComponent {
 @NgModule({
   imports: [
     Lib2Module,
-    BrowserModule.withServerTransition({appId: 'id-app'}),
+    BrowserModule,
     ServerModule,
   ],
   declarations: [AppComponent],
diff --git a/packages/compiler-cli/integrationtest/bazel/injectable_def/app/src/dep.ts b/packages/compiler-cli/integrationtest/bazel/injectable_def/app/src/dep.ts
@@ -27,7 +27,7 @@ export class AppComponent {
 
 @NgModule({
   imports: [
-    BrowserModule.withServerTransition({appId: 'id-app'}),
+    BrowserModule,
     ServerModule,
   ],
   declarations: [AppComponent],
diff --git a/packages/compiler-cli/integrationtest/bazel/injectable_def/app/src/hierarchy.ts b/packages/compiler-cli/integrationtest/bazel/injectable_def/app/src/hierarchy.ts
@@ -36,7 +36,7 @@ export class ChildComponent {
 
 @NgModule({
   imports: [
-    BrowserModule.withServerTransition({appId: 'hierarchy-app'}),
+    BrowserModule,
     ServerModule,
   ],
   declarations: [AppComponent, ChildComponent],
diff --git a/packages/compiler-cli/integrationtest/bazel/injectable_def/app/src/root.ts b/packages/compiler-cli/integrationtest/bazel/injectable_def/app/src/root.ts
@@ -28,7 +28,7 @@ export function children(): any {
 
 @NgModule({
   imports: [
-    BrowserModule.withServerTransition({appId: 'id-app'}),
+    BrowserModule,
     ServerModule,
     RouterModule.forRoot(
         [
diff --git a/packages/compiler-cli/integrationtest/bazel/injectable_def/app/src/self.ts b/packages/compiler-cli/integrationtest/bazel/injectable_def/app/src/self.ts
@@ -28,7 +28,7 @@ export class AppComponent {
 
 @NgModule({
   imports: [
-    BrowserModule.withServerTransition({appId: 'id-app'}),
+    BrowserModule,
     ServerModule,
   ],
   declarations: [AppComponent],
diff --git a/packages/compiler-cli/integrationtest/bazel/injectable_def/app/src/string.ts b/packages/compiler-cli/integrationtest/bazel/injectable_def/app/src/string.ts
@@ -24,7 +24,7 @@ export class AppComponent {
 
 @NgModule({
   imports: [
-    BrowserModule.withServerTransition({appId: 'id-app'}),
+    BrowserModule,
     ServerModule,
   ],
   declarations: [AppComponent],
diff --git a/packages/compiler-cli/integrationtest/bazel/injectable_def/app/src/token.ts b/packages/compiler-cli/integrationtest/bazel/injectable_def/app/src/token.ts
@@ -37,7 +37,7 @@ export class AppComponent {
 
 @NgModule({
   imports: [
-    BrowserModule.withServerTransition({appId: 'id-app'}),
+    BrowserModule,
     ServerModule,
     TokenModule,
   ],
diff --git a/packages/platform-server/test/integration_spec.ts b/packages/platform-server/test/integration_spec.ts
@@ -10,7 +10,7 @@ import {animate, AnimationBuilder, state, style, transition, trigger} from '@ang
 import {DOCUMENT, isPlatformServer, PlatformLocation, ɵgetDOM as getDOM} from '@angular/common';
 import {HTTP_INTERCEPTORS, HttpClient, HttpClientModule, HttpEvent, HttpHandler, HttpInterceptor, HttpRequest} from '@angular/common/http';
 import {HttpClientTestingModule, HttpTestingController} from '@angular/common/http/testing';
-import {ApplicationRef, Component, destroyPlatform, getPlatform, HostListener, importProvidersFrom, Inject, inject as coreInject, Injectable, Input, NgModule, NgZone, PLATFORM_ID, ViewEncapsulation} from '@angular/core';
+import {ApplicationRef, Component, destroyPlatform, getPlatform, HostListener, Inject, inject as coreInject, Injectable, Input, NgModule, NgZone, PLATFORM_ID, ViewEncapsulation} from '@angular/core';
 import {TestBed, waitForAsync} from '@angular/core/testing';
 import {bootstrapApplication, BrowserModule, makeStateKey, Title, TransferState} from '@angular/platform-browser';
 import {BEFORE_APP_SERIALIZED, INITIAL_CONFIG, platformDynamicServer, PlatformState, provideServerSupport, renderModule, ServerModule} from '@angular/platform-server';
@@ -95,8 +95,7 @@ const RenderHookProviders = [
 
 @NgModule({
   bootstrap: [MyServerApp],
-  imports:
-      [MyServerAppModule, BrowserModule.withServerTransition({appId: 'render-hook'}), ServerModule],
+  imports: [MyServerAppModule, BrowserModule, ServerModule],
   providers: [...RenderHookProviders],
 })
 class RenderHookModule {
@@ -110,8 +109,7 @@ const MultiRenderHookProviders = [
 
 @NgModule({
   bootstrap: [MyServerApp],
-  imports:
-      [MyServerAppModule, BrowserModule.withServerTransition({appId: 'render-hook'}), ServerModule],
+  imports: [MyServerAppModule, BrowserModule, ServerModule],
   providers: [...MultiRenderHookProviders],
 })
 class MultiRenderHookModule {
@@ -128,8 +126,7 @@ const AsyncRenderHookProviders = [
 
 @NgModule({
   bootstrap: [MyServerApp],
-  imports:
-      [MyServerAppModule, BrowserModule.withServerTransition({appId: 'render-hook'}), ServerModule],
+  imports: [MyServerAppModule, BrowserModule, ServerModule],
   providers: [...AsyncRenderHookProviders],
 })
 class AsyncRenderHookModule {
@@ -148,8 +145,7 @@ const AsyncMultiRenderHookProviders = [
 
 @NgModule({
   bootstrap: [MyServerApp],
-  imports:
-      [MyServerAppModule, BrowserModule.withServerTransition({appId: 'render-hook'}), ServerModule],
+  imports: [MyServerAppModule, BrowserModule, ServerModule],
   providers: [...AsyncMultiRenderHookProviders],
 })
 class AsyncMultiRenderHookModule {
@@ -205,14 +201,13 @@ const MyAsyncServerAppStandalone = createMyAsyncServerApp(true);
 
 const boostrapMyAsyncServerAppStandalone = () => bootstrapApplication(MyAsyncServerAppStandalone, {
   providers: [
-    importProvidersFrom(BrowserModule.withServerTransition({appId: 'simple-cmp'})),
     provideServerSupport(),
   ]
 });
 
 @NgModule({
   declarations: [MyAsyncServerApp],
-  imports: [BrowserModule.withServerTransition({appId: 'async-server'}), ServerModule],
+  imports: [BrowserModule, ServerModule],
   bootstrap: [MyAsyncServerApp]
 })
 class AsyncServerModule {
@@ -234,7 +229,7 @@ const SVGComponentStandalone = createSVGComponent(true);
 
 @NgModule({
   declarations: [SVGComponent],
-  imports: [BrowserModule.withServerTransition({appId: 'svg-server'}), ServerModule],
+  imports: [BrowserModule, ServerModule],
   bootstrap: [SVGComponent]
 })
 class SVGServerModule {
@@ -276,7 +271,7 @@ const MyAnimationAppStandalone = createMyAnimationApp(true);
 
 @NgModule({
   declarations: [MyAnimationApp],
-  imports: [BrowserModule.withServerTransition({appId: 'anim-server'}), ServerModule],
+  imports: [BrowserModule, ServerModule],
   bootstrap: [MyAnimationApp]
 })
 class AnimationServerModule {
@@ -297,11 +292,8 @@ function createMyStylesApp(standalone: boolean) {
 const MyStylesApp = createMyStylesApp(false);
 const MyStylesAppStandalone = createMyStylesApp(true);
 
-@NgModule({
-  declarations: [MyStylesApp],
-  imports: [BrowserModule.withServerTransition({appId: 'example-styles'}), ServerModule],
-  bootstrap: [MyStylesApp]
-})
+@NgModule(
+    {declarations: [MyStylesApp], imports: [BrowserModule, ServerModule], bootstrap: [MyStylesApp]})
 class ExampleStylesModule {
 }
 
@@ -326,7 +318,7 @@ const MyTransferStateAppStandalone = createMyTransferStateApp(true);
 
 @NgModule({
   declarations: [MyTransferStateApp],
-  imports: [BrowserModule.withServerTransition({appId: 'transfer-state-app'}), ServerModule],
+  imports: [BrowserModule, ServerModule],
   bootstrap: [MyTransferStateApp]
 })
 class MyTransferStateModule {
@@ -384,7 +376,7 @@ const ShadowDomEncapsulationAppStandalone = createShadowDomEncapsulationApp(true
 
 @NgModule({
   declarations: [ShadowDomEncapsulationApp],
-  imports: [BrowserModule.withServerTransition({appId: 'test'}), ServerModule],
+  imports: [BrowserModule, ServerModule],
   bootstrap: [ShadowDomEncapsulationApp]
 })
 class ShadowDomExampleModule {
@@ -417,7 +409,7 @@ const [MyHostComponentStandalone, _] = createFalseAttributesComponents(true);
 @NgModule({
   declarations: [MyHostComponent, MyChildComponent],
   bootstrap: [MyHostComponent],
-  imports: [ServerModule, BrowserModule.withServerTransition({appId: 'false-attributes'})]
+  imports: [ServerModule, BrowserModule]
 })
 class FalseAttributesModule {
 }
@@ -440,7 +432,7 @@ const MyInputComponentStandalone = createMyInputComponent(true);
 @NgModule({
   declarations: [MyInputComponent],
   bootstrap: [MyInputComponent],
-  imports: [ServerModule, BrowserModule.withServerTransition({appId: 'name-attributes'})]
+  imports: [ServerModule, BrowserModule]
 })
 class NameModule {
 }
@@ -463,7 +455,7 @@ const HTMLTypesAppStandalone = createHTMLTypesApp(true);
 
 @NgModule({
   declarations: [HTMLTypesApp],
-  imports: [BrowserModule.withServerTransition({appId: 'inner-html'}), ServerModule],
+  imports: [BrowserModule, ServerModule],
   bootstrap: [HTMLTypesApp]
 })
 class HTMLTypesModule {
@@ -487,7 +479,7 @@ const MyHiddenComponentStandalone = createMyHiddenComponent(true);
 @NgModule({
   declarations: [MyHiddenComponent],
   bootstrap: [MyHiddenComponent],
-  imports: [ServerModule, BrowserModule.withServerTransition({appId: 'hidden-attributes'})]
+  imports: [ServerModule, BrowserModule]
 })
 class HiddenModule {
 }
@@ -575,7 +567,7 @@ describe('platform-server integration', () => {
          const styles: any[] = head.children as any;
          expect(styles.length).toBe(1);
          expect(styles[0].textContent).toContain('color: red');
-         expect(styles[0].getAttribute('ng-app')).toBe('example-styles');
+         expect(styles[0].getAttribute('ng-app')).toBe('ng');
        });
      }));
 
@@ -842,12 +834,11 @@ describe('platform-server integration', () => {
            }];
            const bootstrap = isStandalone ?
                renderApplication(
-                   MyStylesAppStandalone,
-                   {...options, platformProviders: providers, appId: 'example-styles'}) :
+                   MyStylesAppStandalone, {...options, platformProviders: providers, appId: 'ng'}) :
                renderModule(ExampleStylesModule, {...options, extraProviders: providers});
            bootstrap.then(output => {
              expect(output).toMatch(
-                 /<app _nghost-example-styles-c\d+="" ng-version="0.0.0-PLACEHOLDER" ng-server-context="ssg">/);
+                 /<app _nghost-ng-c\d+="" ng-version="0.0.0-PLACEHOLDER" ng-server-context="ssg">/);
              called = true;
            });
          }));
@@ -877,13 +868,12 @@ describe('platform-server integration', () => {
          waitForAsync(() => {
            const options = {document: doc};
            const bootstrap = isStandalone ?
-               renderApplication(
-                   MyTransferStateAppStandalone, {...options, appId: 'transfer-state-app'}) :
+               renderApplication(MyTransferStateAppStandalone, {...options, appId: 'ng'}) :
                renderModule(MyTransferStateModule, {...options});
            bootstrap.then(output => {
              const expectedOutput =
                  '<html><head></head><body><app ng-version="0.0.0-PLACEHOLDER" ng-server-context="other"><div>Works!</div></app>' +
-                 '<script id="transfer-state-app-state" type="application/json">{&q;some-key&q;:&q;some-value&q;}</script></body></html>';
+                 '<script id="ng-state" type="application/json">{&q;some-key&q;:&q;some-value&q;}</script></body></html>';
              expect(output).toEqual(expectedOutput);
              called = true;
            });
diff --git a/packages/platform-server/test/transfer_state_spec.ts b/packages/platform-server/test/transfer_state_spec.ts
@@ -12,7 +12,7 @@ import {renderModule, ServerModule} from '@angular/platform-server';
 
 describe('transfer_state', () => {
   const defaultExpectedOutput =
-      '<html><head></head><body><app ng-version="0.0.0-PLACEHOLDER" ng-server-context="other">Works!</app><script id="transfer-state" type="application/json">{&q;test&q;:10}</script></body></html>';
+      '<html><head></head><body><app ng-version="0.0.0-PLACEHOLDER" ng-server-context="other">Works!</app><script id="ng-state" type="application/json">{&q;test&q;:10}</script></body></html>';
 
   it('adds transfer script tag when using renderModule', async () => {
     const STATE_KEY = makeStateKey<number>('test');
@@ -27,7 +27,7 @@ describe('transfer_state', () => {
     @NgModule({
       bootstrap: [TransferComponent],
       declarations: [TransferComponent],
-      imports: [BrowserModule.withServerTransition({appId: 'transfer'}), ServerModule],
+      imports: [BrowserModule, ServerModule],
     })
     class TransferStoreModule {
     }
@@ -48,7 +48,7 @@ describe('transfer_state', () => {
     @NgModule({
       bootstrap: [EscapedComponent],
       declarations: [EscapedComponent],
-      imports: [BrowserModule.withServerTransition({appId: 'transfer'}), ServerModule],
+      imports: [BrowserModule, ServerModule],
     })
     class EscapedTransferStoreModule {
     }
@@ -57,7 +57,7 @@ describe('transfer_state', () => {
         await renderModule(EscapedTransferStoreModule, {document: '<esc-app></esc-app>'});
     expect(output).toBe(
         '<html><head></head><body><esc-app ng-version="0.0.0-PLACEHOLDER" ng-server-context="other">Works!</esc-app>' +
-        '<script id="transfer-state" type="application/json">' +
+        '<script id="ng-state" type="application/json">' +
         '{&q;testString&q;:&q;&l;/script&g;&l;script&g;' +
         'alert(&s;Hello&a;&s; + \\&q;World\\&q;);&q;}</script></body></html>');
   });
@@ -75,7 +75,7 @@ describe('transfer_state', () => {
     @NgModule({
       bootstrap: [TransferComponent],
       declarations: [TransferComponent],
-      imports: [BrowserModule.withServerTransition({appId: 'transfer'}), ServerModule],
+      imports: [BrowserModule, ServerModule],
     })
     class TransferStoreModule {
     }

Original file line number	Diff line number	Diff line change
`@@ -14,7 +14,7 @@ import {HelloWorldComponent} from './hello-world.component';`
`14`	`14`	`@NgModule({`
`15`	`15`	`declarations: [HelloWorldComponent],`
`16`	`16`	`bootstrap: [HelloWorldComponent],`
`17`		`- imports: [BrowserModule.withServerTransition({appId: 'hlw'})],`
	`17`	`+ imports: [BrowserModule],`
`18`	`18`	`})`
`19`	`19`	`export class HelloWorldModule {`
`20`	`20`	`}`
Original file line number	Diff line number	Diff line change
`@@ -28,7 +28,7 @@ export function children(): any {`
`28`	`28`
`29`	`29`	`@NgModule({`
`30`	`30`	`imports: [`
`31`		`- BrowserModule.withServerTransition({appId: 'id-app'}),`
	`31`	`+ BrowserModule,`
`32`	`32`	`ServerModule,`
`33`	`33`	`RouterModule.forRoot(`
`34`	`34`	`[`