create CalculatorComponent

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

@@ -13,6 +13,38 @@ describe('workspace-project App', () => {
     expect(await page.getTitleText()).toEqual('Simple Calculator');
   });
 
+  it('should add', async () => {
+    await page.navigateTo();
+    await page.setValue1('37')
+    await page.setValue2('42')
+    await page.clickAdd();
+    expect(await page.getResult()).toEqual('79');
+  });
+
+  // it('should subtract', async () => {
+  //   await page.navigateTo();
+  //   await page.setValue1('37')
+  //   await page.setValue2('42')
+  //   await page.clickSubtract();
+  //   expect(await page.getResult()).toEqual('-5');
+  // });
+  //
+  // it('should multiply', async () => {
+  //   await page.navigateTo();
+  //   await page.setValue1('37')
+  //   await page.setValue2('42')
+  //   await page.clickMultiply();
+  //   expect(await page.getResult()).toEqual('1554');
+  // });
+  //
+  // it('should divide', async () => {
+  //   await page.navigateTo();
+  //   await page.setValue1('1')
+  //   await page.setValue2('8')
+  //   await page.clickDivide();
+  //   expect(await page.getResult()).toEqual('1.125');
+  // });
+
   afterEach(async () => {
     // Assert that there are no errors emitted from the browser
     const logs = await browser.manage().logs().get(logging.Type.BROWSER);

frontend/e2e/src/app.po.ts

@@ -5,7 +5,39 @@ export class AppPage {
     return browser.get(browser.baseUrl);
   }
 
+  async setValue1(val : string) {
+    const input = element(by.id('val1'));
+    await input.clear()
+    await input.sendKeys(val);  }
+
+  async setValue2(val : string) {
+    const input = element(by.id('val2'));
+    await input.clear()
+    await input.sendKeys(val);
+  }
+
+  async getResult(): Promise<string> {
+    return element(by.id('result')).getText();
+  }
+
   async getTitleText(): Promise<string> {
     return element(by.css('app-root .header h1')).getText();
   }
+
+  async clickAdd(): Promise<void> {
+    return element(by.id('add')).click()
+  }
+
+  async clickSubtract(): Promise<void> {
+    return element(by.id('subtract')).click()
+  }
+
+  async clickMultiply(): Promise<void> {
+    return element(by.id('multiply')).click()
+  }
+
+  async clickDivide(): Promise<void> {
+    return element(by.id('divide')).click()
+  }
+
 }

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

@@ -1,3 +1,4 @@
+import { Component } from "@angular/core";
 import { TestBed } from '@angular/core/testing';
 import { AppComponent } from './app.component';
 
@@ -5,7 +6,8 @@ describe('AppComponent', () => {
   beforeEach(async () => {
     await TestBed.configureTestingModule({
       declarations: [
-        AppComponent
+        AppComponent,
+        MockCalculatorComponent
       ],
     }).compileComponents();
   });
@@ -29,3 +31,10 @@ describe('AppComponent', () => {
     expect(compiled.querySelector('div.header h1').textContent).toContain('Simple Calculator');
   });
 });
+
+@Component({
+  selector: 'app-calculator',
+  template: ''
+})
+class MockCalculatorComponent {
+}

frontend/src/app/app.module.ts

@@ -1,4 +1,5 @@
 import { BrowserModule } from '@angular/platform-browser';
+import { FormsModule } from "@angular/forms";
 import { NgModule } from '@angular/core';
 
 import { AppComponent } from './app.component';
@@ -10,9 +11,11 @@ import { CalculatorComponent } from './calculator/calculator.component';
     CalculatorComponent
   ],
   imports: [
-    BrowserModule
+    BrowserModule,
+    FormsModule
   ],
   providers: [],
   bootstrap: [AppComponent]
 })
-export class AppModule { }
+export class AppModule {
+}

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

@@ -1 +1,15 @@
-<p>calculator works!</p>
+<div>
+  <label for="val1">value1:</label>
+  <input [(ngModel)]="value1" id="val1" type="number"/>
+</div>
+
+<div>
+  <label for="val2">value2:</label>
+  <input [(ngModel)]="value2" id="val2" type="number"/>
+</div>
+
+<div>
+  <button *ngFor="let operator of operators" (click)="calculate(operator)" id="{{operator}}">{{operator}}</button>
+</div>
+
+result = <span id="result">{{ result }}</span>

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

@@ -1,4 +1,5 @@
-import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { ComponentFixture, ComponentFixtureAutoDetect, TestBed} from '@angular/core/testing';
+import { FormsModule } from "@angular/forms";
 
 import { CalculatorComponent } from './calculator.component';
 
@@ -8,7 +9,10 @@ describe('CalculatorComponent', () => {
 
   beforeEach(async () => {
     await TestBed.configureTestingModule({
-      declarations: [ CalculatorComponent ]
+      imports: [ FormsModule ],
+      declarations: [ CalculatorComponent ],
+      providers: [ { provide: ComponentFixtureAutoDetect, useValue: true }
+      ]
     })
     .compileComponents();
   });
@@ -19,7 +23,66 @@ describe('CalculatorComponent', () => {
     fixture.detectChanges();
   });
 
+  it('should bind input text to Component.value1', () => {
+    const dom = fixture.nativeElement;
+    const input = dom.querySelector('#val1');
+
+    fixture.detectChanges();
+    input.value = '2';
+    input.dispatchEvent(new Event('input'));
+
+    expect(component.value1).toBe(2);
+  });
+
+  it('should bind input text to Component.value2', () => {
+    const dom = fixture.nativeElement;
+    const input = dom.querySelector('#val2');
+
+    fixture.detectChanges();
+    input.value = '2';
+    input.dispatchEvent(new Event('input'));
+
+    expect(component.value2).toBe(2);
+  });
+
+  it('should display when Component.value1 changes', () => {
+    const dom = fixture.nativeElement;
+    const input = dom.querySelector('#val1');
+
+    component.value1 = 3;
+
+    fixture.detectChanges();
+    fixture.whenStable().then(() => {
+      expect(input.value).toBe('3');
+    });
+  });
+
+  it('should display when Component.value2 changes', () => {
+    const dom = fixture.nativeElement;
+    const input = dom.querySelector('#val2');
+
+    component.value2 = 3;
+
+    fixture.detectChanges();
+    fixture.whenStable().then(() => {
+      expect(input.value).toBe('3');
+    });
+  });
+
+  it('should display result when Component.result changes', () => {
+    const dom = fixture.nativeElement;
+    const resultElement = dom.querySelector('#result');
+
+    component.result = 37;
+
+    fixture.detectChanges();
+    fixture.whenStable().then(() => {
+      expect(resultElement.textContent).toContain('37');
+    });
+  });
+
   it('should create', () => {
     expect(component).toBeTruthy();
   });
+
 });

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

@@ -6,10 +6,19 @@ import { Component, OnInit } from '@angular/core';
   styleUrls: ['./calculator.component.css']
 })
 export class CalculatorComponent implements OnInit {
+  value1 : number = 0;
+  value2 : number = 0;
+  result : number = 0;
+  operators : string[] = ["add", "subtract", "multiply", "divide"];
 
   constructor() { }
 
   ngOnInit(): void {
   }
 
+  calculate(operator: string) {
+    console.log(this.value1 + " " + operator + " " + this.value2);
+    this.result = this.value1 + this.value2;
+  }
+
 }