feat(material-experimental/mdc-slider): add test harnesses (#22648)

Adds test harnesses for the MDC-based slider components.

Author: crisbeto

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

@@ -12,9 +12,7 @@ ts_library(
     deps = [
         "//src/cdk/coercion",
         "//src/cdk/testing",
-        "//src/material/slider/testing",
-        "@npm//rxjs",
-        "@npm//zone.js",
+        "//src/material-experimental/mdc-slider",
     ],
 )
 
@@ -23,16 +21,16 @@ ng_test_library(
     srcs = glob(["**/*.spec.ts"]),
     deps = [
         ":testing",
+        "//src/cdk/testing",
+        "//src/cdk/testing/testbed",
         "//src/material-experimental/mdc-slider",
         "//src/material/slider/testing:harness_tests_lib",
     ],
 )
 
 ng_web_test_suite(
     name = "unit_tests",
-    static_files = [
-        "@npm//:node_modules/@material/slider/dist/mdc.slider.js",
-    ],
+    static_files = ["@npm//:node_modules/@material/slider/dist/mdc.slider.js"],
     deps = [
         ":unit_tests_lib",
         "//src/material-experimental:mdc_require_config.js",

src/material-experimental/mdc-slider/testing/public-api.ts

@@ -6,5 +6,6 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
-export {SliderHarnessFilters} from '@angular/material/slider/testing';
-export {MatSliderHarness} from './slider-harness';
+export * from './slider-harness';
+export * from './slider-thumb-harness';
+export * from './slider-harness-filters';

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

@@ -0,0 +1,26 @@
+/**
+ * @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 {BaseHarnessFilters} from '@angular/cdk/testing';
+
+/** Possible positions of a slider thumb. */
+export const enum ThumbPosition {
+  START,
+  END
+}
+
+/** A set of criteria that can be used to filter a list of `MatSliderHarness` instances. */
+export interface SliderHarnessFilters extends BaseHarnessFilters {
+  /** Filters out only range/non-range sliders. */
+  isRange?: boolean;
+}
+
+/** A set of criteria that can be used to filter a list of `MatSliderThumbHarness` instances. */
+export interface SliderThumbHarnessFilters extends BaseHarnessFilters {
+  /** Filters out slider thumbs with a particular position. */
+  position?: ThumbPosition;
+}

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

@@ -6,11 +6,189 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
-/* tslint:disable-next-line:no-unused-variable */
-import {MatSlider} from '../index';
-
-// TODO(wagnermaciel): Implement this in a separate PR
+import {Component} from '@angular/core';
+import {ComponentFixture, TestBed} from '@angular/core/testing';
+import {HarnessLoader, parallel} from '@angular/cdk/testing';
+import {TestbedHarnessEnvironment} from '@angular/cdk/testing/testbed';
+import {MatSliderModule} from '@angular/material-experimental/mdc-slider';
+import {MatSliderHarness} from './slider-harness';
+import {ThumbPosition} from './slider-harness-filters';
 
 describe('MDC-based MatSliderHarness', () => {
-  it('does nothing yet', () => {});
+  let fixture: ComponentFixture<SliderHarnessTest>;
+  let loader: HarnessLoader;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [MatSliderModule],
+      declarations: [SliderHarnessTest],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(SliderHarnessTest);
+    fixture.detectChanges();
+    loader = TestbedHarnessEnvironment.loader(fixture);
+  });
+
+  it('should load all slider harnesses', async () => {
+    const sliders = await loader.getAllHarnesses(MatSliderHarness);
+    expect(sliders.length).toBe(2);
+  });
+
+  it('should get whether is a range slider', async () => {
+    const sliders = await loader.getAllHarnesses(MatSliderHarness);
+    expect(await parallel(() => sliders.map(slider => slider.isRange()))).toEqual([false, true]);
+  });
+
+  it('should get whether a slider is disabled', async () => {
+    const slider = await loader.getHarness(MatSliderHarness);
+    expect(await slider.isDisabled()).toBe(false);
+    fixture.componentInstance.singleSliderDisabled = true;
+    expect(await slider.isDisabled()).toBe(true);
+  });
+
+  it('should get the min/max values of a single-thumb slider', async () => {
+    const slider = await loader.getHarness(MatSliderHarness);
+    const [min, max] = await parallel(() => [slider.getMinValue(), slider.getMaxValue()]);
+    expect(min).toBe(0);
+    expect(max).toBe(100);
+  });
+
+  it('should get the min/max values of a range slider', async () => {
+    const slider = await loader.getHarness(MatSliderHarness.with({isRange: true}));
+    const [min, max] = await parallel(() => [slider.getMinValue(), slider.getMaxValue()]);
+    expect(min).toBe(fixture.componentInstance.rangeSliderMin);
+    expect(max).toBe(fixture.componentInstance.rangeSliderMax);
+  });
+
+  it('should get the thumbs within a slider', async () => {
+    const sliders = await loader.getAllHarnesses(MatSliderHarness);
+    expect(await sliders[0].getStartThumb()).toBeTruthy();
+    expect(await sliders[1].getStartThumb()).toBeTruthy();
+    expect(await sliders[1].getEndThumb()).toBeTruthy();
+  });
+
+  it('should get the step of a slider', async () => {
+    const sliders = await loader.getAllHarnesses(MatSliderHarness);
+    expect(await parallel(() => {
+      return sliders.map(slider => slider.getStep());
+    })).toEqual([1, fixture.componentInstance.rangeSliderStep]);
+  });
+
+  it('should get the position of a slider thumb', async () => {
+    const slider = await loader.getHarness(MatSliderHarness.with({selector: '#range'}));
+    const [start, end] = await parallel(() => [slider.getStartThumb(), slider.getEndThumb()]);
+    expect(await start.getPosition()).toBe(ThumbPosition.START);
+    expect(await end.getPosition()).toBe(ThumbPosition.END);
+  });
+
+  it('should get and set the value of a slider thumb', async () => {
+    const slider = await loader.getHarness(MatSliderHarness);
+    const thumb = await slider.getStartThumb();
+    expect(await thumb.getValue()).toBe(0);
+    await thumb.setValue(73);
+    expect(await thumb.getValue()).toBe(73);
+  });
+
+  it('should dispatch input and change events when setting the value', async () => {
+    const slider = await loader.getHarness(MatSliderHarness);
+    const thumb = await slider.getStartThumb();
+    const changeSpy = spyOn(fixture.componentInstance, 'changeListener');
+    const inputSpy = spyOn(fixture.componentInstance, 'inputListener');
+    await thumb.setValue(73);
+    expect(changeSpy).toHaveBeenCalledTimes(1);
+    expect(inputSpy).toHaveBeenCalledTimes(1);
+    expect(await thumb.getValue()).toBe(73);
+  });
+
+  it('should get the value of a thumb as a percentage', async () => {
+    const sliders = await loader.getAllHarnesses(MatSliderHarness);
+    expect(await (await sliders[0].getStartThumb()).getPercentage()).toBe(0);
+    expect(await (await sliders[1].getStartThumb()).getPercentage()).toBe(0.4);
+    expect(await (await sliders[1].getEndThumb()).getPercentage()).toBe(0.5);
+  });
+
+  it('should get the display value of a slider thumb', async () => {
+    const slider = await loader.getHarness(MatSliderHarness);
+    const thumb = await slider.getStartThumb();
+    fixture.componentInstance.displayFn = value => `#${value}`;
+    await thumb.setValue(73);
+    expect(await thumb.getDisplayValue()).toBe('#73');
+  });
+
+  it('should get the min/max values of a slider thumb', async () => {
+    const instance = fixture.componentInstance;
+    const slider = await loader.getHarness(MatSliderHarness.with({selector: '#range'}));
+    const [start, end] = await parallel(() => [slider.getStartThumb(), slider.getEndThumb()]);
+
+    expect(await start.getMinValue()).toBe(instance.rangeSliderMin);
+    expect(await start.getMaxValue()).toBe(instance.rangeSliderEndValue);
+    expect(await end.getMinValue()).toBe(instance.rangeSliderStartValue);
+    expect(await end.getMaxValue()).toBe(instance.rangeSliderMax);
+  });
+
+  it('should get the disabled state of a slider thumb', async () => {
+    const slider = await loader.getHarness(MatSliderHarness);
+    const thumb = await slider.getStartThumb();
+
+    expect(await thumb.isDisabled()).toBe(false);
+    fixture.componentInstance.singleSliderDisabled = true;
+    expect(await thumb.isDisabled()).toBe(true);
+  });
+
+  it('should get the name of a slider thumb', async () => {
+    const slider = await loader.getHarness(MatSliderHarness);
+    expect(await (await slider.getStartThumb()).getName()).toBe('price');
+  });
+
+  it('should get the id of a slider thumb', async () => {
+    const slider = await loader.getHarness(MatSliderHarness);
+    expect(await (await slider.getStartThumb()).getId()).toBe('price-input');
+  });
+
+  it('should get whether a slider thumb is required', async () => {
+    const slider = await loader.getHarness(MatSliderHarness);
+    expect(await (await slider.getStartThumb()).isRequired()).toBe(true);
+  });
+
+  it('should be able to focus and blur a slider thumb', async () => {
+    const slider = await loader.getHarness(MatSliderHarness);
+    const thumb = await slider.getStartThumb();
+
+    expect(await thumb.isFocused()).toBe(false);
+    await thumb.focus();
+    expect(await thumb.isFocused()).toBe(true);
+    await thumb.blur();
+    expect(await thumb.isFocused()).toBe(false);
+  });
+
 });
+
+@Component({
+  template: `
+    <mat-slider id="single" [displayWith]="displayFn" [disabled]="singleSliderDisabled">
+      <input
+        name="price"
+        id="price-input"
+        required
+        matSliderThumb
+        (input)="inputListener()"
+        (change)="changeListener()">
+    </mat-slider>
+
+    <mat-slider id="range" [min]="rangeSliderMin" [max]="rangeSliderMax" [step]="rangeSliderStep">
+      <input [value]="rangeSliderStartValue" matSliderStartThumb>
+      <input [value]="rangeSliderEndValue" matSliderEndThumb>
+    </mat-slider>
+  `,
+})
+class SliderHarnessTest {
+  singleSliderDisabled = false;
+  rangeSliderMin = 100;
+  rangeSliderMax = 500;
+  rangeSliderStep = 50;
+  rangeSliderStartValue = 200;
+  rangeSliderEndValue = 350;
+  displayFn = (value: number) => value + '';
+  inputListener() {}
+  changeListener() {}
+}

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

@@ -6,9 +6,63 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
-import {ComponentHarness} from '@angular/cdk/testing';
+import {ComponentHarness, HarnessPredicate} from '@angular/cdk/testing';
+import {coerceNumberProperty} from '@angular/cdk/coercion';
+import {SliderHarnessFilters, ThumbPosition} from './slider-harness-filters';
+import {MatSliderThumbHarness} from './slider-thumb-harness';
 
 /** Harness for interacting with a MDC mat-slider in tests. */
 export class MatSliderHarness extends ComponentHarness {
-  // TODO(wagnermaciel): Implement this in a separate PR
+  static hostSelector = '.mat-mdc-slider';
+
+  /**
+   * Gets a `HarnessPredicate` that can be used to search for a `MatSliderHarness` that meets
+   * certain criteria.
+   * @param options Options for filtering which input instances are considered a match.
+   * @return a `HarnessPredicate` configured with the given options.
+   */
+  static with(options: SliderHarnessFilters = {}): HarnessPredicate<MatSliderHarness> {
+    return new HarnessPredicate(MatSliderHarness, options)
+      .addOption('isRange', options.isRange, async (harness, value) => {
+        return (await harness.isRange()) === value;
+      });
+  }
+
+  /** Gets the start/primary thumb of the slider. */
+  async getStartThumb(): Promise<MatSliderThumbHarness> {
+    return this.locatorFor(MatSliderThumbHarness.with({position: ThumbPosition.START}))();
+  }
+
+  /** Gets the end thumb of the slider. Will throw an error for a non-range slider. */
+  async getEndThumb(): Promise<MatSliderThumbHarness> {
+    return this.locatorFor(MatSliderThumbHarness.with({position: ThumbPosition.END}))();
+  }
+
+  /** Gets whether the slider is a range slider. */
+  async isRange(): Promise<boolean> {
+    return (await (await this.host()).hasClass('mdc-slider--range'));
+  }
+
+  /** Gets whether the slider is disabled. */
+  async isDisabled(): Promise<boolean> {
+    return (await (await this.host()).hasClass('mdc-slider--disabled'));
+  }
+
+  /** Gets the value step increments of the slider. */
+  async getStep(): Promise<number> {
+    // The same step value is forwarded to both thumbs.
+    const startHost = await (await this.getStartThumb()).host();
+    return coerceNumberProperty(await startHost.getProperty('step'));
+  }
+
+  /** Gets the maximum value of the slider. */
+  async getMaxValue(): Promise<number> {
+    const endThumb = await this.isRange() ? await this.getEndThumb() : await this.getStartThumb();
+    return endThumb.getMaxValue();
+  }
+
+  /** Gets the minimum value of the slider. */
+  async getMinValue(): Promise<number> {
+    return (await this.getStartThumb()).getMinValue();
+  }
 }