test(aio): fix failing tests (#23234)

PR Close #23234

aio/package.json

@@ -88,7 +88,7 @@
     "jasmine": "^2.6.0",
     "ng-pwa-tools": "^0.0.10",
     "rxjs": "6.0.0-uncanny-rc.7",
-    "rxjs-compat": "^6.0.0-turbo-rc.4",
+    "rxjs-compat": "6.0.0-uncanny-rc.7",
     "tslib": "^1.9.0",
     "web-animations-js": "^2.2.5",
     "zone.js": "^0.8.26"
@@ -159,4 +159,4 @@
     "xregexp": "^4.0.0",
     "yargs": "^7.0.2"
   }
-}
+}

aio/src/app/app.component.html

@@ -34,7 +34,7 @@
 
 <mat-sidenav-container class="sidenav-container" [class.starting]="isStarting" [class.has-floating-toc]="hasFloatingToc" role="main">
 
-  <mat-sidenav [ngClass]="{'collapsed': !isSideBySide}" #sidenav class="sidenav" [opened]="isOpened" [mode]="mode" (open)="updateHostClasses()" (close)="updateHostClasses()">
+  <mat-sidenav [ngClass]="{'collapsed': !isSideBySide}" #sidenav class="sidenav" [mode]="mode" [opened]="isOpened" (openedChange)="updateHostClasses()">
     <aio-nav-menu *ngIf="!isSideBySide" [nodes]="topMenuNarrowNodes" [currentNode]="currentNodes?.TopBarNarrow" [isWide]="false"></aio-nav-menu>
     <aio-nav-menu [nodes]="sideNavNodes" [currentNode]="currentNodes?.SideNav" [isWide]="isSideBySide"></aio-nav-menu>
 

aio/src/app/app.component.spec.ts

@@ -7,7 +7,7 @@ import { MatProgressBar, MatSidenav } from '@angular/material';
 import { By } from '@angular/platform-browser';
 
 import { timer } from 'rxjs';
-import { mapTo } from 'rxjs/operators';
+import { first, mapTo } from 'rxjs/operators';
 
 import { AppComponent } from './app.component';
 import { AppModule } from './app.module';
@@ -1113,13 +1113,25 @@ describe('AppComponent', () => {
         navigateTo('guide/pipes');
         checkHostClass('sidenav', 'open');
 
-        await sidenav.close();
+        sidenav.close();
+        await waitForSidenavOpenedChange();
         fixture.detectChanges();
         checkHostClass('sidenav', 'closed');
 
-        await sidenav.open();
+        sidenav.open();
+        await waitForSidenavOpenedChange();
         fixture.detectChanges();
         checkHostClass('sidenav', 'open');
+
+        async function waitForSidenavOpenedChange() {
+          const promise = new Promise(resolve => sidenav.openedChange.pipe(first()).subscribe(resolve));
+
+          await Promise.resolve();  // Wait for `MatSidenav.openedChange.emit()` to be called.
+          jasmine.clock().tick(0);  // Notify `MatSidenav.openedChange` observers.
+                                    // (It is an async `EventEmitter`, thus uses `setTimeout()`.)
+
+          await promise;
+        }
       });
 
       it('should set the css class of the host container based on the initial deployment mode', () => {

aio/src/app/layout/toc/toc.component.spec.ts

@@ -366,13 +366,18 @@ describe('TocComponent', () => {
         let parentScrollTop: number;
 
         beforeEach(() => {
+          const hostElem = fixture.nativeElement;
           const firstItem = page.listItems[0].nativeElement;
-          const offsetParent = firstItem.offsetParent;
 
-          offsetParent.style.maxHeight = `${offsetParent.clientHeight - firstItem.clientHeight}px`;
+          Object.assign(hostElem.style, {
-          Object.defineProperty(offsetParent, 'scrollTop', {
+            display: 'block',
+            maxHeight: `${hostElem.clientHeight - firstItem.clientHeight}px`,
+            overflow: 'auto',
+            position: 'relative',
+          });
+          Object.defineProperty(hostElem, 'scrollTop', {
             get: () => parentScrollTop,
-            set: v => parentScrollTop = v
+            set: v => parentScrollTop = v,
           });
 
           parentScrollTop = 0;
@@ -461,7 +466,7 @@ class TestTocService {
   activeItemIndex = new BehaviorSubject<number | null>(null);
   setActiveIndex(index: number|null) {
     this.activeItemIndex.next(index);
-    if (asap.scheduled) {
+    if (asap.scheduled !== undefined) {
       asap.flush();
     }
   }

aio/src/app/layout/toc/toc.component.ts

@@ -18,7 +18,7 @@ export class TocComponent implements OnInit, AfterViewInit, OnDestroy {
   type: TocType = 'None';
   isCollapsed = true;
   isEmbedded = false;
-  @ViewChildren('createTocItem') private items: QueryList<ElementRef>;
+  @ViewChildren('tocItem') private items: QueryList<ElementRef>;
   private onDestroy = new Subject();
   private primaryMax = 4;
   tocList: TocItem[];

aio/yarn.lock

@@ -8886,9 +8886,9 @@ rx@2.3.24:
   version "2.3.24"
   resolved "https://registry.yarnpkg.com/rx/-/rx-2.3.24.tgz#14f950a4217d7e35daa71bbcbe58eff68ea4b2b7"
 
-rxjs-compat@^6.0.0-turbo-rc.4:
+rxjs-compat@6.0.0-uncanny-rc.7:
-  version "6.0.0-turbo-rc.4"
+  version "6.0.0-uncanny-rc.7"
-  resolved "https://registry.yarnpkg.com/rxjs-compat/-/rxjs-compat-6.0.0-turbo-rc.4.tgz#58efc9e50d5dbd027c75cecb23671ccc3ce6ce4c"
+  resolved "https://registry.yarnpkg.com/rxjs-compat/-/rxjs-compat-6.0.0-uncanny-rc.7.tgz#4d9d88c2296aefda6b6503a52c27d1bf7e6ff1f0"
 
 rxjs@6.0.0-uncanny-rc.7:
   version "6.0.0-uncanny-rc.7"