fixup! feat(material-experimental): add test harness for slider

Support setting value

Author: devversion

WORKSPACE

@@ -107,4 +107,4 @@ rbe_autoconfig(
     # We can't use the default "ubuntu16_04" RBE image provided by the autoconfig because we need
     # a specific Linux kernel that comes with "libx11" in order to run headless browser tests.
     repository = "google/rbe-ubuntu16-04-webtest",
-)
+)

src/cdk-experimental/testing/element-dimensions.ts

@@ -0,0 +1,17 @@
+/**
+ * @license
+ * Copyright Google LLC All Rights Reserved.
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://angular.io/license
+ */
+
+ /**
+  * Dimensions for element size and its position relative to the viewport.
+  */
+export interface ElementDimensions {
+  top: number;
+  left: number;
+  width: number;
+  height: number;
+}

src/cdk-experimental/testing/protractor/protractor-element.ts

@@ -8,6 +8,7 @@
 
 import {browser, ElementFinder} from 'protractor';
 import {TestElement} from '../test-element';
+import {ElementDimensions} from '../element-dimensions';
 
 /** A `TestElement` implementation for Protractor. */
 export class ProtractorElement implements TestElement {
@@ -21,8 +22,10 @@ export class ProtractorElement implements TestElement {
     return this.element.clear();
   }
 
-  async click(): Promise<void> {
-    return this.element.click();
+  async click(relativeX = 0, relativeY = 0): Promise<void> {
+    await browser.actions()
+      .mouseMove(await this.element.getWebElement(), {x: relativeX, y: relativeY})
+      .click();
   }
 
   async focus(): Promise<void> {
@@ -55,4 +58,10 @@ export class ProtractorElement implements TestElement {
     const classes = (await this.getAttribute('class')) || '';
     return new Set(classes.split(/\s+/).filter(c => c)).has(name);
   }
+
+  async getDimensions(): Promise<ElementDimensions> {
+    const {width, height} = await this.element.getSize();
+    const {x: left, y: top} = await this.element.getLocation();
+    return {width, height, left, top};
+  }
 }

src/cdk-experimental/testing/test-element.ts

@@ -6,6 +6,8 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
+ import {ElementDimensions} from './element-dimensions';
+
 /**
  * This acts as a common interface for DOM elements across both unit and e2e tests. It is the
  * interface through which the ComponentHarness interacts with the component's DOM.
@@ -18,7 +20,7 @@ export interface TestElement {
   clear(): Promise<void>;
 
   /** Click the element. */
-  click(): Promise<void>;
+  click(relativeX?: number, relativeY?: number): Promise<void>;
 
   /** Focus the element. */
   focus(): Promise<void>;
@@ -46,4 +48,7 @@ export interface TestElement {
 
   /** Checks whether the element has the given class. */
   hasClass(name: string): Promise<boolean>;
+
+  /** Gets the dimensions of the element. */
+  getDimensions(): Promise<ElementDimensions>;
 }

src/cdk-experimental/testing/testbed/unit-test-element.ts

@@ -14,6 +14,7 @@ import {
   triggerFocus
 } from '@angular/cdk/testing';
 import {TestElement} from '../test-element';
+import {ElementDimensions} from '../element-dimensions';
 
 function isTextInput(element: Element): element is HTMLInputElement | HTMLTextAreaElement {
   return element.nodeName.toLowerCase() === 'input' ||
@@ -41,9 +42,14 @@ export class UnitTestElement implements TestElement {
     await this._stabilize();
   }
 
-  async click(): Promise<void> {
+  async click(relativeX = 0, relativeY = 0): Promise<void> {
     await this._stabilize();
-    dispatchMouseEvent(this.element, 'click');
+    const {left, top} = this.element.getBoundingClientRect();
+    const pageX = left + relativeX;
+    const pageY = top + relativeY;
+    dispatchMouseEvent(this.element, 'mousedown', pageX, pageY);
+    dispatchMouseEvent(this.element, 'mouseup', pageX, pageY);
+    dispatchMouseEvent(this.element, 'click', pageX, pageY);
     await this._stabilize();
   }
 
@@ -105,4 +111,9 @@ export class UnitTestElement implements TestElement {
     await this._stabilize();
     return this.element.classList.contains(name);
   }
+
+  async getDimensions(): Promise<ElementDimensions> {
+    await this._stabilize();
+    return this.element.getBoundingClientRect();
+  }
 }

src/material-experimental/mdc-slider/harness/BUILD.bazel

@@ -28,4 +28,4 @@ ng_test_library(
 ng_web_test_suite(
     name = "tests",
     deps = [":harness_tests"],
-)
+)

src/material-experimental/mdc-slider/harness/slider-harness.spec.ts

@@ -2,7 +2,6 @@ import {HarnessLoader} from '@angular/cdk-experimental/testing';
 import {TestbedHarnessEnvironment} from '@angular/cdk-experimental/testing/testbed';
 import {Component} from '@angular/core';
 import {ComponentFixture, TestBed} from '@angular/core/testing';
-import {ReactiveFormsModule} from '@angular/forms';
 import {MatSliderModule} from '@angular/material/slider';
 import {MatSliderHarness} from './slider-harness';
 
@@ -15,7 +14,7 @@ describe('MatSliderHarness', () => {
     beforeEach(async () => {
       await TestBed
           .configureTestingModule({
-            imports: [MatSliderModule, ReactiveFormsModule],
+            imports: [MatSliderModule],
             declarations: [SliderHarnessTest],
           })
           .compileComponents();
@@ -113,6 +112,19 @@ function runTests() {
     expect(getActiveElementTagName()).not.toBe('mat-slider');
   });
 
+  it('should be able to set value of slider', async () => {
+    const sliders = await loader.getAllHarnesses(sliderHarness);
+    expect(await sliders[1].getValue()).toBe(0);
+    expect(await sliders[2].getValue()).toBe(225);
+
+    await sliders[1].setValue(33);
+    await sliders[2].setValue(300);
+
+    expect(await sliders[1].getValue()).toBe(33);
+    // value should be clamped to the maximum.
+    expect(await sliders[2].getValue()).toBe(250);
+  });
+
   it('should get disabled state of slider', async () => {
     const sliders = await loader.getAllHarnesses(sliderHarness);
     expect(await sliders[0].isDisabled()).toBe(true);

src/material-experimental/mdc-slider/harness/slider-harness.ts

@@ -30,6 +30,7 @@ export class MatSliderHarness extends ComponentHarness {
   }
 
   private _textLabel = this.locatorFor('.mat-slider-thumb-label-text');
+  private _wrapper = this.locatorFor('.mat-slider-wrapper');
 
   /** Gets the slider's id. */
   async getId(): Promise<string|null> {
@@ -46,9 +47,7 @@ export class MatSliderHarness extends ComponentHarness {
 
   /** Gets the current percentage value of the slider. */
   async getPercentage(): Promise<number> {
-    const min = await this.getMinValue();
-    const max = await this.getMaxValue();
-    return ((await this.getValue() || 0) - min) / (max - min);
+    return this._calculatePercentage(await this.getValue());
   }
 
   /** Gets the current value of the slider. */
@@ -78,6 +77,28 @@ export class MatSliderHarness extends ComponentHarness {
     return (await this.host()).getAttribute('aria-orientation') as any;
   }
 
+  /** Sets the value of the slide by clicking on the slider track. */
+  async setValue(value: number): Promise<void> {
+    const sliderEl = await this.host();
+    const wrapperEl = await this._wrapper();
+    const {height, width} = await wrapperEl.getDimensions();
+    const isVertical = await this.getOrientation() === 'vertical';
+    let percentage = await this._calculatePercentage(value);
+
+    // In case the slider is inverted in LTR mode or not inverted in RTL mode,
+    // we need to invert the percentage so that the proper value is set.
+    if (await sliderEl.hasClass('mat-slider-invert-mouse-coords')) {
+      percentage = 1 - percentage;
+    }
+
+    // We need to round the new coordinates because creating fake DOM
+    // events will cause the coordinates to be rounded down.
+    const relativeX = isVertical ? 0 : Math.round(width * percentage);
+    const relativeY = isVertical ? Math.round(height * percentage) : 0;
+
+    await wrapperEl.click(relativeX, relativeY);
+  }
+
   /**
    * Focuses the slider and returns a void promise that indicates when the
    * action is complete.
@@ -93,4 +114,11 @@ export class MatSliderHarness extends ComponentHarness {
   async blur(): Promise<void> {
     return (await this.host()).blur();
   }
+
+  /** Calculates the percentage of the given value. */
+  private async _calculatePercentage(value: number) {
+    const min = await this.getMinValue();
+    const max = await this.getMaxValue();
+    return (value - min) / (max - min);
+  }
 }

src/material/slider/slider.ts

@@ -132,6 +132,7 @@ const _MatSliderMixinBase:
     '[class.mat-slider-has-ticks]': 'tickInterval',
     '[class.mat-slider-horizontal]': '!vertical',
     '[class.mat-slider-axis-inverted]': '_invertAxis',
+    '[class.mat-slider-invert-mouse-coords]': '_shouldInvertMouseCoords()',
     '[class.mat-slider-sliding]': '_isSliding',
     '[class.mat-slider-thumb-label-showing]': 'thumbLabel',
     '[class.mat-slider-vertical]': 'vertical',
@@ -451,7 +452,7 @@ export class MatSlider extends _MatSliderMixinBase
    * Whether mouse events should be converted to a slider position by calculating their distance
    * from the right or bottom edge of the slider as opposed to the top or left.
    */
-  private _shouldInvertMouseCoords() {
+  _shouldInvertMouseCoords() {
     return (this._getDirection() == 'rtl' && !this.vertical) ? !this._invertAxis : this._invertAxis;
   }
 
@@ -656,8 +657,6 @@ export class MatSlider extends _MatSliderMixinBase
     let size = this.vertical ? this._sliderDimensions.height : this._sliderDimensions.width;
     let posComponent = this.vertical ? pos.y : pos.x;
 
-    console.error(posComponent, offset, size, (posComponent - offset) / size);
-
     // The exact value is calculated from the event and used to find the closest snap value.
     let percent = this._clamp((posComponent - offset) / size);
 

tools/public_api_guard/material/slider.d.ts

@@ -47,6 +47,7 @@ export declare class MatSlider extends _MatSliderMixinBase implements ControlVal
     _onSlide(event: HammerInput): void;
     _onSlideEnd(): void;
     _onSlideStart(event: HammerInput | null): void;
+    _shouldInvertMouseCoords(): boolean;
     blur(): void;
     focus(): void;
     ngOnDestroy(): void;