angular-cn/packages/platform-server/init/test/shims_spec.ts

42 lines
1.2 KiB
TypeScript
Raw Normal View History

feat(platform-server): allow shimming the global env sooner (#40559) `@angular/platform-server` provides the foundation for rendering an Angular app on the server. In order to achieve that, it uses a server-side DOM implementation (currently [domino][1]). For rendering on the server to work as closely as possible to running the app on the browser, we need to make DOM globals (such as `Element`, `HTMLElement`, etc.), which are normally provided by the browser, available as globals on the server as well. Currently, `@angular/platform-server` achieves this by extending the `global` object with the DOM implementation provided by `domino`. This assignment happens in the [setDomTypes()][2] function, which is [called in a `PLATFORM_INITIALIZER`][3]. While this works in most cases, there are some scenarios where the DOM globals are needed sooner (i.e. before initializing the platform). See, for example, #24551 and #39950 for more details on such issues. This commit provides a way to solve this problem by exposing a side-effect-ful entry-point (`@angular/platform-server/init`), that shims the `global` object with DOM globals. People will be able to import this entry-point in their server-rendered apps before bootstrapping the app (for example, in their `main.server.ts` file). (See also [#39950 (comment)][4].) In a future update, the [`universal` schematics][5] will include such an import by default in newly generated projects. [1]: https://www.npmjs.com/package/domino [2]: https://github.com/angular/angular/blob/0fc8466f1be392917e0c/packages/platform-server/src/domino_adapter.ts#L17-L21 [3]: https://github.com/angular/angular/blob/0fc8466f1be392917e0c/packages/platform-server/src/server.ts#L33 [4]: https://github.com/angular/angular/issues/39950#issuecomment-747598403 [5]: https://github.com/angular/angular-cli/blob/cc51432661eb4ab4b6a3/packages/schematics/angular/universal PR Close #40559
2021-02-11 12:24:52 -05:00
/**
* @license
* Copyright Google LLC All Rights Reserved.
*
* Use of this source code is governed by an MIT-style license that can be
* found in the LICENSE file at https://angular.io/license
*/
import {applyShims} from '../src/shims';
describe('applyShims()', () => {
if (isBrowser) return; // NODE only
const domino = require('domino');
const globalClone = {...global};
afterEach(() => {
// Un-patch `global`.
const currentProps = Object.keys(global) as (keyof NodeJS.Global)[];
for (const prop of currentProps) {
if (globalClone.hasOwnProperty(prop)) {
(global as any)[prop] = globalClone[prop];
} else {
delete (global as any)[prop];
}
}
});
it('should load `domino.impl` onto `global`', () => {
expect(global).not.toEqual(jasmine.objectContaining(domino.impl));
applyShims();
expect(global).toEqual(jasmine.objectContaining(domino.impl));
});
it('should define `KeyboardEvent` on `global`', () => {
expect((global as any).KeyboardEvent).not.toBe((domino.impl as any).Event);
applyShims();
expect((global as any).KeyboardEvent).toBe((domino.impl as any).Event);
});
});