<!DOCTYPE html>
<html>

<head>
  <meta http-equiv="Expire" content="0" />
  <meta charset="utf-8">
  <title>select_test.html</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 type="text/javascript" src="test_bootstrap.js"></script>
  <script type="text/javascript" src="jquery.min.js"></script>
  <script type="text/javascript">
    goog.require('bot.action');
    goog.require('bot.locators');
    goog.require('bot.userAgent');
    goog.require('goog.array');
    goog.require('goog.events');
    goog.require('goog.userAgent');
  </script>
  <script type="text/javascript">
    var singleSelect, multiSelect, radioButtons, checkboxes, changeCount;
    var gotPointerCaptureCount, lostPointerCaptureCount;

    function checkActionCompatibility(action) {
      if (action == bot.action.tap) {
        return bot.events.SUPPORTS_TOUCH_EVENTS;
      }
      return true;
    }

    function expectChanges(target) {
      changeCount = 0;
      goog.events.listen(target, 'change', function (e) {
        changeCount++;
      });
    }

    function assertChanges(assert, expectedCount) {
      assert.strictEqual(changeCount, expectedCount, 'Unexpected number of changes');
    }

    function expectPointerCaptures(target) {
      gotPointerCaptureCount = 0;
      lostPointerCaptureCount = 0;
      goog.events.listen(target, goog.events.EventType.MSGOTPOINTERCAPTURE,
        function (e) {
          gotPointerCaptureCount++;
        });
      goog.events.listen(target, goog.events.EventType.MSLOSTPOINTERCAPTURE,
        function (e) {
          lostPointerCaptureCount++;
        });
    }

    function assertPointerCaptures(assert, expectedCount) {
      assert.strictEqual(gotPointerCaptureCount, expectedCount, 'Unexpected number of got captures');
      assert.strictEqual(lostPointerCaptureCount, expectedCount, 'Unexpected number of lost captures');
    }

    function firesChangeEventIfNotToggled() {
      if (goog.userAgent.product.CHROME && bot.userAgent.isProductVersion(45)) {
        return false;
      } else if (goog.userAgent.WEBKIT || bot.userAgent.IE_DOC_9 ||
        goog.userAgent.EDGE) {
        return true;
      }
      return false;
    }

    QUnit.testStart(function() {
      singleSelect = bot.locators.findElement({ id: 'singleSelect' });
      multiSelect = bot.locators.findElement({ id: 'multiSelect' });
      checkboxes = bot.locators.findElements({ name: 'checkbox' });
      radioButtons = bot.locators.findElements({ name: 'radio' });

      goog.events.removeAll(singleSelect);
      goog.events.removeAll(multiSelect);
      for (var i = 0; i < checkboxes.length; ++i) {
        goog.events.removeAll(checkboxes[i]);
      }
      for (var i = 0; i < radioButtons.length; ++i) {
        goog.events.removeAll(radioButtons[i]);
      }
      singleSelect.selectedIndex = 0;
      goog.array.forEach(multiSelect.options, function (e) {
        e.selected = false;
      });
      goog.array.forEach(checkboxes, function (e) {
        e.checked = false;
      });
      goog.array.forEach(radioButtons, function (e) {
        e.checked = false;
      });
    });

    function canSelectAnOptionFromASingleSelect(assert, action) {
      if (!checkActionCompatibility(action)) {
        assert.ok(true, 'Action not supported, skipping');
        return;
      }
      assert.notOk(bot.dom.isSelected(singleSelect.options[1]));
      expectChanges(singleSelect);
      if (bot.userAgent.IE_DOC_10) {
        expectPointerCaptures(singleSelect);
      }
      action(singleSelect.options[1]);

      assertChanges(assert, 1);
      if (bot.userAgent.IE_DOC_10) {
        assertPointerCaptures(assert, 1);
      }
      assert.ok(bot.dom.isSelected(singleSelect.options[1]));
    }

    QUnit.test('click can select an option from a single select', function(assert) {
      canSelectAnOptionFromASingleSelect(assert, bot.action.click);
    });

    QUnit.test('tap can select an option from a single select', function(assert) {
      canSelectAnOptionFromASingleSelect(assert, bot.action.tap);
    });

    function cannotDeselectAnOptionFromASingleSelect(assert, action) {
      if (!checkActionCompatibility(action)) {
        assert.ok(true, 'Action not supported, skipping');
        return;
      }
      assert.ok(bot.dom.isSelected(singleSelect.options[0]));
      expectChanges(singleSelect);

      action(singleSelect.options[0]);

      assertChanges(assert, 0);
      assert.ok(bot.dom.isSelected(singleSelect.options[0]));
    }

    QUnit.test('click cannot deselect an option from a single select', function(assert) {
      cannotDeselectAnOptionFromASingleSelect(assert, bot.action.click);
    });

    QUnit.test('tap cannot deselect an option from a single select', function(assert) {
      cannotDeselectAnOptionFromASingleSelect(assert, bot.action.tap);
    });

    function cannotSelectAnOptionFromADisabledSelect(assert, action) {
      if (!checkActionCompatibility(action)) {
        assert.ok(true, 'Action not supported, skipping');
        return;
      }
      singleSelect.disabled = true;
      assert.notOk(bot.dom.isSelected(singleSelect.options[1]));
      expectChanges(singleSelect);

      action(singleSelect.options[1]);

      assertChanges(assert, 0);
      assert.notOk(bot.dom.isSelected(singleSelect.options[1]));
      singleSelect.disabled = false;
    }

    QUnit.test('click cannot select an option from a disabled select', function(assert) {
      cannotSelectAnOptionFromADisabledSelect(assert, bot.action.click);
    });

    QUnit.test('tap cannot select an option from a disabled select', function(assert) {
      cannotSelectAnOptionFromADisabledSelect(assert, bot.action.tap);
    });

    function canSelectAnEnabledOptionFromASelectWithADisabledOption(assert, action) {
      if (!checkActionCompatibility(action)) {
        assert.ok(true, 'Action not supported, skipping');
        return;
      }
      singleSelect.options[1].disabled = true;
      assert.notOk(bot.dom.isSelected(singleSelect.options[2]));
      expectChanges(singleSelect);

      action(singleSelect.options[2]);

      assertChanges(assert, 1);
      assert.ok(bot.dom.isSelected(singleSelect.options[2]));
      singleSelect.options[1].disabled = false;
    }

    QUnit.test('click can select an enabled option from a select with a disabled option', function(assert) {
      canSelectAnEnabledOptionFromASelectWithADisabledOption(assert, bot.action.click);
    });

    QUnit.test('tap can select an enabled option from a select with a disabled option', function(assert) {
      canSelectAnEnabledOptionFromASelectWithADisabledOption(assert, bot.action.tap);
    });

    function canToggleOptionsInAMultiSelect(assert, action) {
      if (!checkActionCompatibility(action)) {
        assert.ok(true, 'Action not supported, skipping');
        return;
      }
      multiSelect.options[0].selected = true;
      expectChanges(multiSelect);

      action(multiSelect.options[0]);
      action(multiSelect.options[1]);
      action(multiSelect.options[2]);

      assertChanges(assert, 3);
      assert.notOk(bot.dom.isSelected(multiSelect.options[0]));
      assert.ok(bot.dom.isSelected(multiSelect.options[1]));
      assert.ok(bot.dom.isSelected(multiSelect.options[2]));
    }

    QUnit.test('click can toggle options in a multi select', function(assert) {
      if (goog.userAgent.product.CHROME || goog.userAgent.product.SAFARI) {
        assert.ok(true, 'Skipping: disabled due to Chrome/Safari issues');
        return;
      }
      canToggleOptionsInAMultiSelect(assert, bot.action.click);
    });

    QUnit.test('tap can toggle options in a multi select', function(assert) {
      if (goog.userAgent.product.CHROME || goog.userAgent.product.SAFARI) {
        assert.ok(true, 'Skipping: disabled due to Chrome/Safari issues');
        return;
      }
      canToggleOptionsInAMultiSelect(assert, bot.action.tap);
    });

    function canToggleCheckboxes(assert, action) {
      if (!checkActionCompatibility(action)) {
        assert.ok(true, 'Action not supported, skipping');
        return;
      }
      checkboxes[0].checked = true;
      expectChanges(checkboxes[0]);
      action(checkboxes[0]);
      assertChanges(assert, 1);

      if (!bot.userAgent.IE_DOC_PRE9) {
        expectChanges(checkboxes[1]);
      }
      action(checkboxes[1]);
      assertChanges(assert, 1);

      expectChanges(checkboxes[2]);
      action(checkboxes[2]);
      assertChanges(assert, 1);

      assert.notOk(bot.dom.isSelected(checkboxes[0]));
      assert.ok(bot.dom.isSelected(checkboxes[1]));
      assert.ok(bot.dom.isSelected(checkboxes[2]));
    }

    QUnit.test('click can toggle checkboxes', function(assert) {
      canToggleCheckboxes(assert, bot.action.click);
    });

    QUnit.test('tap can toggle checkboxes', function(assert) {
      canToggleCheckboxes(assert, bot.action.tap);
    });

    function canSelectRadioButtons(assert, action) {
      if (!checkActionCompatibility(action)) {
        assert.ok(true, 'Action not supported, skipping');
        return;
      }
      expectChanges(radioButtons[0]);
      action(radioButtons[0]);
      assertChanges(assert, 1);

      assert.ok(bot.dom.isSelected(radioButtons[0]));

      if (!bot.userAgent.IE_DOC_PRE9) {
        expectChanges(radioButtons[1]);
      }
      action(radioButtons[1]);
      assertChanges(assert, 1);
      assert.ok(bot.dom.isSelected(radioButtons[1]));

      expectChanges(radioButtons[2]);
      action(radioButtons[2]);
      assertChanges(assert, 1);
      assert.ok(bot.dom.isSelected(radioButtons[2]));
    }

    QUnit.test('click can select radio buttons', function(assert) {
      canSelectRadioButtons(assert, bot.action.click);
    });

    QUnit.test('tap can select radio buttons', function(assert) {
      canSelectRadioButtons(assert, bot.action.tap);
    });

    function cannotDeselectRadioButtons(assert, action) {
      if (!checkActionCompatibility(action)) {
        assert.ok(true, 'Action not supported, skipping');
        return;
      }
      radioButtons[0].checked = true;
      expectChanges(radioButtons[0]);

      action(radioButtons[0]);
      assertChanges(assert, 0);
      assert.ok(bot.dom.isSelected(radioButtons[0]));
    }

    QUnit.test('click cannot deselect radio buttons', function(assert) {
      cannotDeselectRadioButtons(assert, bot.action.click);
    });

    QUnit.test('tap cannot deselect radio buttons', function(assert) {
      cannotDeselectRadioButtons(assert, bot.action.tap);
    });

    function cannotSelectDisabledElements(assert, action) {
      if (!checkActionCompatibility(action)) {
        assert.ok(true, 'Action not supported, skipping');
        return;
      }
      function assertCannotSelectWhenDisabled(elem, isOption) {
        elem.disabled = true;
        expectChanges(isOption ? elem.parentNode : elem);

        action(elem);

        assertChanges(assert, 0);
        assert.notOk(bot.dom.isSelected(elem));
        elem.disabled = false;
      }

      assertCannotSelectWhenDisabled(singleSelect.options[1], true);
      assertCannotSelectWhenDisabled(multiSelect.options[0], true);
      assertCannotSelectWhenDisabled(checkboxes[0], false);
      assertCannotSelectWhenDisabled(radioButtons[0], false);
    }

    QUnit.test('click cannot select disabled elements', function(assert) {
      cannotSelectDisabledElements(assert, bot.action.click);
    });

    QUnit.test('tap cannot select disabled elements', function(assert) {
      cannotSelectDisabledElements(assert, bot.action.tap);
    });

    function canSelectOptionWhenDefaultPrevented(assert, action) {
      if (!checkActionCompatibility(action)) {
        assert.ok(true, 'Action not supported, skipping');
        return;
      }
      function assertCanSelectWhenDefaultPrevented(elem) {
        goog.events.listen(elem, 'click', function (e) {
          e.preventDefault();
        });
        expectChanges(elem.parentNode);

        action(elem);

        assertChanges(assert, 1);
        assert.ok(bot.dom.isSelected(elem));
      }

      assertCanSelectWhenDefaultPrevented(singleSelect.options[1]);
      assertCanSelectWhenDefaultPrevented(multiSelect.options[0]);
    }

    QUnit.test('click can select option when default prevented', function(assert) {
      if (goog.userAgent.product.SAFARI) {
        assert.ok(true, 'Skipping: disabled on Safari');
        return;
      }
      canSelectOptionWhenDefaultPrevented(assert, bot.action.click);
    });

    QUnit.test('tap can select option when default prevented', function(assert) {
      if (goog.userAgent.product.CHROME || goog.userAgent.product.SAFARI) {
        assert.ok(true, 'Skipping: disabled due to Chrome/Safari issues');
        return;
      }
      canSelectOptionWhenDefaultPrevented(assert, bot.action.tap);
    });

    function cannotSelectCheckboxWhenDefaultPrevented(assert, action) {
      if (!checkActionCompatibility(action)) {
        assert.ok(true, 'Action not supported, skipping');
        return;
      }
      var elem = checkboxes[0];
      goog.events.listen(elem, 'click', function (e) {
        e.preventDefault();
      });
      expectChanges(elem);

      action(elem);

      assertChanges(assert, firesChangeEventIfNotToggled() ? 1 : 0);
      assert.notOk(bot.dom.isSelected(elem));
    }

    QUnit.test('click cannot select checkbox when default prevented', function(assert) {
      cannotSelectCheckboxWhenDefaultPrevented(assert, bot.action.click);
    });

    QUnit.test('tap cannot select checkbox when default prevented', function(assert) {
      cannotSelectCheckboxWhenDefaultPrevented(assert, bot.action.tap);
    });

    function maybeSelectRadioButtonWhenDefaultPrevented(assert, action) {
      if (!checkActionCompatibility(action)) {
        assert.ok(true, 'Action not supported, skipping');
        return;
      }
      var elem = radioButtons[0];
      goog.events.listen(elem, 'click', function (e) {
        e.preventDefault();
      });
      expectChanges(elem);

      action(elem);

      if ((goog.userAgent.product.CHROME &&
        !bot.userAgent.isProductVersion(39)) ||
        (goog.userAgent.WEBKIT && !goog.userAgent.product.CHROME)) {
        assertChanges(assert, 1);
        assert.ok(bot.dom.isSelected(elem));
      } else {
        assertChanges(assert, firesChangeEventIfNotToggled() ? 1 : 0);
        assert.notOk(bot.dom.isSelected(elem));
      }
    }

    QUnit.test('click maybe select radio button when default prevented', function(assert) {
      maybeSelectRadioButtonWhenDefaultPrevented(assert, bot.action.click);
    });

    QUnit.test('tap maybe select radio button when default prevented', function(assert) {
      maybeSelectRadioButtonWhenDefaultPrevented(assert, bot.action.tap);
    });

    function canSelectOptionFromTransparentSelect(assert, action) {
      if (!checkActionCompatibility(action)) {
        assert.ok(true, 'Action not supported, skipping');
        return;
      }
      var style = singleSelect.style;
      style['opacity'] = '0';
      style['filter'] = 'alpha(opacity=0)';
      assert.strictEqual(bot.dom.getOpacity(singleSelect), 0);
      assert.notOk(bot.dom.isSelected(singleSelect.options[1]));
      expectChanges(singleSelect);

      bot.action.click(singleSelect.options[1]);

      assertChanges(assert, 1);
      assert.ok(bot.dom.isSelected(singleSelect.options[1]));
      style['opacity'] = '';
      style['filter'] = '';
      assert.strictEqual(bot.dom.getOpacity(singleSelect), 1);
    }

    QUnit.test('click can select option from transparent select', function(assert) {
      canSelectOptionFromTransparentSelect(assert, bot.action.click);
    });

    QUnit.test('tap can select option from transparent select', function(assert) {
      canSelectOptionFromTransparentSelect(assert, bot.action.tap);
    });

    function noErrorAfterSelectWhenOnChangePreventsDefault(assert, action) {
      if (!checkActionCompatibility(action) ||
        (goog.userAgent.IE && !bot.userAgent.isProductVersion(7))) {
        assert.ok(true, 'Skipping: not supported');
        return;
      }
      goog.events.listen(radioButtons[1], 'change', function (e) {
        e.preventDefault();
      });
      action(radioButtons[1]);
      assert.ok(bot.dom.isSelected(radioButtons[1]));

      action(radioButtons[2]);
      assert.ok(true);
    }

    QUnit.test('click no error after select when on change prevents default', function(assert) {
      noErrorAfterSelectWhenOnChangePreventsDefault(assert, bot.action.click);
    });

    QUnit.test('tap no error after select when on change prevents default', function(assert) {
      noErrorAfterSelectWhenOnChangePreventsDefault(assert, bot.action.tap);
    });

    function selectOptionTriggersJQueryChangeHandler(assert, action) {
      if (!checkActionCompatibility(action)) {
        assert.ok(true, 'Action not supported, skipping');
        return;
      }
      var changes = 0;
      $('#singleSelect').change(function () {
        changes++;
      });

      action(singleSelect.options[1]);

      assert.strictEqual(changes, 1);
      $('#singleSelect').unbind();
    }

    QUnit.test('click select option triggers jQuery change handler', function(assert) {
      selectOptionTriggersJQueryChangeHandler(assert, bot.action.click);
    });

    QUnit.test('tap select option triggers jQuery change handler', function(assert) {
      selectOptionTriggersJQueryChangeHandler(assert, bot.action.tap);
    });

    function pointerCaptureFiresOnCheckboxToggle(assert, action) {
      if (!bot.userAgent.IE_DOC_10) {
        assert.ok(true, 'Skipping: only for IE10');
        return;
      }
      checkboxes[0].checked = true;
      expectPointerCaptures(checkboxes[0]);
      action(checkboxes[0]);
      if (action == bot.action.tap) {
        assertPointerCaptures(assert, 1);
      } else {
        assertPointerCaptures(assert, 0);
      }
      assert.notOk(bot.dom.isSelected(checkboxes[0]));
    }

    QUnit.test('click pointer capture fires on checkbox toggle', function(assert) {
      pointerCaptureFiresOnCheckboxToggle(assert, bot.action.click);
    });

    QUnit.test('tap pointer capture fires on checkbox toggle', function(assert) {
      pointerCaptureFiresOnCheckboxToggle(assert, bot.action.tap);
    });

    function togglesByTheTimeChangeEventFires(assert, action) {
      if (!checkActionCompatibility(action)) {
        assert.ok(true, 'Action not supported, skipping');
        return;
      }

      singleSelect.options[0].selected = true;
      checkToggleAtChange(action, singleSelect, singleSelect.options[1]);

      multiSelect.options[0].selected = false;
      checkToggleAtChange(action, multiSelect, multiSelect.options[0]);

      radioButtons[0].checked = false;
      checkToggleAtChange(action, radioButtons[0], radioButtons[0]);

      checkboxes[0].checked = false;
      checkToggleAtChange(action, checkboxes[0], checkboxes[0]);

      function checkToggleAtChange(action, targetElem, toggleElem) {
        var preState = bot.dom.isSelected(toggleElem);
        var postState = null;
        goog.events.listen(targetElem, 'change', function (e) {
          postState = bot.dom.isSelected(toggleElem);
        });
        action(toggleElem);
        assert.ok(postState !== null, 'change event did not fire');
        assert.notStrictEqual(postState, preState, 'element did not toggle');
      }
    }

    QUnit.test('click toggles by the time change event fires', function(assert) {
      if (goog.userAgent.product.SAFARI) {
        assert.ok(true, 'Skipping: disabled on Safari');
        return;
      }
      togglesByTheTimeChangeEventFires(assert, bot.action.click);
    });

    QUnit.test('tap toggles by the time change event fires', function(assert) {
      if (goog.userAgent.product.CHROME || goog.userAgent.product.SAFARI) {
        assert.ok(true, 'Skipping: disabled due to Chrome/Safari issues');
        return;
      }
      togglesByTheTimeChangeEventFires(assert, bot.action.tap);
    });
  </script>
</head>

<body>
  <div id="qunit"></div>
  <div id="qunit-fixture"></div>
  <form action="#" method="get">
    <select id="singleSelect">
      <option id="singleOption1" value="foo">foo</option>
      <option id="singleOption2" value="bar">bar</option>
      <option id="singleOption3" value="baz">baz</option>
    </select>
    <br>
    <select id="multiSelect" multiple>
      <option id="multiOption1" value="apples">apples</option>
      <option id="multiOption2" value="oranges">oranges</option>
      <option id="multiOption3" value="cherries">cherries</option>
    </select>
    <br>
    <input type="checkbox" name="checkbox" value="peas">peas
    <input type="checkbox" name="checkbox" value="spinach">spinach
    <input type="checkbox" name="checkbox" value="broccoli">broccoli
    <br>
    <input type="radio" name="radio" value="cheese">cheese
    <input type="radio" name="radio" value="water">water
    <input type="radio" name="radio" value="bread">bread
  </form>
</body>

</html>