[Angular] Test Directive
directive:
import { Directive, HostListener, HostBinding, ElementRef } from '@angular/core'; @Directive({
selector: '[credit-card]'
})
export class CreditCardDirective { @HostBinding('style.border')
border: string; @HostListener('input', ['$event'])
onKeyDown(event: KeyboardEvent) { const input = event.target as HTMLInputElement; let trimmed = input.value.replace(/\s+/g, '');
if (trimmed.length > ) {
trimmed = trimmed.substr(, );
} let numbers = [];
for (let i = ; i < trimmed.length; i += ) {
numbers.push(trimmed.substr(i, ));
} input.value = numbers.join(' '); this.border = '';
if (/[^\d]+/.test(trimmed)) {
this.border = '1px solid red';
} }
}
test:
import { DebugElement, Component } from '@angular/core';
import { ComponentFixture, TestBed } from '@angular/core/testing';
import { BrowserDynamicTestingModule, platformBrowserDynamicTesting } from '@angular/platform-browser-dynamic/testing';
import { By } from '@angular/platform-browser';
import { CreditCardDirective } from './credit-card.directive'; TestBed.initTestEnvironment(
BrowserDynamicTestingModule,
platformBrowserDynamicTesting()
); @Component({
template: `
<input type="text" [value]="value" credit-card>
`
})
class TestComponent {
value = ;
} describe('CreditCardDirective', () => { let component: TestComponent;
let fixture: ComponentFixture<TestComponent>;
let el: DebugElement; beforeEach(() => {
TestBed.configureTestingModule({
declarations: [
CreditCardDirective,
TestComponent
]
});
fixture = TestBed.createComponent(TestComponent);
component = fixture.componentInstance;
el = fixture.debugElement;
}); it('should format the string with spaces', () => {
const directive = el.query(By.directive(CreditCardDirective)).nativeElement;
directive.value = '';
directive.dispatchEvent(new Event('input'));
expect(directive.value).toBe('4751 23');
directive.value = '';
directive.dispatchEvent(new Event('input'));
expect(directive.value).toBe('4751 2398 1201 9201');
}); it('should have a max-length of 16 characters', () => {
const directive = el.query(By.directive(CreditCardDirective));
const directiveEl = directive.nativeElement;
directiveEl.value = '';
directiveEl.dispatchEvent(new Event('input'));
expect(directiveEl.value).toBe('4751 2398 1201 9201');
directiveEl.value = 'abscdef';
directiveEl.dispatchEvent(new Event('input'));
const directiveInstance = directive.injector.get(CreditCardDirective);
expect(directiveInstance.border).toContain('1px solid red');
}); });
[Angular] Test Directive的更多相关文章
- [Angular 2] Directive intro and exportAs
First, What is directive, what is the difference between component and directive. For my understandi ...
- 关于angular 自定义directive
关于angular 自定义directive的小结 首先我们创建一个名为"expander"的自定义directive指令: angular.module("myApp& ...
- [Angular] Custom directive Form validator
Create a directive to check no special characters allowed: import {Directive, forwardRef} from '@ang ...
- [Angular] Export directive functionalities by using 'exportAs'
Directive ables to change component behaives and lookings. Directive can also export some APIs which ...
- [Angular] Using directive to create a simple Credit card validator
We will use 'HostListener' and 'HostBinding' to accomplish the task. The HTML: <label> Credit ...
- angular service/directive
<html class=" js cssanimations csstransitions" ng-app="phonecatApp" > < ...
- 一个Demo就懂的Angular之directive
<body> <div ng-controller="myCtrl"> <hello-word></hello-word> < ...
- angular 中 directive中的多个指令
<div ng-controller="ctrl1"> <superman weight length speed>superman</superma ...
- Angular中directive——scope选项与绑定策略,这个也经常迷惑的。
开门见山地说,scope:{}使指令与外界隔离开来,使其模板(template)处于non-inheriting(无继承)的状态,当然除非你在其中使用了transclude嵌入,这点之后的笔记会再详细 ...
随机推荐
- 【iOS与EV3混合机器人编程系列之中的一个】iOS要干嘛?EV3能够更酷!
乐高Mindstorm EV3智能机器人(下面简称EV3)自从在2013年的CES(Consumer Electronics Show美国消费电子展)上展出之后,就吸引了全球广大机器人爱好者的眼球!E ...
- 深入具体解释SQL中的Null
NULL 在计算机和编程世界中表示的是未知,不确定.尽管中文翻译为 "空", 但此空(null)非彼空(empty). Null表示的是一种未知状态.未来状态,比方小明兜里有多少钱 ...
- hdu 3294 Girls' research
#include<stdio.h> #include<string.h> #define MAX 200020 char s[MAX],ss[MAX*2],str[2]; in ...
- c、c++ 结构体的嵌套
c.c++ 结构体的嵌套 /************************************************************************/ /* 嵌套结构体 * C ...
- [51Nod]NOIP2018提高组省一冲奖班模测训练(二)
http://www.51nod.com/contest/problemList.html#!contestId=73&randomCode=4408520896354389006 还是原题大 ...
- Android学习笔记之详细讲解画圆角图片
package xiaosi.RoundConcer; import android.app.Activity; import android.graphics.Bitmap; import andr ...
- Day3上午解题报告
预计分数:100+40+50=190 实际分数:100+40+50=190 T1 https://www.luogu.org/problem/show?pid=T15365 表示从来没做过博弈论的题, ...
- 通过no-gui模式运行jmeter脚本与生成报告
说明:使用NO-GUI 模式,即命令行模式运行 JMeter 测试脚本能够大大缩减所需要的系统资源. 步骤:在GUI(图形化界面)模式调整好脚本,通过FTP工具将需要测试的.jmx文件传输到linux ...
- Scala入门到精通——第二十二节 高级类型 (一)
作者:摇摆少年梦 视频地址:http://www.xuetuwuyou.com/course/12 本节主要内容 this.type使用 类型投影 结构类型 复合类型 1. this.type使用 c ...
- React组件之间通过Props传值的技巧(小案例,帮助体会理解props、state、受控组件和非受控组件等)
本文重要是根据react小书上的一个很简单的例子改编的,加上自己的学习理解,希望可以通过实际案例让大家对概念有更清晰的理解,当然也希望能一块学习. import React,{Component} f ...