[Angular] Testing @Input and @Output bindings
Component:
import { Component, Input, ChangeDetectionStrategy, EventEmitter, Output } from '@angular/core'; @Component({
selector: 'stock-counter',
changeDetection: ChangeDetectionStrategy.OnPush,
template: `
<div class="stock-counter">
<div>
<div
(keydown)="onKeyUp($event)"
(blur)="onBlur($event)"
(focus)="onFocus($event)"
tabindex="0">
<p>{{ value }}</p>
<div tabindex="-1">
<button type="button" tabindex="-1" (click)="increment()" [disabled]="value === max">
+
</button>
<button type="button" tabindex="-1" (click)="decrement()" [disabled]="value === min">
-
</button>
</div>
</div>
</div>
</div>
`
})
export class StockCounterComponent {
@Input() step: number = 1;
@Input() min: number = 0;
@Input() max: number = 100; @Output() changed = new EventEmitter<number>(); value: number = 0;
focused: boolean; increment() {
if (this.value < this.max) {
this.value = this.value + this.step;
this.changed.emit(this.value);
}
} decrement() {
if (this.value > this.min) {
this.value = this.value - this.step;
this.changed.emit(this.value);
}
} private onBlur(event: FocusEvent) {
this.focused = false;
event.preventDefault();
event.stopPropagation();
} private onKeyUp(event: KeyboardEvent) {
let handlers = {
ArrowDown: () => this.decrement(),
ArrowUp: () => this.increment()
}; if (handlers[event.code]) {
handlers[event.code]();
event.preventDefault();
event.stopPropagation();
}
} private onFocus(event: FocusEvent) {
this.focused = true;
event.preventDefault();
event.stopPropagation();
} }
Test @Input & @Output:
import {ComponentFixture, TestBed} from '@angular/core/testing';
import {BrowserDynamicTestingModule, platformBrowserDynamicTesting} from '@angular/platform-browser-dynamic/testing'; import {StockCounterComponent} from './stock-counter.component'; TestBed.initTestEnvironment(
BrowserDynamicTestingModule,
platformBrowserDynamicTesting()
); describe('StockCounterComponent', () => { let component: StockCounterComponent;
let fixture: ComponentFixture<StockCounterComponent>; beforeEach(() => {
TestBed.configureTestingModule({
declarations: [
StockCounterComponent
]
}); fixture = TestBed.createComponent(StockCounterComponent);
component = fixture.componentInstance; component.value = ;
}); it('should not increase over the max value', () => {
component.step = ;
component.max = ;
component.increment();
component.increment();
expect(component.value).toEqual();
}); it('should not decrease below the min value', () => {
component.step = ;
component.min = ;
component.value = ;
component.decrement();
expect(component.value).toEqual();
component.decrement();
expect(component.value).toEqual();
}); it('should call the output on a value change', () => {
spyOn(component.changed, 'emit').and.callThrough();
component.step = ;
component.increment();
expect(component.changed.emit).toHaveBeenCalledWith()
});
});
[Angular] Testing @Input and @Output bindings的更多相关文章
- angular 的 @Input、@Output 的一个用法
angular 使用 @input.@Output 来进行父子组件之间数据的传递. 如下: 父元素: <child-root parent_value="this is parent ...
- Angular中input和output使用
// 写法一: 1 @Components({ 2 ...., 3 inputs:['init'], 4 outputs:['finish'] 5 }) 6 export class xxx(){ 7 ...
- Angular4学习笔记(六)- Input和Output
概述 Angular中的输入输出是通过注解@Input和@Output来标识,它位于组件控制器的属性上方. 输入输出针对的对象是父子组件. 演示 Input 新建项目connInComponents: ...
- [20160704]Addition program that use JOptionPane for input and output
//Addition program that use JOptionPane for input and output. import javax.swing.JOptionPane; public ...
- Python Tutorial 学习(七)--Input and Output
7. Input and Output Python里面有多种方式展示程序的输出.或是用便于人阅读的方式打印出来,或是存储到文件中以便将来使用.... 本章将对这些方法予以讨论. 两种将其他类型的值转 ...
- [Python] Print input and output in table
Print the input and output in a table using prettyTable. from prettytable import PrettyTable import ...
- Input and Output File
Notes from C++ Primer File State Condition state is used to manage stream state, which indicates if ...
- [20171128]rman Input or output Memory Buffers.txt
[20171128]rman Input or output Memory Buffers.txt --//做一个简单测试rman 的Input or output Memory Buffers. 1 ...
- Python - 3. Input and Output
from:http://interactivepython.org/courselib/static/pythonds/Introduction/InputandOutput.html Input a ...
随机推荐
- [Redux-Observable && Unit Testing] Use tests to verify updates to the Redux store (rxjs scheduler)
In certain situations, you care more about the final state of the redux store than you do about the ...
- C# 读取指定文件夹中的全部文件,并按规则生成SQL语句!
本实例的目的在于: 1 了解怎样遍历指定文件夹中的全部文件 2 控制台怎样输入和输出数据 代码: using System; using System.IO; namespace ToSql{ cla ...
- Android-Volley网络通信框架(二次封装数据请求和图片请求(包含处理请求队列和图片缓存))
1.回想 上篇 使用 Volley 的 JsonObjectRequest 和 ImageLoader 写了 电影列表的样例 2.重点 (1)封装Volley 内部 请求 类(请求队列,数据请求,图片 ...
- js获取单选button的值
<!DOCTYPE html> <html> <body> <script type="text/javascript"> func ...
- hdu 1233 还是畅通project (克鲁斯卡尔裸题)
还是畅通project Time Limit: 4000/2000 MS (Java/Others) M ...
- Python - 字典(dict)删除元素
字典(dict)删除元素, 能够选择两种方式, dict.pop(key)和del dict[key]. 代码 # -*- coding: utf-8 -*- def remove_key(d, ke ...
- HDU1023 Train Problem II【Catalan数】
题目链接: http://acm.hdu.edu.cn/showproblem.php?pid=1023 题目大意: 一列N节的火车以严格的顺序到一个站里.问出来的时候有多少种顺序. 解题思路: 典型 ...
- TextView -无法调节字体、边框的距离
今天调节一个字体边框距离,结果一直都实现不了,布局如下 <RelativeLayout xmlns:android="http://schemas.android.com/apk/re ...
- 新技能 get —— 如何校验 md5(windows)
我们在某资源网站上下载完成指定文件后,尤其是一些下载所需较高时长的大型文件,如何检验下载的文件是否完好,也即如何保证和原始网站上的资源一样.此时就要用到检验码的机制,一般文件的下载界面,通常都会给出此 ...
- 30.Node.js 全局对象
转自:http://www.runoob.com/nodejs/nodejs-module-system.html 学习要点: - __filename - __dirname - setTimeou ...