Home | History | Annotate | Download | only in test 
      1 <!doctype html>
      2 <!--
      3 @license
      4 Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
      5 This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
      6 The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
      7 The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
      8 Code distributed by Google as part of the polymer project is also
      9 subject 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 id="collapse" opened>
     32           <div style="height:100px;">
     33             Lorem ipsum
     34           </div>
     35         </iron-collapse>
     36       </template>
     37     </test-fixture>
     38 
     39     <script>
     40 
     41       suite('basic', function() {
     42 
     43         var collapse;
     44         var collapseHeight;
     45 
     46         setup(function() {
     47           collapse = fixture('test');
     48           collapseHeight = getComputedStyle(collapse).height;
     49         });
     50 
     51         test('opened attribute', function() {
     52           assert.equal(collapse.opened, true);
     53         });
     54 
     55         test('animated by default', function() {
     56           assert.isTrue(!collapse.noAnimation, '`noAnimation` is falsy');
     57         });
     58 
     59         test('horizontal attribute', function() {
     60           assert.equal(collapse.horizontal, false);
     61         });
     62 
     63         test('default opened height', function() {
     64           assert.equal(collapse.style.maxHeight, '');
     65         });
     66 
     67         test('set opened to false triggers animation', function(done) {
     68           collapse.opened = false;
     69           // Animation got enabled.
     70           assert.notEqual(collapse.style.transitionDuration, '0s');
     71           collapse.addEventListener('transitionend', function() {
     72             // Animation disabled.
     73             assert.equal(collapse.style.transitionDuration, '0s');
     74             done();
     75           });
     76         });
     77 
     78         test('enableTransition(false) disables animations', function() {
     79           collapse.enableTransition(false);
     80           assert.isTrue(collapse.noAnimation, '`noAnimation` is true');
     81           // trying to animate the size update
     82           collapse.updateSize('0px', true);
     83           // Animation immediately disabled.
     84           assert.equal(collapse.style.maxHeight, '0px');
     85         });
     86 
     87         test('set opened to false, then to true', function(done) {
     88           // this listener will be triggered twice (every time `opened` changes)
     89           collapse.addEventListener('transitionend', function() {
     90             if (collapse.opened) {
     91               // Check finalSize after animation is done.
     92               assert.equal(collapse.style.height, '');
     93               done();
     94             } else {
     95               // Check if size is still 0px.
     96               assert.equal(collapse.style.maxHeight, '0px');
     97               // Trigger 2nd toggle.
     98               collapse.opened = true;
     99               // Size should be immediately set.
    100               assert.equal(collapse.style.maxHeight, collapseHeight);
    101             }
    102           });
    103           // Trigger 1st toggle.
    104           collapse.opened = false;
    105           // Size should be immediately set.
    106           assert.equal(collapse.style.maxHeight, '0px');
    107         });
    108 
    109         test('opened changes trigger iron-resize', function() {
    110           var spy = sinon.stub();
    111           collapse.addEventListener('iron-resize', spy);
    112           // No animations for faster test.
    113           collapse.noAnimation = true;
    114           collapse.opened = false;
    115           assert.isTrue(spy.calledOnce, 'iron-resize was fired');
    116         });
    117 
    118         test('overflow is hidden while animating', function(done) {
    119           collapse.addEventListener('transitionend', function() {
    120             // Should still be hidden.
    121             assert.equal(getComputedStyle(collapse).overflow, 'hidden');
    122             done();
    123           });
    124           assert.equal(getComputedStyle(collapse).overflow, 'visible');
    125           collapse.opened = false;
    126           // Immediately updated style.
    127           assert.equal(getComputedStyle(collapse).overflow, 'hidden');
    128         });
    129 
    130         test('toggle horizontal updates size', function() {
    131           collapse.horizontal = false;
    132           assert.equal(collapse.style.width, '');
    133           assert.equal(collapse.style.maxHeight, '');
    134           assert.equal(collapse.style.transitionProperty, 'max-height');
    135 
    136           collapse.horizontal = true;
    137           assert.equal(collapse.style.maxWidth, '');
    138           assert.equal(collapse.style.height, '');
    139           assert.equal(collapse.style.transitionProperty, 'max-width');
    140         });
    141 
    142       });
    143 
    144     </script>
    145 
    146   </body>
    147 </html>
    148