此组件使用材质图标。
现在我正在尝试使用karma(通过angular cli / webpack)学习单元测试,并且我已经找到大部分配置来创建组件,但我很难理解如何配置材料图标。
这是我到目前为止创建的内容:
/* 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 ..................');
});
});
材质图标您可以看到材质图标的连字,但它们不会渲染。我读到我需要导入Http
,但这是因为错误。
我在单元测试我的组件时遇到了同样的问题,在互联网上找不到任何东西后我决定自己实现。
对于Angular-CLI用户:在test.ts
文件的末尾添加以下代码段。
const materialIcons = document.createElement('link');
materialIcons.href = 'https://fonts.googleapis.com/icon?family=Material+Icons';
materialIcons.rel = 'stylesheet';
document.head.appendChild(materialIcons);