我已将官方文档中的Angular 2 Page Object应用于我的测试以简化设置。
在文档中以及在我的代码中,它还有一个名为page.addElements
的函数,它在一个承诺中运行:
return fixture.whenStable().then(() => {
// 2nd change detection displays the async-fetched hero
fixture.detectChanges();
page.addPageElements();
});
但是对于我的单元测试,page.addElements()
在我的it()
单元测试之前没有执行。我把功能放在同一个地方,因为角度2文档的例子不是我吗?为什么我的it()
功能在page.addElements()
之前运行?
这可能是因为我删除了包含addPageElements函数的if
条件。它检查以确保组件中有一个Hero对象,但我的组件没有依赖它的对象。
完整规格:
import 'zone.js/dist/long-stack-trace-zone.js';
import 'zone.js/dist/async-test.js';
import 'zone.js/dist/fake-async-test.js';
import 'zone.js/dist/sync-test.js';
import 'zone.js/dist/proxy.js';
import 'zone.js/dist/jasmine-patch.js';
import {
ComponentFixture,
TestBed,
async,
fakeAsync,
inject
} from '@angular/core/testing';
import {
BrowserDynamicTestingModule,
platformBrowserDynamicTesting
} from '@angular/platform-browser-dynamic/testing';
import { By } from '@angular/platform-browser';
import { DebugElement } from '@angular/core';
import { Router } from '@angular/router';
import { AboutPageComponent } from './about-page.component';
import { ABOUT_ADD_TEXT,
ABOUT_WHY_TEXT,
ABOUT_FIND_TEXT,
ABOUT_MAIN_TEXT,
ABOUT_RATE_REVIEW_TEXT } from '../resources/strings'
import { click } from '../test/utilities.spec'
describe('AboutPageComponent', () => {
let component: AboutPageComponent;
let fixture: ComponentFixture<AboutPageComponent>;
let debugElement: DebugElement;
let element: HTMLElement;
let page: Page;
let expectedBlurbTitle: string;
beforeAll(() => {
TestBed.resetTestEnvironment();
TestBed.initTestEnvironment(
BrowserDynamicTestingModule,
platformBrowserDynamicTesting()
);
});
beforeEach(async(() => {
TestBed.configureTestingModule({
declarations: [AboutPageComponent]
}).compileComponents();
}));
beforeEach(() => {
expectedBlurbTitle = "blurb title?";
createComponent();
});
function createComponent() {
fixture = TestBed.createComponent(AboutPageComponent);
component = fixture.componentInstance;
page = new Page();
// 1st change detection triggers ngOnInit
fixture.detectChanges();
return fixture.whenStable().then(() => {
// 2nd change detection displays the async-fetched hero
fixture.detectChanges();
page.addPageElements();
});
}
it('should display the base blurb', () => {
expect(page.blurbHeadingDisplay.textContent).toBe(expectedBlurbTitle);
expect(page.blurbDisplay.textContent).toBe(ABOUT_MAIN_TEXT);
});
it('should display the "why" blurb when hovering over why', () => {
click(page.whyCircle);
expect(page.blurbDisplay.textContent).toBe(ABOUT_WHY_TEXT);
});
class Page {
navSpy: jasmine.Spy;
blurbHeadingDisplay: HTMLElement;
blurbDisplay: HTMLElement;
whyCircle: HTMLElement;
findCircle: HTMLElement;
addCircle: HTMLElement;
rateCircle: HTMLElement;
/** Add page elements after hero arrives */
addPageElements() {
this.whyCircle = fixture.debugElement.query(By.css('#why')).nativeElement;
this.findCircle = fixture.debugElement.query(By.css('#find')).nativeElement;
this.addCircle = fixture.debugElement.query(By.css('#add')).nativeElement;
this.rateCircle = fixture.debugElement.query(By.css('#rate-review')).nativeElement;
this.blurbHeadingDisplay = fixture.debugElement.query(By.css('h1:nth-of-type(3)')).nativeElement;
this.blurbDisplay = fixture.debugElement.query(By.css('p:first-of-type')).nativeElement;
}
}
});
答案 0 :(得分:0)
现在需要额外的异步任务:
return fixture.whenStable().then(() => {
两个beforeEach
都需要拥有异步测试工具:
beforeEach(async(() => {
TestBed.configureTestingModule({
declarations: [
MiddleRowComponent,
CirclesComponent,
ButtonComponent
],
providers: [{
provide: Router,
useClass: class {
navigateByUrl(url: string) { return url; }
}
}]
}).compileComponents();
}));
beforeEach(async(() => {
fixture = TestBed.createComponent(MiddleRowComponent);
component = fixture.componentInstance;
fixture.detectChanges();
createComponent();
}));