wire up calculator backend

README.md

@@ -11,6 +11,7 @@ path. Versions used for development are listed.
 - Java JDK (OpenJDK 11.0.9.1)
 - NPM (7.1.0)
 - Node.js (v12.19.0)
+- Angular (11.0.3)
  
 ## Backend
 

frontend/angular.json

@@ -65,7 +65,8 @@
         "serve": {
           "builder": "@angular-devkit/build-angular:dev-server",
           "options": {
-            "browserTarget": "frontend:build"
+            "browserTarget": "frontend:build",
+            "proxyConfig": "proxy.conf.json"
           },
           "configurations": {
             "production": {

frontend/proxy.conf.json

@@ -0,0 +1,10 @@
+{
+  "/api":
+  {
+    "target": "http://localhost:8080",
+    "secure": false,
+    "pathRewrite": {
+      "^/api": ""
+    }
+  }
+}

frontend/src/app/app.module.ts

@@ -1,10 +1,12 @@
 import { BrowserModule } from '@angular/platform-browser';
 import { FormsModule } from "@angular/forms";
 import { NgModule } from '@angular/core';
+import { HttpClientModule } from "@angular/common/http";
 
 import { AppComponent } from './app.component';
 import { CalculatorComponent } from './calculator/calculator.component';
 
+
 @NgModule({
   declarations: [
     AppComponent,
@@ -12,7 +14,8 @@ import { CalculatorComponent } from './calculator/calculator.component';
   ],
   imports: [
     BrowserModule,
-    FormsModule
+    FormsModule,
+    HttpClientModule
   ],
   providers: [],
   bootstrap: [AppComponent]

frontend/src/app/calculator.service.spec.ts

@@ -0,0 +1,44 @@
+import { TestBed } from '@angular/core/testing';
+
+import { CalculatorService } from './calculator.service';
+import {HttpClientTestingModule, HttpTestingController} from "@angular/common/http/testing";
+import {HttpClient} from "@angular/common/http";
+
+describe('CalculatorService', () => {
+  let service: CalculatorService;
+  let httpClient : HttpClient;
+  let httpTestingController : HttpTestingController;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      imports: [HttpClientTestingModule],
+    });
+
+    httpClient = TestBed.inject(HttpClient);
+    httpTestingController = TestBed.inject(HttpTestingController);
+    service = TestBed.inject(CalculatorService);
+  });
+
+  afterEach(() => {
+    httpTestingController.verify();
+  });
+
+  it('should be created', () => {
+    expect(service).toBeTruthy();
+  });
+
+  it('should return ', () => {
+    let mockResponse : number = 3;
+
+    service.calculate('add', 1, 2).subscribe(
+      r => expect(r).toEqual(mockResponse, 'should return expected number'),
+      fail
+    );
+
+    const req = httpTestingController.expectOne('/api/numbers/1/add/2');
+    expect(req.request.method).toEqual('GET');
+
+    req.flush(mockResponse);
+  });
+
+});

frontend/src/app/calculator.service.ts

@@ -0,0 +1,20 @@
+import {Injectable} from '@angular/core';
+import {HttpClient} from "@angular/common/http";
+import {Observable} from "rxjs";
+
+@Injectable({
+  providedIn: 'root'
+})
+export class CalculatorService {
+
+  constructor(private httpClient: HttpClient) { }
+
+  public getOperators() : string[] {
+    return ["add", "subtract", "multiply", "divide"];
+  }
+
+  public calculate(operator : string, val1: number, val2 : number): Observable<number> {
+    return this.httpClient.get<number>(`/api/numbers/` + val1 + `/` + operator + `/` + val2);
+  }
+
+}

frontend/src/app/calculator/calculator.component.spec.ts

@@ -2,6 +2,8 @@ import { ComponentFixture, ComponentFixtureAutoDetect, TestBed} from '@angular/c
 import { FormsModule } from "@angular/forms";
 
 import { CalculatorComponent } from './calculator.component';
+import {Component} from "@angular/core";
+import {HttpClientModule} from "@angular/common/http";
 
 describe('CalculatorComponent', () => {
   let component: CalculatorComponent;
@@ -9,8 +11,8 @@ describe('CalculatorComponent', () => {
 
   beforeEach(async () => {
     await TestBed.configureTestingModule({
-      imports: [ FormsModule ],
-      declarations: [ CalculatorComponent ],
+      imports: [ FormsModule, HttpClientModule ],
+      declarations: [ CalculatorComponent, MockCalculatorService ],
       providers: [ { provide: ComponentFixtureAutoDetect, useValue: true }
       ]
     })
@@ -45,40 +47,36 @@ describe('CalculatorComponent', () => {
     expect(component.value2).toBe(2);
   });
 
-  it('should display when Component.value1 changes', () => {
+  it('should display when Component.value1 changes', async () => {
     const dom = fixture.nativeElement;
     const input = dom.querySelector('#val1');
 
     component.value1 = 3;
 
     fixture.detectChanges();
-    fixture.whenStable().then(() => {
-      expect(input.value).toBe('3');
-    });
+    await fixture.whenStable();
+    expect(input.value).toBe('3');
   });
 
-  it('should display when Component.value2 changes', () => {
+  it('should display when Component.value2 changes', async () => {
     const dom = fixture.nativeElement;
     const input = dom.querySelector('#val2');
 
     component.value2 = 3;
 
     fixture.detectChanges();
-    fixture.whenStable().then(() => {
-      expect(input.value).toBe('3');
-    });
+    await fixture.whenStable();
+    expect(input.value).toBe('3');
   });
 
-  it('should display result when Component.result changes', () => {
+  it('should display result when Component.result changes', async () => {
     const dom = fixture.nativeElement;
     const resultElement = dom.querySelector('#result');
 
     component.result = 37;
 
     fixture.detectChanges();
-    fixture.whenStable().then(() => {
-      expect(resultElement.textContent).toContain('37');
-    });
+    await expect(resultElement.textContent).toContain('37');
   });
 
   it('should create', () => {
@@ -86,3 +84,10 @@ describe('CalculatorComponent', () => {
   });
 
 });
+
+@Component({
+  selector: 'CalculatorService',
+  template: ''
+})
+class MockCalculatorService {
+}

frontend/src/app/calculator/calculator.component.ts

@@ -1,4 +1,5 @@
 import { Component, OnInit } from '@angular/core';
+import {CalculatorService} from "../calculator.service";
 
 @Component({
   selector: 'app-calculator',
@@ -9,16 +10,20 @@ export class CalculatorComponent implements OnInit {
   value1 : number = 0;
   value2 : number = 0;
   result : number = 0;
-  operators : string[] = ["add", "subtract", "multiply", "divide"];
+  operators : string[];
 
-  constructor() { }
+  constructor(private calculatorService : CalculatorService) {
+    this.operators = calculatorService.getOperators();
+  }
 
   ngOnInit(): void {
   }
 
   calculate(operator: string) {
     console.log(this.value1 + " " + operator + " " + this.value2);
-    this.result = this.value1 + this.value2;
+    this.calculatorService.calculate(operator, this.value1, this.value2).subscribe(
+      (r) => this.result = r
+    )
   }
 
 }