jeena/en.javascript.info
1
0
Fork 0
Code Issues Pull requests Projects Packages Wiki Activity Actions

fixes #1653

Browse source
This commit is contained in:
Ilya Kantor 2019-12-04 12:10:57 +03:00
parent 4110f00f31
commit 5b195795da
5 changed files with 38 additions and 43 deletions
Download patch file Download diff file Expand all files Collapse all files

25
2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/2-hoverintent/solution.view/index.html
View file

@ -20,20 +20,17 @@
<div id="tooltip" hidden>Tooltip</div>
<script>
// for the demo
setTimeout(function() {
new HoverIntent({
elem,
over() {
tooltip.style.left = elem.getBoundingClientRect().left + 5 + 'px';
tooltip.style.top = elem.getBoundingClientRect().bottom + 5 + 'px';
tooltip.hidden = false;
},
out() {
tooltip.hidden = true;
}
});
}, 2000);
new HoverIntent({
elem,
over() {
tooltip.style.left = elem.getBoundingClientRect().left + 5 + 'px';
tooltip.style.top = elem.getBoundingClientRect().bottom + 5 + 'px';
tooltip.hidden = false;
},
out() {
tooltip.hidden = true;
}
});
</script>
</body>

6
2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/2-hoverintent/solution.view/test.js
View file

@ -49,18 +49,18 @@ describe("hoverIntent", function() {
}
})
it("mouseover -> immediately no tooltip", function() {
it("mouseover -> when the pointer just arrived, no tooltip", function() {
mouse('mouseover', 10, 10);
assert.isFalse(isOver);
});
it("mouseover -> pause shows tooltip", function() {
it("mouseover -> after a delay, the tooltip shows up", function() {
mouse('mouseover', 10, 10);
this.clock.tick(100);
assert.isTrue(isOver);
});
it("mouseover -> fast mouseout no tooltip", function() {
it("mouseover -> followed by fast mouseout leads doesn't show tooltip", function() {
mouse('mouseover', 10, 10);
setTimeout(
() => mouse('mouseout', 300, 300, { relatedTarget: document.body}),

1
2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/2-hoverintent/source.view/hoverIntent.js
View file

@ -45,6 +45,7 @@ class HoverIntent {
destroy() {
/* your code to "disable" the functionality, remove all handlers */
/* it's needed for the tests to work */
}
}

25
2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/2-hoverintent/source.view/index.html
View file

@ -20,20 +20,17 @@
<div id="tooltip" hidden>Tooltip</div>
<script>
// for the demo
setTimeout(function() {
new HoverIntent({
elem,
over() {
tooltip.style.left = elem.getBoundingClientRect().left + 5 + 'px';
tooltip.style.top = elem.getBoundingClientRect().bottom + 5 + 'px';
tooltip.hidden = false;
},
out() {
tooltip.hidden = true;
}
});
}, 2000);
new HoverIntent({
elem,
over() {
tooltip.style.left = elem.getBoundingClientRect().left + 5 + 'px';
tooltip.style.top = elem.getBoundingClientRect().bottom + 5 + 'px';
tooltip.hidden = false;
},
out() {
tooltip.hidden = true;
}
});
</script>
</body>

24
2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/2-hoverintent/source.view/test.js
View file

@ -3,7 +3,7 @@
describe("hoverIntent", function() {
function mouse(eventType, x, y, options) {
let eventOptions = Object.assign({
let eventOptions = Object.assign({
bubbles: true,
clientX: x,
clientY: y,
@ -11,15 +11,15 @@ describe("hoverIntent", function() {
pageY: y,
target: elem
}, options || {});
elem.dispatchEvent(new MouseEvent(eventType, eventOptions));
}
let isOver;
let hoverIntent;
before(function() {
this.clock = sinon.useFakeTimers();
});
@ -27,11 +27,11 @@ describe("hoverIntent", function() {
after(function() {
this.clock.restore();
});
beforeEach(function() {
isOver = false;
hoverIntent = new HoverIntent({
elem: elem,
over: function() {
@ -49,18 +49,18 @@ describe("hoverIntent", function() {
}
})
it("mouseover -> immediately no tooltip", function() {
it("mouseover -> when the pointer just arrived, no tooltip", function() {
mouse('mouseover', 10, 10);
assert.isFalse(isOver);
});
it("mouseover -> pause shows tooltip", function() {
it("mouseover -> after a delay, the tooltip shows up", function() {
mouse('mouseover', 10, 10);
this.clock.tick(100);
assert.isTrue(isOver);
});
it("mouseover -> fast mouseout no tooltip", function() {
it("mouseover -> followed by fast mouseout leads doesn't show tooltip", function() {
mouse('mouseover', 10, 10);
setTimeout(
() => mouse('mouseout', 300, 300, { relatedTarget: document.body}),
@ -94,5 +94,5 @@ describe("hoverIntent", function() {
this.clock.tick(200);
assert.isFalse(isOver);
});
});