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
12<html>
13  <head>
14
15    <title>iron-collapse-basic</title>
16    <meta charset="utf-8">
17    <meta name="viewport" content="width=device-width, initial-scale=1.0">
18
19    <script src="../../webcomponentsjs/webcomponents-lite.js"></script>
20    <script src="../../web-component-tester/browser.js"></script>
21    <script src="../../test-fixture/test-fixture-mocha.js"></script>
22
23    <link rel="import" href="../../test-fixture/test-fixture.html">
24    <link rel="import" href="../iron-collapse.html">
25
26  </head>
27  <body>
28
29    <test-fixture id="test">
30      <template>
31        <iron-collapse opened>
32          <div style="height:100px;">
33            Lorem ipsum
34          </div>
35        </iron-collapse>
36      </template>
37    </test-fixture>
38
39    <test-fixture id="empty">
40      <template>
41        <iron-collapse opened></iron-collapse>
42      </template>
43    </test-fixture>
44
45    <script>
46
47      suite('basic', function() {
48
49        var collapse;
50        var collapseHeight;
51
52        setup(function() {
53          collapse = fixture('test');
54          collapseHeight = getComputedStyle(collapse).height;
55        });
56
57        test('opened attribute', function() {
58          assert.equal(collapse.opened, true);
59        });
60
61        test('animated by default', function() {
62          assert.isTrue(!collapse.noAnimation, '`noAnimation` is falsy');
63        });
64
65        test('not transitioning on attached', function() {
66          assert.isTrue(!collapse.transitioning, '`transitioning` is falsy');
67        });
68
69        test('horizontal attribute', function() {
70          assert.equal(collapse.horizontal, false);
71        });
72
73        test('default opened height', function() {
74          assert.equal(collapse.style.maxHeight, '');
75        });
76
77        test('set opened to false triggers animation', function(done) {
78          collapse.opened = false;
79          // Animation got enabled.
80          assert.notEqual(collapse.style.transitionDuration, '0s');
81          assert.equal(collapse.transitioning, true, 'transitioning became true');
82          collapse.addEventListener('transitionend', function() {
83            // Animation disabled.
84            assert.equal(collapse.style.transitionDuration, '0s');
85            assert.equal(collapse.transitioning, false, 'transitioning became false');
86            done();
87          });
88        });
89
90        test('transitioning updated only during transitions between open/close states', function() {
91          var spy = sinon.spy();
92          collapse.addEventListener('transitioning-changed', spy);
93          collapse.noAnimation = true;
94          assert.equal(spy.callCount, 0, 'transitioning not affected by noAnimation');
95          collapse.horizontal = true;
96          assert.equal(spy.callCount, 0, 'transitioning not affected by horizontal');
97          collapse.opened = false;
98          assert.equal(spy.callCount, 2, 'transitioning changed twice');
99          assert.equal(collapse.transitioning, false, 'transitioning is false');
100        });
101
102        test('enableTransition(false) disables animations', function() {
103          collapse.enableTransition(false);
104          assert.isTrue(collapse.noAnimation, '`noAnimation` is true');
105          // trying to animate the size update
106          collapse.updateSize('0px', true);
107          // Animation immediately disabled.
108          assert.equal(collapse.style.maxHeight, '0px');
109        });
110
111        test('set opened to false, then to true', function(done) {
112          // this listener will be triggered twice (every time `opened` changes)
113          collapse.addEventListener('transitionend', function() {
114            if (collapse.opened) {
115              // Check finalSize after animation is done.
116              assert.equal(collapse.style.height, '');
117              done();
118            } else {
119              // Check if size is still 0px.
120              assert.equal(collapse.style.maxHeight, '0px');
121              // Trigger 2nd toggle.
122              collapse.opened = true;
123              // Size should be immediately set.
124              assert.equal(collapse.style.maxHeight, collapseHeight);
125            }
126          });
127          // Trigger 1st toggle.
128          collapse.opened = false;
129          // Size should be immediately set.
130          assert.equal(collapse.style.maxHeight, '0px');
131        });
132
133        test('opened changes trigger iron-resize', function() {
134          var spy = sinon.stub();
135          collapse.addEventListener('iron-resize', spy);
136          // No animations for faster test.
137          collapse.noAnimation = true;
138          collapse.opened = false;
139          assert.isTrue(spy.calledOnce, 'iron-resize was fired');
140        });
141
142        test('overflow is hidden while animating', function(done) {
143          collapse.addEventListener('transitionend', function() {
144            // Should still be hidden.
145            assert.equal(getComputedStyle(collapse).overflow, 'hidden');
146            done();
147          });
148          assert.equal(getComputedStyle(collapse).overflow, 'visible');
149          collapse.opened = false;
150          // Immediately updated style.
151          assert.equal(getComputedStyle(collapse).overflow, 'hidden');
152        });
153
154        test('toggle horizontal updates size', function() {
155          collapse.horizontal = false;
156          assert.equal(collapse.style.width, '');
157          assert.equal(collapse.style.maxHeight, '');
158          assert.equal(collapse.style.transitionProperty, 'max-height');
159
160          collapse.horizontal = true;
161          assert.equal(collapse.style.maxWidth, '');
162          assert.equal(collapse.style.height, '');
163          assert.equal(collapse.style.transitionProperty, 'max-width');
164        });
165
166        test('change size with updateSize', function(done) {
167          collapse.addEventListener('transitionend', function() {
168            // size should be kept after transition
169            assert.equal(collapse.style.maxHeight, "123px");
170            done();
171          });
172          collapse.updateSize("123px", true);
173        });
174
175      });
176
177      suite('empty', function() {
178
179        var collapse;
180
181        setup(function() {
182          collapse = fixture('empty');
183        });
184
185        test('empty&opened shows dynamically loaded content', function(done) {
186          flush(function () {
187            collapse.toggle();
188            collapse.toggle();
189            assert.equal(collapse.style.maxHeight, '');
190            done();
191          });
192        });
193
194      });
195
196    </script>
197
198  </body>
199</html>
200