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();
                    });
                });
  • 相关阅读:
    SpringBoot标准化搭建
    springboot打开swagger文档遇到For input string: ""的报错 swagger版本2.9.2
    MySQL和Redis如何保证数据一致性? 三种方案对比,初版
    [转]QUdpSocket收发信息
    [原][C++][插件]window下C++简单插件机制实现
    php saas 架构设计,SaaS的几种架构解析
    如何处理将HTML打印出来中的断行,分页,修改打印内容等问题?急,谢谢!!
    批量打印 | 多页打印 | PHP多页打印
    web页面的单页打印以及批量打印实现方法
    php批量打印发票三(php用FPDF合并所有图片为PDF文档)
  • 原文地址:https://www.cnblogs.com/Answer1215/p/10003520.html
Copyright © 2011-2022 走看看