Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Merged
merged 1 commit into from Jun 16, 2021
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
26 changes: 16 additions & 10 deletions src/material-experimental/mdc-slider/testing/slider-harness.spec.ts
Expand Up @@ -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', () => {
Expand Down Expand Up @@ -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();
});
Expand All @@ -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);
Expand All @@ -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');
Expand All @@ -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;
Expand All @@ -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();
Expand Down
Expand Up @@ -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();
}
}
Expand Up @@ -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. */
Expand Down