js-web-tools
Version:
Tools for Javascript develpers
202 lines (192 loc) • 8.98 kB
JavaScript
;
var _domElementPosition = require("../domElementPosition");
var _domElementStyle = _interopRequireDefault(require("../domElementStyle"));
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
function createMockElement(width, height) {
var top = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 0;
var left = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : 0;
var newEle = document.createElement("div");
newEle.style.cssText = "width:".concat(width, "px;height:").concat(height, "px;");
newEle.getBoundingClientRect = function () {
return {
width: width,
height: height,
top: top,
left: left,
right: width,
bottom: height
};
};
return newEle;
}
describe('position', function () {
describe('Scroll', function () {
it('scrollLeft', function () {
expect((0, _domElementPosition.scrollLeft)(window)).toEqual(0);
});
});
describe('Position offset', function () {
var mockEle = null;
beforeEach(function () {
mockEle = createMockElement(300, 400);
document.body.appendChild(mockEle);
});
afterEach(function () {
document.body.removeChild(mockEle);
});
it('should get default offset', function () {
Object.defineProperty(mockEle, 'ownerDocument', {
value: 'abc'
});
var offset = (0, _domElementPosition.getOffset)(mockEle);
expect(offset).toMatchObject({
top: 0,
left: 0,
width: 0,
height: 0
});
});
it('should get offset', function () {
var offset = (0, _domElementPosition.getOffset)(mockEle);
expect(offset).toMatchObject({
top: 0,
left: 0,
width: 300,
height: 400
});
});
});
describe('Position scroll prarent', function () {
it('should get document element', function () {
var mockNode = createMockElement(160, 160);
document.body.appendChild(mockNode);
var doc = (0, _domElementPosition.offsetParent)(mockNode);
expect(doc).toEqual(document.documentElement);
mockNode.parentNode.removeChild(mockNode);
});
it('should get parent node', function () {
document.body.innerHTML = "\n <ul class=\"level-1\">\n <li class=\"item-i\">I</li>\n <li class=\"item-ii\" style=\"position: relative;\">II\n <ul class=\"level-2\" style=\"position: static;\">\n <li class=\"item-a\">A</li>\n <li class=\"item-b\">B</li>\n <li class=\"item-c\">C</li>\n </ul>\n </li>\n <li class=\"item-iii\">III</li>\n </ul>\n ";
Object.defineProperty(HTMLElement.prototype, 'offsetParent', {
get: function get() {
return this.parentNode;
}
});
var doc = (0, _domElementPosition.offsetParent)(document.querySelector('.item-a'));
expect(doc).toEqual(document.querySelector('.item-ii'));
Object.defineProperty(HTMLElement.prototype, 'offsetParent', {
get: function get() {
return null;
}
});
document.body.innerHTML = '';
});
it('should get document node', function () {
document.body.innerHTML = "\n <div class=\"content\" style=\"position:fixed\">\n This is content.\n </div>\n ";
var ele = document.querySelector('.content');
expect((0, _domElementPosition.scrollPrarent)(ele)).toEqual(document);
Object.defineProperty(ele, 'ownerDocument', {
value: null
});
expect((0, _domElementPosition.scrollPrarent)(ele)).toEqual(document);
document.body.innerHTML = '';
});
it('should get document when content position is not fixed', function () {
document.body.innerHTML = "\n <div class=\"content\">\n This is content.\n </div>\n ";
var ele = document.querySelector('.content');
expect((0, _domElementPosition.scrollPrarent)(ele)).toEqual(document);
document.body.innerHTML = '';
});
it('should scroll prarent node', function () {
document.body.innerHTML = "\n <div class=\"outer\" style=\"width:200px;height:200px;overflow-y:scroll;\">\n <div class=\"inner\" style=\"position:static;width:200px;height:400px;\">\n <div class=\"content\" style=\"position:absolute;width:300px;height:400px;scrollHeight:600px;\">\n Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor\n in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.\" adipiscing elit, sed do eiusmod tempor incididunt ut\n labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur\n sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.\n </div>\n </div>\n </div>\n ";
var contentEle = document.querySelector('.content');
document.querySelectorAll('div').forEach(function (ele) {
if (ele.style.cssText !== '') {
var width = parseInt((0, _domElementStyle["default"])(ele, 'width'), 10);
var height = parseInt((0, _domElementStyle["default"])(ele, 'height'), 10);
ele.getBoundingClientRect = function () {
return {
width: width,
height: height,
top: 0,
left: 0,
right: width,
bottom: height
};
};
Object.defineProperty(ele, 'scrollHeight', {
configurable: true,
value: 500
});
}
});
var doc = (0, _domElementPosition.scrollPrarent)(contentEle);
expect(doc).toEqual(document.querySelector('.outer'));
document.body.innerHTML = '';
});
});
describe('Position', function () {
it('should get node client rect', function () {
document.body.innerHTML = "\n <div id=\"outer\" style=\"margin-top:20px;\">\n <div id=\"inner\" style=\"position:fixed;width:200px;height:200px;top:24px;left:32px;margin-left:25px;\">\n inner content\n </div>\n </div>\n ";
document.querySelectorAll('div').forEach(function (ele) {
if (ele.style.cssText !== '') {
var width = parseInt((0, _domElementStyle["default"])(ele, 'width'), 10) || 0;
var height = parseInt((0, _domElementStyle["default"])(ele, 'height'), 10) || 0;
var top = parseInt((0, _domElementStyle["default"])(ele, 'top'), 10) || 0;
var left = parseInt((0, _domElementStyle["default"])(ele, 'left'), 10) || 0;
ele.getBoundingClientRect = function () {
return {
width: width,
height: height,
top: top,
left: left,
right: width,
bottom: height
};
};
}
});
var eleInner = document.getElementById('inner');
var eleOuter = document.getElementById('outer');
var pos = (0, _domElementPosition.position)(eleInner, eleOuter);
expect(pos).toMatchObject({
left: 7,
top: 24
});
document.body.innerHTML = '';
});
it('should get parent position', function () {
var eleInnter = createMockElement(50, 50, 35, 15);
var outerInnter = createMockElement(150, 150, 15, 10);
outerInnter.appendChild(eleInnter);
document.body.appendChild(outerInnter);
Object.defineProperty(HTMLElement.prototype, 'offsetParent', {
get: function get() {
return this.parentNode;
}
});
var pos = (0, _domElementPosition.position)(eleInnter);
expect(pos).toMatchObject({
left: 5,
top: 20
});
document.body.innerHTML = '';
});
it('should get parent position', function () {
var eleInnter = createMockElement(50, 50, 35, 15);
var outerInnter = createMockElement(150, 150, 15, 10);
outerInnter.appendChild(eleInnter);
document.body.appendChild(outerInnter);
Object.defineProperty(HTMLElement.prototype, 'offsetParent', {
get: function get() {
return this.parentNode;
}
});
var pos = (0, _domElementPosition.position)(eleInnter);
expect(pos).toMatchObject({
left: 5,
top: 20
});
document.body.innerHTML = '';
});
});
});