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

Posted 2023-02-22

【中文标题】如何对 material2 图标进行单元测试

【英文标题】：How to unit test material2 icons

【发布时间】：2017-04-22 22:59:40

【问题描述】：

此组件使用材料图标。

现在我正在尝试使用 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，但这是一个错误。

【参考方案1】：

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

对于 Angular-CLI 用户： 在 test.ts 文件的末尾添加以下 sn-p。

const materialIcons = document.createElement('link');
materialIcons.href = 'https://fonts.googleapis.com/icon?family=Material+Icons';
materialIcons.rel = 'stylesheet';
document.head.appendChild(materialIcons);

【讨论】：

有时间我会试一试的。谢谢。

这是我发现唯一可行的方法，现在还是这样吗？！