Question

我已将官方文档中的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;
      }
   }
});

Answer 1

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

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

使用Page对象进行单元测试 - 在定义Page html元素之前运行的测试 - Angular 2 Jasmine

1 个答案: