我已将官方文档中的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(); }));更多推荐
发布评论