I have the following unit test file, which is a duplicate of a working file from another similar component and not too far from boilerplate Angular CLI output:
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();
});
});
However, this one fails due to a problem with mdTooltip. It results in this error:
PhantomJS 2.1.1 (Linux 0.0.0) PageHeaderComponent should be created FAILED
Error: Template parse errors: Can't bind to 'mdTooltipDisabled' since it isn't a known property of 'button'. ("fxLayoutAlign="start center" class="text-medium"> ][mdTooltipDisabled]="showHeaderTooltip"> view_agenda ][mdTooltipDisabled]="showHeaderTooltip"> directions ][mdTooltipDisabled]="showHeaderTooltip" href="{{environment?.search_url}}"> http://localhost:9876/_karma_webpack_/vendor.bundle.js (line 25078) parse@http://localhost:9876/_karma_webpack_/vendor.bundle.js:25078:72 _compileTemplate@http://localhost:9876/_karma_webpack_/vendor.bundle.js:39124:44
....
Here's an example of the markup:
<button md-button mdTooltip="Topics" [mdTooltipDisabled]="showHeaderTooltip">
<md-icon>view_agenda</md-icon> <span fxShow.xs="false">Topics</span>
</button>
Here is my version table:
@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
What do I need to provide to mock or otherwise handle the mdTooltip service, which apparently involves an observable?
Update: Apparently this occurs for other AM services as well, such as mdMenuTriggerFor
.
Take a look at this:
https://github.com/angular/material2/issues/2478
"Fixed by importing āMaterialModuleā to TestBed.configureTestingModule in failing spec."
As in:
import { TestBed } from '@angular/core/testing';
import { RouterTestingModule } from '@angular/router/testing';
import { HttpClientTestingModule } from '@angular/common/http/testing';
import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
import { MatTooltipModule } from '@angular/material/tooltip';
import { PageHeaderComponent } from './page-header.component';
import { PreloadService } from './services/preload.service';
import { UserService } from './services/user.service';
TestBed.configureTestingModule({
declarations: [PageHeaderComponent],
imports: [
RouterTestingModule.withRoutes([]),
HttpClientTestingModule, // Use HttpClientTestingModule instead of Http and MockBackend
MatTooltipModule
],
providers: [
PreloadService,
UserService
],
schemas: [CUSTOM_ELEMENTS_SCHEMA]
});