Skip to content
This repository was archived by the owner on Apr 12, 2024. It is now read-only.

Commit 29b8dcf

Browse files
committed
refactor(ngAria): clean up accessible actions tests
1 parent c9d1e69 commit 29b8dcf

File tree

1 file changed

+64
-80
lines changed

1 file changed

+64
-80
lines changed

test/ngAria/ariaSpec.js

+64-80
Original file line numberDiff line numberDiff line change
@@ -922,116 +922,100 @@ describe('$aria', function() {
922922
});
923923

924924
describe('accessible actions', function() {
925-
beforeEach(injectScopeAndCompiler);
925+
var clickEvents;
926926

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+
});
928935

929936
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>');
940942

941-
var divElement = elements.find('div');
942-
var liElement = elements.find('li');
943+
var divElement = element.find('div');
944+
var liElement = element.find('li');
943945

946+
divElement.triggerHandler({type: 'keydown', keyCode: 13});
947+
liElement.triggerHandler({type: 'keydown', keyCode: 13});
944948
divElement.triggerHandler({type: 'keydown', keyCode: 32});
945949
liElement.triggerHandler({type: 'keydown', keyCode: 32});
946950

947-
expect(clickFn).toHaveBeenCalledWith('div');
948-
expect(clickFn).toHaveBeenCalledWith('li');
951+
expect(clickEvents).toEqual(['div', 'li', 'div', 'li']);
949952
});
950953

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');
953964

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});
958969

959-
scope.$digest();
970+
expect(clickEvents).toEqual(['div', 'li', 'div', 'li']);
971+
}
972+
);
960973

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>');
962978

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});
965981

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+
);
968986

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>');
972990

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');
976992

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');
979995

980996
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');
984998
});
985999

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('');
9921003

993-
element.triggerHandler({type: 'keypress', keyCode: 32});
1004+
element.triggerHandler({type: 'keydown', keyCode: 13});
1005+
expect(element.text()).toBe('keydown13');
9941006

995-
expect(scope.onKeypress).toHaveBeenCalled();
996-
expect(scope.onClick).not.toHaveBeenCalled();
1007+
element.triggerHandler({type: 'keydown', keyCode: 32});
1008+
expect(element.text()).toBe('keydown32');
9971009
});
9981010

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>');
10051013

1006-
element.triggerHandler({type: 'keyup', keyCode: 32});
1014+
element.triggerHandler({type: 'keydown', keyCode: 13});
1015+
element.triggerHandler({type: 'keydown', keyCode: 32});
10071016

1008-
expect(scope.onKeyup).toHaveBeenCalled();
10091017
expect(scope.onClick).not.toHaveBeenCalled();
10101018
});
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-
});
10351019
});
10361020

10371021
describe('actions when bindRoleForClick is set to false', function() {

0 commit comments

Comments
 (0)