단위 재료 시험 방법 2 아이콘

Question

이 물질은 재료 아이콘을 사용합니다.

지금 나는 (각 CLI/웹팩를 통해) 카르마를 사용하여 단위 테스트를 배우려고 노력 그리고 난 구성의 대부분은 구성 요소를 만들 알아 낸,하지만 난 방법을 이해하기 위해 사투를 벌인거야 재료 아이콘을 구성합니다.

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