Added new methods for checking state on other components. Overhauled
tests naming and style. Checkbox, Icon toggle, Radio, and Switch each receive new methods for checking state. Test suite language updated for better output. Expanded test coverage. Finally, code style improvements.master
Jonathan Garbee
parent
060a4b016a
commit
f16e7c8bc8
|
|
@ -114,18 +114,8 @@ MaterialCheckbox.prototype.onMouseUp_ = function(event) {
|
|||
*/
|
||||
MaterialCheckbox.prototype.updateClasses_ = function() {
|
||||
'use strict';
|
||||
|
||||
if (this.inputElement_.disabled) {
|
||||
this.element_.classList.add(this.CssClasses_.IS_DISABLED);
|
||||
} else {
|
||||
this.element_.classList.remove(this.CssClasses_.IS_DISABLED);
|
||||
}
|
||||
|
||||
if (this.inputElement_.checked) {
|
||||
this.element_.classList.add(this.CssClasses_.IS_CHECKED);
|
||||
} else {
|
||||
this.element_.classList.remove(this.CssClasses_.IS_CHECKED);
|
||||
}
|
||||
this.checkDisabled();
|
||||
this.checkToggleState();
|
||||
};
|
||||
|
||||
/**
|
||||
|
|
@ -144,6 +134,32 @@ MaterialCheckbox.prototype.blur_ = function(event) {
|
|||
|
||||
// Public methods.
|
||||
|
||||
/**
|
||||
* Check the inputs toggle state and update display.
|
||||
* @public
|
||||
*/
|
||||
MaterialCheckbox.prototype.checkToggleState = function() {
|
||||
'use strict';
|
||||
if (this.inputElement_.checked) {
|
||||
this.element_.classList.add(this.CssClasses_.IS_CHECKED);
|
||||
} else {
|
||||
this.element_.classList.remove(this.CssClasses_.IS_CHECKED);
|
||||
}
|
||||
};
|
||||
|
||||
/**
|
||||
* Check the inputs disabled state and update display.
|
||||
* @public
|
||||
*/
|
||||
MaterialCheckbox.prototype.checkDisabled = function() {
|
||||
'use strict';
|
||||
if (this.inputElement_.disabled) {
|
||||
this.element_.classList.add(this.CssClasses_.IS_DISABLED);
|
||||
} else {
|
||||
this.element_.classList.remove(this.CssClasses_.IS_DISABLED);
|
||||
}
|
||||
};
|
||||
|
||||
/**
|
||||
* Disable checkbox.
|
||||
* @public
|
||||
|
|
|
|||
|
|
@ -110,18 +110,8 @@ MaterialIconToggle.prototype.onMouseUp_ = function(event) {
|
|||
*/
|
||||
MaterialIconToggle.prototype.updateClasses_ = function() {
|
||||
'use strict';
|
||||
|
||||
if (this.inputElement_.disabled) {
|
||||
this.element_.classList.add(this.CssClasses_.IS_DISABLED);
|
||||
} else {
|
||||
this.element_.classList.remove(this.CssClasses_.IS_DISABLED);
|
||||
}
|
||||
|
||||
if (this.inputElement_.checked) {
|
||||
this.element_.classList.add(this.CssClasses_.IS_CHECKED);
|
||||
} else {
|
||||
this.element_.classList.remove(this.CssClasses_.IS_CHECKED);
|
||||
}
|
||||
this.checkDisabled();
|
||||
this.checkToggleState();
|
||||
};
|
||||
|
||||
/**
|
||||
|
|
@ -140,6 +130,32 @@ MaterialIconToggle.prototype.blur_ = function(event) {
|
|||
|
||||
// Public methods.
|
||||
|
||||
/**
|
||||
* Check the inputs toggle state and update display.
|
||||
* @public
|
||||
*/
|
||||
MaterialIconToggle.prototype.checkToggleState = function() {
|
||||
'use strict';
|
||||
if (this.inputElement_.checked) {
|
||||
this.element_.classList.add(this.CssClasses_.IS_CHECKED);
|
||||
} else {
|
||||
this.element_.classList.remove(this.CssClasses_.IS_CHECKED);
|
||||
}
|
||||
};
|
||||
|
||||
/**
|
||||
* Check the inputs disabled state and update display.
|
||||
* @public
|
||||
*/
|
||||
MaterialIconToggle.prototype.checkDisabled = function() {
|
||||
'use strict';
|
||||
if (this.inputElement_.disabled) {
|
||||
this.element_.classList.add(this.CssClasses_.IS_DISABLED);
|
||||
} else {
|
||||
this.element_.classList.remove(this.CssClasses_.IS_DISABLED);
|
||||
}
|
||||
};
|
||||
|
||||
/**
|
||||
* Disable icon toggle.
|
||||
* @public
|
||||
|
|
|
|||
|
|
@ -70,7 +70,7 @@ MaterialRadio.prototype.CssClasses_ = {
|
|||
MaterialRadio.prototype.onChange_ = function(event) {
|
||||
'use strict';
|
||||
|
||||
this.updateClasses_(this.btnElement_, this.element_);
|
||||
this.updateClasses_();
|
||||
|
||||
// Since other radio buttons don't get change events, we need to look for
|
||||
// them to update their classes.
|
||||
|
|
@ -119,24 +119,12 @@ MaterialRadio.prototype.onMouseup_ = function(event) {
|
|||
|
||||
/**
|
||||
* Update classes.
|
||||
* @param {HTMLElement} button The button whose classes we should update.
|
||||
* @param {HTMLElement} label The label whose classes we should update.
|
||||
* @private
|
||||
*/
|
||||
MaterialRadio.prototype.updateClasses_ = function(button, label) {
|
||||
MaterialRadio.prototype.updateClasses_ = function() {
|
||||
'use strict';
|
||||
|
||||
if (button.disabled) {
|
||||
label.classList.add(this.CssClasses_.IS_DISABLED);
|
||||
} else {
|
||||
label.classList.remove(this.CssClasses_.IS_DISABLED);
|
||||
}
|
||||
|
||||
if (button.checked) {
|
||||
label.classList.add(this.CssClasses_.IS_CHECKED);
|
||||
} else {
|
||||
label.classList.remove(this.CssClasses_.IS_CHECKED);
|
||||
}
|
||||
this.checkDisabled();
|
||||
this.checkToggleState();
|
||||
};
|
||||
|
||||
/**
|
||||
|
|
@ -155,6 +143,32 @@ MaterialRadio.prototype.blur_ = function(event) {
|
|||
|
||||
// Public methods.
|
||||
|
||||
/**
|
||||
* Check the components disabled state.
|
||||
* @public
|
||||
*/
|
||||
MaterialRadio.prototype.checkDisabled = function() {
|
||||
'use strict';
|
||||
if (this.btnElement_.disabled) {
|
||||
this.element_.classList.add(this.CssClasses_.IS_DISABLED);
|
||||
} else {
|
||||
this.element_.classList.remove(this.CssClasses_.IS_DISABLED);
|
||||
}
|
||||
};
|
||||
|
||||
/**
|
||||
* Check the components toggled state.
|
||||
* @public
|
||||
*/
|
||||
MaterialRadio.prototype.checkToggleState = function() {
|
||||
'use strict';
|
||||
if (this.btnElement_.checked) {
|
||||
this.element_.classList.add(this.CssClasses_.IS_CHECKED);
|
||||
} else {
|
||||
this.element_.classList.remove(this.CssClasses_.IS_CHECKED);
|
||||
}
|
||||
};
|
||||
|
||||
/**
|
||||
* Disable radio.
|
||||
* @public
|
||||
|
|
@ -163,7 +177,7 @@ MaterialRadio.prototype.disable = function() {
|
|||
'use strict';
|
||||
|
||||
this.btnElement_.disabled = true;
|
||||
this.updateClasses_(this.btnElement_, this.element_);
|
||||
this.updateClasses_();
|
||||
};
|
||||
|
||||
/**
|
||||
|
|
@ -174,7 +188,7 @@ MaterialRadio.prototype.enable = function() {
|
|||
'use strict';
|
||||
|
||||
this.btnElement_.disabled = false;
|
||||
this.updateClasses_(this.btnElement_, this.element_);
|
||||
this.updateClasses_();
|
||||
};
|
||||
|
||||
/**
|
||||
|
|
@ -185,7 +199,7 @@ MaterialRadio.prototype.check = function() {
|
|||
'use strict';
|
||||
|
||||
this.btnElement_.checked = true;
|
||||
this.updateClasses_(this.btnElement_, this.element_);
|
||||
this.updateClasses_();
|
||||
};
|
||||
|
||||
/**
|
||||
|
|
@ -196,7 +210,7 @@ MaterialRadio.prototype.uncheck = function() {
|
|||
'use strict';
|
||||
|
||||
this.btnElement_.checked = false;
|
||||
this.updateClasses_(this.btnElement_, this.element_);
|
||||
this.updateClasses_();
|
||||
};
|
||||
|
||||
/**
|
||||
|
|
@ -242,7 +256,7 @@ MaterialRadio.prototype.init = function() {
|
|||
this.btnElement_.addEventListener('blur', this.onBlur_.bind(this));
|
||||
this.element_.addEventListener('mouseup', this.onMouseup_.bind(this));
|
||||
|
||||
this.updateClasses_(this.btnElement_, this.element_);
|
||||
this.updateClasses_();
|
||||
this.element_.classList.add(this.CssClasses_.IS_UPGRADED);
|
||||
}
|
||||
};
|
||||
|
|
|
|||
|
|
@ -107,24 +107,12 @@ MaterialSwitch.prototype.onMouseUp_ = function(event) {
|
|||
|
||||
/**
|
||||
* Handle class updates.
|
||||
* @param {HTMLElement} button The button whose classes we should update.
|
||||
* @param {HTMLElement} label The label whose classes we should update.
|
||||
* @private
|
||||
*/
|
||||
MaterialSwitch.prototype.updateClasses_ = function() {
|
||||
'use strict';
|
||||
|
||||
if (this.inputElement_.disabled) {
|
||||
this.element_.classList.add(this.CssClasses_.IS_DISABLED);
|
||||
} else {
|
||||
this.element_.classList.remove(this.CssClasses_.IS_DISABLED);
|
||||
}
|
||||
|
||||
if (this.inputElement_.checked) {
|
||||
this.element_.classList.add(this.CssClasses_.IS_CHECKED);
|
||||
} else {
|
||||
this.element_.classList.remove(this.CssClasses_.IS_CHECKED);
|
||||
}
|
||||
this.checkDisabled();
|
||||
this.checkToggleState();
|
||||
};
|
||||
|
||||
/**
|
||||
|
|
@ -143,6 +131,32 @@ MaterialSwitch.prototype.blur_ = function(event) {
|
|||
|
||||
// Public methods.
|
||||
|
||||
/**
|
||||
* Check the components disabled state.
|
||||
* @public
|
||||
*/
|
||||
MaterialSwitch.prototype.checkDisabled = function() {
|
||||
'use strict';
|
||||
if (this.inputElement_.disabled) {
|
||||
this.element_.classList.add(this.CssClasses_.IS_DISABLED);
|
||||
} else {
|
||||
this.element_.classList.remove(this.CssClasses_.IS_DISABLED);
|
||||
}
|
||||
};
|
||||
|
||||
/**
|
||||
* Check the components toggled state.
|
||||
* @public
|
||||
*/
|
||||
MaterialSwitch.prototype.checkToggleState = function() {
|
||||
'use strict';
|
||||
if (this.inputElement_.checked) {
|
||||
this.element_.classList.add(this.CssClasses_.IS_CHECKED);
|
||||
} else {
|
||||
this.element_.classList.remove(this.CssClasses_.IS_CHECKED);
|
||||
}
|
||||
};
|
||||
|
||||
/**
|
||||
* Disable switch.
|
||||
* @public
|
||||
|
|
|
|||
|
|
@ -14,34 +14,34 @@
|
|||
* limitations under the License.
|
||||
*/
|
||||
|
||||
describe('MaterialButton', function () {
|
||||
|
||||
describe('button tests', function () {
|
||||
|
||||
it('Should have MaterialButton globally available', function () {
|
||||
expect(MaterialButton).to.be.a('function');
|
||||
});
|
||||
|
||||
it('Should be upgraded to a MaterialButton successfully', function () {
|
||||
var el = document.createElement('button');
|
||||
componentHandler.upgradeElement(el, 'MaterialButton');
|
||||
expect($(el)).to.have.data('upgraded', ',MaterialButton');
|
||||
});
|
||||
|
||||
it('Should be upgraded to a raised MaterialButton button with ripples successfully', function () {
|
||||
var el = document.createElement('div');
|
||||
el.innerHTML = '<button class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect">Raised</button>';
|
||||
var btn = el.firstChild;
|
||||
componentHandler.upgradeElement(btn, 'MaterialButton');
|
||||
expect($(btn.childNodes[1])).to.have.class('mdl-button__ripple-container');
|
||||
expect($(btn.childNodes[1].firstChild)).to.have.class('mdl-ripple');
|
||||
});
|
||||
|
||||
it('Should be upgraded to a MaterialButton FAB with ripples successfully', function () {
|
||||
var el = document.createElement('div');
|
||||
el.innerHTML = '<button class="mdl-button mdl-js-button mdl-button--fab mdl-button--colored mdl-js-ripple-effect">♥</button>';
|
||||
var btn = el.firstChild;
|
||||
componentHandler.upgradeElement(btn, 'MaterialButton');
|
||||
expect($(btn.childNodes[1])).to.have.class('mdl-button__ripple-container');
|
||||
expect($(btn.childNodes[1].firstChild)).to.have.class('mdl-ripple');
|
||||
});
|
||||
it('should be globally available', function () {
|
||||
expect(MaterialButton).to.be.a('function');
|
||||
});
|
||||
|
||||
it('should ugprade successfully', function () {
|
||||
var el = document.createElement('button');
|
||||
componentHandler.upgradeElement(el, 'MaterialButton');
|
||||
expect($(el)).to.have.data('upgraded', ',MaterialButton');
|
||||
});
|
||||
|
||||
it('should be upgrade to a raised button with ripples successfully', function () {
|
||||
var el = document.createElement('div');
|
||||
el.innerHTML = '<button class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect">Raised</button>';
|
||||
var btn = el.firstChild;
|
||||
componentHandler.upgradeElement(btn, 'MaterialButton');
|
||||
expect($(btn.childNodes[1])).to.have.class('mdl-button__ripple-container');
|
||||
expect($(btn.childNodes[1].firstChild)).to.have.class('mdl-ripple');
|
||||
});
|
||||
|
||||
it('should be upgrade to a FAB with ripples successfully', function () {
|
||||
var el = document.createElement('div');
|
||||
el.innerHTML = '<button class="mdl-button mdl-js-button mdl-button--fab mdl-button--colored mdl-js-ripple-effect">♥</button>';
|
||||
var btn = el.firstChild;
|
||||
componentHandler.upgradeElement(btn, 'MaterialButton');
|
||||
expect($(btn.childNodes[1])).to.have.class('mdl-button__ripple-container');
|
||||
expect($(btn.childNodes[1].firstChild)).to.have.class('mdl-ripple');
|
||||
});
|
||||
|
||||
});
|
||||
|
|
|
|||
|
|
@ -14,17 +14,52 @@
|
|||
* limitations under the License.
|
||||
*/
|
||||
|
||||
describe('MaterialCheckbox', function () {
|
||||
|
||||
describe('checkbox tests', function () {
|
||||
function createCheckbox() {
|
||||
var label = document.createElement('label'),
|
||||
input = document.createElement('input'),
|
||||
labelText = document.createElement('span');
|
||||
label.for = 'testCheckbox';
|
||||
label.className = 'mdl-checkbox mdl-js-checkbox';
|
||||
input.type = 'checkbox';
|
||||
input.id = 'testCheckbox';
|
||||
input.className = 'mdl-checkbox__input';
|
||||
label.appendChild(input);
|
||||
labelText.className = 'mdl-checkbox__label';
|
||||
labelText.text = 'Test Checkbox';
|
||||
label.appendChild(labelText);
|
||||
return label;
|
||||
};
|
||||
|
||||
it('Should have MaterialCheckbox globally available', function () {
|
||||
expect(MaterialCheckbox).to.be.a('function');
|
||||
});
|
||||
|
||||
it('Should be upgraded to a MaterialCheckbox successfully', function () {
|
||||
var el = document.createElement('div');
|
||||
el.innerHTML = '<input type="checkbox" class="mdl-checkbox__input">';
|
||||
componentHandler.upgradeElement(el, 'MaterialCheckbox');
|
||||
expect($(el)).to.have.data('upgraded', ',MaterialCheckbox');
|
||||
});
|
||||
it('should be globally available', function () {
|
||||
expect(MaterialCheckbox).to.be.a('function');
|
||||
});
|
||||
|
||||
it('should upgrade successfully', function () {
|
||||
var el = createCheckbox();
|
||||
componentHandler.upgradeElement(el, 'MaterialCheckbox');
|
||||
expect($(el)).to.have.data('upgraded', ',MaterialCheckbox');
|
||||
});
|
||||
|
||||
it('should get disabled class after being checked', function() {
|
||||
var checkbox = createCheckbox();
|
||||
componentHandler.upgradeElement(checkbox);
|
||||
checkbox.querySelector('input').disabled = true;
|
||||
checkbox.MaterialCheckbox.checkDisabled();
|
||||
expect((function() {
|
||||
return checkbox.className;
|
||||
}())).to.equal('mdl-checkbox mdl-js-checkbox is-upgraded is-disabled');
|
||||
});
|
||||
|
||||
it('should get checked class after checking toggle state', function() {
|
||||
var checkbox = createCheckbox();
|
||||
componentHandler.upgradeElement(checkbox);
|
||||
checkbox.querySelector('input').checked = true;
|
||||
checkbox.MaterialCheckbox.checkToggleState();
|
||||
expect((function() {
|
||||
return checkbox.className;
|
||||
}())).to.equal('mdl-checkbox mdl-js-checkbox is-upgraded is-checked');
|
||||
});
|
||||
|
||||
});
|
||||
|
|
|
|||
|
|
@ -14,17 +14,32 @@
|
|||
* limitations under the License.
|
||||
*/
|
||||
|
||||
describe('MaterialIconToggle', function () {
|
||||
|
||||
describe('icon-toggle tests', function () {
|
||||
function createToggle() {
|
||||
var label = document.createElement('label');
|
||||
var input = document.createElement('input');
|
||||
var icon = document.createElement('i');
|
||||
label.className = 'mdl-icon-toggle mdl-js-icon-toggle';
|
||||
label.for = 'testIconToggle';
|
||||
input.id = label.for;
|
||||
input.type = 'checkbox';
|
||||
input.className = 'mdl-icon-toggle__input';
|
||||
label.appendChild(input);
|
||||
icon.className = 'mdl-icon-toggle__label material-icons';
|
||||
icon.text = 'format_bold';
|
||||
label.appendChild(icon);
|
||||
return label;
|
||||
};
|
||||
|
||||
it('Should have MaterialIconToggle globally available', function () {
|
||||
expect(MaterialIconToggle).to.be.a('function');
|
||||
});
|
||||
|
||||
it('Should be upgraded to a MaterialIconToggle successfully', function () {
|
||||
var el = document.createElement('div');
|
||||
el.innerHTML = '<input type="checkbox" class="mdl-icon-toggle__input">';
|
||||
componentHandler.upgradeElement(el, 'MaterialIconToggle');
|
||||
expect($(el)).to.have.data('upgraded', ',MaterialIconToggle');
|
||||
});
|
||||
it('should be globally available', function () {
|
||||
expect(MaterialIconToggle).to.be.a('function');
|
||||
});
|
||||
|
||||
it('should upgrade successfully', function () {
|
||||
var el = createToggle();
|
||||
componentHandler.upgradeElement(el, 'MaterialIconToggle');
|
||||
expect($(el)).to.have.data('upgraded', ',MaterialIconToggle');
|
||||
});
|
||||
|
||||
});
|
||||
|
|
|
|||
|
|
@ -14,23 +14,23 @@
|
|||
* limitations under the License.
|
||||
*/
|
||||
|
||||
describe('MaterialLayout', function () {
|
||||
|
||||
describe('layout tests', function () {
|
||||
|
||||
it('Should have MaterialLayout globally available', function () {
|
||||
expect(MaterialLayout).to.be.a('function');
|
||||
});
|
||||
|
||||
it('Should be upgraded to a MaterialLayout successfully', function () {
|
||||
var el = document.createElement('div');
|
||||
el.innerHTML = '<div class="mdl-layout__header"></div>' +
|
||||
'<div class="mdl-layout__drawer"></div>' +
|
||||
'<div class="mdl-layout__content"></div>';
|
||||
|
||||
var parent = document.createElement('div');
|
||||
parent.appendChild(el); // MaterialLayout.init() expects a parent
|
||||
|
||||
componentHandler.upgradeElement(el, 'MaterialLayout');
|
||||
expect($(el)).to.have.data('upgraded', ',MaterialLayout');
|
||||
});
|
||||
it('should be globally available', function () {
|
||||
expect(MaterialLayout).to.be.a('function');
|
||||
});
|
||||
|
||||
it('should upgrade successfully', function () {
|
||||
var el = document.createElement('div');
|
||||
el.innerHTML = '<div class="mdl-layout__header"></div>' +
|
||||
'<div class="mdl-layout__drawer"></div>' +
|
||||
'<div class="mdl-layout__content"></div>';
|
||||
|
||||
var parent = document.createElement('div');
|
||||
parent.appendChild(el); // MaterialLayout.init() expects a parent
|
||||
|
||||
componentHandler.upgradeElement(el, 'MaterialLayout');
|
||||
expect($(el)).to.have.data('upgraded', ',MaterialLayout');
|
||||
});
|
||||
|
||||
});
|
||||
|
|
|
|||
|
|
@ -14,103 +14,103 @@
|
|||
* limitations under the License.
|
||||
*/
|
||||
|
||||
describe('MaterialMenu', function () {
|
||||
|
||||
describe('menu tests', function () {
|
||||
it('should be globally available', function () {
|
||||
expect(MaterialMenu).to.be.a('function');
|
||||
});
|
||||
|
||||
it('Should have MaterialMenu globally available', function () {
|
||||
expect(MaterialMenu).to.be.a('function');
|
||||
});
|
||||
it('should upgrade successfully', function () {
|
||||
var parent = document.createElement('div'), // parent must exist for MaterialMenu.init()
|
||||
el = document.createElement('ul');
|
||||
parent.appendChild(el)
|
||||
|
||||
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');
|
||||
expect($(el)).to.have.data('upgraded', ',MaterialMenu');
|
||||
});
|
||||
|
||||
componentHandler.upgradeElement(el, 'MaterialMenu');
|
||||
expect($(el)).to.have.data('upgraded', ',MaterialMenu');
|
||||
});
|
||||
describe ('visibility API', function () {
|
||||
var parent = document.createElement('div'); // parent must exist for MaterialMenu.init()
|
||||
var el = document.createElement('ul');
|
||||
parent.appendChild(el)
|
||||
componentHandler.upgradeElement(el, 'MaterialMenu');
|
||||
|
||||
describe ('visibility API', function () {
|
||||
var parent = document.createElement('div'); // parent must exist for MaterialMenu.init()
|
||||
var el = document.createElement('ul');
|
||||
parent.appendChild(el)
|
||||
componentHandler.upgradeElement(el, 'MaterialMenu');
|
||||
|
||||
it('should start the showing animation on show()', function(done) {
|
||||
expect($(el.MaterialMenu.container_)).to.not.have.class('is-visible');
|
||||
el.MaterialMenu.show();
|
||||
window.setTimeout(function() {
|
||||
expect($(el.MaterialMenu.container_)).to.have.class('is-visible');
|
||||
|
||||
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) {
|
||||
expect($(el.MaterialMenu.container_)).to.have.class('is-visible');
|
||||
el.MaterialMenu.hide();
|
||||
window.setTimeout(function() {
|
||||
expect($(el.MaterialMenu.container_)).to.not.have.class('is-visible');
|
||||
|
||||
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) {
|
||||
expect($(el.MaterialMenu.container_)).to.not.have.class('is-visible');
|
||||
el.MaterialMenu.toggle();
|
||||
window.setTimeout(function() {
|
||||
expect($(el.MaterialMenu.container_)).to.have.class('is-visible');
|
||||
|
||||
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) {
|
||||
expect($(el.MaterialMenu.container_)).to.have.class('is-visible');
|
||||
el.MaterialMenu.toggle();
|
||||
window.setTimeout(function() {
|
||||
expect($(el.MaterialMenu.container_)).to.not.have.class('is-visible');
|
||||
|
||||
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>' +
|
||||
'<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>' +
|
||||
'</ul>';
|
||||
document.body.appendChild(ctr); // `for` only works in document
|
||||
|
||||
var el = ctr.querySelector('ul');
|
||||
componentHandler.upgradeElement(el, 'MaterialMenu');
|
||||
|
||||
var ev = document.createEvent('MouseEvents');
|
||||
ev.initEvent('click', true, true);
|
||||
ctr.querySelector('#clickable').dispatchEvent(ev);
|
||||
it('should start the showing animation on show()', function(done) {
|
||||
expect($(el.MaterialMenu.container_)).to.not.have.class('is-visible');
|
||||
el.MaterialMenu.show();
|
||||
window.setTimeout(function() {
|
||||
expect($(el.MaterialMenu.container_)).to.have.class('is-visible');
|
||||
document.body.removeChild(ctr);
|
||||
|
||||
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) {
|
||||
expect($(el.MaterialMenu.container_)).to.have.class('is-visible');
|
||||
el.MaterialMenu.hide();
|
||||
window.setTimeout(function() {
|
||||
expect($(el.MaterialMenu.container_)).to.not.have.class('is-visible');
|
||||
|
||||
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) {
|
||||
expect($(el.MaterialMenu.container_)).to.not.have.class('is-visible');
|
||||
el.MaterialMenu.toggle();
|
||||
window.setTimeout(function() {
|
||||
expect($(el.MaterialMenu.container_)).to.have.class('is-visible');
|
||||
|
||||
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) {
|
||||
expect($(el.MaterialMenu.container_)).to.have.class('is-visible');
|
||||
el.MaterialMenu.toggle();
|
||||
window.setTimeout(function() {
|
||||
expect($(el.MaterialMenu.container_)).to.not.have.class('is-visible');
|
||||
|
||||
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>' +
|
||||
'<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>' +
|
||||
'</ul>';
|
||||
document.body.appendChild(ctr); // `for` only works in document
|
||||
|
||||
var el = ctr.querySelector('ul');
|
||||
componentHandler.upgradeElement(el, 'MaterialMenu');
|
||||
|
||||
var ev = document.createEvent('MouseEvents');
|
||||
ev.initEvent('click', true, true);
|
||||
ctr.querySelector('#clickable').dispatchEvent(ev);
|
||||
window.setTimeout(function() {
|
||||
expect($(el.MaterialMenu.container_)).to.have.class('is-visible');
|
||||
document.body.removeChild(ctr);
|
||||
done();
|
||||
}, 100);
|
||||
});
|
||||
|
||||
});
|
||||
|
|
|
|||
|
|
@ -14,28 +14,34 @@
|
|||
* limitations under the License.
|
||||
*/
|
||||
|
||||
describe('MaterialProgress', function () {
|
||||
|
||||
describe('progress tests', function () {
|
||||
|
||||
it('Should have MaterialProgress globally available', function () {
|
||||
it('should be globally available', function () {
|
||||
expect(MaterialProgress).to.be.a('function');
|
||||
});
|
||||
|
||||
it('Should be upgraded to a MaterialProgress successfully', function () {
|
||||
it('should upgrade successfully', function () {
|
||||
var el = document.createElement('div');
|
||||
componentHandler.upgradeElement(el, 'MaterialProgress');
|
||||
expect($(el)).to.have.data('upgraded', ',MaterialProgress');
|
||||
});
|
||||
|
||||
it('Should have a setProgress method', function () {
|
||||
it('should be a widget', function () {
|
||||
var el = document.createElement('div');
|
||||
componentHandler.upgradeElement(el, 'MaterialProgress');
|
||||
expect(el.MaterialProgress.setProgress).to.be.a('function');
|
||||
expect(el.MaterialProgress).to.be.a('object');
|
||||
});
|
||||
|
||||
it('Should have a setBuffer method', function () {
|
||||
it('should have public methods available', function () {
|
||||
var el = document.createElement('div');
|
||||
componentHandler.upgradeElement(el, 'MaterialProgress');
|
||||
expect(el.MaterialProgress.setBuffer).to.be.a('function');
|
||||
methods = [
|
||||
'setBuffer',
|
||||
'setProgress'
|
||||
];
|
||||
methods.forEach(function(item) {
|
||||
expect(el.MaterialProgress[item]).to.be.a('function');
|
||||
});
|
||||
});
|
||||
|
||||
});
|
||||
|
|
|
|||
|
|
@ -14,17 +14,76 @@
|
|||
* limitations under the License.
|
||||
*/
|
||||
|
||||
describe('MaterialRadio', function () {
|
||||
|
||||
describe('radio tests', function () {
|
||||
function createRadio() {
|
||||
var label = document.createElement('label');
|
||||
var input = document.createElement('input');
|
||||
var labelText = document.createElement('span');
|
||||
label.for = 'testRadio';
|
||||
input.id = label.for;
|
||||
label.className = 'mdl-radio mdl-js-radio';
|
||||
input.className = 'mdl-radio__button';
|
||||
input.type = 'radio';
|
||||
input.name = 'flash';
|
||||
input.value = 'on';
|
||||
label.appendChild(input);
|
||||
labelText.className = 'mdl-radio__label';
|
||||
labelText.text = 'Always on';
|
||||
label.appendChild(labelText);
|
||||
return label;
|
||||
};
|
||||
|
||||
it('Should have MaterialRadio globally available', function () {
|
||||
expect(MaterialRadio).to.be.a('function');
|
||||
});
|
||||
it('should be globally available', function () {
|
||||
expect(MaterialRadio).to.be.a('function');
|
||||
});
|
||||
|
||||
it('Should be upgraded to a MaterialRadio successfully', function () {
|
||||
var el = document.createElement('div');
|
||||
el.innerHTML = '<input type="radio" class="mdl-radio__button">';
|
||||
componentHandler.upgradeElement(el, 'MaterialRadio');
|
||||
expect($(el)).to.have.data('upgraded', ',MaterialRadio');
|
||||
it('should upgrade successfully', function () {
|
||||
var el = createRadio();
|
||||
componentHandler.upgradeElement(el, 'MaterialRadio');
|
||||
expect($(el)).to.have.data('upgraded', ',MaterialRadio');
|
||||
});
|
||||
|
||||
it('should be a widget', function() {
|
||||
var radio = createRadio();
|
||||
componentHandler.upgradeElement(radio);
|
||||
expect(radio.MaterialRadio).to.be.a('object');
|
||||
});
|
||||
|
||||
it('should have all public methods available in widget', function() {
|
||||
var radio = createRadio();
|
||||
componentHandler.upgradeElement(radio);
|
||||
var methods = [
|
||||
'disable',
|
||||
'enable',
|
||||
'uncheck',
|
||||
'check',
|
||||
'checkDisabled',
|
||||
'checkToggleState'
|
||||
];
|
||||
methods.forEach(function(item) {
|
||||
expect(radio.MaterialRadio[item]).to.be.a('function');
|
||||
});
|
||||
});
|
||||
|
||||
it('should get disabled class after being checked', function() {
|
||||
var radio = createRadio();
|
||||
componentHandler.upgradeElement(radio);
|
||||
radio.querySelector('input').disabled = true;
|
||||
radio.MaterialRadio.checkDisabled();
|
||||
expect((function() {
|
||||
return radio.className;
|
||||
}())).to.equal('mdl-radio mdl-js-radio is-upgraded is-disabled');
|
||||
});
|
||||
|
||||
it('should get checked class after checking toggle state', function() {
|
||||
var radio = createRadio();
|
||||
componentHandler.upgradeElement(radio);
|
||||
radio.querySelector('input').checked = true;
|
||||
radio.MaterialRadio.checkToggleState();
|
||||
expect((function() {
|
||||
return radio.className;
|
||||
}())).to.equal('mdl-radio mdl-js-radio is-upgraded is-checked');
|
||||
});
|
||||
|
||||
});
|
||||
|
|
|
|||
|
|
@ -14,11 +14,10 @@
|
|||
* limitations under the License.
|
||||
*/
|
||||
|
||||
describe('MaterialRipple', function () {
|
||||
|
||||
describe('ripple tests', function () {
|
||||
|
||||
it('Should have MaterialRipple globally available', function () {
|
||||
expect(MaterialRipple).to.be.a('function');
|
||||
});
|
||||
|
||||
it('should be globally available', function () {
|
||||
expect(MaterialRipple).to.be.a('function');
|
||||
});
|
||||
|
||||
});
|
||||
|
|
|
|||
|
|
@ -14,21 +14,21 @@
|
|||
* limitations under the License.
|
||||
*/
|
||||
|
||||
describe('MaterialSlider', function () {
|
||||
|
||||
describe('slider tests', function () {
|
||||
|
||||
it('Should have MaterialSlider globally available', function () {
|
||||
expect(MaterialSlider).to.be.a('function');
|
||||
});
|
||||
|
||||
it('Should be upgraded to a MaterialSlider successfully', function () {
|
||||
var el = document.createElement('input');
|
||||
el.type = 'range';
|
||||
|
||||
var parent = document.createElement('div');
|
||||
parent.appendChild(el);
|
||||
|
||||
componentHandler.upgradeElement(el, 'MaterialSlider');
|
||||
expect($(el)).to.have.data('upgraded', ',MaterialSlider');
|
||||
});
|
||||
it('should be globally available', function () {
|
||||
expect(MaterialSlider).to.be.a('function');
|
||||
});
|
||||
|
||||
it('should upgrade successfully', function () {
|
||||
var el = document.createElement('input');
|
||||
el.type = 'range';
|
||||
|
||||
var parent = document.createElement('div');
|
||||
parent.appendChild(el);
|
||||
|
||||
componentHandler.upgradeElement(el, 'MaterialSlider');
|
||||
expect($(el)).to.have.data('upgraded', ',MaterialSlider');
|
||||
});
|
||||
|
||||
});
|
||||
|
|
|
|||
|
|
@ -14,27 +14,45 @@
|
|||
* limitations under the License.
|
||||
*/
|
||||
|
||||
describe('MaterialSpinner', function () {
|
||||
|
||||
describe('spinner tests', function () {
|
||||
|
||||
it('Should have MaterialSpinner globally available', function () {
|
||||
it('should be globally available', function () {
|
||||
expect(MaterialSpinner).to.be.a('function');
|
||||
});
|
||||
|
||||
it('Should be upgraded to a MaterialSpinner successfully', function () {
|
||||
it('should upgrade successfully', function () {
|
||||
var el = document.createElement('div');
|
||||
componentHandler.upgradeElement(el, 'MaterialSpinner');
|
||||
expect($(el)).to.have.data('upgraded', ',MaterialSpinner');
|
||||
});
|
||||
|
||||
it('Should start a MaterialSpinner successfully', function () {
|
||||
it('should be a widget', function () {
|
||||
var el = document.createElement('div');
|
||||
componentHandler.upgradeElement(el, 'MaterialSpinner');
|
||||
expect(el.MaterialSpinner).to.be.a('object');
|
||||
});
|
||||
|
||||
it('should have public methods available', function() {
|
||||
var el = document.createElement('div');
|
||||
componentHandler.upgradeElement(el, 'MaterialSpinner');
|
||||
var methods = [
|
||||
'start',
|
||||
'stop',
|
||||
'createLayer'
|
||||
];
|
||||
methods.forEach(function(item) {
|
||||
expect(el.MaterialSpinner[item]).to.be.a('function');
|
||||
});
|
||||
});
|
||||
|
||||
it('should start successfully', function () {
|
||||
var el = document.createElement('div');
|
||||
componentHandler.upgradeElement(el, 'MaterialSpinner');
|
||||
el.MaterialSpinner.start();
|
||||
expect($(el)).to.have.class('is-active');
|
||||
});
|
||||
|
||||
it('Should stop a MaterialSpinner successfully', function () {
|
||||
it('should stop successfully', function () {
|
||||
var el = document.createElement('div');
|
||||
componentHandler.upgradeElement(el, 'MaterialSpinner');
|
||||
el.MaterialSpinner.start();
|
||||
|
|
@ -42,7 +60,7 @@ describe('spinner tests', function () {
|
|||
expect($(el)).to.not.have.class('is-active');
|
||||
});
|
||||
|
||||
it('Creates MaterialSpinner layers successfully', function () {
|
||||
it('should create layers successfully', function () {
|
||||
var el = document.createElement('div');
|
||||
componentHandler.upgradeElement(el, 'MaterialSpinner');
|
||||
var html = el.innerHTML;
|
||||
|
|
@ -53,4 +71,5 @@ describe('spinner tests', function () {
|
|||
expect(html).to.contain('mdl-spinner__layer-4');
|
||||
expect(html).to.contain('mdl-spinner__circle');
|
||||
});
|
||||
|
||||
});
|
||||
|
|
|
|||
|
|
@ -14,17 +14,52 @@
|
|||
* limitations under the License.
|
||||
*/
|
||||
|
||||
describe('MaterialSwitch', function () {
|
||||
|
||||
describe('switch tests', function () {
|
||||
function createSwitch() {
|
||||
var label = document.createElement('label');
|
||||
var input = document.createElement('input');
|
||||
var labelText = document.createElement('span');
|
||||
label.for = 'testSwitch';
|
||||
input.id = label.for;
|
||||
label.className = 'mdl-switch mdl-js-switch';
|
||||
input.type = 'checkbox';
|
||||
input.className = 'mdl-switch__input';
|
||||
label.appendChild(input);
|
||||
labelText.text = 'Sound off/on';
|
||||
labelText.className = 'mdl-switch__label';
|
||||
label.appendChild(labelText);
|
||||
return label;
|
||||
};
|
||||
|
||||
it('Should have MaterialSwitch globally available', function () {
|
||||
expect(MaterialSwitch).to.be.a('function');
|
||||
});
|
||||
|
||||
it('Should be upgraded to a MaterialSwitch successfully', function () {
|
||||
var el = document.createElement('div');
|
||||
el.innerHTML = '<input type="checkbox" class="mdl-switch__input">';
|
||||
componentHandler.upgradeElement(el, 'MaterialSwitch');
|
||||
expect($(el)).to.have.data('upgraded', ',MaterialSwitch');
|
||||
});
|
||||
it('should be globally available', function () {
|
||||
expect(MaterialSwitch).to.be.a('function');
|
||||
});
|
||||
|
||||
it('should upgrade successfully', function () {
|
||||
var el = createSwitch();
|
||||
componentHandler.upgradeElement(el, 'MaterialSwitch');
|
||||
expect($(el)).to.have.data('upgraded', ',MaterialSwitch');
|
||||
});
|
||||
|
||||
it('should get disabled class after being checked', function() {
|
||||
var switchElement = createSwitch();
|
||||
componentHandler.upgradeElement(switchElement);
|
||||
switchElement.querySelector('input').disabled = true;
|
||||
switchElement.MaterialSwitch.checkDisabled();
|
||||
expect((function() {
|
||||
return switchElement.className;
|
||||
}())).to.equal('mdl-switch mdl-js-switch is-upgraded is-disabled');
|
||||
});
|
||||
|
||||
it('should get checked class after checking toggle state', function() {
|
||||
var switchElement = createSwitch();
|
||||
componentHandler.upgradeElement(switchElement);
|
||||
switchElement.querySelector('input').checked = true;
|
||||
switchElement.MaterialSwitch.checkToggleState();
|
||||
expect((function() {
|
||||
return switchElement.className;
|
||||
}())).to.equal('mdl-switch mdl-js-switch is-upgraded is-checked');
|
||||
});
|
||||
|
||||
});
|
||||
|
|
|
|||
|
|
@ -14,76 +14,76 @@
|
|||
* limitations under the License.
|
||||
*/
|
||||
|
||||
describe('MaterialTabs', function () {
|
||||
|
||||
describe('tabs tests', function () {
|
||||
it('should be globally available', function () {
|
||||
expect(MaterialTabs).to.be.a('function');
|
||||
});
|
||||
|
||||
it('Should have MaterialTabs globally available', function () {
|
||||
expect(MaterialTabs).to.be.a('function');
|
||||
it('should upgrade successfully', function () {
|
||||
var el = document.createElement('div');
|
||||
el.innerHTML = '' +
|
||||
'<div class="mdl-tabs mdl-js-tabs mdl-js-ripple-effect">' +
|
||||
' <div class="mdl-tabs__tab-bar">' +
|
||||
' </div>' +
|
||||
'</div>';
|
||||
|
||||
componentHandler.upgradeElement(el, 'MaterialTabs');
|
||||
expect($(el)).to.have.data('upgraded', ',MaterialTabs');
|
||||
});
|
||||
|
||||
describe('Click on the tabs', function () {
|
||||
var el = document.createElement('div');
|
||||
el.innerHTML = '' +
|
||||
'<div class="mdl-tabs mdl-js-tabs mdl-js-ripple-effect">' +
|
||||
' <div class="mdl-tabs__tab-bar">' +
|
||||
' <a href="#content1" id="tab1" class="mdl-tabs__tab">1</a>' +
|
||||
' <a href="#content2" id="tab2" class="mdl-tabs__tab">2</a>' +
|
||||
' <a href="#content3" id="tab3" class="mdl-tabs__tab">3</a>' +
|
||||
' </div>' +
|
||||
' <div class="mdl-tabs__panel" id="content1"></div>' +
|
||||
' <div class="mdl-tabs__panel" id="content2"></div>' +
|
||||
' <div class="mdl-tabs__panel" id="content3"></div>' +
|
||||
'</div>';
|
||||
componentHandler.upgradeElement(el, 'MaterialTabs');
|
||||
|
||||
var tab1 = el.querySelector('#tab1');
|
||||
var tab2 = el.querySelector('#tab2');
|
||||
var content1 = el.querySelector('#content1');
|
||||
var content2 = el.querySelector('#content2');
|
||||
|
||||
it('Should activate no tab by default', function (done) {
|
||||
window.setTimeout(function () {
|
||||
expect(el.querySelectorAll('.is-active')).to.have.length(0);
|
||||
done();
|
||||
}, 100);
|
||||
});
|
||||
|
||||
it('Should be upgraded to a MaterialTabs successfully', function () {
|
||||
var el = document.createElement('div');
|
||||
el.innerHTML = '' +
|
||||
'<div class="mdl-tabs mdl-js-tabs mdl-js-ripple-effect">' +
|
||||
' <div class="mdl-tabs__tab-bar">' +
|
||||
' </div>' +
|
||||
'</div>';
|
||||
it('Should activate the first tab on click', function (done) {
|
||||
var el = document.createEvent('MouseEvents');
|
||||
el.initEvent('click', true, true);
|
||||
tab1.dispatchEvent(el);
|
||||
|
||||
componentHandler.upgradeElement(el, 'MaterialTabs');
|
||||
expect($(el)).to.have.data('upgraded', ',MaterialTabs');
|
||||
window.setTimeout(function () {
|
||||
expect($(tab1)).to.have.class('is-active');
|
||||
expect($(content1)).to.have.class('is-active');
|
||||
done();
|
||||
}, 100);
|
||||
});
|
||||
|
||||
describe('Click on the tabs', function () {
|
||||
var el = document.createElement('div');
|
||||
el.innerHTML = '' +
|
||||
'<div class="mdl-tabs mdl-js-tabs mdl-js-ripple-effect">' +
|
||||
' <div class="mdl-tabs__tab-bar">' +
|
||||
' <a href="#content1" id="tab1" class="mdl-tabs__tab">1</a>' +
|
||||
' <a href="#content2" id="tab2" class="mdl-tabs__tab">2</a>' +
|
||||
' <a href="#content3" id="tab3" class="mdl-tabs__tab">3</a>' +
|
||||
' </div>' +
|
||||
' <div class="mdl-tabs__panel" id="content1"></div>' +
|
||||
' <div class="mdl-tabs__panel" id="content2"></div>' +
|
||||
' <div class="mdl-tabs__panel" id="content3"></div>' +
|
||||
'</div>';
|
||||
componentHandler.upgradeElement(el, 'MaterialTabs');
|
||||
it('Should activate the second tab on click', function (done) {
|
||||
var el = document.createEvent('MouseEvents');
|
||||
el.initEvent('click', true, true);
|
||||
tab2.dispatchEvent(el);
|
||||
|
||||
var tab1 = el.querySelector('#tab1');
|
||||
var tab2 = el.querySelector('#tab2');
|
||||
var content1 = el.querySelector('#content1');
|
||||
var content2 = el.querySelector('#content2');
|
||||
|
||||
it('Should activate no tab by default', function (done) {
|
||||
window.setTimeout(function () {
|
||||
expect(el.querySelectorAll('.is-active')).to.have.length(0);
|
||||
done();
|
||||
}, 100);
|
||||
});
|
||||
|
||||
it('Should activate the first tab on click', function (done) {
|
||||
var el = document.createEvent('MouseEvents');
|
||||
el.initEvent('click', true, true);
|
||||
tab1.dispatchEvent(el);
|
||||
|
||||
window.setTimeout(function () {
|
||||
expect($(tab1)).to.have.class('is-active');
|
||||
expect($(content1)).to.have.class('is-active');
|
||||
done();
|
||||
}, 100);
|
||||
});
|
||||
|
||||
it('Should activate the second tab on click', function (done) {
|
||||
var el = document.createEvent('MouseEvents');
|
||||
el.initEvent('click', true, true);
|
||||
tab2.dispatchEvent(el);
|
||||
|
||||
window.setTimeout(function () {
|
||||
expect($(tab1)).to.not.have.class('is-active');
|
||||
expect($(content1)).to.not.have.class('is-active');
|
||||
expect($(tab2)).to.have.class('is-active');
|
||||
expect($(content2)).to.have.class('is-active');
|
||||
done();
|
||||
}, 100);
|
||||
});
|
||||
window.setTimeout(function () {
|
||||
expect($(tab1)).to.not.have.class('is-active');
|
||||
expect($(content1)).to.not.have.class('is-active');
|
||||
expect($(tab2)).to.have.class('is-active');
|
||||
expect($(content2)).to.have.class('is-active');
|
||||
done();
|
||||
}, 100);
|
||||
});
|
||||
});
|
||||
|
||||
});
|
||||
|
|
|
|||
|
|
@ -14,17 +14,58 @@
|
|||
* limitations under the License.
|
||||
*/
|
||||
|
||||
describe('MaterialTextfield', function () {
|
||||
|
||||
describe('textfield tests', function () {
|
||||
function createSingleLineTextfield() {
|
||||
var container = document.createElement('div');
|
||||
var input = document.createElement('input');
|
||||
var label = document.createElement('label');
|
||||
var errorMessage = document.createElement('span');
|
||||
container.className = 'mdl-textfield mdl-js-textfield';
|
||||
input.className = 'mdl-textfield__input';
|
||||
input.pattern = '[0-9]';
|
||||
input.id = 'testInput';
|
||||
label.for = input.id;
|
||||
label.className = 'mdl-textfield__label';
|
||||
label.text = 'Number';
|
||||
errorMessage.className = 'mdl-textfield__error';
|
||||
errorMessage.text = 'Positive number only.';
|
||||
container.appendChild(input);
|
||||
container.appendChild(label);
|
||||
container.appendChild(errorMessage);
|
||||
return container;
|
||||
};
|
||||
|
||||
it('Should have MaterialTextfield globally available', function () {
|
||||
expect(MaterialTextfield).to.be.a('function');
|
||||
});
|
||||
it('should be globally available', function () {
|
||||
expect(MaterialTextfield).to.be.a('function');
|
||||
});
|
||||
|
||||
it('Should be upgraded to a MaterialTextfield successfully', function () {
|
||||
var el = document.createElement('div');
|
||||
el.innerHTML = '<input type="text" class="mdl-checkbox__input">';
|
||||
componentHandler.upgradeElement(el, 'MaterialTextfield');
|
||||
expect($(el)).to.have.data('upgraded', ',MaterialTextfield');
|
||||
it('should upgrade successfully', function () {
|
||||
var el = createSingleLineTextfield();
|
||||
componentHandler.upgradeElement(el, 'MaterialTextfield');
|
||||
expect($(el)).to.have.data('upgraded', ',MaterialTextfield');
|
||||
});
|
||||
|
||||
it('should be a widget', function () {
|
||||
var el = createSingleLineTextfield();
|
||||
componentHandler.upgradeElement(el, 'MaterialTextfield');
|
||||
expect(el.MaterialTextfield).to.be.a('object');
|
||||
});
|
||||
|
||||
it('should have public methods available via widget', function () {
|
||||
var el = createSingleLineTextfield();
|
||||
componentHandler.upgradeElement(el, 'MaterialTextfield');
|
||||
var methods = [
|
||||
'checkDisabled',
|
||||
'checkValidity',
|
||||
'checkDirty',
|
||||
'disable',
|
||||
'enable',
|
||||
'change'
|
||||
];
|
||||
methods.forEach(function(item) {
|
||||
expect(el.MaterialTextfield[item]).to.be.a('function');
|
||||
});
|
||||
});
|
||||
|
||||
});
|
||||
|
|
|
|||
|
|
@ -14,20 +14,20 @@
|
|||
* limitations under the License.
|
||||
*/
|
||||
|
||||
describe('MaterialTooltip', function () {
|
||||
|
||||
describe('tooltip tests', function () {
|
||||
|
||||
it('Should have MaterialTooltip globally available', function () {
|
||||
expect(MaterialTooltip).to.be.a('function');
|
||||
});
|
||||
|
||||
it('Should be upgraded to a MaterialTooltip successfully', function () {
|
||||
var parent = document.createElement('div');
|
||||
parent.innerHTML = '<div id="target"></div><div id="tooltip" for="target"></div>';
|
||||
document.body.appendChild(parent);
|
||||
|
||||
var el = parent.querySelector('#tooltip');
|
||||
componentHandler.upgradeElement(el, 'MaterialTooltip');
|
||||
expect($(el)).to.have.data('upgraded', ',MaterialTooltip');
|
||||
});
|
||||
it('should be globally available', function () {
|
||||
expect(MaterialTooltip).to.be.a('function');
|
||||
});
|
||||
|
||||
it('should upgrade successfully', function () {
|
||||
var parent = document.createElement('div');
|
||||
parent.innerHTML = '<div id="target"></div><div id="tooltip" for="target"></div>';
|
||||
document.body.appendChild(parent);
|
||||
|
||||
var el = parent.querySelector('#tooltip');
|
||||
componentHandler.upgradeElement(el, 'MaterialTooltip');
|
||||
expect($(el)).to.have.data('upgraded', ',MaterialTooltip');
|
||||
});
|
||||
|
||||
});
|
||||
|
|
|
|||
Loading…
Reference in New Issue