标签: angular2-testing

我有一个管道,如下所示:

import { Pipe, PipeTransform } from '@angular/core';
import { DomSanitizer } from '@angular/platform-browser';

@Pipe({
    name: 'sanitiseHtml'
})

export class SanitiseHtmlPipe implements PipeTransform {

constructor(private _sanitizer: DomSanitizer) {}

    transform(value: any): any {
      return this._sanitizer.bypassSecurityTrustHtml(value);
    }

}

我想测试它如下:

describe('Pipe: Sanatiser', () => {
    let pipe: SanitiseHtmlPipe;

    beforeEach(() => {
        pipe = new SanitiseHtmlPipe(new DomSanitizer());
    });

    it('create an instance', () => {
        expect(pipe).toBeTruthy();
    }); 
});

DomSanatizer是一个抽象类,通过将其传递给构造函数由typescript自动装配:

constructor(private _sanitizer: DomSanitizer) {}

目前我得到的是打字稿errror:

无法创建抽象类'DomSanitizer'的实例.

当实例化传递给Angular中的构造函数的依赖项时,有没有人知道什么是typescript？或者测试这样的东西的方法是什么？

假设我有一个订阅服务功能的组件:

export class Component {

   ...

    ngOnInit() {
        this.service.doStuff().subscribe(
            (data: IData) => {
              doThings(data);
            },
            (error: Error) => console.error(error)
        );
    };
};

订阅调用将两个匿名函数作为参数,我已设法为数据函数设置工作单元测试,但Karma不接受错误一的覆盖.

我已经尝试过监视console.error函数,抛出一个错误,然后期待调用间谍已被调用,但这并没有完全做到.

我的单元测试:

spyOn(console,'error').and.callThrough();

serviceStub = {
        doStuff: jasmine.createSpy('doStuff').and.returnValue(Observable.of(data)),
    };

    serviceStub.doStuff.and.returnValue(Observable.throw(

        'error!'
    ));

serviceStub.doStuff().subscribe(

    (res) => {

        *working test, can access res*
    },
    (error) => {

      console.error(error);
      console.log(error);  //Prints 'error!' so throw works.
      expect(console.error).toHaveBeenCalledWith('error!'); //Is true but won't be accepted for coverage.
    }
);

测试这些匿名函数的最佳实践是什么？确保测试覆盖率的最低要求是什么？

我正在尝试为Component编写测试,但我总是得到错误:"错误:./ExpenseOverviewComponent类中的错误ExpenseOverviewComponent - 内联模板:41:8导致:没有位置策略的提供者!"

import { ComponentFixture, TestBed, async } from '@angular/core/testing';
import { BrowserDynamicTestingModule, platformBrowserDynamicTesting } from '@angular/platform-browser-dynamic/testing';
import { FormsModule } from "@angular/forms";
import { RouterModule, Router, ActivatedRoute } from '@angular/router';
import { RouterStub, ActivatedRouteStub } from '../../../../utils/testutils';
import { HttpModule } from "@angular/http";
import { By } from '@angular/platform-browser';
import { DebugElement } from '@angular/core';
import { BehaviorSubject } from 'rxjs/BehaviorSubject';

import { ExpenseOverviewComponent } from './expense-overview.component';
import { ExpenseFilterPipe } from '../pipes/expense-filter.pipe';
import { ExpenseService } from …

我知道tick()函数使用fakeAsync.而且我也可以使用fixture.whenStable().then()和async以及fakeAsync.我想知道两者的确切用例.任何人都可以用例子解释这一点

注意:我想在两种方案中使用虚假服务或存根.

我正在测试的方法如下:

/**
   * Update properties when the applicant changes the payment term value.
   * @return {Mixed} - Either an Array where the first index is a boolean indicating
   *    that selectedPaymentTerm was set, and the second index indicates whether
   *    displayProductValues was called. Or a plain boolean indicating that there was an 
   *    error.
   */
  onPaymentTermChange() {
    this.paymentTerm.valueChanges.subscribe(
      (value) => {
        this.selectedPaymentTerm = value;
        let returnValue = [];
        returnValue.push(true);
        if (this.paymentFrequencyAndRebate) { 
          returnValue.push(true);
          this.displayProductValues();
        } else {
          returnValue.push(false);
        }
        return …

我有一个Angular2组件,其中包含一个看起来像的选择框

<select [(ngModel)]="envFilter" class="form-control" name="envSelector" (ngModelChange)="onChangeFilter($event)">
    <option *ngFor="let env of envs" [ngValue]="env">{{env}}</option>
</select>

我正在尝试为ngModelChange事件编写单元测试.这是我最近的失败尝试

it("should filter and show correct items", async(() => {
    fixture.detectChanges();
    fixture.whenStable().then(() => {
        el = fixture.debugElement.query(By.name("envSelector"));
        fixture.detectChanges();
        makeResponse([hist2, longhist]);
        comp.envFilter = 'env3';
        el.triggerEventHandler('change', {});
        fixture.whenStable().then(() => {
            fixture.detectChanges();
            expect(comp.displayedHistory).toEqual(longhist);
        });
    });

我遇到问题的部分是更改底层模型的值comp.envFilter = 'env3';不会触发更改方法.我补充说el.triggerEventHandler('change', {});但是这个抛出了Failed: Uncaught (in promise): ReferenceError: By is not defined.我在文档中找不到任何提示......任何想法？

上下文

我创建了一个ApiService类来处理我们的自定义API查询,同时使用我们自己的序列化程序+其他功能.

ApiService的构造函数签名是:

constructor(metaManager: MetaManager, connector: ApiConnectorService, eventDispatcher: EventDispatcher);

• MetaManager 是一种处理api的metadatas的可注射服务.
• ApiConnectorService是一个包装的服务,Http用于添加我们的自定义标题和签名系统.
• EventDispatcher 基本上是Symfony的事件调度系统,在打字稿中.

问题

当我测试时ApiService,我做了一个初始化beforeEach:

beforeEach(async(() => {
    TestBed.configureTestingModule({
        imports  : [
            HttpModule
        ],
        providers: [
            ApiConnectorService,
            ApiService,
            MetaManager,
            EventDispatcher,
            OFF_LOGGER_PROVIDERS
        ]
    });
}));

它工作正常.

然后,添加我的第二个规范文件,该文件是ApiConnectorService,与此beforeEach:

beforeEach(async(() => {
    TestBed.configureTestingModule({
        imports  : [HttpModule],
        providers: [
            ApiConnectorService,
            OFF_LOGGER_PROVIDERS,
            AuthenticationManager,
            EventDispatcher
        ]
    });
}));

并且所有测试都因此错误而失败:

错误:无法解析ApiService的所有参数:(MetaManager,？,EventDispatcher).

• 如果我从加载的测试中删除api-connector-service.spec.ts(ApiConnectorService的spec文件),ApiService测试将成功.
• 如果我从加载的测试中删除api-service.spec.ts(ApiService …

我对棱角2很新.

我有一个组件,其模板中还有一些其他组件.

如何编写单元测试以检查我的父组件是否包含其他组件.

提及样本或指导我使用资源非常有帮助.

MyComponent.ts:

import { Component } from '@angular/core';
@Component({
selector: 'my-component',
templateUrl: `<div>
<other-component></other-component>
</div>`
})
export class MyComponent{

}

OtherComponent.ts:

import { Component } from '@angular/core';
@Component({
selector: 'other-component',
templateUrl: `<div>
<h1>Other Component</h1>
</div>`
})
export class OtherComponent{

}

我刚刚将Angular2从RC3升级到RC4 ......

import {
  expect, it, iit, xit,
  describe, ddescribe, xdescribe,
  beforeEach, beforeEachProviders, withProviders,
  async, inject
} from '@angular/core/testing';

在我的单元测试中,我有以下代码......

beforeEachProviders(() => [
    {provide: Router, useClass: MockRouter}
]);

这工作正常,但自从转到RC4后,我有一个弃用警告beforeEachProviders.

任何人都知道新的做事方式是什么？或者我应该beforeEachProviders从其他地方导入而不是'@ angular/core/testing'？

我正在为Angular 2项目使用Angular-CLI(webpack版本),我也需要使用jQuery(遗憾的是.在我的情况下,它是Semantic-UI的依赖,我用它来处理菜单下拉菜单).

我使用它的方式:

npm install jquery --save

然后列在数组中的angular-cli.json文件中scripts:

scripts": [
  "../node_modules/jquery/dist/jquery.min.js"
]

所以它被包含在bundle文件中,这个文件自动用于root html文件:

<script type="text/javascript" src="scripts.bundle.js">

然后declare var $: any;在我需要它的文件中,它运行良好.

但是ng test测试存在问题,因为Karma会抛出错误$ is not defined.