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. 《零基础入门学习Python》【第一版】视频课后答案第005讲

    测试题答案: 0.Python中: int:整型 bool:布尔类型 float:浮点型 str:字符串类型 1.为什么布尔类型(bool)的TRUE和FALSE分别用0和1表示? 计算机只认识二进制 ...

  2. python学习第一天 计算机基础知识

    目录 什么是编程语言 什么是编程? 为什么要编程? 计算机5大组成分别有什么作用? qq启动的流程? 建议相关学习 课外 什么是编程语言 什么是编程语言? python和中文.英语一样,都是一门语言, ...

  3. Python9-递归函数-day17

    # 计算方法:人脑复杂,计算机简单#查找:找数据#排序#最短路径#我们学习的算法都是过去时#要了解基础的算法,才能创造出更好的算法#不是所有的事情都能套用现成的方法解决的# 有些时候会用到学过的算法只 ...

  4. MongoDB教程(笔记)

    一.NoSQL简介 1.什么是NoSQL NoSQL,指的是非关系型的数据库.NoSQL有时也称作Not Only SQL的缩写,是对不同于传统的关系型数据库的数据库管理系统的统称. NoSQL用于超 ...

  5. angular 创建项目

    介绍有很多可用的工具可以帮助你开发AngularJS 应用,那些非常复杂的框架不在我的讨论范围之中,这也是我开始这系列教程的原因.在第一部分,我们掌握了angularjs框架的基本结构,开发了第一应用 ...

  6. pycharm下多个工程项目并存显示

    问题:使用pycharm新建一个工程时,出现如下提示: 无论选择哪一个,都会发现之前已经建立的工程没有并存显示 解决办法: 1. 找到file->settings: 2.点击project st ...

  7. HDU-3065 病毒侵袭持续中 AC自动机又是一板子!

    病毒侵袭持续中 上一题是求出现多少病毒输出病毒序号,而这题输出每个病毒出现的次数.这题有字典树基础都能做出来,把叶子节点用相应的编号标记起来,匹配的时候遍历到叶子节点用一个数组把次数存起来就行了. 有 ...

  8. hadoop2.7.0分布式系统搭建(ubuntu14.04)

    因为使用需要,在自己小本上建了四个虚拟机,打算搭建一个1+3的hadoop分布式系统. 环境:hadoop2.7.0+ubuntu14.04 (64位) 首先分别为搭建好的虚拟机的各主机重命名 方法: ...

  9. BZOJ 1855 [Scoi2010]股票交易 ——动态规划

    DP方程是比较简单的,主要有三种:什么都不做.买入.卖出. 发现买入卖出都是$\Theta (n^3)$但是转移方程都是线性的,而且决策和当前的情况是分开的. 所以可以单调队列优化. 复杂度$\The ...

  10. MongoDB_spring整合mongodb

    参考 spring data mongodb 设置副本集读写分离模式  https://blog.csdn.net/u010889990/article/details/42644963