角2测试业力。什么测试

Question

我想学习如何使用业力茉莉花创建角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; 
     } 
    } 

而且我不调用该方法“setFalse”在我的HTML文件，但我想试探他。我如何在我的spec文件中调用和测试该方法？ 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

经过一番搜索，我发现如何从component.ts文件（service，modal，whatever）中调用方法和变量。你所要做的就是在你的测试中实例化这个类。这里是新的测试文件：

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

Answer 2

脚手架出一个新的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”方法中检查你的变量

编译正确后，我仍然收到一个错误，“预计错误是真的”。看看你的setFalse方法：

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

注意测试和this.test是不指的是同一个变量。当你说“this.test”时，它指的是在这个函数上面声明的类级变量测试。请记住，在TypeScript和JavaScript中，范围是不同的。

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