mardi 12 novembre 2019

Angular 7 - Unit test for an observable with subscribe

Hi I am trying to write angular code for a component with an observable but I can't test the subscribe function. Any help would be appreciated.

This is my component with the observable:

import {Component, AfterViewInit, ElementRef, Renderer2, ViewEncapsulation, OnInit, ViewChild, OnDestroy} from '@angular/core';
import {BroadcastService, MsalService} from '@azure/msal-angular';
import {NavigationEnd, NavigationStart, Router, RouterEvent} from '@angular/router';
import {ScrollPanel} from 'primeng/primeng';
import {UserService} from './core/user.service';
import {Subscription} from 'rxjs';
import {RoleService} from './core/role.service';
import {environment} from '../environments/environment';

// import {trigger, state, style, transition, animate, AnimationEvent} from '@angular/animations';

enum MenuOrientation {
  STATIC,
  OVERLAY,
  SLIM,
  HORIZONTAL
}

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.sass'],
  encapsulation: ViewEncapsulation.None
})

export class AppComponent implements OnInit, AfterViewInit, OnDestroy {

  public isLoggedIn = undefined;
  public isNavigating = false;

  private subscription: Subscription = new Subscription();
  private environmentName: string;
  private environmentUrl: string;
  private loggedInUserRole: string;

  constructor(private router: Router, private authService: MsalService, public renderer: Renderer2,
              private userService: UserService, private broadcastService: BroadcastService, private roleService: RoleService) {

    this.environmentName = environment.environmentName;
    this.environmentUrl = environment.serverUrl;
  }

  ngOnInit(): void {

    if (this.authService.getUser() !== null || this.authService.getUser() !== undefined) {
      console.log('getUser');
      this.userService.userDetails = this.authService.getUser();
    }

    if (this.environmentName === 'QA' || this.environmentName === 'LOCAL' || this.environmentName === 'QA-STAGING') {
      console.log('environmentName');
      this.authService.acquireTokenSilent(['api://012fdc3a-c966-4312-9b5c-301f097c1803/server']);
    } else {
      this.authService.acquireTokenSilent(['api://58a80bb5-906b-4ec0-9b41-7a78a07125af/server']);
    }

    this.subscription.add(
      this.broadcastService.subscribe('msal:acquireTokenSuccess', (payload) => {
        // do something here
        console.log('acquire token success ' + JSON.stringify(payload));

        this.roleService.checkServerEventReviewers().subscribe(res => {
          this.userService.userDetails.role = res ? 'Data Steward' : 'Mosaic Consumer';
          if (this.isLoggedIn !== true) {
            const redirectUri = sessionStorage.getItem('redirectUri');
            if (redirectUri !== undefined || redirectUri !== null) {
              this.router.navigateByUrl(redirectUri);
            }
          }
          this.isLoggedIn = true;
};

This is my spec file that I am trying:

import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
import { TestBed } from '@angular/core/testing';
import { Subscription } from 'rxjs';
import { RouterTestingModule } from '@angular/router/testing';
import { AppComponent } from './app.component';
import { BroadcastService, MsalService } from '@azure/msal-angular';
import { MSAL_CONFIG } from '@azure/msal-angular/dist/msal.service';
import { RoleService } from './core/role.service';
import { WindowService } from './core/window.service';
import { HttpClient, HttpHandler } from '@angular/common/http';
import { environment } from '../environments/environment';
import mockData from '../tests/dummy.json';

describe('AppComponent', () => {
  beforeEach(() => {
    let subscription: Subscription = new Subscription();
    TestBed.configureTestingModule({
      imports: [RouterTestingModule],
      declarations: [AppComponent],
      providers: [WindowService, RoleService, HttpClient, HttpHandler, BroadcastService, MsalService,
        {
          provide: MSAL_CONFIG,  // MsalService needs config, this provides it.
          useFactory: () => ({   // Note this is an arrow fn that returns the config object
            redirectUri: window.location.origin + '/',
            clientID: mockData.clientID,
          }),
        }],
      schemas: [CUSTOM_ELEMENTS_SCHEMA]
    }).compileComponents();
  });

  describe(':', () => {
    function setup() {
      const fixture = TestBed.createComponent(AppComponent);
      const app = fixture.debugElement.componentInstance;
      const compiled = fixture.debugElement.nativeElement;
      return {fixture, app, compiled};
    }

    it('Should create the app', () => {
      const {app} = setup();
      expect(app).toBeDefined();
    });

    it('Init with QA environment', () => {
      const {app} = setup();
      spyOn(app.authService, 'getUser').and.returnValue(mockData.userDetails);
      spyOn(app.authService, 'acquireTokenSilent').and.returnValue('msal:acquireTokenSuccess');
      app.ngOnInit();
      app.subscription.add(
        app.broadcastService.subscribe('msal:acquireTokenSuccess', () => {
        // do something here
        });
    );

Am I trying to access the subscribe function correctly. Or should I be doing it differently? Thank you.

Aucun commentaire:

Enregistrer un commentaire