Question

我有以下单元测试文件，它是来自另一个类似组件的工作文件的副本，并且距离样板Angular CLI输出不太远：

import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { Http, HttpModule } from '@angular/http';
import { MockBackend } from '@angular/http/testing';
import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';

import { PageHeaderComponent } from './page-header.component';
import { UserService } from '../user.service';
import { PreloadService } from '../preload.service';

describe('PageHeaderComponent', () => {
    let component: PageHeaderComponent;
    let fixture: ComponentFixture<PageHeaderComponent>;

    beforeEach(() => {
        TestBed.configureTestingModule({
            declarations: [PageHeaderComponent],
            providers: [
                {
                    provide: Http,
                    deps: [MockBackend]
                },
                PreloadService,
                UserService
            ],
            schemas: [CUSTOM_ELEMENTS_SCHEMA]
        });

        fixture = TestBed.createComponent(PageHeaderComponent);
        component = fixture.componentInstance;
    });

    it('should be created', () => {
        expect(component).toBeTruthy();
    });
});

但是，由于mdTooltip的问题，这个失败了。导致此错误：

PhantomJS 2.1.1（Linux 0.0.0）PageHeaderComponent应该被创建为FAILED

错误：模板解析错误：           无法绑定到＆mdTooltipDisabled＆＃39;因为它不是＆＃39;按钮的已知属性。（＆＃34; fxLayoutAlign =＆＃34;开始中心＆＃34; class =＆＃34; text-medium＆＃34;＆gt;                       ] [mdTooltipDisabled] =＆＃34; showHeaderTooltip＆＃34;＆GT;                           view_agenda                       ] [mdTooltipDisabled] =＆＃34; showHeaderTooltip＆＃34;＆GT;                           方向                       ] [mdTooltipDisabled] =＆＃34; showHeaderTooltip＆＃34; HREF =＆＃34; {{环境.search_url}}＆＃34;＆GT;                           http：// localhost：9876 / _karma_webpack_ / vendor.bundle.js（第25078行）           解析@ http://localhost:9876/_karma_webpack_/vendor.bundle.js:25078:72           _compileTemplate @ http://localhost:9876/_karma_webpack_/vendor.bundle.js:39124:44
....

这是标记的一个例子：

<button md-button mdTooltip="Topics" [mdTooltipDisabled]="showHeaderTooltip">
    <md-icon>view_agenda</md-icon> <span fxShow.xs="false">Topics</span>
</button>

这是我的版本表：

@angular/cli: 1.1.2
node: 6.11.0
os: linux x64
@angular/animations: 4.2.3
@angular/common: 4.2.3
@angular/compiler: 4.2.3
@angular/core: 4.2.3
@angular/forms: 4.2.3
@angular/http: 4.2.3
@angular/platform-browser: 4.2.3
@angular/platform-browser-dynamic: 4.2.3
@angular/router: 4.2.3
@angular/cli: 1.1.2
@angular/compiler-cli: 4.2.3
@angular/flex-layout: 2.0.0-beta.8
@angular/language-service: 4.2.3
@angular/material: 2.0.0-beta.7

我需要提供什么来模拟或以其他方式处理mdTooltip服务，这显然涉及一个可观察的服务？

更新：显然，这也适用于其他AM服务，例如mdMenuTriggerFor。

Answer 1

看看这个：

https://github.com/angular/material2/issues/2478

＆＃34;通过在失败的规范中将' MaterialModule '导入TestBed.configureTestingModule来修复。＆＃34;

如：

   TestBed.configureTestingModule({
        declarations: [PageHeaderComponent],
        providers: [
            {
                imports: [RouterTestingModule.withRoutes([]), MaterialModule],
                provide: Http,
                deps: [MockBackend]
            },
            PreloadService,
            UserService
        ],
        schemas: [CUSTOM_ELEMENTS_SCHEMA]
    });

Answer 2

我今天遇到了这个，（正如 Sam 在另一个回复中评论的那样）我需要将 MatTooltipModule 添加到我的导入中

TestBed.configureTestingModule({
...
imports: [
  ...
  MatTooltipModule,
  ...
]
...
}

为什么Angular Material工具提示会破坏我的单元测试？

2 个答案: