Skip to content

Split large test up into smaller parts, remove redundant section #312

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 13 commits into from
Nov 29, 2017
28 changes: 28 additions & 0 deletions packages/metal-dom/src/domNamed.js
Original file line number Diff line number Diff line change
Expand Up @@ -529,6 +529,34 @@ export function parent(element, selector) {
return closest(element.parentNode, selector);
}

/**
* Inserts a node before first child of the parent. If child is a HTML string
* it will be converted to document fragment before prepending it to the parent.
* @param {!Element} parent The node to prepend to.
* @param {!(Element|NodeList|string)} child The thing to prepend to the parent.
* @return {!Element} The prepended child.
*/
export function prepend(parent, child) {
if (isString(child)) {
child = buildFragment(child);
}

if (!isNodeListLike(child) && !isDefAndNotNull(parent.firstChild)) {
return append(parent, child);
}

if (isNodeListLike(child)) {
const childArr = Array.prototype.slice.call(child);
for (let i = childArr.length - 1; i >= 0; i--) {
parent.insertBefore(childArr[i], parent.firstChild);
}
} else {
parent.insertBefore(child, parent.firstChild);
}

return child;
}

/**
* Registers a custom event.
* @param {string} eventName The name of the custom event.
Expand Down
63 changes: 63 additions & 0 deletions packages/metal-dom/test/dom.js
Original file line number Diff line number Diff line change
Expand Up @@ -215,6 +215,69 @@ describe('dom', function() {
assert.strictEqual('myChild2', parent.childNodes[1].className);
});

it('should prepend an element into a div without first child', function() {
let parent = document.createElement('div');
let elem = dom.buildFragment('<p>Hello World</p>');

dom.prepend(parent, elem);

assert.strictEqual('<p>Hello World</p>', parent.innerHTML);
});

it('should prepend an element into a div', function() {
let parent = document.createElement('div');
let p = document.createElement('p');
let span = document.createElement('span');

dom.append(parent, p);
dom.prepend(parent, span);

assert.strictEqual(parent.innerHTML, '<span></span><p></p>');
});

it('should prepend a text into a div', function() {
let parent = document.createElement('div');

dom.append(parent, 'Some text');
dom.prepend(parent, 'Headline: ');

assert.strictEqual(parent.innerHTML, 'Headline: Some text');
});

it('should prepend node list to empty parent element', function() {
let parent = document.createElement('div');

let childFrag = dom.buildFragment(
'<div class="myChild">el1</div><div class="myChild2">el2</div><div class="myChild3">el3</div>'
);

dom.prepend(parent, childFrag.childNodes);

assert.strictEqual(3, parent.childNodes.length);
assert.strictEqual('myChild', parent.childNodes[0].className.trim());
assert.strictEqual('myChild2', parent.childNodes[1].className.trim());
assert.strictEqual('myChild3', parent.childNodes[2].className.trim());
});

it('should prepend node list to parent element with pre-existing children', function() {
let parent = document.createElement('div');
let child = document.createElement('div');

dom.addClasses(child, 'child');
dom.append(parent, child);

let childFrag = dom.buildFragment(
'<div class="myChild">el1</div><div class="myChild2">el2</div><div class="myChild3">el3</div>'
);

dom.prepend(parent, childFrag.childNodes);
assert.strictEqual(4, parent.childNodes.length);
assert.strictEqual('myChild', parent.childNodes[0].className.trim());
assert.strictEqual('myChild2', parent.childNodes[1].className.trim());
assert.strictEqual('myChild3', parent.childNodes[2].className.trim());
assert.strictEqual('child', parent.childNodes[3].className.trim());
});

it('should replace an element with a requested element', function() {
let element1 = document.createElement('div');
let element2 = document.createElement('div');
Expand Down