');
expect(element).not.toHaveAttribute('aria-live');
});
// ariaReadonly
it('should not attach aria-readonly to custom controls', function() {
compileElement('
');
scope.$apply('val = false');
expect(element).not.toHaveAttribute('aria-readonly');
scope.$apply('val = true');
expect(element).not.toHaveAttribute('aria-readonly');
});
// ariaRequired
it('should not attach aria-required to custom controls with `required`', function() {
compileElement('
');
expect(element).not.toHaveAttribute('aria-required');
});
it('should not attach aria-required to custom controls with `ngRequired`', function() {
compileElement('
');
scope.$apply('val = false');
expect(element).not.toHaveAttribute('aria-required');
scope.$apply('val = true');
expect(element).not.toHaveAttribute('aria-required');
});
// ariaValue
it('should not attach aria-value* to input[range]', function() {
compileElement('
');
expect(element).not.toHaveAttribute('aria-valuemax');
expect(element).not.toHaveAttribute('aria-valuemin');
expect(element).not.toHaveAttribute('aria-valuenow');
scope.$apply('val = 50');
expect(element).not.toHaveAttribute('aria-valuemax');
expect(element).not.toHaveAttribute('aria-valuemin');
expect(element).not.toHaveAttribute('aria-valuenow');
scope.$apply('val = 150');
expect(element).not.toHaveAttribute('aria-valuemax');
expect(element).not.toHaveAttribute('aria-valuemin');
expect(element).not.toHaveAttribute('aria-valuenow');
});
it('should not attach aria-value* to custom controls', function() {
compileElement(
'
' +
'
');
var progressbar = element.eq(0);
var slider = element.eq(1);
['aria-valuemax', 'aria-valuemin', 'aria-valuenow'].forEach(function(attr) {
expect(progressbar).not.toHaveAttribute(attr);
expect(slider).not.toHaveAttribute(attr);
});
scope.$apply('val = 50');
['aria-valuemax', 'aria-valuemin', 'aria-valuenow'].forEach(function(attr) {
expect(progressbar).not.toHaveAttribute(attr);
expect(slider).not.toHaveAttribute(attr);
});
scope.$apply('val = 150');
['aria-valuemax', 'aria-valuemin', 'aria-valuenow'].forEach(function(attr) {
expect(progressbar).not.toHaveAttribute(attr);
expect(slider).not.toHaveAttribute(attr);
});
});
// bindKeypress
it('should not bind keypress to `ngClick`', function() {
scope.onClick = jasmine.createSpy('onClick');
compileElement(
'
' +
'
');
var div = element.find('div');
var li = element.find('li');
div.triggerHandler({type: 'keypress', keyCode: 32});
li.triggerHandler({type: 'keypress', keyCode: 32});
expect(scope.onClick).not.toHaveBeenCalled();
});
// bindRoleForClick
it('should not attach role to custom controls', function() {
compileElement(
'
' +
'
' +
'
' +
'
');
expect(element.eq(0)).not.toHaveAttribute('role');
expect(element.eq(1)).not.toHaveAttribute('role');
expect(element.eq(2)).not.toHaveAttribute('role');
expect(element.eq(3)).not.toHaveAttribute('role');
});
// tabindex
it('should not attach tabindex to custom controls', function() {
compileElement(
'
' +
'
');
expect(element.eq(0)).not.toHaveAttribute('tabindex');
expect(element.eq(1)).not.toHaveAttribute('tabindex');
});
it('should not attach tabindex to `ngClick` or `ngDblclick`', function() {
compileElement(
'
' +
'
');
expect(element.eq(0)).not.toHaveAttribute('tabindex');
expect(element.eq(1)).not.toHaveAttribute('tabindex');
});
});
describe('aria-hidden', function() {
beforeEach(injectScopeAndCompiler);
it('should attach aria-hidden to ng-show', function() {
compileElement('
');
scope.$apply('val = false');
expect(element.attr('aria-hidden')).toBe('true');
scope.$apply('val = true');
expect(element.attr('aria-hidden')).toBe('false');
});
it('should attach aria-hidden to ng-hide', function() {
compileElement('
');
scope.$apply('val = false');
expect(element.attr('aria-hidden')).toBe('false');
scope.$apply('val = true');
expect(element.attr('aria-hidden')).toBe('true');
});
it('should not change aria-hidden if it is already present on ng-show', function() {
compileElement('
');
expect(element.attr('aria-hidden')).toBe('userSetValue');
scope.$apply('val = true');
expect(element.attr('aria-hidden')).toBe('userSetValue');
});
it('should not change aria-hidden if it is already present on ng-hide', function() {
compileElement('
');
expect(element.attr('aria-hidden')).toBe('userSetValue');
scope.$apply('val = true');
expect(element.attr('aria-hidden')).toBe('userSetValue');
});
it('should always set aria-hidden to a boolean value', function() {
compileElement('
');
scope.$apply('val = "test angular"');
expect(element.attr('aria-hidden')).toBe('true');
scope.$apply('val = null');
expect(element.attr('aria-hidden')).toBe('false');
scope.$apply('val = {}');
expect(element.attr('aria-hidden')).toBe('true');
compileElement('
');
scope.$apply('val = "test angular"');
expect(element.attr('aria-hidden')).toBe('false');
scope.$apply('val = null');
expect(element.attr('aria-hidden')).toBe('true');
scope.$apply('val = {}');
expect(element.attr('aria-hidden')).toBe('false');
});
});
describe('aria-hidden when disabled', function() {
beforeEach(configAriaProvider({
ariaHidden: false
}));
beforeEach(injectScopeAndCompiler);
it('should not attach aria-hidden', function() {
scope.$apply('val = false');
compileElement('
');
expect(element.attr('aria-hidden')).toBeUndefined();
compileElement('
');
expect(element.attr('aria-hidden')).toBeUndefined();
});
});
describe('aria-checked', function() {
beforeEach(injectScopeAndCompiler);
it('should not attach itself to native input type="checkbox"', function() {
compileElement('
');
scope.$apply('val = true');
expect(element.attr('aria-checked')).toBeUndefined();
scope.$apply('val = false');
expect(element.attr('aria-checked')).toBeUndefined();
});
it('should attach itself to custom checkbox', function() {
compileElement('
');
scope.$apply('val = "checked"');
expect(element.attr('aria-checked')).toBe('true');
scope.$apply('val = null');
expect(element.attr('aria-checked')).toBe('false');
});
it('should use `$isEmpty()` to determine if the checkbox is checked',
function() {
compileElement('
');
var ctrl = element.controller('ngModel');
ctrl.$isEmpty = function(value) {
return value === 'not-checked';
};
scope.$apply('val = true');
expect(ctrl.$modelValue).toBe(true);
expect(element.attr('aria-checked')).toBe('true');
scope.$apply('val = false');
expect(ctrl.$modelValue).toBe(false);
expect(element.attr('aria-checked')).toBe('true');
scope.$apply('val = "not-checked"');
expect(ctrl.$modelValue).toBe('not-checked');
expect(element.attr('aria-checked')).toBe('false');
scope.$apply('val = "checked"');
expect(ctrl.$modelValue).toBe('checked');
expect(element.attr('aria-checked')).toBe('true');
}
);
it('should not handle native checkbox with ngChecked', function() {
var element = $compile('
')(scope);
scope.$apply('val = true');
expect(element.attr('aria-checked')).toBeUndefined();
scope.$apply('val = false');
expect(element.attr('aria-checked')).toBeUndefined();
});
it('should handle custom checkbox with ngChecked', function() {
var element = $compile('
')(scope);
scope.$apply('val = true');
expect(element.eq(0).attr('aria-checked')).toBe('true');
scope.$apply('val = false');
expect(element.eq(0).attr('aria-checked')).toBe('false');
});
it('should not attach to native input type="radio"', function() {
var element = $compile('
' +
'
')(scope);
scope.$apply('val=\'one\'');
expect(element.eq(0).attr('aria-checked')).toBeUndefined();
expect(element.eq(1).attr('aria-checked')).toBeUndefined();
scope.$apply('val=\'two\'');
expect(element.eq(0).attr('aria-checked')).toBeUndefined();
expect(element.eq(1).attr('aria-checked')).toBeUndefined();
});
it('should attach to custom radio controls', function() {
var element = $compile('
' +
'
')(scope);
scope.$apply('val=\'one\'');
expect(element.eq(0).attr('aria-checked')).toBe('true');
expect(element.eq(1).attr('aria-checked')).toBe('false');
scope.$apply('val=\'two\'');
expect(element.eq(0).attr('aria-checked')).toBe('false');
expect(element.eq(1).attr('aria-checked')).toBe('true');
});
it('should handle custom radios with integer model values', function() {
var element = $compile('
' +
'
')(scope);
scope.$apply('val=0');
expect(element.eq(0).attr('aria-checked')).toBe('true');
expect(element.eq(1).attr('aria-checked')).toBe('false');
scope.$apply('val=1');
expect(element.eq(0).attr('aria-checked')).toBe('false');
expect(element.eq(1).attr('aria-checked')).toBe('true');
});
it('should handle radios with boolean model values using ngValue', function() {
var element = $compile('
' +
'
')(scope);
scope.$apply(function() {
scope.valExp = true;
scope.valExp2 = false;
scope.val = true;
});
expect(element.eq(0).attr('aria-checked')).toBe('true');
expect(element.eq(1).attr('aria-checked')).toBe('false');
scope.$apply('val = false');
expect(element.eq(0).attr('aria-checked')).toBe('false');
expect(element.eq(1).attr('aria-checked')).toBe('true');
});
it('should attach itself to role="menuitemradio"', function() {
scope.val = 'one';
compileElement('
');
expect(element.attr('aria-checked')).toBe('true');
scope.$apply('val = \'two\'');
expect(element.attr('aria-checked')).toBe('false');
});
it('should attach itself to role="menuitemcheckbox"', function() {
compileElement('
');
scope.$apply('val = "checked"');
expect(element.attr('aria-checked')).toBe('true');
scope.$apply('val = null');
expect(element.attr('aria-checked')).toBe('false');
});
it('should not attach itself if an aria-checked value is already present', function() {
var element = [
$compile('
')(scope),
$compile('
')(scope),
$compile('
')(scope),
$compile('
')(scope)
];
scope.$apply('val1=true;val2=\'one\';val3=\'1\'');
expectAriaAttrOnEachElement(element, 'aria-checked', 'userSetValue');
});
});
describe('roles for custom inputs', function() {
beforeEach(injectScopeAndCompiler);
it('should add missing role="button" to custom input', function() {
compileElement('
');
expect(element.attr('role')).toBe('button');
});
it('should not add role="button" to anchor', function() {
compileElement('
');
expect(element.attr('role')).not.toBe('button');
});
it('should add missing role="checkbox" to custom input', function() {
compileElement('
');
expect(element.attr('role')).toBe('checkbox');
});
it('should not add a role to a native checkbox', function() {
compileElement('
');
expect(element.attr('role')).toBeUndefined();
});
it('should add missing role="radio" to custom input', function() {
compileElement('
');
expect(element.attr('role')).toBe('radio');
});
it('should not add a role to a native radio button', function() {
compileElement('
');
expect(element.attr('role')).toBeUndefined();
});
it('should add missing role="slider" to custom input', function() {
compileElement('
');
expect(element.attr('role')).toBe('slider');
});
it('should not add a role to a native range input', function() {
compileElement('
');
expect(element.attr('role')).toBeUndefined();
});
they('should not add role to native $prop controls', {
input: '
',
select: '
',
textarea: '
',
button: '
',
summary: '
',
details: '
',
a: '
'
}, function(tmpl) {
var element = $compile(tmpl)(scope);
expect(element.attr('role')).toBeUndefined();
});
});
describe('aria-checked when disabled', function() {
beforeEach(configAriaProvider({
ariaChecked: false
}));
beforeEach(injectScopeAndCompiler);
it('should not attach aria-checked', function() {
compileElement('
');
expect(element.attr('aria-checked')).toBeUndefined();
compileElement('
');
expect(element.attr('aria-checked')).toBeUndefined();
compileElement('
');
expect(element.attr('aria-checked')).toBeUndefined();
compileElement('
');
expect(element.attr('aria-checked')).toBeUndefined();
});
});
describe('aria-disabled', function() {
beforeEach(injectScopeAndCompiler);
they('should not attach itself to native $prop controls', {
input: '
',
textarea: '
',
select: '
',
button: '
'
}, function(tmpl) {
var element = $compile(tmpl)(scope);
scope.$apply('val = true');
expect(element.attr('disabled')).toBeDefined();
expect(element.attr('aria-disabled')).toBeUndefined();
});
it('should attach itself to custom controls', function() {
compileElement('
');
expect(element.attr('aria-disabled')).toBe('false');
scope.$apply('val = true');
expect(element.attr('aria-disabled')).toBe('true');
});
it('should not attach itself if an aria-disabled attribute is already present', function() {
compileElement('
');
expect(element.attr('aria-disabled')).toBe('userSetValue');
});
it('should always set aria-disabled to a boolean value', function() {
compileElement('
');
scope.$apply('val = "test angular"');
expect(element.attr('aria-disabled')).toBe('true');
scope.$apply('val = null');
expect(element.attr('aria-disabled')).toBe('false');
scope.$apply('val = {}');
expect(element.attr('aria-disabled')).toBe('true');
});
});
describe('aria-disabled when disabled', function() {
beforeEach(configAriaProvider({
ariaDisabled: false
}));
beforeEach(injectScopeAndCompiler);
it('should not attach aria-disabled', function() {
compileElement('
');
scope.$apply('val = true');
expect(element.attr('aria-disabled')).toBeUndefined();
});
});
describe('aria-invalid', function() {
beforeEach(injectScopeAndCompiler);
it('should attach aria-invalid to input', function() {
compileElement('
');
scope.$apply('txtInput=\'LTten\'');
expect(element.attr('aria-invalid')).toBe('true');
scope.$apply('txtInput=\'morethantencharacters\'');
expect(element.attr('aria-invalid')).toBe('false');
});
it('should attach aria-invalid to custom controls', function() {
compileElement('
');
scope.$apply('txtInput=\'LTten\'');
expect(element.attr('aria-invalid')).toBe('true');
scope.$apply('txtInput=\'morethantencharacters\'');
expect(element.attr('aria-invalid')).toBe('false');
});
it('should not attach itself if aria-invalid is already present', function() {
compileElement('
');
scope.$apply('txtInput=\'LTten\'');
expect(element.attr('aria-invalid')).toBe('userSetValue');
});
it('should not attach if input is type="hidden"', function() {
compileElement('
');
expect(element.attr('aria-invalid')).toBeUndefined();
});
it('should attach aria-invalid to custom control that is type="hidden"', function() {
compileElement('
');
scope.$apply('txtInput=\'LTten\'');
expect(element.attr('aria-invalid')).toBe('true');
scope.$apply('txtInput=\'morethantencharacters\'');
expect(element.attr('aria-invalid')).toBe('false');
});
});
describe('aria-invalid when disabled', function() {
beforeEach(configAriaProvider({
ariaInvalid: false
}));
beforeEach(injectScopeAndCompiler);
it('should not attach aria-invalid if the option is disabled', function() {
scope.$apply('txtInput=\'LTten\'');
compileElement('
');
expect(element.attr('aria-invalid')).toBeUndefined();
});
});
describe('aria-readonly', function() {
beforeEach(injectScopeAndCompiler);
they('should not attach itself to native $prop controls', {
input: '
',
textarea: '
',
select: '
',
button: '
'
}, function(tmpl) {
var element = $compile(tmpl)(scope);
scope.$apply('val = true');
expect(element.attr('readonly')).toBeDefined();
expect(element.attr('aria-readonly')).toBeUndefined();
});
it('should attach itself to custom controls', function() {
compileElement('
');
expect(element.attr('aria-readonly')).toBe('false');
scope.$apply('val = true');
expect(element.attr('aria-readonly')).toBe('true');
});
it('should not attach itself if an aria-readonly attribute is already present', function() {
compileElement('
');
expect(element.attr('aria-readonly')).toBe('userSetValue');
});
it('should always set aria-readonly to a boolean value', function() {
compileElement('
');
scope.$apply('val = "test angular"');
expect(element.attr('aria-readonly')).toBe('true');
scope.$apply('val = null');
expect(element.attr('aria-readonly')).toBe('false');
scope.$apply('val = {}');
expect(element.attr('aria-readonly')).toBe('true');
});
});
describe('aria-readonly when disabled', function() {
beforeEach(configAriaProvider({
ariaReadonly: false
}));
beforeEach(injectScopeAndCompiler);
it('should not add the aria-readonly attribute', function() {
compileElement('
');
expect(element.attr('aria-readonly')).toBeUndefined();
compileElement('
');
expect(element.attr('aria-readonly')).toBeUndefined();
});
});
describe('aria-required', function() {
beforeEach(injectScopeAndCompiler);
it('should not attach to input', function() {
compileElement('
');
expect(element.attr('aria-required')).toBeUndefined();
});
it('should attach to custom controls with ngModel and required', function() {
compileElement('
');
expect(element.attr('aria-required')).toBe('true');
});
it('should set aria-required to false when ng-required is false', function() {
compileElement('
');
expect(element.attr('aria-required')).toBe('false');
});
it('should attach to custom controls with ngRequired', function() {
compileElement('
');
expect(element.attr('aria-required')).toBe('true');
});
it('should not attach itself if aria-required is already present', function() {
compileElement('
');
expect(element.attr('aria-required')).toBe('userSetValue');
});
});
describe('aria-required when disabled', function() {
beforeEach(configAriaProvider({
ariaRequired: false
}));
beforeEach(injectScopeAndCompiler);
it('should not add the aria-required attribute', function() {
compileElement('
');
expect(element.attr('aria-required')).toBeUndefined();
compileElement('
');
expect(element.attr('aria-required')).toBeUndefined();
});
});
describe('aria-value', function() {
beforeEach(injectScopeAndCompiler);
it('should attach to input type="range"', function() {
var element = [
$compile('
')(scope),
$compile('
')(scope),
$compile('
')(scope)
];
scope.$apply('val = 50');
expectAriaAttrOnEachElement(element, 'aria-valuenow', '50');
expectAriaAttrOnEachElement(element, 'aria-valuemin', '0');
expectAriaAttrOnEachElement(element, 'aria-valuemax', '100');
scope.$apply('val = 90');
expectAriaAttrOnEachElement(element, 'aria-valuenow', '90');
});
it('should not attach if aria-value* is already present', function() {
var element = [
$compile('
')(scope),
$compile('
')(scope),
$compile('
')(scope)
];
scope.$apply('val = 50');
expectAriaAttrOnEachElement(element, 'aria-valuenow', 'userSetValue1');
expectAriaAttrOnEachElement(element, 'aria-valuemin', 'userSetValue2');
expectAriaAttrOnEachElement(element, 'aria-valuemax', 'userSetValue3');
});
it('should update `aria-valuemin/max` when `min/max` changes dynamically', function() {
scope.$apply('min = 25; max = 75');
compileElement('
');
expect(element.attr('aria-valuemin')).toBe('25');
expect(element.attr('aria-valuemax')).toBe('75');
scope.$apply('min = 0');
expect(element.attr('aria-valuemin')).toBe('0');
scope.$apply('max = 100');
expect(element.attr('aria-valuemax')).toBe('100');
});
it('should update `aria-valuemin/max` when `ng-min/ng-max` changes dynamically', function() {
scope.$apply('min = 25; max = 75');
compileElement('
');
expect(element.attr('aria-valuemin')).toBe('25');
expect(element.attr('aria-valuemax')).toBe('75');
scope.$apply('min = 0');
expect(element.attr('aria-valuemin')).toBe('0');
scope.$apply('max = 100');
expect(element.attr('aria-valuemax')).toBe('100');
});
});
describe('announcing ngMessages', function() {
beforeEach(injectScopeAndCompiler);
it('should attach aria-live', function() {
var element = [
$compile('
')(scope)
];
expectAriaAttrOnEachElement(element, 'aria-live', 'assertive');
});
});
describe('aria-value when disabled', function() {
beforeEach(configAriaProvider({
ariaValue: false
}));
beforeEach(injectScopeAndCompiler);
it('should not attach itself', function() {
scope.$apply('val = 50');
compileElement('
');
expect(element.attr('aria-valuenow')).toBeUndefined();
expect(element.attr('aria-valuemin')).toBeUndefined();
expect(element.attr('aria-valuemax')).toBeUndefined();
compileElement('
');
expect(element.attr('aria-valuenow')).toBeUndefined();
expect(element.attr('aria-valuemin')).toBeUndefined();
expect(element.attr('aria-valuemax')).toBeUndefined();
});
});
describe('tabindex', function() {
beforeEach(injectScopeAndCompiler);
they('should not attach to native control $prop', {
'button': '
',
'a': '
',
'input[text]': '',
'input[radio]': '',
'input[checkbox]': '',
'textarea': '',
'select': '',
'details': ' '
}, function(html) {
compileElement(html);
expect(element.attr('tabindex')).toBeUndefined();
});
it('should not attach to random ng-model elements', function() {
compileElement('');
expect(element.attr('tabindex')).toBeUndefined();
});
it('should attach tabindex to custom inputs', function() {
compileElement('');
expect(element.attr('tabindex')).toBe('0');
compileElement('');
expect(element.attr('tabindex')).toBe('0');
});
it('should attach to ng-click and ng-dblclick', function() {
compileElement('');
expect(element.attr('tabindex')).toBe('0');
compileElement('');
expect(element.attr('tabindex')).toBe('0');
});
it('should not attach tabindex if it is already on an element', function() {
compileElement('');
expect(element.attr('tabindex')).toBe('userSetValue');
compileElement('');
expect(element.attr('tabindex')).toBe('userSetValue');
compileElement('');
expect(element.attr('tabindex')).toBe('userSetValue');
compileElement('');
expect(element.attr('tabindex')).toBe('userSetValue');
});
});
describe('accessible actions', function() {
var clickEvents;
beforeEach(injectScopeAndCompiler);
beforeEach(function() {
clickEvents = [];
scope.onClick = jasmine.createSpy('onClick').and.callFake(function(evt) {
var nodeName = evt ? evt.target.nodeName.toLowerCase() : '';
var prevented = !!(evt && evt.isDefaultPrevented());
clickEvents.push(nodeName + '(' + prevented + ')');
});
});
it('should trigger a click from the keyboard (and prevent default action)', function() {
compileElement(
'');
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(clickEvents).toEqual(['div(true)', 'li(true)', 'div(true)', 'li(true)']);
});
it('should trigger a click in browsers that provide `event.which` instead of `event.keyCode`',
function() {
compileElement(
'');
var divElement = element.find('div');
var liElement = element.find('li');
divElement.triggerHandler({type: 'keydown', which: 13});
liElement.triggerHandler({type: 'keydown', which: 13});
divElement.triggerHandler({type: 'keydown', which: 32});
liElement.triggerHandler({type: 'keydown', which: 32});
expect(clickEvents).toEqual(['div(true)', 'li(true)', 'div(true)', 'li(true)']);
}
);
it('should not prevent default keyboard action if the target element has editable content',
inject(function($document) {
// Note:
// `contenteditable` is an enumarated (not a boolean) attribute (see
// https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/contenteditable).
// We need to check the following conditions:
// - No attribute.
// - Value: ""
// - Value: "true"
// - Value: "false"
function eventFor(keyCode) {
return {bubbles: true, cancelable: true, keyCode: keyCode};
}
compileElement(
'' +
// No attribute.
'' +
// Value: ""
'' +
// Value: "true"
'' +
// Value: "false"
'' +
'');
// Support: Safari 11-12+
// Attach to DOM, because otherwise Safari will not update the `isContentEditable` property
// based on the `contenteditable` attribute.
$document.find('body').append(element);
var containers = element.children();
var container;
// Using `browserTrigger()`, because it supports event bubbling.
// No attribute | Elements are not editable.
container = containers.eq(0);
browserTrigger(container.find('div'), 'keydown', eventFor(13));
browserTrigger(container.find('ul'), 'keydown', eventFor(32));
browserTrigger(container.find('li'), 'keydown', eventFor(13));
expect(clickEvents).toEqual(['div(true)', 'ul(true)', 'li(true)']);
// Value: "" | Elements are editable.
clickEvents = [];
container = containers.eq(1);
browserTrigger(container.find('div'), 'keydown', eventFor(32));
browserTrigger(container.find('ul'), 'keydown', eventFor(13));
browserTrigger(container.find('li'), 'keydown', eventFor(32));
expect(clickEvents).toEqual(['div(false)', 'ul(true)', 'li(false)']);
// Value: "true" | Elements are editable.
clickEvents = [];
container = containers.eq(2);
browserTrigger(container.find('div'), 'keydown', eventFor(13));
browserTrigger(container.find('ul'), 'keydown', eventFor(32));
browserTrigger(container.find('li'), 'keydown', eventFor(13));
expect(clickEvents).toEqual(['div(false)', 'ul(true)', 'li(false)']);
// Value: "false" | Elements are not editable.
clickEvents = [];
container = containers.eq(3);
browserTrigger(container.find('div'), 'keydown', eventFor(32));
browserTrigger(container.find('ul'), 'keydown', eventFor(13));
browserTrigger(container.find('li'), 'keydown', eventFor(32));
expect(clickEvents).toEqual(['div(true)', 'ul(true)', 'li(true)']);
})
);
they('should not prevent default keyboard action if an interactive $type element' +
'is nested inside ng-click', nodeBlackList, function(elementType) {
function createHTML(type) {
return '<' + type + '>' + type + '>';
}
compileElement(
'' +
'' + createHTML(elementType) + '
' +
'');
var divElement = element.find('div');
var interactiveElement = element.find(elementType);
// Use browserTrigger because it supports event bubbling
// 13 Enter
browserTrigger(interactiveElement, 'keydown', {cancelable: true, bubbles: true, keyCode: 13});
expect(clickEvents).toEqual([elementType.toLowerCase() + '(false)']);
clickEvents = [];
// 32 Space
browserTrigger(interactiveElement, 'keydown', {cancelable: true, bubbles: true, keyCode: 32});
expect(clickEvents).toEqual([elementType.toLowerCase() + '(false)']);
}
);
they('should not bind to key events if there is existing `ng-$prop`',
['keydown', 'keypress', 'keyup'], function(eventName) {
scope.onKeyEvent = jasmine.createSpy('onKeyEvent');
compileElement('');
element.triggerHandler({type: eventName, keyCode: 13});
element.triggerHandler({type: eventName, keyCode: 32});
expect(scope.onClick).not.toHaveBeenCalled();
expect(scope.onKeyEvent).toHaveBeenCalledTimes(2);
}
);
it('should update bindings when keydown is handled', function() {
scope.count = 0;
compileElement('Count: {{ count }}
');
expect(element.text()).toBe('Count: 0');
element.triggerHandler({type: 'keydown', keyCode: 13});
expect(element.text()).toBe('Count: 1');
element.triggerHandler({type: 'keydown', keyCode: 32});
expect(element.text()).toBe('Count: 2');
});
it('should pass `$event` to `ng-click` handler as local', function() {
compileElement('{{ event.type }}{{ event.keyCode }}
');
expect(element.text()).toBe('');
element.triggerHandler({type: 'keydown', keyCode: 13});
expect(element.text()).toBe('keydown13');
element.triggerHandler({type: 'keydown', keyCode: 32});
expect(element.text()).toBe('keydown32');
});
it('should not bind keydown to natively interactive elements', function() {
compileElement('');
element.triggerHandler({type: 'keydown', keyCode: 13});
element.triggerHandler({type: 'keydown', keyCode: 32});
expect(scope.onClick).not.toHaveBeenCalled();
});
});
describe('actions when bindRoleForClick is set to false', function() {
beforeEach(configAriaProvider({
bindRoleForClick: false
}));
beforeEach(injectScopeAndCompiler);
it('should not add a button role', function() {
compileElement('');
expect(element.attr('role')).toBeUndefined();
});
});
describe('actions when bindKeydown is set to false', function() {
beforeEach(configAriaProvider({
bindKeydown: false
}));
beforeEach(injectScopeAndCompiler);
it('should not trigger click', function() {
scope.someAction = jasmine.createSpy('someAction');
element = $compile('')(scope);
element.triggerHandler({type: 'keydown', keyCode: 13});
element.triggerHandler({type: 'keydown', keyCode: 32});
element.triggerHandler({type: 'keypress', keyCode: 13});
element.triggerHandler({type: 'keypress', keyCode: 32});
element.triggerHandler({type: 'keyup', keyCode: 13});
element.triggerHandler({type: 'keyup', keyCode: 32});
expect(scope.someAction).not.toHaveBeenCalled();
element.triggerHandler({type: 'click', keyCode: 32});
expect(scope.someAction).toHaveBeenCalledOnce();
});
});
describe('tabindex when disabled', function() {
beforeEach(configAriaProvider({
tabindex: false
}));
beforeEach(injectScopeAndCompiler);
it('should not add a tabindex attribute', function() {
compileElement('');
expect(element.attr('tabindex')).toBeUndefined();
compileElement('');
expect(element.attr('tabindex')).toBeUndefined();
compileElement('');
expect(element.attr('tabindex')).toBeUndefined();
compileElement('');
expect(element.attr('tabindex')).toBeUndefined();
});
});
describe('ngModel', function() {
it('should not break when manually compiling', function() {
module(function($compileProvider) {
$compileProvider.directive('foo', function() {
return {
priority: 10,
terminal: true,
link: function(scope, elem) {
$compile(elem, null, 10)(scope);
}
};
});
});
injectScopeAndCompiler();
compileElement('');
// Just check an arbitrary feature to make sure it worked
expect(element.attr('tabindex')).toBe('0');
});
});
// Helpers
function compileElement(inputHtml) {
element = $compile(inputHtml)(scope);
scope.$digest();
}
function configAriaProvider(config) {
return function() {
module(function($ariaProvider) {
$ariaProvider.config(config);
});
};
}
function expectAriaAttrOnEachElement(elem, ariaAttr, expected) {
angular.forEach(elem, function(val) {
expect(angular.element(val).attr(ariaAttr)).toBe(expected);
});
}
function injectScopeAndCompiler() {
return inject(function(_$compile_, _$rootScope_) {
$compile = _$compile_;
scope = _$rootScope_;
});
}
});
})(window, window.angular);