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:
parent
647d7bdd88
commit
10a1e1974b
|
@ -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;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -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;
|
||||||
|
|
Loading…
Reference in New Issue