test(material-experimental/mdc-slider): add directionality tests (#22572)

Author: wagnermaciel

src/material-experimental/mdc-slider/BUILD.bazel

@@ -79,6 +79,7 @@ ng_test_library(
         "@npm//@angular/forms",
         "@npm//@angular/platform-browser",
         "@npm//@material/slider",
+        "@npm//rxjs",
     ],
 )
 

src/material-experimental/mdc-slider/slider.spec.ts

@@ -6,13 +6,14 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
+import {BidiModule, Directionality} from '@angular/cdk/bidi';
 import {Platform} from '@angular/cdk/platform';
 import {
   dispatchMouseEvent,
   dispatchPointerEvent,
   dispatchTouchEvent,
 } from '@angular/cdk/testing/private';
-import {Component, QueryList, Type, ViewChild, ViewChildren} from '@angular/core';
+import {Component, Provider, QueryList, Type, ViewChild, ViewChildren} from '@angular/core';
 import {
   ComponentFixture,
   fakeAsync,
@@ -24,6 +25,7 @@ import {
 import {FormControl, FormsModule, ReactiveFormsModule} from '@angular/forms';
 import {By} from '@angular/platform-browser';
 import {Thumb} from '@material/slider';
+import {of} from 'rxjs';
 import {MatSliderModule} from './module';
 import {MatSlider, MatSliderThumb, MatSliderVisualThumb} from './slider';
 
@@ -41,10 +43,14 @@ describe('MDC-based MatSlider' , () => {
     spyOn(Element.prototype, 'setPointerCapture');
   });
 
-  function createComponent<T>(component: Type<T>): ComponentFixture<T> {
+  function createComponent<T>(
+    component: Type<T>,
+    providers: Provider[] = [],
+    ): ComponentFixture<T> {
     TestBed.configureTestingModule({
-      imports: [FormsModule, MatSliderModule, ReactiveFormsModule],
+      imports: [FormsModule, MatSliderModule, ReactiveFormsModule, BidiModule],
       declarations: [component],
+      providers: [...providers],
     }).compileComponents();
     return TestBed.createComponent<T>(component);
   }
@@ -1158,6 +1164,53 @@ describe('MDC-based MatSlider' , () => {
     });
   });
 
+  describe('slider with direction', () => {
+    let sliderInstance: MatSlider;
+    let inputInstance: MatSliderThumb;
+
+    beforeEach(waitForAsync(() => {
+      const fixture = createComponent(StandardSlider, [{
+        provide: Directionality,
+        useValue: ({value: 'rtl', change: of()})
+      }]);
+      fixture.detectChanges();
+      const sliderDebugElement = fixture.debugElement.query(By.directive(MatSlider));
+      sliderInstance = sliderDebugElement.componentInstance;
+      inputInstance = sliderInstance._getInput(Thumb.END);
+    }));
+
+    it('works in RTL languages', () => {
+      setValueByClick(sliderInstance, 30, platform.IOS);
+      expect(inputInstance.value).toBe(70);
+    });
+  });
+
+  describe('range slider with direction', () => {
+    let sliderInstance: MatSlider;
+    let startInputInstance: MatSliderThumb;
+    let endInputInstance: MatSliderThumb;
+
+    beforeEach(waitForAsync(() => {
+      const fixture = createComponent(StandardRangeSlider, [{
+        provide: Directionality,
+        useValue: ({value: 'rtl', change: of()})
+      }]);
+      fixture.detectChanges();
+      const sliderDebugElement = fixture.debugElement.query(By.directive(MatSlider));
+      sliderInstance = sliderDebugElement.componentInstance;
+      startInputInstance = sliderInstance._getInput(Thumb.START);
+      endInputInstance = sliderInstance._getInput(Thumb.END);
+    }));
+
+    it('works in RTL languages', () => {
+      setValueByClick(sliderInstance, 90, platform.IOS);
+      expect(startInputInstance.value).toBe(10);
+
+      setValueByClick(sliderInstance, 10, platform.IOS);
+      expect(endInputInstance.value).toBe(90);
+    });
+  });
+
   describe('slider with ngModel', () => {
     let fixture: ComponentFixture<SliderWithNgModel>;
     let testComponent: SliderWithNgModel;

src/material-experimental/mdc-slider/slider.ts

@@ -630,6 +630,7 @@ export class MatSlider extends _MatSliderMixinBase
   private _dirChangeSubscription: Subscription;
 
   constructor(
+    readonly _ngZone: NgZone,
     readonly _cdr: ChangeDetectorRef,
     readonly _elementRef: ElementRef<HTMLElement>,
     private readonly _platform: Platform,
@@ -641,7 +642,7 @@ export class MatSlider extends _MatSliderMixinBase
       super(_elementRef);
       this._document = document;
       this._window = this._document.defaultView || window;
-      this._dirChangeSubscription = this._dir.change.subscribe(() => this._reinitialize());
+      this._dirChangeSubscription = this._dir.change.subscribe(() => this._onDirChange());
     }
 
   ngAfterViewInit() {
@@ -701,6 +702,15 @@ export class MatSlider extends _MatSliderMixinBase
     }
   }
 
+  /** Handles updating the slider foundation after a dir change. */
+  private _onDirChange(): void {
+    this._ngZone.runOutsideAngular(() => {
+      // We need to call layout() a few milliseconds after the dir change callback
+      // because we need to wait until the bounding client rect of the slider has updated.
+      setTimeout(() => this._foundation.layout(), 10);
+    });
+  }
+
   /** Sets the value of a slider thumb. */
   _setValue(value: number, thumbPosition: Thumb): void {
     thumbPosition === Thumb.START