• Home
  • Line#
  • Scopes#
  • Navigate#
  • Raw
  • Download
1<!doctype html>
2<!--
3@license
4Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
5This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
6The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
7The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
8Code distributed by Google as part of the polymer project is also
9subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
10-->
11<html>
12<head>
13  <title>focused-state</title>
14
15  <script src="../../webcomponentsjs/webcomponents-lite.js"></script>
16  <script src="../../web-component-tester/browser.js"></script>
17  <script src="../../iron-test-helpers/mock-interactions.js"></script>
18  <link rel="import" href="test-elements.html">
19</head>
20<body>
21
22  <test-fixture id="TrivialFocusedState">
23    <template>
24      <test-control tabindex="-1"></test-control>
25    </template>
26  </test-fixture>
27
28  <test-fixture id="NestedFocusedState">
29    <template>
30      <nested-focusable></nested-focusable>
31    </template>
32  </test-fixture>
33
34  <test-fixture id="LightDOM">
35    <template>
36      <test-light-dom>
37        <input id="input">
38        <nested-focusable></nested-focusable>
39      </test-light-dom>
40    </template>
41  </test-fixture>
42
43  <script>
44    suite('focused-state', function() {
45      var focusTarget;
46
47      setup(function() {
48        focusTarget = fixture('TrivialFocusedState');
49      });
50
51      suite('when is focused', function() {
52        test('receives a focused attribute', function() {
53          expect(focusTarget.hasAttribute('focused')).to.be.eql(false);
54          MockInteractions.focus(focusTarget);
55          expect(focusTarget.hasAttribute('focused')).to.be.eql(true);
56        });
57
58        test('focused property is true', function() {
59          expect(focusTarget.focused).to.not.be.eql(true);
60          MockInteractions.focus(focusTarget);
61          expect(focusTarget.focused).to.be.eql(true);
62        });
63      });
64
65      suite('when is blurred', function() {
66        test('loses the focused attribute', function() {
67          MockInteractions.focus(focusTarget);
68          expect(focusTarget.hasAttribute('focused')).to.be.eql(true);
69          MockInteractions.blur(focusTarget);
70          expect(focusTarget.hasAttribute('focused')).to.be.eql(false);
71        });
72
73        test('focused property is false', function() {
74          MockInteractions.focus(focusTarget);
75          expect(focusTarget.focused).to.be.eql(true);
76          MockInteractions.blur(focusTarget);
77          expect(focusTarget.focused).to.be.eql(false);
78        });
79      });
80
81      suite('when the focused state is disabled', function() {
82        test('will not be focusable', function() {
83          var blurSpy = sinon.spy(focusTarget, 'blur');
84          MockInteractions.focus(focusTarget);
85          focusTarget.disabled = true;
86          expect(focusTarget.getAttribute('tabindex')).to.be.eql('-1');
87          expect(blurSpy.called).to.be.eql(true);
88        });
89      });
90    });
91
92    suite('nested focusable', function() {
93      var focusable;
94
95      setup(function() {
96        focusable = fixture('NestedFocusedState');
97      });
98
99      test('focus/blur events fired on host element', function() {
100        var nFocusEvents = 0;
101        var nBlurEvents = 0;
102
103        focusable.addEventListener('focus', function() {
104          nFocusEvents += 1;
105          expect(focusable.focused).to.be.equal(true);
106          MockInteractions.blur(focusable.$.input);
107        });
108        focusable.addEventListener('blur', function() {
109          expect(focusable.focused).to.be.equal(false);
110          nBlurEvents += 1;
111        });
112
113        MockInteractions.focus(focusable.$.input);
114
115        expect(nBlurEvents).to.be.greaterThan(0);
116        expect(nFocusEvents).to.be.greaterThan(0);
117      });
118
119    });
120
121
122    suite('elements in the light dom', function() {
123      var lightDOM, input, lightDescendantShadowInput;
124
125      setup(function() {
126        lightDOM = fixture('LightDOM');
127        input = document.querySelector('#input');
128        lightDescendantShadowInput = Polymer.dom(lightDOM)
129            .querySelector('nested-focusable').$.input;
130      });
131
132      test('should not fire the focus event', function() {
133        var nFocusEvents = 0;
134
135        lightDOM.addEventListener('focus', function() {
136          nFocusEvents += 1;
137        });
138
139        MockInteractions.focus(input);
140
141        expect(nFocusEvents).to.be.equal(0);
142      });
143
144      test('should not fire the focus event from shadow descendants', function() {
145        var nFocusEvents = 0;
146
147        lightDOM.addEventListener('focus', function() {
148          nFocusEvents += 1;
149        });
150
151        MockInteractions.focus(lightDescendantShadowInput);
152
153        expect(nFocusEvents).to.be.equal(0);
154      });
155
156    });
157
158  </script>
159
160</body>
161</html>
162