add error handling for divide by zero and unreacheable backend

backend/src/main/java/nl/quintor/hdboer/aegoncalc/controllers/SimpleCalculatorController.java

@@ -1,6 +1,9 @@
 package nl.quintor.hdboer.aegoncalc.controllers;
 
 import nl.quintor.hdboer.aegoncalc.services.SimpleCalculator;
+import org.springframework.http.HttpStatus;
+import org.springframework.http.ResponseEntity;
+import org.springframework.web.bind.annotation.ExceptionHandler;
 import org.springframework.web.bind.annotation.GetMapping;
 import org.springframework.web.bind.annotation.PathVariable;
 import org.springframework.web.bind.annotation.RestController;
@@ -37,4 +40,10 @@ public class SimpleCalculatorController {
         return calculator.divide(val, divisor);
     }
 
+    @ExceptionHandler(IllegalArgumentException.class)
+    public ResponseEntity<String> handleException(IllegalArgumentException iae) {
+        // for now we are not worried about leaking internals with the error message
+        return new ResponseEntity<>(iae.getMessage(), HttpStatus.BAD_REQUEST);
+    }
+
 }

frontend/e2e/src/app.e2e-spec.ts

@@ -1,5 +1,4 @@
-import { AppPage } from './app.po';
-import { browser, logging } from 'protractor';
+import {AppPage} from './app.po';
 
 describe('workspace-project App', () => {
   let page: AppPage;
@@ -45,19 +44,11 @@ describe('workspace-project App', () => {
     expect(await page.getResult()).toEqual('0.125');
   });
 
-  // it('should display error when dividing by zero', async () => {
-  //   await page.navigateTo();
-  //   await page.setValue1('1')
-  //   await page.setValue2('0')
-  //   await page.clickDivide();
-  //   expect(await page.getResult()).toEqual('error: cannot divide by zero');
-  // });
-
-  afterEach(async () => {
-    // Assert that there are no errors emitted from the browser
-    const logs = await browser.manage().logs().get(logging.Type.BROWSER);
-    expect(logs).not.toContain(jasmine.objectContaining({
-      level: logging.Level.SEVERE,
-    } as logging.Entry));
+  it('should display error when dividing by zero', async () => {
+    await page.navigateTo();
+    await page.setValue1('1')
+    await page.setValue2('0')
+    await page.clickDivide();
+    expect(await page.getMessage()).toEqual('cannot divide by 0');
   });
 });

frontend/e2e/src/app.po.ts

@@ -20,6 +20,10 @@ export class AppPage {
     return element(by.id('result')).getText();
   }
 
+  async getMessage(): Promise<string> {
+    return element(by.id('message')).getText();
+  }
+
   async getTitleText(): Promise<string> {
     return element(by.css('app-root .header h1')).getText();
   }

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

@@ -31,7 +31,7 @@ describe('CalculatorService', () => {
     let mockResponse : number = 3;
 
     service.calculate('add', 1, 2).subscribe(
-      r => expect(r).toEqual(mockResponse, 'should return expected number'),
+      r => expect(r.body).toEqual(mockResponse, 'should return expected number'),
       fail
     );
 

frontend/src/app/calculator.service.ts

@@ -1,5 +1,5 @@
 import {Injectable} from '@angular/core';
-import {HttpClient} from "@angular/common/http";
+import {HttpClient, HttpResponse} from "@angular/common/http";
 import {Observable} from "rxjs";
 
 @Injectable({
@@ -13,8 +13,8 @@ export class CalculatorService {
     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);
+  public calculate(operator : string, val1: number, val2 : number): Observable<HttpResponse<number>> {
+    return this.httpClient.get<number>(`/api/numbers/` + val1 + `/` + operator + `/` + val2, { observe: "response" });
   }
 
 }

frontend/src/app/calculator/calculator.component.html

@@ -13,3 +13,5 @@
 </div>
 
 result = <span id="result">{{ result }}</span>
+
+<div id="message">{{message}}</div>

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

@@ -1,4 +1,4 @@
-import { Component, OnInit } from '@angular/core';
+import {Component, OnInit} from '@angular/core';
 import {CalculatorService} from "../calculator.service";
 
 @Component({
@@ -10,6 +10,7 @@ export class CalculatorComponent implements OnInit {
   value1 : number = 0;
   value2 : number = 0;
   result : number = 0;
+  message : string = "";
   operators : string[];
 
   constructor(private calculatorService : CalculatorService) {
@@ -22,7 +23,19 @@ export class CalculatorComponent implements OnInit {
   calculate(operator: string) {
     console.log(this.value1 + " " + operator + " " + this.value2);
     this.calculatorService.calculate(operator, this.value1, this.value2).subscribe(
-      (r) => this.result = r
+      (response) => {
+        this.message = "";
+        if (response.body != null) {
+          this.result = response.body;
+        }
+      },
+      (error) => {
+        if (error.status == 400) {
+          this.message = error.error;
+        } else {
+          this.message = "calculator service unavailable";
+        }
+      }
     )
   }