Migrate rxjs 5 to 6

Author: tommysitu

package-lock.json

@@ -45,9 +45,9 @@
     "karma-coverage-istanbul-reporter": "~2.0.1",
     "karma-jasmine": "~1.1.2",
     "karma-jasmine-html-reporter": "~1.3.0",
-    "protractor": "^5.3.1",
+    "protractor": "^5.4.0",
     "ts-node": "~3.3.0",
     "tslint": "~5.10.0",
-    "typescript": "~2.7.2"
+    "typescript": "~2.8.0"
   }
 }

package.json

@@ -2,7 +2,7 @@
 import { Injector, ReflectiveInjector } from '@angular/core';
 import { AuthService } from '../../shared/services/auth.service';
 import { StatusDialogService } from './status-dialog.service';
-import { Observable } from 'rxjs/Observable';
+import { Observable, of } from 'rxjs';
 import { Router } from '@angular/router';
 import { fakeAsync, tick } from '@angular/core/testing';
 import { MockAuthService, MockRouter } from '../../shared/testing/mock-helper.spec';
@@ -27,7 +27,7 @@ describe('Service: StatusDialog', () => {
   });
 
   it('should reload page if Hoverfly is running again', () => {
-    authService.checkAuthenticated.and.returnValue(Observable.of(true));
+    authService.checkAuthenticated.and.returnValue(of(true));
 
     service.retry();
 
@@ -36,7 +36,7 @@ describe('Service: StatusDialog', () => {
 
   it('should do nothing if Hoverfly is down', () => {
 
-    authService.checkAuthenticated.and.returnValue(Observable.of(false));
+    authService.checkAuthenticated.and.returnValue(of(false));
 
     service.retry();
 
@@ -45,7 +45,7 @@ describe('Service: StatusDialog', () => {
 
   it('should navigate to dashboard from login page when Hoverfly is running again', fakeAsync(() => {
 
-    authService.checkAuthenticated.and.returnValue(Observable.of(true));
+    authService.checkAuthenticated.and.returnValue(of(true));
     // Mocking router url
     router.setUrl('/login');
     router.navigateByUrl.and.returnValue(Promise.resolve(true));

src/app/components/status-dialog/status-dialog.service.spec.ts

@@ -3,6 +3,7 @@
 import { Injectable } from '@angular/core';
 import { AuthService } from '../../shared/services/auth.service';
 import { Router } from '@angular/router';
+import { filter } from 'rxjs/operators';
 @Injectable()
 export class StatusDialogService {
 
@@ -11,7 +12,7 @@ export class StatusDialogService {
 
   retry() {
     this.authService.checkAuthenticated()
-      .filter(isHealthy => isHealthy)
+      .pipe(filter(isHealthy => isHealthy))
       .subscribe(() => {
         if (this.router.url === '/login') {
           this.router.navigateByUrl('/')

src/app/components/status-dialog/status-dialog.service.ts

@@ -6,6 +6,7 @@ import { Map } from 'immutable';
 import { Hoverfly } from '../../shared/models/hoverfly.model';
 import { API_ERRORS } from '../../shared/http/error-handling';
 import { EVENT_TYPE, NotificationService } from '../notifications/notification.service';
+import { filter, map } from 'rxjs/operators';
 
 @Component({
   selector: 'app-topnavbar',
@@ -23,7 +24,7 @@ export class TopNavBarComponent implements OnInit {
 
   ngOnInit() {
     this.notifyService.errors
-      .filter(error => error === API_ERRORS.UNAUTHORIZED)
+      .pipe(filter(error => error === API_ERRORS.UNAUTHORIZED))
       .subscribe(() => {
         this.logout()
         }
@@ -40,7 +41,7 @@ export class TopNavBarComponent implements OnInit {
 
     // TODO resolve version before view init
     this.hoverfly$
-      .map((hoverfly: Map<any, any>) => hoverfly.toJS())
+      .pipe(map((hoverfly: Map<any, any>) => hoverfly.toJS()))
       .subscribe((hoverfly: Hoverfly) =>  {
         this.version = hoverfly.version || 'latest';
       });

src/app/components/topnavbar/topnavbar.component.ts

@@ -1,9 +1,8 @@
 
 
 import { Injector, ReflectiveInjector } from '@angular/core';
-import createSpy = jasmine.createSpy;
 import { AuthGuard } from './auth.guard';
-import { Observable } from 'rxjs/Observable';
+import { Observable, of } from 'rxjs';
 import { AuthService } from '../services/auth.service';
 import { MockAuthService } from '../testing/mock-helper.spec';
 
@@ -29,7 +28,7 @@ describe('Auth Guard', () => {
   it('should return false if is not authenticated', () => {
 
     let result;
-    service.checkAuthenticated.and.returnValue(Observable.of(false));
+    service.checkAuthenticated.and.returnValue(of(false));
 
     authGuard.canActivate().subscribe(activated => result = activated);
 
@@ -39,7 +38,7 @@ describe('Auth Guard', () => {
   it('should return true if is authenticated', () => {
 
     let result;
-    service.checkAuthenticated.and.returnValue(Observable.of(true));
+    service.checkAuthenticated.and.returnValue(of(true));
 
     authGuard.canActivate().subscribe(activated => result = activated);
 
@@ -48,7 +47,7 @@ describe('Auth Guard', () => {
 
   it('should logout if is not authenticated', () => {
 
-    service.checkAuthenticated.and.returnValue(Observable.of(false));
+    service.checkAuthenticated.and.returnValue(of(false));
     authGuard.canActivate().subscribe();
 
     expect(service.logout).toHaveBeenCalled();

src/app/shared/guards/auth.guard.spec.ts

@@ -2,6 +2,7 @@ import { Injectable } from '@angular/core';
 import { CanActivate, Router } from '@angular/router';
 import { Observable } from 'rxjs';
 import { AuthService } from '../services/auth.service';
+import { map } from 'rxjs/operators';
 
 @Injectable()
 export class AuthGuard implements CanActivate {
@@ -10,11 +11,11 @@ export class AuthGuard implements CanActivate {
   }
 
   canActivate(): Observable<boolean> {
-    return this.service.checkAuthenticated().map((isAuthenticated: boolean) => {
+    return this.service.checkAuthenticated().pipe(map((isAuthenticated: boolean) => {
       if (!isAuthenticated) {
         this.service.logout();
       }
       return isAuthenticated
-    });
+    }));
   }
 }

src/app/shared/guards/auth.guard.ts

@@ -1,9 +1,10 @@
 import { Injectable } from '@angular/core';
 import { Router } from '@angular/router';
-import { Observable } from 'rxjs';
+import { Observable, of } from 'rxjs';
 import { Http, Response } from '@angular/http';
 import { httpErrorHandler, notifyError } from '../http/error-handling';
 import { EVENT_TYPE, NotificationService } from '../../components/notifications/notification.service';
+import { catchError, map } from 'rxjs/operators';
 
 export const SESSION_API_TOKEN = 'api-token';
 
@@ -18,19 +19,20 @@ export class AuthService {
   checkAuthenticated(): Observable<boolean> {
 
     return this.http.get('/api/v2/hoverfly/version')
-      .map((res: Response) => res.status === 200)
-      .catch(err => {
-        notifyError(err, this.notifyService);
-        return Observable.of(false);
-      });
+      .pipe(map((res: Response) => res.status === 200),
+        catchError(err => {
+          notifyError(err, this.notifyService);
+          return of(false);
+        })
+      );
   }
 
   login(username, password): void {
     this.http.post('/api/token-auth', {
       username: username,
       password: password
     })
-      .map((res: Response) => res.json().token)
+      .pipe(map((res: Response) => res.json().token))
       .subscribe(token => {
           sessionStorage.setItem(SESSION_API_TOKEN, token);
           this.notifyService.sendEvent(EVENT_TYPE.LOGIN);

src/app/shared/services/auth.service.ts

@@ -1,11 +1,12 @@
 import { Injectable } from '@angular/core';
 import { Http } from '@angular/http';
-import { Observable ,  Subscription } from 'rxjs';
+import { Observable, Subscription, timer } from 'rxjs';
 import { NgRedux } from '@angular-redux/store';
 import { AppState } from '../../app.state';
 import { Middleware } from '../models/middlware.model';
 import { API_ERRORS, httpErrorHandler } from '../http/error-handling';
 import { NotificationService } from '../../components/notifications/notification.service';
+import { filter, map } from 'rxjs/operators';
 
 export const HOVERFLY_ACTIONS = {
   UPDATE: 'UPDATE',
@@ -20,25 +21,25 @@ export class HoverflyService {
 
   setMode(modeSelection): void {
     this.http.put('/api/v2/hoverfly/mode', JSON.stringify({ mode: modeSelection }))
-      .map(res => res.json())
+      .pipe(map(res => res.json()))
       .subscribe(
         this.updateHoverfly(),
         httpErrorHandler(this.notifyService));
   }
 
   getHoverflyInfo(): void {
     this.http.get('/api/v2/hoverfly')
-      .map(res => res.json())
+      .pipe(map(res => res.json()))
       .subscribe(
         this.updateHoverfly(),
         httpErrorHandler(this.notifyService));
   }
 
   getMiddleware(): void {
     this.http.get('/api/v2/hoverfly/middleware')
-      .map(res => res.json())
-      .filter((data: Middleware) => !!data.binary || !!data.script || !!data.remote)
-      .map(data => new Object({ middleware: data }))
+      .pipe(map(res => res.json()),
+        filter((data: Middleware) => !!data.binary || !!data.script || !!data.remote),
+        map(data => new Object({ middleware: data })))
       .subscribe(
         this.updateHoverfly(),
         httpErrorHandler(this.notifyService));
@@ -47,7 +48,7 @@ export class HoverflyService {
 
   pollHoverfly(): Subscription {
 
-    return Observable.timer(0, 5000)
+    return timer(0, 5000)
       .subscribe(() => {
         this.getHoverflyInfo();
         this.getMiddleware();

src/app/shared/services/hoverfly.service.ts

@@ -1,4 +1,4 @@
-import { Observable } from 'rxjs/Observable';
+import { Observable } from 'rxjs';
 import { NgRedux } from '@angular-redux/store';
 
 export class MockRedux extends NgRedux<any> {