2017-04-11 73 views
0

我必须为使用Angular2制作的网站进行一些单元测试,但不知道如何使用传统单元测试来测试组件。组件的例子我想测试:测试组件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' ,()=>{ 

    }) 
}) 

林不知道考什么,以及如何对其进行测试,因为我有做的功能没有任何参数或回报。任何帮助是极大的赞赏。

+1

我建议去通过[官方测试指南(https://angular.io/docs/ts/latest/testing/)你会发现有关测试组件的详细信息... – Sasxa

回答

0

可以测试很多东西,例如:

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

非常感谢! – MoeTheBro

+0

请给出一些选票或标记它像问题的答案@MoeTheBro。 –