added tests

Author: mmalerba

src/lib/core/rtl/dir.ts

@@ -1,11 +1,11 @@
 import {
-    NgModule,
-    ModuleWithProviders,
-    Directive,
-    HostBinding,
-    Output,
-    Input,
-    EventEmitter
+  NgModule,
+  ModuleWithProviders,
+  Directive,
+  HostBinding,
+  Output,
+  Input,
+  EventEmitter
 } from '@angular/core';
 
 export type LayoutDirection = 'ltr' | 'rtl';

src/lib/slider/slider.spec.ts

@@ -4,6 +4,7 @@ import {Component, DebugElement} from '@angular/core';
 import {By, HAMMER_GESTURE_CONFIG} from '@angular/platform-browser';
 import {MdSlider, MdSliderModule} from './slider';
 import {TestGestureConfig} from './test-gesture-config';
+import {RtlModule} from '../core/rtl/dir';
 import {
   UP_ARROW,
   RIGHT_ARROW,
@@ -20,7 +21,7 @@ describe('MdSlider', () => {
 
   beforeEach(async(() => {
     TestBed.configureTestingModule({
-      imports: [MdSliderModule.forRoot(), ReactiveFormsModule],
+      imports: [MdSliderModule.forRoot(), RtlModule.forRoot(), ReactiveFormsModule],
       declarations: [
         StandardSlider,
         DisabledSlider,
@@ -35,6 +36,7 @@ describe('MdSlider', () => {
         SliderWithValueSmallerThanMin,
         SliderWithValueGreaterThanMax,
         SliderWithChangeHandler,
+        SliderWithDirAndInvert,
       ],
       providers: [
         {provide: HAMMER_GESTURE_CONFIG, useFactory: () => {
@@ -838,6 +840,57 @@ describe('MdSlider', () => {
       expect(sliderInstance.value).toBe(0);
     });
   });
+
+  describe('slider with direction and invert', () => {
+    let fixture: ComponentFixture<SliderWithDirAndInvert>;
+    let sliderDebugElement: DebugElement;
+    let sliderNativeElement: HTMLElement;
+    let sliderTrackElement: HTMLElement;
+    let sliderInstance: MdSlider;
+    let testComponent: SliderWithDirAndInvert;
+
+    beforeEach(() => {
+      fixture = TestBed.createComponent(SliderWithDirAndInvert);
+      fixture.detectChanges();
+
+      testComponent = fixture.debugElement.componentInstance;
+      sliderDebugElement = fixture.debugElement.query(By.directive(MdSlider));
+      sliderInstance = sliderDebugElement.injector.get(MdSlider);
+      sliderNativeElement = sliderDebugElement.nativeElement;
+      sliderTrackElement = <HTMLElement>sliderNativeElement.querySelector('.md-slider-track');
+    });
+
+    it('works in inverted mode', () => {
+      testComponent.invert = true;
+      fixture.detectChanges();
+
+      dispatchClickEventSequence(sliderNativeElement, 0.3);
+      fixture.detectChanges();
+
+      expect(sliderInstance.value).toBe(70);
+    });
+
+    it('works in RTL languages', () => {
+      testComponent.dir = 'rtl';
+      fixture.detectChanges();
+
+      dispatchClickEventSequence(sliderNativeElement, 0.3);
+      fixture.detectChanges();
+
+      expect(sliderInstance.value).toBe(70);
+    });
+
+    it('works in RTL languages in inverted mode', () => {
+      testComponent.dir = 'rtl';
+      testComponent.invert = true;
+      fixture.detectChanges();
+
+      dispatchClickEventSequence(sliderNativeElement, 0.3);
+      fixture.detectChanges();
+
+      expect(sliderInstance.value).toBe(30);
+    });
+  });
 });
 
 // Disable animations and make the slider an even 100px (+ 8px padding on either side)
@@ -934,6 +987,15 @@ class SliderWithChangeHandler {
   onChange() { }
 }
 
+@Component({
+  template: `<div [dir]="dir"><md-slider [invert]="invert"></md-slider></div>`,
+  styles: [styles],
+})
+class SliderWithDirAndInvert {
+  dir = 'ltr';
+  invert = false;
+}
+
 /**
  * Dispatches a click event sequence (consisting of moueseenter, click) from an element.
  * Note: The mouse event truncates the position for the click.