mirror of
https://github.com/Alfresco/alfresco-ng2-components.git
synced 2025-05-26 17:24:56 +00:00
148 lines
4.9 KiB
HTML
148 lines
4.9 KiB
HTML
<!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>
|