Adding a form to home page to support parsing (#8)

* Adding a form to home page to support parsing

* Fixing CSS whitespace

* Fixing tests

e2e/app.e2e-spec.ts

@@ -6,9 +6,4 @@ describe('ingredient-demo-frontend App', () => {
   beforeEach(() => {
     page = new AppPage();
   });
-
-  it('should display welcome message', () => {
-    page.navigateTo();
-    expect(page.getParagraphText()).toEqual('Welcome to app!');
-  });
 });

src/app/app.component.spec.ts

@@ -1,6 +1,9 @@
 import { TestBed, async } from '@angular/core/testing';
 import { AppComponent } from './app.component';
 import { HomePageComponent } from './public/home-page/home-page.component';
+import { FormsModule } from '@angular/forms';
+import { ParserService } from './_services/parser.service';
+import { HttpClientTestingModule } from '@angular/common/http/testing';
 
 describe('AppComponent', () => {
   beforeEach(async(() => {
@@ -9,6 +12,13 @@ describe('AppComponent', () => {
         AppComponent,
         HomePageComponent,
       ],
+      imports: [
+        FormsModule,
+        HttpClientTestingModule,
+      ],
+      providers: [
+        ParserService,
+      ],
     }).compileComponents();
   }));
 

src/app/app.module.ts

@@ -1,8 +1,13 @@
 import { BrowserModule } from '@angular/platform-browser';
 import { NgModule } from '@angular/core';
+import { FormsModule }   from '@angular/forms';
+import { HttpClientModule } from '@angular/common/http';
 
 import { AppComponent } from './app.component';
 
+// Services
+import { ParserService } from './_services/parser.service';
+
 // Public pages
 import { HomePageComponent } from './public/home-page/home-page.component';
 
@@ -13,8 +18,10 @@ import { HomePageComponent } from './public/home-page/home-page.component';
   ],
   imports: [
     BrowserModule,
+    FormsModule,
+    HttpClientModule,
   ],
-  providers: [],
+  providers: [ParserService],
   bootstrap: [AppComponent],
 })
 export class AppModule { }

src/app/public/home-page/home-page.component.html

@@ -1,3 +1,9 @@
-<p>
-  home-page works!
-</p>
+<input type="text" id="ingredientRaw" placeholder="Enter an ingredient to parse" [(ngModel)]="ingredientRaw">
+<input type="submit" value="Parse" name="Parse" (click)="parse(ingredientRaw)" />
+<ul *ngIf="ingredientParsed">
+  <li><span class="fieldName">Quantity</span>: {{ ingredientParsed.quantity }}</li>
+  <li><span class="fieldName">Unit</span>: {{ ingredientParsed.unit }}</li>
+  <li><span class="fieldName">Name</span>: {{ ingredientParsed.name }}</li>
+  <li><span class="fieldName">Other</span>: {{ ingredientParsed.other }}</li>
+  <li><span class="fieldName">Comment</span>: {{ ingredientParsed.comment }}</li>
+</ul>

src/app/public/home-page/home-page.component.scss

@@ -0,0 +1,3 @@
+span.fieldName {
+  font-weight: bold;
+}

src/app/public/home-page/home-page.component.spec.ts

@@ -1,6 +1,22 @@
 import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { Injectable } from '@angular/core';
+import { FormsModule } from '@angular/forms';
+import { Observable } from 'rxjs/Observable';
+import 'rxjs/add/observable/of';
+import { HttpClientTestingModule } from '@angular/common/http/testing';
 
 import { HomePageComponent } from './home-page.component';
+import { ParseResult } from '../../_models/parse-result';
+import { ParserService } from '../../_services/parser.service';
+
+
+@Injectable()
+export class MockParserService {
+
+  public parseIngredient(ingredientRaw: string) {
+    return Observable.of<ParseResult>({});
+  }
+}
 
 describe('HomePageComponent', () => {
   let component: HomePageComponent;
@@ -9,6 +25,13 @@ describe('HomePageComponent', () => {
   beforeEach(async(() => {
     TestBed.configureTestingModule({
       declarations: [HomePageComponent],
+      imports: [
+        HttpClientTestingModule,
+        FormsModule,
+      ],
+      providers: [
+        { provide: ParserService, useClass: MockParserService },
+      ],
     })
     .compileComponents();
   }));

src/app/public/home-page/home-page.component.ts

@@ -1,15 +1,28 @@
 import { Component, OnInit } from '@angular/core';
+import { IngredientParsed } from '../../_models/parse-result';
+import { ParserService } from '../../_services/parser.service';
 
 @Component({
   selector: 'app-home-page',
   templateUrl: './home-page.component.html',
   styleUrls: ['./home-page.component.scss'],
 })
 export class HomePageComponent implements OnInit {
+  ingredientRaw: string;
+  ingredientParsed: IngredientParsed;
 
-  constructor() { }
+  constructor(private parserService: ParserService) { }
 
-  ngOnInit() {
+  ngOnInit() {}
+
+  parse(raw: string) {
+    this.parserService.parseIngredient(raw).subscribe(
+      (response) => {
+        this.ingredientParsed = response.ingredientParsed;
+      },
+      (error) => {
+        console.log(error);
+      });
   }
 
 }