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,6 +26,40 @@
}
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);
});
};

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" />
</head>
<body>
<h1 id="qunit-header">Table Tests</h1>
<h1 id="qunit-header">SkeletonTab Tests</h1>
<h2 id="qunit-banner"></h2>
<div id="qunit-testrunner-toolbar"></div>
<h2 id="qunit-userAgent"></h2>
<ol id="qunit-tests"></ol>
<div id="qunit-fixture">
<div role="tabpanel">
<div id="tab-container">
<ul>
<li>Simple</li>
<li>Lightweight</li>

112
javascripts/tests/tests.js
View File

@ -1,41 +1,81 @@
$(document).ready(function () {
module("Table markup creation");
test("Tab list attribute generation", function () {
var data = {
"table": {
"columns": [
{
"name": "firstName",
"displayName": "First Name"
},
{
"name": "lastName",
"displayName": "Last Name"
}
]
}
var tabContainer = $('#qunit-fixture #tab-container');
var tabList = $(tabContainer).find('> ul');
var tabs = tabList.find('li');
tabContainer.skeletonTabs();
equal($(tabList).attr('role'),
'tablist',
'Expect first unordered list to have tabList role');
});
test("Tab attribute generation with nothing set", function () {
var tabContainer = $('#qunit-fixture #tab-container');
var tabList = $(tabContainer).find('> ul');
var tabs = tabList.find('li');
tabContainer.skeletonTabs();
equal($(tabs).first().attr('aria-selected'),
'true',
'Expect first tab to have aria-selected set to true');
$(tabs).each(function(index) {
if(index != 0){
equal($(this).attr('aria-selected'),
'false',
'Expect subsequent tabs to have aria-selected set to false')
}
test("Generate table headers", function () {
$('#qunit-fixture').tablePlugin(data);
var table = $('#qunit-fixture');
var thead = table.find("thead tr");
equal(thead.find('th').size(),
data.table.columns.length,
"Expect number of generated table headers to match number in model");
equal(thead.find('th').first().html(),
data.table.columns[0].displayName,
"Expect inner HTML to be display name");
equal(thead.find('th').first().attr('data-name'),
data.table.columns[0].name,
"Expect data-name attribute to be set to name");
});
});
});
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');
});
});
});