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-iconset-svg</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="../iron-iconset-svg.html">
     24   <link rel="import" href="../../iron-meta/iron-meta.html">
     25   <link rel="import" href="../../promise-polyfill/promise-polyfill.html">
     26   <link rel="import" href="../../test-fixture/test-fixture.html">
     27 
     28 </head>
     29 <body>
     30 
     31   <test-fixture id="TrivialIconsetSvg">
     32     <template>
     33       <iron-iconset-svg name="foo"></iron-iconset-svg>
     34       <iron-meta type="iconset"></iron-meta>
     35     </template>
     36   </test-fixture>
     37 
     38   <test-fixture id="StandardIconsetSvg">
     39     <template>
     40       <iron-iconset-svg name="my-icons" size="20">
     41         <svg>
     42           <defs>
     43             <circle id="circle" cx="20" cy="20" r="10"></circle>
     44             <rect id="square" x="0" y="0" width="20" height="20"></rect>
     45             <symbol id="rect" viewBox="0 0 50 25">
     46               <rect x="0" y="0" width="50" height="25"></rect>
     47             </symbol>
     48           </defs>
     49         </svg>
     50       </iron-iconset-svg>
     51       <div></div>
     52     </template>
     53   </test-fixture>
     54 
     55   <script>
     56 
     57     suite('<iron-iconset>', function () {
     58 
     59       suite('basic behavior', function () {
     60         var iconset;
     61         var meta;
     62         var loadedPromise;
     63 
     64         setup(function () {
     65           loadedPromise = new Promise(function(resolve) {
     66             window.addEventListener('iron-iconset-added', function(ev) {
     67               if (ev && ev.detail === iconset) {
     68                 resolve();
     69               }
     70             });
     71           });
     72           var elements = fixture('TrivialIconsetSvg');
     73           iconset = elements[0];
     74           meta = elements[1];
     75         });
     76 
     77         test('it can be accessed via iron-meta', function () {
     78           expect(meta.byKey('foo')).to.be.equal(iconset);
     79         });
     80 
     81         test('it does not have a size', function () {
     82           var rect = iconset.getBoundingClientRect();
     83           expect(rect.width).to.be.equal(0);
     84           expect(rect.height).to.be.equal(0);
     85         });
     86 
     87         test('it fires an iron-iconset-added event on the window', function() {
     88           return loadedPromise;
     89         });
     90       });
     91 
     92       suite('when paired with a size and SVG definition', function () {
     93         var iconset;
     94         var div;
     95 
     96         setup(function () {
     97           var elements = fixture('StandardIconsetSvg');
     98           iconset = elements[0];
     99           div = elements[1];
    100         });
    101 
    102         test('it does not have a size', function () {
    103           var rect = iconset.getBoundingClientRect();
    104           expect(rect.width).to.be.equal(0);
    105           expect(rect.height).to.be.equal(0);
    106         });
    107         
    108         test('appends a child to the target element', function () {
    109           expect(div.firstElementChild).to.not.be.ok;
    110           iconset.applyIcon(div, 'circle');
    111           expect(div.firstElementChild).to.be.ok;
    112         });
    113 
    114         test('can be queried for all available icons', function () {
    115           expect(iconset.getIconNames()).to.deep.eql(['my-icons:circle', 'my-icons:square', 'my-icons:rect']);
    116         });
    117 
    118         test('supports any icon defined in the svg', function () {
    119           var lastSvgIcon;
    120 
    121           iconset.getIconNames().forEach(function (iconName) {
    122             iconset.applyIcon(div, iconName.split(':').pop());
    123             expect(div.firstElementChild).to.not.be.equal(lastSvgIcon);
    124             lastSvgIcon = div.firstElementChild;
    125           });
    126         });
    127 
    128         test('prefers a viewBox attribute over the iconset size', function () {
    129           iconset.applyIcon(div, 'rect');
    130           expect(div.firstElementChild.getAttribute('viewBox')).to.be.equal('0 0 50 25');
    131         });
    132 
    133         test('uses the iconset size when viewBox is not defined on the element', function () {
    134           iconset.applyIcon(div, 'circle');
    135           expect(div.firstElementChild.getAttribute('viewBox')).to.be.equal('0 0 20 20');
    136         });
    137 
    138       });
    139 
    140     });
    141 
    142   </script>
    143 
    144 </body>
    145 </html>
    146