ユニットテスト材料2のアイコンの表示方法

Question

このコンポーネントはマテリアルアイコンを使用します。今、私は（角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をインポートしなければならないが、それはエラーであることを読んだ。

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