單元測試代碼：

import { Component } from '@angular/core'; import { async, ComponentFixture, TestBed } from '@angular/core/testing'; import { ReactiveFormsModule } from '@angular/forms'; import { ActivatedRoute } from '@angular/router'; import {CheckoutDeliveryService,DeliveryMode,I18nTestingModule, } from '@spartacus/core'; import { Observable, of } from 'rxjs'; import { CheckoutConfigService } from '../../services/checkout-config.service'; import { CheckoutStepService } from '../../services/checkout-step.service'; import { DeliveryModeComponent } from './delivery-mode.component'; import createSpy = jasmine.createSpy; import { LoaderState } from '../../../../../../core/src/state/utils/loader'; import { By } from '@angular/platform-browser';@Component({selector: 'cx-spinner',template: '', }) class MockSpinnerComponent {}class MockCheckoutDeliveryService {loadSupportedDeliveryModes = createSpy();setDeliveryMode = createSpy();getSupportedDeliveryModes(): Observable<DeliveryMode[]> {return of();}getSelectedDeliveryMode(): Observable<DeliveryMode> {return of();}getLoadSupportedDeliveryModeProcess(): Observable<LoaderState<void>> {return of();} }class MockCheckoutConfigService {getPreferredDeliveryMode(): string {return '';} }class MockCheckoutStepService {next = createSpy();back = createSpy();getBackBntText(): string {return 'common.back';} }const mockActivatedRoute = {snapshot: {url: ['checkout', 'delivery-mode'],}, };describe('DeliveryModeComponent', () => {// let component: DeliveryModeComponent;let fixture: ComponentFixture<DeliveryModeComponent>;beforeEach(async(() => {TestBed.configureTestingModule({imports: [ReactiveFormsModule, I18nTestingModule],declarations: [DeliveryModeComponent, MockSpinnerComponent],providers: [{provide: CheckoutDeliveryService,useClass: MockCheckoutDeliveryService,},{ provide: CheckoutStepService, useClass: MockCheckoutStepService },{ provide: CheckoutConfigService, useClass: MockCheckoutConfigService },{ provide: ActivatedRoute, useValue: mockActivatedRoute },],}).compileComponents();}));beforeEach(() => {fixture = TestBed.createComponent(DeliveryModeComponent);// component = fixture.componentInstance;console.log('beforeEach outside continue button describe');});describe('continue button', () =>{const getContinueBtn = () => fixture.debugElement.query(By.css('.cx-checkout-btns .btn-primary'));// const setDeliveryModeId = (value: string) => {// component.mode.controls['deliveryModeId'].setValue(value);it('should be available', () => {let button = getContinueBtn();console.log('before call fixture.detectChanges: ' + button);fixture.detectChanges();button = getContinueBtn();console.log('after call fixture.detectChanges: ' + button);expect(button).toBeTruthy();});}); });

測試結果：

由此可見，在fixture.detectChanges()之前，我們是無法使用fixture.debugElement.query獲取UI元素實例的。

當然，為了避免在每個it spec里訪問button之前都事先調用fixture.detectChanges, 我們可以把這個調用放到describe continue button內部的beforeEach里，思路如下：

測試結果依然ok：

要獲取更多Jerry的原創文章，請關注公眾號"汪子熙":

總結

以上是生活随笔為你收集整理的关于jasmine里debugElement.query和fixture.detectChanges的依赖关系的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。