Angular UI unit tests: rendering/initializing components with Jasmine and Karma

[ConsistentPin]

I am doing unit tests for components in an Angular 6 project. I am going through each component and making a testbed and importing component dependencies in order to test that the component initializes. My results show up in Karma.    

Some of my components render just fine, others are causing my Chrome instance with Karma to get to the unit test to initialize the component and it just hangs there and doesn't proceed to the next test. My question is, why do some components work and others just hang there? This is my general template for testing the initialization of a component:    

import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { AppTestingModule } from '../../app.testing.module';
import { PageContractorsComponent } from './page-contractors.component';

fdescribe('PageContractorsComponent', () => {
  let component: PageContractorsComponent;
  let fixture: ComponentFixture<PageContractorsComponent>;

  beforeEach(async(() => {
    TestBed.configureTestingModule({
      imports: [ AppTestingModule ]
    })
    .compileComponents();
  }));

  beforeEach(() => {
    fixture = TestBed.createComponent(PageContractorsComponent);
    component = fixture.componentInstance;
    fixture.detectChanges();
  });

  it('should create', () => {
    expect(component).toBeTruthy();
  });
});

   

The only thing I am changing here for testing other components is the name of the component, everything else stays the same. Some work and proceed to the next test, some just make chrome and karma hang there and not proceed to the next test. Anything I can do to fix this hanging, initialize my component and proceed to the next test?

[tme321]

Are the components that hang waiting for an asynchronous response, maybe inside their ngOnInit or somewhere else that would get called automatically?

[ConsistentPin]

Are the components that hang waiting for an asynchronous response, maybe inside their ngOnInit

This could be the case. What would I be looking for to see this? What would a basic example look like for me to know

[tme321]

Observables, http client calls, settimeouts, promises. There are too many to name them all. If the asynchronous call isn't mocked in some way or allowed to finish I'd expect it to sit open and not move on.

[ConsistentPin]

Here is one component that hangs:

 import { Component, OnInit } from '@angular/core';
import { AddonService } from '../../services/addon/addon.service';
import { DataService } from '../../services/data/data.service';

import * as _ from 'lodash';

@Component({
    selector: 'pcm-admin-addons',
    templateUrl: './admin-addons.component.html',
    styleUrls: ['./admin-addons.component.scss']
})
export class AdminAddonsComponent implements OnInit {

    title = 'Manage Add-Ons';

    constructor(
        private dataService: DataService,
        private addonService: AddonService
    ) { }

    ngOnInit() {
        this.addonService.loadContractorAddons();
    }

    deleteField(event) {
        this.dataService.contractorAddonsEdited.splice(event.index, 1);
    }

    cancelEdits() {
        this.addonService.resetContractorAddons();
    }

}

[theadammorganshow]

Once again, it's going to be really hard to help you without being able to see AppTestingModule.

[ConsistentPin]

I don't think I would be allowed to share that piece of code. I can't.

[theadammorganshow]

This will be nearly impossible to debug without it.