fix(platform-browser): debug element query predicates not compatible with strictFunctionTypes (#30993)

Currently developers can use the `By` class to construct common
`DebugElement` query predicates. e.g. `By.directive(MyDirective)`.

The `directive()` and `all()` predicates are currently returning
a predicate that works for `DebugElement` nodes. This return type
is too strict since the predicate is not specific to `DebugElement`
instances and can also apply to `DebugNode` instances.

Meaning that developers are currently able to use the `directive()`
predicate when using `queryAllNodes()`. This is a common practice
but will break when the project is compiled with TypeScript's
`--strictFunctionTypes` flag as the `DebugElement` predicate type
is not assignable to predicates for `DebugNode`. In order to make
these predicates usable with `--strictFuntionTypes` enabled, we
adjust the predicate type to reflect what is actually needed for
evaluation of the predicate.

PR Close #30993
This commit is contained in:
Paul Gschwendtner 2019-06-14 13:12:34 +02:00 committed by Miško Hevery
parent 647d7bdd88
commit 10a1e1974b
2 changed files with 8 additions and 8 deletions

View File

@ -6,7 +6,7 @@
* found in the LICENSE file at https://angular.io/license * found in the LICENSE file at https://angular.io/license
*/ */
import {DebugElement, Predicate, Type} from '@angular/core'; import {DebugElement, DebugNode, Predicate, Type} from '@angular/core';
import {getDOM} from '../../dom/dom_adapter'; import {getDOM} from '../../dom/dom_adapter';
@ -18,14 +18,14 @@ import {getDOM} from '../../dom/dom_adapter';
*/ */
export class By { export class By {
/** /**
* Match all elements. * Match all nodes.
* *
* @usageNotes * @usageNotes
* ### Example * ### Example
* *
* {@example platform-browser/dom/debug/ts/by/by.ts region='by_all'} * {@example platform-browser/dom/debug/ts/by/by.ts region='by_all'}
*/ */
static all(): Predicate<DebugElement> { return (debugElement) => true; } static all(): Predicate<DebugNode> { return () => true; }
/** /**
* Match elements by the given CSS selector. * Match elements by the given CSS selector.
@ -44,14 +44,14 @@ export class By {
} }
/** /**
* Match elements that have the given directive present. * Match nodes that have the given directive present.
* *
* @usageNotes * @usageNotes
* ### Example * ### Example
* *
* {@example platform-browser/dom/debug/ts/by/by.ts region='by_directive'} * {@example platform-browser/dom/debug/ts/by/by.ts region='by_directive'}
*/ */
static directive(type: Type<any>): Predicate<DebugElement> { static directive(type: Type<any>): Predicate<DebugNode> {
return (debugElement) => debugElement.providerTokens !.indexOf(type) !== -1; return (debugNode) => debugNode.providerTokens !.indexOf(type) !== -1;
} }
} }

View File

@ -9,9 +9,9 @@ export declare class BrowserTransferStateModule {
} }
export declare class By { export declare class By {
static all(): Predicate<DebugElement>; static all(): Predicate<DebugNode>;
static css(selector: string): Predicate<DebugElement>; static css(selector: string): Predicate<DebugElement>;
static directive(type: Type<any>): Predicate<DebugElement>; static directive(type: Type<any>): Predicate<DebugNode>;
} }
export declare function disableDebugTools(): void; export declare function disableDebugTools(): void;