goog.ui.palette_test.js Maven / Gradle / Ivy

Go to download
Show more of this group Show more artifacts with this name
Show all versions of google-closure-library
The Google Closure Library is a collection of JavaScript code designed for use with the Google Closure JavaScript Compiler. This non-official distribution was prepared by the ClojureScript team at http://clojure.org/
There is a newer version: 0.0-20230227-c7c0a541
Show newest version
// Copyright 2012 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.PaletteTest');
goog.setTestOnly('goog.ui.PaletteTest');

goog.require('goog.a11y.aria');
goog.require('goog.dom');
goog.require('goog.events');
goog.require('goog.events.EventType');
goog.require('goog.events.KeyCodes');
goog.require('goog.events.KeyEvent');
goog.require('goog.testing.events.Event');
goog.require('goog.testing.jsunit');
goog.require('goog.testing.recordFunction');
goog.require('goog.ui.Component');
goog.require('goog.ui.Container');
goog.require('goog.ui.Palette');

var palette;
var nodes;

function setUp() {
  nodes = [];
  for (var i = 0; i < 23; i++) {
    var node = goog.dom.createTextNode('node[' + i + ']');
    nodes.push(node);
  }
  palette = new goog.ui.Palette(nodes);
}

function tearDown() {
  palette.dispose();
  goog.dom.removeChildren(document.getElementById('sandbox'));
}

function testAfterHighlightListener() {
  palette.setHighlightedIndex(0);
  var handler = new goog.testing.recordFunction();
  goog.events.listen(
      palette, goog.ui.Palette.EventType.AFTER_HIGHLIGHT, handler);
  palette.setHighlightedIndex(2);
  assertEquals(1, handler.getCallCount());
  palette.setHighlightedIndex(-1);
  assertEquals(2, handler.getCallCount());
}

function testHighlightItemUpdatesParentA11yActiveDescendant() {
  var container = new goog.ui.Container();
  container.render(document.getElementById('sandbox'));
  container.addChild(palette, true);

  palette.setHighlightedItem(nodes[0]);
  assertEquals(
      'Node 0 cell should be the container\'s active descendant',
      palette.getRenderer().getCellForItem(nodes[0]),
      goog.a11y.aria.getActiveDescendant(container.getElement()));

  palette.setHighlightedItem(nodes[1]);
  assertEquals(
      'Node 1 cell should be the container\'s active descendant',
      palette.getRenderer().getCellForItem(nodes[1]),
      goog.a11y.aria.getActiveDescendant(container.getElement()));

  palette.setHighlightedItem();
  assertNull(
      'Container should have no active descendant',
      goog.a11y.aria.getActiveDescendant(container.getElement()));

  container.dispose();
}

function testHighlightCellEvents() {
  var container = new goog.ui.Container();
  container.render(document.getElementById('sandbox'));
  container.addChild(palette, true);
  var renderer = palette.getRenderer();

  var events = [];
  var targetElements = [];
  var handleEvent = function(e) {
    events.push(e);
    targetElements.push(e.target.getElement());
  };
  palette.getHandler().listen(
      palette,
      [
        this, goog.ui.Component.EventType.HIGHLIGHT, this,
        goog.ui.Component.EventType.UNHIGHLIGHT
      ],
      handleEvent);

  // Test highlight events on first selection
  palette.setHighlightedItem(nodes[0]);
  assertEquals('Should have fired 1 event', 1, events.length);
  assertEquals(
      'HIGHLIGHT event should be fired', goog.ui.Component.EventType.HIGHLIGHT,
      events[0].type);
  assertEquals(
      'Event should be fired for node[0] cell',
      renderer.getCellForItem(nodes[0]), targetElements[0]);

  events = [];
  targetElements = [];

  // Only fire highlight events when there is a selection change
  palette.setHighlightedItem(nodes[0]);
  assertEquals('Should have fired 0 events', 0, events.length);

  // Test highlight events on cell change
  palette.setHighlightedItem(nodes[1]);
  assertEquals('Should have fired 2 events', 2, events.length);
  var unhighlightEvent = events.shift();
  var highlightEvent = events.shift();
  assertEquals(
      'UNHIGHLIGHT should be fired first',
      goog.ui.Component.EventType.UNHIGHLIGHT, unhighlightEvent.type);
  assertEquals(
      'UNHIGHLIGHT should be fired for node[0] cell',
      renderer.getCellForItem(nodes[0]), targetElements[0]);
  assertEquals(
      'HIGHLIGHT should be fired after UNHIGHLIGHT',
      goog.ui.Component.EventType.HIGHLIGHT, highlightEvent.type);
  assertEquals(
      'HIGHLIGHT should be fired for node[1] cell',
      renderer.getCellForItem(nodes[1]), targetElements[1]);

  events = [];
  targetElements = [];

  // Test highlight events when a cell is unselected
  palette.setHighlightedItem();

  assertEquals('Should have fired 1 event', 1, events.length);
  assertEquals(
      'UNHIGHLIGHT event should be fired',
      goog.ui.Component.EventType.UNHIGHLIGHT, events[0].type);
  assertEquals(
      'Event should be fired for node[1] cell',
      renderer.getCellForItem(nodes[1]), targetElements[0]);
}

function testHandleKeyEventLoops() {
  palette.setHighlightedIndex(0);
  var createKeyEvent = function(keyCode) {
    return new goog.events.KeyEvent(
        keyCode, 0 /* charCode */, false /* repeat */,
        new goog.testing.events.Event(goog.events.EventType.KEYDOWN));
  };
  palette.handleKeyEvent(createKeyEvent(goog.events.KeyCodes.LEFT));
  assertEquals(nodes.length - 1, palette.getHighlightedIndex());

  palette.handleKeyEvent(createKeyEvent(goog.events.KeyCodes.RIGHT));
  assertEquals(0, palette.getHighlightedIndex());
}

function testSetHighlight() {
  assertEquals(-1, palette.getHighlightedIndex());
  palette.setHighlighted(true);
  assertEquals(0, palette.getHighlightedIndex());

  palette.setHighlightedIndex(3);
  palette.setHighlighted(false);
  assertEquals(-1, palette.getHighlightedIndex());
  palette.setHighlighted(true);
  assertEquals(3, palette.getHighlightedIndex());

  palette.setHighlighted(false);
  palette.setHighlightedIndex(5);
  palette.setHighlighted(true);
  assertEquals(5, palette.getHighlightedIndex());
  palette.setHighlighted(true);
  assertEquals(5, palette.getHighlightedIndex());
}

function testPerformActionInternal() {
  var container = new goog.ui.Container();
  container.render(document.getElementById('sandbox'));
  container.addChild(palette, true);
  palette.setActive(true);
  palette.setSelectedIndex(1);
  palette.setHighlightedIndex(3);
  palette.setHighlighted(true);
  assertEquals(1, palette.getSelectedIndex());
  assertEquals(3, palette.getHighlightedIndex());

  // Click somewhere in the palette, but not inside a cell.
  var mouseUp = new goog.events.BrowserEvent(
      {type: 'mouseup', button: 1, target: palette});
  palette.handleMouseUp(mouseUp);

  // Highlight and selection are both unchanged (user did not select anything).
  assertEquals(1, palette.getSelectedIndex());
  assertEquals(3, palette.getHighlightedIndex());
}

function testSetAriaLabel() {
  assertNull(
      'Palette must not have aria label by default', palette.getAriaLabel());
  palette.setAriaLabel('My Palette');
  palette.render();
  var element = palette.getElementStrict();
  assertNotNull('Element must not be null', element);
  assertEquals(
      'Palette element must have expected aria-label', 'My Palette',
      element.getAttribute('aria-label'));
  assertEquals(
      'Palette element must have expected aria role', 'grid',
      element.getAttribute('role'));
  palette.setAriaLabel('My new Palette');
  assertEquals(
      'Palette element must have updated aria-label', 'My new Palette',
      element.getAttribute('aria-label'));
}