openlayers/mapbox-gl/closure-library/closure/goog/ui/palette_test.js

// 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();
  document.getElementById('sandbox').innerHTML = '';
}

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 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'));
}