10000 test: add integration test for defer with input on SSR with zones · angular/angular@202fb1a · GitHub
[go: up one dir, main page]
Skip to content

Commit 202fb1a

Browse files
alan-agius4alan-agius4
committed
test: add integration test for defer with input on SSR with zones
Add an integration test to verify defer block behavior with input handling during server-side rendering (SSR).
1 parent 2445946 commit 202fb1a

File tree

9 files changed

+110
-4
lines changed

9 files changed

+110
-4
lines changed

‎integration/platform-server/e2e/src/defer-spec.ts

+27
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
import {browser, by, element} from 'protractor';
2+
import {bootstrapClientApp, navigateTo, verifyNoBrowserErrors} from './util';
3+
4+
describe('Defer E2E Tests', () => {
5+
beforeEach(async () => {
6+
// Don't wait for Angular since it is not bootstrapped automatically.
7+
await browser.waitForAngularEnabled(false);
8+
9+
// Load the page without waiting for Angular since it is not bootstrapped automatically.
10+
await navigateTo('defer');
11+
});
12+
13+
afterEach(async () => {
14+
// Make sure there were no client side errors.
15+
await verifyNoBrowserErrors();
16+
});
17+
18+
it('should text in defered component with input', async () => {
19+
// Test the contents from the server.
20+
expect(await element(by.css('p')).getText()).toEqual('Hydrate Never works!');
21+
22+
await bootstrapClientApp();
23+
24+
// Retest the contents after the client bootstraps.
25+
expect(await element(by.css('p')).getText()).toEqual('Hydrate Never works!');
26+
});
27+
});

‎integration/platform-server/projects/ngmodule/src/app/app-routing.module.ts

+5
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@ import {NgModule} from '@angular/core';
22
import {RouterModule, Routes} from '@angular/router';
33
import {HelloWorldComponent} from './helloworld/hello-world.component';
44
import {TransferStateComponent} from './transferstate/transfer-state.component';
5+
import {DeferComponent} from './defer/defer.component';
56

67
const routes: Routes = [
78
{
@@ -35,6 +36,10 @@ const routes: Routes = [
3536
},
3637
},
3738
},
39+
{
40+
path: 'defer',
41+
component: DeferComponent,
42+
},
3843
];
3944

4045
@NgModule({

‎integration/platform-server/projects/ngmodule/src/app/app.module.ts

+6-2
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,17 @@
11
import {NgModule} from '@angular/core';
2-
import {BrowserModule, provideClientHydration} from '@angular/platform-browser';
2+
import {
3+
BrowserModule,
4+
provideClientHydration,
5+
withIncrementalHydration,
6+
} from '@angular/platform-browser';
37

48
import {AppRoutingModule} from './app-routing.module';
59
import {AppComponent} from './app.component';
610

711
@NgModule({
812
declarations: [AppComponent],
913
imports: [BrowserModule, AppRoutingModule],
10-
providers: [provideClientHydration()],
14+
providers: [provideClientHydration(withIncrementalHydration())],
1115
bootstrap: [AppComponent],
1216
})
1317
export class AppModule {}

‎integration/platform-server/projects/ngmodule/src/app/defer/defer.component.ts

+22
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
/**
2+
* @license
3+
* Copyright Google LLC All Rights Reserved.
4+
*
5+
* Use of this source code is governed by an MIT-style license that can be
6+
* found in the LICENSE file at https://angular.dev/license
7+
*/
8+
import {Component} from '@angular/core';
9+
import {HydratedComponent} from './hydrated.component';
10+
11+
@Component({
12+
selector: 'app-defer',
13+
standalone: true,
14+
imports: [HydratedComponent],
15+
template: `
16+
@defer (hydrate never) {
17+
<app-hydrated [title]="hydrateNeverTitle" />
18+
}`,
19+
})
20+
export class DeferComponent {
21+
hydrateNeverTitle = 'Hydrate Never';
22+
}

‎integration/platform-server/projects/ngmodule/src/app/defer/hydrated.component.ts

+9
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
import {Component, input} from '@angular/core';
2+
3+
@Component({
4+
selector: 'app-hydrated',
5+
template: `<p>{{title()}} works!</p>`,
6+
})
7+
export class HydratedComponent {
8+
title = input.required<string>();
9+
}

‎integration/platform-server/projects/standalone/src/app/app.config.ts

+6-2
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,14 @@
11
import {provideHttpClient} from '@angular/common/http';
22
import {ApplicationConfig} from '@angular/core';
3-
import {provideClientHydration} from '@angular/platform-browser';
3+
import {provideClientHydration, withIncrementalHydration} from '@angular/platform-browser';
44
import {provideRouter} from '@angular/router';
55

66
import {routes} from './app.routes';
77

88
export const appConfig: ApplicationConfig = {
9-
providers: [provideRouter(routes), provideClientHydration(), provideHttpClient()],
9+
providers: [
10+
provideRouter(routes),
11+
provideClientHydration(withIncrementalHydration()),
12+
provideHttpClient(),
13+
],
1014
};

‎integration/platform-server/projects/standalone/src/app/app.routes.ts

+5
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
import {Routes} from '@angular/router';
22
import {HelloWorldComponent} from './helloworld/hello-world.component';
33
import {TransferStateComponent} from './transferstate/transfer-state.component';
4+
import {DeferComponent} from './defer/defer.component';
45

56
export const routes: Routes = [
67
{
@@ -34,4 +35,8 @@ export const routes: Routes = [
3435
},
3536
},
3637
},
38+
{
39+
path: 'defer',
40+
component: DeferComponent,
41+
},
3742
];

‎integration/platform-server/projects/standalone/src/app/defer/defer.component.ts

+21
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
/**
2+
* @license
3+
* Copyright Google LLC All Rights Reserved.
4+
*
5+
* Use of this source code is governed by an MIT-style license that can be
6+
* found in the LICENSE file at https://angular.dev/license
7+
*/
8+
import {Component} from '@angular/core';
9+
import {HydratedComponent} from './hydrated.component';
10+
11+
@Component({
12+
selector: 'app-defer',
13+
imports: [HydratedComponent],
14+
template: `
15+
@defer (hydrate never) {
16+
<app-hydrated [title]="hydrateNeverTitle" />
17+
}`,
18+
})
19+
export class DeferComponent {
20+
hydrateNeverTitle = 'Hydrate Never';
21+
}

‎integration/platform-server/projects/standalone/src/app/defer/hydrated.component.ts

+9
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
import {Component, input} from '@angular/core';
2+
3+
@Component({
4+
selector: 'app-hydrated',
5+
template: `<p>{{title()}} works!</p>`,
6+
})
7+
export class HydratedComponent {
8+
title = input.required<string>();
9+
}

0 commit comments

Comments
 (0)
0