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

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

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

const Component = goog.require('goog.ui.Component');
const SelectionMenuButton = goog.require('goog.ui.SelectionMenuButton');
const dom = goog.require('goog.dom');
const events = goog.require('goog.events');
const testSuite = goog.require('goog.testing.testSuite');
const testingEvents = goog.require('goog.testing.events');

let selectionMenuButton;
let clonedSelectionMenuButtonDom;

testSuite({
  setUp() {
    clonedSelectionMenuButtonDom =
        dom.getElement('demoSelectionMenuButton').cloneNode(true);

    selectionMenuButton = new SelectionMenuButton();
  },

  tearDown() {
    selectionMenuButton.dispose();

    const element = dom.getElement('demoSelectionMenuButton');
    element.parentNode.replaceChild(clonedSelectionMenuButtonDom, element);
  },

  /** Open the menu and click on the menu item inside. */
  testBasicButtonBehavior() {
    const node = dom.getElement('demoSelectionMenuButton');
    selectionMenuButton.decorate(node);
    testingEvents.fireClickSequence(node);

    assertTrue('Menu must open after click', selectionMenuButton.isOpen());

    let menuItemClicked = 0;
    let lastMenuItemClicked = null;
    events.listen(
        selectionMenuButton.getMenu(), Component.EventType.ACTION, (e) => {
          menuItemClicked++;
          lastMenuItemClicked = e.target;
        });

    const menuItem2 = dom.getElement('menuItem2');
    testingEvents.fireClickSequence(menuItem2);
    assertFalse(
        'Menu must close on clicking when open', selectionMenuButton.isOpen());
    assertEquals(
        'Number of menu items clicked should be 1', 1, menuItemClicked);
    assertEquals(
        'menuItem2 should be the last menuitem clicked', menuItem2,
        lastMenuItemClicked.getElement());
  },

  /**
     Tests that the checkbox fires the same events as the first 2 items.
     @suppress {strictMissingProperties} suppression added to enable type
     checking
   */
  testCheckboxFireEvents() {
    const node = dom.getElement('demoSelectionMenuButton');
    selectionMenuButton.decorate(node);

    let menuItemClicked = 0;
    let lastMenuItemClicked = null;
    events.listen(
        selectionMenuButton.getMenu(), Component.EventType.ACTION, (e) => {
          menuItemClicked++;
          lastMenuItemClicked = e.target;
        });

    const checkbox = dom.getElement('demoCheckbox');
    assertFalse(
        'Checkbox must be unchecked (i.e. unselected)', checkbox.checked);

    /**
     * @suppress {strictMissingProperties} suppression added to enable type
     * checking
     */
    checkbox.checked = true;
    testingEvents.fireClickSequence(checkbox);
    assertFalse(
        'Menu must be closed when clicking checkbox',
        selectionMenuButton.isOpen());
    assertEquals(
        'Number of menu items clicked should be 1', 1, menuItemClicked);
    assertEquals(
        'menuItem1 should be the last menuitem clicked',
        dom.getElement('menuItem1'), lastMenuItemClicked.getElement());

    /**
     * @suppress {strictMissingProperties} suppression added to enable type
     * checking
     */
    checkbox.checked = false;
    testingEvents.fireClickSequence(checkbox);
    assertFalse(
        'Menu must be closed when clicking checkbox',
        selectionMenuButton.isOpen());
    assertEquals(
        'Number of menu items clicked should be 2', 2, menuItemClicked);
    assertEquals(
        'menuItem2 should be the last menuitem clicked',
        dom.getElement('menuItem2'), lastMenuItemClicked.getElement());
  },

  /**
     Tests that the checkbox state gets updated when the first 2 events fire
     @suppress {strictMissingProperties} suppression added to enable type
     checking
   */
  testCheckboxReceiveEvents() {
    const node = dom.getElement('demoSelectionMenuButton');
    selectionMenuButton.decorate(node);

    const checkbox = dom.getElement('demoCheckbox');
    assertFalse(
        'Checkbox must be unchecked (i.e. unselected)', checkbox.checked);

    testingEvents.fireClickSequence(dom.getElement('menuItem1'));
    assertTrue('Checkbox must be checked (i.e. selected)', checkbox.checked);

    testingEvents.fireClickSequence(dom.getElement('menuItem2'));
    assertFalse(
        'Checkbox must be unchecked (i.e. unselected)', checkbox.checked);
  },

  /**
     Tests that set/getSelectionState correctly changes the state
     @suppress {strictMissingProperties} suppression added to enable type
     checking
   */
  testSelectionState() {
    const node = dom.getElement('demoSelectionMenuButton');
    selectionMenuButton.decorate(node);

    const checkbox = dom.getElement('demoCheckbox');
    assertFalse(
        'Checkbox must be unchecked (i.e. unselected)', checkbox.checked);

    selectionMenuButton.setSelectionState(
        SelectionMenuButton.SelectionState.ALL);
    assertTrue(
        'Checkbox should be checked when selecting all', checkbox.checked);
    assertEquals(
        'selectionState should be ALL', selectionMenuButton.getSelectionState(),
        SelectionMenuButton.SelectionState.ALL);

    selectionMenuButton.setSelectionState(
        SelectionMenuButton.SelectionState.NONE);
    assertFalse(
        'Checkbox should be checked when selecting all', checkbox.checked);
    assertEquals(
        'selectionState should be NONE',
        selectionMenuButton.getSelectionState(),
        SelectionMenuButton.SelectionState.NONE);

    selectionMenuButton.setSelectionState(
        SelectionMenuButton.SelectionState.SOME);
    assertTrue(
        'Checkbox should be checked when selecting all', checkbox.checked);
    assertEquals(
        'selectionState should be SOME',
        selectionMenuButton.getSelectionState(),
        SelectionMenuButton.SelectionState.SOME);
  },

  /**
     Tests that the checkbox gets disabled when the button is disabled
     @suppress {strictMissingProperties} suppression added to enable type
     checking
   */
  testCheckboxDisabled() {
    const node = dom.getElement('demoSelectionMenuButton');
    selectionMenuButton.decorate(node);

    const checkbox = dom.getElement('demoCheckbox');
    assertFalse('Checkbox must be enabled', checkbox.disabled);

    selectionMenuButton.setEnabled(false);
    assertTrue('Checkbox must be disabled', checkbox.disabled);

    selectionMenuButton.setEnabled(true);
    assertFalse('Checkbox must be enabled', checkbox.disabled);
  },

  /** Tests that clicking the checkbox does not open the menu */
  testCheckboxClickMenuClosed() {
    const node = dom.getElement('demoSelectionMenuButton');
    selectionMenuButton.decorate(node);

    const checkbox = dom.getElement('demoCheckbox');
    testingEvents.fireMouseDownEvent(checkbox);
    assertFalse(
        'Menu must be closed when mousedown checkbox',
        selectionMenuButton.isOpen());
    testingEvents.fireMouseUpEvent(checkbox);
    assertFalse(
        'Menu must remain closed when mouseup checkbox',
        selectionMenuButton.isOpen());

    selectionMenuButton.setOpen(true);
    testingEvents.fireClickSequence(checkbox);
    assertFalse(
        'Menu must close when clickin checkbox', selectionMenuButton.isOpen());
  },
});