使用 Page 对象进行单元测试 - 在定义 Page 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
的函数,它在承诺中运行:
return fixture.whenStable().then(() => {
// 2nd change detection displays the async-fetched hero
fixture.detectChanges();
page.addPageElements();
});
但是对于我的单元测试,page.addElements()
没有在我的 it()
单元测试之前执行。我已经将该函数放在与 angular 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;
}
}
});
现在需要一个额外的异步任务:
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();
}));
我已将官方文档中的 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()
单元测试之前执行。我已经将该函数放在与 angular 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;
}
}
});
现在需要一个额外的异步任务:
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();
}));