How do I unit test with a subscribe in Angular5?

Question

import { Component, Input, OnInit } from '@angular/core';
import {DataplansDetails} from '../../models/dataplans-details';
import * as _ from "lodash";

@Component({
  selector: 'jsonform',
  templateUrl: './jsonform.component.html',
  styleUrls: ['./jsonform.component.scss']

})
export class JsonformComponent implements OnInit {
  @Input() dataplanDetails: any;
  public layout: any = [];
  public schema: any = {};

  ngOnInit() {
    this.dataplanDetails.subscribe(res => {
      const fileSchema = JSON.parse(res.details.submissionFileSchema)

      const formLayout = fileSchema["layout"]
      this.schema = {
        type: "object",
        properties: fileSchema["properties"]
      }

      const schemaKeys = Object.keys(this.schema["properties"])

This is my component. It has a subscribe that I'm having trouble unit testing. My test includes:

fdescribe('JsonformComponent', () => {
  let component: JsonformComponent;
  let fixture: ComponentFixture<JsonformComponent>;
  const mockObservable = new Subject();

  beforeEach(async(() => {
    TestBed.configureTestingModule({
      schemas: [CUSTOM_ELEMENTS_SCHEMA, NO_ERRORS_SCHEMA],
      providers: [
        {provide: Store, useClass: StoreStub}
      ],
      imports: [],
      declarations: [JsonformComponent]
    }).compileComponents();
  }));

  beforeEach(async(() => {
    fixture = TestBed.createComponent(JsonformComponent);
    component = fixture.componentInstance;
    fixture.detectChanges();
    component['dataplanDetals'] = mockObservable
  }));

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

  fit('should not set layout if there are no properties', () => {
    mockObservable.next({test: 'data'})


    component.parseSchema('{"layout": [], "properties": {}}')
    // component.properties = false
    expect(component.schema).toEqual({})
    expect(component.layout).toEqual([])
  })

  // it('should set the layout to have the keys', () => {
  //   component.properties = {}
  // })
});

I'm getting an error: Failed: undefined is not an object (evaluating 'this.dataplanDetails.subscribe')

How do I trigger the subscribe from the test?

score 2 · Accepted Answer · answered Apr 09 '18 at 15:58

2

1) Pull the subscribe callback into it's own method and test it directly.

2) Mock the emission of dataplanDetails. Ex:

const mockObservable = new Subject();
component['dataplanDetails'] = mockObservable;
mockObservable.next({ test: 'data' });
...now you should hit the `subscribe` block

answered Apr 09 '18 at 15:58

bc1105

1,270
8
8

Still didn't hit `subscribe`. Also, in the `ngOnInit`, `console.log(this.dataplanDetails)` returns `undefined` – Shamoon Apr 09 '18 at 17:22
Set the `@Input()` in your `beforeEach` block. You may also need to explicitly call `ngOnInit` there as well. – bc1105 Apr 09 '18 at 17:37
`ngOnInit` seems to be called automatically. How do I set the `@Input()`? – Shamoon Apr 09 '18 at 17:39
By setting the value of `dataplanDetails` on the component before `ngOnInit` runs. It's in my second example. – bc1105 Apr 09 '18 at 17:45
I updated my original post. Is this what you had described? – Shamoon Apr 09 '18 at 17:59
Sort of. Place it before the `detectChanges` line. So it becomes: `component['dataplanDetals'] = mockObservable; fixture.detectChanges();` – bc1105 Apr 09 '18 at 18:10
Let us [continue this discussion in chat](https://chat.stackoverflow.com/rooms/168584/discussion-between-shamoon-and-bc1105). – Shamoon Apr 09 '18 at 18:11

score 0 · Answer 2 · answered Apr 09 '18 at 17:41

Angular 2 RC5 Testing Promises in ngOnInit Not Working

I feel like testing if the subscription is defined should be enough, or you might trigger the loadingObservable to switch isLoading to either true or false.

If you're using loadingObservable try to switch to isLoading and set it to true/false

How do I unit test with a subscribe in Angular5?

2 Answers2