src/third_party/closure_library/closure/goog/ui/menuitemrenderer_test.js

// Copyright 2008 The Closure Library Authors. All Rights Reserved.
//
// Licensed under the Apache License, Version 2.0 (the "License");
// you may not use this file except in compliance with the License.
// You may obtain a copy of the License at
//
//      http://www.apache.org/licenses/LICENSE-2.0
//
// Unless required by applicable law or agreed to in writing, software
// distributed under the License is distributed on an "AS-IS" BASIS,
// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
// See the License for the specific language governing permissions and
// limitations under the License.

goog.provide('goog.ui.MenuItemRendererTest');
goog.setTestOnly('goog.ui.MenuItemRendererTest');

goog.require('goog.a11y.aria');
goog.require('goog.a11y.aria.Role');
goog.require('goog.a11y.aria.State');
goog.require('goog.dom');
goog.require('goog.dom.classlist');
goog.require('goog.testing.jsunit');
goog.require('goog.testing.ui.rendererasserts');
goog.require('goog.ui.Component');
goog.require('goog.ui.MenuItem');
goog.require('goog.ui.MenuItemRenderer');

var sandbox;
var item, renderer;

function setUp() {
  sandbox = goog.dom.getElement('sandbox');
  item = new goog.ui.MenuItem('Hello');
  renderer = goog.ui.MenuItemRenderer.getInstance();
}

function tearDown() {
  item.dispose();
  goog.dom.removeChildren(sandbox);
}

function testMenuItemRenderer() {
  assertNotNull('Instance must not be null', renderer);
  assertEquals('Singleton getter must always return same instance',
      renderer, goog.ui.MenuItemRenderer.getInstance());
}

function testCreateDom() {
  var element = renderer.createDom(item);
  assertNotNull('Element must not be null', element);
  assertSameElements('Element must have the expected class names',
      ['goog-menuitem'], goog.dom.classlist.get(element));
  assertEquals('Element must have exactly one child element', 1,
      element.childNodes.length);
  assertHTMLEquals('Child element must have the expected structure',
      '<div class="goog-menuitem-content">Hello</div>',
      element.innerHTML);
}

function testCreateDomWithHoverState() {
  item.setHighlighted(true);
  var element = renderer.createDom(item);
  assertSameElements('Element must have the expected class names',
      ['goog-menuitem', 'goog-menuitem-highlight'],
      goog.dom.classlist.get(element));
}

function testCreateDomForCheckableItem() {
  item.setSupportedState(goog.ui.Component.State.CHECKED, true);
  item.render();
  var element = item.getElement();
  assertNotNull(element);
  assertSameElements('Element must have the expected class names',
      ['goog-menuitem', 'goog-option'],
      goog.dom.classlist.get(element));
  assertEquals('Element must have ARIA role menuitemcheckbox',
      goog.a11y.aria.Role.MENU_ITEM_CHECKBOX,
      goog.a11y.aria.getRole(element));

  item.setChecked(true);
  assertTrue('Item must be checked', item.isChecked());
  assertSameElements('Checked item must have the expected class names',
      ['goog-menuitem', 'goog-option', 'goog-option-selected'],
      goog.dom.classlist.get(element));
  assertEquals('Item must have checked ARIA state', 'true',
      goog.a11y.aria.getState(element, goog.a11y.aria.State.CHECKED));
}

function testCreateUpdateDomForCheckableItem() {
  // Render the item first, then update its supported states to include CHECKED.
  item.render();
  var element = item.getElement();
  item.setSupportedState(goog.ui.Component.State.CHECKED, true);
  assertNotNull(element);
  assertSameElements('Element must have the expected class names',
      ['goog-menuitem', 'goog-option'],
      goog.dom.classlist.get(element));
  assertEquals('Element must have ARIA role menuitemcheckbox',
      goog.a11y.aria.Role.MENU_ITEM_CHECKBOX,
      goog.a11y.aria.getRole(element));

  // Now actually check the item.
  item.setChecked(true);
  assertTrue('Item must be checked', item.isChecked());
  assertSameElements('Checked item must have the expected class names',
      ['goog-menuitem', 'goog-option', 'goog-option-selected'],
      goog.dom.classlist.get(element));
  assertEquals('Item must have checked ARIA state', 'true',
      goog.a11y.aria.getState(element, goog.a11y.aria.State.CHECKED));
}

function testCreateDomForSelectableItem() {
  item.setSupportedState(goog.ui.Component.State.SELECTED, true);
  item.render();
  var element = item.getElement();
  assertNotNull(element);
  assertSameElements('Element must have the expected class names',
      ['goog-menuitem', 'goog-option'],
      goog.dom.classlist.get(element));
  assertEquals('Element must have ARIA role menuitemradio',
      goog.a11y.aria.Role.MENU_ITEM_RADIO,
      goog.a11y.aria.getRole(element));

  item.setSelected(true);
  assertTrue('Item must be selected', item.isSelected());
  assertSameElements('Selected item must have the expected class names',
      ['goog-menuitem', 'goog-option', 'goog-option-selected'],
      goog.dom.classlist.get(element));
  assertEquals('Item must have selected ARIA state', 'true',
      goog.a11y.aria.getState(element, goog.a11y.aria.State.CHECKED));
}

function testCreateUpdateDomForSelectableItem() {
  // Render the item first, then update its supported states to include
  // SELECTED.
  item.render();
  var element = item.getElement();
  item.setSupportedState(goog.ui.Component.State.SELECTED, true);
  assertNotNull(element);
  assertSameElements('Element must have the expected class names',
      ['goog-menuitem', 'goog-option'],
      goog.dom.classlist.get(element));
  assertEquals('Element must have ARIA role menuitemradio',
      goog.a11y.aria.Role.MENU_ITEM_RADIO,
      goog.a11y.aria.getRole(element));

  // Now actually select the item.
  item.setSelected(true);
  assertTrue('Item must be selected', item.isSelected());
  assertSameElements('Selected item must have the expected class names',
      ['goog-menuitem', 'goog-option', 'goog-option-selected'],
      goog.dom.classlist.get(element));
  assertEquals('Item must have selected ARIA state', 'true',
      goog.a11y.aria.getState(element, goog.a11y.aria.State.CHECKED));
}

function testGetContentElement() {
  assertNull('Content element must be the null initially',
      item.getContentElement());
  item.createDom();
  assertEquals('Content element must be the element\'s first child',
      item.getElement().firstChild, item.getContentElement());
}

function testDecorate() {
  sandbox.innerHTML = '<div id="foo">Hello</div>';
  var foo = goog.dom.getElement('foo');

  var element = renderer.decorate(item, foo);
  assertSameElements('Element must have the expected class names',
      ['goog-menuitem'], goog.dom.classlist.get(element));
  assertEquals('Element must have exactly one child element', 1,
      element.childNodes.length);
  assertHTMLEquals('Child element must have the expected structure',
      '<div class="goog-menuitem-content">Hello</div>',
      element.innerHTML);
}

function testDecorateWithContentStructure() {
  sandbox.innerHTML =
      '<div id="foo"><div class="goog-menuitem-content">Hello</div></div>';
  var foo = goog.dom.getElement('foo');

  var element = renderer.decorate(item, foo);
  assertSameElements('Element must have the expected class names',
      ['goog-menuitem'], goog.dom.classlist.get(element));
  assertEquals('Element must have exactly one child element', 1,
      element.childNodes.length);
  assertHTMLEquals('Child element must have the expected structure',
      '<div class="goog-menuitem-content">Hello</div>',
      element.innerHTML);
}

function testDecorateWithHoverState() {
  sandbox.innerHTML =
      '<div id="foo" class="goog-menuitem-highlight">Hello</div>';
  var foo = goog.dom.getElement('foo');

  assertFalse('Item must not be highlighted', item.isHighlighted());
  var element = renderer.decorate(item, foo);
  assertSameElements('Element must have the expected class names',
      ['goog-menuitem', 'goog-menuitem-highlight'],
      goog.dom.classlist.get(element));
  assertTrue('Item must be highlighted', item.isHighlighted());
}

function testDecorateCheckableItem() {
  sandbox.innerHTML = '<div id="foo" class="goog-option">Hello</div>';
  var foo = goog.dom.getElement('foo');

  assertFalse('Item must not be checkable',
      item.isSupportedState(goog.ui.Component.State.CHECKED));
  var element = renderer.decorate(item, foo);
  assertSameElements('Element must have the expected class names',
      ['goog-menuitem', 'goog-option'], goog.dom.classlist.get(element));
  assertTrue('Item must be checkable',
      item.isSupportedState(goog.ui.Component.State.CHECKED));
  assertHTMLEquals('Child element must have the expected structure',
      '<div class="goog-menuitem-content">' +
          '<div class="goog-menuitem-checkbox"></div>Hello</div>',
      element.innerHTML);
}

function testSetContent() {
  item.setSupportedState(goog.ui.Component.State.CHECKED, true);
  var element = renderer.createDom(item);
  assertHTMLEquals('Child element must have the expected structure',
      '<div class="goog-menuitem-content">' +
          '<div class="goog-menuitem-checkbox"></div>Hello</div>',
      element.innerHTML);

  renderer.setContent(element, 'Goodbye');
  assertHTMLEquals('Child element must have the expected structure',
      '<div class="goog-menuitem-content">' +
          '<div class="goog-menuitem-checkbox"></div>Goodbye</div>',
      element.innerHTML);
}

function testDoesntCallGetCssClassInConstructor() {
  goog.testing.ui.rendererasserts.
      assertNoGetCssClassCallsInConstructor(goog.ui.MenuItemRenderer);
}