繁体   English   中英

使用 typescript、karma 和 jasmine 对 RxJS Observable.timer 进行单元测试

[英]Unit Test RxJS Observable.timer using typescript, karma and jasmine

嗨,我对 Angular2、Karma 和 Jasmine 比较陌生。 目前我正在使用 Angular 2 RC4 Jasmine 2.4.x 我有一个 Angular 2 服务,它会定期调用这样的 http 服务:

getDataFromDb() { return Observable.timer(0, 2000).flatMap(() => {
        return this.http.get(this.backendUrl)
            .map(this.extractData)
            .catch(this.handleError);
    });
}

现在我想测试一下功能。 出于测试目的,我刚刚通过执行以下操作在没有 Observable.timer 的单独函数上测试了“http.get”:

const mockHttpProvider = {
    deps: [MockBackend, BaseRequestOptions],
    useFactory: (backend: MockBackend, defaultOptions: BaseRequestOptions) => {
        return new Http(backend, defaultOptions);
    }
}

describe('data.service test suite', () => {
    var dataFromDbExpected: any;

    beforeEachProviders(() => {
        return [
            DataService,
            MockBackend,
            BaseRequestOptions,
            provide(Http, mockHttpProvider),
        ];
    });

    it('http call to obtain data',
        inject(
            [DataService, MockBackend],
            fakeAsync((service: DataService, backend: MockBackend) => {
                backend.connections.subscribe((connection: MockConnection) => {
                    dataFromDbExpected =  'myData';
                    let mockResponseBody: any = 'myData';
                    let response = new ResponseOptions({ body: mockResponseBody });
                    connection.mockRespond(new Response(response));

                });
                const parsedData$ = service.getDataFromDb()
                    .subscribe(response => {
                        console.log(response);
                        expect(response).toEqual(dataFromDbExpected);
                    });
            })));
});

我显然想用 Observable.timer 测试整个函数。 我想人们可能想使用 rxjs 框架中的 TestScheduler,但是我怎么知道只重复计时器功能 x 次呢? 我在打字稿上下文中找不到任何使用它的文档。

编辑:我正在使用 rxjs 5 beta 6

编辑:为 Angular 2.0.0 最终版本添加了工作示例:

describe('when getData', () => {
    let backend: MockBackend;
    let service: MyService;
    let fakeData: MyData[];
    let response: Response;
    let scheduler: TestScheduler;

    beforeEach(inject([Http, XHRBackend], (http: Http, be: MockBackend) => {
        backend = be;
        service = new MyService(http);
        fakeData = [{myfake: 'data'}];
        let options = new ResponseOptions({ status: 200, body: fakeData });
        response = new Response(options);

        scheduler = new TestScheduler((a, b) => expect(a).toEqual(b));
        const originalTimer = Observable.timer;
        spyOn(Observable, 'timer').and.callFake(function (initialDelay, dueTime) {
            return originalTimer.call(this, initialDelay, dueTime, scheduler);
        });
    }));
    it('Should do myTest', async(inject([], () => {
        backend.connections.subscribe((c: MockConnection) => c.mockRespond(response));
        scheduler.schedule(() => {
            service.getMyData().subscribe(
                myData => {
                    expect(myData.length).toBe(3,
                        'should have expected ...');
                });
        }, 2000, null);
        scheduler.flush();
    })));
});

您需要将 TestScheduler 注入 beforeEach 部分中的计时器方法:

beforeEach(function() {
  this.scheduler = new TestScheduler();
  this.scheduler.maxFrames = 5000; // Define the max timespan of the scheduler
  const originalTimer = Observable.timer;
  spyOn(Observable, 'timer').and.callFake(function(initialDelay, dueTime) {  
    return originalTimer.call(this, initialDelay, dueTime, this.scheduler);
  });
});

之后,您可以使用scheduleAbsolute完全控制时间:

this.scheduler.schedule(() => {
  // should have been called once
  // You can put your test code here
}, 1999, null);

this.scheduler.schedule(() => {
  // should have been called twice
  // You can put your test code here
}, 2000, null);

this.scheduler.schedule(() => {
  // should have been called three times
  // You can put your test code here
}, 4000, null);

this.scheduler.flush();

您需要scheduler.flush()来启动 TestScheduler。

编辑:因此,如果您只想对其进行 X 次测试,请根据需要经常使用计划功能(并使用正确的绝对时间(以毫秒为单位))。

编辑2:我添加了缺少的调度程序启动

编辑 3:我改变了它所以应该使用 RxJs5

edit4:添加maxFrames设置,因为默认值为 750 毫秒,这将阻止测试更长时间运行的序列。

我遇到了TestScheduler()方法的问题,因为schedule()箭头函数永远不会执行,所以我找到了另一条路径。

Observable.timer函数只返回一个 Observable,所以我从头开始创建一个来让我完全控制。

首先,为观察者创建一个 var:

let timerObserver: Observer<any>;

现在在beforeEach()创建 spy 并让它返回一个 Observable。 在 Observable 中,将您的实例保存到计时器:

beforeEach(() => {
  spyOn(Observable, 'timer').and.returnValue(Observable.create(
    (observer => {
      timerObserver = observer;
    })
  ));
});

在测试中,只需触发Observable:

it('Some Test',()=>{
  // do stuff if needed

  // trigger the fake timer using the Observer reference
  timerObserver.next('');
  timerObserver.complete();

  expect(somethingToHappenAfterTimerCompletes).toHaveBeenCalled();
});

您可以使用fakeAsync()轻松测试 Observable 计时器。 这是一个显示倒数计时器的组件(使用 momentJS 持续时间):

超时.component.ts

@Component({
  selector: 'app-timeout-modal',
  templateUrl: './timeout-modal.component.html'
})
export class TimeoutModalComponent implements OnInit {
  countdownTimer: Observable<number>;
  countdownSubscription: Subscription;
  durationLeft = moment.duration(60000); // millis - 60 seconds

  ngOnInit() {
    this.countdownTimer = Observable.timer(0, 1000);
    this.countdownSubscription = this.countdownTimer
      .do(() => this.durationLeft.subtract(1, 's'))
      .takeWhile(seconds => this.durationLeft.asSeconds() >= 0)
      .subscribe(() => {
        if (this.durationLeft.asSeconds() === 0) {
        this.logout();
      }
    });
  }
}

timeout.component.spec.ts

beforeEach(async(() => {
    ...
}));

beforeEach(() => {
    fixture = TestBed.createComponent(TimeoutModalComponent);
    component = fixture.componentInstance;
});

it('should show a count down', fakeAsync(() => {
    fixture.detectChanges();
    expect(component.durationLeft.asSeconds()).toEqual(60);
    tick(1000);
    fixture.detectChanges();
    expect(component.durationLeft.asSeconds()).toEqual(59);

    component.countdownSubscription.unsubscribe();
}));

我也为此挣扎了一段时间。 自从提出这个问题以来,框架显然发生了很多变化,我想也许有人会被我的解决方案所帮助。 我的项目使用 rxjs 5、jasmine 2.8 和 angular 5。

在我的组件中,一个计时器用于每分钟调用一次服务中的 http-get 函数。 我的问题是,当使用 fakeAsync zone 时,(存根)get 函数从未被调用,我收到错误:“错误:1 个周期计时器仍在队列中。”。

出现错误是因为计时器一直在触发并且在测试结束时没有停止。 这可以通过添加“discardPeriodicTasks();”来解决到测试结束,这会导致计时器停止。 滴答(); 可用于假装时间流逝,直到下一次通话。 我在我的服务中对我的 get 函数使用了一个间谍,看看它是否有效:

  it(
    'should call getTickets from service every .. ms as defined in refreshTime',
    fakeAsync(() => {
      fixture.detectChanges();
      tick();
      expect(getTicketsSpy).toHaveBeenCalledTimes(1);
      // let 2 * refreshtime pass
      tick(2 * component.refreshTime);
      expect(getTicketsSpy).toHaveBeenCalledTimes(3);
      discardPeriodicTasks();
    })
  );

refreshTime 是我在计时器中使用的参数。 我希望这可以防止有人花半天时间来解决这个问题。

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM