Testing Angular 2 Component ngOnInit with Karma/Jasmine - jasmine

Question

I am trying to test my Angular 2 Template but doing something incorrect as I don't get any filteredFirms to repeat through.
Here is my directive controller code:
(my actual firm service is just getting a dummy json file and return an array of firm objects, but I'm not testing my service here so I'm mocking this call as you can see in my spec file below.)
export class FirmListComponent implements OnInit {
constructor(public firmService: FirmService) { }
public ngOnInit() {
this.firmService.stateObservable.subscribe((state) => {
this.firms = state.firms;
this.filteredFirms = this.firms;
});
this.getFirms();
}
public getFirms(value?: string) {
this.loading = true;
this.firmService.getFirms(value).subscribe((response: any) => {
this.loading = false;
});
}
}
}
My directive template:
<thead>
<tr>
<th class="checkbox-col">
<md-checkbox [(ngModel)]="selectAll" (click)="selectAllChanged()" aria-label="Select All"></md-checkbox>
</th>
<th>
Firm Name
</th>
<th>
Country
</th>
<th>
Industry
</th>
<th>
EDF
</th>
<th>
LGD
</th>
<th>
Modified
</th>
<th>
Modified By
</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let firm of filteredFirms; let i = index" class="animate-repeat" [ngClass]="{'active': firm.selected}">
<td class="checkbox-col">
<md-checkbox [(ngModel)]="firm.selected" aria-label="firm.name" (change)="selectFirm(i)"></md-checkbox>
</td>
<td>{{firm.name}}</td>
<td>{{firm.country}}</td>
<td>{{firm.industry}}</td>
<td>
<span class="label bg-purple600">US 4.0</span>
<span class="label bg-green600">US 4.0</span>
</td>
<td>
<span class="label bg-pink800">US 4.0</span>
<span class="label bg-orange300">US 4.0</span>
</td>
<td>{{firm.modifiedOn}}</td>
<td>{{firm.modifiedBy}}</td>
</tr>
</tbody>
My tests for the table head portion pass just fine, but I don't get any rows when I try to test the table body.
My spec file testing the template:
describe('Firm List Component', () => {
beforeEach(async(() => {
TestBed.configureTestingModule({
imports: [MaterialModule, FormsModule, AppModule],
declarations: [FirmListComponent],
providers: [FirmService]
})
.compileComponents()
.then(() => {
fixture = TestBed.createComponent(FirmListComponent);
component = fixture.componentInstance;
debugEl = fixture.debugElement;
element = fixture.nativeElement;
firmService = fixture.debugElement.injector.get(FirmService);
// mockFirms is just an array of objects with firm data
getObservableSpy = spyOn(firmService, 'stateObservable')
.and.returnValue(mockFirms);
getFirmsSpy = spyOn(firmService, 'getFirms')
.and.returnValue(Observable.of(mockFirms));
});
}));
it('should show firms after getFirms observable', () => {
fixture.detectChanges();
fixture.whenStable().then(() => {
fixture.detectChanges();
// this test passes
var rowHeaderLength = element.querySelectorAll('th').length;
expect(rowHeaderLength).toBe(8);
// this test does not, rowDataLength is 0
// selecting the rows by class so I don't get the tr in the header here
var rowDataLength = element.querySelectorAll('.animate-repeat').length;
expect(rowDataLength).toBe(10);
});
});
}
Any help is appreciated. Thanks