feat(jqlite): added show(),hide() and eq() methods to jqlite

- add those three methods to jqlite
This commit is contained in:
Di Peng
2011-07-14 17:50:06 -07:00
committed by Igor Minar
parent b4f18fc295
commit 7a3fdda965
3 changed files with 106 additions and 2 deletions

View File

@@ -507,4 +507,70 @@ describe('jqLite', function(){
expect(innerDiv.html()).toEqual('text');
});
});
describe('hide', function() {
var element;
afterEach(function() {
if (element) dealoc(element);
});
it('should hide the element', function() {
element = jqLite('<div></div>');
expect(isCssVisible(element)).toBe(true);
element.hide();
expect(isCssVisible(element)).toBe(false);
});
});
describe('show', function() {
var element;
afterEach(function() {
if (element) dealoc(element);
element.remove();
});
it('should show the element ', function() {
element = jqLite('<div></div>');
element[0].style.display = 'none';
expect(isCssVisible(element)).toBe(false);
element.show();
expect(isCssVisible(element)).toBe(true);
});
it('should show previously hidden element and preserve the display value', function() {
element = jqLite('<div style="display:inline">xx</div>');
jqLite(document.body).append(element);
element.hide();
expect(isCssVisible(element)).toBe(false);
element.show();
expect(element[0].style.display).toBe('inline');
expect(isCssVisible(element)).toBe(true);
element[0].style.display = 'block';
element.hide();
expect(isCssVisible(element)).toBe(false);
element.show();
expect(isCssVisible(element)).toBe(true);
// this totally doesn't make sense, it should be 'block', but jquery (1.4.2+1.6.2) behaves
// this way.
expect(element[0].style.display).toBe('inline');
});
});
describe('eq', function() {
it('should select the nth element ', function() {
var element = jqLite('<div><span>aa</span></div><div><span>bb</span></div>');
expect(element.find('span').eq(0).html()).toBe('aa');
expect(element.find('span').eq(-1).html()).toBe('bb');
expect(element.find('span').eq(20).length).toBe(0);;
});
});
});

View File

@@ -274,9 +274,13 @@ function sortedHtml(element, showNgClass) {
return html;
}
/**
* This method is a cheap way of testing if css for a given node is not set to 'none'. It doesn't
* actually test if an element is displayed by the browser. Be aware!!!
*/
function isCssVisible(node) {
var display = node.css('display');
if (display == 'block') display = "";
return display != 'none';
}