BitGoblin/Bones
1
0
Fork 0
Code Issues 5 Pull Requests Packages Projects Releases Wiki Activity

Add tests for generation of aria attributes

Browse Source
This commit is contained in:
conzett 2011-11-22 18:01:27 -05:00
parent 0c2a04726d
commit c8fc54fd77
3 changed files with 106 additions and 32 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

34
javascripts/tabs.js
View File

@ -26,7 +26,41 @@
} }
Plugin.prototype.init = function () { Plugin.prototype.init = function () {
var tabList = $(this.element).find('> ul');
var tabs = $(tabList).find('li');
var tabPanels = $(this.element).children().not('ul');
tabList.attr('role', 'tablist');
$(tabs).each(function(index) {
// if there is no aria selected role present, set it to false
var selectedVar = $(this).attr('aria-selected');
if(!selectedVar){
$(this).attr('aria-selected', 'false');
}
// add IDs to tabs
$(this).attr('id', 'tab' + index + 1);
});
// if there isn't already a selected tab, make the first one selected
if($(tabList).find('[aria-selected="true"]').length == 0)
{
$(tabs).first().attr('aria-selected', 'true');
}
// add IDs to tab panels
$(tabPanels).each(function(index) {
$(this).attr('id', 'tabpanel' + index + 1);
});
}; };
$.fn[pluginName] = function ( options ) { $.fn[pluginName] = function ( options ) {

4
javascripts/tests/runner.html
View File

@ -4,13 +4,13 @@
<link rel="stylesheet" href="http://code.jquery.com/qunit/git/qunit.css" type="text/css" media="screen" /> <link rel="stylesheet" href="http://code.jquery.com/qunit/git/qunit.css" type="text/css" media="screen" />
</head> </head>
<body> <body>
<h1 id="qunit-header">Table Tests</h1> <h1 id="qunit-header">SkeletonTab Tests</h1>
<h2 id="qunit-banner"></h2> <h2 id="qunit-banner"></h2>
<div id="qunit-testrunner-toolbar"></div> <div id="qunit-testrunner-toolbar"></div>
<h2 id="qunit-userAgent"></h2> <h2 id="qunit-userAgent"></h2>
<ol id="qunit-tests"></ol> <ol id="qunit-tests"></ol>
<div id="qunit-fixture"> <div id="qunit-fixture">
<div role="tabpanel"> <div id="tab-container">
<ul> <ul>
<li>Simple</li> <li>Simple</li>
<li>Lightweight</li> <li>Lightweight</li>

100
javascripts/tests/tests.js
View File

@ -1,41 +1,81 @@
$(document).ready(function () { $(document).ready(function () {
module("Table markup creation"); test("Tab list attribute generation", function () {
var data = { var tabContainer = $('#qunit-fixture #tab-container');
"table": { var tabList = $(tabContainer).find('> ul');
"columns": [ var tabs = tabList.find('li');
{ tabContainer.skeletonTabs();
"name": "firstName",
"displayName": "First Name"
},
{
"name": "lastName",
"displayName": "Last Name"
}
]
}
}
test("Generate table headers", function () { equal($(tabList).attr('role'),
'tablist',
'Expect first unordered list to have tabList role');
$('#qunit-fixture').tablePlugin(data); });
var table = $('#qunit-fixture'); test("Tab attribute generation with nothing set", function () {
var thead = table.find("thead tr");
equal(thead.find('th').size(), var tabContainer = $('#qunit-fixture #tab-container');
data.table.columns.length, var tabList = $(tabContainer).find('> ul');
"Expect number of generated table headers to match number in model"); var tabs = tabList.find('li');
tabContainer.skeletonTabs();
equal(thead.find('th').first().html(), equal($(tabs).first().attr('aria-selected'),
data.table.columns[0].displayName, 'true',
"Expect inner HTML to be display name"); 'Expect first tab to have aria-selected set to true');
equal(thead.find('th').first().attr('data-name'), $(tabs).each(function(index) {
data.table.columns[0].name, if(index != 0){
"Expect data-name attribute to be set to name"); equal($(this).attr('aria-selected'),
'false',
'Expect subsequent tabs to have aria-selected set to false')
}
});
}); });
}); test("Tab attribute generation with aria selected set by user", function () {
var tabContainer = $('#qunit-fixture #tab-container');
$(tabContainer).find("ul li:nth-child(2)").attr('aria-selected', 'true');
var tabList = $(tabContainer).find('> ul');
var tabs = tabList.find('li');
tabContainer.skeletonTabs();
equal($(tabList).find(':nth-child(2)').attr('aria-selected'),
'true',
'Expect 2nd tab aria-selected role to be true');
equal($(tabList).find('[aria-selected="true"]').length,
1,
'Expect one aria-selected role to be true');
$(tabs).each(function(index) {
notEqual($(this).attr('aria-selected'),
null,
'Expect tab at position ' + index + ' to have an aria-selected attribute that is not null')
});
});
test("Tabs and tabpanel ID generation", function () {
var tabContainer = $('#qunit-fixture #tab-container');
var tabList = $(tabContainer).find('> ul');
var tabs = tabList.find('li');
var tabPanels = $(tabContainer).children().not('ul');
tabContainer.skeletonTabs();
$(tabs).each(function(index) {
var tabID = $(this).attr('id');
ok(tabID, 'Expect tab at position ' + index + ' to have an id');
});
$(tabPanels).each(function(index) {
var tabPanelID = $(this).attr('id');
ok(tabPanelID, 'Expect tab panel at position ' + index + ' to have an id');
});
});
});