refactor(main): use HttpClient instead of Http

Author: Awk34

Diff for: templates/app/client/app/app.module.js

@@ -12,6 +12,7 @@ import {
     RequestOptions,
     RequestOptionsArgs,<% } %>
 } from '@angular/http';
+import { HttpClientModule } from '@angular/common/http';
 import {
     removeNgStyles,
     createNewHosts,
@@ -67,6 +68,7 @@ const appRoutes: Routes = [{ path: '',
     imports: [
         BrowserModule,
         HttpModule,
+        HttpClientModule,
         <%_ if (filters.uirouter) { -%>
         UIRouterModule.forRoot(),<% } %>
         <%_ if (filters.ngroute) { -%>

Diff for: templates/app/client/app/main/main.component.js

@@ -1,6 +1,5 @@
 import { Component, OnInit<% if(filters.ws) { %>, OnDestroy<% } %> } from '@angular/core';
-import { Http } from '@angular/http';
-import { Observable } from 'rxjs/Observable';
+import { HttpClient } from '@angular/common/http';
 import 'rxjs/add/operator/map';<% if(filters.ws) { %>
 import { SocketService } from '../../components/socket/socket.service';<% } %>
 
@@ -10,28 +9,24 @@ import { SocketService } from '../../components/socket/socket.service';<% } %>
     styles: [require('./main.<%=styleExt%>')],
 })
 export class MainComponent implements OnInit<% if(filters.ws) { %>, OnDestroy<% } %> {
-    Http;
     <%_ if(filters.ws) { -%>
     SocketService;<% } %>
     awesomeThings = [];
     <%_ if(filters.models) { -%>
     newThing = '';<% } %>
 
-    static parameters = [Http<% if(filters.ws) { %>, SocketService<% } %>];
-    constructor(<%= private() %>http: Http<% if(filters.ws) { %>, <%= private() %>socketService: SocketService<% } %>) {
-        this.Http = http;
+    static parameters = [HttpClient<% if(filters.ws) { %>, SocketService<% } %>];
+    constructor(<%= private() %>http: HttpClient<% if(filters.ws) { %>, <%= private() %>socketService: SocketService<% } %>) {
+        this.http = http;
         <%_ if(filters.ws) { -%>
         this.SocketService = socketService;<% } %>
     }
 
     ngOnInit() {
-        return this.Http.get('/api/things')
-            .map(res => res.json())
-            // .catch(err => Observable.throw(err.json().error || 'Server error'))
+        return this.http.get('/api/things')
             .subscribe(things => {
                 this.awesomeThings = things;
-                <%_ if(filters.ws) { -%>
-                this.SocketService.syncUpdates('thing', this.awesomeThings);<% } %>
+                this.SocketService.syncUpdates('thing', this.awesomeThings);
             });
     }<% if (filters.models) { %>
     <%_ if(filters.ws) { %>
@@ -45,19 +40,15 @@ export class MainComponent implements OnInit<% if(filters.ws) { %>, OnDestroy<%
             let text = this.newThing;
             this.newThing = '';
 
-            return this.Http.post('/api/things', { name: text })
-                .map(res => res.json())
-                .catch(err => Observable.throw(err.json().error || 'Server error'))
+            return this.http.post('/api/things', { name: text })
                 .subscribe(thing => {
                     console.log('Added Thing:', thing);
                 });
         }
     }
 
     deleteThing(thing) {
-        return this.Http.delete(`/api/things/${thing._id}`)
-            .map(res => res.json())
-            .catch(err => Observable.throw(err.json().error || 'Server error'))
+        return this.http.delete(`/api/things/${thing._id}`)
             .subscribe(() => {
                 console.log('Deleted Thing');
             });

Diff for: templates/app/client/app/main/main.component.spec.js

@@ -5,16 +5,7 @@ import {
     inject,
     TestBed,
 } from '@angular/core/testing';
-import {
-    BaseRequestOptions,
-    ConnectionBackend,
-    Http,
-    HttpModule,
-    Response,
-    ResponseOptions,
-} from '@angular/http';
-import { MockBackend } from '@angular/http/testing';
-<%_ if(filters.mocha && filters.expect) { -%>
+import { HttpClientTestingModule, HttpTestingController } from '@angular/common/http/testing';<% if(filters.mocha && filters.expect) { %>
 import { expect } from 'chai';<% } %><% if(filters.uibootstrap) { %>
 import { TooltipModule } from 'ngx-bootstrap';<% } %>
 import { FormsModule } from '@angular/forms';<% if(filters.ws) { %>
@@ -25,51 +16,48 @@ import { MainComponent } from './main.component';
 describe('Component: MainComponent', function() {
     let comp: MainComponent;
     let fixture: ComponentFixture<MainComponent>;
+    let httpTestingController: HttpTestingController;
+    const mockThings = ['HTML5 Boilerplate', 'AngularJS', 'Karma', 'Express'];
 
     beforeEach(async(() => {
         TestBed.configureTestingModule({
             imports: [
                 FormsModule,<% if(filters.uibootstrap) { %>
                 TooltipModule.forRoot(),<% } %>
-                HttpModule,
+                HttpClientTestingModule,
             ],
-            declarations: [ MainComponent ], // declare the test component
+            declarations: [ MainComponent ], // declare the test component<% if(filters.ws) { %>
             providers: [
-                BaseRequestOptions,
-                MockBackend,
-                {
-                    provide: Http,
-                    useFactory: (backend: ConnectionBackend, defaultOptions: BaseRequestOptions) => {
-                        return new Http(backend, defaultOptions);
-                    },
-                    deps: [MockBackend, BaseRequestOptions]
-                },<% if(filters.ws) { %>
-                { provide: SocketService, useClass: SocketServiceStub },<% } %>
-            ],
+                { provide: SocketService, useClass: SocketServiceStub },
+            ],<% } %>
         }).compileComponents();
-    }));
 
-    beforeEach(async(inject([MockBackend], (mockBackend) => {
-        mockBackend.connections.subscribe(conn => {
-            conn.mockRespond(new Response(new ResponseOptions({
-                body: JSON.stringify(['HTML5 Boilerplate', 'AngularJS', 'Karma', 'Express'])
-            })));
-        });
-    })));
+        httpTestingController = TestBed.get(HttpTestingController);
+    }));
 
     beforeEach(async(() => {
         fixture = TestBed.createComponent(MainComponent);
         // MainComponent test instance
         comp = fixture.componentInstance;
 
         /**
-         * Trigger initial data binding.
+         * Trigger initial data binding and run lifecycle hooks
          */
         fixture.detectChanges();
     }));
 
-    it('should attach a list of things to the controller', () => {<% if(filters.jasmine) { %>
-        expect(comp.awesomeThings.length).toEqual(4);<% } else if(filters.mocha) { %>
-        <%= expect() %>comp.awesomeThings.length<%= to() %>.equal(4);<% } %>
+    it('should attach a list of things to the controller', () => {
+        // `GET /api/things` should be made once
+        const req = httpTestingController.expectOne('/api/things');
+        expect(req.request.method).to.equal('GET');
+
+        // Respond with mock data
+        req.flush(mockThings);
+
+        // assert that there are no outstanding requests
+        httpTestingController.verify();
+
+        <% if(filters.jasmine) { %>expect(comp.awesomeThings).toEqual(mockThings);<% } else if(filters.mocha) { %>
+        <%= expect() %>comp.awesomeThings<%= to() %>.equal(mockThings);<% } %>
     });
 });