CODEWITHSUNDEEP
angulartypescriptunit-testingjasminekarma-jasmine
Alex Slav
Alex Slav

Reputation: 195

Unit test with Subscription in a component with Jasmine/Karma

Unit test with Subscription in a component with Jasmine/Karma

I try to testing a component with Subscription, whose i'm using for obtain some data from service. I need to compare mock data with number "4", and if the comparision give out the true value, this test will be passed. My problem is misunderstand how to check it correctly.

Component app-callorder-form.ts

import { Component, OnInit, OnDestroy,  } from '@angular/core';
import { Subscription } from 'rxjs';
import { FormsService } from '../../services/forms.service';

@Component({
  selector: 'app-callorder-form',
  templateUrl: './callorder-form.component.html',
  styleUrls: ['./callorder-form.component.css']
})
export class CallorderFormComponent implements OnInit {

  modal_switcher: boolean = false; 
  subscription: Subscription;  

  constructor(private formsService: FormsService) {

    this.subscription = formsService.observableclicks$.subscribe((data) => {
      if (data.typeofform == 4) {
        this.modal_switcher = true;
      }      
    }); 

  }

  ngOnDestroy() {
    this.subscription.unsubscribe();
  }

  ngOnInit() {    
  }
}

Service forms.service.ts

import { Injectable } from '@angular/core';
import { Subject } from 'rxjs';
import { ClickForm } from '../classes/click-class'

@Injectable({
  providedIn: 'root'
})
export class FormsService {

  private clicks = new Subject<ClickForm>(); 
  observableclicks$ = this.clicks.asObservable();

  constructor(private http: HttpClient) { }

  //This method obtain values from another component
  openForm(openClick: ClickForm) {
    this.clicks.next(openClick);
  }  

}

Test

import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { Subscription } from 'rxjs';
import { CallorderFormComponent } from './callorder-form.component';
import { FormsService } from '../../services/forms.service';

describe('CallorderFormComponent', () => {
  let component: CallorderFormComponent;
  let fixture: ComponentFixture<CallorderFormComponent>;
  let forms: FormsService;
  let spy: jasmine.Spy;  
  let subscription: Subscription;  

  beforeEach(async(() => {
    TestBed.configureTestingModule({
      declarations: [ CallorderFormComponent ],
      providers: [ FormsService ]
    })
    .compileComponents();
    forms = TestBed.get(FormsService);
  }));

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

  //Problem is here
  it('...', async(() => {
    spy = spyOn(forms.observableclicks$, 'subscribe').and.returnValue(subscription);
    fixture.detectChanges();
    fixture.whenStable().then(() => {
      expect(spy).toBe(4); 
    });
  }));

});

Upvotes: 0

Views: 2690

Answers (1)

Alex Slav
Alex Slav

Reputation: 195

It's working approach, i suppose:

  it('should have typeofform == 4', (done: DoneFn) => {
    const openClick: ClickForm = {typeofform: 4, typeofact: 'Some data'};
    forms.openForm(openClick);     
    forms.observableclicks$.subscribe((data) => {
      expect(data.typeofform).toBe(4);              
    });
    done();   
  });

Update:

  it('should have typeofform == 4', async((done: DoneFn) => {
    const openClick: ClickForm = {typeofform: 4, typeofact: 'Some data'};
    forms.openForm(openClick);     
    forms.observableclicks$.subscribe((data) => {
      expect(data.typeofform).toBe(4);
      done();               
    });      
  }));

Upvotes: 1

Related Questions