How to mock ApplicationRef in unit test

Question

I tried to test both methods by Jasmine and Angular 4 but this.applicationRef is always returned an empty object. How to resolve this one?

Here is my code:

@Injectable()
class Dialog {
  ....
  getRootViewContainerRef(): ViewContainerRef {
    const appInstance = this.applicationRef.components[0].instance;

    if (!appInstance.viewContainerRef) {
      const appName = this.applicationRef.componentTypes[0].name;
      throw new Error(`Missing 'viewContainerRef' declaration in ${appName} constructor`);
    }

    return appInstance.viewContainerRef;
  }
}

createOverlay(parentContainerRef: ViewContainerRef): ComponentRef<DialogContainerComponent> {
  const rootContainerRef = parentContainerRef;
  const rootInjector = rootContainerRef.injector;

  const bindings = ReflectiveInjector.resolve([]);
  const injector = ReflectiveInjector.fromResolvedProviders(bindings, rootInjector);

  const overlayFactory = this.cfr.resolveComponentFactory(DialogContainerComponent);
  return rootContainerRef.createComponent(overlayFactory, rootContainerRef.length, injector);
}

Here is my test script:

describe('Dialog service', () => {
  //let fixture: ComponentFixture<DialogInformationComponent>;
  //let component: DialogInformationComponent;

  beforeEach(async(() => {
    TestBed.configureTestingModule({
      imports: [...],
      providers: [
        {provide: APP_BASE_HREF, useValue: '/'},
        Dialog, DialogContext
      ]
    });
  }));

  it('Dialog should be showed.', inject([Dialog], (service: Dialog) => {
    let res: any;
    service.open(DialogInformationComponent, message).subscribe((result) => {
       res = result;
    });
   expected(true).toBeTruethy();
  }));
});

However, the ApplicationRef is always empty:

score 6 · Answer 1 · answered Jan 18 '18 at 06:34

I resolved by creating a new MockComponent and then push it into current TedBed ApplicationRef look like:

 @Component({
    selector: 'app-dialog',
    template: ''
  })
  class MockDialogComponent {
    constructor(public viewContainerRef: ViewContainerRef) {
    }
  }

  @NgModule({
    imports: [DialogModule],
    declarations: [MockDialogComponent]
  })
  class MockDialogModule {
  }

  beforeEach(async(() => {
    TestBed.configureTestingModule({
      imports: [CommonModule, MockDialogModule]
    });
  }));

  beforeEach(() => {
    appRef = TestBed.get(ApplicationRef) as ApplicationRef;
    fixture = TestBed.createComponent(MockDialogComponent);
    appRef.components.push(fixture.componentRef);
    de = fixture.debugElement;
    fixture.detectChanges();
  });

  it('Dialog should be showed.', inject([Dialog], (service: Dialog) => {
     service.open(DialogInformationComponent, message).subscribe();
     fixture.detectChanges();
     expect(service.isShow).toBe(true);
  }))

This seemed to resolve the issues I was having too with my dialog tests, but I don't actually understand why... Would you be able to add an explanation of what's why this fixes the issues? — cjablonski76, Feb 23 '19 at 02:13

How to mock ApplicationRef in unit test

1 Answers1