blob: bd127893d7501b61fafdcadf3691356b07b564f6 [file] [log] [blame]
/**
* @license
* Copyright (C) 2018 The Android Open Source Project
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
import '../../test/common-test-setup-karma.js';
import {HovercardMixin} from './hovercard-mixin.js';
import {html, LitElement} from 'lit';
import {customElement} from 'lit/decorators';
import {MockPromise, mockPromise} from '../../test/test-utils.js';
const base = HovercardMixin(LitElement);
declare global {
interface HTMLElementTagNameMap {
'hovercard-mixin-test': HovercardMixinTest;
}
}
@customElement('hovercard-mixin-test')
class HovercardMixinTest extends base {
constructor() {
super();
this.for = 'foo';
}
override render() {
return html`<div id="container"><slot></slot></div>`;
}
}
const basicFixture = fixtureFromElement('hovercard-mixin-test');
suite('gr-hovercard tests', () => {
let element: HovercardMixinTest;
let button: HTMLElement;
let testPromise: MockPromise;
setup(() => {
testPromise = mockPromise();
button = document.createElement('button');
button.innerHTML = 'Hello';
button.setAttribute('id', 'foo');
document.body.appendChild(button);
element = basicFixture.instantiate();
});
teardown(() => {
element.hide(new MouseEvent('click'));
button?.remove();
});
test('updatePosition', async () => {
// Test that the correct style properties have at least been set.
element.position = 'bottom';
element.updatePosition();
await element.updateComplete;
assert.typeOf(element.style.getPropertyValue('left'), 'string');
assert.typeOf(element.style.getPropertyValue('top'), 'string');
assert.typeOf(element.style.getPropertyValue('paddingTop'), 'string');
assert.typeOf(element.style.getPropertyValue('marginTop'), 'string');
const parentRect = document.documentElement.getBoundingClientRect();
const targetRect = element!._target!.getBoundingClientRect();
const thisRect = element.getBoundingClientRect();
const targetLeft = targetRect.left - parentRect.left;
const targetTop = targetRect.top - parentRect.top;
const pixelCompare = (pixel: string) =>
Math.round(parseInt(pixel.substring(0, pixel.length - 1), 10));
assert.equal(
pixelCompare(element.style.left),
pixelCompare(`${targetLeft + (targetRect.width - thisRect.width) / 2}px`)
);
assert.equal(
pixelCompare(element.style.top),
pixelCompare(`${targetTop + targetRect.height + element.offset}px`)
);
});
test('hide', () => {
element.hide(new MouseEvent('click'));
const style = getComputedStyle(element);
assert.isFalse(element._isShowing);
assert.isFalse(element.classList.contains('hovered'));
assert.equal(style.display, 'none');
assert.notEqual(element.container, element.parentNode);
});
test('show', async () => {
await element.show();
await element.updateComplete;
const style = getComputedStyle(element);
assert.isTrue(element._isShowing);
assert.isTrue(element.classList.contains('hovered'));
assert.equal(style.opacity, '1');
assert.equal(style.visibility, 'visible');
});
test('debounceShow does not show immediately', async () => {
element.debounceShowBy(100);
setTimeout(() => testPromise.resolve(), 0);
await testPromise;
assert.isFalse(element._isShowing);
});
test('debounceShow shows after delay', async () => {
element.debounceShowBy(1);
setTimeout(() => testPromise.resolve(), 10);
await testPromise;
assert.isTrue(element._isShowing);
});
test('card is scheduled to show on enter and hides on leave', async () => {
const button = document.querySelector('button');
const enterPromise = mockPromise();
button!.addEventListener('mouseenter', () => enterPromise.resolve());
const leavePromise = mockPromise();
button!.addEventListener('mouseleave', () => leavePromise.resolve());
assert.isFalse(element._isShowing);
button!.dispatchEvent(new CustomEvent('mouseenter'));
await enterPromise;
await flush();
assert.isTrue(element.isScheduledToShow);
element!.showTask!.flush();
assert.isTrue(element._isShowing);
assert.isFalse(element.isScheduledToShow);
button!.dispatchEvent(new CustomEvent('mouseleave'));
await leavePromise;
assert.isTrue(element.isScheduledToHide);
assert.isTrue(element._isShowing);
element!.hideTask!.flush();
assert.isFalse(element.isScheduledToShow);
assert.isFalse(element._isShowing);
});
test('card should disappear on click', async () => {
const button = document.querySelector('button');
const enterPromise = mockPromise();
const clickPromise = mockPromise();
button!.addEventListener('mouseenter', () => enterPromise.resolve());
button!.addEventListener('click', () => clickPromise.resolve());
assert.isFalse(element._isShowing);
button!.dispatchEvent(new CustomEvent('mouseenter'));
await enterPromise;
await flush();
assert.isTrue(element.isScheduledToShow);
button!.click();
await clickPromise;
assert.isFalse(element.isScheduledToShow);
assert.isFalse(element._isShowing);
});
});