Resolve conflicts in files for test cases

karma.conf.js

@@ -13,7 +13,10 @@ module.exports = function (config) {
       require('@angular-devkit/build-angular/plugins/karma')
     ],
     client:{
-      clearContext: false // leave Jasmine Spec Runner output visible in browser
+      clearContext: false, // leave Jasmine Spec Runner output visible in browser
+      jasmine:{
+        random: false
+      }
     },
     coverageIstanbulReporter: {
       dir: require('path').join(__dirname, 'coverage'), reports: [ 'html', 'lcovonly' ],

src/app/owners/owner-add/owner-add.component.spec.ts

@@ -22,49 +22,103 @@
  * @author Vitaliy Fedoriv
  */
 
-import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
-import {CUSTOM_ELEMENTS_SCHEMA} from '@angular/core';
 
-import {OwnerAddComponent} from './owner-add.component';
+ import { async, ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
+import {CUSTOM_ELEMENTS_SCHEMA} from '@angular/core';
 import {FormsModule} from '@angular/forms';
 import {Router} from '@angular/router';
 import {OwnerService} from '../owner.service';
 import {RouterTestingModule} from '@angular/router/testing';
 import {RouterStub} from '../../testing/router-stubs';
 import {Owner} from '../owner';
 import {Observable, of} from 'rxjs';
+import { OwnerAddComponent } from "./owner-add.component";
+import { By } from "@angular/platform-browser";
+import { OwnersRoutingModule } from "../owners-routing.module";
+import { OwnerListComponent } from "../owner-list/owner-list.component";
 
 class OwnserServiceStub {
-
   addOwner(owner: Owner): Observable<Owner> {
     return of(owner);
   }
 }
 
-describe('OwnerAddComponent', () => {
+describe("OwnerAddComponent", () => {
   let component: OwnerAddComponent;
   let fixture: ComponentFixture<OwnerAddComponent>;
+  let router: Router;
 
   beforeEach(waitForAsync(() => {
     TestBed.configureTestingModule({
       declarations: [OwnerAddComponent],
       schemas: [CUSTOM_ELEMENTS_SCHEMA],
       imports: [FormsModule, RouterTestingModule],
       providers: [
-        {provide: OwnerService, useClass: OwnserServiceStub},
-        {provide: Router, useClass: RouterStub}
-      ]
-    })
-      .compileComponents();
+        { provide: OwnerService, useClass: OwnserServiceStub },
+        { provide: Router, useClass: RouterStub },
+      ],
+    }).compileComponents();
   }));
 
   beforeEach(() => {
     fixture = TestBed.createComponent(OwnerAddComponent);
     component = fixture.componentInstance;
     fixture.detectChanges();
+    router = TestBed.get(Router);
   });
 
-  it('should create OwnerAddComponent', () => {
+  it("should create OwnerAddComponent", () => {
     expect(component).toBeTruthy();
   });
+
+  it("First Name check invalid", async(() => {
+    fixture.whenStable().then(() => {
+      let firstName = component.ownerForm.controls["firstName"];
+      expect(firstName.valid).toBeFalsy();
+      expect(component.ownerForm.valid).toBeFalsy();
+      firstName.setValue("J");
+      expect(firstName.errors["minlength"]).toBeTruthy();
+      firstName.setValue("John");
+      expect(firstName.errors).toBeFalsy();
+    });
+  }));
+
+  it("First Name check invalid", async(() => {
+    fixture.whenStable().then(() => {
+      let lastName = component.ownerForm.controls["lastName"];
+      expect(lastName.valid).toBeFalsy();
+      expect(component.ownerForm.valid).toBeFalsy();
+      lastName.setValue("S");
+      expect(lastName.errors["minlength"]).toBeTruthy();
+      lastName.setValue("Smith");
+      expect(lastName.errors).toBeFalsy();
+    });
+  }));
+
+  it("check form submission is successful", async(() => {
+    fixture.whenStable().then(() => {
+      let firstName = component.ownerForm.form.controls["firstName"];
+      let lastName = component.ownerForm.form.controls["lastName"];
+
+      firstName.setValue("Mary");
+      lastName.setValue("John");
+      let ownerServiceStub = new OwnserServiceStub();
+      let owner = {
+        id: 0,
+        firstName: "Mary",
+        lastName: "John",
+        address: "",
+        city: "",
+        telephone: "",
+        pets: [],
+      };
+      let buttons = fixture.debugElement.queryAll(By.css("button"));
+      let addButton = buttons[1].nativeElement;
+      addButton.click();
+      spyOn(router, "navigate");
+      spyOn(component, "gotoOwnersList").and.callThrough();
+      component.gotoOwnersList();
+      expect(router.navigate).toHaveBeenCalledWith(["/owners"]);
+    });
+  }));
 });

src/app/owners/owner-add/owner-add.component.ts

@@ -20,10 +20,11 @@
  * @author Vitaliy Fedoriv
  */
 
-import {Component, OnInit} from '@angular/core';
+import {Component, OnInit, ViewChild} from '@angular/core';
 import {OwnerService} from '../owner.service';
 import {Owner} from '../owner';
 import {Router} from '@angular/router';
+import { NgForm } from '@angular/forms';
 
 @Component({
   selector: 'app-owner-add',
@@ -32,6 +33,7 @@ import {Router} from '@angular/router';
 })
 export class OwnerAddComponent implements OnInit {
 
+  @ViewChild("ownerForm", { static: true }) ownerForm: NgForm;
   owner: Owner;
   errorMessage: string;
 

src/app/owners/owner-detail/owner-detail.component.html

@@ -25,7 +25,7 @@ <h2>Owner Information</h2>
     <table class="table table-striped">
       <tr>
         <th>Name</th>
-        <td><b>{{ owner.firstName }} {{ owner.lastName }}</b></td>
+        <td><b class="ownerFullName">{{ owner.firstName }} {{ owner.lastName }}</b></td>
       </tr>
       <tr>
         <th>Address</th>
@@ -41,19 +41,20 @@ <h2>Owner Information</h2>
       </tr>
     </table>
 
-    <button class="btn btn-default" (click)="gotoOwnersList()">< Back</button>
-    <button class="btn btn-default" (click)="editOwner()">Edit Owner</button>
-    <button class="btn btn-default" (click)="addPet(owner)">Add New Pet</button>
+    <button class="btn btn-default" (click)="gotoOwnersList()">
+      < Back</button>
+        <button class="btn btn-default" (click)="editOwner()">Edit Owner</button>
+        <button class="btn btn-default" (click)="addPet(owner)">Add New Pet</button>
 
-    <br/>
-    <br/>
-    <br/>
-    <h2>Pets and Visits</h2>
+        <br />
+        <br />
+        <br />
+        <h2>Pets and Visits</h2>
 
-    <table class="table table-striped">
-      <tr>
-        <app-pet-list *ngFor="let pet of owner.pets" [pet]="pet"></app-pet-list>
-      </tr>
-    </table>
+        <table class="table table-striped">
+          <tr>
+            <app-pet-list *ngFor="let pet of owner.pets" [pet]="pet"></app-pet-list>
+          </tr>
+        </table>
   </div>
-</div>
+</div>

src/app/owners/owner-detail/owner-detail.component.spec.ts

@@ -22,49 +22,99 @@
  * @author Vitaliy Fedoriv
  */
 
-import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
-import {CUSTOM_ELEMENTS_SCHEMA} from '@angular/core';
+import { CUSTOM_ELEMENTS_SCHEMA, DebugElement } from "@angular/core";
+import { OwnerDetailComponent } from "./owner-detail.component";
+import { FormsModule } from "@angular/forms";
+import { RouterTestingModule } from "@angular/router/testing";
+import { OwnerService } from "../owner.service";
+import { ActivatedRoute, Router } from "@angular/router";
+import { ActivatedRouteStub, RouterStub } from "../../testing/router-stubs";
+import { Owner } from "../owner";
+import { Observable, of } from "rxjs";
+import { By } from "@angular/platform-browser";
+import { ENGINE_METHOD_PKEY_ASN1_METHS } from "constants";
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { waitForAsync } from '@angular/core/testing';
 
-import {OwnerDetailComponent} from './owner-detail.component';
-import {FormsModule} from '@angular/forms';
-import {RouterTestingModule} from '@angular/router/testing';
-import {OwnerService} from '../owner.service';
-import {ActivatedRoute, Router} from '@angular/router';
-import {ActivatedRouteStub, RouterStub} from '../../testing/router-stubs';
-import {Owner} from '../owner';
-import {Observable, of} from 'rxjs';
 
-class OwnserServiceStub {
-  getOwnerById(): Observable<Owner> {
-    return of( { id: 1, firstName: 'James' } as Owner );
+class OwnerServiceStub {
+  getOwnerById(ownerId: String): Observable<Owner> {
+    return of({ id: 1, firstName: "James", lastName: "Franklin" } as Owner);
   }
 }
 
-describe('OwnerDetailComponent', () => {
+describe("OwnerDetailComponent", () => {
   let component: OwnerDetailComponent;
   let fixture: ComponentFixture<OwnerDetailComponent>;
+  let ownerService = new OwnerServiceStub();
+  let de: DebugElement;
+  let el: HTMLElement;
+  let router: Router;
+
+  const owner: Owner = {
+    id: 10,
+    firstName: "James",
+    lastName: "Franklin",
+    address: "110 W. Liberty St.",
+    city: "Madison",
+    telephone: "6085551023",
+    pets: null,
+  };
 
   beforeEach(waitForAsync(() => {
     TestBed.configureTestingModule({
       declarations: [OwnerDetailComponent],
       schemas: [CUSTOM_ELEMENTS_SCHEMA],
       imports: [FormsModule, RouterTestingModule],
       providers: [
-        {provide: OwnerService, useClass: OwnserServiceStub},
-        {provide: Router, useClass: RouterStub},
-        {provide: ActivatedRoute, useClass: ActivatedRouteStub}
-      ]
-    })
-      .compileComponents();
+        { provide: OwnerService, useValue: ownerService },
+        { provide: Router, useClass: RouterStub },
+        { provide: ActivatedRoute, useClass: ActivatedRouteStub },
+      ],
+    }).compileComponents();
   }));
 
   beforeEach(() => {
     fixture = TestBed.createComponent(OwnerDetailComponent);
     component = fixture.componentInstance;
     fixture.detectChanges();
+    router = TestBed.get(Router);
   });
 
-  it('should create OwnerDetailComponent', () => {
+  it("should create OwnerDetailComponent", () => {
     expect(component).toBeTruthy();
   });
+  it("find owner using ownerId", () => {
+    fixture.detectChanges();
+    fixture.whenStable().then(() => {
+      // wait for async getOwners
+      fixture.detectChanges(); // update view with name
+      de = fixture.debugElement.query(By.css(".ownerFullName"));
+      el = de.nativeElement;
+      console.log("e1 inner text "+el.innerText);
+      expect(el.innerText).toBe(
+        owner.firstName.toString() + " " + owner.lastName.toString()
+      );
+    });
+  });
+
+  it("routing to owners page on click of editOwner,addPet,gotoOwnersList", () => {
+    spyOn(router, "navigate");
+    let buttons = fixture.debugElement.queryAll(By.css("button"));
+
+    let ownersListButton = buttons[0].nativeElement;
+    ownersListButton.click();
+    spyOn(component, "gotoOwnersList").and.callThrough();
+    expect(router.navigate).toHaveBeenCalledWith(["/owners"]);
+
+    let editOwnerButton = buttons[1].nativeElement;
+    editOwnerButton.click();
+    spyOn(component, "editOwner").and.callThrough();
+    expect(router.navigate).toHaveBeenCalledWith(["/owners"]);
+
+    let addNewPetButton = buttons[2].nativeElement;
+    addNewPetButton.click();
+    spyOn(component, "addPet").and.callThrough();
+    expect(router.navigate).toHaveBeenCalledWith(["/owners"]);
+  });
 });