unit-testing - 使用 Material 图标和图像进行 Angular 2 单元测试

Question

我已经实现了下面描述的组件，它使用图像、 Material 图标和自定义 ticker 指令，如果文本行对于元素来说太长，则滚动任何一行文本。

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

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

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

图片我在与 spec.ts 文件相同的文件夹中有一个 png 'no_image.png'。它似乎找到了图像，因为没有 404 错误(就像我输入错误路径时那样)，但是图像没有渲染。

代码指令自动收报机呈现正确的 span 因此它似乎正确设置了自动收报机，但是 HostListener 似乎没有接受鼠标悬停事件来触发 directve 操作.我尝试将 HostListener 导入 TestBed，但出现错误。

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

帮助实现任何或所有这些将不胜感激，但我也想听听我将来如何着手解决这些问题(我的谷歌搜索没有产生有用的结果)。

Answer 1

你在这个组件中没有那么高层次的逻辑，你不能写这么大的unit test，对于那个组件实际上integration测试是可用的，所以您可以测试组件的 value、color、size。

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