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

Resolves COMP-191.

ds

Author: devversion

.github/CODEOWNERS

@@ -97,6 +97,8 @@
 # Note to implementer: please repossess
 /src/material-experimental/mdc-radio/**            @mmalerba
 /src/material-experimental/mdc-slide-toggle/**     @crisbeto
+# Note to implementer: please repossess
+/src/material-experimental/mdc-slider/**           @devversion
 /src/material-experimental/mdc-tabs/**             @crisbeto
 /src/material-experimental/mdc-theming/**          @mmalerba
 /src/material-experimental/mdc-typography/**       @mmalerba

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: 50, width: 200}));
+    });
+
     it('should be able to hover', async () => {
       const host = await harness.host();
       let classAttr = await host.getAttribute('class');

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

@@ -1,4 +1,4 @@
-<h1 style="height: 50px">Main Component</h1>
+<h1 style="height: 50px; 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: 50, width: 200}));
+    });
+
     it('should be able to hover', async () => {
       const host = await harness.host();
       let classAttr = await host.getAttribute('class');

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

@@ -0,0 +1,31 @@
+package(default_visibility = ["//visibility:public"])
+
+load("//tools:defaults.bzl", "ng_test_library", "ng_web_test_suite", "ts_library")
+
+ts_library(
+    name = "harness",
+    srcs = glob(
+        ["**/*.ts"],
+        exclude = ["**/*.spec.ts"],
+    ),
+    deps = [
+        "//src/cdk-experimental/testing",
+        "//src/cdk/coercion",
+    ],
+)
+
+ng_test_library(
+    name = "harness_tests",
+    srcs = glob(["**/*.spec.ts"]),
+    deps = [
+        ":harness",
+        "//src/cdk-experimental/testing",
+        "//src/cdk-experimental/testing/testbed",
+        "//src/material/slider",
+    ],
+)
+
+ng_web_test_suite(
+    name = "tests",
+    deps = [":harness_tests"],
+)

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

@@ -0,0 +1,11 @@
+/**
+ * @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
+ */
+
+export type SliderHarnessFilters = {
+  id?: string;
+};

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

@@ -0,0 +1,181 @@
+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 {MatSliderModule} from '@angular/material/slider';
+import {MatSliderHarness} from './slider-harness';
+
+let fixture: ComponentFixture<SliderHarnessTest>;
+let loader: HarnessLoader;
+let sliderHarness: typeof MatSliderHarness;
+
+describe('MatSliderHarness', () => {
+  describe('non-MDC-based', () => {
+    beforeEach(async () => {
+      await TestBed
+          .configureTestingModule({
+            imports: [MatSliderModule],
+            declarations: [SliderHarnessTest],
+          })
+          .compileComponents();
+
+      fixture = TestBed.createComponent(SliderHarnessTest);
+      fixture.detectChanges();
+      loader = TestbedHarnessEnvironment.loader(fixture);
+      sliderHarness = MatSliderHarness;
+    });
+
+    runTests();
+  });
+
+  describe(
+      'MDC-based',
+      () => {
+          // TODO: run tests for MDC based slider once implemented.
+      });
+});
+
+/** Shared tests to run on both the original and MDC-based sliders. */
+function runTests() {
+  it('should load all slider harnesses', async () => {
+    const sliders = await loader.getAllHarnesses(sliderHarness);
+    expect(sliders.length).toBe(3);
+  });
+
+  it('should load slider harness by id', async () => {
+    const sliders = await loader.getAllHarnesses(sliderHarness.with({id: 'my-slider'}));
+    expect(sliders.length).toBe(1);
+  });
+
+  it('should get id of slider', async () => {
+    const sliders = await loader.getAllHarnesses(sliderHarness);
+    expect(await sliders[0].getId()).toBe(null);
+    expect(await sliders[1].getId()).toBe('my-slider');
+    expect(await sliders[2].getId()).toBe(null);
+  });
+
+  it('should get value of slider', async () => {
+    const sliders = await loader.getAllHarnesses(sliderHarness);
+    expect(await sliders[0].getValue()).toBe(50);
+    expect(await sliders[1].getValue()).toBe(0);
+    expect(await sliders[2].getValue()).toBe(225);
+  });
+
+  it('should get percentage of slider', async () => {
+    const sliders = await loader.getAllHarnesses(sliderHarness);
+    expect(await sliders[0].getPercentage()).toBe(0.5);
+    expect(await sliders[1].getPercentage()).toBe(0);
+    expect(await sliders[2].getPercentage()).toBe(0.5);
+  });
+
+  it('should get max value of slider', async () => {
+    const sliders = await loader.getAllHarnesses(sliderHarness);
+    expect(await sliders[0].getMaxValue()).toBe(100);
+    expect(await sliders[1].getMaxValue()).toBe(100);
+    expect(await sliders[2].getMaxValue()).toBe(250);
+  });
+
+  it('should get min value of slider', async () => {
+    const sliders = await loader.getAllHarnesses(sliderHarness);
+    expect(await sliders[0].getMinValue()).toBe(0);
+    expect(await sliders[1].getMinValue()).toBe(0);
+    expect(await sliders[2].getMinValue()).toBe(200);
+  });
+
+  it('should get display value of slider', async () => {
+    const sliders = await loader.getAllHarnesses(sliderHarness);
+    expect(await sliders[0].getDisplayValue()).toBe('50');
+    expect(await sliders[1].getDisplayValue()).toBe('Null');
+    expect(await sliders[2].getDisplayValue()).toBe('#225');
+  });
+
+  it('should get orientation of slider', async () => {
+    const sliders = await loader.getAllHarnesses(sliderHarness);
+    expect(await sliders[0].getOrientation()).toBe('horizontal');
+    expect(await sliders[1].getOrientation()).toBe('horizontal');
+    expect(await sliders[2].getOrientation()).toBe('vertical');
+  });
+
+  it('should be able to focus slider', async () => {
+    const [slider] = await loader.getAllHarnesses(sliderHarness);
+    expect(getActiveElementTagName()).not.toBe('mat-slider');
+    await slider.focus();
+    expect(getActiveElementTagName()).toBe('mat-slider');
+  });
+
+  it('should be able to blur slider', async () => {
+    const [slider] = await loader.getAllHarnesses(sliderHarness);
+    expect(getActiveElementTagName()).not.toBe('mat-slider');
+    await slider.focus();
+    expect(getActiveElementTagName()).toBe('mat-slider');
+    await slider.blur();
+    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);
+    expect(await sliders[1].isDisabled()).toBe(false);
+    expect(await sliders[2].isDisabled()).toBe(false);
+  });
+}
+
+function getActiveElementTagName() {
+  return document.activeElement ? document.activeElement.tagName.toLowerCase() : '';
+}
+
+@Component({
+  template: `
+    <mat-slider value="50" disabled></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) {
+      return 'Null';
+    }
+    return `#${value}`;
+  }
+}