diff --git a/src/e2e-app/mdc-slider/mdc-slider-e2e.ts b/src/e2e-app/mdc-slider/mdc-slider-e2e.ts index 2aff71228687..8997dcada55f 100644 --- a/src/e2e-app/mdc-slider/mdc-slider-e2e.ts +++ b/src/e2e-app/mdc-slider/mdc-slider-e2e.ts @@ -11,7 +11,7 @@ import {Component} from '@angular/core'; @Component({ selector: 'mdc-slider-e2e', template: ` - + diff --git a/src/material-experimental/mdc-slider/slider.e2e.spec.ts b/src/material-experimental/mdc-slider/slider.e2e.spec.ts index 6ccc1384cb3a..757d67b84fde 100644 --- a/src/material-experimental/mdc-slider/slider.e2e.spec.ts +++ b/src/material-experimental/mdc-slider/slider.e2e.spec.ts @@ -8,7 +8,8 @@ import {clickElementAtPoint, getElement, Point} from '../../cdk/testing/private/e2e'; import {Thumb} from '@material/slider'; -import {browser, by, element, ElementFinder} from 'protractor'; +import {$, browser, by, element, ElementFinder} from 'protractor'; +import {logging} from 'selenium-webdriver'; describe('MDC-based MatSlider', () => { const getStandardSlider = () => element(by.id('standard-slider')); @@ -32,6 +33,29 @@ describe('MDC-based MatSlider', () => { await slideToValue(slider, 35, Thumb.END); expect(await getSliderValue(slider, Thumb.END)).toBe(35); }); + + it('should display the value indicator when focused', async () => { + await focusSliderThumb(slider, Thumb.END); + const rect: DOMRect = await browser.executeScript( + 'return arguments[0].getBoundingClientRect();', + $('.mdc-slider__value-indicator'), + ); + + expect(rect.width).not.toBe(0); + expect(rect.height).not.toBe(0); + + await browser.actions().mouseUp().perform(); + }); + + it('should not cause passive event listener errors when changing the value', async () => { + // retrieving the logs clears the collection + await browser.manage().logs().get('browser'); + await setValueByClick(slider, 15); + + expect(await browser.manage().logs().get('browser')).not.toContain( + jasmine.objectContaining({level: logging.Level.SEVERE}), + ); + }); }); describe('disabled slider', async () => { @@ -96,6 +120,13 @@ async function getSliderValue(slider: ElementFinder, thumbPosition: Thumb): Prom : Number(await inputs[0].getAttribute('value')); } +/** Focuses on the MatSlider at the coordinates corresponding to the given thumb. */ +async function focusSliderThumb(slider: ElementFinder, thumbPosition: Thumb): Promise { + const webElement = await getElement(slider).getWebElement(); + const coords = await getCoordsForValue(slider, await getSliderValue(slider, thumbPosition)); + return await browser.actions().mouseMove(webElement, coords).mouseDown().perform(); +} + /** Clicks on the MatSlider at the coordinates corresponding to the given value. */ async function setValueByClick(slider: ElementFinder, value: number): Promise { return clickElementAtPoint(slider, await getCoordsForValue(slider, value)); diff --git a/src/material-experimental/mdc-slider/slider.ts b/src/material-experimental/mdc-slider/slider.ts index a5e5b6c5df3d..789883465a48 100644 --- a/src/material-experimental/mdc-slider/slider.ts +++ b/src/material-experimental/mdc-slider/slider.ts @@ -781,11 +781,7 @@ export class MatSlider // would prefer to use "mousedown" as the default, for some reason it does not work (the // callback is never triggered). if (this._SUPPORTS_POINTER_EVENTS) { - this._elementRef.nativeElement.addEventListener( - 'pointerdown', - this._layout, - passiveEventListenerOptions, - ); + this._elementRef.nativeElement.addEventListener('pointerdown', this._layout); } else { this._elementRef.nativeElement.addEventListener('mouseenter', this._layout); this._elementRef.nativeElement.addEventListener( @@ -799,11 +795,7 @@ export class MatSlider /** Removes the event listener that keeps sync the slider UI and the foundation in sync. */ _removeUISyncEventListener(): void { if (this._SUPPORTS_POINTER_EVENTS) { - this._elementRef.nativeElement.removeEventListener( - 'pointerdown', - this._layout, - passiveEventListenerOptions, - ); + this._elementRef.nativeElement.removeEventListener('pointerdown', this._layout); } else { this._elementRef.nativeElement.removeEventListener('mouseenter', this._layout); this._elementRef.nativeElement.removeEventListener( @@ -1134,10 +1126,10 @@ class SliderAdapter implements MDCSliderAdapter { getThumbKnobWidth = (thumbPosition: Thumb): number => { return this._delegate._getKnobElement(thumbPosition).getBoundingClientRect().width; }; - getThumbBoundingClientRect = (thumbPosition: Thumb): ClientRect => { + getThumbBoundingClientRect = (thumbPosition: Thumb): DOMRect => { return this._delegate._getThumbElement(thumbPosition).getBoundingClientRect(); }; - getBoundingClientRect = (): ClientRect => { + getBoundingClientRect = (): DOMRect => { return this._delegate._elementRef.nativeElement.getBoundingClientRect(); }; getValueIndicatorContainerWidth = (thumbPosition: Thumb): number => {