Testing Angular with Jasmine and Karma (Part 1)

Where is part 2?

Thanks !! This is a helpful tutorial, I do got one minor improvement. Cause the function under test (‘all’ or ‘findOne’) is mocked the result will always pass. Function all doesn’t do very much, but the mistake of hardcoding the id by 4 (of findOne) will not get caught:

 findOne(id: string): Observable<object> {
 const user:any = this.users.find((u: any) => {
 return u.id === 4;
 });

 return of(user);
 } 

In this case one can mock property this.users of UsersService.

You’d get something like this:

import { Injectable } from '@angular/core';
import { Observable, of } from 'rxjs';

@Injectable({
 providedIn: 'root'
})
export class UsersService {

 users: Array<object> = [ // Add employee object
 {
 id: '1',
 name: 'Jane',
 role: 'Designer',
 pokemon: 'Blastoise'
 },
 {
 id: '2',
 name: 'Bob',
 role: 'Developer',
 pokemon: 'Charizard'
 },
 {
 id: '3',
 name: 'Jim',
 role: 'Developer',
 pokemon: 'Venusaur'
 },
 {
 id: '4',
 name: 'Adam',
 role: 'Designer',
 pokemon: 'Yoshi'
 }
 ];

 getUsersFromDb(): Array<object> {
 return this.users
 }

 constructor() { }

 all(): Observable<Array<object>> {
 return of(this.getUsersFromDb());
 }

 findOne(id: string): Observable<object> {
 const user:any = this.getUsersFromDb().find((u: any) => {
 return u.id === id;
 });

 return of(user);
 }
}

import { TestBed } from '@angular/core/testing';
import { of } from 'rxjs';
import { UsersService } from './users.service';

describe('UsersService', () => {
 let service: UsersService;

 beforeEach(() => {
 TestBed.configureTestingModule({});
 service = TestBed.inject(UsersService);
 });

 it('should be created', () => {
 expect(service).toBeTruthy();
 });

 // Add tests for all() method
 describe('all', () => {
 it('should return a collection of users', () => {
 const userResponse:Array<object> = [
 {
 id: '1',
 name: 'Jane',
 role: 'Designer',
 pokemon: 'Blastoise'
 },
 {
 id: '2',
 name: 'Bob',
 role: 'Developer',
 pokemon: 'Charizard'
 }
 ];
 let response:any;
 spyOn(service, 'getUsersFromDb').and.returnValue(userResponse);

 service.all().subscribe(res => {
 response = res;
 });

 expect(response).toEqual(userResponse);
 });
 });

 describe('findOne', () => {
 it('should return a single user', () => {
 const data:any = [
 {
 id: '1',
 name: 'Jane',
 role: 'Designer',
 pokemon: 'Blastoise'
 },
 {
 id: '2',
 name: 'Bob',
 role: 'Developer',
 pokemon: 'Charizard'
 }
 ];
 let response;
 spyOn(service, 'getUsersFromDb').and.returnValue(data);

 service.findOne('2').subscribe(res => {
 response = res;
 });

 expect(response).toEqual(data[1]);
 });
 });
});