it('should not hide a tooltip if user mouseenter tooltip and then mouseenter reference element again', done => {
instance = new Tooltip(reference, {
title: 'foobar',
trigger: 'hover',
});
expect(document.querySelector('.tooltip')).toBeNull();
reference.dispatchEvent(new CustomEvent('mouseenter'));
then(() => reference.dispatchEvent(new CustomEvent('mouseleave')));
then(() =>
document
.querySelector('.tooltip')
.dispatchEvent(new CustomEvent('mouseenter'))
);
then(() =>
document
.querySelector('.tooltip')
.dispatchEvent(new CustomEvent('mouseleave'))
);
then(() => reference.dispatchEvent(new CustomEvent('mouseenter')));
then(() => {
expect(document.querySelector('.tooltip').style.visibility).toBe('visible');
done();
}, 200);
});
it('should toggle (hide) tooltip', done => {
instance = new Tooltip(reference, {
title: 'foobar',
});
instance.show();
then(() => instance.toggle());
then(() => {
expect(document.querySelector('.tooltip').style.visibility).toBe('hidden');
done();
});
});
it('should show, hide and show again a tooltip', done => {
instance = new Tooltip(reference, {
title: 'foobar',
});
instance.show();
then(() => instance.hide());
then(() => instance.show());
then(() => {
expect(document.querySelector('.tooltip')).not.toBeNull();
done();
});
});
it('should hide a tooltip on click while open', done => {
instance = new Tooltip(reference, {
title: 'foobar',
trigger: 'click',
});
expect(document.querySelector('.tooltip')).toBeNull();
reference.dispatchEvent(new CustomEvent('click'));
then(() => reference.dispatchEvent(new CustomEvent('click')));
then(() => {
expect(document.querySelector('.tooltip').style.visibility).toBe('hidden');
done();
});
});
it('should hide a tooltip on reference mouseleave', done => {
instance = new Tooltip(reference, {
title: 'foobar',
trigger: 'hover',
});
expect(document.querySelector('.tooltip')).toBeNull();
reference.dispatchEvent(new CustomEvent('mouseenter'));
then(() => reference.dispatchEvent(new CustomEvent('mouseleave')), 200);
then(() => {
expect(document.querySelector('.tooltip').style.visibility).toBe('hidden');
done();
}, 200);
});
it('should update the tooltip position when changing the title', done => {
// Unreliable on IE...
if (isIE10) {
pending();
}
const updatedContent = 'Updated string with a different length';
instance = new Tooltip(reference, {
title: 'Constructor message',
});
instance.show();
const oldPosition = document
.querySelector('.tooltip .tooltip-inner')
.getBoundingClientRect().left;
instance.updateTitleContent(updatedContent);
then(() => {
expect(
document
.querySelector('.tooltip .tooltip-inner')
.getBoundingClientRect().left
).not.toBe(oldPosition);
done();
}, 500);
});
it('should dispose tooltip despite never being shown', done => {
instance = new Tooltip(reference, {
title: 'foobar',
});
instance.dispose();
then(() => {
expect(document.querySelector('.tooltip')).toBeNull();
});
then(() => {
reference.dispatchEvent(new CustomEvent('mouseenter'));
});
then(() => {
expect(document.querySelector('.tooltip')).toBeNull();
done();
});
});
it('should toggle (show) tooltip', done => {
instance = new Tooltip(reference, {
title: 'foobar',
});
instance.toggle();
then(() => {
expect(document.querySelector('.tooltip')).not.toBeNull();
done();
});
});
it('should dispose tooltip', done => {
instance = new Tooltip(reference, {
title: 'foobar',
});
instance.show();
then(() => instance.dispose());
then(() => {
expect(document.querySelector('.tooltip')).toBeNull();
});
then(() => {
reference.click();
});
then(() => {
expect(document.querySelector('.tooltip')).toBeNull();
done();
});
});
it('should show text tooltip', done => {
instance = new Tooltip(reference, {
title: 'foobar',
});
instance.show();
then(() => {
expect(
document.querySelector('.tooltip .tooltip-inner').textContent
).toBe('foobar');
done();
});
});
it('should use a function result as tooltip content', done => {
instance = new Tooltip(reference, {
title: () => 'foobar',
});
instance.show();
then(() => {
expect(
document.querySelector('.tooltip .tooltip-inner').textContent
).toBe('foobar');
done();
});
});
it('should show stripped out HTML tooltip', done => {
instance = new Tooltip(reference, {
title: '<strong>foobar</strong>',
html: true,
});
instance.show();
then(() => {
expect(
document.querySelector('.tooltip .tooltip-inner').textContent
).toBe('foobar');
done();
});
});
it('should show a tooltip on click', done => {
instance = new Tooltip(reference, {
title: 'foobar',
trigger: 'click',
});
expect(document.querySelector('.tooltip')).toBeNull();
reference.dispatchEvent(new CustomEvent('click'));
then(() => {
expect(document.querySelector('.tooltip')).not.toBeNull();
done();
});
});
it('should show tooltip as child of body', done => {
instance = new Tooltip(reference, {
title: 'foobar',
container: 'body',
});
instance.show();
then(() => {
expect(document.querySelector('.tooltip').parentNode).toBe(
document.body
);
instance.dispose();
done();
});
});
it('should use a DOM node as tooltip content', done => {
const content = document.createElement('div');
content.textContent = 'foobar';
instance = new Tooltip(reference, {
title: content,
html: true,
});
instance.show();
then(() => {
expect(
document.querySelector('.tooltip .tooltip-inner').innerHTML
).toBe('<div>foobar</div>');
done();
});
});
it('should not show tooltip if mouse leaves reference before tooltip is shown', done => {
instance = new Tooltip(reference, {
title: 'foobar',
trigger: 'hover',
delay: { show: 1000, hide: 0 },
});
expect(document.querySelector('.tooltip')).toBeNull();
reference.dispatchEvent(new CustomEvent('mouseenter'));
reference.dispatchEvent(new CustomEvent('mouseleave'));
then(() => {
expect(document.querySelector('.tooltip')).toBeNull();
done();
});
});
it('should update title content with String', done => {
const updatedContent = 'Updated string';
instance = new Tooltip(reference, {
title: 'Constructor message',
});
instance.show();
instance.updateTitleContent(updatedContent);
then(() => {
expect(
document.querySelector('.tooltip .tooltip-inner').textContent
).toBe(updatedContent);
done();
});
});
it('should use a document fragment as tooltip content', done => {
const content = document.createDocumentFragment();
const inner = document.createElement('div');
inner.textContent = 'test';
content.appendChild(inner);
instance = new Tooltip(reference, {
title: content,
html: true,
});
instance.show();
then(() => {
expect(
document.querySelector('.tooltip .tooltip-inner').innerHTML
).toBe('<div>test</div>');
done();
});
});
it('should update title content with HTMLElement', done => {
const updatedContent = 'Updated with div element';
const el = document.createElement('div');
el.textContent = updatedContent;
instance = new Tooltip(reference, {
title: 'Constructor message',
html: true,
});
instance.show();
instance.updateTitleContent(el);
then(() => {
expect(document.querySelector('.tooltip-inner').innerHTML).toBe(
el.outerHTML
);
done();
});
});
it('should use a custom template with empty leading&trailing spaces', done => {
instance = new Tooltip(reference, {
title: 'foobar',
template: `
<div class="tooltip" role="tooltip">
<div class="tooltip-arrow"></div>
<div class="foobar"><div class="tooltip-inner"></div></div>
</div>
`,
});
instance.show();
then(() => {
expect(document.querySelector('.tooltip .foobar').textContent).toBe(
'foobar'
);
done();
});
});