cargdev/angular
1
0
Fork 0
Code Issues 6 Pull Requests Actions Packages Projects Releases Wiki Activity

feat(ivy): TestBed support for reusing non-exported components (#30578)

Browse Source 
This is a new feature of the Ivy TestBed.

A common user pattern is to test one component with another. This is
commonly done by creating a `TestFixture` component which exercises the
main component under test.

This pattern is more difficult if the component under test is declared in an
NgModule but not exported. In this case, overriding the module is necessary.

In g3 (and View Engine), it's possible to use an NgSummary to override the
recompilation of a component, and depend on its AOT compiled factory. The
way this is implemented, however, specifying a summary for a module
effectively overrides much of the TestBed's other behavior. For example, the
following is legal:

```typescript
TestBed.configureTestingModule({
  declarations: [FooCmp, TestFixture],
  imports: [FooModule],
  aotSummaries: [FooModuleNgSummary],
});
```

Here, `FooCmp` is declared in both the testing module and in the imported
`FooModule`. However, because the summary is provided, `FooCmp` is not
compiled within the context of the testing module, but _is_ made available
for `TestFixture` to use, even if it wasn't originally exported from
`FooModule`.

This pattern breaks in Ivy - because summaries are a no-op, this amounts
to a true double declaration of `FooCmp` which raises an error.

Fixing this in user code is possible, but is difficult to do in an
automated or backwards compatible way. An alternative solution is
implemented in this PR.

This PR attempts to capture the user intent of the following previously
unsupported configuration:

```typescript
TestBed.configureTestingModule({
  declarations: [FooCmp, TestFixture],
  imports: [FooModule],
});
```

Note that this is the same as the configuration above in Ivy, as the
`aotSummaries` value provided has no effect.

The user intent here is interpreted as follows:

1) `FooCmp` is a pre-existing component that's being used in the test
   (via import of `FooModule`). It may or may not be exported by this
   module.

2) `FooCmp` should be part of the testing module's scope. That is, it
   should be visible to `TestFixture`. This is because it's listed in
   `declarations`.

This feature effectively makes the `TestBed` testing module special. It's
able to declare components without compiling them, if they're already
compiled (or configured to be compiled) in the imports. And crucially, the
behavior matches the first example with the summary, making Ivy backwards
compatible with View Engine for tests that use summaries.

PR Close #30578
This commit is contained in:
Alex Rickabaugh
2019-05-20 16:49:20 -07:00
committed by Matias Niemelä
parent d5f96a887d
commit deb77bd3df
3 changed files with 157 additions and 33 deletions
Download Patch File Download Diff File Expand all files Collapse all files

37
packages/core/src/render3/jit/module.ts
View File

@ -94,8 +94,13 @@ export function compileNgModule(moduleType: Type<any>, ngModule: NgModule = {}):
/**
* Compiles and adds the `ngModuleDef` and `ngInjectorDef` properties to the module class.
*
* It's possible to compile a module via this API which will allow duplicate declarations in its
* root.
*/
export function compileNgModuleDefs(moduleType: NgModuleType, ngModule: NgModule): void {
export function compileNgModuleDefs(
moduleType: NgModuleType, ngModule: NgModule,
allowDuplicateDeclarationsInRoot: boolean = false): void {
ngDevMode && assertDefined(moduleType, 'Required value moduleType');
ngDevMode && assertDefined(ngModule, 'Required value ngModule');
const declarations: Type<any>[] = flatten(ngModule.declarations || EMPTY_ARRAY);
@ -129,7 +134,8 @@ export function compileNgModuleDefs(moduleType: NgModuleType, ngModule: NgModule
Object.defineProperty(moduleType, NG_INJECTOR_DEF, {
get: () => {
if (ngInjectorDef === null) {
ngDevMode && verifySemanticsOfNgModuleDef(moduleType as any as NgModuleType);
ngDevMode && verifySemanticsOfNgModuleDef(
moduleType as any as NgModuleType, allowDuplicateDeclarationsInRoot);
const meta: R3InjectorMetadataFacade = {
name: moduleType.name,
type: moduleType,
@ -150,7 +156,8 @@ export function compileNgModuleDefs(moduleType: NgModuleType, ngModule: NgModule
});
}
function verifySemanticsOfNgModuleDef(moduleType: NgModuleType): void {
function verifySemanticsOfNgModuleDef(
moduleType: NgModuleType, allowDuplicateDeclarationsInRoot: boolean): void {
if (verifiedNgModule.get(moduleType)) return;
verifiedNgModule.set(moduleType, true);
moduleType = resolveForwardRef(moduleType);
@ -158,7 +165,9 @@ function verifySemanticsOfNgModuleDef(moduleType: NgModuleType): void {
const errors: string[] = [];
const declarations = maybeUnwrapFn(ngModuleDef.declarations);
const imports = maybeUnwrapFn(ngModuleDef.imports);
flatten(imports).map(unwrapModuleWithProvidersImports).forEach(verifySemanticsOfNgModuleDef);
flatten(imports)
.map(unwrapModuleWithProvidersImports)
.forEach(mod => verifySemanticsOfNgModuleDef(mod, false));
const exports = maybeUnwrapFn(ngModuleDef.exports);
declarations.forEach(verifyDeclarationsHaveDefinitions);
const combinedDeclarations: Type<any>[] = [
@ -166,7 +175,7 @@ function verifySemanticsOfNgModuleDef(moduleType: NgModuleType): void {
...flatten(imports.map(computeCombinedExports)).map(resolveForwardRef),
];
exports.forEach(verifyExportsAreDeclaredOrReExported);
declarations.forEach(verifyDeclarationIsUnique);
declarations.forEach(decl => verifyDeclarationIsUnique(decl, allowDuplicateDeclarationsInRoot));
declarations.forEach(verifyComponentEntryComponentsIsPartOfNgModule);
const ngModule = getAnnotation<NgModule>(moduleType, 'NgModule');
@ -174,7 +183,7 @@ function verifySemanticsOfNgModuleDef(moduleType: NgModuleType): void {
ngModule.imports &&
flatten(ngModule.imports)
.map(unwrapModuleWithProvidersImports)
.forEach(verifySemanticsOfNgModuleDef);
.forEach(mod => verifySemanticsOfNgModuleDef(mod, false));
ngModule.bootstrap && ngModule.bootstrap.forEach(verifyCorrectBootstrapType);
ngModule.bootstrap && ngModule.bootstrap.forEach(verifyComponentIsPartOfNgModule);
ngModule.entryComponents && ngModule.entryComponents.forEach(verifyComponentIsPartOfNgModule);
@ -209,15 +218,17 @@ function verifySemanticsOfNgModuleDef(moduleType: NgModuleType): void {
}
}
function verifyDeclarationIsUnique(type: Type<any>) {
function verifyDeclarationIsUnique(type: Type<any>, suppressErrors: boolean) {
type = resolveForwardRef(type);
const existingModule = ownerNgModule.get(type);
if (existingModule && existingModule !== moduleType) {
const modules = [existingModule, moduleType].map(stringifyForError).sort();
errors.push(
`Type ${stringifyForError(type)} is part of the declarations of 2 modules: ${modules[0]} and ${modules[1]}! ` +
`Please consider moving ${stringifyForError(type)} to a higher module that imports ${modules[0]} and ${modules[1]}. ` +
`You can also create a new NgModule that exports and includes ${stringifyForError(type)} then import that NgModule in ${modules[0]} and ${modules[1]}.`);
if (!suppressErrors) {
const modules = [existingModule, moduleType].map(stringifyForError).sort();
errors.push(
`Type ${stringifyForError(type)} is part of the declarations of 2 modules: ${modules[0]} and ${modules[1]}! ` +
`Please consider moving ${stringifyForError(type)} to a higher module that imports ${modules[0]} and ${modules[1]}. ` +
`You can also create a new NgModule that exports and includes ${stringifyForError(type)} then import that NgModule in ${modules[0]} and ${modules[1]}.`);
}
} else {
// Mark type as having owner.
ownerNgModule.set(type, moduleType);
@ -312,7 +323,7 @@ function computeCombinedExports(type: Type<any>): Type<any>[] {
return [...flatten(maybeUnwrapFn(ngModuleDef.exports).map((type) => {
const ngModuleDef = getNgModuleDef(type);
if (ngModuleDef) {
verifySemanticsOfNgModuleDef(type as any as NgModuleType);
verifySemanticsOfNgModuleDef(type as any as NgModuleType, false);
return computeCombinedExports(type);
} else {
return type;