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

Resolves COMP-191.

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

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/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,144 @@
+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';
+
+let fixture: ComponentFixture<SliderHarnessTest>;
+let loader: HarnessLoader;
+let sliderHarness: typeof MatSliderHarness;
+
+describe('MatSliderHarness', () => {
+  describe('non-MDC-based', () => {
+    beforeEach(async () => {
+      await TestBed
+          .configureTestingModule({
+            imports: [MatSliderModule, ReactiveFormsModule],
+            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 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>
+    <mat-slider [id]="sliderId" [displayWith]="displayFn"></mat-slider>
+    <mat-slider min="200" max="250" value="225" [displayWith]="displayFn" vertical></mat-slider>
+  `
+})
+class SliderHarnessTest {
+  sliderId = 'my-slider';
+
+  displayFn(value: number|null) {
+    if (!value) {
+      return 'Null';
+    }
+    return `#${value}`;
+  }
+}

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

@@ -0,0 +1,96 @@
+/**
+ * @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
+ */
+
+import {ComponentHarness, HarnessPredicate} from '@angular/cdk-experimental/testing';
+import {coerceBooleanProperty, coerceNumberProperty} from '@angular/cdk/coercion';
+import {SliderHarnessFilters} from './slider-harness-filters';
+
+/**
+ * Harness for interacting with a standard mat-slider in tests.
+ * @dynamic
+ */
+export class MatSliderHarness extends ComponentHarness {
+  static hostSelector = 'mat-slider';
+
+  /**
+   * Gets a `HarnessPredicate` that can be used to search for a mat-slider with
+   * specific attributes.
+   * @param options Options for narrowing the search:
+   *   - `id` finds a slider with specific id.
+   * @return a `HarnessPredicate` configured with the given options.
+   */
+  static with(options: SliderHarnessFilters = {}): HarnessPredicate<MatSliderHarness> {
+    return new HarnessPredicate(MatSliderHarness)
+        .addOption('id', options.id, async (harness, id) => (await harness.getId()) === id);
+  }
+
+  private _textLabel = this.locatorFor('.mat-slider-thumb-label-text');
+
+  /** Gets the slider's id. */
+  async getId(): Promise<string|null> {
+    const id = await (await this.host()).getAttribute('id');
+    // In case no id has been specified, the "id" property always returns
+    // an empty string. To make this method more explicit, we return null.
+    return id !== '' ? id : null;
+  }
+
+  /** Gets the current display value of the slider. */
+  async getDisplayValue(): Promise<string> {
+    return (await this._textLabel()).text();
+  }
+
+  /** 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);
+  }
+
+  /** Gets the current value of the slider. */
+  async getValue(): Promise<number> {
+    return coerceNumberProperty(await (await this.host()).getAttribute('aria-valuenow'));
+  }
+
+  /** Gets the maximum value of the slider. */
+  async getMaxValue(): Promise<number> {
+    return coerceNumberProperty(await (await this.host()).getAttribute('aria-valuemax'));
+  }
+
+  /** Gets the minimum value of the slider. */
+  async getMinValue(): Promise<number> {
+    return coerceNumberProperty(await (await this.host()).getAttribute('aria-valuemin'));
+  }
+
+  /** Whether the slider is disabled. */
+  async isDisabled(): Promise<boolean> {
+    const disabled = (await this.host()).getAttribute('aria-disabled');
+    return coerceBooleanProperty(await disabled);
+  }
+
+  /** Gets the orientation of the slider. */
+  async getOrientation(): Promise<'horizontal'|'vertical'> {
+    // "aria-orientation" will always be set to either "horizontal" or "vertical".
+    return (await this.host()).getAttribute('aria-orientation') as any;
+  }
+
+  /**
+   * Focuses the slider and returns a void promise that indicates when the
+   * action is complete.
+   */
+  async focus(): Promise<void> {
+    return (await this.host()).focus();
+  }
+
+  /**
+   * Blurs the slider and returns a void promise that indicates when the
+   * action is complete.
+   */
+  async blur(): Promise<void> {
+    return (await this.host()).blur();
+  }
+}

src/material/slider/slider.ts

@@ -656,6 +656,8 @@ 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);