unit-testing - 如何对 material2 图标进行单元测试

Question

此组件使用 Material 图标。

现在我正在尝试使用 karma 学习单元测试(通过 angular cli/webpack)，并且我已经想出了创建组件的大部分配置，但我正在努力了解如何配置 Material 图标。

这是我到目前为止创建的内容:

/* 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 ..................');
  });
});

Material 图标 您可以看到 Material 图标的连字，但它们没有渲染。我读到我需要导入 Http 但这是通过错误导入的。

Answer 1

我在对我的组件进行单元测试时偶然发现了同样的问题，在互联网上一无所获后，我决定自己实现。

对于 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);