zoukankan      html  css  js  c++  java
  • [AngularJS Unit tesint] Testing keyboard event

    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 13: // enter
                case 32: {
                    // Space
                    e.preventDefault();
                    this.select(+num);
                    break;
                }
                case 38: {
                    // up
                    e.preventDefault();
                    this.onUp(this.focus);
                    break;
                }
                case 39: {
                    // right
                    e.preventDefault();
                    this.onRight(this.focus);
                    break;
                }
                case 37: {
                    // left
                    e.preventDefault();
                    this.onLeft(this.focus);
                    break;
                }
                case 40: {
                    //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 - 4 <= this._MIN_MONTH ? this._MIN_MONTH : crtFocus - 4;
            this.onFocus(newFocus);
        }
    
        onDown(crtFocus) {
            if (crtFocus === null) {
                return;
            }
    
            const newFocus = crtFocus + 4 >= this._MAX_MONTH ? this._MAX_MONTH : crtFocus + 4;
            this.onFocus(newFocus);
        }
    
        onRight(crtFocus) {
            if (crtFocus === null) {
                return;
            }
    
            const newFocus = crtFocus + 1 >= this._MAX_MONTH ? this._MAX_MONTH : crtFocus + 1;
            this.onFocus(newFocus);
        }
    
        onLeft(crtFocus) {
            if (crtFocus === null) {
                return;
            }
    
            const newFocus = crtFocus - 1 <= this._MIN_MONTH ? this._MIN_MONTH : crtFocus - 1;
            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();
                    });
                });
  • 相关阅读:
    Jquery中的bind()方法绑定事件总结
    composer常用命令
    Activity四种启动模式
    谷歌搜索技巧
    关于Android studio Haxm加速器安装
    关于Ping和Tracert命令原理详解
    皮尔逊相关系数
    head标签
    wireshark抓包
    数据结构与算法自学系列之动态规划(一)
  • 原文地址:https://www.cnblogs.com/Answer1215/p/10003520.html
Copyright © 2011-2022 走看看