corrade-http-templates – Blame information for rev 57

Subversion Repositories:
Rev:
Rev Author Line No. Line
57 office 1 define( [
2 "qunit",
3 "jquery",
4 "./helper",
5 "ui/widgets/accordion"
6 ], function( QUnit, $, testHelper ) {
7  
8 var setupTeardown = testHelper.setupTeardown,
9 state = testHelper.state;
10  
11 QUnit.module( "accordion: core", setupTeardown() );
12  
13 $.each( { div: "#list1", ul: "#navigation", dl: "#accordion-dl" }, function( type, selector ) {
14 QUnit.test( "markup structure: " + type, function( assert ) {
15 assert.expect( 10 );
16 var element = $( selector ).accordion(),
17 headers = element.find( ".ui-accordion-header" ),
18 content = headers.next();
19  
20 assert.hasClasses( element, "ui-accordion ui-widget" );
21 assert.equal( headers.length, 3, ".ui-accordion-header elements exist, correct number" );
22 assert.hasClasses( headers[ 0 ],
23 "ui-accordion-header ui-accordion-header-active ui-accordion-icons" );
24 assert.hasClasses( headers[ 1 ],
25 "ui-accordion-header ui-accordion-header-collapsed ui-accordion-icons" );
26 assert.hasClasses( headers[ 2 ],
27 "ui-accordion-header ui-accordion-header-collapsed ui-accordion-icons" );
28 assert.equal( content.length, 3, ".ui-accordion-content elements exist, correct number" );
29 assert.hasClasses( content[ 0 ],
30 "ui-accordion-content ui-widget-content ui-accordion-content-active" );
31 assert.hasClasses( content[ 1 ], "ui-accordion-content ui-widget-content" );
32 assert.hasClasses( content[ 2 ], "ui-accordion-content ui-widget-content" );
33 assert.deepEqual( element.find( ".ui-accordion-header" ).next().get(),
34 element.find( ".ui-accordion-content" ).get(),
35 "content panels come immediately after headers" );
36 } );
37 } );
38  
39 QUnit.test( "handle click on header-descendant", function( assert ) {
40 assert.expect( 1 );
41 var element = $( "#navigation" ).accordion();
42 $( "#navigation h2:eq(1) a" ).trigger( "click" );
43 state( assert, element, 0, 1, 0 );
44 } );
45  
46 QUnit.test( "accessibility", function( assert ) {
47 assert.expect( 61 );
48 var element = $( "#list1" ).accordion( {
49 active: 1,
50 collapsible: true
51 } ),
52 headers = element.find( ".ui-accordion-header" );
53  
54 assert.equal( element.attr( "role" ), "tablist", "element role" );
55 headers.each( function( i ) {
56 var header = headers.eq( i ),
57 panel = header.next();
58 assert.equal( header.attr( "role" ), "tab", "header " + i + " role" );
59 assert.equal( header.attr( "aria-controls" ), panel.attr( "id" ), "header " + i + " aria-controls" );
60 assert.equal( panel.attr( "role" ), "tabpanel", "panel " + i + " role" );
61 assert.equal( panel.attr( "aria-labelledby" ), header.attr( "id" ), "panel " + i + " aria-labelledby" );
62 } );
63  
64 assert.equal( headers.eq( 1 ).attr( "tabindex" ), 0, "active header has tabindex=0" );
65 assert.equal( headers.eq( 1 ).attr( "aria-selected" ), "true", "active tab (1) has aria-selected=true" );
66 assert.equal( headers.eq( 1 ).attr( "aria-expanded" ), "true", "active tab (1) has aria-expanded=true" );
67 assert.equal( headers.eq( 1 ).next().attr( "aria-hidden" ), "false", "active tabpanel (1) has aria-hidden=false" );
68 assert.equal( headers.eq( 0 ).attr( "tabindex" ), -1, "inactive header (0) has tabindex=-1" );
69 assert.equal( headers.eq( 0 ).attr( "aria-selected" ), "false", "inactive tab (0) has aria-selected=false" );
70 assert.equal( headers.eq( 0 ).attr( "aria-expanded" ), "false", "inactive tab (0) has aria-expanded=false" );
71 assert.equal( headers.eq( 0 ).next().attr( "aria-hidden" ), "true", "inactive tabpanel (0) has aria-hidden=true" );
72 assert.equal( headers.eq( 2 ).attr( "tabindex" ), -1, "inactive header (2) has tabindex=-1" );
73 assert.equal( headers.eq( 2 ).attr( "aria-selected" ), "false", "inactive tab (2) has aria-selected=false" );
74 assert.equal( headers.eq( 2 ).attr( "aria-expanded" ), "false", "inactive tab (2) has aria-expanded=false" );
75 assert.equal( headers.eq( 2 ).next().attr( "aria-hidden" ), "true", "inactive tabpanel (2) has aria-hidden=true" );
76  
77 element.accordion( "option", "active", 0 );
78 assert.equal( headers.eq( 0 ).attr( "tabindex" ), 0, "active header (0) has tabindex=0" );
79 assert.equal( headers.eq( 0 ).attr( "aria-selected" ), "true", "active tab (0) has aria-selected=true" );
80 assert.equal( headers.eq( 0 ).attr( "aria-expanded" ), "true", "active tab (0) has aria-expanded=true" );
81 assert.equal( headers.eq( 0 ).next().attr( "aria-hidden" ), "false", "active tabpanel (0) has aria-hidden=false" );
82 assert.equal( headers.eq( 1 ).attr( "tabindex" ), -1, "inactive header (1) has tabindex=-1" );
83 assert.equal( headers.eq( 1 ).attr( "aria-selected" ), "false", "inactive tab (1) has aria-selected=false" );
84 assert.equal( headers.eq( 1 ).attr( "aria-expanded" ), "false", "inactive tab (1) has aria-expanded=false" );
85 assert.equal( headers.eq( 1 ).next().attr( "aria-hidden" ), "true", "inactive tabpanel (1) has aria-hidden=true" );
86 assert.equal( headers.eq( 2 ).attr( "tabindex" ), -1, "inactive header (2) has tabindex=-1" );
87 assert.equal( headers.eq( 2 ).attr( "aria-selected" ), "false", "inactive tab (2) has aria-selected=false" );
88 assert.equal( headers.eq( 2 ).attr( "aria-expanded" ), "false", "inactive tab (2) has aria-expanded=false" );
89 assert.equal( headers.eq( 2 ).next().attr( "aria-hidden" ), "true", "inactive tabpanel (2) has aria-hidden=true" );
90  
91 element.accordion( "option", "active", false );
92 assert.equal( headers.eq( 0 ).attr( "tabindex" ), 0, "previously active header (0) has tabindex=0" );
93 assert.equal( headers.eq( 0 ).attr( "aria-selected" ), "false", "inactive tab (0) has aria-selected=false" );
94 assert.equal( headers.eq( 0 ).attr( "aria-expanded" ), "false", "inactive tab (0) has aria-expanded=false" );
95 assert.equal( headers.eq( 0 ).next().attr( "aria-hidden" ), "true", "inactive tabpanel (0) has aria-hidden=true" );
96 assert.equal( headers.eq( 1 ).attr( "tabindex" ), -1, "inactive header (1) has tabindex=-1" );
97 assert.equal( headers.eq( 1 ).attr( "aria-selected" ), "false", "inactive tab (1) has aria-selected=false" );
98 assert.equal( headers.eq( 1 ).attr( "aria-expanded" ), "false", "inactive tab (1) has aria-expanded=false" );
99 assert.equal( headers.eq( 1 ).next().attr( "aria-hidden" ), "true", "inactive tabpanel (1) has aria-hidden=true" );
100 assert.equal( headers.eq( 2 ).attr( "tabindex" ), -1, "inactive header (2) has tabindex=-1" );
101 assert.equal( headers.eq( 2 ).attr( "aria-selected" ), "false", "inactive tab (2) has aria-selected=false" );
102 assert.equal( headers.eq( 2 ).attr( "aria-expanded" ), "false", "inactive tab (2) has aria-expanded=false" );
103 assert.equal( headers.eq( 2 ).next().attr( "aria-hidden" ), "true", "inactive tabpanel (2) has aria-hidden=true" );
104  
105 element.accordion( "option", "active", 1 );
106 assert.equal( headers.eq( 1 ).attr( "tabindex" ), 0, "active header has tabindex=0" );
107 assert.equal( headers.eq( 1 ).attr( "aria-selected" ), "true", "active tab (1) has aria-selected=true" );
108 assert.equal( headers.eq( 1 ).attr( "aria-expanded" ), "true", "active tab (1) has aria-expanded=true" );
109 assert.equal( headers.eq( 1 ).next().attr( "aria-hidden" ), "false", "active tabpanel (1) has aria-hidden=false" );
110 assert.equal( headers.eq( 0 ).attr( "tabindex" ), -1, "inactive header (0) has tabindex=-1" );
111 assert.equal( headers.eq( 0 ).attr( "aria-selected" ), "false", "inactive tab (0) has aria-selected=false" );
112 assert.equal( headers.eq( 0 ).attr( "aria-expanded" ), "false", "inactive tab (0) has aria-expanded=false" );
113 assert.equal( headers.eq( 0 ).next().attr( "aria-hidden" ), "true", "inactive tabpanel (0) has aria-hidden=true" );
114 assert.equal( headers.eq( 2 ).attr( "tabindex" ), -1, "inactive header (2) has tabindex=-1" );
115 assert.equal( headers.eq( 2 ).attr( "aria-selected" ), "false", "inactive tab (2) has aria-selected=false" );
116 assert.equal( headers.eq( 2 ).attr( "aria-expanded" ), "false", "inactive tab (2) has aria-expanded=false" );
117 assert.equal( headers.eq( 2 ).next().attr( "aria-hidden" ), "true", "inactive tabpanel (2) has aria-hidden=true" );
118  
119 } );
120  
121 QUnit.test( "keyboard support", function( assert ) {
122 var ready = assert.async();
123 assert.expect( 13 );
124 var element = $( "#list1" ).accordion(),
125 headers = element.find( ".ui-accordion-header" ),
126 anchor = headers.eq( 1 ).next().find( "a" ).eq( 0 ),
127 keyCode = $.ui.keyCode;
128 assert.equal( headers.filter( ".ui-state-focus" ).length, 0, "no headers focused on init" );
129 headers.eq( 0 ).simulate( "focus" );
130 setTimeout( step1 );
131  
132 function step1() {
133 assert.hasClasses( headers.eq( 0 ), "ui-state-focus", "first header has focus" );
134 headers.eq( 0 ).simulate( "keydown", { keyCode: keyCode.DOWN } );
135 setTimeout( step2 );
136 }
137  
138 // Support: IE 11 with jQuery 1.7 - 1.8 only
139 // All of the setTimeouts() from keydowns aren't necessary with newer jQuery.
140 // Only the explicit focus simulations require them.
141 function step2() {
142 assert.hasClasses( headers.eq( 1 ), "ui-state-focus", "DOWN moves focus to next header" );
143 headers.eq( 1 ).simulate( "keydown", { keyCode: keyCode.RIGHT } );
144 setTimeout( step3 );
145 }
146  
147 function step3() {
148 assert.hasClasses( headers.eq( 2 ), "ui-state-focus", "RIGHT moves focus to next header" );
149 headers.eq( 2 ).simulate( "keydown", { keyCode: keyCode.DOWN } );
150 setTimeout( step4 );
151 }
152  
153 function step4() {
154 assert.hasClasses( headers.eq( 0 ), "ui-state-focus", "DOWN wraps focus to first header" );
155 headers.eq( 0 ).simulate( "keydown", { keyCode: keyCode.UP } );
156 setTimeout( step5 );
157 }
158  
159 function step5() {
160 assert.hasClasses( headers.eq( 2 ), "ui-state-focus", "UP wraps focus to last header" );
161 headers.eq( 2 ).simulate( "keydown", { keyCode: keyCode.LEFT } );
162 setTimeout( step6 );
163 }
164  
165 function step6() {
166 assert.hasClasses( headers.eq( 1 ),
167 "ui-state-focus", "LEFT moves focus to previous header" );
168 headers.eq( 1 ).simulate( "keydown", { keyCode: keyCode.HOME } );
169 setTimeout( step7 );
170 }
171  
172 function step7() {
173 assert.hasClasses( headers.eq( 0 ), "ui-state-focus", "HOME moves focus to first header" );
174 headers.eq( 0 ).simulate( "keydown", { keyCode: keyCode.END } );
175 setTimeout( step8 );
176 }
177  
178 function step8() {
179 assert.hasClasses( headers.eq( 2 ), "ui-state-focus", "END moves focus to last header" );
180 headers.eq( 2 ).simulate( "keydown", { keyCode: keyCode.ENTER } );
181 setTimeout( step9 );
182 }
183  
184 function step9() {
185 assert.equal( element.accordion( "option", "active" ), 2, "ENTER activates panel" );
186 headers.eq( 1 ).simulate( "keydown", { keyCode: keyCode.SPACE } );
187 setTimeout( step10 );
188 }
189  
190 function step10() {
191 assert.equal( element.accordion( "option", "active" ), 1, "SPACE activates panel" );
192 anchor.simulate( "focus" );
193 setTimeout( step11 );
194 }
195  
196 function step11() {
197 assert.lacksClasses( headers.eq( 1 ), "ui-state-focus",
198 "header loses focus when focusing inside the panel" );
199 anchor.simulate( "keydown", { keyCode: keyCode.UP, ctrlKey: true } );
200 setTimeout( step12 );
201 }
202  
203 function step12() {
204 assert.hasClasses( headers.eq( 1 ), "ui-state-focus", "CTRL+UP moves focus to header" );
205 ready();
206 }
207 } );
208  
209 } );