在jasmine beforeEach里修改UI元素的一个side effect
时间:2022-07-28
本文章向大家介绍在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不了。
- 【专业技术】Node.js 究竟是什么?
- Github 项目推荐 | 用 Pytorch 实现的 WaveNet-Vocoder
- 重启数据库的一场闹剧(r5笔记第68天)
- 【C语言系列】基础语法案例分析(初级篇)
- 一次ORA-00600问题的排查和分析(r5笔记第64、65天)
- SpringMVC入门就这么简单
- pl/sql中的forall简单测试(r5笔记第63天)
- SpringMVC【开发Controller】详解
- 巧用外部表备份历史数据(r5笔记第62天)
- Github 项目推荐 | 最小化类 AlphaGo Zero 引擎 —— Nochi
- 半自动化运维之快速连接到指定环境(一) (r5笔记第61天)
- Spring【DAO模块】知识要点
- 浅谈exp/imp(上) (r5笔记第81天)
- Java高并发秒杀系统【观后总结】
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- React源码解读【一】API复习与基础
- choco 安装 和 mkcert 本地https
- js 函数柯里化(Currying)
- GPS数据Python解析及地图可视化
- 文稿:Ant Design从无到有,带你体悟大厂前端开发范式
- 在React中实现和Vue一样舒适的keep-alive
- uniapp获取接口数据,渲染在picker选择器里面
- 我们是这样一步一步实现分布式锁的
- 缓存并发神技,如何通过双 key 来解决缓存并发问题?
- LRU缓存淘汰算法实现方案,这次没人再说你不会开发
- JVM技术总结之三——类加载机制
- 为什么你每次被问到HashMap底层原理都一知半解,搞定它
- 要想精通java,你必须得知道java的内存模型,不忽悠
- java类加载机制,再也不怕面试官的刁难
- 前端科普系列(4):Babel —— 把 ES6 送上天的通天塔