Embarking on my first experience with implementing unit tests in Angular, I have decided to use Jasmine. Coming from a background in Java\Spring where the Spring framework automatically injected all dependencies into my tests, transitioning to Angular Unit Test with Jasmine presents new challenges for me.
Allow me to elaborate further on the task at hand:
1) The component class PeopleListComponent is as follows:
import { Component, OnInit, ElementRef, ViewChild } from '@angular/core';
import { EventService } from '../event.service';
import interactionPlugin, { Draggable } from '@fullcalendar/interaction';
interface WorkShiftTypes {
name: string;
value: string;
}
@Component({
selector: 'app-people-list',
templateUrl: './people-list.component.html',
styleUrls: ['./people-list.component.css']
})
export class PeopleListComponent implements OnInit {
people: any[];
workShiftTypes: WorkShiftTypes[];
selectedShift: WorkShiftTypes;
@ViewChild('draggable_people') draggablePeopleExternalElement: ElementRef;
constructor(private eventService: EventService) { }
ngOnInit(): void {
this.eventService.getPeople().then(people => {this.people = people;});
this.selectedShift = {name: 'Morning', value: 'Morning'};
this.workShiftTypes = [
{name: 'Morning', value: 'Morning'},
{name: 'Afternoon', value: 'Afternoon'},
{name: 'Night', value: 'Night'},
{name: 'Custom', value: 'Custom'}
];
}
ngAfterViewInit() {
console.log("PEOPLE LIST ngAfterViewInit() START !!!")
var self = this
new Draggable(this.draggablePeopleExternalElement.nativeElement, {
itemSelector: '.fc-event',
eventData: function(eventEl) {
console.log("DRAG !!!");
return {
title: eventEl.innerText,
startTime: "17:00",
duration: { hours: 8 }
};
}
});
}
createEventObject() {
return 1;
}
}
Within this component lies the straightforward method createEventObject():
createEventObject() { return 1; }
This method currently returns only the value 1. To keep things simple for testing purposes, I will initially work with this setup before delving into more complex scenarios.
Now, let's move on to the people-list-spec.ts file which will house the unit test for our previously mentioned method:
import { PeopleListComponent } from "./people-list.component"
import { EventService } from '../event.service';
describe('people-list', () => {
let eventService = new EventService();
let component = new PeopleListComponent(eventService);
it('createEventObject() should return 1', () => {
})
})
The objective here is simple - obtain an instance of PeopleListComponent, invoke the createEventObject() method, and verify that the returned value is indeed 1 to confirm the success of the unit test.
However, a complication arises when considering that the constructor of PeopleListComponent requires an EventService parameter. It turns out that the EventService constructor itself necessitates an HttpClient parameter.
In my Angular project, dependency injections are handled seamlessly by the framework. While I anticipate that the same logic applies to Angular\Jasmine, I find myself uncertain about the precise course of action.