جاوااسکریپت - خطای تست واحد ViewportRuler در Angular2 Material

من یک کامپوننت Angular2 دارم که شامل یک کنترل تب از @angular/material است.

من دارم سعی میکنم کامپوننت خودم را آزمایش کنم (کد سادهسازی شده را در زیر ببینید - میدانم که آزمایش یک کامپوننت اینقدر ساده هیچ فایدهای ندارد)، و ارور زیر را دریافت میکنم:

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

فرض من این بود که تلاش کنم ViewportRuler (https://github.com/angular/material2/blob/master/src/lib/core/overlay/position/viewport-ruler.ts) را به عنوان یک فراهمکننده اضافه کنم. وقتی این کار را انجام میدهم (خطوط کامنتشده زیر را ببینید)، کرما باز میگرداند:

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

این که، با کمی جستجو در گوگل، نشان میدهد که فایل .ts به مرورگر ارائه میشود، به جای فایل .js کامپایل شده. ممکن است من آن را از جای اشتباهی ارجاع میدهم.

سؤالم این است: چگونه میتوانم تستهایم را کامپایل کنم؟

کد من این است:

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

من سعی کردم تا حد امکان اطلاعات را ارائه دهم، اما من به دنیای Angular تازهوارد هستم، بنابراین اگر چیزی دیگری هست که میتوانم ارائه بدهم، به من اطلاع دهید.

بسیار ممنون.

پاسخ شماره ۱

2.0.0-beta.3

MaterialModule منسوخ شده است. توسعهدهندگان میتوانند یا ماژولهای جداگانه مؤلفه و وابستگیهای آنها را به صورت مورد نیاز استفاده کنند (برای مثال MdButtonModule) و یا ماژول سفارشی خودشان را ایجاد کنند.

ماژولمتریال

• ماژول Material (و MaterialRootModule) به عنوان منسوخ شده علامتگذاری شدهاند.

ما دریافتهایم که با وضعیت فعلی tree-shaking در جهان، استفاده از یک NgModule تجمیعی مانند MaterialModule باعث میشود که ابزارها نتوانند کد مربوط به کامپوننتهایی که استفاده نمیشوند را حذف کنند.

برای اطمینان از اینکه کاربران در نهایت به کوچکترین اندازه کد ممکن برسند، ما در حال منسوخ کردن MaterialModule هستیم، که در نسخه بعدی حذف خواهد شد.

برای جایگزینی MaterialModule، کاربران میتوانند ماژول «Material» خود را درون برنامهشان ایجاد کنند (مثلاً GmailMaterialModule) که تنها مجموعهای از کامپوننتهایی که واقعاً در برنامه استفاده میشوند را وارد میکند.

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

2.0.0-beta.2

تیم Material .forRoot() را حذف کرد و این موضوع را بیاهمیت ساخت.

استفاده از ماژول forRoot منسوخ شده است و در نسخه بعدی حذف خواهد شد. در عوض، کافی است MaterialModule را مستقیماً وارد کنید:

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

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

MaterialModule.forRoot() ارائهدهندهها را راهاندازی میکند، که شما در یک ماژول تست به آنها نیاز خواهید داشت. این باید خطاهایی مانند خطای شما و موارد مشابه مانند No provider for MdIconRegistry! را برطرف کند.