使用 Jasmine Spy 测试 CDK 覆盖

Question

类似于测试mat-dialog，测试cdk覆盖的好方法是什么？

MatDialog Service Unit Test Angular 6 錯

誤示例服务调用：

openNotifications(origin: HTMLElement) {
this.refreshNotifications()
.subscribe();
const overlayRef = this.overlay.create({
positionStrategy: this.overlay.position().flexibleConnectedTo(origin).withPositions([
{
originX: 'center',
originY: 'bottom',
overlayX: 'center',
overlayY: 'top',
}
]),
hasBackdrop: true,
});
const portal = new ComponentPortal(NotificationsDropdownComponent);
overlayRef.attach(portal);
overlayRef.backdropClick().subscribe(() => {
overlayRef.detach();
this.refreshNotificationCount().subscribe();
});
}

Answer 1

我创建了一个 overlaySpyHelper，本质上我们仍然使用 Overlay 服务，但我们监视 create 方法并返回一个模拟 overlayRef

import {TestBed} from '@angular/core/testing';
import {NotificationsService} from './notifications.service';
import {UserNotificationsService} from '../swag-api/services';
import {Overlay, OverlayModule} from '@angular/cdk/overlay';
import {of} from 'rxjs';
import {UserNotificationsResponse} from '../swag-api/models';


describe('Given NotificationsService', () => {
let notificationsService: NotificationsService;
let userNotificationsServiceSpy: jasmine.SpyObj<UserNotificationsService>;
let overlayService: Overlay;
beforeEach(() => {
const spy1 = jasmine.createSpyObj('UserNotificationsService',
{
UserNotificationsGetCount: of({count: 5}),
UserNotificationsGetAll: of(getMockNotifications())
});
TestBed.configureTestingModule({
imports: [
OverlayModule,
],
providers: [
NotificationsService,
{provide: UserNotificationsService, useValue: spy1},
],
});
notificationsService = TestBed.get(NotificationsService);
userNotificationsServiceSpy = TestBed.get(UserNotificationsService);
overlayService = TestBed.get(Overlay);
});
fdescribe('When openNotifications', () => {
let createSpy;
let overlayRefSpyObj;
let simulateClickBackdropEvent;
beforeEach(() => {
({createSpy, overlayRefSpyObj, simulateClickBackdropEvent} = overlaySpyHelper(overlayService));
expect(userNotificationsServiceSpy.UserNotificationsGetAll.calls.count()).toBe(0);
notificationsService.openNotifications(null);
});
it('overlay created', () => {
expect(createSpy).toHaveBeenCalled();
});
it('then notifications refreshed', () => {
expect(userNotificationsServiceSpy.UserNotificationsGetAll.calls.count()).toBe(1);
});
it('then overlay opened', () => {
// overlayRef.attach();
expect(overlayRefSpyObj.attach).toHaveBeenCalled();
expect(overlayRefSpyObj.backdropClick().subscribe).toHaveBeenCalled();
expect(overlayRefSpyObj.detach).not.toHaveBeenCalled();
});
it('When backdrop clicked, close overlay and refresh count', () => {
expect(userNotificationsServiceSpy.UserNotificationsGetCount.calls.count()).toBe(0);
simulateClickBackdropEvent.callback();
expect(overlayRefSpyObj.detach).toHaveBeenCalled();
expect(userNotificationsServiceSpy.UserNotificationsGetCount.calls.count()).toBe(1);
});
});
});
function overlaySpyHelper(overlayService) {
const simulateClickBackdropEvent = {callback: null};
const overlayRefSpyObj = jasmine.createSpyObj({
attach: null,
backdropClick: jasmine.createSpyObj({subscribe: null}),
detach: null,
});
const createSpy = spyOn(overlayService, 'create').and.returnValue(overlayRefSpyObj);
overlayRefSpyObj.backdropClick().subscribe.and.callFake((cb) => {
simulateClickBackdropEvent.callback = cb;
});
return {createSpy, overlayRefSpyObj, simulateClickBackdropEvent};
}