refactor(compiler-cli): TemplateTypeChecker with checkTypeOfAttributes=false should still work (#39537)
When the compiler option `checkTypeOfAttributes` is `false`, we should still be able to produce type information from the `TemplateTypeChecker`. The current behavior ignores all attributes that map to directive inputs. This commit includes those attribute bindings in the TCB but adds the "ignore for diagnostics" marker so they do not produce errors. This way, consumers of the TTC (the Language Service) can still get valid information about these attributes even when the user has configured the compiler to not produce diagnostics/errors for them. PR Close #39537
This commit is contained in:
Andrew Scott
Misko Hevery
parent
86fdc77ddf
commit
a694838c41
|
|
@ -512,6 +512,11 @@ class TcbDirectiveCtorOp extends TcbOp {
|
|||
|
||||
const inputs = getBoundInputs(this.dir, this.node, this.tcb);
|
||||
for (const input of inputs) {
|
||||
// Skip text attributes if configured to do so.
|
||||
if (!this.tcb.env.config.checkTypeOfAttributes &&
|
||||
input.attribute instanceof TmplAstTextAttribute) {
|
||||
continue;
|
||||
}
|
||||
for (const fieldName of input.fieldNames) {
|
||||
// Skip the field if an attribute has already been bound to it; we can't have a duplicate
|
||||
// key in the type constructor call.
|
||||
|
|
@ -654,6 +659,12 @@ class TcbDirectiveInputsOp extends TcbOp {
|
|||
}
|
||||
|
||||
addParseSpanInfo(assignment, input.attribute.sourceSpan);
|
||||
// Ignore diagnostics for text attributes if configured to do so.
|
||||
if (!this.tcb.env.config.checkTypeOfAttributes &&
|
||||
input.attribute instanceof TmplAstTextAttribute) {
|
||||
markIgnoreDiagnostics(assignment);
|
||||
}
|
||||
|
||||
this.scope.addStatement(ts.createExpressionStatement(assignment));
|
||||
}
|
||||
|
||||
|
|
@ -1732,11 +1743,6 @@ function getBoundInputs(
|
|||
return;
|
||||
}
|
||||
|
||||
// Skip text attributes if configured to do so.
|
||||
if (!tcb.env.config.checkTypeOfAttributes && attr instanceof TmplAstTextAttribute) {
|
||||
return;
|
||||
}
|
||||
|
||||
// Skip the attribute if the directive does not have an input for it.
|
||||
const inputs = directive.inputs.getByBindingPropertyName(attr.name);
|
||||
if (inputs === null) {
|
||||
|
|
|
|||
|
|
@ -9,7 +9,7 @@
|
|||
import {ASTWithSource, Binary, BindingPipe, Conditional, Interpolation, PropertyRead, TmplAstBoundAttribute, TmplAstBoundText, TmplAstElement, TmplAstNode, TmplAstReference, TmplAstTemplate} from '@angular/compiler';
|
||||
import * as ts from 'typescript';
|
||||
|
||||
import {absoluteFrom, getSourceFileOrError} from '../../file_system';
|
||||
import {absoluteFrom, AbsoluteFsPath, getSourceFileOrError} from '../../file_system';
|
||||
import {runInEachFileSystem} from '../../file_system/testing';
|
||||
import {ClassDeclaration} from '../../reflection';
|
||||
import {DirectiveSymbol, DomBindingSymbol, ElementSymbol, ExpressionSymbol, InputBindingSymbol, OutputBindingSymbol, ReferenceSymbol, Symbol, SymbolKind, TemplateSymbol, TemplateTypeChecker, TypeCheckingConfig, VariableSymbol} from '../api';
|
||||
|
|
@ -66,44 +66,61 @@ runInEachFileSystem(() => {
|
|||
expect(beforeSymbol).not.toBe(afterSymbol);
|
||||
});
|
||||
|
||||
it('should get a symbol for text attributes corresponding with a directive input', () => {
|
||||
const fileName = absoluteFrom('/main.ts');
|
||||
const dirFile = absoluteFrom('/dir.ts');
|
||||
const templateString = `<div name="helloWorld"></div>`;
|
||||
const {templateTypeChecker, program} = setup(
|
||||
[
|
||||
{
|
||||
fileName,
|
||||
templates: {'Cmp': templateString},
|
||||
declarations: [{
|
||||
name: 'NameDiv',
|
||||
selector: 'div[name]',
|
||||
file: dirFile,
|
||||
type: 'directive',
|
||||
inputs: {name: 'name'},
|
||||
}]
|
||||
},
|
||||
{
|
||||
fileName: dirFile,
|
||||
source: `export class NameDiv {name!: string;}`,
|
||||
templates: {},
|
||||
}
|
||||
],
|
||||
);
|
||||
const sf = getSourceFileOrError(program, fileName);
|
||||
const cmp = getClass(sf, 'Cmp');
|
||||
const {attributes} = getAstElements(templateTypeChecker, cmp)[0];
|
||||
describe('should get a symbol for text attributes corresponding with a directive input', () => {
|
||||
let fileName: AbsoluteFsPath;
|
||||
let targets: TypeCheckingTarget[];
|
||||
beforeEach(() => {
|
||||
fileName = absoluteFrom('/main.ts');
|
||||
const dirFile = absoluteFrom('/dir.ts');
|
||||
const templateString = `<div name="helloWorld"></div>`;
|
||||
targets = [
|
||||
{
|
||||
fileName,
|
||||
templates: {'Cmp': templateString} as {[key: string]: string},
|
||||
declarations: [{
|
||||
name: 'NameDiv',
|
||||
selector: 'div[name]',
|
||||
file: dirFile,
|
||||
type: 'directive' as const,
|
||||
inputs: {name: 'name'},
|
||||
}]
|
||||
},
|
||||
{
|
||||
fileName: dirFile,
|
||||
source: `export class NameDiv {name!: string;}`,
|
||||
templates: {},
|
||||
}
|
||||
];
|
||||
});
|
||||
|
||||
const symbol = templateTypeChecker.getSymbolOfNode(attributes[0], cmp)!;
|
||||
assertInputBindingSymbol(symbol);
|
||||
expect(
|
||||
(symbol.bindings[0].tsSymbol!.declarations[0] as ts.PropertyDeclaration).name.getText())
|
||||
.toEqual('name');
|
||||
it('checkTypeOfAttributes = true', () => {
|
||||
const {templateTypeChecker, program} = setup(targets, {checkTypeOfAttributes: true});
|
||||
const sf = getSourceFileOrError(program, fileName);
|
||||
const cmp = getClass(sf, 'Cmp');
|
||||
const {attributes} = getAstElements(templateTypeChecker, cmp)[0];
|
||||
const symbol = templateTypeChecker.getSymbolOfNode(attributes[0], cmp)!;
|
||||
assertInputBindingSymbol(symbol);
|
||||
expect(
|
||||
(symbol.bindings[0].tsSymbol!.declarations[0] as ts.PropertyDeclaration).name.getText())
|
||||
.toEqual('name');
|
||||
|
||||
// Ensure we can go back to the original location using the shim location
|
||||
const mapping =
|
||||
templateTypeChecker.getTemplateMappingAtShimLocation(symbol.bindings[0].shimLocation)!;
|
||||
expect(mapping.span.toString()).toEqual('name');
|
||||
// Ensure we can go back to the original location using the shim location
|
||||
const mapping =
|
||||
templateTypeChecker.getTemplateMappingAtShimLocation(symbol.bindings[0].shimLocation)!;
|
||||
expect(mapping.span.toString()).toEqual('name');
|
||||
});
|
||||
|
||||
it('checkTypeOfAttributes = false', () => {
|
||||
const {templateTypeChecker, program} = setup(targets, {checkTypeOfAttributes: false});
|
||||
const sf = getSourceFileOrError(program, fileName);
|
||||
const cmp = getClass(sf, 'Cmp');
|
||||
const {attributes} = getAstElements(templateTypeChecker, cmp)[0];
|
||||
const symbol = templateTypeChecker.getSymbolOfNode(attributes[0], cmp)!;
|
||||
assertInputBindingSymbol(symbol);
|
||||
expect(
|
||||
(symbol.bindings[0].tsSymbol!.declarations[0] as ts.PropertyDeclaration).name.getText())
|
||||
.toEqual('name');
|
||||
});
|
||||
});
|
||||
|
||||
describe('templates', () => {
|
||||
|
|
|
|||
|
|
@ -104,363 +104,379 @@ function quickInfoSkeleton(): TestFile[] {
|
|||
describe('quick info', () => {
|
||||
let env: LanguageServiceTestEnvironment;
|
||||
|
||||
beforeEach(() => {
|
||||
initMockFileSystem('Native');
|
||||
env = LanguageServiceTestEnvironment.setup(quickInfoSkeleton());
|
||||
});
|
||||
|
||||
describe('elements', () => {
|
||||
it('should work for native elements', () => {
|
||||
expectQuickInfo({
|
||||
templateOverride: `<butt¦on></button>`,
|
||||
expectedSpanText: '<button></button>',
|
||||
expectedDisplayString: '(element) button: HTMLButtonElement'
|
||||
});
|
||||
describe('strict templates (happy path)', () => {
|
||||
beforeEach(() => {
|
||||
initMockFileSystem('Native');
|
||||
env = LanguageServiceTestEnvironment.setup(quickInfoSkeleton());
|
||||
});
|
||||
|
||||
it('should work for directives which match native element tags', () => {
|
||||
expectQuickInfo({
|
||||
templateOverride: `<butt¦on compound custom-button></button>`,
|
||||
expectedSpanText: '<button compound custom-button></button>',
|
||||
expectedDisplayString: '(directive) AppModule.CompoundCustomButtonDirective'
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
describe('templates', () => {
|
||||
it('should return undefined for ng-templates', () => {
|
||||
const {documentation} = expectQuickInfo({
|
||||
templateOverride: `<ng-templ¦ate></ng-template>`,
|
||||
expectedSpanText: '<ng-template></ng-template>',
|
||||
expectedDisplayString: '(template) ng-template'
|
||||
});
|
||||
expect(toText(documentation))
|
||||
.toContain('The `<ng-template>` is an Angular element for rendering HTML.');
|
||||
});
|
||||
});
|
||||
|
||||
describe('directives', () => {
|
||||
it('should work for directives', () => {
|
||||
expectQuickInfo({
|
||||
templateOverride: `<div string-model¦></div>`,
|
||||
expectedSpanText: 'string-model',
|
||||
expectedDisplayString: '(directive) AppModule.StringModel'
|
||||
});
|
||||
});
|
||||
|
||||
it('should work for components', () => {
|
||||
const {documentation} = expectQuickInfo({
|
||||
templateOverride: `<t¦est-comp></test-comp>`,
|
||||
expectedSpanText: '<test-comp></test-comp>',
|
||||
expectedDisplayString: '(component) AppModule.TestComponent'
|
||||
});
|
||||
expect(toText(documentation)).toBe('This Component provides the `test-comp` selector.');
|
||||
});
|
||||
|
||||
it('should work for structural directives', () => {
|
||||
const {documentation} = expectQuickInfo({
|
||||
templateOverride: `<div *¦ngFor="let item of heroes"></div>`,
|
||||
expectedSpanText: 'ngFor',
|
||||
expectedDisplayString: '(directive) NgForOf<Hero, Hero[]>'
|
||||
});
|
||||
expect(toText(documentation)).toContain('A fake version of the NgFor directive.');
|
||||
});
|
||||
|
||||
it('should work for directives with compound selectors, some of which are bindings', () => {
|
||||
expectQuickInfo({
|
||||
templateOverride: `<ng-template ngF¦or let-hero [ngForOf]="heroes">{{hero}}</ng-template>`,
|
||||
expectedSpanText: 'ngFor',
|
||||
expectedDisplayString: '(directive) NgForOf<Hero, Hero[]>'
|
||||
});
|
||||
});
|
||||
|
||||
it('should work for data-let- syntax', () => {
|
||||
expectQuickInfo({
|
||||
templateOverride:
|
||||
`<ng-template ngFor data-let-he¦ro [ngForOf]="heroes">{{hero}}</ng-template>`,
|
||||
expectedSpanText: 'hero',
|
||||
expectedDisplayString: '(variable) hero: Hero'
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
describe('bindings', () => {
|
||||
describe('inputs', () => {
|
||||
it('should work for input providers', () => {
|
||||
describe('elements', () => {
|
||||
it('should work for native elements', () => {
|
||||
expectQuickInfo({
|
||||
templateOverride: `<test-comp [tcN¦ame]="name"></test-comp>`,
|
||||
expectedSpanText: 'tcName',
|
||||
expectedDisplayString: '(property) TestComponent.name: string'
|
||||
templateOverride: `<butt¦on></button>`,
|
||||
expectedSpanText: '<button></button>',
|
||||
expectedDisplayString: '(element) button: HTMLButtonElement'
|
||||
});
|
||||
});
|
||||
|
||||
it('should work for bind- syntax', () => {
|
||||
it('should work for directives which match native element tags', () => {
|
||||
expectQuickInfo({
|
||||
templateOverride: `<test-comp bind-tcN¦ame="name"></test-comp>`,
|
||||
expectedSpanText: 'tcName',
|
||||
expectedDisplayString: '(property) TestComponent.name: string'
|
||||
templateOverride: `<butt¦on compound custom-button></button>`,
|
||||
expectedSpanText: '<button compound custom-button></button>',
|
||||
expectedDisplayString: '(directive) AppModule.CompoundCustomButtonDirective'
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
describe('templates', () => {
|
||||
it('should return undefined for ng-templates', () => {
|
||||
const {documentation} = expectQuickInfo({
|
||||
templateOverride: `<ng-templ¦ate></ng-template>`,
|
||||
expectedSpanText: '<ng-template></ng-template>',
|
||||
expectedDisplayString: '(template) ng-template'
|
||||
});
|
||||
expect(toText(documentation))
|
||||
.toContain('The `<ng-template>` is an Angular element for rendering HTML.');
|
||||
});
|
||||
});
|
||||
|
||||
describe('directives', () => {
|
||||
it('should work for directives', () => {
|
||||
expectQuickInfo({
|
||||
templateOverride: `<test-comp data-bind-tcN¦ame="name"></test-comp>`,
|
||||
expectedSpanText: 'tcName',
|
||||
expectedDisplayString: '(property) TestComponent.name: string'
|
||||
templateOverride: `<div string-model¦></div>`,
|
||||
expectedSpanText: 'string-model',
|
||||
expectedDisplayString: '(directive) AppModule.StringModel'
|
||||
});
|
||||
});
|
||||
|
||||
it('should work for structural directive inputs ngForTrackBy', () => {
|
||||
it('should work for components', () => {
|
||||
const {documentation} = expectQuickInfo({
|
||||
templateOverride: `<t¦est-comp></test-comp>`,
|
||||
expectedSpanText: '<test-comp></test-comp>',
|
||||
expectedDisplayString: '(component) AppModule.TestComponent'
|
||||
});
|
||||
expect(toText(documentation)).toBe('This Component provides the `test-comp` selector.');
|
||||
});
|
||||
|
||||
it('should work for structural directives', () => {
|
||||
const {documentation} = expectQuickInfo({
|
||||
templateOverride: `<div *¦ngFor="let item of heroes"></div>`,
|
||||
expectedSpanText: 'ngFor',
|
||||
expectedDisplayString: '(directive) NgForOf<Hero, Hero[]>'
|
||||
});
|
||||
expect(toText(documentation)).toContain('A fake version of the NgFor directive.');
|
||||
});
|
||||
|
||||
it('should work for directives with compound selectors, some of which are bindings', () => {
|
||||
expectQuickInfo({
|
||||
templateOverride: `<div *ngFor="let item of heroes; tr¦ackBy: trackByFn;"></div>`,
|
||||
expectedSpanText: 'trackBy',
|
||||
templateOverride:
|
||||
`<ng-template ngF¦or let-hero [ngForOf]="heroes">{{hero}}</ng-template>`,
|
||||
expectedSpanText: 'ngFor',
|
||||
expectedDisplayString: '(directive) NgForOf<Hero, Hero[]>'
|
||||
});
|
||||
});
|
||||
|
||||
it('should work for data-let- syntax', () => {
|
||||
expectQuickInfo({
|
||||
templateOverride:
|
||||
`<ng-template ngFor data-let-he¦ro [ngForOf]="heroes">{{hero}}</ng-template>`,
|
||||
expectedSpanText: 'hero',
|
||||
expectedDisplayString: '(variable) hero: Hero'
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
describe('bindings', () => {
|
||||
describe('inputs', () => {
|
||||
it('should work for input providers', () => {
|
||||
expectQuickInfo({
|
||||
templateOverride: `<test-comp [tcN¦ame]="name"></test-comp>`,
|
||||
expectedSpanText: 'tcName',
|
||||
expectedDisplayString: '(property) TestComponent.name: string'
|
||||
});
|
||||
});
|
||||
|
||||
it('should work for bind- syntax', () => {
|
||||
expectQuickInfo({
|
||||
templateOverride: `<test-comp bind-tcN¦ame="name"></test-comp>`,
|
||||
expectedSpanText: 'tcName',
|
||||
expectedDisplayString: '(property) TestComponent.name: string'
|
||||
});
|
||||
expectQuickInfo({
|
||||
templateOverride: `<test-comp data-bind-tcN¦ame="name"></test-comp>`,
|
||||
expectedSpanText: 'tcName',
|
||||
expectedDisplayString: '(property) TestComponent.name: string'
|
||||
});
|
||||
});
|
||||
|
||||
it('should work for structural directive inputs ngForTrackBy', () => {
|
||||
expectQuickInfo({
|
||||
templateOverride: `<div *ngFor="let item of heroes; tr¦ackBy: trackByFn;"></div>`,
|
||||
expectedSpanText: 'trackBy',
|
||||
expectedDisplayString:
|
||||
'(property) NgForOf<Hero, Hero[]>.ngForTrackBy: TrackByFunction<Hero>'
|
||||
});
|
||||
});
|
||||
|
||||
it('should work for structural directive inputs ngForOf', () => {
|
||||
expectQuickInfo({
|
||||
templateOverride: `<div *ngFor="let item o¦f heroes; trackBy: trackByFn;"></div>`,
|
||||
expectedSpanText: 'of',
|
||||
expectedDisplayString:
|
||||
'(property) NgForOf<Hero, Hero[]>.ngForOf: Hero[] | (Hero[] & Iterable<Hero>) | null | undefined'
|
||||
});
|
||||
});
|
||||
|
||||
it('should work for two-way binding providers', () => {
|
||||
expectQuickInfo({
|
||||
templateOverride: `<test-comp string-model [(mo¦del)]="title"></test-comp>`,
|
||||
expectedSpanText: 'model',
|
||||
expectedDisplayString: '(property) StringModel.model: string'
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
describe('outputs', () => {
|
||||
it('should work for event providers', () => {
|
||||
expectQuickInfo({
|
||||
templateOverride: `<test-comp (te¦st)="myClick($event)"></test-comp>`,
|
||||
expectedSpanText: 'test',
|
||||
expectedDisplayString: '(event) TestComponent.testEvent: EventEmitter<string>'
|
||||
});
|
||||
});
|
||||
|
||||
it('should work for on- syntax binding', () => {
|
||||
expectQuickInfo({
|
||||
templateOverride: `<test-comp on-te¦st="myClick($event)"></test-comp>`,
|
||||
expectedSpanText: 'test',
|
||||
expectedDisplayString: '(event) TestComponent.testEvent: EventEmitter<string>'
|
||||
});
|
||||
expectQuickInfo({
|
||||
templateOverride: `<test-comp data-on-te¦st="myClick($event)"></test-comp>`,
|
||||
expectedSpanText: 'test',
|
||||
expectedDisplayString: '(event) TestComponent.testEvent: EventEmitter<string>'
|
||||
});
|
||||
});
|
||||
|
||||
it('should work for $event from EventEmitter', () => {
|
||||
expectQuickInfo({
|
||||
templateOverride: `<div string-model (modelChange)="myClick($e¦vent)"></div>`,
|
||||
expectedSpanText: '$event',
|
||||
expectedDisplayString: '(parameter) $event: string'
|
||||
});
|
||||
});
|
||||
|
||||
it('should work for $event from native element', () => {
|
||||
expectQuickInfo({
|
||||
templateOverride: `<div (click)="myClick($e¦vent)"></div>`,
|
||||
expectedSpanText: '$event',
|
||||
expectedDisplayString: '(parameter) $event: MouseEvent'
|
||||
});
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
describe('references', () => {
|
||||
it('should work for element reference declarations', () => {
|
||||
const {documentation} = expectQuickInfo({
|
||||
templateOverride: `<div #¦chart></div>`,
|
||||
expectedSpanText: 'chart',
|
||||
expectedDisplayString: '(reference) chart: HTMLDivElement'
|
||||
});
|
||||
expect(toText(documentation))
|
||||
.toEqual(
|
||||
'Provides special properties (beyond the regular HTMLElement ' +
|
||||
'interface it also has available to it by inheritance) for manipulating <div> elements.');
|
||||
});
|
||||
|
||||
it('should work for directive references', () => {
|
||||
expectQuickInfo({
|
||||
templateOverride: `<div string-model #dir¦Ref="stringModel"></div>`,
|
||||
expectedSpanText: 'dirRef',
|
||||
expectedDisplayString: '(reference) dirRef: StringModel'
|
||||
});
|
||||
});
|
||||
|
||||
it('should work for ref- syntax', () => {
|
||||
expectQuickInfo({
|
||||
templateOverride: `<div ref-ch¦art></div>`,
|
||||
expectedSpanText: 'chart',
|
||||
expectedDisplayString: '(reference) chart: HTMLDivElement'
|
||||
});
|
||||
expectQuickInfo({
|
||||
templateOverride: `<div data-ref-ch¦art></div>`,
|
||||
expectedSpanText: 'chart',
|
||||
expectedDisplayString: '(reference) chart: HTMLDivElement'
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
describe('variables', () => {
|
||||
it('should work for array members', () => {
|
||||
const {documentation} = expectQuickInfo({
|
||||
templateOverride: `<div *ngFor="let hero of heroes">{{her¦o}}</div>`,
|
||||
expectedSpanText: 'hero',
|
||||
expectedDisplayString: '(variable) hero: Hero'
|
||||
});
|
||||
expect(toText(documentation)).toEqual('The most heroic being.');
|
||||
});
|
||||
|
||||
it('should work for ReadonlyArray members (#36191)', () => {
|
||||
expectQuickInfo({
|
||||
templateOverride: `<div *ngFor="let hero of readonlyHeroes">{{her¦o}}</div>`,
|
||||
expectedSpanText: 'hero',
|
||||
expectedDisplayString: '(variable) hero: Readonly<Hero>'
|
||||
});
|
||||
});
|
||||
|
||||
it('should work for const array members (#36191)', () => {
|
||||
expectQuickInfo({
|
||||
templateOverride: `<div *ngFor="let name of constNames">{{na¦me}}</div>`,
|
||||
expectedSpanText: 'name',
|
||||
expectedDisplayString: '(variable) name: { readonly name: "name"; }'
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
describe('pipes', () => {
|
||||
it('should work for pipes', () => {
|
||||
const templateOverride = `<p>The hero's birthday is {{birthday | da¦te: "MM/dd/yy"}}</p>`;
|
||||
expectQuickInfo({
|
||||
templateOverride,
|
||||
expectedSpanText: 'date',
|
||||
expectedDisplayString:
|
||||
'(property) NgForOf<Hero, Hero[]>.ngForTrackBy: TrackByFunction<Hero>'
|
||||
});
|
||||
});
|
||||
|
||||
it('should work for structural directive inputs ngForOf', () => {
|
||||
expectQuickInfo({
|
||||
templateOverride: `<div *ngFor="let item o¦f heroes; trackBy: trackByFn;"></div>`,
|
||||
expectedSpanText: 'of',
|
||||
expectedDisplayString:
|
||||
'(property) NgForOf<Hero, Hero[]>.ngForOf: Hero[] | (Hero[] & Iterable<Hero>) | null | undefined'
|
||||
});
|
||||
});
|
||||
|
||||
it('should work for two-way binding providers', () => {
|
||||
expectQuickInfo({
|
||||
templateOverride: `<test-comp string-model [(mo¦del)]="title"></test-comp>`,
|
||||
expectedSpanText: 'model',
|
||||
expectedDisplayString: '(property) StringModel.model: string'
|
||||
'(pipe) DatePipe.transform(value: string | number | Date, format?: string | undefined, timezone?: ' +
|
||||
'string | undefined, locale?: string | undefined): string | null (+2 overloads)'
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
describe('outputs', () => {
|
||||
it('should work for event providers', () => {
|
||||
describe('expressions', () => {
|
||||
it('should find members in a text interpolation', () => {
|
||||
expectQuickInfo({
|
||||
templateOverride: `<test-comp (te¦st)="myClick($event)"></test-comp>`,
|
||||
expectedSpanText: 'test',
|
||||
expectedDisplayString: '(event) TestComponent.testEvent: EventEmitter<string>'
|
||||
templateOverride: `<div>{{ tit¦le }}</div>`,
|
||||
expectedSpanText: 'title',
|
||||
expectedDisplayString: '(property) AppCmp.title: string'
|
||||
});
|
||||
});
|
||||
|
||||
it('should work for on- syntax binding', () => {
|
||||
it('should work for accessed property reads', () => {
|
||||
expectQuickInfo({
|
||||
templateOverride: `<test-comp on-te¦st="myClick($event)"></test-comp>`,
|
||||
expectedSpanText: 'test',
|
||||
expectedDisplayString: '(event) TestComponent.testEvent: EventEmitter<string>'
|
||||
});
|
||||
expectQuickInfo({
|
||||
templateOverride: `<test-comp data-on-te¦st="myClick($event)"></test-comp>`,
|
||||
expectedSpanText: 'test',
|
||||
expectedDisplayString: '(event) TestComponent.testEvent: EventEmitter<string>'
|
||||
templateOverride: `<div>{{title.len¦gth}}</div>`,
|
||||
expectedSpanText: 'length',
|
||||
expectedDisplayString: '(property) String.length: number'
|
||||
});
|
||||
});
|
||||
|
||||
it('should work for $event from EventEmitter', () => {
|
||||
it('should find members in an attribute interpolation', () => {
|
||||
expectQuickInfo({
|
||||
templateOverride: `<div string-model (modelChange)="myClick($e¦vent)"></div>`,
|
||||
expectedSpanText: '$event',
|
||||
expectedDisplayString: '(parameter) $event: string'
|
||||
templateOverride: `<div string-model model="{{tit¦le}}"></div>`,
|
||||
expectedSpanText: 'title',
|
||||
expectedDisplayString: '(property) AppCmp.title: string'
|
||||
});
|
||||
});
|
||||
|
||||
it('should work for $event from native element', () => {
|
||||
it('should find members of input binding', () => {
|
||||
expectQuickInfo({
|
||||
templateOverride: `<div (click)="myClick($e¦vent)"></div>`,
|
||||
expectedSpanText: '$event',
|
||||
expectedDisplayString: '(parameter) $event: MouseEvent'
|
||||
templateOverride: `<test-comp [tcName]="ti¦tle"></test-comp>`,
|
||||
expectedSpanText: 'title',
|
||||
expectedDisplayString: '(property) AppCmp.title: string'
|
||||
});
|
||||
});
|
||||
|
||||
it('should find input binding on text attribute', () => {
|
||||
expectQuickInfo({
|
||||
templateOverride: `<test-comp tcN¦ame="title"></test-comp>`,
|
||||
expectedSpanText: 'tcName',
|
||||
expectedDisplayString: '(property) TestComponent.name: string'
|
||||
});
|
||||
});
|
||||
|
||||
it('should find members of event binding', () => {
|
||||
expectQuickInfo({
|
||||
templateOverride: `<test-comp (test)="ti¦tle=$event"></test-comp>`,
|
||||
expectedSpanText: 'title',
|
||||
expectedDisplayString: '(property) AppCmp.title: string'
|
||||
});
|
||||
});
|
||||
|
||||
it('should work for method calls', () => {
|
||||
expectQuickInfo({
|
||||
templateOverride: `<div (click)="setT¦itle('title')"></div>`,
|
||||
expectedSpanText: 'setTitle',
|
||||
expectedDisplayString: '(method) AppCmp.setTitle(newTitle: string): void'
|
||||
});
|
||||
});
|
||||
|
||||
it('should work for accessed properties in writes', () => {
|
||||
expectQuickInfo({
|
||||
templateOverride: `<div (click)="hero.i¦d = 2"></div>`,
|
||||
expectedSpanText: 'id',
|
||||
expectedDisplayString: '(property) Hero.id: number'
|
||||
});
|
||||
});
|
||||
|
||||
it('should work for method call arguments', () => {
|
||||
expectQuickInfo({
|
||||
templateOverride: `<div (click)="setTitle(hero.nam¦e)"></div>`,
|
||||
expectedSpanText: 'name',
|
||||
expectedDisplayString: '(property) Hero.name: string'
|
||||
});
|
||||
});
|
||||
|
||||
it('should find members of two-way binding', () => {
|
||||
expectQuickInfo({
|
||||
templateOverride: `<input string-model [(model)]="ti¦tle" />`,
|
||||
expectedSpanText: 'title',
|
||||
expectedDisplayString: '(property) AppCmp.title: string'
|
||||
});
|
||||
});
|
||||
|
||||
it('should find members in a structural directive', () => {
|
||||
expectQuickInfo({
|
||||
templateOverride: `<div *ngIf="anyV¦alue"></div>`,
|
||||
expectedSpanText: 'anyValue',
|
||||
expectedDisplayString: '(property) AppCmp.anyValue: any'
|
||||
});
|
||||
});
|
||||
|
||||
it('should work for members in structural directives', () => {
|
||||
expectQuickInfo({
|
||||
templateOverride: `<div *ngFor="let item of her¦oes; trackBy: trackByFn;"></div>`,
|
||||
expectedSpanText: 'heroes',
|
||||
expectedDisplayString: '(property) AppCmp.heroes: Hero[]'
|
||||
});
|
||||
});
|
||||
|
||||
it('should work for the $any() cast function', () => {
|
||||
expectQuickInfo({
|
||||
templateOverride: `<div>{{$an¦y(title)}}</div>`,
|
||||
expectedSpanText: '$any',
|
||||
expectedDisplayString: '(method) $any: any'
|
||||
});
|
||||
});
|
||||
|
||||
it('should provide documentation', () => {
|
||||
const {cursor} = env.overrideTemplateWithCursor(
|
||||
absoluteFrom('/app.ts'), 'AppCmp', `<div>{{¦title}}</div>`);
|
||||
const quickInfo = env.ngLS.getQuickInfoAtPosition(absoluteFrom('/app.html'), cursor);
|
||||
const documentation = toText(quickInfo!.documentation);
|
||||
expect(documentation).toBe('This is the title of the `AppCmp` Component.');
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
describe('references', () => {
|
||||
it('should work for element reference declarations', () => {
|
||||
const {documentation} = expectQuickInfo({
|
||||
templateOverride: `<div #¦chart></div>`,
|
||||
expectedSpanText: 'chart',
|
||||
expectedDisplayString: '(reference) chart: HTMLDivElement'
|
||||
});
|
||||
expect(toText(documentation))
|
||||
.toEqual(
|
||||
'Provides special properties (beyond the regular HTMLElement ' +
|
||||
'interface it also has available to it by inheritance) for manipulating <div> elements.');
|
||||
});
|
||||
|
||||
it('should work for directive references', () => {
|
||||
expectQuickInfo({
|
||||
templateOverride: `<div string-model #dir¦Ref="stringModel"></div>`,
|
||||
expectedSpanText: 'dirRef',
|
||||
expectedDisplayString: '(reference) dirRef: StringModel'
|
||||
});
|
||||
});
|
||||
|
||||
it('should work for ref- syntax', () => {
|
||||
expectQuickInfo({
|
||||
templateOverride: `<div ref-ch¦art></div>`,
|
||||
expectedSpanText: 'chart',
|
||||
expectedDisplayString: '(reference) chart: HTMLDivElement'
|
||||
});
|
||||
expectQuickInfo({
|
||||
templateOverride: `<div data-ref-ch¦art></div>`,
|
||||
expectedSpanText: 'chart',
|
||||
expectedDisplayString: '(reference) chart: HTMLDivElement'
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
describe('variables', () => {
|
||||
it('should work for array members', () => {
|
||||
const {documentation} = expectQuickInfo({
|
||||
templateOverride: `<div *ngFor="let hero of heroes">{{her¦o}}</div>`,
|
||||
expectedSpanText: 'hero',
|
||||
expectedDisplayString: '(variable) hero: Hero'
|
||||
});
|
||||
expect(toText(documentation)).toEqual('The most heroic being.');
|
||||
});
|
||||
|
||||
it('should work for ReadonlyArray members (#36191)', () => {
|
||||
expectQuickInfo({
|
||||
templateOverride: `<div *ngFor="let hero of readonlyHeroes">{{her¦o}}</div>`,
|
||||
expectedSpanText: 'hero',
|
||||
expectedDisplayString: '(variable) hero: Readonly<Hero>'
|
||||
});
|
||||
});
|
||||
|
||||
it('should work for const array members (#36191)', () => {
|
||||
expectQuickInfo({
|
||||
templateOverride: `<div *ngFor="let name of constNames">{{na¦me}}</div>`,
|
||||
expectedSpanText: 'name',
|
||||
expectedDisplayString: '(variable) name: { readonly name: "name"; }'
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
describe('pipes', () => {
|
||||
it('should work for pipes', () => {
|
||||
const templateOverride = `<p>The hero's birthday is {{birthday | da¦te: "MM/dd/yy"}}</p>`;
|
||||
expectQuickInfo({
|
||||
templateOverride,
|
||||
expectedSpanText: 'date',
|
||||
expectedDisplayString:
|
||||
'(pipe) DatePipe.transform(value: string | number | Date, format?: string | undefined, timezone?: ' +
|
||||
'string | undefined, locale?: string | undefined): string | null (+2 overloads)'
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
describe('expressions', () => {
|
||||
it('should find members in a text interpolation', () => {
|
||||
expectQuickInfo({
|
||||
templateOverride: `<div>{{ tit¦le }}</div>`,
|
||||
expectedSpanText: 'title',
|
||||
expectedDisplayString: '(property) AppCmp.title: string'
|
||||
});
|
||||
});
|
||||
|
||||
it('should work for accessed property reads', () => {
|
||||
expectQuickInfo({
|
||||
templateOverride: `<div>{{title.len¦gth}}</div>`,
|
||||
expectedSpanText: 'length',
|
||||
expectedDisplayString: '(property) String.length: number'
|
||||
});
|
||||
});
|
||||
|
||||
it('should find members in an attribute interpolation', () => {
|
||||
expectQuickInfo({
|
||||
templateOverride: `<div string-model model="{{tit¦le}}"></div>`,
|
||||
expectedSpanText: 'title',
|
||||
expectedDisplayString: '(property) AppCmp.title: string'
|
||||
});
|
||||
});
|
||||
|
||||
it('should find members of input binding', () => {
|
||||
expectQuickInfo({
|
||||
templateOverride: `<test-comp [tcName]="ti¦tle"></test-comp>`,
|
||||
expectedSpanText: 'title',
|
||||
expectedDisplayString: '(property) AppCmp.title: string'
|
||||
});
|
||||
});
|
||||
|
||||
it('should find input binding on text attribute', () => {
|
||||
describe('non-strict compiler options', () => {
|
||||
it('should find input binding on text attribute when strictAttributeTypes is false', () => {
|
||||
initMockFileSystem('Native');
|
||||
env =
|
||||
LanguageServiceTestEnvironment.setup(quickInfoSkeleton(), {strictAttributeTypes: false});
|
||||
expectQuickInfo({
|
||||
templateOverride: `<test-comp tcN¦ame="title"></test-comp>`,
|
||||
expectedSpanText: 'tcName',
|
||||
expectedDisplayString: '(property) TestComponent.name: string'
|
||||
});
|
||||
});
|
||||
|
||||
it('should find members of event binding', () => {
|
||||
expectQuickInfo({
|
||||
templateOverride: `<test-comp (test)="ti¦tle=$event"></test-comp>`,
|
||||
expectedSpanText: 'title',
|
||||
expectedDisplayString: '(property) AppCmp.title: string'
|
||||
});
|
||||
});
|
||||
|
||||
it('should work for method calls', () => {
|
||||
expectQuickInfo({
|
||||
templateOverride: `<div (click)="setT¦itle('title')"></div>`,
|
||||
expectedSpanText: 'setTitle',
|
||||
expectedDisplayString: '(method) AppCmp.setTitle(newTitle: string): void'
|
||||
});
|
||||
});
|
||||
|
||||
it('should work for accessed properties in writes', () => {
|
||||
expectQuickInfo({
|
||||
templateOverride: `<div (click)="hero.i¦d = 2"></div>`,
|
||||
expectedSpanText: 'id',
|
||||
expectedDisplayString: '(property) Hero.id: number'
|
||||
});
|
||||
});
|
||||
|
||||
it('should work for method call arguments', () => {
|
||||
expectQuickInfo({
|
||||
templateOverride: `<div (click)="setTitle(hero.nam¦e)"></div>`,
|
||||
expectedSpanText: 'name',
|
||||
expectedDisplayString: '(property) Hero.name: string'
|
||||
});
|
||||
});
|
||||
|
||||
it('should find members of two-way binding', () => {
|
||||
expectQuickInfo({
|
||||
templateOverride: `<input string-model [(model)]="ti¦tle" />`,
|
||||
expectedSpanText: 'title',
|
||||
expectedDisplayString: '(property) AppCmp.title: string'
|
||||
});
|
||||
});
|
||||
|
||||
it('should find members in a structural directive', () => {
|
||||
expectQuickInfo({
|
||||
templateOverride: `<div *ngIf="anyV¦alue"></div>`,
|
||||
expectedSpanText: 'anyValue',
|
||||
expectedDisplayString: '(property) AppCmp.anyValue: any'
|
||||
});
|
||||
});
|
||||
|
||||
it('should work for members in structural directives', () => {
|
||||
expectQuickInfo({
|
||||
templateOverride: `<div *ngFor="let item of her¦oes; trackBy: trackByFn;"></div>`,
|
||||
expectedSpanText: 'heroes',
|
||||
expectedDisplayString: '(property) AppCmp.heroes: Hero[]'
|
||||
});
|
||||
});
|
||||
|
||||
it('should work for the $any() cast function', () => {
|
||||
expectQuickInfo({
|
||||
templateOverride: `<div>{{$an¦y(title)}}</div>`,
|
||||
expectedSpanText: '$any',
|
||||
expectedDisplayString: '(method) $any: any'
|
||||
});
|
||||
});
|
||||
|
||||
it('should provide documentation', () => {
|
||||
const {cursor} = env.overrideTemplateWithCursor(
|
||||
absoluteFrom('/app.ts'), 'AppCmp', `<div>{{¦title}}</div>`);
|
||||
const quickInfo = env.ngLS.getQuickInfoAtPosition(absoluteFrom('/app.html'), cursor);
|
||||
const documentation = toText(quickInfo!.documentation);
|
||||
expect(documentation).toBe('This is the title of the `AppCmp` Component.');
|
||||
});
|
||||
});
|
||||
|
||||
function expectQuickInfo(
|
||||
|
|
|
|||
Loading…
Reference in New Issue