Тестирование модуляции зависимостей: Угловое 2

Question

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

Answer 1

Вы должны заглянуть в Angular-Cli. Он помогает создавать приложения Angular 2, и когда вы создаете компонент ng g component my-new-component, они автоматически создают файл .spec для этого компонента. Угловая-Cli также настраивает всю тестовую среду , как указано HERE.

Я не знаю, насколько это поможет, но, возможно, этого достаточно, чтобы помочь вам.

Так у меня есть нав-панели компонентов

бла-нав-bar.component.ts

import { Component, OnInit } from '@angular/core'; 
import { Router } from '@angular/router'; 

@Component({ 
    selector: 'app-blah-nav-bar', 
    templateUrl: './app/blah-nav-bar/blah-nav-bar.component.html', 
    styleUrls: ['./app/blah-nav-bar/blah-nav-bar.component.css'] 
}) 
export class BlahNavBarComponent implements OnInit { 

    constructor(private router: Router) { } 

    ngOnInit() { 
    } 

} 

и сгенерированный файл спецификации выглядит следующим образом

бла-нав -bar.component.spec.ts

import { By }   from '@angular/platform-browser'; 
import { DebugElement } from '@angular/core'; 
import { async, inject } from '@angular/core/testing'; 
import { BlahNavBarComponent } from './blah-nav-bar.component'; 

describe('Component: BlahNavBar',() => { 
    it('should create an instance',() => { 
    let component = new BlahNavBarComponent(); 
    expect(component).toBeTruthy(); 
    }); 
}); 

Я не слишком много знаю об этом, потому что я просто закомментируйте файл спецификации, но может быть достаточно, чтобы вызвать что-то, чтобы вы начали

UPDATE

Я нашел это на Official Угловой 2 сайт. Вот ссылка на домашнюю страницу Angular 2 Testing. Он описывает Testing a Component with a Dependency

Итак, если вы хотите протестировать введенную службу компонента.

приложение/welcome.component.ts

import { Component, OnInit } from '@angular/core'; 
import { UserService }  from './model'; 

@Component({ 
    selector: 'app-welcome', 
    template: '<h3 class="welcome"><i>{{welcome}}</i></h3>' 
}) 
export class WelcomeComponent implements OnInit { 
    welcome = '-- not initialized yet --'; 
    constructor(private userService: UserService) { } 

    ngOnInit(): void { 
    this.welcome = this.userService.isLoggedIn ? 
     'Welcome, ' + this.userService.user.name : 
     'Please log in.'; 
    } 
} 

The The .spec будет выглядеть как этот

приложение/welcome.component.spec.ts

import { WelcomeComponent } from './welcome.component'; 
import { UserService }  from './model'; 

beforeEach(() => { 
    // stub UserService for test purposes 
    userServiceStub = { 
    isLoggedIn: true, 
    user: { 
     name: 'Test User' 
    } 
    }; 

    TestBed.configureTestingModule({ 
    declarations: [WelcomeComponent], 
    providers: [{ 
     provide: UserService, 
     useValue: userServiceStub 
    }] 
    }); 

    fixture = TestBed.createComponent(WelcomeComponent); 
    comp = fixture.componentInstance; 

    // UserService from the root injector 
    userService = TestBed.get(UserService); 

    // get the "welcome" element by CSS selector (e.g., by class name) 
    de = fixture.debugElement.query(By.css('.welcome')); 
    el = de.nativeElement; 


}); 


// The Tests 
it('should welcome the user',() => { 
    fixture.detectChanges(); 
    const content = el.textContent; 
    expect(content).toContain('Welcome', '"Welcome ..."'); 
    expect(content).toContain('Test User', 'expected name'); 
}); 

it('should welcome "Bubba"',() => { 
    userService.user.name = 'Bubba'; // welcome message hasn't been shown yet 
    fixture.detectChanges(); 
    expect(el.textContent).toContain('Bubba'); 
}); 

it('should request login if not logged in',() => { 
    userService.isLoggedIn = false; // welcome message hasn't been shown yet 
    fixture.detectChanges(); 
    const content = el.textContent; 
    expect(content).not.toContain('Welcome', 'not welcomed'); 
    expect(content).toMatch(/log in/i, '"log in"'); 
});