在jasmine beforeEach里修改UI元素的一个side effect
UI 一个 修改 元素 Side Effect Jasmine
2023-09-14 09:04:03 时间
单元测试源代码:
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的原创文章,请关注公众号"汪子熙":
相关文章
- UI框架——后台管理系统模板
- 使用FlashCS制作UI导出swc在Actionscript中调用
- element-plus 一个vue3.xUI框架 (element-ui的3.x 版初体验)
- Sketch for mac(矢量绘图UI设计软件)93 最新中文版
- 安卓软件开发_应用程序UI组件意外停止
- Kubernetes部署Dashboard(WEB UI管理界面)
- 7个UI/UX设计趋势,帮你打造杀手级应用
- IDEA+SSM+SpringBoot+Vue+Element UI实现班级管理增删改查
- 2023-01-13:joxit/docker-registry-ui是registry的web界面工具之一。请问部署在k3s中,yaml如何写?
- 【100个 Unity实用技能】 | 修改Unity UI控件中默认字体配置
- sap.m.Table 和 sap. ui.table.Table 两个控件的功能对比
- 【Android 应用开发】Android UI 设计之 TextView EditText 组件属性方法最详细解析