fix(language-service): Only provide dom completions for inline templa… · angular/angular@a05eb13

@@ -299,10 +299,19 @@ describe('completions', () => {

299299

});

300300301301

describe('element tag scope', () => {

302-

it('should return DOM completions', () => {

302+

it('should not return DOM completions for external template', () => {

303303

const {templateFile} = setup(`<div>`, '');

304304

templateFile.moveCursorToText('<div¦>');

305305

const completions = templateFile.getCompletionsAtPosition();

306+

expectDoesNotContain(

307+

completions, unsafeCastDisplayInfoKindToScriptElementKind(DisplayInfoKind.ELEMENT),

308+

['div', 'span']);

309+

});

310+311+

it('should return DOM completions', () => {

312+

const {appFile} = setupInlineTemplate(`<div>`, '');

313+

appFile.moveCursorToText('<div¦>');

314+

const completions = appFile.getCompletionsAtPosition();

306315

expectContain(

307316

completions, unsafeCastDisplayInfoKindToScriptElementKind(DisplayInfoKind.ELEMENT),

308317

['div', 'span']);

@@ -422,11 +431,19 @@ describe('completions', () => {

422431423432

describe('element attribute scope', () => {

424433

describe('dom completions', () => {

425-

it('should return completions for a new element attribute', () => {

434+

it('should not return completions dom completions in external template', () => {

426435

const {templateFile} = setup(`<input >`, '');

427436

templateFile.moveCursorToText('<input ¦>');

428437429438

const completions = templateFile.getCompletionsAtPosition();

439+

expect(completions?.entries.length).toBe(0);

440+

});

441+442+

it('should return completions for a new element attribute', () => {

443+

const {appFile} = setupInlineTemplate(`<input >`, '');

444+

appFile.moveCursorToText('<input ¦>');

445+446+

const completions = appFile.getCompletionsAtPosition();

430447

expectContain(

431448

completions, unsafeCastDisplayInfoKindToScriptElementKind(DisplayInfoKind.ATTRIBUTE),

432449

['value']);

@@ -436,24 +453,24 @@ describe('completions', () => {

436453

});

437454438455

it('should return completions for a partial attribute', () => {

439-

const {templateFile} = setup(`<input val>`, '');

440-

templateFile.moveCursorToText('<input val¦>');

456+

const {appFile} = setupInlineTemplate(`<input val>`, '');

457+

appFile.moveCursorToText('<input val¦>');

441458442-

const completions = templateFile.getCompletionsAtPosition();

459+

const completions = appFile.getCompletionsAtPosition();

443460

expectContain(

444461

completions, unsafeCastDisplayInfoKindToScriptElementKind(DisplayInfoKind.ATTRIBUTE),

445462

['value']);

446463

expectContain(

447464

completions, unsafeCastDisplayInfoKindToScriptElementKind(DisplayInfoKind.PROPERTY),

448465

['[value]']);

449-

expectReplacementText(completions, templateFile.contents, 'val');

466+

expectReplacementText(completions, appFile.contents, 'val');

450467

});

451468452469

it('should return completions for a partial property binding', () => {

453-

const {templateFile} = setup(`<input [val]>`, '');

454-

templateFile.moveCursorToText('[val¦]');

470+

const {appFile} = setupInlineTemplate(`<input [val]>`, '');

471+

appFile.moveCursorToText('[val¦]');

455472456-

const completions = templateFile.getCompletionsAtPosition();

473+

const completions = appFile.getCompletionsAtPosition();

457474

expectDoesNotContain(

458475

completions, unsafeCastDisplayInfoKindToScriptElementKind(DisplayInfoKind.ATTRIBUTE),

459476

['value']);

@@ -463,7 +480,7 @@ describe('completions', () => {

463480

expectContain(

464481

completions, unsafeCastDisplayInfoKindToScriptElementKind(DisplayInfoKind.PROPERTY),

465482

['value']);

466-

expectReplacementText(completions, templateFile.contents, 'val');

483+

expectReplacementText(completions, appFile.contents, 'val');

467484

});

468485

});

469486

@@ -779,3 +796,35 @@ function setup(

779796

});

780797

return {templateFile: project.openFile('test.html')};

781798

}

799+800+

function setupInlineTemplate(

801+

template: string, classContents: string, otherDeclarations: {[name: string]: string} = {}): {

802+

appFile: OpenBuffer,

803+

} {

804+

const decls = ['AppCmp', ...Object.keys(otherDeclarations)];

805+806+

const otherDirectiveClassDecls = Object.values(otherDeclarations).join('\n\n');

807+808+

const env = LanguageServiceTestEnv.setup();

809+

const project = env.addProject('test', {

810+

'test.ts': `

811+

import {Component, Directive, NgModule, Pipe, TemplateRef} from '@angular/core';

812+813+

@Component({

814+

template: '${template}',

815+

selector: 'app-cmp',

816+

})

817+

export class AppCmp {

818+

${classContents}

819+

}

820+821+

${otherDirectiveClassDecls}

822+823+

@NgModule({

824+

declarations: [${decls.join(', ')}],

825+

})

826+

export class AppModule {}

827+

`,

828+

});

829+

return {appFile: project.openFile('test.ts')};

830+

}