HTML:

          <div  ng-focus="vm.onFocus(month)",
aria-focus="{{vm.focus == month}}",
ng-keydown="vm.onKeydown($event, month)">

Component Controller:

   onKeydown(e, num) {
switch(e.which) { case : // enter
case : {
// Space
e.preventDefault();
this.select(+num);
break;
}
case : {
// up
e.preventDefault();
this.onUp(this.focus);
break;
}
case : {
// right
e.preventDefault();
this.onRight(this.focus);
break;
}
case : {
// left
e.preventDefault();
this.onLeft(this.focus);
break;
}
case : {
//down
e.preventDefault();
this.onDown(this.focus);
break;
}
default: {
angular.noop();
} }
} onFocus(num) {
this.focus = +num;
} onUp(crtFocus) {
if (crtFocus === null) {
return;
} const newFocus = crtFocus - <= this._MIN_MONTH ? this._MIN_MONTH : crtFocus - ;
this.onFocus(newFocus);
} onDown(crtFocus) {
if (crtFocus === null) {
return;
} const newFocus = crtFocus + >= this._MAX_MONTH ? this._MAX_MONTH : crtFocus + ;
this.onFocus(newFocus);
} onRight(crtFocus) {
if (crtFocus === null) {
return;
} const newFocus = crtFocus + >= this._MAX_MONTH ? this._MAX_MONTH : crtFocus + ;
this.onFocus(newFocus);
} onLeft(crtFocus) {
if (crtFocus === null) {
return;
} const newFocus = crtFocus - <= this._MIN_MONTH ? this._MIN_MONTH : crtFocus - ;
this.onFocus(newFocus);
} onBlur() {
this.focus = null;
}

Testing:

            describe('keyboard control', () => {

                const UNKNOWN = 10, ENTER = 13, SPACE = 32, UP = 38, RIGHT = 39, LEFT = 37, DOWN = 40;

                it('onKeydown should be called when recevice on keydown event', () => {
spyOn(ctrl, 'onKeydown');
angular.element(firstTile).triggerHandler({type: 'keydown', which: ENTER});
$scope.$digest();
expect(ctrl.onKeydown).toHaveBeenCalled();
}); it('select function should be called when receive "Enter" keydown events', () => {
spyOn(ctrl, 'select').and.callThrough();
angular.element(firstTile).triggerHandler({type: 'keydown', which: ENTER});
$scope.$digest();
expect(ctrl.select).toHaveBeenCalledWith(1);
}); it('select function should be called when receive "Space" keydown events', () => {
spyOn(ctrl, 'select').and.callThrough();
angular.element(firstTile).triggerHandler({type: 'keydown', which: SPACE});
$scope.$digest();
expect(ctrl.select).toHaveBeenCalledWith(1);
}); it('onUp function should be called when UP keydown triggered', () => {
spyOn(ctrl, 'onUp').and.callThrough();
ctrl.focus = 12;
const expected = ctrl.focus - 4;
angular.element(lastTile).triggerHandler({type: 'keydown', which: UP});
$scope.$digest();
expect(ctrl.onUp).toHaveBeenCalledWith(12);
expect(ctrl.focus).toEqual(expected);
}); it('if current focus is null, onFocus should not be called', () => {
spyOn(ctrl, 'onFocus');
expect(ctrl.focus).toBe(null);
angular.element(lastTile).triggerHandler({type: 'keydown', which: UP});
$scope.$digest();
expect(ctrl.onFocus).not.toHaveBeenCalled();
}); it('onLeft function should be called when UP keydown triggered', () => {
spyOn(ctrl, 'onLeft').and.callThrough();
ctrl.focus = 12;
const expected = ctrl.focus - 1;
angular.element(lastTile).triggerHandler({type: 'keydown', which: LEFT});
$scope.$digest();
expect(ctrl.onLeft).toHaveBeenCalledWith(12);
expect(ctrl.focus).toEqual(expected);
}); it('onRight function should be called when UP keydown triggered', () => {
spyOn(ctrl, 'onRight').and.callThrough();
ctrl.focus = 1;
const expected = ctrl.focus + 1;
angular.element(firstTile).triggerHandler({type: 'keydown', which: RIGHT});
$scope.$digest();
expect(ctrl.onRight).toHaveBeenCalledWith(1);
expect(ctrl.focus).toEqual(expected);
}); it('onDown function should be called when UP keydown triggered', () => {
spyOn(ctrl, 'onDown').and.callThrough();
ctrl.focus = 1;
const expected = ctrl.focus + 4;
angular.element(firstTile).triggerHandler({type: 'keydown', which: DOWN});
$scope.$digest();
expect(ctrl.onDown).toHaveBeenCalledWith(1);
expect(ctrl.focus).toEqual(expected);
}); it('should only trigger angular.noop() function when other keycode keydown event trigger', () => {
spyOn(angular, 'noop');
angular.element(firstTile).triggerHandler({type: 'keydown', which: UNKNOWN});
$scope.$digest();
expect(angular.noop).toHaveBeenCalled();
});
});

[AngularJS Unit tesint] Testing keyboard event的更多相关文章

  1. [Unit Testing] AngularJS Unit Testing - Karma

    Install Karam: npm install -g karma npm install -g karma-cli Init Karam: karma init First test: 1. A ...

  2. [Angular + Unit] AngularJS Unit testing using Karma

    http://social.technet.microsoft.com/wiki/contents/articles/32300.angularjs-unit-testing-using-karma- ...

  3. [AngularJS + Unit Testing] Testing Directive's controller with bindToController, controllerAs and isolate scope

    <div> <h2>{{vm.userInfo.number}} - {{vm.userInfo.name}}</h2> </div> 'use str ...

  4. [AngularJS + Unit Testing] Testing a component with requiring ngModel

    The component test: describe('The component test', () => { let component, $componentController, $ ...

  5. Run Unit API Testing Which Was Distributed To Multiple Test Agents

    Recently I am blocked by a very weird issue, from the VS installed machine, I can run performance te ...

  6. [React & Testing] Simulate Event testing

    Here we want to test a toggle button component, when the button was click, state should change, styl ...

  7. AngularJS unit test report / coverage report

    参考来源: http://www.cnblogs.com/vipyoumay/p/5331787.html 这篇是学习基于Angularjs的nodejs平台的单元测试报告和覆盖率报告.用到的都是现有 ...

  8. c++ get keyboard event

    #include <string> #include <iostream> #include "windows.h" #include <conio. ...

  9. angularJS学习资源最全汇总

    基础 官方: http://docs.angularjs.org angularjs官方网站已被墙,可看 http://www.ngnice.com/: 官方zip下载包 https://github ...

随机推荐

  1. vue-music:歌词的其他功能

    由于歌词的播放需要歌曲播放,切换歌曲,歌曲的播放模式等等有关联,因此,需要在这几处处理相关问题 1.循环播放回不到开始位置 loop() { this.$refs.audio.currentTime ...

  2. pandas模块(很详细归类),pd.concat(后续补充)

    6.12自我总结 一.pandas模块 import pandas as pd约定俗称为pd 1.模块官方文档地址 https://pandas.pydata.org/pandas-docs/stab ...

  3. Template--模板

    模板引擎的支持 配置 模板引擎配置为TEMPLATES设置.这是一个配置列表,每个引擎一个,默认值为空.这是settings.py生成的,通过startproject命令定义了一个更有用的值: TEM ...

  4. 阀值化 threshold

    OpenCV中的阈值(threshold)函数: threshold 的运用. C++: double threshold(InputArray src, OutputArray dst, doubl ...

  5. jdbc 和 hibernate 比较

    相同点:都是数据库操作的中间件,都不是线程安全需要即时关闭,都可以对数据库操作进行显式处理. 不同:jdbc使用标准sql语言,hibernate使用HQL,操作对象jdbc直接操作数据传送到数据库, ...

  6. MFC中的CListControl控件

    一直想要这种效果,无奈刚开始用了cListbox控件,不知道怎么生成背景的边框,找了好久资料,突然发现好像控件用错了. 用CListControl控件实现图中效果,超级开心~ 实现过程: 添加一个Li ...

  7. python算法-队列

    一.队列的特征性: 1. 先进先出 9 8 7 6 5 4 3 2 1 0 last                                                           ...

  8. Python内置函数(4)

    Python内置函数(4) 1.copyright 交互式提示对象打印许可文本,一个列表贡献者和版权声明 2.credits 交互式提示对象打印许可文本,一个贡献者和版权声明的列表 3.delattr ...

  9. Leetcode 410.分割数组的最大值

    分割数组的最大值 给定一个非负整数数组和一个整数 m,你需要将这个数组分成 m 个非空的连续子数组.设计一个算法使得这 m 个子数组各自和的最大值最小. 注意:数组长度 n 满足以下条件: 1 ≤ n ...

  10. 02-JSON

    <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...