测试组件Angular2

Question

I have to make some unit tests for a website made with Angular2 but im not sure how to test the components using traditional Unit testing. Example of a component i want to test:

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

The test class ive made so far looks like this:

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

    })
}) 

Im not sure what test and how to test it as the functions i have do not have any parameters or returns. Any help is greatly appreciated.

Answer 1

You can test a lot of things, for example:

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