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中 表头th 合并单元格,且表格列数不定的动态渲染方法

    吐槽 今天,在vue中遇到 复杂表格的渲染 ,需要合并表头的单元格,且合并单元格的那列还是动态数据,也就是说你不知道会有多少组要合并起来,哎,我也有点说不清楚,废话不多说了,看代码把: 代码示例 da ...

  2. python--MySQL权限管理 数据备份还原

    一 权限管理 mysql最高管理者是root用户, 这个一般掌握在公司DBA手里, 当你想去对数据库进行一些操作的时候,需要DBA授权给你. 1. 对新用户增删改 1. 创建用户 # 要先use my ...

  3. python基础——14(shelve/shutil/random/logging模块/标准流)

    一.标准流 1.1.标准输入流 res = sys.stdin.read(3) 可以设置读取的字节数 print(res) res = sys.stdin.readline() print(res) ...

  4. Android AAR 混淆的坑

    一定不要忘记加上这段 -keepattributes Exceptions,InnerClasses,Signature,Deprecated,SourceFile,LineNumberTable,A ...

  5. DDL、DML、DCL、DQL的理解

    DDL.DML 和 DCL 的理解 DDL(data definition language)数据库定义语言 的主要语句(操作) Create 语句:可以创建数据库和数据库的一些对象. Drop 语句 ...

  6. LOGMNR分析redo log和archive log教程

    自Oracle 11g起,无需设置UTL_FILE_DIR就可以使用LOGMNR对本地数据库的日志进行分析,以下是使用LOGMNR的DICT_FROM_ONLINE_CATALOG分析REDO和归档日 ...

  7. POJ-1065 Wooden Sticks,排序+最长单减子序列!

                                                       Wooden Sticks 题意:有一台机器处理木材,最开始需要一分钟准备,如果后面处理的木材比前 ...

  8. 【Luogu】P3116会议时间(拓扑排序,DP)

    题目链接 本题使用拓扑排序来规划DP顺序.设s[i][j]表示i步是否能走到j这个点,e[i][j]表示i步是否能走到j这个点——用第二条路径.因为要满足无后效性和正确性,只有第i个点已经全部更新完毕 ...

  9. 谈Elasticsearch下分布式存储的数据分布

     对于一个分布式存储系统来说,数据是分散存储在多个节点上的.如何让数据均衡的分布在不同节点上,来保证其高可用性?所谓均衡,是指系统中每个节点的负载是均匀的,并且在发现有不均匀的情况或者有节点增加/删除 ...

  10. BZOJ3572 [Hnoi2014]世界树 【虚树 + 树形dp】

    题目 世界树是一棵无比巨大的树,它伸出的枝干构成了整个世界.在这里,生存着各种各样的种族和生灵,他们共同信奉着绝对公正公平的女神艾莉森,在他们的信条里,公平是使世界树能够生生不息.持续运转的根本基石. ...