Angular2: компонент тестирования с зависимой инъекцией

Question

У меня есть простой, но сложный (сейчас) компонент: это просто форма входа , поэтому я не буду вставлять html. Похоже, это:

login.component.ts 

@Component({ 
    selector: 'login', 
    providers: [ModuleLoaderService, LoginService], 
    templateUrl: 'login.component.html', 
    directives: [CORE_DIRECTIVES, RouterLink], 
    pipes: [TranslationPipe] 
}) 

export class LoginComponent { 

//... some stuff 
    constructor(public router: Router, public http: Http, private _translation: TranslationService, 
       private _loginService: LoginService, private _moduleLoaderService: ModuleLoaderService) { 
        // do stuff using translation, etc 
       } 

       .... 
ngOnInit() { 
`....bla bla 
} 

Вот тест я начинаю пытаться, который я думаю, что это полностью из:

describe('Login form',() => { 
    beforeEachProviders(() => [ 
           provide(Http, {useFactory: (backend: ConnectionBackend, defaultOptions: BaseRequestOptions) => { 
            return new Http(backend, defaultOptions); 
           }, deps: [MockBackend, BaseRequestOptions]}), 
           TranslationService, 
           LoginService 
    ]); 

    it('should check translated labels', injectAsync([TestComponentBuilder], (tcb) => { 
     return tcb.createAsync(MockLoginComponent).then((fixture) => { 
      fixture.detectChanges(); 
      let compiled = fixture.debugElement.nativeElement; 
      expect(true).toBe(true); 
     }); 
    })); 
}); 

и мой TranslationService:

import { Injectable } from 'angular2/core'; 
import { TranslateService } from 'ng2-translate'; 

@Injectable() 
export class TranslationService { 

    constructor(private _translate: TranslateService) { 
     // 
    } 

Ошибки:

Неудачные для загрузки ресурса: сервер ответил статусом 404 (не найдено): http://localhost:9876/ng2-translate

Я хочу начать писать тесты для этого компонента. Первый тест, который я думал, будет хорошим началом: тестирование переведенных этикеток правильное (или что-то еще достаточно простое). Я не знаю, как вводить или издеваться над всеми этими аргументами конструктора. Любой намек по-настоящему ценится.

Update: Так я вроде игнорировал компоненту зависимости сейчас, и я был в состоянии реально получить компонент для тестирования:

describe('Login form',() => { 
    beforeEachProviders(() => [ 
     HTTP_PROVIDERS, 
     provide(XHRBackend, { useClass: MockBackend }), 
     provide(Router, { useClass: MockRouter }), 
     TranslateService, 
     TranslationService, 
     LoginService, 
     provide(TranslateLoader, { 
      useFactory: (http: Http) => new TranslateStaticLoader(http, 'assets/i18n', '.json'), 
      deps: [Http] 
     }), 
     TranslateService, 
     ModuleLoaderService 
    ]); 

    it('should pre-populate username and pass from localStorage', injectAsync([TestComponentBuilder], (tcb) => { 
     return tcb.createAsync(LoginComponent).then((fixture) => { 
      fixture.detectChanges(); 
      let compiled = fixture.debugElement.nativeElement; 
      localStorage.setItem('username', 'storedUsername');   
      expect(compiled.querySelector('input .ng-untouched')).toHaveText('storedUsername'); 
     }); 
    })); 

Селектор CSS, кажется, не работает и переводные этикетки не показывать в браузере Кармы либо ...

Answer 1

Это может помочь. Я не использую TS сам (только Dart), но он запускает тесты без ошибок (на самом деле ничего не тестирует).

Некоторые ссылки, которые могут быть полезны

• https://github.com/juliemr/ng2-test-seed
• https://github.com/ericmdantas/angular2-typescript-todo

тест/some.spec.ts

import {setBaseTestProviders} from 'angular2/testing'; 
import { 
    TEST_BROWSER_PLATFORM_PROVIDERS, 
    TEST_BROWSER_APPLICATION_PROVIDERS 
} from 'angular2/platform/testing/browser'; 
import {Http, ConnectionBackend, BaseRequestOptions} from 'angular2/http'; 
import {ROUTER_PROVIDERS, ROUTER_PRIMARY_COMPONENT} from 'angular2/router'; 
import { 
    //AsyncTestCompleter, 
    TestComponentBuilder, 
    beforeEachProviders, 
    beforeEach, 
    describe, 
    // el, 
    expect, 
    inject, 
    injectAsync, 
    it, 
} from 'angular2/testing'; 
import {Component, provide, ElementRef} from 'angular2/core'; 
import {LoginComponent, TranslationService} from '../src/app'; 
import {MockBackend} from "angular2/src/http/backends/mock_backend"; 

setBaseTestProviders(TEST_BROWSER_PLATFORM_PROVIDERS, 
    TEST_BROWSER_APPLICATION_PROVIDERS); 

describe('Login form',() => { 
    beforeEachProviders(() => [provide(ROUTER_PRIMARY_COMPONENT, {useClass: LoginComponent}), TestComponentBuilder, ROUTER_PROVIDERS, 
    provide(Http, { 
     useFactory: (backend:ConnectionBackend, defaultOptions:BaseRequestOptions) => { 
     return new Http(backend, defaultOptions); 
     }, deps: [MockBackend, BaseRequestOptions] 
    }), 
    TranslationService, 
    ]); 

    it('should check translated labels', injectAsync([TestComponentBuilder], (tcb) => { 
    return tcb.createAsync(LoginComponent).then((fixture) => { 
     fixture.detectChanges(); 
     let compiled = fixture.debugElement.nativeElement; 
     console.debug(compiled); 
     expect(true).toBe(true); 
    }); 
    })); 
}); 

test.html

<!DOCTYPE html> 
<html> 

<head> 
    <title>angular2 playground</title> 

    <script src="https://cdnjs.cloudflare.com/ajax/libs/jasmine/2.4.1/jasmine.js"></script> 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jasmine/2.4.1/jasmine-html.js"></script> 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jasmine/2.4.1/boot.js"></script> 


    <link rel="stylesheet" href="style.css"/> 
    <script src="https://code.angularjs.org/2.0.0-beta.15/angular2-polyfills.js"></script> 
    <script src="https://code.angularjs.org/tools/system.js"></script> 
    <script src="https://code.angularjs.org/tools/typescript.js"></script> 
    <script src="config.js"></script> 
    <script src="https://code.angularjs.org/2.0.0-beta.15/Rx.js"></script> 
    <script src="https://code.angularjs.org/2.0.0-beta.15/angular2.dev.js"></script> 
    <script src="https://code.angularjs.org/2.0.0-beta.15/router.dev.js"></script> 
    <script src="https://code.angularjs.org/2.0.0-beta.15/http.dev.js"></script> 
    <script src="https://code.angularjs.org/2.0.0-beta.15/testing.dev.js"></script> 
    <script> 

     Promise.all([ 
      System.import('test/some.spec.ts') 
     ]) 
     .then(window.onload) 
       .catch(console.error.bind(console)); 
    </script> 
</head> 
<body> 
</body> 
</html> 

SRC/app.ts

import {EventEmitter, HostListener, Component, Directive, Output} from 'angular2/core'; 
import {Http} from 'angular2/http'; 
import {RouterLink, Router, RouteConfig, RouterOutlet} from 'angular2/router'; 


export class TranslationService { 
} 

@Component({ 
    selector: 'home-cmp', 
    template: '<div>home</div>' 
}) 
class HomeComponent { 
} 

@Component({ 
    selector: 'login', 
    providers: [TranslationService], 
    template: '<div>login</div>', 
}) 
export class LoginComponent { 
    constructor(private _translation:TranslationService) { 
    // do stuff using translation, etc 
    } 
} 

@Component({ 
    directives: [RouterLink, RouterOutlet], 
    selector: 'my-app', 
    template: ` 
<a [routerLink]="['/Home']">Home</a> 
<a [routerLink]="['/Login']">Login</a> 
<router-outlet></router-outlet>`, 
}) 
@RouteConfig([ 
    {path: '/home', component: HomeComponent, name: 'Home', useAsDefault: true}, 
    {path: '/login', component: LoginComponent, name: 'Login'}, 
]) 
export class App { 
}