<!doctype html> <!– @license Copyright © 2015 The Polymer Project Authors. All rights reserved. This code may only be used under the BSD style license found at polymer.github.io/LICENSE.txt The complete set of authors may be found at polymer.github.io/AUTHORS.txt The complete set of contributors may be found at polymer.github.io/CONTRIBUTORS.txt Code distributed by Google as part of the polymer project is also subject to an additional IP rights grant found at polymer.github.io/PATENTS.txt –> <html> <head>

<meta charset="UTF-8">
<title>paper-toolbar basic tests</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">

<script src="../../webcomponentsjs/webcomponents-lite.js"></script>
<script src="../../web-component-tester/browser.js"></script>
<script src="../../test-fixture/test-fixture-mocha.js"></script>

<link rel="import" href="../../test-fixture/test-fixture.html">
<link rel="import" href="../../polymer/polymer.html">
<link rel="import" href="../paper-toolbar.html">

</head> <body>

<test-fixture id="basic">
  <template>
    <paper-toolbar></paper-toolbar>
  </template>
</test-fixture>

<test-fixture id="title">
  <template>
    <paper-toolbar>
      <span class="title">Title</span>
    </paper-toolbar>
  </template>
</test-fixture>

<test-fixture id="title-with-id">
  <template>
    <paper-toolbar>
      <span class="title" id="title">Title</span>
    </paper-toolbar>
  </template>
</test-fixture>

<test-fixture id="multiple-titles">
  <template>
    <paper-toolbar>
      <span class="title">Title 1</span>
      <span class="title">Title 2</span>
    </paper-toolbar>
  </template>
</test-fixture>

<script>
  'use strict';

  suite('basic', function() {

    var toolbar;

    setup(function() {
      toolbar = fixture('basic');
    });

    test('has expected medium-tall height', function() {
      var old = toolbar.offsetHeight;
      toolbar.classList.add('medium-tall');
      expect(toolbar.offsetHeight).to.be.eql(old * 2);
    });

    test('has expected tall height', function() {
      var old = toolbar.offsetHeight;
      toolbar.classList.add('tall');
      expect(toolbar.offsetHeight).to.be.eql(old * 3);
    });

    test('distributes nodes to topBar by default', function() {
      var item = document.createElement('div');
      Polymer.dom(toolbar).appendChild(item);
      Polymer.dom.flush();

      var insertionPoint = Polymer.dom(item).getDestinationInsertionPoints()[0];
      expect(Polymer.dom(insertionPoint).parentNode).to.be.eql(toolbar.$.topBar);
    });

    test('distributes nodes with "middle" class to middleBar', function() {
      var item = document.createElement('div');
      item.classList.add('middle');
      Polymer.dom(toolbar).appendChild(item);
      Polymer.dom.flush();

      var insertionPoint = Polymer.dom(item).getDestinationInsertionPoints()[0];
      expect(Polymer.dom(insertionPoint).parentNode).to.be.eql(toolbar.$.middleBar);
    });

    test('distributes nodes with "bottom" class to bottombar', function() {
      var item = document.createElement('div');
      item.classList.add('bottom');
      Polymer.dom(toolbar).appendChild(item);
      Polymer.dom.flush();

      var insertionPoint = Polymer.dom(item).getDestinationInsertionPoints()[0];
      expect(Polymer.dom(insertionPoint).parentNode).to.be.eql(toolbar.$.bottomBar);
    });

  });

  suite('a11y', function() {

    test('has role="toolbar"', function() {
      var toolbar = fixture('basic');
      assert.equal(toolbar.getAttribute('role'), 'toolbar', 'has role="toolbar"');
    });

    test('children with .title becomes the label', function() {
      var toolbar = fixture('title');
      assert.isTrue(toolbar.hasAttribute('aria-labelledby'), 'has aria-labelledby');
      assert.equal(toolbar.getAttribute('aria-labelledby'), Polymer.dom(toolbar).querySelector('.title').id, 'aria-labelledby has the id of the .title element');
    });

    test('existing ids on titles are preserved', function() {
      var toolbar = fixture('title-with-id');
      assert.isTrue(toolbar.hasAttribute('aria-labelledby'), 'has aria-labelledby');
      assert.equal(Polymer.dom(toolbar).querySelector('.title').id, 'title', 'id is preserved');
    });

    test('multiple children with .title becomes the label', function() {
      var toolbar = fixture('multiple-titles');
      assert.isTrue(toolbar.hasAttribute('aria-labelledby'), 'has aria-labelledby');
      var ids = [];
      var titles = Polymer.dom(toolbar).querySelectorAll('.title');
      for (var title, index = 0; title = titles[index]; index++) {
        ids.push(title.id);
      }
      assert.equal(toolbar.getAttribute('aria-labelledby'), ids.join(' '), 'aria-labelledby has the id of all .title elements');
    });

  });

</script>

</body> </html>