title: Angular - spy not recognising function being called
body: <p>I'm trying to test one of my feature modules but I'm struggling. My last test fails because the spy doesn't think that the method is called. Not even if I move the <code>this.translate.use(this.currentLanguage.i18n)</code> call outside of the subscribe block.</p>
  
  <p>This is the feature component:</p>
  
  <pre><code>export class LanguagesComponent implements OnDestroy, OnInit {
  
    public languages = [
      {
        id: '0',
        name: this.translate.stream('LANGUAGES.SWEDISH'),
        i18n: 'sv',
        flag: {
          src: './assets/img/sv.svg'
        }
      },
      {
        id: '1',
        name: this.translate.stream('LANGUAGES.ENGLISH'),
        i18n: 'en',
        flag: {
          src: './assets/img/en.svg'
        }
      }
    ];
  
    public currentLanguage: any;
  
    private storageSubscription: Subscription;
  
    constructor(
      private cs: ClientStorage,
      private notifications: NotificationsApi,
      private router: Router,
      private translate: TranslateService
    ) {}
  
    ngOnInit() {
  
      const storedLanguage: any = this.cs.getItem(AppConstants.currentLanguage);
  
      this.currentLanguage = FindObjectByQuery(this.languages, 'i18n', storedLanguage);
  
      // Listen for when the language changes from other places than this component
      this.storageSubscription = this.cs.logger$
        .filter(data =&gt; data &amp;&amp; data.key === AppConstants.currentLanguage)
        .subscribe((currentLanguage: any) =&gt; {
  
          if (currentLanguage) {
  
            this.currentLanguage = FindObjectByQuery(this.languages, 'i18n', currentLanguage.value);
  
            // Set the current language to use
            this.translate.use(this.currentLanguage.i18n);
          }
        }
      );
    }
  
    ngOnDestroy() {
      this.storageSubscription.unsubscribe();
    }
  
    selectLanguage(language: any): void {
  
      this.cs.setItem(AppConstants.currentLanguage, language.i18n);
  
      this.router.navigate(['dashboard']);
  
      this.notifications.newNotification({message: this.translate.instant('NOTIFICATIONS.LANGUAGES.CHANGED'), theme: 'success'});
    }
  }
  </code></pre>
  
  <p>And these are my tests so far:</p>
  
  <pre><code>describe('[UNIT] LanguagesComponent', () =&gt; {
  
    let component: LanguagesComponent;
    let fixture: ComponentFixture&lt;LanguagesComponent&gt;;
    let translate: Location;
  
    beforeEach(() =&gt; {
  
      TestBed.configureTestingModule({
        imports: [
          ModuleImports
        ],
        providers: [
          TranslateService
        ],
        schemas: [NO_ERRORS_SCHEMA],
        declarations: [LanguagesComponent, DummyComponent]
      });
  
      fixture = TestBed.createComponent(LanguagesComponent);
      component = fixture.componentInstance;
      translate = TestBed.get(TranslateService);
  
      // Make sure ngOnInit runs
      fixture.detectChanges();
    });
  
    it('should create the component', async(() =&gt; {
      expect(component).toBeTruthy();
    }));
  
    it('should have a current language when the component has loaded', () =&gt; {
      expect(component.currentLanguage).toBeTruthy();
    });
  
    it('should have the needed properties in the current language', () =&gt; {
  
      const currentLanguage = component.currentLanguage;
  
      expect(currentLanguage.id).toBeTruthy();
      expect(currentLanguage.name).toBeTruthy();
      expect(currentLanguage.i18n).toBeTruthy();
      expect(currentLanguage.flag.src).toBeTruthy();
    });
  
    it('should call the use method of TranslateService with the current language i18n property', () =&gt; {
  
      const spy = spyOn(translate, 'use').and.callThrough();
  
      expect(spy).toHaveBeenCalledWith(component.currentLanguage.i18n);
    });
  });
  </code></pre>