api-console-assets
Version:
This repo only exists to publish api console components to npm
235 lines (182 loc) • 7.15 kB
HTML
<!--
@license
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
The complete set of authors may be found at http://polymer.github.io/AUTHORS
The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS
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
-->
<html>
<head>
<meta charset="UTF-8">
<title>test for app-drawer-layout</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="../../../iron-resizable-behavior/iron-resizable-behavior.html">
<link rel="import" href="../../../test-fixture/test-fixture.html">
<link rel="import" href="../app-drawer-layout.html">
<style is="custom-style">
body {
margin: 0;
padding: 0;
}
app-drawer-layout {
width: 100px;
height: 300px;
background: green;
position: absolute;
overflow: hidden ;
z-index: 0;
--app-drawer-layout-drawer: {
background-color: blue;
};
--app-drawer-duration: 0s;
}
[content] {
width: 1px;
height: 3000px;
background-color: red;
}
[drawer] {
width: 100%;
}
</style>
</head>
<body>
<test-fixture id="testDrawerLayout">
<template>
<app-drawer-layout>
<app-drawer>Drawer</app-drawer>
<div drawer-toggle>Toggle</div>
<p>Content</p>
<x-resizeable></x-resizeable>
</app-drawer-layout>
</template>
</test-fixture>
<script>
HTMLImports.whenReady(function() {
Polymer({
is: 'x-resizeable',
behaviors: [
Polymer.IronResizableBehavior
]
});
});
suite('basic features', function() {
var drawerLayout, drawer;
setup(function() {
drawerLayout = fixture('testDrawerLayout');
drawer = drawerLayout.querySelector('app-drawer');
});
test('default values', function() {
assert.isFalse(drawerLayout.forceNarrow);
assert.equal(drawerLayout.responsiveWidth, '640px');
assert.isFalse(drawerLayout.openedWhenNarrow);
});
test('get drawer', function() {
assert.equal(drawerLayout.drawer, drawer);
});
test('forceNarrow', function() {
drawerLayout.responsiveWidth = '0px';
drawerLayout.forceNarrow = true;
assert.isTrue(drawerLayout.narrow);
});
test('responsiveWidth', function(done) {
var xResizeable = drawerLayout.querySelector('x-resizeable');
var notifyResizeSpy = sinon.spy(xResizeable, 'notifyResize');
var drawerToggle = drawerLayout.querySelector('[drawer-toggle]');
drawerLayout.responsiveWidth = '0px';
window.setTimeout(function() {
assert.isFalse(drawerLayout.narrow);
assert.isTrue(drawer.opened);
assert.equal(window.getComputedStyle(drawerToggle)['display'], 'none');
assert.isTrue(notifyResizeSpy.called);
notifyResizeSpy.reset();
drawerLayout.responsiveWidth = '10000px';
window.setTimeout(function() {
assert.isTrue(drawerLayout.narrow);
assert.isFalse(drawer.opened);
assert.notEqual(window.getComputedStyle(drawerToggle)['display'], 'none');
assert.isTrue(notifyResizeSpy.called);
done();
}, 50);
}, 50);
});
test('drawer-toggle', function(done) {
drawerLayout.responsiveWidth = '10000px';
assert.isFalse(drawer.opened);
Polymer.Base.fire('tap', null /* detail */, { node: drawerLayout.querySelector('p') });
assert.isFalse(drawer.opened);
Polymer.Base.fire('tap', null /* detail */, { node: drawerLayout.querySelector('[drawer-toggle]') });
assert.isTrue(drawer.opened);
drawerLayout.responsiveWidth = '0px';
window.setTimeout(function() {
Polymer.Base.fire('tap', null /* detail */, { node: drawerLayout.querySelector('[drawer-toggle]') });
assert.isTrue(drawer.opened);
done();
}, 50);
});
test('content layout', function(done) {
drawerLayout.responsiveWidth = '10000px';
window.setTimeout(function() {
assert.equal(drawerLayout.$.contentContainer.style.marginLeft, '');
assert.equal(drawerLayout.$.contentContainer.style.marginRight, '');
drawerLayout.responsiveWidth = '0px';
window.setTimeout(function() {
assert.equal(drawerLayout.$.contentContainer.style.marginLeft, '256px');
assert.equal(drawerLayout.$.contentContainer.style.marginRight, '');
drawer.align = 'end';
window.setTimeout(function() {
assert.equal(drawerLayout.$.contentContainer.style.marginLeft, '');
assert.equal(drawerLayout.$.contentContainer.style.marginRight, '256px');
done();
}, 50);
}, 50);
}, 50);
});
test('iron-resize triggers content layout', function() {
var resetLayoutSpy = sinon.spy(drawerLayout, 'resetLayout');
assert.isFalse(resetLayoutSpy.called);
drawerLayout.notifyResize();
assert.isTrue(resetLayoutSpy.called);
resetLayoutSpy.restore();
});
test('openedWhenNarrow', function(done) {
drawerLayout.openedWhenNarrow = true;
drawerLayout.responsiveWidth = '0px';
window.setTimeout(function() {
assert.isFalse(drawerLayout.narrow);
assert.isTrue(drawer.opened);
drawerLayout.responsiveWidth = '10000px';
window.setTimeout(function() {
assert.isTrue(drawerLayout.narrow);
assert.isTrue(drawer.opened);
done();
}, 50);
}, 50);
});
test('app-drawer appended later', function(done) {
assert.doesNotThrow(function() {
drawerLayout = document.body.appendChild(document.createElement('app-drawer-layout'));
});
assert.isUndefined(drawerLayout.drawer);
assert.equal(drawerLayout.$.contentContainer.style.marginLeft, '');
assert.equal(drawerLayout.$.contentContainer.style.marginRight, '');
drawerLayout.responsiveWidth = '0px';
Polymer.dom(drawerLayout).appendChild(document.createElement('app-drawer'));
Polymer.dom.flush();
window.setTimeout(function() {
assert.isTrue(drawerLayout.drawer.opened);
assert.equal(drawerLayout.$.contentContainer.style.marginLeft, '256px');
assert.equal(drawerLayout.$.contentContainer.style.marginRight, '');
done();
}, 50);
});
});
</script>
</body>
</html>