<!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>focused-state</title>

<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="test-elements.html">

</head> <body>

<test-fixture id="TrivialFocusedState">
  <template>
    <test-control tabindex="-1"></test-control>
  </template>
</test-fixture>

<test-fixture id="NestedFocusedState">
  <template>
    <nested-focusable></nested-focusable>
  </template>
</test-fixture>

<test-fixture id="LightDOM">
  <template>
    <test-light-dom>
      <input id="input">
      <nested-focusable></nested-focusable>
    </test-light-dom>
  </template>
</test-fixture>

<script>
  suite('focused-state', function() {
    var focusTarget;

    setup(function() {
      focusTarget = fixture('TrivialFocusedState');
    });

    suite('when is focused', function() {
      test('receives a focused attribute', function() {
        expect(focusTarget.hasAttribute('focused')).to.be.eql(false);
        MockInteractions.focus(focusTarget);
        expect(focusTarget.hasAttribute('focused')).to.be.eql(true);
      });

      test('focused property is true', function() {
        expect(focusTarget.focused).to.not.be.eql(true);
        MockInteractions.focus(focusTarget);
        expect(focusTarget.focused).to.be.eql(true);
      });
    });

    suite('when is blurred', function() {
      test('loses the focused attribute', function() {
        MockInteractions.focus(focusTarget);
        expect(focusTarget.hasAttribute('focused')).to.be.eql(true);
        MockInteractions.blur(focusTarget);
        expect(focusTarget.hasAttribute('focused')).to.be.eql(false);
      });

      test('focused property is false', function() {
        MockInteractions.focus(focusTarget);
        expect(focusTarget.focused).to.be.eql(true);
        MockInteractions.blur(focusTarget);
        expect(focusTarget.focused).to.be.eql(false);
      });
    });

    suite('when the focused state is disabled', function() {
      test('will not be focusable', function() {
        var blurSpy = sinon.spy(focusTarget, 'blur');
        MockInteractions.focus(focusTarget);
        focusTarget.disabled = true;
        expect(focusTarget.getAttribute('tabindex')).to.be.eql('-1');
        expect(blurSpy.called).to.be.eql(true);
      });
    });
  });

  suite('nested focusable', function() {
    var focusable;

    setup(function() {
      focusable = fixture('NestedFocusedState');
    });

    test('focus/blur events fired on host element', function() {
      var nFocusEvents = 0;
      var nBlurEvents = 0;

      focusable.addEventListener('focus', function() {
        nFocusEvents += 1;
        expect(focusable.focused).to.be.equal(true);
        MockInteractions.blur(focusable.$.input);
      });
      focusable.addEventListener('blur', function() {
        expect(focusable.focused).to.be.equal(false);
        nBlurEvents += 1;
      });

      MockInteractions.focus(focusable.$.input);

      expect(nBlurEvents).to.be.greaterThan(0);
      expect(nFocusEvents).to.be.greaterThan(0);
    });

  });

  suite('elements in the light dom', function() {
    var lightDOM, input, lightDescendantShadowInput;

    setup(function() {
      lightDOM = fixture('LightDOM');
      input = document.querySelector('#input');
      lightDescendantShadowInput = Polymer.dom(lightDOM)
          .querySelector('nested-focusable').$.input;
    });

    test('should not fire the focus event', function() {
      var nFocusEvents = 0;

      lightDOM.addEventListener('focus', function() {
        nFocusEvents += 1;
      });

      MockInteractions.focus(input);

      expect(nFocusEvents).to.be.equal(0);
    });

    test('should not fire the focus event from shadow descendants', function() {
      var nFocusEvents = 0;

      lightDOM.addEventListener('focus', function() {
        nFocusEvents += 1;
      });

      MockInteractions.focus(lightDescendantShadowInput);

      expect(nFocusEvents).to.be.equal(0);
    });

  });

</script>

</body> </html>