Add tests.

Author: mmalerba

src/lib/slider/slider.spec.ts

@@ -249,18 +249,23 @@ describe('MdSlider', () => {
     let sliderDimensions: ClientRect;
     let trackFillElement: HTMLElement;
     let thumbElement: HTMLElement;
+    let tickContainerElement: HTMLElement;
+    let testComponent: SliderWithMinAndMax;
 
     beforeEach(() => {
       fixture = TestBed.createComponent(SliderWithMinAndMax);
       fixture.detectChanges();
 
       sliderDebugElement = fixture.debugElement.query(By.directive(MdSlider));
+      testComponent = fixture.debugElement.componentInstance;
       sliderNativeElement = sliderDebugElement.nativeElement;
       sliderInstance = sliderDebugElement.injector.get(MdSlider);
       sliderTrackElement = <HTMLElement>sliderNativeElement.querySelector('.md-slider-track');
       sliderDimensions = sliderTrackElement.getBoundingClientRect();
       trackFillElement = <HTMLElement>sliderNativeElement.querySelector('.md-slider-track-fill');
       thumbElement = <HTMLElement>sliderNativeElement.querySelector('.md-slider-thumb-position');
+      tickContainerElement =
+          <HTMLElement>sliderNativeElement.querySelector('.md-slider-tick-container');
     });
 
     it('should set the default values from the attributes', () => {
@@ -312,7 +317,33 @@ describe('MdSlider', () => {
       // The closest snap is at the halfway point on the slider.
       expect(thumbDimensions.left).toBe(sliderDimensions.left + sliderDimensions.width * 0.5);
       expect(trackFillDimensions.width).toBe(thumbPosition);
+    });
+
+    it('should adjust thumb and ticks when min changes', () => {
+      testComponent.min = -2;
+      fixture.detectChanges();
 
+      let trackFillDimensions = trackFillElement.getBoundingClientRect();
+      let tickContainerDimensions = tickContainerElement.getBoundingClientRect();
+
+      expect(trackFillDimensions.width).toBe(sliderDimensions.width * 6 / 8);
+      expect(tickContainerDimensions.width)
+          .toBe(sliderDimensions.width - sliderDimensions.width * 6 / 8);
+    });
+
+    it('should adjust thumb and ticks when max changes', () => {
+      testComponent.min = -2;
+      fixture.detectChanges();
+
+      testComponent.max = 10;
+      fixture.detectChanges();
+
+      let trackFillDimensions = trackFillElement.getBoundingClientRect();
+      let tickContainerDimensions = tickContainerElement.getBoundingClientRect();
+
+      expect(trackFillDimensions.width).toBe(sliderDimensions.width * 6 / 12);
+      expect(tickContainerDimensions.width)
+          .toBe(sliderDimensions.width - sliderDimensions.width * 6 / 12);
     });
   });
 
@@ -689,11 +720,14 @@ class StandardSlider { }
 class DisabledSlider { }
 
 @Component({
-  template: `<md-slider min="4" max="6"></md-slider>`,
+  template: `<md-slider [min]="min" [max]="max" tick-interval="6"></md-slider>`,
   styles: [noTransitionStyle],
   encapsulation: ViewEncapsulation.None
 })
-class SliderWithMinAndMax { }
+class SliderWithMinAndMax {
+  min = 4;
+  max = 6;
+}
 
 @Component({
   template: `<md-slider value="26"></md-slider>`

src/lib/slider/slider.ts

@@ -126,7 +126,8 @@ export class MdSlider implements AfterContentInit, ControlValueAccessor {
     if (!this._isInitialized) {
       this.value = this._min;
     }
-    this._initTicksAndSlider();
+    this.snapThumbToValue();
+    this._updateTickSeparation();
   }
 
   @Input()
@@ -137,7 +138,8 @@ export class MdSlider implements AfterContentInit, ControlValueAccessor {
 
   set max(v: number) {
     this._max = Number(v);
-    this._initTicksAndSlider();
+    this.snapThumbToValue();
+    this._updateTickSeparation();
   }
 
   @Input()
@@ -173,7 +175,8 @@ export class MdSlider implements AfterContentInit, ControlValueAccessor {
     // This needs to be called after content init because the value can be set to the min if the
     // value itself isn't set. If this happens, the control value accessor needs to be updated.
     this._controlValueAccessorChangeFn(this.value);
-    this._initTicksAndSlider();
+    this.snapThumbToValue();
+    this._updateTickSeparation();
   }
 
   /** TODO: internal */
@@ -272,15 +275,6 @@ export class MdSlider implements AfterContentInit, ControlValueAccessor {
     }
   }
 
-  /**
-   * Initializes the tick and slider positions.
-   * @private
-   */
-  private _initTicksAndSlider() {
-    this.snapThumbToValue();
-    this._updateTickSeparation();
-  }
-
   /**
    * Calculates the separation in pixels of tick marks. If there is no tick interval or the interval
    * is set to something other than a number or 'auto', nothing happens.
@@ -458,11 +452,13 @@ export class SliderRenderer {
     lastTickContainer.style.background = `linear-gradient(to left, black, black 2px, transparent ` +
         `2px, transparent)`;
 
-    // If the second to last tick is too close (a separation of less than half the normal
-    // separation), don't show it by decreasing the width of the tick container element.
     if (tickContainerWidth % tickSeparation < (tickSeparation / 2)) {
+      // If the second to last tick is too close (a separation of less than half the normal
+      // separation), don't show it by decreasing the width of the tick container element.
       tickContainer.style.width = tickContainerWidth - tickSeparation + 'px';
     } else {
+      // If there is enough space for the second-to-last tick, restore the default width of the
+      // tick container.
       tickContainer.style.width = '';
     }
   }