在jasmine beforeEach里修改UI元素的一个side effect

单元测试源代码：

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相关推荐

Swift之深入解析如何使用Xcode和LLDB v2修改UI元素
一.前言在上一篇博客中,已经详细地介绍如何使用 LLDB 表达式修改 UI 元素,具体请参考:Swift之深入解析如何将代码添加为自定义LLDB命令. 在这篇博客中,将继续讨论相同的问题需求,并将重 ...
BSP和JSP里的UI元素ID生成逻辑
CRM WebClient UI WebClient UI渲染出来的DOM元素的这些C#_W#格式的id是在哪行ABAP代码被生成出来的? 参考我的博客WebClient UI element ID ...
使用XML声明自定义Android UI元素
如何使用XML声明Android UI元素? #1楼 Google似乎更新了其开发者页面,并在那里添加了各种培训. 其中一个处理自定义视图的创建,可以在这里找到 #2楼除了大多数投票的答案. obt ...
WPF 中使用附加属性，将任意 UI 元素或控件裁剪成圆形（椭圆）
原文:WPF 中使用附加属性,将任意 UI 元素或控件裁剪成圆形(椭圆) 版权声明:本作品采用知识共享署名-非商业性使用-相同方式共享 4.0 国际许可协议进行许可.欢迎转载.使用.重新发布,但务必保 ...
Silverlight 2 DispatcherTimer和通过XAML创建UI元素
XAML标签元素在silverlight运行时被转换成相应的对象,通过XamlReader类的Load方法,动态创建UI元素: 指定一条XAML内容字符串,为按照XML规则运行,XamlReader. ...
WPF实例秀——如何获取UI元素的图像
这个标题还真难说明白,我还是再解释一下吧. 比如我想在UI上拖拽某个元素,拖拽过程中,我需要让这个UI元素的影相跟着鼠标移动(但UI还停留在原位),当放开鼠标的时候,UI元素移动到新的位置. 这是个很 ...
动态控制SAP C4C UI元素的显示和隐藏
C4C UI上UI元素的显示和隐藏可以通过Key User在Adaptation模式里通过编辑一些简单的rule去控制,诸如这种格式: if ( logic expression = true )th ...
wpf 使子ui元素可视区域不超过父元素_对游戏UI设计的一点思考
UI决定了一个游戏的初体验,甚至决定了玩家的初始留存,甚至可以说决定了一个游戏的品质,虽然看起来是表象的,却是直指游戏核心的.简单讲,玩家认可一款游戏永远都是造型场景好,剧情好,画质棒:但是玩家骂一款 ...
php修改js内容,js怎样修改html元素的内容？HTML DOM实现修改内容
js怎样修改html元素的内容?本章就给大家介绍在js中利用HTML DOM是怎样修改html元素内容的.有一定的参考价值,有需要的朋友可以参考一下,希望对你们有所帮助. 首先我们要了解HTML DO ...

在jasmine beforeEach里修改UI元素的一个side effect

在jasmine beforeEach里修改UI元素的一个side effect相关推荐

最新文章

热门文章