Accordion: Removed static test pages. Added unit tests for dl markup structure.

This commit is contained in:
Scott González
2011-03-23 10:07:09 -04:00
parent aaa21ddb0c
commit b85e11564a
6 changed files with 54 additions and 137 deletions

View File

@@ -1,39 +0,0 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Accordion Static Test : Default</title>
<link rel="stylesheet" href="../static.css" type="text/css" />
<link rel="stylesheet" href="../../../themes/base/jquery.ui.base.css" type="text/css" />
<link rel="stylesheet" href="../../../themes/base/jquery.ui.theme.css" type="text/css" title="ui-theme" />
<script type="text/javascript" src="../../../jquery-1.5.1.js"></script>
<script type="text/javascript" src="../static.js"></script>
</head>
<body>
<div class="ui-accordion ui-widget ui-helper-reset ui-accordion-icons">
<h3 class="ui-accordion-header ui-accordion-header-active ui-helper-reset ui-state-active ui-corner-top" tabindex="0">
<span class="ui-icon ui-icon-triangle-1-s"></span>
<a href="#">Accordion Header 1</a>
</h3>
<div class="ui-accordion-content ui-accordion-content-active ui-helper-reset ui-widget-content ui-corner-bottom">
Accordion Content 1
</div>
<h3 class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all" tabindex="0">
<span class="ui-icon ui-icon-triangle-1-e"></span>
<a href="#">Accordion Header 2</a>
</h3>
<div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" style="height: 95px; display: none;">
Accordion Content 2
</div>
<h3 class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all" tabindex="0">
<span class="ui-icon ui-icon-triangle-1-e"></span>
<a href="#">Accordion Header 3</a>
</h3>
<div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" style="height: 95px; display: none;">
Accordion Content 2
</div>
</div>
</body>
</html>

View File

@@ -1,39 +0,0 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Accordion Static Test : DL</title>
<link rel="stylesheet" href="../static.css" type="text/css" />
<link rel="stylesheet" href="../../../themes/base/jquery.ui.base.css" type="text/css" />
<link rel="stylesheet" href="../../../themes/base/jquery.ui.theme.css" type="text/css" title="ui-theme" />
<script type="text/javascript" src="../../../jquery-1.5.1.js"></script>
<script type="text/javascript" src="../static.js"></script>
</head>
<body>
<dl class="ui-accordion ui-widget ui-helper-reset ui-accordion-icons">
<dt class="ui-accordion-header ui-accordion-header-active ui-helper-reset ui-state-active ui-corner-top" tabindex="0">
<span class="ui-icon ui-icon-triangle-1-s"></span>
<a href="#">Accordion Header 1</a>
</dt>
<dd class="ui-accordion-content ui-accordion-content-active ui-helper-reset ui-widget-content ui-corner-bottom">
Accordion Content 1
</dd>
<dt class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all" tabindex="0">
<span class="ui-icon ui-icon-triangle-1-e"></span>
<a href="#">Accordion Header 2</a>
</dt>
<dd class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" style="height: 95px;">
Accordion Content 2
</dd>
<dt class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all" tabindex="0">
<span class="ui-icon ui-icon-triangle-1-e"></span>
<a href="#">Accordion Header 3</a>
</dt>
<dd class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" style="height: 95px;">
Accordion Content 2
</dd>
</dl>
</body>
</html>

View File

@@ -1,49 +0,0 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Accordion Static Test : UL</title>
<link rel="stylesheet" href="../static.css" type="text/css" />
<link rel="stylesheet" href="../../../themes/base/jquery.ui.base.css" type="text/css" />
<link rel="stylesheet" href="../../../themes/base/jquery.ui.theme.css" type="text/css" title="ui-theme" />
<script type="text/javascript" src="../../../jquery-1.5.1.js"></script>
<script type="text/javascript" src="../static.js"></script>
</head>
<body>
<ul class="ui-accordion ui-widget ui-helper-reset ui-accordion-icons">
<li>
<h2 class="ui-accordion-header ui-accordion-header-active ui-helper-reset ui-state-active ui-corner-top" tabindex="0">
<span class="ui-icon ui-icon-triangle-1-s"></span>
<a href="#">Accordion Header 1</a>
</h2>
<div class="ui-accordion-content ui-accordion-content-active ui-helper-reset ui-widget-content ui-corner-bottom">
Accordion Content 1
<ul>
<li>Some list item</li>
<li>Some list item</li>
</ul>
</div>
</li>
<li>
<h2 class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all" tabindex="0">
<span class="ui-icon ui-icon-triangle-1-e"></span>
<a href="#">Accordion Header 2</a>
</h2>
<div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" style="height: 95px;">
Accordion Content 2
</div>
</li>
<li>
<h2 class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all" tabindex="0">
<span class="ui-icon ui-icon-triangle-1-e"></span>
<a href="#">Accordion Header 3</a>
</h2>
<div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" style="height: 95px;">
Accordion Content 3
</div>
</li>
</ul>
</body>
</html>

View File

@@ -136,6 +136,27 @@
</ul>
</div>
<dl id="accordion-dl">
<dt>
<a href="#">Accordion Header 1</a>
</dt>
<dd>
Accordion Content 1
</dd>
<dt>
<a href="#">Accordion Header 2</a>
</dt>
<dd>
Accordion Content 2
</dd>
<dt>
<a href="#">Accordion Header 3</a>
</dt>
<dd>
Accordion Content 3
</dd>
</dl>
</div>
</body>
</html>

View File

@@ -138,6 +138,27 @@
</ul>
</div>
<dl id="accordion-dl">
<dt>
<a href="#">Accordion Header 1</a>
</dt>
<dd>
Accordion Content 1
</dd>
<dt>
<a href="#">Accordion Header 2</a>
</dt>
<dd>
Accordion Content 2
</dd>
<dt>
<a href="#">Accordion Header 3</a>
</dt>
<dd>
Accordion Content 3
</dd>
</dl>
</div>
</body>
</html>

View File

@@ -2,16 +2,18 @@
module( "accordion: core", accordionSetupTeardown() );
test( "markup structure", function() {
var ac = $( "#navigation" ).accordion();
ok( ac.hasClass( "ui-accordion" ), "main element is .ui-accordion" );
equal( ac.find( ".ui-accordion-header" ).length, 3,
".ui-accordion-header elements exist, correct number" );
equal( ac.find( ".ui-accordion-content" ).length, 3,
".ui-accordion-content elements exist, correct number" );
same( ac.find( ".ui-accordion-header" ).next().get(),
ac.find( ".ui-accordion-content" ).get(),
"content panels come immediately after headers" );
$.each( { div: "#list1", ul: "#navigation", dl: "#accordion-dl" }, function( type, selector ) {
test( "markup structure: " + type, function() {
var ac = $( selector ).accordion();
ok( ac.hasClass( "ui-accordion" ), "main element is .ui-accordion" );
equal( ac.find( ".ui-accordion-header" ).length, 3,
".ui-accordion-header elements exist, correct number" );
equal( ac.find( ".ui-accordion-content" ).length, 3,
".ui-accordion-content elements exist, correct number" );
same( ac.find( ".ui-accordion-header" ).next().get(),
ac.find( ".ui-accordion-content" ).get(),
"content panels come immediately after headers" );
});
});
test( "handle click on header-descendant", function() {