diff --git a/src/lib/slider/index.ts b/src/lib/slider/index.ts index 834456716c50..508cd636e6c3 100644 --- a/src/lib/slider/index.ts +++ b/src/lib/slider/index.ts @@ -9,14 +9,13 @@ import {NgModule} from '@angular/core'; import {HAMMER_GESTURE_CONFIG} from '@angular/platform-browser'; import {CommonModule} from '@angular/common'; -import {FormsModule} from '@angular/forms'; import {MdCommonModule, GestureConfig, StyleModule} from '../core'; import {MdSlider} from './slider'; import {BidiModule} from '../core/bidi/index'; @NgModule({ - imports: [CommonModule, FormsModule, MdCommonModule, StyleModule, BidiModule], + imports: [CommonModule, MdCommonModule, StyleModule, BidiModule], exports: [MdSlider, MdCommonModule], declarations: [MdSlider], providers: [{provide: HAMMER_GESTURE_CONFIG, useClass: GestureConfig}] diff --git a/src/lib/slider/slider.spec.ts b/src/lib/slider/slider.spec.ts index 34511d016c43..ff37c85ae162 100644 --- a/src/lib/slider/slider.spec.ts +++ b/src/lib/slider/slider.spec.ts @@ -18,8 +18,7 @@ import { } from '../core/keyboard/keycodes'; import {dispatchKeyboardEvent, dispatchMouseEvent} from '@angular/cdk/testing'; - -describe('MdSlider', () => { +describe('MdSlider without forms', () => { let gestureConfig: TestGestureConfig; beforeEach(async(() => { @@ -35,8 +34,6 @@ describe('MdSlider', () => { SliderWithSetTickInterval, SliderWithThumbLabel, SliderWithOneWayBinding, - SliderWithFormControl, - SliderWithNgModel, SliderWithValueSmallerThanMin, SliderWithValueGreaterThanMax, SliderWithChangeHandler, @@ -552,156 +549,6 @@ describe('MdSlider', () => { }); }); - describe('slider as a custom form control', () => { - let fixture: ComponentFixture; - let sliderDebugElement: DebugElement; - let sliderNativeElement: HTMLElement; - let sliderInstance: MdSlider; - let sliderWrapperElement: HTMLElement; - let testComponent: SliderWithFormControl; - - beforeEach(() => { - fixture = TestBed.createComponent(SliderWithFormControl); - fixture.detectChanges(); - - testComponent = fixture.debugElement.componentInstance; - - sliderDebugElement = fixture.debugElement.query(By.directive(MdSlider)); - sliderNativeElement = sliderDebugElement.nativeElement; - sliderInstance = sliderDebugElement.injector.get(MdSlider); - sliderWrapperElement = sliderNativeElement.querySelector('.mat-slider-wrapper'); - }); - - it('should not update the control when the value is updated', () => { - expect(testComponent.control.value).toBe(0); - - sliderInstance.value = 11; - fixture.detectChanges(); - - expect(testComponent.control.value).toBe(0); - }); - - it('should update the control on click', () => { - expect(testComponent.control.value).toBe(0); - - dispatchClickEventSequence(sliderNativeElement, 0.76); - fixture.detectChanges(); - - expect(testComponent.control.value).toBe(76); - }); - - it('should update the control on slide', () => { - expect(testComponent.control.value).toBe(0); - - dispatchSlideEventSequence(sliderNativeElement, 0, 0.19, gestureConfig); - fixture.detectChanges(); - - expect(testComponent.control.value).toBe(19); - }); - - it('should update the value when the control is set', () => { - expect(sliderInstance.value).toBe(0); - - testComponent.control.setValue(7); - fixture.detectChanges(); - - expect(sliderInstance.value).toBe(7); - }); - - it('should update the disabled state when control is disabled', () => { - expect(sliderInstance.disabled).toBe(false); - - testComponent.control.disable(); - fixture.detectChanges(); - - expect(sliderInstance.disabled).toBe(true); - }); - - it('should update the disabled state when the control is enabled', () => { - sliderInstance.disabled = true; - - testComponent.control.enable(); - fixture.detectChanges(); - - expect(sliderInstance.disabled).toBe(false); - }); - - it('should have the correct control state initially and after interaction', () => { - let sliderControl = testComponent.control; - - // The control should start off valid, pristine, and untouched. - expect(sliderControl.valid).toBe(true); - expect(sliderControl.pristine).toBe(true); - expect(sliderControl.touched).toBe(false); - - // After changing the value, the control should become dirty (not pristine), - // but remain untouched. - dispatchClickEventSequence(sliderNativeElement, 0.5); - fixture.detectChanges(); - - expect(sliderControl.valid).toBe(true); - expect(sliderControl.pristine).toBe(false); - expect(sliderControl.touched).toBe(false); - - // If the control has been visited due to interaction, the control should remain - // dirty and now also be touched. - sliderInstance._onBlur(); - fixture.detectChanges(); - - expect(sliderControl.valid).toBe(true); - expect(sliderControl.pristine).toBe(false); - expect(sliderControl.touched).toBe(true); - }); - }); - - describe('slider with ngModel', () => { - let fixture: ComponentFixture; - let sliderDebugElement: DebugElement; - let sliderNativeElement: HTMLElement; - let sliderInstance: MdSlider; - let sliderWrapperElement: HTMLElement; - let testComponent: SliderWithNgModel; - - beforeEach(() => { - fixture = TestBed.createComponent(SliderWithNgModel); - fixture.detectChanges(); - - testComponent = fixture.debugElement.componentInstance; - - sliderDebugElement = fixture.debugElement.query(By.directive(MdSlider)); - sliderNativeElement = sliderDebugElement.nativeElement; - sliderInstance = sliderDebugElement.injector.get(MdSlider); - sliderWrapperElement = sliderNativeElement.querySelector('.mat-slider-wrapper'); - }); - - it('should update the model on click', () => { - expect(testComponent.val).toBe(0); - - dispatchClickEventSequence(sliderNativeElement, 0.76); - fixture.detectChanges(); - - expect(testComponent.val).toBe(76); - }); - - it('should update the model on slide', () => { - expect(testComponent.val).toBe(0); - - dispatchSlideEventSequence(sliderNativeElement, 0, 0.19, gestureConfig); - fixture.detectChanges(); - - expect(testComponent.val).toBe(19); - }); - - it('should update the model on keydown', () => { - expect(testComponent.val).toBe(0); - - dispatchKeyboardEvent(sliderNativeElement, 'keydown', UP_ARROW); - fixture.detectChanges(); - - expect(testComponent.val).toBe(1); - }); - }); - describe('slider with value property binding', () => { let fixture: ComponentFixture; let sliderDebugElement: DebugElement; @@ -1225,6 +1072,179 @@ describe('MdSlider', () => { }); }); +describe('MdSlider with forms module', () => { + let gestureConfig: TestGestureConfig; + + beforeEach(async(() => { + TestBed.configureTestingModule({ + imports: [MdSliderModule, ReactiveFormsModule, FormsModule, BidiModule], + declarations: [ + SliderWithFormControl, + SliderWithNgModel, + ], + providers: [ + {provide: HAMMER_GESTURE_CONFIG, useFactory: () => { + gestureConfig = new TestGestureConfig(); + return gestureConfig; + }} + ], + }); + + TestBed.compileComponents(); + })); + + describe('slider with ngModel', () => { + let fixture: ComponentFixture; + let sliderDebugElement: DebugElement; + let sliderNativeElement: HTMLElement; + let sliderInstance: MdSlider; + let sliderWrapperElement: HTMLElement; + let testComponent: SliderWithNgModel; + + beforeEach(() => { + fixture = TestBed.createComponent(SliderWithNgModel); + fixture.detectChanges(); + + testComponent = fixture.debugElement.componentInstance; + + sliderDebugElement = fixture.debugElement.query(By.directive(MdSlider)); + sliderNativeElement = sliderDebugElement.nativeElement; + sliderInstance = sliderDebugElement.injector.get(MdSlider); + sliderWrapperElement = sliderNativeElement.querySelector('.mat-slider-wrapper'); + }); + + it('should update the model on click', () => { + expect(testComponent.val).toBe(0); + + dispatchClickEventSequence(sliderNativeElement, 0.76); + fixture.detectChanges(); + + expect(testComponent.val).toBe(76); + }); + + it('should update the model on slide', () => { + expect(testComponent.val).toBe(0); + + dispatchSlideEventSequence(sliderNativeElement, 0, 0.19, gestureConfig); + fixture.detectChanges(); + + expect(testComponent.val).toBe(19); + }); + + it('should update the model on keydown', () => { + expect(testComponent.val).toBe(0); + + dispatchKeyboardEvent(sliderNativeElement, 'keydown', UP_ARROW); + fixture.detectChanges(); + + expect(testComponent.val).toBe(1); + }); + }); + + describe('slider as a custom form control', () => { + let fixture: ComponentFixture; + let sliderDebugElement: DebugElement; + let sliderNativeElement: HTMLElement; + let sliderInstance: MdSlider; + let sliderWrapperElement: HTMLElement; + let testComponent: SliderWithFormControl; + + beforeEach(() => { + fixture = TestBed.createComponent(SliderWithFormControl); + fixture.detectChanges(); + + testComponent = fixture.debugElement.componentInstance; + + sliderDebugElement = fixture.debugElement.query(By.directive(MdSlider)); + sliderNativeElement = sliderDebugElement.nativeElement; + sliderInstance = sliderDebugElement.injector.get(MdSlider); + sliderWrapperElement = sliderNativeElement.querySelector('.mat-slider-wrapper'); + }); + + it('should not update the control when the value is updated', () => { + expect(testComponent.control.value).toBe(0); + + sliderInstance.value = 11; + fixture.detectChanges(); + + expect(testComponent.control.value).toBe(0); + }); + + it('should update the control on click', () => { + expect(testComponent.control.value).toBe(0); + + dispatchClickEventSequence(sliderNativeElement, 0.76); + fixture.detectChanges(); + + expect(testComponent.control.value).toBe(76); + }); + + it('should update the control on slide', () => { + expect(testComponent.control.value).toBe(0); + + dispatchSlideEventSequence(sliderNativeElement, 0, 0.19, gestureConfig); + fixture.detectChanges(); + + expect(testComponent.control.value).toBe(19); + }); + + it('should update the value when the control is set', () => { + expect(sliderInstance.value).toBe(0); + + testComponent.control.setValue(7); + fixture.detectChanges(); + + expect(sliderInstance.value).toBe(7); + }); + + it('should update the disabled state when control is disabled', () => { + expect(sliderInstance.disabled).toBe(false); + + testComponent.control.disable(); + fixture.detectChanges(); + + expect(sliderInstance.disabled).toBe(true); + }); + + it('should update the disabled state when the control is enabled', () => { + sliderInstance.disabled = true; + + testComponent.control.enable(); + fixture.detectChanges(); + + expect(sliderInstance.disabled).toBe(false); + }); + + it('should have the correct control state initially and after interaction', () => { + let sliderControl = testComponent.control; + + // The control should start off valid, pristine, and untouched. + expect(sliderControl.valid).toBe(true); + expect(sliderControl.pristine).toBe(true); + expect(sliderControl.touched).toBe(false); + + // After changing the value, the control should become dirty (not pristine), + // but remain untouched. + dispatchClickEventSequence(sliderNativeElement, 0.5); + fixture.detectChanges(); + + expect(sliderControl.valid).toBe(true); + expect(sliderControl.pristine).toBe(false); + expect(sliderControl.touched).toBe(false); + + // If the control has been visited due to interaction, the control should remain + // dirty and now also be touched. + sliderInstance._onBlur(); + fixture.detectChanges(); + + expect(sliderControl.valid).toBe(true); + expect(sliderControl.pristine).toBe(false); + expect(sliderControl.touched).toBe(true); + }); + }); + +}); + // Disable animations and make the slider an even 100px (+ 8px padding on either side) // so we get nice round values in tests. const styles = `