From c8fc54fd777528506bfd599002a7cfe50216da8a Mon Sep 17 00:00:00 2001 From: conzett Date: Tue, 22 Nov 2011 18:01:27 -0500 Subject: [PATCH] Add tests for generation of aria attributes --- javascripts/tabs.js | 34 ++++++++++++ javascripts/tests/runner.html | 4 +- javascripts/tests/tests.js | 100 ++++++++++++++++++++++++---------- 3 files changed, 106 insertions(+), 32 deletions(-) diff --git a/javascripts/tabs.js b/javascripts/tabs.js index d0d5191..fa9d128 100644 --- a/javascripts/tabs.js +++ b/javascripts/tabs.js @@ -26,7 +26,41 @@ } 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 ) { diff --git a/javascripts/tests/runner.html b/javascripts/tests/runner.html index 8865aac..1535630 100644 --- a/javascripts/tests/runner.html +++ b/javascripts/tests/runner.html @@ -4,13 +4,13 @@ -

Table Tests

+

SkeletonTab Tests

    -
    +
    • Simple
    • Lightweight
      • diff --git a/javascripts/tests/tests.js b/javascripts/tests/tests.js index 5fb3f7d..e4b2765 100644 --- a/javascripts/tests/tests.js +++ b/javascripts/tests/tests.js @@ -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(); - 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'); - var thead = table.find("thead tr"); + test("Tab attribute generation with nothing set", function () { - equal(thead.find('th').size(), - data.table.columns.length, - "Expect number of generated table headers to match number in model"); + var tabContainer = $('#qunit-fixture #tab-container'); + var tabList = $(tabContainer).find('> ul'); + var tabs = tabList.find('li'); + tabContainer.skeletonTabs(); - equal(thead.find('th').first().html(), - data.table.columns[0].displayName, - "Expect inner HTML to be display name"); + equal($(tabs).first().attr('aria-selected'), + 'true', + 'Expect first tab to have aria-selected set to true'); - equal(thead.find('th').first().attr('data-name'), - data.table.columns[0].name, - "Expect data-name attribute to be set to name"); + $(tabs).each(function(index) { + if(index != 0){ + equal($(this).attr('aria-selected'), + 'false', + 'Expect subsequent tabs to have aria-selected set to false') + } + }); - }); + }); - }); \ No newline at end of file + 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'); + }); + + }); + +}); \ No newline at end of file