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

Commit

Permalink
refactor(ngAria): clean up accessible actions tests
Browse files Browse the repository at this point in the history
  • Loading branch information
@gkalpak
gkalpak committed Jun 18, 2018
1 parent 5b11145 commit af1e6a3
Showing 1 changed file with 64 additions and 80 deletions.
144 changes: 64 additions & 80 deletions test/ngAria/ariaSpec.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -922,116 +922,100 @@ describe('$aria', function() {
});

describe('accessible actions', function() {
beforeEach(injectScopeAndCompiler);
var clickEvents;

var clickFn;
beforeEach(injectScopeAndCompiler);
beforeEach(function() {
clickEvents = [];
scope.onClick = jasmine.createSpy('onClick').and.callFake(function(evt) {
var nodeName = evt ? evt.target.nodeName.toLowerCase() : '';
clickEvents.push(nodeName);
});
});

it('should trigger a click from the keyboard', function() {
scope.someAction = function() {};

var elements = $compile('<section>' +
'<div class="div-click" ng-click="someAction(\'div\')" tabindex="0"></div>' +
'<ul><li ng-click="someAction( \'li\')" tabindex="0"></li></ul>' +
'</section>')(scope);

scope.$digest();

clickFn = spyOn(scope, 'someAction');
compileElement(
'<section>' +
'<div ng-click="onClick($event)"></div>' +
'<ul><li ng-click="onClick($event)"></li></ul>' +
'</section>');

var divElement = elements.find('div');
var liElement = elements.find('li');
var divElement = element.find('div');
var liElement = element.find('li');

divElement.triggerHandler({type: 'keydown', keyCode: 13});
liElement.triggerHandler({type: 'keydown', keyCode: 13});
divElement.triggerHandler({type: 'keydown', keyCode: 32});
liElement.triggerHandler({type: 'keydown', keyCode: 32});

expect(clickFn).toHaveBeenCalledWith('div');
expect(clickFn).toHaveBeenCalledWith('li');
expect(clickEvents).toEqual(['div', 'li', 'div', 'li']);
});

it('should trigger a click in browsers that provide event.which instead of event.keyCode', function() {
scope.someAction = function() {};
it('should trigger a click in browsers that provide `event.which` instead of `event.keyCode`',
function() {
compileElement(
'<section>' +
'<div ng-click="onClick($event)"></div>' +
'<ul><li ng-click="onClick($event)"></li></ul>' +
'</section>');

var divElement = element.find('div');
var liElement = element.find('li');

var elements = $compile('<section>' +
'<div class="div-click" ng-click="someAction(\'div\')" tabindex="0"></div>' +
'<ul><li ng-click="someAction( \'li\')" tabindex="0"></li></ul>' +
'</section>')(scope);
divElement.triggerHandler({type: 'keydown', which: 13});
liElement.triggerHandler({type: 'keydown', which: 13});
divElement.triggerHandler({type: 'keydown', which: 32});
liElement.triggerHandler({type: 'keydown', which: 32});

scope.$digest();
expect(clickEvents).toEqual(['div', 'li', 'div', 'li']);
}
);

clickFn = spyOn(scope, 'someAction');
they('should not bind to key events if there is existing `ng-$prop`',
['keydown', 'keypress', 'keyup'], function(eventName) {
scope.onKeyEvent = jasmine.createSpy('onKeyEvent');
compileElement('<div ng-click="onClick()" ng-' + eventName + '="onKeyEvent()"></div>');

var divElement = elements.find('div');
var liElement = elements.find('li');
element.triggerHandler({type: eventName, keyCode: 13});
element.triggerHandler({type: eventName, keyCode: 32});

divElement.triggerHandler({type: 'keydown', which: 32});
liElement.triggerHandler({type: 'keydown', which: 32});
expect(scope.onClick).not.toHaveBeenCalled();
expect(scope.onKeyEvent).toHaveBeenCalledTimes(2);
}
);

expect(clickFn).toHaveBeenCalledWith('div');
expect(clickFn).toHaveBeenCalledWith('li');
});
it('should update bindings when keydown is handled', function() {
scope.count = 0;
compileElement('<div ng-click="count = count + 1">Count: {{ count }}</div>');

it('should not bind to key events if there is existing ng-keydown', function() {
scope.onClick = jasmine.createSpy('onClick');
scope.onKeydown = jasmine.createSpy('onKeydown');
expect(element.text()).toBe('Count: 0');

var tmpl = '<div ng-click="onClick()" ng-keydown="onKeydown()" tabindex="0"></div>';
compileElement(tmpl);
element.triggerHandler({type: 'keydown', keyCode: 13});
expect(element.text()).toBe('Count: 1');

element.triggerHandler({type: 'keydown', keyCode: 32});

expect(scope.onKeydown).toHaveBeenCalled();
expect(scope.onClick).not.toHaveBeenCalled();
expect(element.text()).toBe('Count: 2');
});

it('should not bind to key events if there is existing ng-keypress', function() {
scope.onClick = jasmine.createSpy('onClick');
scope.onKeypress = jasmine.createSpy('onKeypress');

var tmpl = '<div ng-click="onClick()" ng-keypress="onKeypress()" tabindex="0"></div>';
compileElement(tmpl);
it('should pass `$event` to `ng-click` handler as local', function() {
compileElement('<div ng-click="event = $event">{{ event.type }}{{ event.keyCode }}</div>');
expect(element.text()).toBe('');

element.triggerHandler({type: 'keypress', keyCode: 32});
element.triggerHandler({type: 'keydown', keyCode: 13});
expect(element.text()).toBe('keydown13');

expect(scope.onKeypress).toHaveBeenCalled();
expect(scope.onClick).not.toHaveBeenCalled();
element.triggerHandler({type: 'keydown', keyCode: 32});
expect(element.text()).toBe('keydown32');
});

it('should not bind to key events if there is existing ng-keyup', function() {
scope.onClick = jasmine.createSpy('onClick');
scope.onKeyup = jasmine.createSpy('onKeyup');

var tmpl = '<div ng-click="onClick()" ng-keyup="onKeyup()" tabindex="0"></div>';
compileElement(tmpl);
it('should not bind keydown to natively interactive elements', function() {
compileElement('<button ng-click="onClick()">Click me</button>');

element.triggerHandler({type: 'keyup', keyCode: 32});
element.triggerHandler({type: 'keydown', keyCode: 13});
element.triggerHandler({type: 'keydown', keyCode: 32});

expect(scope.onKeyup).toHaveBeenCalled();
expect(scope.onClick).not.toHaveBeenCalled();
});

it('should update bindings when keydown is handled', function() {
compileElement('<div ng-click="text = \'clicked!\'">{{text}}</div>');
expect(element.text()).toBe('');
spyOn(scope.$root, '$digest').and.callThrough();
element.triggerHandler({ type: 'keydown', keyCode: 13 });
expect(element.text()).toBe('clicked!');
expect(scope.$root.$digest).toHaveBeenCalledOnce();
});

it('should pass $event to ng-click handler as local', function() {
compileElement('<div ng-click="event = $event">{{event.type}}' +
'{{event.keyCode}}</div>');
expect(element.text()).toBe('');
element.triggerHandler({ type: 'keydown', keyCode: 13 });
expect(element.text()).toBe('keydown13');
});

it('should not bind keydown to natively interactive elements', function() {
compileElement('<button ng-click="event = $event">{{event.type}}{{event.keyCode}}</button>');
expect(element.text()).toBe('');
element.triggerHandler({ type: 'keydown', keyCode: 13 });
expect(element.text()).toBe('');
});
});

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

0 comments on commit af1e6a3

Please sign in to comment.