← Back to branch summary

~didrocks/+junk/face-detection-15.04

« back to all changes in this revision

Viewing changes to facedetection/www/bower_components/iron-behaviors/test/active-state.html

  • Committer: Didier Roche
  • Date: 2016-05-10 23:09:11 UTC
  • Revision ID: didier.roche@canonical.com-20160510230911-c7xr490zrj3yrzxd
New version

Show diffs side-by-side

added added

removed removed

Lines of Context:
facedetection/www/bower_components/iron-behaviors/test/active-state.html
 
1
<!doctype html>
 
2
<!--
 
3
Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
 
4
This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
 
5
The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
 
6
The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
 
7
Code distributed by Google as part of the polymer project is also
 
8
subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
 
9
-->
 
10
<html>
 
11
<head>
 
12
  <title>active-state</title>
 
13
 
 
14
  <script src="../../webcomponentsjs/webcomponents-lite.js"></script>
 
15
  <script src="../../web-component-tester/browser.js"></script>
 
16
  <script src="../../iron-test-helpers/mock-interactions.js"></script>
 
17
  <link rel="import" href="test-elements.html">
 
18
  <link rel="import" href="../../paper-input/paper-input.html">
 
19
</head>
 
20
<body>
 
21
  <test-fixture id="TrivialActiveState">
 
22
    <template>
 
23
      <test-button></test-button>
 
24
    </template>
 
25
  </test-fixture>
 
26
 
 
27
  <test-fixture id="ToggleActiveState">
 
28
    <template>
 
29
      <test-button toggles></test-button>
 
30
    </template>
 
31
  </test-fixture>
 
32
 
 
33
  <test-fixture id="ButtonWithNativeInput">
 
34
    <template>
 
35
      <test-light-dom><input id="input"></test-light-dom>
 
36
    </template>
 
37
  </test-fixture>
 
38
 
 
39
  <test-fixture id="ButtonWithPaperInput">
 
40
    <template>
 
41
      <test-light-dom><paper-input id="input"></paper-input></test-light-dom>
 
42
    </template>
 
43
  </test-fixture>
 
44
 
 
45
  <script>
 
46
    suite('active-state', function() {
 
47
      var activeTarget;
 
48
 
 
49
      setup(function() {
 
50
        activeTarget = fixture('TrivialActiveState');
 
51
      });
 
52
 
 
53
      suite('active state with toggles attribute', function() {
 
54
        setup(function() {
 
55
          activeTarget = fixture('ToggleActiveState');
 
56
        });
 
57
 
 
58
        suite('when down', function() {
 
59
          test('is pressed', function() {
 
60
            MockInteractions.down(activeTarget);
 
61
            expect(activeTarget.hasAttribute('pressed')).to.be.eql(true);
 
62
          });
 
63
        });
 
64
 
 
65
        suite('when clicked', function() {
 
66
          test('is activated', function(done) {
 
67
            MockInteractions.downAndUp(activeTarget, function() {
 
68
              try {
 
69
                expect(activeTarget.hasAttribute('active')).to.be.eql(true);
 
70
                expect(activeTarget.hasAttribute('aria-pressed')).to.be.eql(true);
 
71
                expect(activeTarget.getAttribute('aria-pressed')).to.be.eql('true');
 
72
                done();
 
73
              } catch (e) {
 
74
                done(e);
 
75
              }
 
76
            });
 
77
          });
 
78
 
 
79
          test('is deactivated by a subsequent click', function(done) {
 
80
            MockInteractions.downAndUp(activeTarget, function() {
 
81
              MockInteractions.downAndUp(activeTarget, function() {
 
82
                try {
 
83
                  expect(activeTarget.hasAttribute('active')).to.be.eql(false);
 
84
                  expect(activeTarget.hasAttribute('aria-pressed')).to.be.eql(true);
 
85
                  expect(activeTarget.getAttribute('aria-pressed')).to.be.eql('false');
 
86
                  done();
 
87
                } catch (e) {
 
88
                  done(e);
 
89
                }
 
90
              });
 
91
            });
 
92
          });
 
93
 
 
94
          test('the correct aria attribute is set', function(done) {
 
95
            activeTarget.ariaActiveAttribute = 'aria-checked';
 
96
            MockInteractions.downAndUp(activeTarget, function() {
 
97
              try {
 
98
                expect(activeTarget.hasAttribute('active')).to.be.eql(true);
 
99
                expect(activeTarget.hasAttribute('aria-checked')).to.be.eql(true);
 
100
                expect(activeTarget.getAttribute('aria-checked')).to.be.eql('true');
 
101
                done();
 
102
              } catch (e) {
 
103
                done(e);
 
104
              }
 
105
            });
 
106
          });
 
107
 
 
108
          test('the aria attribute is updated correctly', function(done) {
 
109
            activeTarget.ariaActiveAttribute = 'aria-checked';
 
110
            MockInteractions.downAndUp(activeTarget, function() {
 
111
              try {
 
112
                expect(activeTarget.hasAttribute('active')).to.be.eql(true);
 
113
                expect(activeTarget.hasAttribute('aria-checked')).to.be.eql(true);
 
114
                expect(activeTarget.getAttribute('aria-checked')).to.be.eql('true');
 
115
 
 
116
                activeTarget.ariaActiveAttribute = 'aria-pressed';
 
117
                expect(activeTarget.hasAttribute('aria-checked')).to.be.eql(false);
 
118
                expect(activeTarget.hasAttribute('aria-pressed')).to.be.eql(true);
 
119
                expect(activeTarget.getAttribute('aria-pressed')).to.be.eql('true');
 
120
                done();
 
121
              } catch (e) {
 
122
                done(e);
 
123
              }
 
124
            });
 
125
          });
 
126
        });
 
127
      });
 
128
 
 
129
      suite('without toggles attribute', function() {
 
130
        suite('when mouse is down', function() {
 
131
          test('does not get an active attribute', function() {
 
132
            expect(activeTarget.hasAttribute('active')).to.be.eql(false);
 
133
            MockInteractions.down(activeTarget);
 
134
            expect(activeTarget.hasAttribute('active')).to.be.eql(false);
 
135
          });
 
136
        });
 
137
 
 
138
        suite('when mouse is up', function() {
 
139
          test('does not get an active attribute', function() {
 
140
            MockInteractions.down(activeTarget);
 
141
            expect(activeTarget.hasAttribute('active')).to.be.eql(false);
 
142
            MockInteractions.up(activeTarget);
 
143
            expect(activeTarget.hasAttribute('active')).to.be.eql(false);
 
144
          });
 
145
        });
 
146
      });
 
147
 
 
148
      suite('when space is pressed', function() {
 
149
        test('triggers a click event', function(done) {
 
150
          activeTarget.addEventListener('click', function() {
 
151
            done();
 
152
          });
 
153
          MockInteractions.pressSpace(activeTarget);
 
154
        });
 
155
 
 
156
        test('only triggers click after the key is released', function(done) {
 
157
          var keyupTriggered = false;
 
158
 
 
159
          activeTarget.addEventListener('keyup', function() {
 
160
            keyupTriggered = true;
 
161
          });
 
162
 
 
163
          activeTarget.addEventListener('click', function() {
 
164
            try {
 
165
              expect(keyupTriggered).to.be.eql(true);
 
166
              done();
 
167
            } catch (e) {
 
168
              done(e);
 
169
            }
 
170
          });
 
171
 
 
172
          MockInteractions.pressSpace(activeTarget);
 
173
        });
 
174
      });
 
175
 
 
176
      suite('when enter is pressed', function() {
 
177
        test('triggers a click event', function(done) {
 
178
          activeTarget.addEventListener('click', function() {
 
179
            done();
 
180
          });
 
181
 
 
182
          MockInteractions.pressEnter(activeTarget);
 
183
        });
 
184
 
 
185
        test('only triggers click before the key is released', function(done) {
 
186
          var keyupTriggered = false;
 
187
 
 
188
          activeTarget.addEventListener('keyup', function() {
 
189
            keyupTriggered = true;
 
190
          });
 
191
 
 
192
          activeTarget.addEventListener('click', function() {
 
193
            try {
 
194
              expect(keyupTriggered).to.be.eql(false);
 
195
              done();
 
196
            } catch (e) {
 
197
              done(e);
 
198
            }
 
199
          });
 
200
 
 
201
          MockInteractions.pressEnter(activeTarget);
 
202
        });
 
203
      });
 
204
 
 
205
      suite('nested native input inside button', function() {
 
206
        test('space in light child input does not trigger a button click event', function(done) {
 
207
          var item = fixture('ButtonWithNativeInput');
 
208
          var input = item.querySelector('#input');
 
209
 
 
210
          var itemClickHandler = sinon.spy();
 
211
          item.addEventListener('click', itemClickHandler);
 
212
 
 
213
          input.focus();
 
214
          MockInteractions.pressSpace(input);
 
215
          Polymer.Base.async(function(){
 
216
            expect(itemClickHandler.callCount).to.be.equal(0);
 
217
            done();
 
218
          }, 1);
 
219
        });
 
220
 
 
221
        test('space in button triggers a button click event', function(done) {
 
222
          var item = fixture('ButtonWithNativeInput');
 
223
          var input = item.querySelector('#input');
 
224
 
 
225
          var itemClickHandler = sinon.spy();
 
226
          item.addEventListener('click', itemClickHandler);
 
227
 
 
228
          MockInteractions.pressSpace(item);
 
229
 
 
230
          Polymer.Base.async(function(){
 
231
            // You need two ticks, one for the MockInteractions event, and one
 
232
            // for the button event.
 
233
            Polymer.Base.async(function(){
 
234
              expect(itemClickHandler.callCount).to.be.equal(1);
 
235
              done();
 
236
            }, 1);
 
237
          }, 1);
 
238
        });
 
239
      });
 
240
 
 
241
      suite('nested paper-input inside button', function() {
 
242
        test('space in light child input does not trigger a button click event', function(done) {
 
243
          var item = fixture('ButtonWithPaperInput');
 
244
          var input = item.querySelector('#input');
 
245
 
 
246
          var itemClickHandler = sinon.spy();
 
247
          item.addEventListener('click', itemClickHandler);
 
248
 
 
249
          input.focus();
 
250
          MockInteractions.pressSpace(input);
 
251
          Polymer.Base.async(function(){
 
252
            expect(itemClickHandler.callCount).to.be.equal(0);
 
253
            done();
 
254
          }, 1);
 
255
        });
 
256
 
 
257
        test('space in button triggers a button click event', function(done) {
 
258
          var item = fixture('ButtonWithPaperInput');
 
259
          var input = item.querySelector('#input');
 
260
 
 
261
          var itemClickHandler = sinon.spy();
 
262
          item.addEventListener('click', itemClickHandler);
 
263
 
 
264
          MockInteractions.pressSpace(item);
 
265
          Polymer.Base.async(function(){
 
266
            // You need two ticks, one for the MockInteractions event, and one
 
267
            // for the button event.
 
268
            Polymer.Base.async(function(){
 
269
              expect(itemClickHandler.callCount).to.be.equal(1);
 
270
              done();
 
271
            }, 1);
 
272
          }, 1);
 
273
        });
 
274
      });
 
275
 
 
276
    });
 
277
  </script>
 
278
</body>
 
279
</html>