javascript/atoms/test/toolbar_test.html

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>bot.action + editor test</title>
  <link rel="stylesheet" href="/filez/_main/third_party/js/qunit/qunit.css">
  <script src="/filez/_main/third_party/js/qunit/qunit.js"></script>
  <script src="/filez/_main/third_party/js/qunit/qunit_test_runner.js"></script>
  <script src="test_bootstrap.js"></script>
  <script type="text/javascript">
    goog.require('bot.action');
    goog.require('bot.locators');
    goog.require('goog.dom');
    goog.require('goog.color');
    goog.require('goog.events');
    goog.require('goog.ui.Component.EventType');
    goog.require('goog.ui.editor.DefaultToolbar');

    function addStyleSheet(path) {
      document.write(
          '<link rel="stylesheet" href="' + goog.basePath + path + '"/>');
    }
    addStyleSheet('demos/css/demo.css');
    addStyleSheet('css/toolbar.css');
    addStyleSheet('css/colormenubutton.css');
    addStyleSheet('css/palette.css');
    addStyleSheet('css/colorpalette.css');
    addStyleSheet('css/editortoolbar.css');
  </script>
</head>
<body>
<div id="qunit"></div>
<div id="qunit-fixture"></div>
<div id='toolbar' style='width:602px'></div>

  <script type="text/javascript">
  var toolbar = goog.ui.editor.DefaultToolbar.makeToolbar([
    goog.editor.Command.BACKGROUND_COLOR,
  ], goog.dom.getElement('toolbar'));
  var bgColorMenu = toolbar.getChildAt(0);

  QUnit.test('can interact with colorbutton menu toolbar is focusable', function(assert) {
    toolbar.setFocusable(true);
    runColorButtonMenuInteractionTest(assert);
  });

  QUnit.test('can interact with colorbutton menu toolbar not is focusable', function(assert) {
    toolbar.setFocusable(false);
    runColorButtonMenuInteractionTest(assert);
  });

  function runColorButtonMenuInteractionTest(assert) {
    bgColorMenu.setValue('#FFF');

    bot.action.click(bgColorMenu.getElement());
    assert.ok(bgColorMenu.isOpen(), 'Menu not opened');

    var actionFired = false;
    goog.events.listenOnce(toolbar, goog.ui.Component.EventType.ACTION,
        function(e) {
      actionFired = true;
    });

    bot.action.click(getRedSwatch(assert));

    assert.ok(actionFired, 'Action event not fired!');
  }

  function getRedSwatch(assert) {
    var colorMenu = bgColorMenu.getMenu();
    var solidPalette = colorMenu.getChildAt(1);

    var redSwatch = bot.locators.findElement(
        {className: 'goog-palette-colorswatch'},
        solidPalette.getElement());
    assert.ok(redSwatch !== null, 'Red swatch should not be null');

    var color = bot.dom.getEffectiveStyle(redSwatch, 'background-color');
    assert.strictEqual(color, 'rgba(255, 0, 0, 1)');
    return redSwatch;
  }
  </script>
</body>
</html>