那些遇到过的问题

在Angular 2 ngOnInit中测试承诺

Bea*_*sIV 18 jasmine angular

我有一个Angular 2组件我试图进行测试,但是我遇到了麻烦,因为数据是在ngOnInit函数中设置的,所以在单元测试中不能立即使用.

用户view.component.ts:

import {Component, OnInit} from 'angular2/core';
import {RouteParams} from 'angular2/router';

import {User} from './user';
import {UserService} from './user.service';

@Component({
  selector: 'user-view',
  templateUrl: './components/users/view.html'
})
export class UserViewComponent implements OnInit {
  public user: User;

  constructor(
    private _routeParams: RouteParams,
    private _userService: UserService
  ) {}

  ngOnInit() {
    const id: number = parseInt(this._routeParams.get('id'));

    this._userService
      .getUser(id)
      .then(user => {
        console.info(user);
        this.user = user;
      });
  }
}
Run Code Online (Sandbox Code Playgroud)

user.service.ts:

import {Injectable} from 'angular2/core';

// mock-users is a static JS array
import {users} from './mock-users';
import {User} from './user';

@Injectable()
export class UserService {
  getUsers() : Promise<User[]> {
    return Promise.resolve(users);
  }

  getUser(id: number) : Promise<User> {
    return Promise.resolve(users[id]);
  }
}
Run Code Online (Sandbox Code Playgroud)

用户view.component.spec.ts:

import {
  beforeEachProviders,
  describe,
  expect,
  it,
  injectAsync,
  TestComponentBuilder
} from 'angular2/testing';
import {provide} from 'angular2/core';
import {RouteParams} from 'angular2/router';
import {DOM} from 'angular2/src/platform/dom/dom_adapter';

import {UserViewComponent} from './user-view.component';

import {UserService} from './user.service';

export function main() {
  describe('User view component', () => {
    beforeEachProviders(() => [
      provide(RouteParams, { useValue: new RouteParams({ id: '0' }) }),
      UserService
    ]);

    it('should have a name', injectAsync([TestComponentBuilder], (tcb: TestComponentBuilder) => {
      return tcb.createAsync(UserViewComponent)
        .then((rootTC) => {
          spyOn(console, 'info');

          let uvDOMEl = rootTC.nativeElement;
          rootTC.detectChanges();

          expect(console.info).toHaveBeenCalledWith(0);
          expect(DOM.querySelectorAll(uvDOMEl, 'h2').length).toBe(0);
        });
    }));

  });
}
Run Code Online (Sandbox Code Playgroud)

路径参数正确传递,但视图在运行测试之前未更改.如何设置在ngOnInit中的promise解决后发生的测试？

Pau*_*tha 12

IMO这个用例的最佳解决方案是创建一个同步模拟服务.由于XHR调用,您无法使用fakeAsync此特定情况.而且我个人认为"黑客"不能让回报承诺非常优雅.而且你不应该直接调用,因为它应该被框架调用.templateUrlngOnInitngOnInit

您应该已经在使用模拟,因为您只是对组件进行单元测试,并且不希望依赖于真正的服务正常工作.

要创建一个同步的服务,简单地从正在调用的任何方法返回服务本身.然后,您可以将您的then和catch(subscribe如果您正在使用Observable)方法添加到模拟中,因此它的行为类似于Promise.例如

class MockService {
  data;
  error;

  getData() {
    return this;
  }

  then(callback) {
    if (!this.error) {
      callback(this.data);
    }
    return this;
  }

  catch(callback) {
    if (this.error) {
      callback(this.error);
    }
  }

  setData(data) {
    this.data = data;
  }

  setError(error) {
    this.error = error;
  }
}
Run Code Online (Sandbox Code Playgroud)

这有一些好处.例如,它可以在执行期间为您提供对服务的大量控制,因此您可以轻松地自定义其行为.当然,这一切都是同步的.

这是另一个例子.

您将看到组件的一个常见问题是使用ActivatedRoute和订阅它的参数.这是异步的,并在内部完成ngOnInit.我倾向于这样做的是创建一个模拟的两ActivatedRoute 和的params财产.该params属性将是一个模拟对象,并具有一些外部世界看起来像一个可观察的功能.

export class MockParams {
  subscription: Subscription;
  error;

  constructor(private _parameters?: {[key: string]: any}) {
    this.subscription = new Subscription();
    spyOn(this.subscription, 'unsubscribe');
  }

  get params(): MockParams {
    return this;
  }

  subscribe(next: Function, error: Function): Subscription {
    if (this._parameters && !this.error) {
      next(this._parameters);
    }
    if (this.error) {
      error(this.error);
    }
    return this.subscription;
  }
}

export class MockActivatedRoute {
  constructor(public params: MockParams) {}
}
Run Code Online (Sandbox Code Playgroud)

你可以看到我们有一个subscribe行为像一个方法Observable#subscribe.我们做的另一件事是监视,Subscription以便我们可以测试它是否被破坏.在大多数情况下,您将取消订阅ngOnDestroy.要在测试中设置这些模拟,您可以执行类似的操作

let mockParams: MockParams;

beforeEach(() => {
  mockParams = new MockParams({ id: 'one' });
  TestBed.configureTestingModule({
    imports: [ CommonModule ],
    declarations: [ TestComponent ],
    providers: [
      { provide: ActivatedRoute, useValue: new MockActivatedRoute(mockParams) }
    ]
  });
});
Run Code Online (Sandbox Code Playgroud)

现在所有的params都设置为路径,我们可以访问模拟参数,因此我们可以设置错误,并检查订阅间谍以确保取消订阅.

如果你看下面的测试,你会发现它们都是同步测试.不需要async或fakeAsync,它通过飞扬的颜色.

这是完整的测试(使用RC6)

import { Component, OnInit, OnDestroy, DebugElement } from '@angular/core';
import { CommonModule } from '@angular/common';
import { ActivatedRoute } from '@angular/router';
import { Subscription } from 'rxjs/Subscription';
import { TestBed, async } from '@angular/core/testing';
import { By } from '@angular/platform-browser';

@Component({
  template: `
    <span *ngIf="id">{{ id }}</span>
    <span *ngIf="error">{{ error }}</span>
  `
})
export class TestComponent implements OnInit, OnDestroy {
  id: string;
  error: string;
  subscription: Subscription;

  constructor(private _route: ActivatedRoute) {}

  ngOnInit() {
    this.subscription = this._route.params.subscribe(
      (params) => {
        this.id = params['id'];
      },
      (error) => {
        this.error = error;
      }
    );
  }

  ngOnDestroy() {
    this.subscription.unsubscribe();
  }
}

export class MockParams {
  subscription: Subscription;
  error;

  constructor(private _parameters?: {[key: string]: any}) {
    this.subscription = new Subscription();
    spyOn(this.subscription, 'unsubscribe');
  }

  get params(): MockParams {
    return this;
  }

  subscribe(next: Function, error: Function): Subscription {
    if (this._parameters && !this.error) {
      next(this._parameters);
    }
    if (this.error) {
      error(this.error);
    }
    return this.subscription;
  }
}

export class MockActivatedRoute {
  constructor(public params: MockParams) {}
}

describe('component: TestComponent', () => {
  let mockParams: MockParams;

  beforeEach(() => {
    mockParams = new MockParams({ id: 'one' });
    TestBed.configureTestingModule({
      imports: [ CommonModule ],
      declarations: [ TestComponent ],
      providers: [
        { provide: ActivatedRoute, useValue: new MockActivatedRoute(mockParams) }
      ]
    });
  });

  it('should set the id on success', () => {
    let fixture = TestBed.createComponent(TestComponent);
    fixture.detectChanges();
    let debugEl = fixture.debugElement;
    let spanEls: DebugElement[] = debugEl.queryAll(By.css('span'));
    expect(spanEls.length).toBe(1);
    expect(spanEls[0].nativeElement.innerHTML).toBe('one');
  });

  it('should set the error on failure', () => {
    mockParams.error = 'Something went wrong';
    let fixture = TestBed.createComponent(TestComponent);
    fixture.detectChanges();
    let debugEl = fixture.debugElement;
    let spanEls: DebugElement[] = debugEl.queryAll(By.css('span'));
    expect(spanEls.length).toBe(1);
    expect(spanEls[0].nativeElement.innerHTML).toBe('Something went wrong');
  });

  it('should unsubscribe when component is destroyed', () => {
    let fixture = TestBed.createComponent(TestComponent);
    fixture.detectChanges();
    fixture.destroy();
    expect(mockParams.subscription.unsubscribe).toHaveBeenCalled();
  });
});
Run Code Online (Sandbox Code Playgroud)

Jon*_*son 5

Promise从#ngOnInit以下地址返回:

ngOnInit(): Promise<any> {
  const id: number = parseInt(this._routeParams.get('id'));

  return this._userService
    .getUser(id)
    .then(user => {
      console.info(user);
      this.user = user;
    });
}
Run Code Online (Sandbox Code Playgroud)

几天前我遇到了同样的问题,发现这是最可行的解决方案.据我所知,它不会影响应用程序中的任何其他位置; 因为#ngOnInit在源的TypeScript中没有指定的返回类型,我怀疑源代码中的任何东西都期望从中得到返回值.

链接到OnInit:https://github.com/angular/angular/blob/2.0.0-beta.6/modules/angular2/src/core/linker/interfaces.ts#L79-L122

编辑

在您的测试中,您将返回一个新的Promise:

it('should have a name', injectAsync([TestComponentBuilder], (tcb: TestComponentBuilder) => {
  // Create a new Promise to allow greater control over when the test finishes
  //
  return new Promise((resolve, reject) => {
    tcb.createAsync(UserViewComponent)
      .then((rootTC) => {

        // Call ngOnInit manually and put your test inside the callback
        //
        rootTC.debugElement.componentInstance.ngOnInit().then(() => {
          spyOn(console, 'info');

          let uvDOMEl = rootTC.nativeElement;
          rootTC.detectChanges();

          expect(console.info).toHaveBeenCalledWith(0);
          expect(DOM.querySelectorAll(uvDOMEl, 'h2').length).toBe(0);

          // Test is done
          //
          resolve();
        });

      });
    }));

  }
Run Code Online (Sandbox Code Playgroud)

归档时间：

查看次数：

17016 次

最近记录：

9 年，8 月 前
相关归档
强制失败茉莉花测试 53
如何提供模拟文件来更改<input type ='file'>的事件以进行单元测试 19
Angular 2从RxJs订阅返回数据 15
量角器:按属性查找元素 13
与ASP.NET Core中的FromBody混淆 11
带有@Injectable() 的 Angular 9 BaseComponent 11
如何通过角度2中的函数触发事件单击输入类型="文件"？ 8
在模板中使用Observable 8
Karma/Jasmine测试失败并显示错误:'未捕获错误:模块名称"simple_test.js"尚未加载上下文:_.使用require([])' 5
生成唯一的ID js 2
难疑归档
使用Java创建内存泄漏 3076
停止EditText在Activity启动时获得焦点 2770
JavaScript对象的长度 2224
如何确定变量是"未定义"还是"空"？ 2000
轻松获取最新的git子模块 1748
将文件从Docker容器复制到主机 1438
int32的最大值是多少？ 1383
JavaScript中是否有常量？ 1118
如果我已经开始使用rebase,如何将两个提交合并为一个？ 1111
Visual Studio中的构建解决方案,重建解决方案和清洁解决方案之间的区别？ 1081