테스트 구성 요소 Angular2

Question

Angular2로 만든 웹 사이트에 대한 일부 단위 테스트를해야하지만 기존 단위 테스트를 사용하여 구성 요소를 테스트하는 방법을 모르겠습니다. 구성 요소의 예 내가 테스트 할 :

import { Component } from '@angular/core'; 
import * as io from "socket.io-client"; 
import { SocketService } from '../global/socket.service'; 
import { Router } from '@angular/router'; 

@Component({ 
    moduleId: module.id, 
    selector: 'login-app', 
    templateUrl: 'login.component.html', 
}) 
export class LoginComponent { 
    name = 'Angular'; 
    username: string; 
    password: string; 

    constructor(private socketService: SocketService, private router: Router){ } 

    loginAccount(){ 
    var login = { 
     username: this.username, 
     password: this.password, 
    } 
    this.socketService.socket.emit('login', JSON.stringify(login)); 
    } 

    ngOnInit(){ 
    if(localStorage.getItem('user')){ 
     this.router.navigateByUrl('/home'); 
    } 
    } 
} 

는 테스트 클래스 필자가 만든 지금까지 다음과 같습니다

import {LoginComponent} from './login.component'; 
describe('login' ,()=>{ 
    it('test userinput' ,()=>{ 

    }) 
}) 

임 확실하지 무엇을 테스트하고 내가 할 수있는 기능으로 테스트하는 방법 매개 변수 나 반환 값이 없습니다. 어떤 도움이라도 대단히 감사합니다.

Answer 1

당신은 예를 들어, 많은 것들을 테스트 할 수 있습니다

describe('Components defined for the parent component',() => { 
    /** 
    * Tests that the current component is correctly built. 
    **/ 
    it('should have a defined current component',() => { 
     component.ngOnInit(); 
     expect(component).toBeDefined(); 
    }); 

    /** 
    * Tests that the child component is correctly built. 
    **/ 
    it('should have a defined child component',() => { 
     expect(componentChild).toBeDefined(); 
    }); 
}); 

describe('Initialization of variable for parent component',() => { 
    /** 
    * Tests that the page title is correct. 
    **/ 
    it('should show the title with correct attributes',() => { 
     fixtureParent.detectChanges(); 
     expect(component.title).toContain('Title'); 
    }); 
}); 

describe('Load of the variables to the template for parent component',() => { 
    /** 
    * Tests that the title is empty before the use of the title variable. 
    **/ 
    it('no title in the DOM until manually call `detectChanges`',() => { 
     expect(el.textContent).toEqual(''); 
    }); 

    /** 
    * Tests that the component have the correct title when everything is loaded. 
    **/ 
    it('should display original page title',() => { 
     fixtureParent.detectChanges(); 
     expect(el.textContent).toContain(component.title); 
     expect(el.textContent).not.toBe(null); 
    }); 
}); 

describe('Load of example data to simulate that Input variables are correctly assigned for parent component',() => { 
    /** 
    * Tests that the component doesn't obtain an error or empty list. 
    **/ 
    it('should load correctly clients list in clientsList Input',() => { 
     component.clientsList = testListClients; 
     fixtureParent.detectChanges(); 
     expect(component.clientsList).toEqual(testListClients); 
    }); 
});