paper-toolbar.html 4.93 KB
<!doctype html>
<!--
Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
The complete set of contributors may be found at http://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 http://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>