javascript - Angular2 Material ViewportRuler enhetstestfel

Jag har en Angular2-komponent, som innehåller en tabbkontroll från @angular/material.

Jag försöker testa min komponent (se förenklad kod nedan - jag förstår att det inte är någon poäng med att testa en komponent som är så enkel), och får följande fel:

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

Min antagning var att försöka inkludera ViewportRuler (https://github.com/angular/material2/blob/master/src/lib/core/overlay/position/viewport-ruler.ts) som en provider. När jag gör detta (se utkommenterade rader nedan), returnerar karma:

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

Vilket, från lite Googlande, antyder att det serverar .ts-filen till webbläsaren, snarare än den kompilerade .js. Det är möjligt att jag refererar till den från fel ställe.

Min fråga är: hur får jag mina tester att kompilera?

Min kod är:

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>

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

Jag har försökt att inkludera så mycket information som möjligt, men jag är ny på hela Angular-världen, så låt mig veta om det är något mer jag kan bidra med.

Stort tack.

Svar #1

2.0.0-beta.3

MaterialModule är föråldrat. Utvecklare kan antingen använda individuella komponentmoduler och deras beroenden vid behov (t.ex. MdButtonModule) eller skapa sin egen anpassade modul.

MaterialModul

  • MaterialModule (och MaterialRootModule) har markerats som föråldrade.

Vi har upptäckt att med det nuvarande tillståndet för tree-shaking i världen, leder användningen av en aggregerad NgModule som MaterialModule till att verktyg inte kan eliminera kod för komponenter som inte används.

För att säkerställa att användare får den minsta möjliga kodstorleken avvecklar vi MaterialModule, som kommer att tas bort i en efterföljande version.

För att ersätta MaterialModule kan användare skapa sin egen "Material" modul inom sin applikation (t.ex. GmailMaterialModule) som endast importerar de komponenter som faktiskt används i applikationen.

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

2.0.0-beta.2

Materialteamet tog bort .forRoot() vilket gör detta till ett icke-problem.

Användningen av Module forRoot har föråldrats och kommer att tas bort i nästa version. Importera istället bara MaterialModule direkt:

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

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

MaterialModule.forRoot() ställer in leverantörerna, vilket du kommer att behöva i en testmodul. Detta bör lösa fel som ditt och liknande som No provider for MdIconRegistry!.

Relaterade artiklar