Angular Testing with @Input

I was struggling to test nested with observables and testing emits.
I was looking at a few posts on medium, however it didn't cut it when I needed it to work.
A simple fix that I found on stack overflow helped a lot.
I didn't even use a textcomponentfixture class. It was a bit too complicated.

Following the guide on Stackoverflow and using SpyOn emits we can achieve a good test.

So the first thing you want to do is setup the test and a SpyObj inside your beforeAll method in your test suite.

let spyEmit: jasmine.SpyObj<EventEmitter<Project>> beforeAll(() => { spyEmit = jasmine.createSpyObj('EventEmitter', ['emit']); }); 

Make sure you have the spyEmit in your describe.

Then you have to make sure you set the default EventEmitter in your beforeEach

So before you run your fixture.detectChanges(); make sure you set you fake EventEmitter.

... fixture = TestBed.createComponent(ProjectFormComponent); component = fixture.componentInstance; component.projectDataReturn = spyEmit; ... 

This is so that it reflects this code in the parent component:

... @Output() projectDataReturn = new EventEmitter<Project>(); ... 

Now when you run your code can use a fake spy

 ... spyEmit.emit.and.callFake((project) => { expect(project).toEqual({...fakeProject, id: "old1"}); }); ... 

This allows you to capture the call and check it for each test units.

Of course you can run expect(spyEmit.emit).toHaveBeenCalled(); to check if the fake method has been called.