Skip to content
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.

Sign up for GitHub

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

DomUtil function tests #7547

Merged
merged 11 commits into from
Apr 15, 2022
Merged

DomUtil function tests #7547

Changes from 1 commit
Commits
Show all changes
11 commits
Select commit Hold shift + click to select a range
7edcd19
Added tests for getStyle, create & remote, and empty elements dom utils.
LGNorris Apr 3, 2021
fb2f77f
Added a few more tests for the DomUtil functions
LGNorris Apr 3, 2021
cba5d83
Test for testProp, setTransform and setPosition utils
LGNorris Apr 3, 2021
e4ca6e2
Added setPosition and getPosition tests
LGNorris Apr 8, 2021
a166f26
Added getSizeparentnode and getscale tests
LGNorris Apr 8, 2021
46eab01
Added tests for textSelection, imageDrag and outline DomUtils.
LGNorris Apr 9, 2021
cfc3bc5
Fix linting errors
LGNorris Apr 9, 2021
e8ef221
Fixed tests for browser compatibility
LGNorris Apr 9, 2021
144a211
Fixed certain browser specific boundingClientRect issues
LGNorris Apr 9, 2021
4d47363
Merge https://github.com/Leaflet/Leaflet into DomUtil-spec-tests
Falke-Design Mar 18, 2022
452885c
update tests
Falke-Design Mar 18, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Prev Previous commit
update tests
  • Loading branch information
@Falke-Design
Falke-Design committed Mar 18, 2022
commit 452885cdbde68824243fd551d5e8ab4e76eb775c
241 changes: 182 additions & 59 deletions spec/suites/dom/DomUtilSpec.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -54,122 +54,220 @@ describe('DomUtil', function () {
});
describe('#getStyle', function () {
Falke-Design marked this conversation as resolved.
Show resolved Hide resolved
it('gets the value for a certain style attribute on an element,', function () {
el.id = 'testId';
el.style.color = 'black';
expect(L.DomUtil.getStyle(el, 'color')).to.eql('black');
el.style.color = 'green';
expect(L.DomUtil.getStyle(el, 'color')).to.eql('green');
});

(L.Browser.ie ? it.skip : it)("returns empty string if style isn't defined", function () {
var e = document.createElement('div');
expect(L.DomUtil.getStyle(e, "position")).to.be('');
});

it("returns undefined if style don't exist on HTML element or default css", function () {
expect(L.DomUtil.getStyle(el, "random_name_for_style")).to.be(undefined);
});
});

describe('#create, #remove, #empty', function () {
it('create a HTML element, sets a class, appends it to container element.', function () {
el.id = 'testId';
expect(el.children.length).to.equal(0);
L.DomUtil.create('h1', 'title', el);
expect(el.children.length).to.equal(1);
describe("#create", function () {
it("creates an HTML element div without any class name", function () {
var e = L.DomUtil.create("div");
expect(e.className).to.eql('');
expect(e.tagName).to.eql("DIV");
});
it('removes element from parent', function () {
el.id = 'testId';
expect(el.children.length).to.equal(0);
L.DomUtil.create('h1', 'title', el);
expect(el.children.length).to.equal(1);
L.DomUtil.remove(L.DomUtil.get(el.children[0]));
expect(el.children.length).to.equal(0);

it("creates an HTML element div with specified class name", function () {
var e = L.DomUtil.create("div", "test");
expect(e.className).to.eql('test');
expect(e.tagName).to.eql("DIV");
});
it('removes all of the elements children elements', function () {
el.id = 'testId';
expect(el.children.length).to.equal(0);

[0, 1, 2, 3].forEach(function (num) {
L.DomUtil.create('div', 'childContainer' + num, el);
});
expect(el.children.length).to.equal(4);
it("creates an p element with a div as parent", function () {
var parent = L.DomUtil.create("div");
expect(parent.children.length).to.equal(0);
var child = L.DomUtil.create("p", "test", parent);
expect(child.parentNode === parent).to.be(true);
expect(parent.children.length).to.equal(1);
});
});

L.DomUtil.remove(L.DomUtil.get(el.children[0]));
expect(el.children.length).to.equal(3);

L.DomUtil.empty(el);
expect(el.children.length).to.equal(0);
describe("#remove", function () {
it("removes element", function () {
var e = L.DomUtil.create("div", "test", el);
L.DomUtil.remove(e);
expect(el.contains(e)).to.be(false);
});

it("does nothing if element hasn't a parent", function () {
var e = L.DomUtil.create("div", "test");
L.DomUtil.remove(e);
expect(document.body.contains(e)).to.be(false);
});
});

describe('#toFront, #toBack', function () {
beforeEach(function () {
L.DomUtil.create('div', 'childContainer', el);
L.DomUtil.create('h1', 'childh1', el);
L.DomUtil.create('p', 'childp', el);
describe("#empty", function () {
it("removes all children of element", function () {
L.DomUtil.create("div", "test", el);
L.DomUtil.create("div", "test1", el);
L.DomUtil.create("div", "test2", el);
L.DomUtil.empty(el);
expect(el.childNodes.length).to.be(0);
});
it('Moves el to last child position parent element', function () {
el.id = 'testId';

it("does nothing if element doesn't have children", function () {
expect(el.childNodes.length).to.be(0);
L.DomUtil.empty(el);
expect(el.childNodes.length).to.be(0);
});
});

describe('#toFront', function () {
it('moves el to last child position parent element', function () {
var elm = L.DomUtil.create('div', 'childContainer', el);
L.DomUtil.create("div", "test", el);
L.DomUtil.create("div", "test1", el);
expect(el.children.length).to.equal(3);
expect(Array.from(el.children).indexOf(document.querySelector('.childContainer') === 0));
L.DomUtil.toFront(el.children[0]);
expect(Array.from(el.children).indexOf(document.querySelector('.childContainer') === 2));
expect(Array.from(el.children).indexOf(elm)).to.be(0);
L.DomUtil.toFront(elm);
expect(Array.from(el.children).indexOf(elm)).to.be(2);
});
it('Moves el to first child position parent element', function () {
el.id = 'testId';

it("doesn't move an element if he's already in the front", function () {
L.DomUtil.create("div", "test", el);
L.DomUtil.create("div", "test1", el);
var e1 = L.DomUtil.create("div", "test2", el);
expect(el.lastChild).to.eql(e1);
L.DomUtil.toFront(e1);
expect(el.lastChild).to.eql(e1);
});

it("doesn't crash if element doesn't have a parent", function () {
var e = L.DomUtil.create("div");
L.DomUtil.toFront(e);
});
});

describe('#toBack', function () {
it('moves el to first child position parent element', function () {
L.DomUtil.create("div", "test", el);
L.DomUtil.create("div", "test1", el);
var elm = L.DomUtil.create('div', 'childContainer', el);
expect(el.children.length).to.equal(3);
expect(Array.from(el.children).indexOf(document.querySelector('.childp') === 2));
L.DomUtil.toFront(el.children[0]);
expect(Array.from(el.children).indexOf(document.querySelector('.childp') === 0));
expect(Array.from(el.children).indexOf(elm)).to.be(2);
L.DomUtil.toBack(elm);
expect(Array.from(el.children).indexOf(elm)).to.be(0);
});

it("doesn't move an element if it is already in the back", function () {
var e1 = L.DomUtil.create("div", "test", el);
L.DomUtil.create("div", "test1", el);
L.DomUtil.create("div", "test2", el);
expect(el.firstChild).to.be(e1);
L.DomUtil.toBack(el);
expect(el.firstChild).to.be(e1);
});

it("doesn't crash if an element doesn't have a parent", function () {
var e = L.DomUtil.create("div");
L.DomUtil.toBack(e);
});
});

describe('#setClass, #getClass', function () {
Falke-Design marked this conversation as resolved.
Show resolved Hide resolved
it('Sets the elements class', function () {
el.id = 'testId';
it('sets the elements class', function () {
expect(el.classList.contains('newClass')).to.not.be.ok();
L.DomUtil.setClass(el, 'newClass');
expect(el.classList.contains('newClass')).to.be.ok();
});
it('Gets the elements class', function () {
el.id = 'testId';

it('gets the elements class', function () {
expect(L.DomUtil.getClass(el)).to.not.equal('newClass');
L.DomUtil.setClass(el, 'newClass');
expect(L.DomUtil.getClass(el)).to.equal('newClass');
});
});

describe('#setOpacity', function () {
it('Sets opacity of element', function () {
el.id = 'testId';
it('sets opacity of element', function () {
L.DomUtil.setOpacity(el, 1);
expect(el.style.opacity).to.equal('1');
L.DomUtil.setOpacity(el, 0.5);
expect(el.style.opacity).to.equal('0.5');
L.DomUtil.setOpacity(el, '0');
expect(el.style.opacity).to.equal('0');
});

it("replaces the class of SGV element by the specified argument", function () {
var svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
L.DomUtil.setClass(svg, "testclass");
expect(svg.className.baseVal).to.be("testclass");
});

it("gets the class name of SVG element", function () {
var svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
svg.className.baseVal = "testclass";
expect(L.DomUtil.getClass(svg)).to.be("testclass");
});

it('returns empty string if it has no classes', function () {
expect(L.DomUtil.getClass(el)).to.be('');
});
});

describe('#testProp', function () {
Falke-Design marked this conversation as resolved.
Show resolved Hide resolved
it('Check array of style names return first valid style name for element', function () {
(L.Browser.ie ? it.skip : it)('check array of style names return first valid style name for element', function () {
var hasProp;
hasProp = L.DomUtil.testProp(['-webkit-transform', '-webkit-transform', '-ms-tranform', '-o-transform']);
expect(hasProp).to.match(/(?:-webkit-transform|-webkit-transform|-ms-tranform|-o-transform)/);
});

it("returns false if property doesn't exist", function () {
expect(L.DomUtil.testProp(["testprop"])).to.be(false);
});
});

describe('#setTransform', function () {
Falke-Design marked this conversation as resolved.
Show resolved Hide resolved
it("Resets the transform style of an el.", function () {
expect(L.DomUtil.getStyle(el, '-webkit-transform')).to.be.equal('none');
it("resets the transform style of an el.", function () {
expect(L.DomUtil.getStyle(el, 'transform')).to.be.equal('none');

var offset = L.point(200, 200);
var scale = 10;
L.DomUtil.setTransform(el, offset, scale);
var transform = L.DomUtil.getStyle(el, '-webkit-transform');
expect(L.DomUtil.getStyle(el, '-webkit-transform')).to.be.equal(transform);
var transform = L.DomUtil.getStyle(el, 'transform');
expect(L.DomUtil.getStyle(el, 'transform')).to.be.equal(transform);

var newScale = 20;
var newOffset = L.point(400, 400);
L.DomUtil.setTransform(el, newOffset, newScale);
expect(L.DomUtil.getStyle(el, '-webkit-transform')).to.not.be.equal(transform);
expect(L.DomUtil.getStyle(el, 'transform')).to.not.be.equal(transform);
});

(L.Browser.ie ? it.skip : it)("reset the 3d CSS transform when offset and scale aren't specified", function () {
L.DomUtil.setTransform(el);
expect(el.style[L.DomUtil.TRANSFORM]).to.be('translate3d(' + 0 + 'px, ' + 0 + 'px, 0px)');
});

(L.Browser.ie ? it.skip : it)("set the 3d CSS transform with just the specified point if scale isn't specified", function () {
L.DomUtil.setTransform(el, new L.Point(1, 1));
expect(el.style[L.DomUtil.TRANSFORM]).to.be('translate3d(' + 1 + 'px, ' + 1 + 'px, 0px)');
});

(L.Browser.ie ? it.skip : it)("set 3d CSS transform to translate3d(0px, 0px, 0) and add to it scale(${scalevalue}) if only scale is specified", function () {
L.DomUtil.setTransform(el, undefined, 5);
expect(el.style[L.DomUtil.TRANSFORM]).to.be('translate3d(' + 0 + 'px, ' + 0 + 'px, 0px) scale(' + 5 + ')');
});

(L.Browser.ie ? it.skip : it)("set the 3d CSS transform with the specified point ant the corresponding scale", function () {
L.DomUtil.setTransform(el, new L.Point(1, 1), 5);
expect(el.style[L.DomUtil.TRANSFORM]).to.be('translate3d(' + 1 + 'px, ' + 1 + 'px, 0px) scale(' + 5 + ')');
});
// TODO: test with Browser.ie3d to true
});

describe('#setPosition, #getPosition', function () {
it("Sets position of el to coordinates specified by position.", function () {
it("sets position of el to coordinates specified by position.", function () {
expect(L.DomUtil.getStyle(el, 'left')).to.be.equal('0px');
expect(L.DomUtil.getStyle(el, 'top')).to.be.equal('0px');

Expand All @@ -186,29 +284,39 @@ describe('DomUtil', function () {
expect(L.DomUtil.getPosition(el)).to.be.eql({x: newX, y: newY});
});

it("Returns position of an element positioned with setPosition.", function () {
it("returns position of an element positioned with setPosition.", function () {
var coordinates = {x: 333, y: 666};
var position = L.point(coordinates);
expect(L.DomUtil.getPosition(el)).to.not.eql(coordinates);
L.DomUtil.setPosition(el, position);
expect(L.DomUtil.getPosition(el)).to.be.an('object');
expect(L.DomUtil.getPosition(el)).to.eql(coordinates);
});

it("returns [0, 0] point if the HTML element wasn't positioned before", function () {
expect(L.DomUtil.getPosition(el)).to.eql(new L.Point(0, 0));
});
});

describe('#getSizedParentNode', function () {
Falke-Design marked this conversation as resolved.
Show resolved Hide resolved
it('Find nearest parent element where height / width are not null', function () {
it('find nearest parent element where height / width are not null', function () {
var child = document.createElement('div');
var grandChild = document.createElement('div');
el.appendChild(child);
child.appendChild(grandChild);
child.style.width = child.style.height = '500px';
expect(L.DomUtil.getSizedParentNode(grandChild)).to.eql(child);
});

it("throws an error if the element hasn't a parent", function () {
expect(function () {
L.DomUtil.getSizedParentNode(document.createElement('div'));
}).to.throwException();
});
});

describe('#getScale', function () {
Falke-Design marked this conversation as resolved.
Show resolved Hide resolved
it('Returns scale of element as x & y scales respectively', function () {
it('returns scale of element as x & y scales respectively', function () {
var childEl = document.createElement('div');
childEl.style.width = '250px';
childEl.style.height = '250px';
Expand Down Expand Up @@ -238,11 +346,26 @@ describe('DomUtil', function () {
childEl.style.padding = '400px';
expect(L.DomUtil.getScale(childEl).boundingClientRect.bottom).to.not.be.equal(scale.boundingClientRect.bottom);
});

(L.Browser.ie ? it.skip : it)("returns x and y to 1 with all boundingClientRect's values to 0 for empty element not added yet to the body", function () {
var newElement = document.createElement("div");
var scale = L.DomUtil.getScale(newElement);
expect(scale.x).to.eql(1);
expect(scale.y).to.eql(1);
expect(scale.boundingClientRect.x).to.eql(0);
expect(scale.boundingClientRect.y).to.eql(0);
expect(scale.boundingClientRect.left).to.eql(0);
expect(scale.boundingClientRect.right).to.eql(0);
expect(scale.boundingClientRect.top).to.eql(0);
expect(scale.boundingClientRect.height).to.eql(0);
expect(scale.boundingClientRect.bottom).to.eql(0);
expect(scale.boundingClientRect.width).to.eql(0);
});
});


describe('#disableTextSelection, #enableTextSelection', function () {
it('Disable / enable the selectstart DOM events for the user ', function () {
it('disable / enable the selectstart DOM events for the user ', function () {
var selectionPrevented;
function checkPrevented(e) {
if (e.defaultPrevented) {
Expand All @@ -266,7 +389,7 @@ describe('DomUtil', function () {
});

describe('#disableImageDrag, #enablerImageDrag', function () {
it('Disable / enable dragstart DOM events for the user', function () {
it('disable / enable dragstart DOM events for the user', function () {
var selectionPrevented;
function checkPrevented(e) {
if (e.defaultPrevented) {
Expand All @@ -290,7 +413,7 @@ describe('DomUtil', function () {
});

describe('#preventOutline, #restoreOutline', function () {
it('Prevent / Restore outline for the element', function () {
(L.Browser.ie ? it.skip : it)('prevent / restore outline for the element', function () {
var child = document.createElement('div');
el.appendChild(child);
child.tabIndex = 0;
Expand Down