@@ -922,116 +922,100 @@ describe('$aria', function() {
922
922
} ) ;
923
923
924
924
describe ( 'accessible actions' , function ( ) {
925
- beforeEach ( injectScopeAndCompiler ) ;
925
+ var clickEvents ;
926
926
927
- var clickFn ;
927
+ beforeEach ( injectScopeAndCompiler ) ;
928
+ beforeEach ( function ( ) {
929
+ clickEvents = [ ] ;
930
+ scope . onClick = jasmine . createSpy ( 'onClick' ) . and . callFake ( function ( evt ) {
931
+ var nodeName = evt ? evt . target . nodeName . toLowerCase ( ) : '' ;
932
+ clickEvents . push ( nodeName ) ;
933
+ } ) ;
934
+ } ) ;
928
935
929
936
it ( 'should trigger a click from the keyboard' , function ( ) {
930
- scope . someAction = function ( ) { } ;
931
-
932
- var elements = $compile ( '<section>' +
933
- '<div class="div-click" ng-click="someAction(\'div\')" tabindex="0"></div>' +
934
- '<ul><li ng-click="someAction( \'li\')" tabindex="0"></li></ul>' +
935
- '</section>' ) ( scope ) ;
936
-
937
- scope . $digest ( ) ;
938
-
939
- clickFn = spyOn ( scope , 'someAction' ) ;
937
+ compileElement (
938
+ '<section>' +
939
+ '<div ng-click="onClick($event)"></div>' +
940
+ '<ul><li ng-click="onClick($event)"></li></ul>' +
941
+ '</section>' ) ;
940
942
941
- var divElement = elements . find ( 'div' ) ;
942
- var liElement = elements . find ( 'li' ) ;
943
+ var divElement = element . find ( 'div' ) ;
944
+ var liElement = element . find ( 'li' ) ;
943
945
946
+ divElement . triggerHandler ( { type : 'keydown' , keyCode : 13 } ) ;
947
+ liElement . triggerHandler ( { type : 'keydown' , keyCode : 13 } ) ;
944
948
divElement . triggerHandler ( { type : 'keydown' , keyCode : 32 } ) ;
945
949
liElement . triggerHandler ( { type : 'keydown' , keyCode : 32 } ) ;
946
950
947
- expect ( clickFn ) . toHaveBeenCalledWith ( 'div' ) ;
948
- expect ( clickFn ) . toHaveBeenCalledWith ( 'li' ) ;
951
+ expect ( clickEvents ) . toEqual ( [ 'div' , 'li' , 'div' , 'li' ] ) ;
949
952
} ) ;
950
953
951
- it ( 'should trigger a click in browsers that provide event.which instead of event.keyCode' , function ( ) {
952
- scope . someAction = function ( ) { } ;
954
+ it ( 'should trigger a click in browsers that provide `event.which` instead of `event.keyCode`' ,
955
+ function ( ) {
956
+ compileElement (
957
+ '<section>' +
958
+ '<div ng-click="onClick($event)"></div>' +
959
+ '<ul><li ng-click="onClick($event)"></li></ul>' +
960
+ '</section>' ) ;
961
+
962
+ var divElement = element . find ( 'div' ) ;
963
+ var liElement = element . find ( 'li' ) ;
953
964
954
- var elements = $compile ( '<section>' +
955
- '<div class="div-click" ng-click="someAction(\'div\')" tabindex="0"></div>' +
956
- '<ul><li ng-click="someAction( \'li\')" tabindex="0"></li></ul>' +
957
- '</section>' ) ( scope ) ;
965
+ divElement . triggerHandler ( { type : 'keydown' , which : 13 } ) ;
966
+ liElement . triggerHandler ( { type : 'keydown' , which : 13 } ) ;
967
+ divElement . triggerHandler ( { type : 'keydown' , which : 32 } ) ;
968
+ liElement . triggerHandler ( { type : 'keydown' , which : 32 } ) ;
958
969
959
- scope . $digest ( ) ;
970
+ expect ( clickEvents ) . toEqual ( [ 'div' , 'li' , 'div' , 'li' ] ) ;
971
+ }
972
+ ) ;
960
973
961
- clickFn = spyOn ( scope , 'someAction' ) ;
974
+ they ( 'should not bind to key events if there is existing `ng-$prop`' ,
975
+ [ 'keydown' , 'keypress' , 'keyup' ] , function ( eventName ) {
976
+ scope . onKeyEvent = jasmine . createSpy ( 'onKeyEvent' ) ;
977
+ compileElement ( '<div ng-click="onClick()" ng-' + eventName + '="onKeyEvent()"></div>' ) ;
962
978
963
- var divElement = elements . find ( 'div' ) ;
964
- var liElement = elements . find ( 'li' ) ;
979
+ element . triggerHandler ( { type : eventName , keyCode : 13 } ) ;
980
+ element . triggerHandler ( { type : eventName , keyCode : 32 } ) ;
965
981
966
- divElement . triggerHandler ( { type : 'keydown' , which : 32 } ) ;
967
- liElement . triggerHandler ( { type : 'keydown' , which : 32 } ) ;
982
+ expect ( scope . onClick ) . not . toHaveBeenCalled ( ) ;
983
+ expect ( scope . onKeyEvent ) . toHaveBeenCalledTimes ( 2 ) ;
984
+ }
985
+ ) ;
968
986
969
- expect ( clickFn ) . toHaveBeenCalledWith ( 'div' ) ;
970
- expect ( clickFn ) . toHaveBeenCalledWith ( 'li' ) ;
971
- } ) ;
987
+ it ( 'should update bindings when keydown is handled' , function ( ) {
988
+ scope . count = 0 ;
989
+ compileElement ( '<div ng-click="count = count + 1">Count: {{ count }}</div>' ) ;
972
990
973
- it ( 'should not bind to key events if there is existing ng-keydown' , function ( ) {
974
- scope . onClick = jasmine . createSpy ( 'onClick' ) ;
975
- scope . onKeydown = jasmine . createSpy ( 'onKeydown' ) ;
991
+ expect ( element . text ( ) ) . toBe ( 'Count: 0' ) ;
976
992
977
- var tmpl = '<div ng-click="onClick()" ng-keydown="onKeydown()" tabindex="0"></div>' ;
978
- compileElement ( tmpl ) ;
993
+ element . triggerHandler ( { type : 'keydown' , keyCode : 13 } ) ;
994
+ expect ( element . text ( ) ) . toBe ( 'Count: 1' ) ;
979
995
980
996
element . triggerHandler ( { type : 'keydown' , keyCode : 32 } ) ;
981
-
982
- expect ( scope . onKeydown ) . toHaveBeenCalled ( ) ;
983
- expect ( scope . onClick ) . not . toHaveBeenCalled ( ) ;
997
+ expect ( element . text ( ) ) . toBe ( 'Count: 2' ) ;
984
998
} ) ;
985
999
986
- it ( 'should not bind to key events if there is existing ng-keypress' , function ( ) {
987
- scope . onClick = jasmine . createSpy ( 'onClick' ) ;
988
- scope . onKeypress = jasmine . createSpy ( 'onKeypress' ) ;
989
-
990
- var tmpl = '<div ng-click="onClick()" ng-keypress="onKeypress()" tabindex="0"></div>' ;
991
- compileElement ( tmpl ) ;
1000
+ it ( 'should pass `$event` to `ng-click` handler as local' , function ( ) {
1001
+ compileElement ( '<div ng-click="event = $event">{{ event.type }}{{ event.keyCode }}</div>' ) ;
1002
+ expect ( element . text ( ) ) . toBe ( '' ) ;
992
1003
993
- element . triggerHandler ( { type : 'keypress' , keyCode : 32 } ) ;
1004
+ element . triggerHandler ( { type : 'keydown' , keyCode : 13 } ) ;
1005
+ expect ( element . text ( ) ) . toBe ( 'keydown13' ) ;
994
1006
995
- expect ( scope . onKeypress ) . toHaveBeenCalled ( ) ;
996
- expect ( scope . onClick ) . not . toHaveBeenCalled ( ) ;
1007
+ element . triggerHandler ( { type : 'keydown' , keyCode : 32 } ) ;
1008
+ expect ( element . text ( ) ) . toBe ( 'keydown32' ) ;
997
1009
} ) ;
998
1010
999
- it ( 'should not bind to key events if there is existing ng-keyup' , function ( ) {
1000
- scope . onClick = jasmine . createSpy ( 'onClick' ) ;
1001
- scope . onKeyup = jasmine . createSpy ( 'onKeyup' ) ;
1002
-
1003
- var tmpl = '<div ng-click="onClick()" ng-keyup="onKeyup()" tabindex="0"></div>' ;
1004
- compileElement ( tmpl ) ;
1011
+ it ( 'should not bind keydown to natively interactive elements' , function ( ) {
1012
+ compileElement ( '<button ng-click="onClick()">Click me</button>' ) ;
1005
1013
1006
- element . triggerHandler ( { type : 'keyup' , keyCode : 32 } ) ;
1014
+ element . triggerHandler ( { type : 'keydown' , keyCode : 13 } ) ;
1015
+ element . triggerHandler ( { type : 'keydown' , keyCode : 32 } ) ;
1007
1016
1008
- expect ( scope . onKeyup ) . toHaveBeenCalled ( ) ;
1009
1017
expect ( scope . onClick ) . not . toHaveBeenCalled ( ) ;
1010
1018
} ) ;
1011
-
1012
- it ( 'should update bindings when keydown is handled' , function ( ) {
1013
- compileElement ( '<div ng-click="text = \'clicked!\'">{{text}}</div>' ) ;
1014
- expect ( element . text ( ) ) . toBe ( '' ) ;
1015
- spyOn ( scope . $root , '$digest' ) . and . callThrough ( ) ;
1016
- element . triggerHandler ( { type : 'keydown' , keyCode : 13 } ) ;
1017
- expect ( element . text ( ) ) . toBe ( 'clicked!' ) ;
1018
- expect ( scope . $root . $digest ) . toHaveBeenCalledOnce ( ) ;
1019
- } ) ;
1020
-
1021
- it ( 'should pass $event to ng-click handler as local' , function ( ) {
1022
- compileElement ( '<div ng-click="event = $event">{{event.type}}' +
1023
- '{{event.keyCode}}</div>' ) ;
1024
- expect ( element . text ( ) ) . toBe ( '' ) ;
1025
- element . triggerHandler ( { type : 'keydown' , keyCode : 13 } ) ;
1026
- expect ( element . text ( ) ) . toBe ( 'keydown13' ) ;
1027
- } ) ;
1028
-
1029
- it ( 'should not bind keydown to natively interactive elements' , function ( ) {
1030
- compileElement ( '<button ng-click="event = $event">{{event.type}}{{event.keyCode}}</button>' ) ;
1031
- expect ( element . text ( ) ) . toBe ( '' ) ;
1032
- element . triggerHandler ( { type : 'keydown' , keyCode : 13 } ) ;
1033
- expect ( element . text ( ) ) . toBe ( '' ) ;
1034
- } ) ;
1035
1019
} ) ;
1036
1020
1037
1021
describe ( 'actions when bindRoleForClick is set to false' , function ( ) {
0 commit comments