Ошибка испытания блока ViewportRuler Angular2 материальная
у меня есть компонент Angular2, который содержит элемент управления tab от @angular/material
.
Я пытаюсь проверить свой компонент (см. упрощенный код ниже - я понимаю, что нет смысла тестировать компонент, который так прост), и получаю следующую ошибку:
Error: Error in ./MdTabHeader class MdTabHeader - inline template:0:0 caused by: No provider for ViewportRuler!
Error: No provider for ViewportRuler!
мое предположение состояло в том, чтобы попытаться включить ViewportRuler (https://github.com/angular/material2/blob/master/src/lib/core/overlay/position/viewport-ruler.ts) в качестве поставщика. Когда я делаю это (см. комментируемые строки ниже), karma returns:
Uncaught SyntaxError: Unexpected token import
at http://localhost:9876/context.html:10
который, из немного Гугля, предполагает, что он обслуживает.файл ТС в браузер, а не компиляции .js. Возможно, я ссылаюсь не на то место.
мой вопрос: как сделать компиляцию тестов?
мой код есть:
мой.деталь.ТС:
@Component({
selector: 'test',
template: require('./test.component.html')
})
export class TestComponent {
items: any[];
constructor() {
this.items = [{ title: 'test 1', description: 'description 1' }, { title: 'test 2', description: 'description 2' }];
}
}
мой.деталь.HTML-код:
<md-tab-group>
<md-tab *ngFor="let link of items">
<template md-tab-label>
<h4>{{link.title}}</h4>
</template>
{{link.description}}
</md-tab>
</md-tab-group>
мой.деталь.спекуляция.ТС:
import { TestBed } from '@angular/core/testing';
import { Component} from '@angular/core';
import { MaterialModule } from '@angular/material';
import { ViewportRuler} from '@angular/material/core/overlay/position/viewport-ruler'
import { TestComponent } from './test.component';
describe("TestComponent",
() => {
let fixture, component;
beforeEach(() => {
TestBed.configureTestingModule({
imports: [MaterialModule],
declarations: [TestComponent],
providers: [
//{ provide: ViewportRuler }
]
});
fixture = TestBed.createComponent(TestComponent);
component = fixture.componentInstance;
});
it('true = true', () => {
expect(true).toBe(true);
});
});
Я попытался включить как можно больше информации, но я новичок во всем угловом мире, поэтому дайте мне знать, если есть что-то еще, что я могу предоставить.
большое спасибо.
1 ответов
2.0.0-бета.3
MaterialModule
устарела. Разработчики могут использовать отдельные модули компонентов и их зависимости по мере необходимости (например,MdButtonModule
) или создать собственный пользовательский модуль.
MaterialModule
- MaterialModule (и MaterialRootModule) были отмечены как не одобрять.
мы обнаружили, что с текущим состоянием дерева встряхивания в мире, что использование агрегатного NgModule как MaterialModule приводит к тому, что инструменты не могут устранить код для компонентов, которые не используются.
обеспечить что потребители заканчивают вверх с самым малым размером кода возможно, мы осуждаем MaterialModule, который будет удален в a последующий релиз.
заменить MaterialModule, потребители могут создать их собственный модуль" материала" в их применении (например, GmailMaterialModule), который импортирует только набор компонентов фактически используется в приложении.
https://github.com/angular/material2/releases/tag/2.0.0-beta.3
2.0.0-бета.2
материал команды удалены .forRoot()
сделать это не проблема.
использование модуля forRoot устарело и будет удалено в следующем выпуске. Вместо этого просто импортируйте MaterialModule напрямую:
@NgModule({
imports: [
...
MaterialModule,
...
]
...
});
https://github.com/angular/material2/releases/tag/2.0.0-beta.2
MaterialModule.forRoot()
настройка поставщиков, которые вам понадобятся в модуле тестирования. Это должно решить такие ошибки, как ваши и подобные им, как No provider for MdIconRegistry!
.