Единичный тест с объектом страницы - тесты, выполняемые перед заданными элементами страницы html - Угловые 2 Жасмин

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()?

Возможно, это связано с тем, что я удалил условие if, которое завернуло функцию addPageElements. Он проверял, чтобы в компоненте был объект 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 «s должны иметь утилиту тестирования асинхронной:

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