Testkomponente Angular2

Question

Ich muss einige Komponententests für eine Website machen, die mit Angular2 erstellt wurde, aber ich bin nicht sicher, wie man die Komponenten mit traditionellen Komponententests testet. Beispiel einer Komponente möchte ich zu testen:

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

Die Testklasse ive gemacht, so sieht weit wie folgt aus:

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

    }) 
}) 

Ich bin nicht sicher, welche Test und wie es zu testen, wie die Funktionen i zu tun haben keine Parameter oder Rückgaben haben. Jede Hilfe wird sehr geschätzt.

Answer 1

Sie können eine Menge Dinge testen, zum Beispiel:

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