diff --git a/src/material-experimental/mdc-slider/slider.spec.ts b/src/material-experimental/mdc-slider/slider.spec.ts index a42ad9eb1914..422f8afdaf07 100644 --- a/src/material-experimental/mdc-slider/slider.spec.ts +++ b/src/material-experimental/mdc-slider/slider.spec.ts @@ -728,6 +728,56 @@ describe('MDC-based MatSlider' , () => { }); }); }); + + describe('slider with value property binding', () => { + let fixture: ComponentFixture; + let testComponent: SliderWithOneWayBinding; + let inputInstance: MatSliderThumb; + + beforeEach(waitForAsync(() => { + fixture = createComponent(SliderWithOneWayBinding); + fixture.detectChanges(); + testComponent = fixture.debugElement.componentInstance; + const sliderDebugElement = fixture.debugElement.query(By.directive(MatSlider)); + const sliderInstance = sliderDebugElement.componentInstance; + inputInstance = sliderInstance._getInput(Thumb.END); + })); + + it('should update when bound value changes', () => { + testComponent.value = 75; + fixture.detectChanges(); + expect(inputInstance.value).toBe(75); + }); + }); + + describe('range slider with value property binding', () => { + let fixture: ComponentFixture; + let testComponent: RangeSliderWithOneWayBinding; + let startInputInstance: MatSliderThumb; + let endInputInstance: MatSliderThumb; + + beforeEach(waitForAsync(() => { + fixture = createComponent(RangeSliderWithOneWayBinding); + fixture.detectChanges(); + testComponent = fixture.debugElement.componentInstance; + const sliderDebugElement = fixture.debugElement.query(By.directive(MatSlider)); + const sliderInstance = sliderDebugElement.componentInstance; + startInputInstance = sliderInstance._getInput(Thumb.START); + endInputInstance = sliderInstance._getInput(Thumb.END); + })); + + it('should update when bound start value changes', () => { + testComponent.startValue = 30; + fixture.detectChanges(); + expect(startInputInstance.value).toBe(30); + }); + + it('should update when bound end value changes', () => { + testComponent.endValue = 70; + fixture.detectChanges(); + expect(endInputInstance.value).toBe(70); + }); + }); }); @@ -855,6 +905,30 @@ class DiscreteRangeSliderWithDisplayWith { } } +@Component({ + template: ` + + + + `, +}) +class SliderWithOneWayBinding { + value = 50; +} + +@Component({ + template: ` + + + + + `, +}) +class RangeSliderWithOneWayBinding { + startValue = 25; + endValue = 75; +} + /** The pointer event types used by the MDC Slider. */ const enum PointerEventType { POINTER_DOWN = 'pointerdown',