<!doctype html> <!– @license Copyright © 2015 The Polymer Project Authors. All rights reserved. This code may only be used under the BSD style license found at polymer.github.io/LICENSE.txt The complete set of authors may be found at polymer.github.io/AUTHORS.txt The complete set of contributors may be found at polymer.github.io/CONTRIBUTORS.txt Code distributed by Google as part of the polymer project is also subject to an additional IP rights grant found at polymer.github.io/PATENTS.txt –> <html>

<head>

  <title>paper-submenu tests</title>

  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1, user-scalable=yes">

  <script src="../../webcomponentsjs/webcomponents-lite.js"></script>

  <script src="../../web-component-tester/browser.js"></script>
  <script src="../../iron-test-helpers/mock-interactions.js"></script>

  <link rel="import" href="../../paper-item/paper-item.html">
  <link rel="import" href="../paper-menu.html">
  <link rel="import" href="../paper-submenu.html">

</head>
<style>
  paper-item {
    font-weight: normal;
  }
</style>
<body>

  <test-fixture id="basic">
    <template>
      <paper-menu>
        <paper-submenu>
          <paper-item class="menu-trigger">Topic 1</paper-item>
          <paper-menu class="menu-content">
            <paper-item>item 1.1</paper-item>
            <paper-item>item 1.2</paper-item>
            <paper-item>item 1.3</paper-item>
          </paper-menu>
        </paper-submenu>
        <paper-submenu>
          <paper-item class="menu-trigger">Topic 2</paper-item>
          <paper-menu class="menu-content">
            <paper-item>item 2.1</paper-item>
            <paper-item>item 2.2</paper-item>
            <paper-item>item 2.3</paper-item>
          </paper-menu>
        </paper-submenu>
        <paper-submenu disabled>
          <paper-item class="menu-trigger">Topic 3</paper-item>
          <paper-menu class="menu-content">
            <paper-item>item 3.1</paper-item>
            <paper-item>item 3.2</paper-item>
            <paper-item>item 3.3</paper-item>
          </paper-menu>
        </paper-submenu>
      </paper-menu>
    </template>
  </test-fixture>

  <script>

    suite('<paper-submenu>', function() {
      var menu,
          sub1, sub2, sub3,
          collapse1, collapse2, collapse3,
          trigger1, trigger2, trigger3;

      setup(function() {
        menu = fixture('basic');

        sub1 = menu.querySelectorAll('paper-submenu')[0];
        sub2 = menu.querySelectorAll('paper-submenu')[1];
        sub3 = menu.querySelectorAll('paper-submenu')[2];

        collapse1 = Polymer.dom(sub1.root).querySelector('iron-collapse');
        collapse2 = Polymer.dom(sub2.root).querySelector('iron-collapse');
        collapse3 = Polymer.dom(sub3.root).querySelector('iron-collapse');

        trigger1 = sub1.querySelector('.menu-trigger');
        trigger2 = sub2.querySelector('.menu-trigger');
        trigger3 = sub3.querySelector('.menu-trigger');
      });

      test('selecting an item expands the submenu', function() {
        assert.isFalse(collapse1.opened);
        assert.isFalse(collapse2.opened);
        assert.isFalse(collapse3.opened);

        MockInteractions.tap(trigger1);

        assert.isTrue(collapse1.opened);
        assert.isFalse(collapse2.opened);
        assert.isFalse(collapse3.opened);
      });

      test('selecting a different item closes the previously opened submenu', function() {
        assert.isFalse(collapse1.opened);
        assert.isFalse(collapse2.opened);
        assert.isFalse(collapse3.opened);

        MockInteractions.tap(trigger1);

        assert.isTrue(collapse1.opened);
        assert.isFalse(collapse2.opened);
        assert.isFalse(collapse3.opened);

        MockInteractions.tap(trigger2);

        assert.isFalse(collapse1.opened);
        assert.isTrue(collapse2.opened);
        assert.isFalse(collapse3.opened);
      });

      test('cannot open a disabled submenu', function() {
        assert.isFalse(collapse1.opened);
        assert.isFalse(collapse2.opened);
        assert.isFalse(collapse3.opened);

        MockInteractions.tap(trigger3);

        assert.isFalse(collapse1.opened);
        assert.isFalse(collapse2.opened);
        assert.isFalse(collapse3.opened);
      });

      test('selecting an item styles it and the parent', function() {
        var boldDiv = document.createElement('div');
        boldDiv.style.fontWeight = 'bold';
        document.body.appendChild(boldDiv);

        var normalDiv = document.createElement('div');
        normalDiv.style.fontWeight = 'normal';
        document.body.appendChild(normalDiv);

        assert.equal(getComputedStyle(trigger1).fontWeight, getComputedStyle(normalDiv).fontWeight);
        assert.equal(getComputedStyle(trigger2).fontWeight, getComputedStyle(normalDiv).fontWeight);
        assert.equal(getComputedStyle(trigger3).fontWeight, getComputedStyle(normalDiv).fontWeight);

        var item1 = sub1.querySelector('.menu-content').querySelector('paper-item');

        MockInteractions.tap(trigger1);
        // Nothing is initially selected.
        assert.equal(getComputedStyle(item1).fontWeight, getComputedStyle(normalDiv).fontWeight);
        MockInteractions.tap(item1);

        assert.equal(getComputedStyle(item1).fontWeight, getComputedStyle(boldDiv).fontWeight);
        assert.equal(getComputedStyle(trigger1).fontWeight, getComputedStyle(boldDiv).fontWeight);
        assert.equal(getComputedStyle(trigger2).fontWeight, getComputedStyle(normalDiv).fontWeight);
        assert.equal(getComputedStyle(trigger3).fontWeight, getComputedStyle(normalDiv).fontWeight);
      });

      test('selecting a new item de-styles the previous one', function() {
        var boldDiv = document.createElement('div');
        boldDiv.style.fontWeight = 'bold';
        document.body.appendChild(boldDiv);

        var normalDiv = document.createElement('div');
        normalDiv.style.fontWeight = 'normal';
        document.body.appendChild(normalDiv);

        assert.equal(getComputedStyle(trigger1).fontWeight, getComputedStyle(normalDiv).fontWeight);
        assert.equal(getComputedStyle(trigger2).fontWeight, getComputedStyle(normalDiv).fontWeight);
        assert.equal(getComputedStyle(trigger3).fontWeight, getComputedStyle(normalDiv).fontWeight);

        var item1 = sub1.querySelector('.menu-content').querySelector('paper-item');
        var item2 = sub2.querySelector('.menu-content').querySelector('paper-item');

        MockInteractions.tap(trigger1);
        MockInteractions.tap(item1);
        MockInteractions.tap(trigger2);
        MockInteractions.tap(item2);

        // Both children are still selected even though the first one is hidden.
        assert.equal(getComputedStyle(item1).fontWeight, getComputedStyle(boldDiv).fontWeight);
        assert.equal(getComputedStyle(item2).fontWeight, getComputedStyle(boldDiv).fontWeight);

        assert.equal(getComputedStyle(trigger1).fontWeight, getComputedStyle(normalDiv).fontWeight);
        assert.equal(getComputedStyle(trigger2).fontWeight, getComputedStyle(boldDiv).fontWeight);
        assert.equal(getComputedStyle(trigger3).fontWeight, getComputedStyle(normalDiv).fontWeight);
      });

      test('focus a submenu should redirect focus to the trigger', function(done) {
        MockInteractions.focus(sub1);
        flush(function() {
          assert.equal(sub1.shadowRoot ? sub1.shadowRoot.activeElement :
              document.activeElement, sub1.__trigger);
          done();
        });
      });
    });

  </script>

</body>

</html>