fix(material-experimental/mdc-slider): align test harness inferred position with component (#22879)

Currently the test harness for a thumb assumes that its direction is `start` unless explicitly specified. This is incosistent with the component itself which assues the opposite.

Author: crisbeto

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

@@ -12,6 +12,7 @@ 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 {MatSliderThumbHarness} from './slider-thumb-harness';
 import {ThumbPosition} from './slider-harness-filters';
 
 describe('MDC-based MatSliderHarness', () => {
@@ -62,7 +63,7 @@ describe('MDC-based MatSliderHarness', () => {
 
   it('should get the thumbs within a slider', async () => {
     const sliders = await loader.getAllHarnesses(MatSliderHarness);
-    expect(await sliders[0].getStartThumb()).toBeTruthy();
+    expect(await sliders[0].getEndThumb()).toBeTruthy();
     expect(await sliders[1].getStartThumb()).toBeTruthy();
     expect(await sliders[1].getEndThumb()).toBeTruthy();
   });
@@ -74,24 +75,29 @@ describe('MDC-based MatSliderHarness', () => {
     })).toEqual([1, fixture.componentInstance.rangeSliderStep]);
   });
 
-  it('should get the position of a slider thumb', async () => {
+  it('should get the position of a slider thumb in a range slider', 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 the position of a slider thumb in a non-range slider', async () => {
+    const thumb = await loader.getHarness(MatSliderThumbHarness.with({ancestor: '#single'}));
+    expect(await thumb.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();
+    const thumb = await slider.getEndThumb();
     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 thumb = await slider.getEndThumb();
     const changeSpy = spyOn(fixture.componentInstance, 'changeListener');
     const inputSpy = spyOn(fixture.componentInstance, 'inputListener');
     await thumb.setValue(73);
@@ -102,14 +108,14 @@ describe('MDC-based MatSliderHarness', () => {
 
   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[0].getEndThumb()).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();
+    const thumb = await slider.getEndThumb();
     fixture.componentInstance.displayFn = value => `#${value}`;
     await thumb.setValue(73);
     expect(await thumb.getDisplayValue()).toBe('#73');
@@ -128,7 +134,7 @@ describe('MDC-based MatSliderHarness', () => {
 
   it('should get the disabled state of a slider thumb', async () => {
     const slider = await loader.getHarness(MatSliderHarness);
-    const thumb = await slider.getStartThumb();
+    const thumb = await slider.getEndThumb();
 
     expect(await thumb.isDisabled()).toBe(false);
     fixture.componentInstance.singleSliderDisabled = true;
@@ -137,17 +143,17 @@ describe('MDC-based MatSliderHarness', () => {
 
   it('should get the name of a slider thumb', async () => {
     const slider = await loader.getHarness(MatSliderHarness);
-    expect(await (await slider.getStartThumb()).getName()).toBe('price');
+    expect(await (await slider.getEndThumb()).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');
+    expect(await (await slider.getEndThumb()).getId()).toBe('price-input');
   });
 
   it('should be able to focus and blur a slider thumb', async () => {
     const slider = await loader.getHarness(MatSliderHarness);
-    const thumb = await slider.getStartThumb();
+    const thumb = await slider.getEndThumb();
 
     expect(await thumb.isFocused()).toBe(false);
     await thumb.focus();

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

@@ -51,18 +51,18 @@ export class MatSliderHarness extends ComponentHarness {
   /** 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();
+    const startHost = await (await this.getEndThumb()).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();
+    return (await this.getEndThumb()).getMaxValue();
   }
 
   /** Gets the minimum value of the slider. */
   async getMinValue(): Promise<number> {
-    return (await this.getStartThumb()).getMinValue();
+    const startThumb = await this.isRange() ? await this.getStartThumb() : await this.getEndThumb();
+    return startThumb.getMinValue();
   }
 }

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

@@ -31,8 +31,9 @@ export class MatSliderThumbHarness extends ComponentHarness {
 
   /** Gets the position of the thumb inside the slider. */
   async getPosition(): Promise<ThumbPosition> {
-    const isEnd = (await (await this.host()).getAttribute('matSliderEndThumb')) != null;
-    return isEnd ? ThumbPosition.END : ThumbPosition.START;
+    // Meant to mimic MDC's logic where `matSliderThumb` is treated as END.
+    const isStart = (await (await this.host()).getAttribute('matSliderStartThumb')) != null;
+    return isStart ? ThumbPosition.START : ThumbPosition.END;
   }
 
   /** Gets the value of the thumb. */