SidebarComponent.js

import {Component, View, CORE_DIRECTIVES} from 'angular2/angular2';
import {ROUTER_PROVIDERS, ROUTER_DIRECTIVES, RouterLink} from 'angular2/router';

let templateHTML = require('./SidebarComponent.html');

@Component({
    selector: 'SidebarComponent',
    inputs: [
        'title',
        'items'
    ]
})
@View({
    template: templateHTML,
    directives: [CORE_DIRECTIVES, ROUTER_DIRECTIVES]
})
export class SidebarComponent {
    constructor() {}
}

SidebarComponent.spec.js

import {
  iit,
  it,
  ddescribe,
  describe,
  expect,
  inject,
  injectAsync,
  TestComponentBuilder,
  beforeEachProviders
} from 'angular2/testing';

import {Component} from 'angular2/angular2';
import { SidebarComponent } from '../../src/app/components/SidebarComponent/SidebarComponent';

describe('Side Bar Component Component', () => {

    var html;
    beforeEach(() => {
        html = `<SidebarComponent></SidebarComponent>`;
    });

    it('should have a list of items', injectAsync([TestComponentBuilder], (tcb) => {
        return tcb.overrideTemplate(TestComponent, html).createAsync(TestComponent).then((fixture) => {
            fixture.detectChanges();
            var compiled = fixture.debugElement.nativeElement;
            expect(compiled.querySelector('ul').length).not.toBe(0);
        });
    }));


    it('each item should have multiple links', injectAsync([TestComponentBuilder], (tcb) => {
        return tcb.overrideTemplate(TestComponent, html).createAsync(TestComponent).then((fixture) => {
            fixture.detectChanges();
            var compiled = fixture.debugElement.nativeElement;
            expect(compiled.querySelectorAll('ul>li').length).not.toBe(0);
        });
    }));

});

@Component({selector: 'test-cmp', directives: [SidebarComponent], template: ''})
class TestComponent {}