build(aio): upgrade rxjs to 6.0.0-beta.0 (#22872)

PR Close #22872

aio/src/app/custom-elements/code/code.component.spec.ts

@@ -3,6 +3,8 @@ import { async, ComponentFixture, TestBed } from '@angular/core/testing';
 import { MatSnackBar } from '@angular/material';
 import { By } from '@angular/platform-browser';
 import { NoopAnimationsModule } from '@angular/platform-browser/animations';
+import 'rxjs/add/operator/first';
+import 'rxjs/add/operator/toPromise';
 
 import { CodeComponent } from './code.component';
 import { CodeModule } from './code.module';
@@ -61,44 +63,53 @@ describe('CodeComponent', () => {
   }));
 
   describe('pretty printing', () => {
-    it('should format a one-line code sample', () => {
+    const untilCodeFormatted = () => {
+      const emitter = hostComponent.codeComponent.codeFormatted;
+      return emitter.first().toPromise();
+    };
+    const hasLineNumbers = async () => {
+      // presence of `<li>`s are a tell-tale for line numbers
+      await untilCodeFormatted();
+      return 0 < fixture.nativeElement.querySelectorAll('li').length;
+    };
+
+    it('should format a one-line code sample', async () => {
+      hostComponent.setCode(oneLineCode);
+      await untilCodeFormatted();
+
       // 'pln' spans are a tell-tale for syntax highlighing
       const spans = fixture.nativeElement.querySelectorAll('span.pln');
       expect(spans.length).toBeGreaterThan(0, 'formatted spans');
     });
 
-    function hasLineNumbers() {
-      // presence of `<li>`s are a tell-tale for line numbers
-      return 0 < fixture.nativeElement.querySelectorAll('li').length;
-    }
-
-    it('should format a one-line code sample without linenums by default', () => {
-      expect(hasLineNumbers()).toBe(false);
+    it('should format a one-line code sample without linenums by default', async () => {
+      hostComponent.setCode(oneLineCode);
+      expect(await hasLineNumbers()).toBe(false);
     });
 
-    it('should add line numbers to one-line code sample when linenums set true', () => {
+    it('should add line numbers to one-line code sample when linenums set true', async () => {
       hostComponent.linenums = 'true';
       fixture.detectChanges();
 
-      expect(hasLineNumbers()).toBe(true);
+      expect(await hasLineNumbers()).toBe(true);
     });
 
-    it('should format a small multi-line code without linenums by default', () => {
+    it('should format a small multi-line code without linenums by default', async () => {
       hostComponent.setCode(smallMultiLineCode);
-      expect(hasLineNumbers()).toBe(false);
+      expect(await hasLineNumbers()).toBe(false);
     });
 
-    it('should add line numbers to a big multi-line code by default', () => {
+    it('should add line numbers to a big multi-line code by default', async () => {
       hostComponent.setCode(bigMultiLineCode);
-      expect(hasLineNumbers()).toBe(true);
+      expect(await hasLineNumbers()).toBe(true);
     });
 
-    it('should format big multi-line code without linenums when linenums set false', () => {
+    it('should format big multi-line code without linenums when linenums set false', async () => {
       hostComponent.linenums = false;
       fixture.detectChanges();
 
       hostComponent.setCode(bigMultiLineCode);
-      expect(hasLineNumbers()).toBe(false);
+      expect(await hasLineNumbers()).toBe(false);
     });
   });
 

aio/src/app/custom-elements/code/code.component.ts

@@ -1,8 +1,9 @@
-import { Component, ElementRef, ViewChild, Input, OnChanges } from '@angular/core';
+import { Component, ElementRef, EventEmitter, Input, OnChanges, Output, ViewChild } from '@angular/core';
 import { Logger } from 'app/shared/logger.service';
 import { PrettyPrinter } from './pretty-printer.service';
 import { CopierService } from 'app/shared/copier.service';
 import { MatSnackBar } from '@angular/material/snack-bar';
+import 'rxjs/add/operator/do';
 
 /**
  * If linenums is not set, this is the default maximum number of lines that
@@ -93,6 +94,8 @@ export class CodeComponent implements OnChanges {
   get title(): string { return this._title; }
   private _title: string;
 
+  @Output() codeFormatted = new EventEmitter<void>();
+
   /** The element in the template that will display the formatted code. */
   @ViewChild('codeContainer') codeContainer: ElementRef;
 
@@ -115,7 +118,9 @@ export class CodeComponent implements OnChanges {
     this.setCodeHtml(leftAlignedCode); // start with unformatted code
     this.codeText = this.getCodeText(); // store the unformatted code as text (for copying)
 
-    this.pretty.formatCode(leftAlignedCode, this.language, this.getLinenums(leftAlignedCode))
+    this.pretty
+        .formatCode(leftAlignedCode, this.language, this.getLinenums(leftAlignedCode))
+        .do(() => this.codeFormatted.emit())
         .subscribe(c => this.setCodeHtml(c), err => { /* ignore failure to format */ }
     );
   }

aio/src/app/custom-elements/code/pretty-printer.service.ts

@@ -1,7 +1,6 @@
 import { Injectable } from '@angular/core';
 
-import { Observable } from 'rxjs/Observable';
-import { fromPromise } from 'rxjs/observable/fromPromise';
+import { from as fromPromise, Observable } from 'rxjs';
 import 'rxjs/add/operator/map';
 import 'rxjs/add/operator/first';