Почему всплывающие подсказки Angular Material нарушают мои модульные тесты?

У меня есть следующий файл модульного теста, который является дубликатом рабочего файла из другого аналогичного компонента и не слишком далеко от стандартного вывода 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», поскольку это неизвестное свойство «кнопки». ("fxLayoutAlign="start center" class="text-medium"> ][mdTooltipDisabled]="showHeaderTooltip"> view_agenda ][mdTooltipDisabled]="showHeaderTooltip"> направления ][mdTooltipDisabled]="showHeaderTooltip" href="{{environment ?.search_url}}"> http://localhost:9876/_karma_webpack_/vendor.bundle.js (строка 25078) parse@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.


unit-testing angular angular-material angular-material2
person isherwood    schedule 06.07.2017    source источник

Ответы (2)


arrow_upward
2
arrow_downward

Взгляните на это:

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

«Исправлено путем импорта ‘MaterialModule’ в TestBed.configureTestingModule с ошибкой спецификации».

As in:

   TestBed.configureTestingModule({
        declarations: [PageHeaderComponent],
        providers: [
            {
                imports: [RouterTestingModule.withRoutes([]), MaterialModule],
                provide: Http,
                deps: [MockBackend]
            },
            PreloadService,
            UserService
        ],
        schemas: [CUSTOM_ELEMENTS_SCHEMA]
    });
person adam0101    schedule 06.07.2017
comment
Я думаю, что ответ может быть устаревшим на данный момент, хотя намерение все еще верно. Я получил это, импортировав MatTooltipModule в то же место. - person Sam Alpher; 18.11.2019
comment
Сэм, не стесняйтесь вносить изменения, указывающие на то, что имена модулей (или стратегия импорта) изменились. - person isherwood; 18.11.2019

arrow_upward
0
arrow_downward

Я наткнулся на это сегодня (как прокомментировал Сэм в другом ответе), мне нужно было добавить MatTooltipModule в мой импорт

TestBed.configureTestingModule({
...
imports: [
  ...
  MatTooltipModule,
  ...
]
...
}
person failstate    schedule 23.03.2021