mirror of
https://github.com/material-components/material-web.git
synced 2024-09-11 13:46:10 +03:00
89 lines
2.6 KiB
TypeScript
89 lines
2.6 KiB
TypeScript
/**
|
|
* @license
|
|
* Copyright 2023 Google LLC
|
|
* SPDX-License-Identifier: Apache-2.0
|
|
*/
|
|
|
|
import {Harness} from '../testing/harness.js';
|
|
|
|
import {Slider} from './internal/slider.js';
|
|
|
|
/**
|
|
* Test harness for slider.
|
|
*/
|
|
export class SliderHarness extends Harness<Slider> {
|
|
override async getInteractiveElement() {
|
|
await this.element.updateComplete;
|
|
return this.element.renderRoot.querySelector<HTMLInputElement>(
|
|
'input.end',
|
|
)!;
|
|
}
|
|
|
|
getInputs() {
|
|
return [
|
|
this.element.renderRoot.querySelector<HTMLInputElement>('input.end')!,
|
|
this.element.renderRoot.querySelector<HTMLInputElement>('input.start')!,
|
|
];
|
|
}
|
|
getHandles() {
|
|
return [
|
|
this.element.renderRoot.querySelector('.handle.end')!,
|
|
this.element.renderRoot.querySelector('.handle.start')!,
|
|
];
|
|
}
|
|
|
|
getLabels() {
|
|
return Array.from(this.element.renderRoot.querySelectorAll('.label'));
|
|
}
|
|
|
|
isLabelShowing() {
|
|
const labels = this.getLabels();
|
|
return labels.some((l) => {
|
|
// remove transition to avoid the need to wait for it.
|
|
(l as HTMLElement).style.setProperty('transition', 'none');
|
|
const {width} = l.getBoundingClientRect();
|
|
(l as HTMLElement).style.removeProperty('transition');
|
|
return width > 0;
|
|
});
|
|
}
|
|
|
|
async simulateValueInteraction(value: number, el?: HTMLInputElement) {
|
|
if (!el) {
|
|
el = this.getInputs()[0];
|
|
}
|
|
el.focus();
|
|
el.dispatchEvent(new Event('pointerdown', {bubbles: true, composed: true}));
|
|
el.value = String(value);
|
|
el.dispatchEvent(new Event('input', {bubbles: true, composed: true}));
|
|
el.dispatchEvent(new Event('pointerup', {bubbles: true, composed: true}));
|
|
el.dispatchEvent(new Event('change', {bubbles: true}));
|
|
await this.element.updateComplete;
|
|
}
|
|
|
|
private positionEventAtHandle(init: PointerEventInit, startHandle = false) {
|
|
const handle = this.getHandles()[startHandle ? 1 : 0];
|
|
const {x, y} = handle.getBoundingClientRect();
|
|
return {...init, clientX: x, clientY: y, screenX: x, screenY: y};
|
|
}
|
|
|
|
protected override simulateStartHover(
|
|
element: HTMLElement,
|
|
init: PointerEventInit = {},
|
|
) {
|
|
const i = this.getInputs().indexOf(element as HTMLInputElement);
|
|
if (i >= 0 || element === this.element) {
|
|
init = this.positionEventAtHandle(init, i === 1);
|
|
}
|
|
super.simulateStartHover(element, init);
|
|
}
|
|
|
|
protected override simulateMousePress(
|
|
element: HTMLElement,
|
|
init: PointerEventInit = {},
|
|
) {
|
|
super.simulateMousePress(element, init);
|
|
// advance beyond RAF, which is used by the element's pointerDown handler.
|
|
jasmine.clock().tick(1);
|
|
}
|
|
}
|