2015-04-11 11:33:04 -07:00
|
|
|
/**
|
|
|
|
* Copyright 2015 Google Inc. All Rights Reserved.
|
|
|
|
*
|
|
|
|
* Licensed under the Apache License, Version 2.0 (the "License");
|
|
|
|
* you may not use this file except in compliance with the License.
|
|
|
|
* You may obtain a copy of the License at
|
|
|
|
*
|
|
|
|
* http://www.apache.org/licenses/LICENSE-2.0
|
|
|
|
*
|
|
|
|
* Unless required by applicable law or agreed to in writing, software
|
|
|
|
* distributed under the License is distributed on an "AS IS" BASIS,
|
|
|
|
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
|
|
|
* See the License for the specific language governing permissions and
|
|
|
|
* limitations under the License.
|
|
|
|
*/
|
|
|
|
|
2015-03-16 09:58:34 -07:00
|
|
|
|
|
|
|
describe('menu tests', function () {
|
|
|
|
|
|
|
|
it('Should have MaterialMenu globally available', function () {
|
|
|
|
expect(MaterialMenu).to.be.a('function');
|
|
|
|
});
|
|
|
|
|
|
|
|
it('Should be upgraded to a MaterialMenu successfully', function () {
|
|
|
|
var parent = document.createElement('div'), // parent must exist for MaterialMenu.init()
|
|
|
|
el = document.createElement('ul');
|
|
|
|
parent.appendChild(el)
|
|
|
|
|
|
|
|
componentHandler.upgradeElement(el, 'MaterialMenu');
|
2015-03-18 05:53:26 -07:00
|
|
|
expect($(el)).to.have.data('upgraded', ',MaterialMenu');
|
2015-03-16 09:58:34 -07:00
|
|
|
});
|
|
|
|
|
|
|
|
describe ('visibility API', function () {
|
2015-03-19 09:56:18 -07:00
|
|
|
var parent = document.createElement('div'); // parent must exist for MaterialMenu.init()
|
|
|
|
var el = document.createElement('ul');
|
2015-03-16 09:58:34 -07:00
|
|
|
parent.appendChild(el)
|
|
|
|
componentHandler.upgradeElement(el, 'MaterialMenu');
|
|
|
|
|
|
|
|
it('should start the showing animation on show()', function(done) {
|
2015-06-25 14:02:12 -07:00
|
|
|
expect($(el.MaterialMenu.container_)).to.not.have.class('is-visible');
|
|
|
|
el.MaterialMenu.show();
|
2015-03-16 09:58:34 -07:00
|
|
|
window.setTimeout(function() {
|
2015-06-25 14:02:12 -07:00
|
|
|
expect($(el.MaterialMenu.container_)).to.have.class('is-visible');
|
2015-03-16 09:58:34 -07:00
|
|
|
|
|
|
|
var ev = document.createEvent('HTMLEvents');
|
|
|
|
ev.initEvent('transitionend', true, true)
|
|
|
|
el.dispatchEvent(ev);
|
|
|
|
done();
|
|
|
|
}, 100);
|
|
|
|
});
|
|
|
|
|
|
|
|
it('should start the hiding animation on hide()', function(done) {
|
2015-06-25 14:02:12 -07:00
|
|
|
expect($(el.MaterialMenu.container_)).to.have.class('is-visible');
|
|
|
|
el.MaterialMenu.hide();
|
2015-03-16 09:58:34 -07:00
|
|
|
window.setTimeout(function() {
|
2015-06-25 14:02:12 -07:00
|
|
|
expect($(el.MaterialMenu.container_)).to.not.have.class('is-visible');
|
2015-03-16 09:58:34 -07:00
|
|
|
|
|
|
|
var ev = document.createEvent('HTMLEvents');
|
|
|
|
ev.initEvent('transitionend', true, true)
|
|
|
|
el.dispatchEvent(ev);
|
|
|
|
done();
|
|
|
|
}, 100);
|
|
|
|
});
|
|
|
|
|
|
|
|
it('should start the showing animating on toggle() when invisible', function(done) {
|
2015-06-25 14:02:12 -07:00
|
|
|
expect($(el.MaterialMenu.container_)).to.not.have.class('is-visible');
|
|
|
|
el.MaterialMenu.toggle();
|
2015-03-16 09:58:34 -07:00
|
|
|
window.setTimeout(function() {
|
2015-06-25 14:02:12 -07:00
|
|
|
expect($(el.MaterialMenu.container_)).to.have.class('is-visible');
|
2015-03-16 09:58:34 -07:00
|
|
|
|
|
|
|
var ev = document.createEvent('HTMLEvents');
|
|
|
|
ev.initEvent('transitionend', true, true)
|
|
|
|
el.dispatchEvent(ev);
|
|
|
|
done();
|
|
|
|
}, 100);
|
|
|
|
});
|
|
|
|
|
|
|
|
it('should start the hiding animating on toggle() when visible', function(done) {
|
2015-06-25 14:02:12 -07:00
|
|
|
expect($(el.MaterialMenu.container_)).to.have.class('is-visible');
|
|
|
|
el.MaterialMenu.toggle();
|
2015-03-16 09:58:34 -07:00
|
|
|
window.setTimeout(function() {
|
2015-06-25 14:02:12 -07:00
|
|
|
expect($(el.MaterialMenu.container_)).to.not.have.class('is-visible');
|
2015-03-16 09:58:34 -07:00
|
|
|
|
|
|
|
var ev = document.createEvent('HTMLEvents');
|
|
|
|
ev.initEvent('transitionend', true, true)
|
|
|
|
el.dispatchEvent(ev);
|
|
|
|
done();
|
|
|
|
}, 100);
|
|
|
|
});
|
|
|
|
|
|
|
|
});
|
|
|
|
|
|
|
|
it('Should be made visible on button click', function (done) {
|
|
|
|
var ctr = document.createElement('div')
|
|
|
|
ctr.innerHTML = '<button id="clickable">Menu</button>' +
|
2015-04-10 02:54:01 -07:00
|
|
|
'<ul class="mdl-menu mdl-js-menu mdl-js-ripple-effect" for="clickable">' +
|
|
|
|
' <li class="mdl-menu__item">5.0 Lollipop</li>' +
|
|
|
|
' <li class="mdl-menu__item">4.4 KitKat</li>' +
|
|
|
|
' <li disabled class="mdl-menu__item">4.3 Jelly Bean</li>' +
|
|
|
|
' <li class="mdl-menu__item">Android History</li>' +
|
2015-03-16 09:58:34 -07:00
|
|
|
'</ul>';
|
|
|
|
document.body.appendChild(ctr); // `for` only works in document
|
|
|
|
|
2015-03-19 09:56:18 -07:00
|
|
|
var el = ctr.querySelector('ul');
|
2015-03-16 09:58:34 -07:00
|
|
|
componentHandler.upgradeElement(el, 'MaterialMenu');
|
2015-06-25 14:02:12 -07:00
|
|
|
|
2015-03-19 09:56:18 -07:00
|
|
|
var ev = document.createEvent('MouseEvents');
|
2015-03-16 09:58:34 -07:00
|
|
|
ev.initEvent('click', true, true);
|
2015-03-19 09:56:18 -07:00
|
|
|
ctr.querySelector('#clickable').dispatchEvent(ev);
|
2015-03-16 09:58:34 -07:00
|
|
|
window.setTimeout(function() {
|
2015-06-25 14:02:12 -07:00
|
|
|
expect($(el.MaterialMenu.container_)).to.have.class('is-visible');
|
2015-03-16 09:58:34 -07:00
|
|
|
document.body.removeChild(ctr);
|
|
|
|
done();
|
|
|
|
}, 100);
|
|
|
|
});
|
|
|
|
});
|