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,11 @@ 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()
+      .perform();
   }
 
   async focus(): Promise<void> {
@@ -55,4 +59,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/cdk-experimental/testing/tests/protractor.e2e.spec.ts

@@ -196,6 +196,11 @@ describe('ProtractorHarnessEnvironment', () => {
         .toBe(await browser.driver.switchTo().activeElement().getAttribute('id'));
     });
 
+    it('should be able to retrieve dimensions', async () => {
+      const dimensions = await (await harness.title()).getDimensions();
+      expect(dimensions).toEqual(jasmine.objectContaining({height: 100, width: 200}));
+    });
+
     it('should be able to hover', async () => {
       const host = await harness.host();
       let classAttr = await host.getAttribute('class');
@@ -217,7 +222,7 @@ describe('ProtractorHarnessEnvironment', () => {
 
     it('should be able to getCssValue', async () => {
       const title = await harness.title();
-      expect(await title.getCssValue('height')).toBe('50px');
+      expect(await title.getCssValue('height')).toBe('100px');
     });
 
     it('should focus and blur element', async () => {

src/cdk-experimental/testing/tests/test-main-component.html

@@ -1,4 +1,4 @@
-<h1 style="height: 50px">Main Component</h1>
+<h1 style="height: 100px; width: 200px;">Main Component</h1>
 <div id="username">Hello {{username}} from Angular 2!</div>
 <div class="counters">
   <button (click)="click()">Up</button><br>

src/cdk-experimental/testing/tests/testbed.spec.ts

@@ -215,6 +215,11 @@ describe('TestbedHarnessEnvironment', () => {
       expect(await input.getAttribute('id')).toBe(document.activeElement!.id);
     });
 
+    it('should be able to retrieve dimensions', async () => {
+      const dimensions = await (await harness.title()).getDimensions();
+      expect(dimensions).toEqual(jasmine.objectContaining({height: 100, width: 200}));
+    });
+
     it('should be able to hover', async () => {
       const host = await harness.host();
       let classAttr = await host.getAttribute('class');
@@ -236,7 +241,7 @@ describe('TestbedHarnessEnvironment', () => {
 
     it('should be able to getCssValue', async () => {
       const title = await harness.title();
-      expect(await title.getCssValue('height')).toBe('50px');
+      expect(await title.getCssValue('height')).toBe('100px');
     });
 
     it('should focus and blur element', async () => {

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,37 @@ 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);
+
+    // should not retrieve incorrect values in case slider is inverted
+    // due to RTL page layout.
+    fixture.componentInstance.dir = 'rtl';
+    fixture.detectChanges();
+
+    await sliders[1].setValue(80);
+    expect(await sliders[1].getValue()).toBe(80);
+
+    // should not retrieve incorrect values in case sliders are inverted.
+    fixture.componentInstance.invertSliders = true;
+    fixture.detectChanges();
+
+    await sliders[1].setValue(75);
+    await sliders[2].setValue(210);
+
+    expect(await sliders[1].getValue()).toBe(75);
+    expect(await sliders[2].getValue()).toBe(210);
+  });
+
   it('should get disabled state of slider', async () => {
     const sliders = await loader.getAllHarnesses(sliderHarness);
     expect(await sliders[0].isDisabled()).toBe(true);
@@ -128,12 +158,19 @@ function getActiveElementTagName() {
 @Component({
   template: `
     <mat-slider value="50" disabled></mat-slider>
-    <mat-slider [id]="sliderId" [displayWith]="displayFn"></mat-slider>
-    <mat-slider min="200" max="250" value="225" [displayWith]="displayFn" vertical></mat-slider>
-  `
+    <div [dir]="dir">
+      <mat-slider [id]="sliderId" [displayWith]="displayFn"
+                  [invert]="invertSliders"></mat-slider>
+    </div>
+    <mat-slider min="200" max="250" value="225" [displayWith]="displayFn" vertical
+                [invert]="invertSliders">
+    </mat-slider>
+    `
 })
 class SliderHarnessTest {
   sliderId = 'my-slider';
+  invertSliders = false;
+  dir = 'ltr';
 
   displayFn(value: number|null) {
     if (!value) {

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,35 @@ 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.
+   *
+   * Note that in rare cases the value cannot be set to the exact specified value. This
+   * can happen if not every value of the slider maps to a single pixel that could be
+   * clicked using mouse interaction. In such cases consider using the keyboard to
+   * select the given value or expand the slider's size for a better user experience.
+   */
+  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 +121,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;