单元测试与页面对象

单元测试与页面对象 - 在页面html元素定义之前运行的测试 - Angular 2 Jasmine(Unit Test with Page object - tests running before Page html elements defined - Angular 2 Jasmine)

我已将官方文档中的Angular 2 Page Object应用于我的测试，以简化设置。

在文档中，在我的代码中也有一个名为page.addElements的函数，它在promise中运行：

return fixture.whenStable().then(() => { // 2nd change detection displays the async-fetched hero fixture.detectChanges(); page.addPageElements(); });

然而对于我的单元测试， page.addElements()在我的it()单元测试之前没有执行。 我已经把这个函数放在与angular 2 docs例子不同的地方了吗？ 为什么我的page.addElements()函数在我的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; } } });

I have applied the Angular 2 Page Object from the official docs to my tests to simplify setup.

In the docs and so also in my code it has a function called page.addElements that runs in a promise:

return fixture.whenStable().then(() => { // 2nd change detection displays the async-fetched hero fixture.detectChanges(); page.addPageElements(); });

However for my unit test, page.addElements() is not executing before my it() unit tests. I have placed the function in the same place as the angular 2 docs example haven't I? Why are my it() functions running before my page.addElements()?

It may be because I removed an if condition that wrapped the addPageElements function. It checked to make sure there was a Hero object in the component but my component has no such object that it depends on.

Full spec:

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; } } });

最满意答案

现在需要额外的异步任务：

return fixture.whenStable().then(() => {

每个人都需要有异步测试工具：

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(); }));

Now that an extra async task is required:

return fixture.whenStable().then(() => {

both beforeEach's need to have the async testing utility:

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(); }));