3
Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
4
This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
5
The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
6
The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
7
Code distributed by Google as part of the polymer project is also
8
subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
12
<meta charset="UTF-8">
13
<title>paper-toolbar basic tests</title>
14
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
16
<script src="../../webcomponentsjs/webcomponents-lite.js"></script>
17
<script src="../../web-component-tester/browser.js"></script>
18
<script src="../../test-fixture/test-fixture-mocha.js"></script>
20
<link rel="import" href="../../test-fixture/test-fixture.html">
21
<link rel="import" href="../../polymer/polymer.html">
22
<link rel="import" href="../paper-toolbar.html">
27
<test-fixture id="basic">
29
<paper-toolbar></paper-toolbar>
33
<test-fixture id="title">
36
<span class="title">Title</span>
41
<test-fixture id="title-with-id">
44
<span class="title" id="title">Title</span>
49
<test-fixture id="multiple-titles">
52
<span class="title">Title 1</span>
53
<span class="title">Title 2</span>
61
suite('basic', function() {
66
toolbar = fixture('basic');
69
test('has expected medium-tall height', function() {
70
var old = toolbar.offsetHeight;
71
toolbar.classList.add('medium-tall');
72
expect(toolbar.offsetHeight).to.be.eql(old * 2);
75
test('has expected tall height', function() {
76
var old = toolbar.offsetHeight;
77
toolbar.classList.add('tall');
78
expect(toolbar.offsetHeight).to.be.eql(old * 3);
81
test('distributes nodes to topBar by default', function() {
82
var item = document.createElement('div');
83
Polymer.dom(toolbar).appendChild(item);
86
var insertionPoint = Polymer.dom(item).getDestinationInsertionPoints()[0];
87
expect(Polymer.dom(insertionPoint).parentNode).to.be.eql(toolbar.$.topBar);
90
test('distributes nodes with "middle" class to middleBar', function() {
91
var item = document.createElement('div');
92
item.classList.add('middle');
93
Polymer.dom(toolbar).appendChild(item);
96
var insertionPoint = Polymer.dom(item).getDestinationInsertionPoints()[0];
97
expect(Polymer.dom(insertionPoint).parentNode).to.be.eql(toolbar.$.middleBar);
100
test('distributes nodes with "bottom" class to bottombar', function() {
101
var item = document.createElement('div');
102
item.classList.add('bottom');
103
Polymer.dom(toolbar).appendChild(item);
106
var insertionPoint = Polymer.dom(item).getDestinationInsertionPoints()[0];
107
expect(Polymer.dom(insertionPoint).parentNode).to.be.eql(toolbar.$.bottomBar);
112
suite('a11y', function() {
114
test('has role="toolbar"', function() {
115
var toolbar = fixture('basic');
116
assert.equal(toolbar.getAttribute('role'), 'toolbar', 'has role="toolbar"');
119
test('children with .title becomes the label', function() {
120
var toolbar = fixture('title');
121
assert.isTrue(toolbar.hasAttribute('aria-labelledby'), 'has aria-labelledby');
122
assert.equal(toolbar.getAttribute('aria-labelledby'), Polymer.dom(toolbar).querySelector('.title').id, 'aria-labelledby has the id of the .title element');
125
test('existing ids on titles are preserved', function() {
126
var toolbar = fixture('title-with-id');
127
assert.isTrue(toolbar.hasAttribute('aria-labelledby'), 'has aria-labelledby');
128
assert.equal(Polymer.dom(toolbar).querySelector('.title').id, 'title', 'id is preserved');
131
test('multiple children with .title becomes the label', function() {
132
var toolbar = fixture('multiple-titles');
133
assert.isTrue(toolbar.hasAttribute('aria-labelledby'), 'has aria-labelledby');
135
var titles = Polymer.dom(toolbar).querySelectorAll('.title');
136
for (var title, index = 0; title = titles[index]; index++) {
139
assert.equal(toolbar.getAttribute('aria-labelledby'), ids.join(' '), 'aria-labelledby has the id of all .title elements');