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    <meta charset="UTF-8">
14    <title>paper-radio-group basic tests</title>
15    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
16
17    <script src="../../webcomponentsjs/webcomponents-lite.js"></script>
18    <script src="../../web-component-tester/browser.js"></script>
19    <script src="../../iron-test-helpers/mock-interactions.js"></script>
20    <link rel="import" href="../paper-radio-group.html">
21
22  </head>
23  <body>
24
25    <test-fixture id="NoSelection">
26      <template>
27        <paper-radio-group>
28          <paper-radio-button name="r1">r1</paper-radio-button>
29          <paper-radio-button name="r2">r2</paper-radio-button>
30          <paper-radio-button name="r3">r3</paper-radio-button>
31        </paper-radio-group>
32      </template>
33    </test-fixture>
34
35    <test-fixture id="WithSelection">
36      <template>
37        <paper-radio-group selected="r1">
38          <paper-radio-button name="r1">r1</paper-radio-button>
39          <paper-radio-button name="r2">r2</paper-radio-button>
40          <paper-radio-button name="r3">r3</paper-radio-button>
41        </paper-radio-group>
42      </template>
43    </test-fixture>
44
45    <test-fixture id="WithDisabled">
46      <template>
47        <paper-radio-group selected="r1">
48          <paper-radio-button name="r1">r1</paper-radio-button>
49          <paper-radio-button name="r2" disabled>r2</paper-radio-button>
50          <paper-radio-button name="r3">r3</paper-radio-button>
51        </paper-radio-group>
52      </template>
53    </test-fixture>
54
55    <script>
56      suite('defaults', function() {
57        var LEFT_ARROW = 37;
58        var RIGHT_ARROW = 39;
59
60        test('group can have no selection', function (done) {
61          var g = fixture('NoSelection');
62
63          // Needs to be async since the underlying iron-selector uses observeNodes.
64          Polymer.Base.async(function() {
65            expect(g.selected).to.not.be.ok;
66            var items = g.items;
67            expect(items.length).to.be.equal(3);
68
69            expect(items[0].checked).to.be.equal(false);
70            expect(items[1].checked).to.be.equal(false);
71            expect(items[2].checked).to.be.equal(false);
72
73            done();
74          }, 1);
75
76        });
77
78        test('group can have a selection', function (done) {
79          var g = fixture('WithSelection');
80
81          // Needs to be async since the underlying iron-selector uses observeNodes.
82          Polymer.Base.async(function() {
83            expect(g.selected).to.be.ok;
84            var items = g.items;
85            expect(items.length).to.be.equal(3);
86
87            expect(items[0].checked).to.be.equal(true);
88            expect(items[1].checked).to.be.equal(false);
89            expect(items[2].checked).to.be.equal(false);
90            expect(items[0].getAttribute('name')).to.be.equal(g.selected);
91
92            done();
93          }, 1);
94        });
95
96        test('right arrow advances the selection', function (done) {
97          var g = fixture('WithSelection');
98          MockInteractions.focus(g);
99
100          // Needs to be async since the underlying iron-selector uses observeNodes.
101          Polymer.Base.async(function() {
102            var items = g.items;
103            expect(items[0].checked).to.be.equal(true);
104
105            g.addEventListener('paper-radio-group-changed', function () {
106              expect(items[0].checked).to.be.equal(false);
107              expect(items[1].checked).to.be.equal(true);
108              expect(items[2].checked).to.be.equal(false);
109              done();
110            });
111            MockInteractions.keyDownOn(g, RIGHT_ARROW);
112          }, 1);
113        });
114
115        test('left arrow reverses the selection', function (done) {
116          var g = fixture('WithSelection');
117          MockInteractions.focus(g);
118
119          // Needs to be async since the underlying iron-selector uses observeNodes.
120          Polymer.Base.async(function() {
121            var items = g.items;
122            expect(items[0].checked).to.be.equal(true);
123
124            g.addEventListener('paper-radio-group-changed', function () {
125              expect(items[0].checked).to.be.equal(false);
126              expect(items[1].checked).to.be.equal(false);
127              expect(items[2].checked).to.be.equal(true);
128              done();
129            });
130            MockInteractions.keyDownOn(g, LEFT_ARROW);
131          }, 1);
132        });
133
134        test('selection should skip disabled items', function (done) {
135          var g = fixture('WithDisabled');
136          MockInteractions.focus(g);
137
138          // Needs to be async since the underlying iron-selector uses observeNodes.
139          Polymer.Base.async(function() {
140            var items = g.items;
141            expect(items[0].checked).to.be.equal(true);
142
143            g.addEventListener('paper-radio-group-changed', function () {
144              expect(items[0].checked).to.be.equal(false);
145              expect(items[1].checked).to.be.equal(false);
146              expect(items[2].checked).to.be.equal(true);
147              done();
148            });
149            MockInteractions.keyDownOn(g, RIGHT_ARROW);
150          }, 1);
151        });
152
153        test('clicking should change the selection', function (done) {
154          var g = fixture('WithSelection');
155          MockInteractions.focus(g);
156
157          // Needs to be async since the underlying iron-selector uses observeNodes.
158          Polymer.Base.async(function() {
159            var items = g.items;
160            expect(items[0].checked).to.be.equal(true);
161
162            g.addEventListener('paper-radio-group-changed', function () {
163              expect(items[0].checked).to.be.equal(false);
164              expect(items[1].checked).to.be.equal(true);
165              expect(items[2].checked).to.be.equal(false);
166              done();
167            });
168            MockInteractions.tap(items[1]);
169          }, 1);
170        });
171
172        test('clicking the selected item should not deselect', function (done) {
173          var g = fixture('WithSelection');
174          MockInteractions.focus(g);
175
176          // Needs to be async since the underlying iron-selector uses observeNodes.
177          Polymer.Base.async(function() {
178            var items = g.items;
179            expect(items[0].checked).to.be.equal(true);
180
181            // The selection should not change, but wait for a little bit just
182            // in case it would and an event would be fired.
183            setTimeout(function() {
184              expect(items[0].checked).to.be.equal(true);
185              expect(items[1].checked).to.be.equal(false);
186              expect(items[2].checked).to.be.equal(false);
187              done();
188            }, 1);
189            MockInteractions.tap(items[0]);
190          }, 1);
191        });
192
193        test('clicking the selected item should deselect if allow-empty-selection is set', function (done) {
194          var g = fixture('WithSelection');
195          g.allowEmptySelection = true;
196
197          // Needs to be async since the underlying iron-selector uses observeNodes.
198          Polymer.Base.async(function() {
199            var items = g.items;
200            expect(items[0].checked).to.be.equal(true);
201
202            // The selection should not change, but wait for a little bit just
203            // in case it would and an event would be fired.
204            setTimeout(function() {
205              expect(items[0].checked).to.be.equal(false);
206              expect(items[1].checked).to.be.equal(false);
207              expect(items[2].checked).to.be.equal(false);
208              done();
209            }, 1);
210            MockInteractions.tap(items[0]);
211          }, 1);
212        });
213
214        test('arrow keys cause iron-activate events', function(done) {
215          var g = fixture('WithSelection');
216          MockInteractions.focus(g);
217
218          // Needs to be async since the underlying iron-selector uses observeNodes.
219          Polymer.Base.async(function() {
220            g.items[0].focus();
221
222            var i = 0;
223            g.addEventListener('iron-activate', function() {
224              switch (i++) {
225                case 0:
226                  MockInteractions.pressAndReleaseKeyOn(g, 38);
227                break;
228
229                case 1:
230                  MockInteractions.pressAndReleaseKeyOn(g, 39);
231                break;
232
233                case 2:
234                  MockInteractions.pressAndReleaseKeyOn(g, 40);
235                break;
236
237                default:
238                  done();
239              }
240            });
241
242            MockInteractions.pressAndReleaseKeyOn(g, 37);
243          }, 1);
244        });
245
246      });
247    </script>
248  </body>
249</html>
250