Angular 2 unit testing with material icons and images - unit-testing

Question

I have implemented the component depicted below which uses an image, material icons, and a custom ticker directive that scrolls either line of text if it is too long for the element.
Now I'm trying to learn unit testing using karma (via angular cli/webpack) and I have the majority of the configuration figured out to create the component, but I'm struggling to understand how to configure for images, material icons, and get the directive HostListener to work.
Here is what I have created so far:
/* config */
import { async, ComponentFixture, TestBed } from '#angular/core/testing';
import { By } from '#angular/platform-browser';
import { DebugElement, NO_ERRORS_SCHEMA } from '#angular/core';
import { TickerDirective } from '../../directives/ticker.directive';
import { MdIconModule, MaterialModule } from '#angular/material';
import { MdIconRegistry } from '#angular/material/icon';
/* my stuff */
import { FoodListComponent } from './food-list.component';
import { FoodDataService } from '../../services/food-items/food-data.service';
import { FoodItem } from '../../diet/food-item';
import { WorkingData } from '../../services/working-data/working-data';
import { WorkingDataService } from '../../services/working-data/working-data.service';
describe('FoodListComponent', () => {
let component: FoodListComponent;
let fixture: ComponentFixture<FoodListComponent>;
let foodDataService: FoodItem[];
let workingDataService: WorkingData;
let de: DebugElement[];
let el: HTMLElement;
/* Stub Services */
let foodDataServiceStub = [{
name: 'test food name ..................', // written long to trigger the ticker directive
img: './no_image.png',
description: 'test food description'
}];
let workingDataServiceStub = {
today: new Date(),
selectedDate: new Date(2016, 2, 5),
targetDate: new Date(2016, 2, 7),
data: {exercise: 'Squat'}
};
beforeEach(async(() => {
TestBed.configureTestingModule({
declarations: [ FoodListComponent, TickerDirective ],
imports: [ MaterialModule.forRoot(), MdIconModule], // not sure if this is correct
providers: [
{ provide: FoodDataService, useValue: foodDataServiceStub },
{ provide: WorkingDataService, useValue: workingDataServiceStub } ,
MdIconRegistry // not sure if this is correct
],
schemas: [ NO_ERRORS_SCHEMA ]
})
.compileComponents();
}));
beforeEach(() => {
fixture = TestBed.createComponent(FoodListComponent);
component = fixture.componentInstance;
/* Inject services */
foodDataService = TestBed.get(FoodDataService);
workingDataService = TestBed.get(WorkingDataService);
/* Assign Services */
component.workingData = workingDataService;
component.foods = foodDataService;
fixture.detectChanges();
de = fixture.debugElement.queryAll(By.css('span'));
el = de[0].nativeElement;
// console.log(el);
});
it('should create', () => {
expect(component).toBeTruthy();
});
it('should have the correct food name', () => {
expect(el.textContent).toContain('test food name ..................');
});
});
Image
I have a png 'no_image.png' in the same folder as the spec.ts file. It seems to locate the image because there is no 404 error (as it did when I put in a wrong path), but the image is not rendered.
Ticker Directive
The ticker renders the correct span so it seems to set up the ticker properly, but the the HostListener doesn't seem to pick up on the mouseover event to trigger the directve action. I tried importing HostListener into TestBed but that through an error.
Material Icons
You can see the ligatures of the material icons, but they are not rendering. I read that I needed to import Http but that through an error.
Help in implementing any or all of these would be greatly appreciated, but I would also like to hear how I could go about problem solving these kinds of issues in the future (my google searches did not yield helpful results).

Answer 1

you don't have so high-level logic in this component and you can not writ so big unit test, for that component actually integration test is usable, so you can test the value, color, size of your component.
INTEGRATION TESTING is a level of software testing where individual units are combined and tested as a group. The purpose of
this level of testing is to expose faults in the interaction between
integrated units. Test drivers and test stubs are used to assist in
Integration Testing.
read more