buttonrenderer_test.js 8.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261
  1. // Copyright 2008 The Closure Library Authors. All Rights Reserved.
  2. //
  3. // Licensed under the Apache License, Version 2.0 (the "License");
  4. // you may not use this file except in compliance with the License.
  5. // You may obtain a copy of the License at
  6. //
  7. // http://www.apache.org/licenses/LICENSE-2.0
  8. //
  9. // Unless required by applicable law or agreed to in writing, software
  10. // distributed under the License is distributed on an "AS-IS" BASIS,
  11. // WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  12. // See the License for the specific language governing permissions and
  13. // limitations under the License.
  14. goog.provide('goog.ui.ButtonRendererTest');
  15. goog.setTestOnly('goog.ui.ButtonRendererTest');
  16. goog.require('goog.a11y.aria');
  17. goog.require('goog.a11y.aria.Role');
  18. goog.require('goog.a11y.aria.State');
  19. goog.require('goog.dom');
  20. goog.require('goog.dom.TagName');
  21. goog.require('goog.dom.classlist');
  22. goog.require('goog.testing.ExpectedFailures');
  23. goog.require('goog.testing.jsunit');
  24. goog.require('goog.testing.ui.rendererasserts');
  25. goog.require('goog.ui.Button');
  26. goog.require('goog.ui.ButtonRenderer');
  27. goog.require('goog.ui.ButtonSide');
  28. goog.require('goog.ui.Component');
  29. goog.require('goog.ui.ControlRenderer');
  30. var button, buttonRenderer, testRenderer;
  31. var sandbox;
  32. var expectedFailures;
  33. function setUpPage() {
  34. sandbox = goog.dom.getElement('sandbox');
  35. expectedFailures = new goog.testing.ExpectedFailures();
  36. }
  37. /**
  38. * A subclass of ButtonRenderer that overrides
  39. * {@code getStructuralCssClass} for testing purposes.
  40. * @constructor
  41. * @extends {goog.ui.ControlRenderer}
  42. */
  43. function TestRenderer() {
  44. goog.ui.ButtonRenderer.call(this);
  45. }
  46. goog.inherits(TestRenderer, goog.ui.ButtonRenderer);
  47. goog.addSingletonGetter(TestRenderer);
  48. /** @override */
  49. TestRenderer.prototype.getStructuralCssClass = function() {
  50. return 'goog-base';
  51. };
  52. function setUp() {
  53. buttonRenderer = goog.ui.ButtonRenderer.getInstance();
  54. button = new goog.ui.Button('Hello', buttonRenderer);
  55. testRenderer = TestRenderer.getInstance();
  56. }
  57. function tearDown() {
  58. button.dispose();
  59. goog.dom.removeChildren(sandbox);
  60. expectedFailures.handleTearDown();
  61. }
  62. function testConstructor() {
  63. assertNotNull(
  64. 'ButtonRenderer singleton instance must not be null', buttonRenderer);
  65. }
  66. function testGetAriaRole() {
  67. assertEquals(
  68. 'ButtonRenderer\'s ARIA role must have expected value',
  69. goog.a11y.aria.Role.BUTTON, buttonRenderer.getAriaRole());
  70. }
  71. function testCreateDom() {
  72. var element = buttonRenderer.createDom(button);
  73. assertNotNull('Element must not be null', element);
  74. assertEquals('Element must be a DIV',
  75. String(goog.dom.TagName.DIV), element.tagName);
  76. assertHTMLEquals(
  77. 'Element must have expected structure',
  78. '<div class="goog-button">Hello</div>', goog.dom.getOuterHtml(element));
  79. button.setTooltip('Hello, world!');
  80. button.setValue('foo');
  81. element = buttonRenderer.createDom(button);
  82. assertNotNull('Element must not be null', element);
  83. assertEquals('Element must be a DIV', 'DIV', element.tagName);
  84. assertSameElements(
  85. 'Element must have expected class name', ['goog-button'],
  86. goog.dom.classlist.get(element));
  87. assertEquals(
  88. 'Element must have expected title', 'Hello, world!', element.title);
  89. assertUndefined('Element must have no value', element.value);
  90. assertEquals(
  91. 'Element must have expected contents', 'Hello', element.innerHTML);
  92. button.setSupportedState(goog.ui.Component.State.CHECKED, true);
  93. var element = buttonRenderer.createDom(button);
  94. assertEquals(
  95. 'button\'s aria-pressed attribute must be false', 'false',
  96. goog.a11y.aria.getState(element, goog.a11y.aria.State.PRESSED));
  97. }
  98. function testSetTooltip() {
  99. button.createDom();
  100. button.setTooltip('tooltip');
  101. assertEquals('tooltip', button.getElement().title);
  102. button.setTooltip('');
  103. assertEquals('', button.getElement().title);
  104. // IE7 doesn't support hasAttribute.
  105. if (button.getElement().hasAttribute) {
  106. assertFalse(button.getElement().hasAttribute('title'));
  107. }
  108. }
  109. function testCreateDomAriaState() {
  110. button.setSupportedState(goog.ui.Component.State.CHECKED, true);
  111. button.setChecked(true);
  112. var element = buttonRenderer.createDom(button);
  113. assertEquals(
  114. 'button\'s aria-pressed attribute must be true', 'true',
  115. goog.a11y.aria.getState(element, goog.a11y.aria.State.PRESSED));
  116. }
  117. function testUseAriaPressedForSelected() {
  118. button.setSupportedState(goog.ui.Component.State.SELECTED, true);
  119. button.setSelected(true);
  120. button.setRenderer(buttonRenderer);
  121. button.render();
  122. var element = button.getElement();
  123. assertEquals(
  124. 'button\'s aria-pressed attribute must be true', 'true',
  125. goog.a11y.aria.getState(element, goog.a11y.aria.State.PRESSED));
  126. assertEquals(
  127. 'button\'s aria-selected attribute must be empty', '',
  128. goog.a11y.aria.getState(element, goog.a11y.aria.State.SELECTED));
  129. }
  130. function testAriaDisabled() {
  131. button.setEnabled(false);
  132. button.setRenderer(buttonRenderer);
  133. button.render();
  134. var element = button.getElement();
  135. assertEquals(
  136. 'button\'s aria-disabled attribute must be true', 'true',
  137. goog.a11y.aria.getState(element, goog.a11y.aria.State.DISABLED));
  138. }
  139. function testDecorate() {
  140. sandbox.innerHTML = '<div id="foo">Foo</div>\n' +
  141. '<div id="bar" title="Hello, world!">Bar</div>\n' +
  142. '<div id="toggle">Toggle</div>';
  143. var foo = new goog.ui.Button(null, buttonRenderer);
  144. foo.decorate(goog.dom.getElement('foo'));
  145. assertEquals('foo\'s tooltip must be the empty string', '', foo.getTooltip());
  146. foo.dispose();
  147. var bar = new goog.ui.Button(null, buttonRenderer);
  148. bar.decorate(goog.dom.getElement('bar'));
  149. assertEquals(
  150. 'bar\'s tooltip must be initialized', 'Hello, world!', bar.getTooltip());
  151. bar.dispose();
  152. var toggle = new goog.ui.Button(null, buttonRenderer);
  153. toggle.setSupportedState(goog.ui.Component.State.CHECKED, true);
  154. var element = goog.dom.getElement('toggle');
  155. assertNotNull(element);
  156. toggle.decorate(element);
  157. assertEquals(
  158. 'toggle\'s aria-pressed attribute must be false', 'false',
  159. goog.a11y.aria.getState(element, goog.a11y.aria.State.PRESSED));
  160. toggle.dispose();
  161. }
  162. function testCollapse() {
  163. buttonRenderer.setCollapsed(button, goog.ui.ButtonSide.START);
  164. assertSameElements(
  165. 'Button should have class to collapse start',
  166. ['goog-button-collapse-left'], button.getExtraClassNames());
  167. buttonRenderer.setCollapsed(button, goog.ui.ButtonSide.END);
  168. assertSameElements(
  169. 'Button should have class to collapse end',
  170. ['goog-button-collapse-right'], button.getExtraClassNames());
  171. buttonRenderer.setCollapsed(button, goog.ui.ButtonSide.BOTH);
  172. assertSameElements(
  173. 'Button should have classes to collapse both',
  174. ['goog-button-collapse-left', 'goog-button-collapse-right'],
  175. button.getExtraClassNames());
  176. }
  177. function testCollapseRtl() {
  178. button.setRightToLeft(true);
  179. buttonRenderer.setCollapsed(button, goog.ui.ButtonSide.START);
  180. assertSameElements(
  181. 'Button should have class to collapse start',
  182. ['goog-button-collapse-right'], button.getExtraClassNames());
  183. buttonRenderer.setCollapsed(button, goog.ui.ButtonSide.END);
  184. assertSameElements(
  185. 'Button should have class to collapse end', ['goog-button-collapse-left'],
  186. button.getExtraClassNames());
  187. buttonRenderer.setCollapsed(button, goog.ui.ButtonSide.BOTH);
  188. assertSameElements(
  189. 'Button should have classes to collapse both',
  190. ['goog-button-collapse-left', 'goog-button-collapse-right'],
  191. button.getExtraClassNames());
  192. }
  193. function testCollapseWithStructuralClass() {
  194. testRenderer.setCollapsed(button, goog.ui.ButtonSide.BOTH);
  195. assertSameElements(
  196. 'Should use structural class for collapse classes',
  197. ['goog-base-collapse-left', 'goog-base-collapse-right'],
  198. button.getExtraClassNames());
  199. }
  200. function testUpdateAriaState() {
  201. var element = buttonRenderer.createDom(button);
  202. buttonRenderer.updateAriaState(
  203. element, goog.ui.Component.State.CHECKED, true);
  204. assertEquals(
  205. 'Button must have pressed ARIA state', 'true',
  206. goog.a11y.aria.getState(element, goog.a11y.aria.State.PRESSED));
  207. // Test for updating a state other than CHECKED
  208. buttonRenderer.updateAriaState(
  209. element, goog.ui.Component.State.DISABLED, true);
  210. assertEquals(
  211. 'Button must have disabled ARIA state', 'true',
  212. goog.a11y.aria.getState(element, goog.a11y.aria.State.DISABLED));
  213. buttonRenderer.updateAriaState(
  214. element, goog.ui.Component.State.CHECKED, false);
  215. assertEquals(
  216. 'Control must no longer have pressed ARIA state', 'false',
  217. goog.a11y.aria.getState(element, goog.a11y.aria.State.PRESSED));
  218. buttonRenderer.updateAriaState(
  219. element, goog.ui.Component.State.SELECTED, true);
  220. assertEquals(
  221. 'Button must have pressed ARIA state', 'true',
  222. goog.a11y.aria.getState(element, goog.a11y.aria.State.PRESSED));
  223. }
  224. function testDoesntCallGetCssClassInConstructor() {
  225. goog.testing.ui.rendererasserts.assertNoGetCssClassCallsInConstructor(
  226. goog.ui.ButtonRenderer);
  227. }