Search Service with form test (#19)

angular/README.md

@@ -20,6 +20,7 @@ ng g component navpages/page1
 
 ng g component navpages/search
 
+ng g service service/backend
 # D3 charts
 npm install d3 --save
 npm install @types/d3 --save-dev
@@ -32,6 +33,11 @@ npm install @types/d3 --save-dev
 [1](https://medium.com/better-programming/reactive-charts-in-angular-8-using-d3-4550bb0b4255)
 
 
+### For Testing
+
+```
+https://angular.io/guide/testing#component-dom-testing
+```
 
 
 

angular/src/app/navbar/navbar/navbar.component.html

@@ -20,7 +20,7 @@
       </li>
 
     </ul>
-    <form class="form-inline my-2 my-lg-0" (ngSubmit)="onSubmit()" #f="ngForm">
+    <form class="form-inline my-2 my-lg-0" (ngSubmit)="onSubmit()" #f="ngForm" id="f0">
       <input class="form-control mr-sm-2" type="text" ngModel name="search0" id="search0" placeholder="Search">
       <button class="btn btn-secondary my-2 my-sm-0" type="submit">Search</button>
     </form>

angular/src/app/navbar/navbar/navbar.component.spec.ts

@@ -1,32 +1,69 @@
-import { async, ComponentFixture, TestBed } from '@angular/core/testing';
-import {FormsModule, NgForm} from '@angular/forms';
-import { NavbarComponent } from './navbar.component';
+import {async, ComponentFixture, TestBed} from '@angular/core/testing';
+import {FormBuilder, FormsModule} from '@angular/forms';
+import {NavbarComponent} from './navbar.component';
 import {BrowserModule} from '@angular/platform-browser';
 import {AppRoutingModule} from '../../app-routing.module';
+import {DebugElement} from '@angular/core';
+import {SearchService} from '../../service/search.service';
+
 
 describe('NavbarComponent', () => {
   let component: NavbarComponent;
   let fixture: ComponentFixture<NavbarComponent>;
+  let el: DebugElement;
+
+  let getQuoteSpy;
+  let s;
 
   beforeEach(async(() => {
+
+    const searchServiceStub = jasmine.createSpyObj('SearchService', ['putTerm', 'getTerms']);
+
+    getQuoteSpy = searchServiceStub.getTerms.and.returnValue(['one']);
+
     TestBed.configureTestingModule({
-      declarations: [ NavbarComponent ],
+      declarations: [NavbarComponent],
+      providers: [{provide: SearchService, useValue: searchServiceStub}],
       imports: [
         BrowserModule,
         FormsModule,
         AppRoutingModule
       ],
     })
-    .compileComponents();
+      .compileComponents();
   }));
 
   beforeEach(() => {
     fixture = TestBed.createComponent(NavbarComponent);
     component = fixture.componentInstance;
+    // from the root injector
+
+    s = TestBed.inject(SearchService);
+    el = fixture.nativeElement.querySelector('form');
     fixture.detectChanges();
   });
 
   it('should create', () => {
+    console.log(el);
     expect(component).toBeTruthy();
   });
+
+
+  it('should call service onSubmit', () => {
+
+    const myModel = {
+      search0: 'sample data'
+    };
+    const fb = new FormBuilder();
+    const form = fb.group(myModel);
+    component.searchForm.form = form;
+    fixture.detectChanges();
+
+    component.onSubmit();
+    expect(s.putTerm.calls.count()).toBeGreaterThan(0);
+    expect(s.getTerms.calls.count()).toBeGreaterThan(0);
+
+  });
+
+
 });

angular/src/app/navbar/navbar/navbar.component.ts

@@ -1,5 +1,6 @@
 import {Component, OnInit, ViewChild} from '@angular/core';
 import {NgForm} from '@angular/forms';
+import {SearchService} from '../../service/search.service';
 
 @Component({
   selector: 'app-navbar',
@@ -8,13 +9,16 @@ import {NgForm} from '@angular/forms';
 })
 export class NavbarComponent implements OnInit {
   @ViewChild('f') searchForm: NgForm;
-  constructor() { }
+
+  constructor(private searchService: SearchService) {
+  }
 
   ngOnInit(): void {
   }
 
   onSubmit() {
-    console.log('result: ', this.searchForm.value.search0);
-
+    console.log('Noval', this.searchForm.value.search0)
+    this.searchService.putTerm(this.searchForm.value.search0);
+    console.log('results: ', this.searchService.getTerms());
   }
 }

angular/src/app/navpages/search/search.component.ts

@@ -1,13 +1,14 @@
 import { Component, OnInit } from '@angular/core';
+import {SearchService} from '../../service/search.service';
 
 @Component({
   selector: 'app-search',
   templateUrl: './search.component.html',
-  styleUrls: ['./search.component.css']
+  styleUrls: ['./search.component.css'],
 })
 export class SearchComponent implements OnInit {
 
-  constructor() { }
+  constructor(private searchService: SearchService) { }
 
   ngOnInit(): void {
   }

angular/src/app/service/backend.service.spec.ts

@@ -0,0 +1,16 @@
+import { TestBed } from '@angular/core/testing';
+
+import { BackendService } from './backend.service';
+
+describe('BackendService', () => {
+  let service: BackendService;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({});
+    service = TestBed.inject(BackendService);
+  });
+
+  it('should be created', () => {
+    expect(service).toBeTruthy();
+  });
+});

angular/src/app/service/backend.service.ts

@@ -0,0 +1,9 @@
+import { Injectable } from '@angular/core';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class BackendService {
+
+  constructor() { }
+}

angular/src/app/service/search.service.spec.ts

@@ -0,0 +1,16 @@
+import { TestBed } from '@angular/core/testing';
+
+import { SearchService } from './search.service';
+
+describe('SearchService', () => {
+  let service: SearchService;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({});
+    service = TestBed.inject(SearchService);
+  });
+
+  it('should be created', () => {
+    expect(service).toBeTruthy();
+  });
+});

angular/src/app/service/search.service.ts

@@ -0,0 +1,21 @@
+import {Injectable} from '@angular/core';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class SearchService {
+  private searchTerms: string[] = [];
+
+  constructor() {
+    console.error('0here');
+  }
+
+  putTerm(term: string) {
+    console.error('here...');
+    this.searchTerms.push(term);
+  }
+
+  getTerms() {
+    return this.searchTerms;
+  }
+}