Created an example using mock services in mock configuration

Author: Weston Pace

angular.json

@@ -44,6 +44,14 @@
               "extractLicenses": true,
               "vendorChunk": false,
               "buildOptimizer": true
+            },
+            "mock": {
+              "fileReplacements": [
+                {
+                  "replace": "src/environments/environment.ts",
+                  "with": "src/environments/environment.mock.ts"
+                }
+              ]
             }
           }
         },
@@ -55,6 +63,9 @@
           "configurations": {
             "production": {
               "browserTarget": "servicesim:build:production"
+            },
+            "mock": {
+              "browserTarget": "servicesim:build:mock"
             }
           }
         },
@@ -103,11 +114,11 @@
           "builder": "@angular-devkit/build-angular:protractor",
           "options": {
             "protractorConfig": "e2e/protractor.conf.js",
-            "devServerTarget": "servicesim:serve"
+            "devServerTarget": "servicesim:serve:mock"
           },
           "configurations": {
             "production": {
-              "devServerTarget": "servicesim:serve:production"
+              "devServerTarget": "servicesim:serve:mock"
             }
           }
         },

e2e/src/app.e2e-spec.ts

@@ -1,4 +1,5 @@
 import { AppPage } from './app.po';
+import { browser } from 'protractor';
 
 describe('workspace-project App', () => {
   let page: AppPage;
@@ -7,8 +8,10 @@ describe('workspace-project App', () => {
     page = new AppPage();
   });
 
-  it('should display welcome message', () => {
-    page.navigateTo();
-    expect(page.getParagraphText()).toEqual('Welcome to servicesim!');
+  it('should have a simulated stock price', async () => {
+    await page.navigateTo();
+    await browser.sleep(2000);
+    const stockPrice = await page.getStockText();
+    expect(['125', '150', '117.3'].indexOf(stockPrice)).toBeGreaterThanOrEqual(0);
   });
 });

e2e/src/app.po.ts

@@ -5,7 +5,7 @@ export class AppPage {
     return browser.get('/');
   }
 
-  getParagraphText() {
-    return element(by.css('app-root h1')).getText();
+  getStockText() {
+    return element(by.css('span')).getText();
   }
 }

src/app/app.component.html

@@ -1,20 +1,2 @@
-<!--The content below is only a placeholder and can be replaced.-->
-<div style="text-align:center">
-  <h1>
-    Welcome to {{ title }}!
-  </h1>
-  <img width="300" alt="Angular Logo" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNTAgMjUwIj4KICAgIDxwYXRoIGZpbGw9IiNERDAwMzEiIGQ9Ik0xMjUgMzBMMzEuOSA2My4ybDE0LjIgMTIzLjFMMTI1IDIzMGw3OC45LTQzLjcgMTQuMi0xMjMuMXoiIC8+CiAgICA8cGF0aCBmaWxsPSIjQzMwMDJGIiBkPSJNMTI1IDMwdjIyLjItLjFWMjMwbDc4LjktNDMuNyAxNC4yLTEyMy4xTDEyNSAzMHoiIC8+CiAgICA8cGF0aCAgZmlsbD0iI0ZGRkZGRiIgZD0iTTEyNSA1Mi4xTDY2LjggMTgyLjZoMjEuN2wxMS43LTI5LjJoNDkuNGwxMS43IDI5LjJIMTgzTDEyNSA1Mi4xem0xNyA4My4zaC0zNGwxNy00MC45IDE3IDQwLjl6IiAvPgogIDwvc3ZnPg==">
-</div>
-<h2>Here are some links to help you start: </h2>
-<ul>
-  <li>
-    <h2><a target="_blank" rel="noopener" href="https://angular.io/tutorial">Tour of Heroes</a></h2>
-  </li>
-  <li>
-    <h2><a target="_blank" rel="noopener" href="https://github.com/angular/angular-cli/wiki">CLI Documentation</a></h2>
-  </li>
-  <li>
-    <h2><a target="_blank" rel="noopener" href="https://blog.angular.io/">Angular blog</a></h2>
-  </li>
-</ul>
-
+<p>Apple Stock Price: <span id="stock">{{appleStockPrice}}</span></p>
+<p>Last Update Time: {{lastUpdateTime}}</p>

src/app/app.component.spec.ts

@@ -1,10 +1,30 @@
-import { Component } from '@angular/core';
+import { Component, OnInit, Inject, NgZone } from '@angular/core';
+import { StockService, STOCK_SERVICE } from './stock.service';
+import { interval } from 'rxjs';
+import { startWith, switchMap } from 'rxjs/operators';
 
 @Component({
   selector: 'app-root',
   templateUrl: './app.component.html',
   styleUrls: ['./app.component.css']
 })
-export class AppComponent {
-  title = 'servicesim';
+export class AppComponent implements OnInit {
+  appleStockPrice = -1;
+  lastUpdateTime = 'Not yet updated';
+
+  constructor(@Inject(STOCK_SERVICE) private stockService: StockService, private ngZone: NgZone) {
+
+  }
+
+  ngOnInit() {
+    this.ngZone.runOutsideAngular(() => {
+      interval(1000).pipe(startWith(0), switchMap(_ => this.stockService.getAppleStockPrice())).subscribe(stockPrice => {
+        this.ngZone.run(() => {
+          this.appleStockPrice = stockPrice;
+          this.lastUpdateTime = new Date().toISOString();
+        });
+      });
+    });
+  }
+
 }

src/app/app.component.ts

@@ -1,16 +1,21 @@
 import { BrowserModule } from '@angular/platform-browser';
 import { NgModule } from '@angular/core';
+import { HttpClientModule } from '@angular/common/http';
 
 import { AppComponent } from './app.component';
+import { environment } from '../environments/environment';
 
 @NgModule({
   declarations: [
     AppComponent
   ],
   imports: [
-    BrowserModule
+    BrowserModule,
+    HttpClientModule,
+    environment.possiblyMockModule
+  ],
+  providers: [
   ],
-  providers: [],
   bootstrap: [AppComponent]
 })
 export class AppModule { }

src/app/app.module.ts

@@ -0,0 +1,12 @@
+import { NgModule } from '@angular/core';
+import { STOCK_SERVICE } from './stock.service';
+import { MockStockService } from './stock.mock.service';
+
+@NgModule({
+  providers: [
+    { provide: STOCK_SERVICE, useClass: MockStockService }
+  ]
+})
+export class MockModule {
+
+}

src/app/mock.module.ts

@@ -0,0 +1,12 @@
+import { NgModule } from '@angular/core';
+import { STOCK_SERVICE } from './stock.service';
+import { RealStockService } from './stock.real.service';
+
+@NgModule({
+  providers: [
+    { provide: STOCK_SERVICE, useClass: RealStockService }
+  ]
+})
+export class RealModule {
+
+}

src/app/real.module.ts

@@ -0,0 +1,19 @@
+import { of } from 'rxjs';
+import { StockService } from './stock.service';
+import { Injectable } from '@angular/core';
+
+@Injectable()
+export class MockStockService implements StockService {
+
+  private index = 0;
+  private prices = [125, 150, 117.3];
+
+  getAppleStockPrice() {
+    const priceToReturn = this.prices[this.index++];
+    if (this.index === this.prices.length) {
+      this.index = 0;
+    }
+    return of(priceToReturn);
+  }
+
+}

src/app/stock.mock.service.ts

@@ -0,0 +1,17 @@
+import { Injectable } from '@angular/core';
+import { HttpClient } from '@angular/common/http';
+import { Observable } from 'rxjs';
+import { StockService } from './stock.service';
+
+@Injectable()
+export class RealStockService implements StockService {
+
+  constructor(private httpClient: HttpClient) {
+
+  }
+
+  getAppleStockPrice() {
+    return this.httpClient.get('https://api.iextrading.com/1.0/stock/aapl/price') as Observable<number>;
+  }
+
+}

src/app/stock.real.service.ts

@@ -0,0 +1,6 @@
+import { Observable } from 'rxjs';
+
+export const STOCK_SERVICE = 'STOCK_SERVICE';
+export interface StockService {
+  getAppleStockPrice(): Observable<number>;
+}

src/app/stock.service.ts

@@ -0,0 +1,7 @@
+import { MockModule } from '../app/mock.module';
+
+export const environment = {
+  production: false,
+  possiblyMockModule: MockModule
+};
+

src/environments/environment.mock.ts

@@ -1,3 +1,7 @@
+import { RealModule } from '../app/real.module';
+
 export const environment = {
-  production: true
+  production: true,
+  possiblyMockModule: RealModule
 };
+

src/environments/environment.prod.ts

@@ -1,9 +1,12 @@
+import { RealModule } from '../app/real.module';
+
 // This file can be replaced during build by using the `fileReplacements` array.
 // `ng build ---prod` replaces `environment.ts` with `environment.prod.ts`.
 // The list of file replacements can be found in `angular.json`.
 
 export const environment = {
-  production: false
+  production: false,
+  possiblyMockModule: RealModule
 };
 
 /*