|
| 1 | +/** |
| 2 | + * @license |
| 3 | + * Copyright Google LLC All Rights Reserved. |
| 4 | + * |
| 5 | + * Use of this source code is governed by an MIT-style license that can be |
| 6 | + * found in the LICENSE file at https://angular.io/license |
| 7 | + */ |
| 8 | + |
| 9 | +import {coerceBooleanProperty, coerceNumberProperty} from '@angular/cdk/coercion'; |
| 10 | +import {ComponentHarness, HarnessPredicate} from '@angular/cdk/testing'; |
| 11 | +import {SliderHarnessFilters} from '@angular/material/slider/testing'; |
| 12 | + |
| 13 | +/** |
| 14 | + * Harness for interacting with a MDC mat-slider in tests. |
| 15 | + * @dynamic |
| 16 | + */ |
| 17 | +export class MatSliderHarness extends ComponentHarness { |
| 18 | + static hostSelector = 'mat-slider'; |
| 19 | + |
| 20 | + /** |
| 21 | + * Gets a `HarnessPredicate` that can be used to search for a mat-slider with |
| 22 | + * specific attributes. |
| 23 | + * @param options Options for narrowing the search: |
| 24 | + * - `selector` finds a slider whose host element matches the given selector. |
| 25 | + * - `id` finds a slider with specific id. |
| 26 | + * @return a `HarnessPredicate` configured with the given options. |
| 27 | + */ |
| 28 | + static with(options: SliderHarnessFilters = {}): HarnessPredicate<MatSliderHarness> { |
| 29 | + return new HarnessPredicate(MatSliderHarness, options); |
| 30 | + } |
| 31 | + |
| 32 | + private _textLabel = this.locatorForOptional('.mdc-slider__pin-value-marker'); |
| 33 | + private _trackContainer = this.locatorFor('.mdc-slider__track-container'); |
| 34 | + |
| 35 | + /** Gets the slider's id. */ |
| 36 | + async getId(): Promise<string|null> { |
| 37 | + const id = await (await this.host()).getProperty('id'); |
| 38 | + // In case no id has been specified, the "id" property always returns |
| 39 | + // an empty string. To make this method more explicit, we return null. |
| 40 | + return id !== '' ? id : null; |
| 41 | + } |
| 42 | + |
| 43 | + /** |
| 44 | + * Gets the current display value of the slider. Returns null if the thumb |
| 45 | + * label is disabled. |
| 46 | + */ |
| 47 | + async getDisplayValue(): Promise<string|null> { |
| 48 | + const textLabelEl = await this._textLabel(); |
| 49 | + return textLabelEl ? textLabelEl.text() : null; |
| 50 | + } |
| 51 | + |
| 52 | + /** Gets the current percentage value of the slider. */ |
| 53 | + async getPercentage(): Promise<number> { |
| 54 | + return this._calculatePercentage(await this.getValue()); |
| 55 | + } |
| 56 | + |
| 57 | + /** Gets the current value of the slider. */ |
| 58 | + async getValue(): Promise<number> { |
| 59 | + return coerceNumberProperty(await (await this.host()).getAttribute('aria-valuenow')); |
| 60 | + } |
| 61 | + |
| 62 | + /** Gets the maximum value of the slider. */ |
| 63 | + async getMaxValue(): Promise<number> { |
| 64 | + return coerceNumberProperty(await (await this.host()).getAttribute('aria-valuemax')); |
| 65 | + } |
| 66 | + |
| 67 | + /** Gets the minimum value of the slider. */ |
| 68 | + async getMinValue(): Promise<number> { |
| 69 | + return coerceNumberProperty(await (await this.host()).getAttribute('aria-valuemin')); |
| 70 | + } |
| 71 | + |
| 72 | + /** Whether the slider is disabled. */ |
| 73 | + async isDisabled(): Promise<boolean> { |
| 74 | + const disabled = (await this.host()).getAttribute('aria-disabled'); |
| 75 | + return coerceBooleanProperty(await disabled); |
| 76 | + } |
| 77 | + |
| 78 | + /** Gets the orientation of the slider. */ |
| 79 | + async getOrientation(): Promise<'horizontal'> { |
| 80 | + // "aria-orientation" will always be set to "horizontal" for the MDC |
| 81 | + // slider as there is no vertical slider support yet. |
| 82 | + return (await this.host()).getAttribute('aria-orientation') as Promise<'horizontal'>; |
| 83 | + } |
| 84 | + |
| 85 | + /** |
| 86 | + * Sets the value of the slider by clicking on the slider track. |
| 87 | + * |
| 88 | + * Note that in rare cases the value cannot be set to the exact specified value. This |
| 89 | + * can happen if not every value of the slider maps to a single pixel that could be |
| 90 | + * clicked using mouse interaction. In such cases consider using the keyboard to |
| 91 | + * select the given value or expand the slider's size for a better user experience. |
| 92 | + */ |
| 93 | + async setValue(value: number): Promise<void> { |
| 94 | + // Need to wait for async tasks outside Angular to complete. This is necessary because |
| 95 | + // whenever directionality changes, the slider updates the element dimensions in the next |
| 96 | + // tick (in a timer outside of the NgZone). Since this method relies on the element |
| 97 | + // dimensions to be updated, we wait for the delayed calculation task to complete. |
| 98 | + await this.waitForTasksOutsideAngular(); |
| 99 | + |
| 100 | + const [sliderEl, trackContainer] = |
| 101 | + await Promise.all([this.host(), this._trackContainer()]); |
| 102 | + let percentage = await this._calculatePercentage(value); |
| 103 | + const {width} = await trackContainer.getDimensions(); |
| 104 | + |
| 105 | + // In case the slider is displayed in RTL mode, we need to invert the |
| 106 | + // percentage so that the proper value is set. |
| 107 | + if (await sliderEl.hasClass('mat-slider-invert-mouse-coords')) { |
| 108 | + percentage = 1 - percentage; |
| 109 | + } |
| 110 | + |
| 111 | + // We need to round the new coordinates because creating fake DOM |
| 112 | + // events will cause the coordinates to be rounded down. |
| 113 | + await sliderEl.click(Math.round(width * percentage), 0); |
| 114 | + } |
| 115 | + |
| 116 | + /** |
| 117 | + * Focuses the slider and returns a void promise that indicates when the |
| 118 | + * action is complete. |
| 119 | + */ |
| 120 | + async focus(): Promise<void> { |
| 121 | + return (await this.host()).focus(); |
| 122 | + } |
| 123 | + |
| 124 | + /** |
| 125 | + * Blurs the slider and returns a void promise that indicates when the |
| 126 | + * action is complete. |
| 127 | + */ |
| 128 | + async blur(): Promise<void> { |
| 129 | + return (await this.host()).blur(); |
| 130 | + } |
| 131 | + |
| 132 | + /** Calculates the percentage of the given value. */ |
| 133 | + private async _calculatePercentage(value: number) { |
| 134 | + const [min, max] = await Promise.all([this.getMinValue(), this.getMaxValue()]); |
| 135 | + return (value - min) / (max - min); |
| 136 | + } |
| 137 | +} |
0 commit comments