angular-cn/packages/language-service/ivy/test/diagnostic_spec.ts

/**
 * @license
 * Copyright Google LLC All Rights Reserved.
 *
 * Use of this source code is governed by an MIT-style license that can be
 * found in the LICENSE file at https://angular.io/license
 */

import {absoluteFrom} from '@angular/compiler-cli/src/ngtsc/file_system';
import {initMockFileSystem} from '@angular/compiler-cli/src/ngtsc/file_system/testing';
import {LanguageServiceTestEnvironment} from '@angular/language-service/ivy/test/env';
import * as ts from 'typescript';
import {createModuleWithDeclarations} from './test_utils';

describe('getSemanticDiagnostics', () => {
  beforeEach(() => {
    initMockFileSystem('Native');
  });

  it('should not produce error for a minimal component defintion', () => {
    const appFile = {
      name: absoluteFrom('/app.ts'),
      contents: `
      import {Component, NgModule} from '@angular/core';

      @Component({
        template: ''
      })
      export class AppComponent {}
    `
    };
    const env = createModuleWithDeclarations([appFile]);

    const diags = env.ngLS.getSemanticDiagnostics(absoluteFrom('/app.ts'));
    expect(diags.length).toEqual(0);
  });

  it('should report member does not exist', () => {
    const appFile = {
      name: absoluteFrom('/app.ts'),
      contents: `
      import {Component, NgModule} from '@angular/core';

      @Component({
        template: '{{nope}}'
      })
      export class AppComponent {}
    `
    };
    const env = createModuleWithDeclarations([appFile]);

    const diags = env.ngLS.getSemanticDiagnostics(absoluteFrom('/app.ts'));
    expect(diags.length).toBe(1);
    const {category, file, start, length, messageText} = diags[0];
    expect(category).toBe(ts.DiagnosticCategory.Error);
    expect(file?.fileName).toBe('/app.ts');
    expect(messageText).toBe(`Property 'nope' does not exist on type 'AppComponent'.`);
  });

  it('should process external template', () => {
    const appFile = {
      name: absoluteFrom('/app.ts'),
      contents: `
      import {Component, NgModule} from '@angular/core';

      @Component({
        templateUrl: './app.html'
      })
      export class AppComponent {}
    `
    };
    const templateFile = {
      name: absoluteFrom('/app.html'),
      contents: `
      Hello world!
    `
    };

    const env = createModuleWithDeclarations([appFile], [templateFile]);
    const diags = env.ngLS.getSemanticDiagnostics(absoluteFrom('/app.html'));
    expect(diags).toEqual([]);
  });

  it('should report member does not exist in external template', () => {
    const appFile = {
      name: absoluteFrom('/app.ts'),
      contents: `
      import {Component, NgModule} from '@angular/core';

      @Component({
        templateUrl: './app.html'
      })
      export class AppComponent {}
    `
    };
    const templateFile = {name: absoluteFrom('/app.html'), contents: `{{nope}}`};

    const env = createModuleWithDeclarations([appFile], [templateFile]);
    const diags = env.ngLS.getSemanticDiagnostics(absoluteFrom('/app.html'));
    expect(diags.length).toBe(1);
    const {category, file, start, length, messageText} = diags[0];
    expect(category).toBe(ts.DiagnosticCategory.Error);
    expect(file?.fileName).toBe('/app.html');
    expect(messageText).toBe(`Property 'nope' does not exist on type 'AppComponent'.`);
  });

  it('should report a parse error in external template', () => {
    const appFile = {
      name: absoluteFrom('/app.ts'),
      contents: `
      import {Component, NgModule} from '@angular/core';

      @Component({
        templateUrl: './app.html'
      })
      export class AppComponent {
        nope = false;
      }
    `
    };
    const templateFile = {name: absoluteFrom('/app.html'), contents: `{{nope = true}}`};

    const env = createModuleWithDeclarations([appFile], [templateFile]);
    const diags = env.ngLS.getSemanticDiagnostics(absoluteFrom('/app.html'));
    expect(diags.length).toBe(1);

    const {category, file, messageText} = diags[0];
    expect(category).toBe(ts.DiagnosticCategory.Error);
    expect(file?.fileName).toBe('/app.html');
    expect(messageText)
        .toContain(
            `Parser Error: Bindings cannot contain assignments at column 8 in [{{nope = true}}]`);
  });

  it('should report parse errors of components defined in the same ts file', () => {
    const appFile = {
      name: absoluteFrom('/app.ts'),
      contents: `
      import {Component, NgModule} from '@angular/core';

      @Component({ templateUrl: './app1.html' })
      export class AppComponent1 { nope = false; }

      @Component({ templateUrl: './app2.html' })
      export class AppComponent2 { nope = false; }
    `
    };
    const templateFile1 = {name: absoluteFrom('/app1.html'), contents: `{{nope = false}}`};
    const templateFile2 = {name: absoluteFrom('/app2.html'), contents: `{{nope = true}}`};

    const moduleFile = {
      name: absoluteFrom('/app-module.ts'),
      contents: `
        import {NgModule} from '@angular/core';
        import {CommonModule} from '@angular/common';
        import {AppComponent, AppComponent2} from './app';

        @NgModule({
          declarations: [AppComponent, AppComponent2],
          imports: [CommonModule],
        })
        export class AppModule {}
    `,
      isRoot: true
    };

    const env =
        LanguageServiceTestEnvironment.setup([moduleFile, appFile, templateFile1, templateFile2]);

    const diags = env.ngLS.getSemanticDiagnostics(absoluteFrom('/app.ts'));

    expect(diags.map(x => x.messageText).sort()).toEqual([
      'Parser Error: Bindings cannot contain assignments at column 8 in [{{nope = false}}] in /app1.html@0:0',
      'Parser Error: Bindings cannot contain assignments at column 8 in [{{nope = true}}] in /app2.html@0:0'
    ]);
  });
});