Angular2 Material ViewportRuler单元测试错误

Question

我有一个Angular2组件,其中包含一个选项卡控件@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)作为提供者包含在内.当我这样做时(见下面注释掉的行),业力回报:

Uncaught SyntaxError: Unexpected token import
at http://localhost:9876/context.html:10

从Googling的一点来看,它表明它将.ts文件提供给浏览器,而不是编译的.js.我可能是从错误的地方引用它.

我的问题是:如何编译我的测试？

我的代码是:

my.component.ts:

@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' }];
    }
}

my.component.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>    

my.component.spec.ts:

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

我试图尽可能多地包含信息,但我是整个Angular世界的新手,所以让我知道我还能提供什么.

非常感谢.

Answer 1

2.0.0 beta.3

MaterialModule已弃用.开发人员可以根据需要使用单个组件模块及其依赖项(例如MdButtonModule),也可以创建自己的自定义模块.

MaterialModule

• MaterialModule(和MaterialRootModule)已被标记为已弃用.

我们发现,在世界上目前的树状态下,使用像MaterialModule这样的聚合NgModule会导致工具无法消除未使用的组件的代码.

为了确保用户尽可能使用最小的代码大小,我们不推荐使用MaterialModule,以便在后续版本中删除.

要替换MaterialModule,用户可以在其应用程序(例如,GmailMaterialModule)中创建自己的"材料"模块,该模块仅导入应用程序中实际使用的组件集.

https://github.com/angular/material2/releases/tag/2.0.0-beta.3

2.0.0 beta.2

材料团队已删除,.forRoot()使其成为非问题.

Module forRoot的使用已被弃用,将在下一版本中删除.相反,只需直接导入MaterialModule:

@NgModule({
   imports: [
       ...
       MaterialModule,
       ...
   ]
...
});

https://github.com/angular/material2/releases/tag/2.0.0-beta.2

MaterialModule.forRoot()设置提供程序,您需要在测试模块中.这应该解决像你和类似的错误No provider for MdIconRegistry!.