Recently, I finished creating a unique component that showcases an image, material icons, and a custom directive known as ticker. This directive allows for scrolling text if it exceeds the width of the element.
https://i.stack.imgur.com/GpDSr.png
My next challenge involved delving into unit testing using karma within angular cli/webpack. While most of the setup is clear to me, I've hit a roadblock in configuring images, material icons, and getting the HostListener directive to function properly.
This is what I have managed to piece together until now:
https://i.stack.imgur.com/9lC01.png
/* Configuration */
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';
/* Custom Components & Services */
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;
/* Stubbed Service Data */
let foodDataServiceStub = [{
name: 'test food name ..................', // Test long name triggering 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], // Unsure about correctness
providers: [
{ provide: FoodDataService, useValue: foodDataServiceStub },
{ provide: WorkingDataService, useValue: workingDataServiceStub } ,
MdIconRegistry // Uncertain about correctness
],
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:
In the same directory as the spec.ts file, there is a png named 'no_image.png'. The framework identifies the image without any 404 errors, yet it fails to render.
Ticker Directive:
The span associated with the ticker seems correctly set up, but the HostListener isn't responding to mouseover events as expected. I attempted importing HostListener into TestBed, which resulted in an error.
Material Icons:
Although the ligatures of the material icons are visible, they do not render on the screen. Research suggested importing Http, but this led to another error.
I would greatly appreciate assistance in implementing these features, along with guidance on troubleshooting similar issues in the future (my attempts at finding solutions via search engines proved fruitless).