chromium/third_party/google-closure-library/closure/goog/ui/style/app/menubuttonrenderer_test.js

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

goog.module('goog.ui.style.app.MenuButtonRendererTest');
goog.setTestOnly();

const Component = goog.require('goog.ui.Component');
const MenuButton = goog.require('goog.ui.MenuButton');
const MenuButtonRenderer = goog.require('goog.ui.style.app.MenuButtonRenderer');
const dom = goog.require('goog.dom');
const style = goog.require('goog.testing.ui.style');
const testSuite = goog.require('goog.testing.testSuite');

const renderer = MenuButtonRenderer.getInstance();
let button;

// Write iFrame tag to load reference FastUI markup. Then, our tests will
// compare the generated markup to the reference markup.
const refPath =
    '../../../../../../webutil/css/legacy/fastui/app/menubutton_spec.html';
style.writeReferenceFrame(refPath);

function shouldRunTests() {
  // Disable tests when being run as a part of open-source repo as the button
  // specs are not included in closure-library.
  return !(/closure\/goog\/ui/.test(location.pathname));
}

testSuite({
  setUp() {
    button = new MenuButton('Hello Generated', null, renderer);
    button.setTooltip('Click for Generated');
  },

  tearDown() {
    if (button) {
      button.dispose();
    }
    dom.removeChildren(dom.getElement('sandbox'));
  },

  testGeneratedButton() {
    button.render(dom.getElement('sandbox'));
    style.assertStructureMatchesReference(
        button.getElement(), 'normal-resting');
    assertEquals(
        'Hello Generated', button.getContentElement().firstChild.nodeValue);
    assertEquals(
        'Click for Generated', button.getElement().getAttribute('title'));
  },

  testButtonStates() {
    button.render(dom.getElement('sandbox'));
    style.assertStructureMatchesReference(
        button.getElement(), 'normal-resting');
    button.setState(Component.State.HOVER, true);
    style.assertStructureMatchesReference(button.getElement(), 'normal-hover');
    button.setState(Component.State.HOVER, false);
    button.setState(Component.State.FOCUSED, true);
    style.assertStructureMatchesReference(
        button.getElement(), 'normal-focused');
    button.setState(Component.State.FOCUSED, false);
    button.setState(Component.State.ACTIVE, true);
    style.assertStructureMatchesReference(button.getElement(), 'normal-active');
    button.setState(Component.State.ACTIVE, false);
    button.setState(Component.State.DISABLED, true);
    style.assertStructureMatchesReference(
        button.getElement(), 'normal-disabled');
  },

  testDecoratedButton() {
    button.decorate(dom.getElement('button'));
    style.assertStructureMatchesReference(
        button.getElement(), 'normal-resting');
    assertEquals(
        'Hello Decorated', button.getContentElement().firstChild.nodeValue);
    assertEquals(
        'Click for Decorated', button.getElement().getAttribute('title'));
  },

  testDecoratedButtonBox() {
    button.decorate(dom.getElement('button-box'));
    style.assertStructureMatchesReference(
        button.getElement(), 'normal-resting');
    assertEquals(
        'Hello Decorated Box', button.getContentElement().firstChild.nodeValue);
    assertEquals(
        'Click for Decorated Box', button.getElement().getAttribute('title'));
  },

  testExistingContentIsUsed() {
    button.decorate(dom.getElement('button-with-dom-content'));
    style.assertStructureMatchesReference(
        button.getElement(), 'normal-resting');
    // Safari 3 adds style="-webkit-user-select" to the strong tag, so we
    // can't simply look at the HTML.
    const content = button.getContentElement();
    assertEquals(
        'Unexpected number of child nodes; expected existing number ' +
            'plus one for the dropdown element',
        4, content.childNodes.length);
    assertEquals('Unexpected tag', 'STRONG', content.childNodes[0].tagName);
    assertEquals(
        'Unexpected text content', 'Hello Strong',
        content.childNodes[0].innerHTML);
    assertEquals('Unexpected tag', 'EM', content.childNodes[2].tagName);
    assertEquals(
        'Unexpected text content', 'Box', content.childNodes[2].innerHTML);
  },

  testDecoratedButtonWithMenu() {
    button.decorate(dom.getElement('button-with-menu'));
    assertEquals('Unexpected number of menu items', 2, button.getItemCount());
    style.assertStructureMatchesReference(
        button.getElement(), 'normal-resting');
    assertFalse(
        'Expected menu element to not be contained by button',
        dom.contains(button.getElement(), button.getMenu().getElement()));
  },

  testDropDownExistsAfterButtonRename() {
    button.decorate(dom.getElement('button-2'));
    button.setContent('New title');
    style.assertStructureMatchesReference(
        button.getElement(), 'normal-resting');
    assertEquals(
        'Unexpected number of child nodes; expected text element ' +
            'and the dropdown element',
        2, button.getContentElement().childNodes.length);
    assertEquals('New title', button.getContentElement().firstChild.nodeValue);
    assertEquals(
        'Click for Decorated', button.getElement().getAttribute('title'));
  },
});