Skip to content

Commit c88b29c

Browse files
alan-agius4alan-agius4
committed
test: add integration test for platform-server with zoneless
Add an integration test to verify SSR with zoneless
1 parent 202fb1a commit c88b29c

37 files changed

+8809
-0
lines changed

‎.bazelignore‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -26,6 +26,7 @@ integration/ng_update_migrations/node_modules
2626
integration/ng-add-localize/node_modules
2727
integration/nodenext_resolution/node_modules
2828
integration/platform-server/node_modules
29+
integration/platform-server-zoneless/node_modules
2930
integration/platform-server-hydration/node_modules
3031
integration/service-worker-schema/node_modules
3132
integration/side-effects/node_modules

‎integration/platform-server-zoneless/.editorconfig‎

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
# Editor configuration, see https://editorconfig.org
2+
root = true
3+
4+
[*]
5+
charset = utf-8
6+
indent_style = space
7+
indent_size = 2
8+
insert_final_newline = true
9+
trim_trailing_whitespace = true
10+
11+
[*.ts]
12+
quote_type = single
13+
14+
[*.md]
15+
max_line_length = off
16+
trim_trailing_whitespace = false

‎integration/platform-server-zoneless/.gitignore‎

Lines changed: 42 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,42 @@
1+
# See http://help.github.com/ignore-files/ for more about ignoring files.
2+
3+
# Compiled output
4+
/dist
5+
/tmp
6+
/out-tsc
7+
/bazel-out
8+
9+
# Node
10+
/node_modules
11+
npm-debug.log
12+
yarn-error.log
13+
14+
# IDEs and editors
15+
.idea/
16+
.project
17+
.classpath
18+
.c9/
19+
*.launch
20+
.settings/
21+
*.sublime-workspace
22+
23+
# Visual Studio Code
24+
.vscode/*
25+
!.vscode/settings.json
26+
!.vscode/tasks.json
27+
!.vscode/launch.json
28+
!.vscode/extensions.json
29+
.history/*
30+
31+
# Miscellaneous
32+
/.angular/cache
33+
.sass-cache/
34+
/connect.lock
35+
/coverage
36+
/libpeerconnection.log
37+
testem.log
38+
/typings
39+
40+
# System files
41+
.DS_Store
42+
Thumbs.db

‎integration/platform-server-zoneless/BUILD.bazel‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
load("//integration:index.bzl", "ng_integration_test")
2+
3+
ng_integration_test(
4+
name = "test",
5+
setup_chromium = True,
6+
)

‎integration/platform-server-zoneless/README.md‎

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
# PlatformServer
2+
3+
This project was generated with [Angular CLI](https://github.com/angular/angular-cli) version 16.0.0-rc.0.
4+
5+
## Development server
6+
7+
Run `ng serve` for a dev server. Navigate to `http://localhost:4200/`. The application will automatically reload if you change any of the source files.
8+
9+
## Code scaffolding
10+
11+
Run `ng generate component component-name` to generate a new component. You can also use `ng generate directive|pipe|service|class|guard|interface|enum|module`.
12+
13+
## Build
14+
15+
Run `ng build` to build the project. The build artifacts will be stored in the `dist/` directory.
16+
17+
## Running unit tests
18+
19+
Run `ng test` to execute the unit tests via [Karma](https://karma-runner.github.io).
20+
21+
## Running end-to-end tests
22+
23+
Run `ng e2e` to execute the end-to-end tests via a platform of your choice. To use this command, you need to first add a package that implements end-to-end testing capabilities.
24+
25+
## Further help
26+
27+
To get more help on the Angular CLI use `ng help` or go check out the [Angular CLI Overview and Command Reference](https://angular.io/cli) page.

‎integration/platform-server-zoneless/angular.json‎

Lines changed: 110 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,110 @@
1+
{
2+
"$schema": "./node_modules/@angular/cli/lib/config/schema.json",
3+
"version": 1,
4+
"newProjectRoot": "projects",
5+
"projects": {
6+
"standalone": {
7+
"projectType": "application",
8+
"schematics": {},
9+
"root": "projects/standalone",
10+
"sourceRoot": "projects/standalone/src",
11+
"prefix": "app",
12+
"architect": {
13+
"build": {
14+
"builder": "@angular/build:application",
15+
"options": {
16+
"namedChunks": true,
17+
"outputPath": "dist/standalone",
18+
"index": "projects/standalone/src/index.html",
19+
"browser": "projects/standalone/src/main.ts",
20+
"server": "projects/standalone/src/main.server.ts",
21+
"ssr": {
22+
"entry": "projects/standalone/server.ts"
23+
},
24+
"tsConfig": "projects/standalone/tsconfig.app.json",
25+
"assets": [
26+
"projects/standalone/src/favicon.ico",
27+
"projects/standalone/src/assets"
28+
],
29+
"styles": [
30+
"projects/standalone/src/styles.css"
31+
],
32+
"progress": false,
33+
"scripts": []
34+
},
35+
"configurations": {
36+
"production": {
37+
"budgets": [
38+
{
39+
"type": "initial",
40+
"maximumWarning": "500kb",
41+
"maximumError": "1mb"
42+
},
43+
{
44+
"type": "anyComponentStyle",
45+
"maximumWarning": "2kb",
46+
"maximumError": "4kb"
47+
}
48+
],
49+
"outputHashing": "all"
50+
},
51+
"development": {
52+
"optimization": false,
53+
"extractLicenses": false,
54+
"sourceMap": true
55+
}
56+
},
57+
"defaultConfiguration": "production"
58+
},
59+
"serve": {
60+
"builder": "@angular/build:dev-server",
61+
"configurations": {
62+
"production": {
63+
"buildTarget": "standalone:build:production"
64+
},
65+
"development": {
66+
"buildTarget": "standalone:build:development"
67+
}
68+
},
69+
"defaultConfiguration": "development"
70+
},
71+
"e2e": {
72+
"builder": "@angular-devkit/build-angular:private-protractor",
73+
"options": {
74+
"port": 0,
75+
"protractorConfig": "e2e/protractor.conf.js",
76+
"webdriverUpdate": false,
77+
"baseUrl": "http://localhost:4206"
78+
}
79+
},
80+
"extract-i18n": {
81+
"builder": "@angular/build:extract-i18n",
82+
"options": {
83+
"buildTarget": "standalone:build"
84+
}
85+
},
86+
"test": {
87+
"builder": "@angular-devkit/build-angular:karma",
88+
"options": {
89+
"progress": false,
90+
"tsConfig": "projects/standalone/tsconfig.spec.json",
91+
"assets": [
92+
"projects/standalone/src/favicon.ico",
93+
"projects/standalone/src/assets"
94+
],
95+
"styles": [
96+
"projects/standalone/src/styles.css"
97+
],
98+
"scripts": []
99+
}
100+
}
101+
}
102+
}
103+
},
104+
"cli": {
105+
"analytics": false,
106+
"cache": {
107+
"enabled": false
108+
}
109+
}
110+
}

‎integration/platform-server-zoneless/e2e/protractor.conf.js‎

Lines changed: 43 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,43 @@
1+
// @ts-check
2+
// Protractor configuration file, see link for more information
3+
// https://github.com/angular/protractor/blob/master/lib/config.ts
4+
const {SpecReporter} = require('jasmine-spec-reporter');
5+
6+
/**
7+
* @type { import("protractor").Config }
8+
*/
9+
exports.config = {
10+
allScriptsTimeout: 11000,
11+
specs: ['./src/**/*-spec.ts'],
12+
chromeDriver: process.env.CHROMEDRIVER_BIN,
13+
SELENIUM_PROMISE_MANAGER: false,
14+
capabilities: {
15+
browserName: 'chrome',
16+
chromeOptions: {
17+
binary: process.env.CHROME_BIN,
18+
// See /integration/README.md#browser-tests for more info on these args
19+
args: [
20+
'--no-sandbox',
21+
'--headless',
22+
'--disable-gpu',
23+
'--disable-dev-shm-usage',
24+
'--hide-scrollbars',
25+
'--mute-audio',
26+
],
27+
},
28+
},
29+
directConnect: true,
30+
baseUrl: 'http://localhost:4206/',
31+
framework: 'jasmine',
32+
jasmineNodeOpts: {
33+
showColors: true,
34+
defaultTimeoutInterval: 30000,
35+
print: function () {},
36+
},
37+
onPrepare() {
38+
require('ts-node').register({
39+
project: require('path').join(__dirname, './tsconfig.json'),
40+
});
41+
jasmine.getEnv().addReporter(new SpecReporter({spec: {displayStacktrace: true}}));
42+
},
43+
};

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

Lines changed: 27 additions & 0 deletions
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-zoneless/e2e/src/helloworld-spec.ts‎

Lines changed: 38 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
import {browser, by, element} from 'protractor';
2+
import {bootstrapClientApp, navigateTo, verifyNoBrowserErrors} from './util';
3+
4+
describe('Hello world 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('helloworld');
11+
});
12+
13+
afterEach(async () => {
14+
// Make sure there were no client side errors.
15+
await verifyNoBrowserErrors();
16+
});
17+
18+
it('should display: Hello world!', async () => {
19+
// Test the contents from the server.
20+
expect(await element(by.css('div')).getText()).toEqual('Hello world!');
21+
22+
await bootstrapClientApp();
23+
24+
// Retest the contents after the client bootstraps.
25+
expect(await element(by.css('div')).getText()).toEqual('Hello world!');
26+
});
27+
28+
it('should re-use component styles rendered on the server', async () => {
29+
expect(await element(by.css('style[ng-app-id="ng"]')).getText()).not.toBeNull();
30+
31+
await bootstrapClientApp();
32+
33+
// Make sure the server styles get reused by the client.
34+
expect(await element(by.css('style[ng-app-id="ng"]')).isPresent()).toBeFalsy();
35+
expect(await element(by.css('style[ng-style-reused]')).isPresent()).toBeTruthy();
36+
expect(await element(by.css('style')).getText()).toBe('');
37+
});
38+
});

‎integration/platform-server-zoneless/e2e/src/http-transferstate-lazy-on-init-spec.ts‎

Lines changed: 44 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,44 @@
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+
9+
import {browser, by, element} from 'protractor';
10+
import {bootstrapClientApp, navigateTo, verifyNoBrowserErrors} from './util';
11+
12+
describe('Http TransferState Lazy On Init', () => {
13+
beforeEach(async () => {
14+
// Don't wait for Angular since it is not bootstrapped automatically.
15+
await browser.waitForAngularEnabled(false);
16+
17+
// Load the page without waiting for Angular since it is not bootstrapped automatically.
18+
await navigateTo('http-transferstate-lazy-on-init');
19+
});
20+
21+
afterEach(async () => {
22+
// Make sure there were no client side errors.
23+
await verifyNoBrowserErrors();
24+
});
25+
26+
it('should transfer http state in lazy component', async () => {
27+
// Test the contents from the server.
28+
expect(await element(by.css('div.one')).getText()).toBe('API 1 response');
29+
30+
// Bootstrap the client side app and retest the contents
31+
await bootstrapClientApp();
32+
expect(await element(by.css('div.one')).getText()).toBe('API 1 response');
33+
34+
// Validate that there were no HTTP calls to '/api'.
35+
const requests = await browser.executeScript(() => {
36+
return performance.getEntriesByType('resource');
37+
});
38+
const apiRequests = (requests as {name: string}[])
39+
.filter(({name}) => name.includes('/api'))
40+
.map(({name}) => name);
41+
42+
expect(apiRequests).toEqual([]);
43+
});
44+
});

0 commit comments

Comments
 (0)