chromium/third_party/google-closure-library/closure/goog/ui/menuitemrenderer_test.js

/**
 * @license
 * Copyright The Closure Library Authors.
 * SPDX-License-Identifier: Apache-2.0
 */

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

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

let sandbox;
let item;
let renderer;

testSuite({
  setUp() {
    sandbox = dom.getElement('sandbox');
    item = new MenuItem('Hello');
    renderer = MenuItemRenderer.getInstance();
  },

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

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

  testCreateDom() {
    const element = renderer.createDom(item);
    assertNotNull('Element must not be null', element);
    assertSameElements(
        'Element must have the expected class names', ['goog-menuitem'],
        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);
  },

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

  testCreateDomForCheckableItem() {
    item.setSupportedState(Component.State.CHECKED, true);
    item.render();
    const element = item.getElement();
    assertNotNull(element);
    assertSameElements(
        'Element must have the expected class names',
        ['goog-menuitem', 'goog-option'], classlist.get(element));
    assertEquals(
        'Element must have ARIA role menuitemcheckbox', Role.MENU_ITEM_CHECKBOX,
        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'],
        classlist.get(element));
    assertEquals(
        'Item must have checked ARIA state', 'true',
        aria.getState(element, State.CHECKED));
  },

  testCreateUpdateDomForCheckableItem() {
    // Render the item first, then update its supported states to include
    // CHECKED.
    item.render();
    const element = item.getElement();
    item.setSupportedState(Component.State.CHECKED, true);
    assertNotNull(element);
    assertSameElements(
        'Element must have the expected class names',
        ['goog-menuitem', 'goog-option'], classlist.get(element));
    assertEquals(
        'Element must have ARIA role menuitemcheckbox', Role.MENU_ITEM_CHECKBOX,
        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'],
        classlist.get(element));
    assertEquals(
        'Item must have checked ARIA state', 'true',
        aria.getState(element, State.CHECKED));
  },

  testCreateDomForSelectableItem() {
    item.setSupportedState(Component.State.SELECTED, true);
    item.render();
    const element = item.getElement();
    assertNotNull(element);
    assertSameElements(
        'Element must have the expected class names',
        ['goog-menuitem', 'goog-option'], classlist.get(element));
    assertEquals(
        'Element must have ARIA role menuitemradio', Role.MENU_ITEM_RADIO,
        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'],
        classlist.get(element));
    assertEquals(
        'Item must have selected ARIA state', 'true',
        aria.getState(element, State.CHECKED));
  },

  testCreateUpdateDomForSelectableItem() {
    // Render the item first, then update its supported states to include
    // SELECTED.
    item.render();
    const element = item.getElement();
    item.setSupportedState(Component.State.SELECTED, true);
    assertNotNull(element);
    assertSameElements(
        'Element must have the expected class names',
        ['goog-menuitem', 'goog-option'], classlist.get(element));
    assertEquals(
        'Element must have ARIA role menuitemradio', Role.MENU_ITEM_RADIO,
        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'],
        classlist.get(element));
    assertEquals(
        'Item must have selected ARIA state', 'true',
        aria.getState(element, State.CHECKED));
  },

  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());
  },

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

    const element = renderer.decorate(item, foo);
    assertSameElements(
        'Element must have the expected class names', ['goog-menuitem'],
        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);
  },

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

    const element = renderer.decorate(item, foo);
    assertSameElements(
        'Element must have the expected class names', ['goog-menuitem'],
        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);
  },

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

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

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

    assertFalse(
        'Item must not be checkable',
        item.isSupportedState(Component.State.CHECKED));
    const element = renderer.decorate(item, foo);
    assertSameElements(
        'Element must have the expected class names',
        ['goog-menuitem', 'goog-option'], classlist.get(element));
    assertTrue(
        'Item must be checkable',
        item.isSupportedState(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);
  },

  testSetContent() {
    item.setSupportedState(Component.State.CHECKED, true);
    const 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);
  },

  testDoesntCallGetCssClassInConstructor() {
    rendererasserts.assertNoGetCssClassCallsInConstructor(MenuItemRenderer);
  },
});