2017-04-11 8 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のように印を付けてください。 –

関連する問題