Angular 2 测试业力。具体要测试什么

Question

我正在尝试学习如何使用 karma-jasmine 为 angular 2（打字稿文件）创建测试。我的疑问是，要测试 component.ts 文件，我只能测试我在 HTML 文件中调用的方法，或者我可以测试所有的方法吗？例如：我有这个模型文件 modal.nota.component.ts

    import { Component, Input, Output, EventEmitter } from '@angular/core';
    import { Nota } from './nota.model'


    @Component({
      moduleId: module.id,
      selector: 'modal-nota',
      templateUrl: 'modal.nota.component.html'
    })
    export class ModalNotaComponent {

      test : boolean = true;

      setFalse(test) {
        this.test = false;
        return test;
      }
  }

而且我的HTML文件中没有调用方法'setFalse'，但是我想测试一下他。如何调用和测试规范文件中的方法？ modal.nota.spec.ts

import { ComponentFixture, TestBed } from '@angular/core/testing';
import { By }              from '@angular/platform-browser';
import { DebugElement }    from '@angular/core';

import { ModalNotaComponent } from '../modal.nota.component';

describe('Test of test variable', () => {

  let component: ModalNotaComponent;
  let fixture: ComponentFixture<ModalNotaComponent>;
  beforeEach(() => {
    TestBed.compileComponents(); // ModalNotaComponent test instance
    TestBed.configureTestingModule({
      declarations: [ ModalNotaComponent ], // declare the test component
    });

    fixture = TestBed.createComponent(ModalNotaComponent);
    component = fixture.componentInstance;
  });


  it('Should show that the value of test variable is true', () => {
    expect(component.test).toBe(true);
  }); 

  it('Should test setFalse method', () => {
    let r = null;
    let t = true;  
    r = component.setFalse(t);
    expect(r).toBe(false);
  }); 

});

此测试无效。我收到这个错误 photo of the errors

Answer 1

搭建一个新的 Angular 2 项目并稍作调整后，我能够成功完成运行的测试。以下是一些需要检查的事项：

1.检查Zone.js版本

在初始脚手架之后，我将运行使用您的代码进行测试，但我遇到了一个奇怪的错误：

TypeError: Cannot set property 'stack' of undefined

然后我可以通过将 zone.js 从 0.7.2 升级到 0.7.4 来解决这个问题，如下所示：

npm install --save zone.js@0.7.4

2。在 "setFalse" 方法

中检查您的变量

正确编译后，我仍然遇到错误，"Expected false to be true"。查看您的 setFalse 方法：

setFalse(test) {
    this.test = false;
    return test;
}

请注意 test 和 this.test 是 NOT指的是同一个变量。当您说 "this.test" 时，它指的是在此函数上方声明的 class 级别变量测试。请记住，TypeScript 与 JavaScript.

中的作用域是不同的

希望这对您有所帮助。祝你好运！

Answer 2

经过一番搜索，我找到了如何从 component.ts 文件（服务、模态等）中调用方法和变量。您所要做的就是在测试中实例化 class 。这是新的测试文件：

import { ComponentFixture, TestBed } from '@angular/core/testing';
import { By }              from '@angular/platform-browser';
import { DebugElement }    from '@angular/core';

import { ModalNotaComponent } from '../modal.nota.component';

describe('Test of test variable', () => {

  beforeEach(() => {

    this.modalNota = new ModalNotaComponent();
  });

  it('Should show that the value of test variable is true', () => {
    expect(this.modalNota.test).toBeTruthy()
  }); 

  it('Should test setFalse method', () => {
    let r = null;
    let t = true;  
    r = this.modalNota.setFalse(t);
    expect(r).toBeFalsy()
  }); 

});

感谢：Live chat Developers Blog - Testing Angular 2 apps Part 2: Dependency Injection and Components

Angular 2 测试业力。具体要测试什么

Angular 2 tests karma. What exactly to test

angular

testing

typescript

karma-jasmine

angular2-testing