test(material-experimental/mdc-slider): try to reduce test flakes

We've been seeing more test flakes from the MDC slider recently. These changes try to address them by disabling animations and adding an extra change detection after flushing `requestAnimationFrame`.

Author: crisbeto

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

@@ -24,12 +24,19 @@ import {Component, DebugElement, Type, ViewChild} from '@angular/core';
 import {ComponentFixture, fakeAsync, flush, TestBed, tick, inject} from '@angular/core/testing';
 import {FormControl, FormsModule, ReactiveFormsModule} from '@angular/forms';
 import {By} from '@angular/platform-browser';
+import {NoopAnimationsModule} from '@angular/platform-browser/animations';
 import {MatSlider, MatSliderModule} from './index';
 
 describe('MDC-based MatSlider', () => {
   function createComponent<T>(component: Type<T>): ComponentFixture<T> {
     TestBed.configureTestingModule({
-      imports: [MatSliderModule, ReactiveFormsModule, FormsModule, BidiModule],
+      imports: [
+        MatSliderModule,
+        ReactiveFormsModule,
+        FormsModule,
+        BidiModule,
+        NoopAnimationsModule,
+      ],
       declarations: [component],
     }).compileComponents();
 
@@ -215,6 +222,7 @@ describe('MDC-based MatSlider', () => {
       // Flush the "requestAnimationFrame" timer that performs the initial
       // rendering of the MDC slider.
       flushRequestAnimationFrame();
+      fixture.detectChanges();
     }));
 
     it('should set the default values from the attributes', () => {
@@ -247,6 +255,7 @@ describe('MDC-based MatSlider', () => {
       dispatchMousedownEventSequence(sliderNativeElement, 0.68);
       fixture.detectChanges();
       flushRequestAnimationFrame();
+      fixture.detectChanges();
 
       // The closest snap is halfway on the slider.
       expect(thumbContainerEl.style.transform).toContain('translateX(50px)');
@@ -256,6 +265,7 @@ describe('MDC-based MatSlider', () => {
       dispatchSlideEventSequence(sliderNativeElement, 0, 0.74);
       fixture.detectChanges();
       flushRequestAnimationFrame();
+      fixture.detectChanges();
 
       // The closest snap is at the halfway point on the slider.
       expect(thumbContainerEl.style.transform).toContain('translateX(50px)');
@@ -318,6 +328,7 @@ describe('MDC-based MatSlider', () => {
       // Flush the "requestAnimationFrame" timer that performs the initial
       // rendering of the MDC slider.
       flushRequestAnimationFrame();
+      fixture.detectChanges();
     }));
 
     it('should set the correct step value on mousedown', () => {
@@ -342,6 +353,7 @@ describe('MDC-based MatSlider', () => {
       dispatchMousedownEventSequence(sliderNativeElement, 0.66);
       fixture.detectChanges();
       flushRequestAnimationFrame();
+      fixture.detectChanges();
 
       // The closest step is at 75% of the slider.
       expect(thumbContainerEl.style.transform).toContain('translateX(75px)');
@@ -358,6 +370,7 @@ describe('MDC-based MatSlider', () => {
       dispatchSlideEventSequence(sliderNativeElement, 0, 0.88);
       fixture.detectChanges();
       flushRequestAnimationFrame();
+      fixture.detectChanges();
 
       // The closest snap is at the end of the slider.
       expect(thumbContainerEl.style.transform).toContain('translateX(100px)');
@@ -539,6 +552,7 @@ describe('MDC-based MatSlider', () => {
       // Flush the "requestAnimationFrame" timer that performs the initial
       // rendering of the MDC slider.
       flushRequestAnimationFrame();
+      fixture.detectChanges();
     }));
 
     it('should initialize based on bound value', () => {
@@ -550,6 +564,7 @@ describe('MDC-based MatSlider', () => {
       testComponent.val = 75;
       fixture.detectChanges();
       flushRequestAnimationFrame();
+      fixture.detectChanges();
 
       expect(sliderInstance.value).toBe(75);
       expect(thumbContainerEl.style.transform).toContain('translateX(75px)');
@@ -576,6 +591,7 @@ describe('MDC-based MatSlider', () => {
       // Flush the "requestAnimationFrame" timer that performs the initial
       // rendering of the MDC slider.
       flushRequestAnimationFrame();
+      fixture.detectChanges();
     }));
 
     it('should set the value smaller than the min value', () => {
@@ -609,6 +625,7 @@ describe('MDC-based MatSlider', () => {
       // Flush the "requestAnimationFrame" timer that performs the initial
       // rendering of the MDC slider.
       flushRequestAnimationFrame();
+      fixture.detectChanges();
     }));
 
     it('should set the value greater than the max value', () => {
@@ -758,6 +775,7 @@ describe('MDC-based MatSlider', () => {
         <HTMLElement>sliderNativeElement.querySelector('.mdc-slider__track-marker-container');
 
       flushRequestAnimationFrame();
+      fixture.detectChanges();
     }));
 
     it('should set the correct tick separation', () => {
@@ -955,6 +973,7 @@ describe('MDC-based MatSlider', () => {
       testComponent.dir = 'rtl';
       fixture.detectChanges();
       flushRequestAnimationFrame();
+      fixture.detectChanges();
 
       dispatchMousedownEventSequence(sliderNativeElement, 0.3);
       fixture.detectChanges();
@@ -966,6 +985,7 @@ describe('MDC-based MatSlider', () => {
       testComponent.dir = 'rtl';
       fixture.detectChanges();
       flushRequestAnimationFrame();
+      fixture.detectChanges();
 
       const thumbContainerEl = <HTMLElement>sliderNativeElement
           .querySelector('.mdc-slider__thumb-container');
@@ -975,6 +995,7 @@ describe('MDC-based MatSlider', () => {
       testComponent.dir = 'ltr';
       fixture.detectChanges();
       flushRequestAnimationFrame();
+      fixture.detectChanges();
 
       expect(thumbContainerEl.style.transform).toContain('translateX(0px)');
     }));