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();
                    });
                });
  • 相关阅读:
    python脚本 – 删除指定天数前的文件
    java 获取屏幕的分辩率
    解决Multi input/output stream coders are not yet supported(org.apache.commons.compress)
    解决tomcat at org.apache.tomcat.util.buf.CharChunk.append(CharChunk.java:355)
    org.quartz.jobStore.misfireThreshold = 60000
    python list 自定义排序
    利用pycron在windows上实现cron定时任务
    [Selenium+Java] Scroll UP or Down a page in Selenium Webdriver
    Python获取硬件信息(硬盘序列号,CPU序列号)
    ChromeDriver自动更新、FirefoxDriver自动更新、InternetExplorerDriver自动更新(Java+Python)
  • 原文地址:https://www.cnblogs.com/Answer1215/p/10003520.html
Copyright © 2011-2022 走看看