I have an Angular2 component that contains a tab control from @angular/material .
I try to test my component (see simplified code below - I understand that it makes no sense to test the component, that it is simple), and I get the following error:
Error: Error in ./MdTabHeader class MdTabHeader - inline template:0:0 caused by: No provider for ViewportRuler! Error: No provider for ViewportRuler!
My guess was to try to include ViewportRuler ( https://github.com/angular/material2/blob/master/src/lib/core/overlay/position/viewport-ruler.ts ) as a provider. When I do this (see Numbered lines below), karma returns:
Uncaught SyntaxError: Unexpected token import at http:
Which of the bits does Googling suggest that it serves the .ts file in the browser, rather than compiling .js. Perhaps I refer to him from the wrong place.
My question is: how do I compile my tests?
My code is:
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); }); });
I tried to include as much information as possible, but I'm new to Angular all over the world, so let me know if there is anything else I can provide.
Many thanks.