Unit testing an html input in Angular2 Karma Unit Testing

Recently I was working on creating a component, where I needed to unit test my input element.

I tried almost everything to test my input on text element but in vain. Though I have done it many times before with a form control attached to it and it was easy. But this was new...

So just to save you guys some time, below is the code snippet for the same.

test-component.ts:

@Component({

  selector: 'test-component',
  template: '
<div>
<input [(ngmodel)="name" type="text" />
</div>

'

})
class TestComponent {
  name: string;
}

test-component.spec.ts:
Just writing the test case assuming that you know the how to write the test cases in Karma.

inputElement = fixture.debugElement.query(By.css('input')).nativeElement;

it('should set input value programatically', () => {
 
  inputElement.dispatchEvent(new Event('focus'));
  inputElement.value = 'Pratibha';
  inputElement.dispatchEvent(new Event('input'));

  fixture.detectChanges();
  expect(componennt.name).toEqual('Pratibha');
});