title: How to write unit test case for a method [Angular]
body: <p>I'm a beginner in Angular. I'm trying hard to learn Typescript and now I've been told to write unit test cases in Jasmine and Karma for every <code>component</code> and <code>service</code> I create. I've watched many tutorials to learn <em>Unit testing in Angular</em>. I'm an intern, yesterday I raised a Pull request on which my tech lead has given the following comment.</p>
  
  <p><a href="https://i.stack.imgur.com/DYytD.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/DYytD.png" alt="enter image description here"></a></p>
  
  <p>Here is the code that I've written.</p>
  
  <p><strong>filter-bar.component.ts</strong></p>
  
  <pre><code>import { Component, OnInit, ViewChild, OnDestroy, Input, ChangeDetectorRef } from '@angular/core';
  import './filter-bar.component.scss';
  import { SisenseService } from '../services/sinsense.service';
  import { SisenseConfigService } from '../services/sinsense-config.service';
  import { Dashboard, Widget } from 'src/app/shared/models/sisenseConfig';
  ...
  
  @Component({
      selector: 'app-filter-bar',
      templateUrl: './filter-bar.component.html'
  })
  export class FilterBarComponent implements OnInit, OnDestroy {
    selectedMembersCount: number;
    dataUnavailable: boolean;
  
    constructor(
      public sisenseService: SisenseService,
      public sisenseConfigService: SisenseConfigService
    ) {}
  
    ngOnInit() {
      this.getDataFromWidget();
    }
  
    getDataFromWidget() {
      this.sisenseService.getWidgetData(
      this.sisenseConfigService.getDashboardId(Dashboard.POPULATION),
      this.sisenseConfigService.getWidgetInfo(Dashboard.POPULATION, Widget.UNIQUE_LIVES).id,
        widgetData =&gt; {
          this.selectedMembersCount = widgetData.queryResult.value.data;
          this.changeDetector.detectChanges();
        },
        () =&gt; {
          this.dataUnavailable = true;
        }
      );
    }
  }
  </code></pre>
  
  <p>And this is the spec file that I've written:</p>
  
  <p><strong>filter-bar.component.spec.ts</strong></p>
  
  <pre><code>import { async, ComponentFixture, TestBed, fakeAsync, tick } from '@angular/core/testing';
  
  import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
  import { FormsModule } from '@angular/forms';
  import { FilterBarComponent } from './filter-bar.component';
  import { SisenseFilterService } from '../services/sinsense-filter.service';
  import { PopUpService } from '@wuitk6/angular/components/popup/popup.service';
  import { SisenseService } from '../services/sinsense.service';
  import { SisenseConfigService } from '../services/sinsense-config.service';
  
  describe('FilterPanelComponent', () =&gt; {
      let component: FilterBarComponent;
      let fixture: ComponentFixture&lt;FilterBarComponent&gt;;
  
      mockSisenseConfigService.getWidgetInfo.and.returnValue({ id: 'demo_ID' });
  
          fixture = TestBed.createComponent(FilterBarComponent);
          component = fixture.componentInstance;
          fixture.detectChanges();
      });
  });
  </code></pre>
  
  <p>And here's the service, (i don't know who has written this code):</p>
  
  <p><strong>sisense-config.service.ts</strong></p>
  
  <pre><code>import { Injectable } from '@angular/core';
  import { HttpClient } from '@angular/common/http';
  import 'rxjs/add/operator/do';
  ...
  import { ErrorService } from './error.service';
  
  // This is to avoid compile errors in typescript.
  // The real variable will be added when sisense.js is loaded
  declare var Sisense: any;
  
  @Injectable({
      providedIn: 'root'
  })
  export class SisenseConfigService {
    constructor(private http: HttpClient, private errorService: ErrorService) {}
  
    getDashboardId(dashboardName: string): string {
      ...
    }
  
    getWidgetInfo(dashboardName: string, widgetName: string): ISisenseWidget {
     ...
     return widgetInfo;
    }
  }
  </code></pre>
  
  <p>I've written the test file but She is not OK with it. Please help me what exactly my tech lead is asking for. Feel free to ask for more code details.</p>