测试组件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);
    });
});