fix(breakpoint-observer): fix the breakpoint observer emit count and accuracy

The breakpoint observer emits multiple and incorrect states when more than one query changes.
Debounce the observer emissions to eliminate the incorrect states and emit once.

References #10925

Author: TrevorKarjanis

src/cdk/layout/breakpoints-observer.spec.ts

@@ -9,10 +9,10 @@
 import {LayoutModule} from './layout-module';
 import {BreakpointObserver, BreakpointState} from './breakpoints-observer';
 import {MediaMatcher} from './media-matcher';
-import {fakeAsync, TestBed, inject, flush} from '@angular/core/testing';
+import {fakeAsync, TestBed, inject, flush, tick} from '@angular/core/testing';
 import {Injectable} from '@angular/core';
 import {Subscription} from 'rxjs';
-import {take} from 'rxjs/operators';
+import {skip, take} from 'rxjs/operators';
 
 describe('BreakpointObserver', () => {
   let breakpointObserver: BreakpointObserver;
@@ -93,10 +93,10 @@ describe('BreakpointObserver', () => {
       queryMatchState = state.matches;
     });
 
-    flush();
+    tick();
     expect(queryMatchState).toBeTruthy();
     mediaMatcher.setMatchesQuery(query, false);
-    flush();
+    tick();
     expect(queryMatchState).toBeFalsy();
   }));
 
@@ -111,33 +111,50 @@ describe('BreakpointObserver', () => {
 
       mediaMatcher.setMatchesQuery(queryOne, false);
       mediaMatcher.setMatchesQuery(queryTwo, false);
-      flush();
+      tick();
       expect(state.breakpoints).toEqual({[queryOne]: false, [queryTwo]: false});
 
       mediaMatcher.setMatchesQuery(queryOne, true);
       mediaMatcher.setMatchesQuery(queryTwo, false);
-      flush();
+      tick();
       expect(state.breakpoints).toEqual({[queryOne]: true, [queryTwo]: false});
   }));
 
   it('emits a true matches state when the query is matched', fakeAsync(() => {
     const query = '(width: 999px)';
     breakpointObserver.observe(query).subscribe();
     mediaMatcher.setMatchesQuery(query, true);
+    tick();
     expect(breakpointObserver.isMatched(query)).toBeTruthy();
   }));
 
   it('emits a false matches state when the query is not matched', fakeAsync(() => {
     const query = '(width: 999px)';
     breakpointObserver.observe(query).subscribe();
     mediaMatcher.setMatchesQuery(query, false);
+    tick();
     expect(breakpointObserver.isMatched(query)).toBeFalsy();
   }));
 
+  it('emits one event when multiple queries change', fakeAsync(() => {
+    const observer = jasmine.createSpy('observer');
+    const queryOne = '(width: 700px)';
+    const queryTwo = '(width: 999px)';
+    breakpointObserver.observe([queryOne, queryTwo])
+      .pipe(skip(1))
+      .subscribe(observer);
+
+    mediaMatcher.setMatchesQuery(queryOne, true);
+    mediaMatcher.setMatchesQuery(queryTwo, false);
+
+    tick();
+    expect(observer).toHaveBeenCalledTimes(1);
+  }));
+
   it('should not complete other subscribers when preceding subscriber completes', fakeAsync(() => {
     const queryOne = '(width: 700px)';
     const queryTwo = '(width: 999px)';
-    const breakpoint = breakpointObserver.observe([queryOne, queryTwo]);
+    const breakpoint = breakpointObserver.observe([queryOne, queryTwo]).pipe(skip(1));
     const subscriptions: Subscription[] = [];
     let emittedValues: number[] = [];
 
@@ -148,14 +165,14 @@ describe('BreakpointObserver', () => {
 
     mediaMatcher.setMatchesQuery(queryOne, true);
     mediaMatcher.setMatchesQuery(queryTwo, false);
-    flush();
+    tick();
 
     expect(emittedValues).toEqual([1, 2, 3, 4]);
     emittedValues = [];
 
     mediaMatcher.setMatchesQuery(queryOne, false);
     mediaMatcher.setMatchesQuery(queryTwo, true);
-    flush();
+    tick();
 
     expect(emittedValues).toEqual([1, 3, 4]);
 
@@ -172,7 +189,11 @@ export class FakeMediaQueryList {
   /** Toggles the matches state and "emits" a change event. */
   setMatches(matches: boolean) {
     this.matches = matches;
-    this._listeners.forEach(listener => listener(this as any));
+
+    /** Simulate an asynchronous task. */
+    setTimeout(() => {
+      this._listeners.forEach(listener => listener(this as any));
+    });
   }
 
   /** Registers a callback method for change events. */

src/cdk/layout/breakpoints-observer.ts

@@ -8,7 +8,7 @@
 
 import {Injectable, NgZone, OnDestroy} from '@angular/core';
 import {MediaMatcher} from './media-matcher';
-import {asapScheduler, combineLatest, Observable, Subject, Observer} from 'rxjs';
+import {combineLatest, Observable, Subject, Observer} from 'rxjs';
 import {debounceTime, map, startWith, takeUntil} from 'rxjs/operators';
 import {coerceArray} from '@angular/cdk/coercion';
 
@@ -76,7 +76,7 @@ export class BreakpointObserver implements OnDestroy {
     const observables = queries.map(query => this._registerQuery(query).observable);
 
     return combineLatest(observables).pipe(
-      debounceTime(0, asapScheduler),
+      debounceTime(0),
       map((breakpointStates: InternalBreakpointState[]) => {
         const response: BreakpointState = {
           matches: false,

src/material/bottom-sheet/bottom-sheet.spec.ts

@@ -119,7 +119,7 @@ describe('MatBottomSheet', () => {
     // callback should not be called before animation is complete
     expect(spy).not.toHaveBeenCalled();
 
-    flushMicrotasks();
+    tick();
     expect(spy).toHaveBeenCalled();
   }));
 
@@ -212,6 +212,8 @@ describe('MatBottomSheet', () => {
     dispatchKeyboardEvent(document.body, 'keydown', A, container);
 
     expect(spy).toHaveBeenCalledTimes(3);
+
+    tick(); // Tick for the breakpoint observer
   }));
 
   it('should allow setting the layout direction', () => {
@@ -296,7 +298,7 @@ describe('MatBottomSheet', () => {
     viewContainerFixture.detectChanges();
 
     // Wait for the dismiss animation to finish.
-    flush();
+    tick();
     bottomSheetRef = bottomSheet.open(TacoMsg, config);
     viewContainerFixture.detectChanges();
 
@@ -400,7 +402,7 @@ describe('MatBottomSheet', () => {
 
     mockLocation.simulateUrlPop('');
     viewContainerFixture.detectChanges();
-    flush();
+    tick();
 
     expect(overlayContainerElement.querySelector('mat-bottom-sheet-container')).toBeTruthy();
   }));
@@ -440,7 +442,7 @@ describe('MatBottomSheet', () => {
       let backdrop = overlayContainerElement.querySelector('.cdk-overlay-backdrop') as HTMLElement;
       backdrop.click();
       viewContainerFixture.detectChanges();
-      flush();
+      tick();
 
       expect(overlayContainerElement.querySelector('mat-bottom-sheet-container')).toBeTruthy();
     }));
@@ -454,7 +456,7 @@ describe('MatBottomSheet', () => {
       viewContainerFixture.detectChanges();
       dispatchKeyboardEvent(document.body, 'keydown', ESCAPE);
       viewContainerFixture.detectChanges();
-      flush();
+      tick();
 
       expect(overlayContainerElement.querySelector('mat-bottom-sheet-container')).toBeTruthy();
     }));
@@ -541,7 +543,7 @@ describe('MatBottomSheet', () => {
       });
 
       viewContainerFixture.detectChanges();
-      flushMicrotasks();
+      tick();
 
       expect(document.activeElement!.tagName).toBe('MAT-BOTTOM-SHEET-CONTAINER',
           'Expected bottom sheet container to be focused.');
@@ -554,22 +556,22 @@ describe('MatBottomSheet', () => {
       });
 
       viewContainerFixture.detectChanges();
-      flushMicrotasks();
+      tick();
 
       const focusTrapAnchors = overlayContainerElement.querySelectorAll('.cdk-focus-trap-anchor');
 
       expect(focusTrapAnchors.length).toBeGreaterThan(0);
     }));
 
-    it('should focus the first tabbable element of the bottom sheet on open when' +
+    it('should focus the first tabbable element of the bottom sheet on open when ' +
       'autoFocus is enabled', fakeAsync(() => {
         bottomSheet.open(PizzaMsg, {
           viewContainerRef: testViewContainerRef,
           autoFocus: true
         });
 
         viewContainerFixture.detectChanges();
-        flushMicrotasks();
+        tick();
 
         expect(document.activeElement!.tagName).toBe('INPUT',
             'Expected first tabbable element (input) in the sheet to be focused.');
@@ -582,7 +584,7 @@ describe('MatBottomSheet', () => {
       });
 
       viewContainerFixture.detectChanges();
-      flushMicrotasks();
+      tick();
 
       expect(document.activeElement!.tagName).not.toBe('INPUT');
     }));

src/material/snack-bar/snack-bar.spec.ts

@@ -198,6 +198,8 @@ describe('MatSnackBar', () => {
     // Expect the live announcer to have been called with the display message and some
     // string for the politeness. We do not want to test for the default politeness here.
     expect(liveAnnouncer.announce).toHaveBeenCalledWith(simpleMessage, jasmine.any(String));
+
+    tick(); // Tick for the breakpoint observer
   }));
 
   it('should be able to specify a custom announcement message', fakeAsync(() => {
@@ -213,6 +215,8 @@ describe('MatSnackBar', () => {
       .toBe(1, 'Expected the overlay with a custom `announcementMessage` to be added');
 
     expect(liveAnnouncer.announce).toHaveBeenCalledWith('Custom announcement', 'assertive');
+
+    tick(); // Tick for the breakpoint observer
   }));
 
   it('should be able to get dismissed through the service', fakeAsync(() => {

src/material/tooltip/tooltip.spec.ts

@@ -401,6 +401,8 @@ describe('MatTooltip', () => {
 
       fixture.detectChanges();
       expect(overlayContainerElement.textContent).toContain(newMessage);
+
+      tick(); // Tick for the breakpoint observer
     }));
 
     it('should allow extra classes to be set on the tooltip', fakeAsync(() => {
@@ -427,6 +429,8 @@ describe('MatTooltip', () => {
         'Expected to have the class after enabling matTooltipClass');
       expect(tooltipElement.classList).toContain('custom-two',
         'Expected to have the class after enabling matTooltipClass');
+
+      tick(); // Tick for the breakpoint observer
     }));
 
     it('should be removed after parent destroyed', fakeAsync(() => {
@@ -558,6 +562,8 @@ describe('MatTooltip', () => {
 
       expect(tooltipWrapper).toBeTruthy('Expected tooltip to be shown.');
       expect(tooltipWrapper.getAttribute('dir')).toBe('rtl', 'Expected tooltip to be in RTL mode.');
+
+      tick(); // Tick for the breakpoint observer
     }));
 
     it('should keep the overlay direction in sync with the trigger direction', fakeAsync(() => {