單元測試源代碼：

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);beforeEach(() => {setDeliveryModeId('aa');fixture.detectChanges();let button = getContinueBtn();console.log('beforeEach inside continue button describe, component.deliveryModeInvalid: ' + component.deliveryModeInvalid + ' button.disabled: ' + button.nativeElement.disabled );setDeliveryModeId(null);fixture.detectChanges();console.log('set delivery mode id to null!');button = getContinueBtn();console.log('after that, component.deliveryModeInvalid: ' + component.deliveryModeInvalid + ' button.disabled: ' + button.nativeElement.disabled );});it('should be available', () => {const button = getContinueBtn();console.log('fixture.detectChanges is put in beforeEach: ' + button);//fixture.detectChanges();//button = getContinueBtn();//console.log('after call fixture.detectChanges: ' + button);expect(button).toBeTruthy();});/*it('should be disabled when delivery mode is not selected', () => {setDeliveryModeId(null);fixture.detectChanges();expect(getContinueBtn().nativeElement.disabled).toBe(true);});*/}); });

先enable，再disable：

Actual test result:

disable不了。

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

總結

以上是生活随笔為你收集整理的在jasmine beforeEach里修改UI元素的一个side effect的全部內容，希望文章能夠幫你解決所遇到的問題。

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