Unit testing 带材质图标和图像的角度2单元测试

我已经实现了下面描述的组件，它使用了一个图像、材质图标和一个自定义的

ticker

指令，如果文本行对于元素来说太长，则滚动该行

现在，我正在尝试学习使用karma（通过angular cli/webpack）进行单元测试，我已经找到了创建组件的大部分配置，但我很难理解如何配置图像、材质图标，以及如何让指令

HostListener

起作用

以下是我迄今为止创造的：

/*配置*/
从“@angular/core/testing”导入{async，ComponentFixture，TestBed}；
从“@angular/platform browser”导入{By}”；
从“@angular/core”导入{DebugElement，无_错误_模式}；
从“../../directions/ticker.directive”导入{TickerDirective}；
从“@angular/material”导入{MdIconModule，MaterialModule}；
从“@angular/material/icon”导入{MdIconRegistry}；
/*我的东西*/
从“./food list.component”导入{FoodListComponent}；
从“../../services/food items/food data.service”导入{FoodDataService}；
从“../../diet/food item”导入{FoodItem}；
从“../../services/working data/working data”导入{working data}；
从“../../services/working data/working data.service”导入{WorkingDataService}；
描述（'FoodListComponent'，（）=>{
let组件：FoodListComponent；
let夹具：组件夹具；
让foodDataService:FoodItem[]；
让workingDataService：WorkingData；
让de:DebugElement[]；
让el:HTMLElement；
/*存根服务*/
让foodDataServiceStub=[{
名称：'测试食品名称…………'，//写得很长，以触发ticker指令
img:'/否_image.png'，
描述：“测试食品描述”
}];
让workingDataServiceStub={
今天：新日期（），
选定日期：新日期（2016年2月5日），
目标日期：新日期（2016年2月7日），
数据：{练习：'深蹲'}
};
beforeach（异步（（）=>{
TestBed.configureTestingModule({
声明：[FoodListComponent，TickerDirective]，
导入：[MaterialModule.forRoot（），MdIconModule]，//不确定这是否正确
供应商：[
{提供：FoodDataService，useValue:foodDataServiceStub}，
{提供：WorkingDataService，useValue:workingDataServiceStub}，
MdIconRegistry//不确定这是否正确
],
架构：[无错误\u架构]
})
.compileComponents（）；
}));
在每个之前（（）=>{
fixture=TestBed.createComponent（FoodListComponent）；
组件=fixture.componentInstance；
/*注入服务*/
foodDataService=TestBed.get（foodDataService）；
workingDataService=TestBed.get（workingDataService）；
/*分配服务*/
component.workingData=workingDataService；
component.foods=食品数据服务；
fixture.detectChanges（）；
de=fixture.debugElement.queryAll（By.css（'span'）；
el=de[0]。nativeElement；
//控制台日志（el）；
});
它（'应该创建'，（）=>{
expect（component.toBeTruthy（）；
});
它（'应该有正确的食物名称'，（）=>{
expect（el.textContent）.toContain（‘测试食品名称…………’）；
});
});

图像 我在与

spec.ts

文件相同的文件夹中有一个png“no_image.png”。它似乎找到了图像，因为没有404错误（就像我放入错误路径时那样），但图像没有渲染

股票指令 ticker呈现正确的

span

，因此它似乎正确设置了ticker，但是

HostListener

似乎没有在mouseover事件上拾取以触发Directive操作。我尝试将

HostListener

导入到

TestBed

中，但是由于一个错误

材质图标 可以看到材质图标的连字，但它们不是渲染的。我读到我需要导入

Http

，但是由于一个错误

---

如果您能帮助实现这些功能，我将不胜感激，但我也想听听我将来如何着手解决这些问题（我的谷歌搜索没有产生有用的结果）。

您在这个组件中没有这么高的逻辑，也不能编写这么大的

单元测试，对于该组件，实际上
集成
测试是可用的，因此您可以测试组件的
值
，
颜色
，
大小

集成测试是一种软件测试级别，其中单个单元作为一个组进行组合和测试。目的
这一级别的测试是为了暴露
综合部队。测试驱动程序和测试存根用于帮助
集成测试

ops，对不起，伙计，我没有看到你发帖的日期，所以我认为你现在是测试之神；）谢谢，是的，这更像是e2e类型的测试。单元测试更细粒度。我也可以添加图标模块和主机的形象，但这是没有必要的
/* 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 ..................');
  });
});