Angular2 Material ViewportRuler testujący jednostkę błąd

Question

Mam element Angular2, który zawiera kontrolkę tab z @angular/material.

Próbuję przetestować komponent (patrz uproszczony kod poniżej - mam, że nie ma sensu testowania składnik, który to jest proste) i otrzymuję następujący błąd:

Error: Error in ./MdTabHeader class MdTabHeader - inline template:0:0 caused by: No provider for ViewportRuler! 
Error: No provider for ViewportRuler! 

Moim założeniem było aby spróbować włączyć ViewportRuler (https://github.com/angular/material2/blob/master/src/lib/core/overlay/position/viewport-ruler.ts) jako dostawcę. Kiedy to zrobić (patrz wykomentowane linie poniżej), karma wraca:

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

, które z odrobiną Googling sugeruje, że jest on służąc plik .ts do przeglądarki, zamiast skompilowanych .js. Możliwe, że odwołuję się do niego z niewłaściwego miejsca.

Moje pytanie brzmi: w jaki sposób mogę wykonać testy?

Mój kod to:

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

Próbowałem aby podać jak najwięcej informacji, ale jestem nowy w całym świecie Angular, więc daj mi znać, jeśli jest coś, co mogę ci zapewnić.

Wielkie dzięki.

Answer 1

2.0.0-beta.3

MaterialModule jest przestarzała. Programiści mogą albo zużywać poszczególne moduły komponentów i ich zależności w zależności od potrzeb (np. MdButtonModule) lub tworzyć własny moduł niestandardowy.

MaterialModule

• MaterialModule (and MaterialRootModule) have been marked as deprecated.

We've found that, with the current state of tree-shaking in the world, that using an aggregate NgModule like MaterialModule leads to tools not being able to eliminate code for components that aren't used.

In order to ensure that users end up with the smallest code size possible, we're deprecating MaterialModule, to be removed in the a subsequent release.

To replace MaterialModule, users can create their own "Material" modul within their application (e.g., GmailMaterialModule) that imports only the set of components actually used in the application.

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

---

2.0.0-beta.2

Materiał zespół usunięty .forRoot() czyniąc to nie problem.

The use of Module forRoot has been deprecated and will be removed in the next release. Instead, just simply import MaterialModule directly:

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

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

---

MaterialModule.forRoot() ustawia dostawców, które będą potrzebne w module testowym. To powinno rozwiązać błędy podobne do twoich i podobne, takie jak No provider for MdIconRegistry!.