refactor and implement unit and e2e tests

examples/demo-template/angular2-product-app/src/main/frontend/e2e/app.e2e-spec.ts

@@ -7,8 +7,14 @@ describe('angular2-product-app App', () => {
     page = new Angular2ProductAppPage();
   });
 
-  it('should display message saying app works', () => {
+  it('should display message saying Angular2 Product', () => {
     page.navigateTo();
-    expect(page.getParagraphText()).toEqual('app works!');
+    expect(page.getParagraphText()).toEqual('Angular2 Product');
+  });
+
+  it('should load Products', () => {
+    page.navigateTo();
+    const products = page.loadProducts();
+    ['iphone', 'ipad', 'ipod'].forEach(e => expect(products).toContain(e));
   });
 });

examples/demo-template/angular2-product-app/src/main/frontend/e2e/app.po.ts

@@ -2,10 +2,27 @@ import { browser, element, by } from 'protractor';
 
 export class Angular2ProductAppPage {
   navigateTo() {
-    return browser.get('/');
+    browser.ignoreSynchronization = true;
+    browser.get('/');
+    browser.getCurrentUrl().then(url => {
+      if (url.includes('/auth/realms/demo')) {
+        element(by.id('username')).sendKeys('bburke@redhat.com');
+        element(by.id('password')).sendKeys('password');
+        element(by.id('kc-login')).click();
+      }
+      browser.ignoreSynchronization = false;
+
+    });
   }
 
   getParagraphText() {
     return element(by.css('app-root h1')).getText();
   }
+
+  loadProducts() {
+    const click = element(by.id('reload-data')).click();
+    browser.wait(click, 2000, 'Products should load within 2 seconds');
+    return element.all(by.css('table.table td')).getText();
+  }
+
 }

examples/demo-template/angular2-product-app/src/main/frontend/src/app/app.module.ts

@@ -1,15 +1,11 @@
 import { BrowserModule } from '@angular/platform-browser';
 import { NgModule } from '@angular/core';
 import { FormsModule } from '@angular/forms';
-import {HttpModule, Http, XHRBackend, RequestOptions} from '@angular/http';
+import { HttpModule } from '@angular/http';
 import { KeycloakService } from './keycloak/keycloak.service';
-import {KeycloakHttp} from './keycloak/keycloak.http';
+import { KeycloakHttp, KEYCLOAK_HTTP_PROVIDER } from './keycloak/keycloak.http';
 import { AppComponent } from './app.component';
 
-export function keycloakHttpFactory(backend: XHRBackend, defaultOptions: RequestOptions, keycloakService: KeycloakService) {
-  return new KeycloakHttp(backend, defaultOptions, keycloakService);
-}
-
 @NgModule({
   declarations: [
     AppComponent
@@ -21,11 +17,7 @@ export function keycloakHttpFactory(backend: XHRBackend, defaultOptions: Request
   ],
   providers: [
     KeycloakService,
-    {
-      provide: Http,
-      useFactory: keycloakHttpFactory,
-      deps: [XHRBackend, RequestOptions, KeycloakService]
-    }
+    KEYCLOAK_HTTP_PROVIDER
   ],
   bootstrap: [AppComponent]
 })

examples/demo-template/angular2-product-app/src/main/frontend/src/app/keycloak/keycloak.http.spec.ts

@@ -0,0 +1,47 @@
+import {Injectable, ReflectiveInjector} from '@angular/core';
+import {async, fakeAsync, tick} from '@angular/core/testing';
+import {BaseRequestOptions, ConnectionBackend, Http, RequestOptions} from '@angular/http';
+import {Response, ResponseOptions} from '@angular/http';
+import {MockBackend, MockConnection} from '@angular/http/testing';
+
+import { KeycloakHttp, KEYCLOAK_HTTP_PROVIDER, keycloakHttpFactory } from './keycloak.http';
+import { KeycloakService } from './keycloak.service';
+
+@Injectable()
+class MockKeycloakService extends KeycloakService {
+  getToken(): Promise<string> {
+    return Promise.resolve('hello');
+  }
+}
+
+describe('KeycloakHttp', () => {
+
+  let injector: ReflectiveInjector;
+  let backend: MockBackend;
+  let lastConnection: MockConnection;
+  let http: Http;
+
+  beforeEach(() => {
+    injector = ReflectiveInjector.resolveAndCreate([
+      {provide: ConnectionBackend, useClass: MockBackend},
+      {provide: RequestOptions, useClass: BaseRequestOptions},
+      {provide: KeycloakService, useClass: MockKeycloakService},
+      {
+        provide: Http,
+        useFactory: keycloakHttpFactory,
+        deps: [ConnectionBackend, RequestOptions, KeycloakService]
+      }
+    ]);
+    http = injector.get(Http);
+    backend = injector.get(ConnectionBackend) as MockBackend;
+    backend.connections.subscribe((c: MockConnection) => lastConnection = c);
+  });
+
+  it('should set Authorization header', fakeAsync(() => {
+    http.get('foo').subscribe(r => console.log(r));
+    tick();
+    expect(lastConnection).toBeDefined('no http service connection at all?');
+    expect(lastConnection.request.headers.get('Authorization')).toBe('Bearer hello');
+  }));
+
+});

examples/demo-template/angular2-product-app/src/main/frontend/src/app/keycloak/keycloak.http.ts

@@ -1,5 +1,5 @@
 import {Injectable} from '@angular/core';
-import {Http, Request, ConnectionBackend, RequestOptions, RequestOptionsArgs, Response, Headers} from '@angular/http';
+import {Http, Request, XHRBackend, ConnectionBackend, RequestOptions, RequestOptionsArgs, Response, Headers} from '@angular/http';
 
 import {KeycloakService} from './keycloak.service';
 import {Observable} from 'rxjs/Rx';
@@ -30,3 +30,13 @@ export class KeycloakHttp extends Http {
     }
   }
 }
+
+export function keycloakHttpFactory(backend: XHRBackend, defaultOptions: RequestOptions, keycloakService: KeycloakService) {
+  return new KeycloakHttp(backend, defaultOptions, keycloakService);
+}
+
+export const KEYCLOAK_HTTP_PROVIDER = {
+  provide: Http,
+  useFactory: keycloakHttpFactory,
+  deps: [XHRBackend, RequestOptions, KeycloakService]
+};