lucid-ui
Version:
A UI component library from AppNexus.
131 lines (120 loc) • 4.7 kB
JavaScript
import _has from "lodash/has";
import _isObject from "lodash/isObject";
import assert from 'assert';
import { getAbsoluteBoundingClientRect, scrollParentTo, sharesAncestor } from './dom-helpers';
describe('#getAbsoluteBoundingClientRect', function () {
var div;
it('should throw if not passed a domNode', function () {
assert.throws(function () {
getAbsoluteBoundingClientRect(null);
});
});
beforeEach(function () {
div = document.createElement('div');
document.body.appendChild(div);
});
afterEach(function () {
div.parentElement.removeChild(div);
});
it('should return an object with boundingClientRect properties', function () {
var result = getAbsoluteBoundingClientRect(div);
assert(_isObject(result));
assert(_has(result, 'bottom'));
assert(_has(result, 'top'));
assert(_has(result, 'left'));
assert(_has(result, 'right'));
assert(_has(result, 'height'));
assert(_has(result, 'width'));
});
});
describe('#scrollParentTo', function () {
var parentElement;
var childNode;
beforeEach(function () {
parentElement = document.createElement('div');
parentElement.style.position = 'relative';
parentElement.style.overflowY = 'scroll';
childNode = document.createElement('div');
parentElement.appendChild(childNode);
document.body.appendChild(parentElement);
});
afterEach(function () {
document.body.removeChild(parentElement);
}); // This test cannot be run anymore because `offsetTop` cannot be mutated and
// I wasn't able to figure out how to set it
it.skip('should align to top if the top of the node is above the fold', function () {
parentElement.scrollTop = 5; // parent element is scrolled down by 5px
childNode.offsetTop = 0; // child element is located at the top of parent
scrollParentTo(childNode);
assert.equal(parentElement.scrollTop, 0); //expect parent to be scrolled to the top
});
it('should align using the additionalOffset', function () {
// just using plain objects here to avoid having to deal with weird dom positioning
var parent = {
scrollTop: 10
};
var child = {
parentElement: parent,
offsetTop: 15
};
scrollParentTo(child, 10);
assert.equal(parent.scrollTop, 5);
}); // This test cannot be run anymore because `clientHeight` cannot be mutated
// and I wasn't able to figure out how to set it
it.skip('should align to bottom if the bottom of the node is below the fold', function () {
parentElement.scrollTop = 0; // parent element is scrolled up to top
parentElement.clientHeight = 5; // parent element has height of 5px
childNode.offsetTop = 10; // child element is located 10px down from the top
childNode.offsetHeight = 8; // child element is has height of 8px
parentElement.style.overflowY = 'scroll';
parentElement.style.height = '5px';
childNode.style.height = '18px';
scrollParentTo(childNode);
assert.equal(parentElement.scrollTop, 13); //expect parent to be scrolled to align buttom of child with bottom of the parent scrollview
}); // This test cannot be run anymore because `scrollTop` cannot be mutated and
// I wasn't able to figure out how to set it
it.skip('should not scroll if node is within the parent scrollview', function () {
var secondChild = document.createElement('div');
secondChild.style.height = '10px';
parentElement.appendChild(secondChild);
parentElement.style.height = '10px';
childNode.style.marginTop = '5px'; // child element is located 5px down from the top
childNode.style.height = '5px';
parentElement.scrollTop = 5; // parent element is scrolled down by 5px
scrollParentTo(childNode);
assert.equal(parentElement.scrollTop, 5); //expect no change in scrolling of parent
});
});
describe('#sharesAncestor', function () {
it('should correctly find an ancestor', function () {
var siblingNode = {};
var contains = jest.fn().mockReturnValue(true);
var node = {
nodeName: 'DIV',
parentElement: {
nodeName: 'SPAN',
parentElement: {
nodeName: 'SECTION',
contains: contains
}
}
};
expect(sharesAncestor(node, siblingNode, 'SECTION')).toBe(true);
expect(contains).toHaveBeenCalledWith(siblingNode);
});
it('should correctly find not an ancestor', function () {
var node = {
nodeName: 'DIV',
parentElement: {
nodeName: 'SPAN',
parentElement: {
nodeName: 'DIV',
parentElement: {
nodeName: 'SPAN'
}
}
}
};
expect(sharesAncestor(node, null, 'SECTION')).toBe(false);
});
});