angular e2e testing : how to test Service inject(use) another services

Question

i'm trying to test my service with e2e test angular 7, my problem is i don't know how to do that:

it's my service, (the methode return Observable):

import { Injectable } from '@angular/core';
import { UrlDecoratorService } from "../../common/url-decorator.service";
import { APIFetcherService } from "../common/api-fetcher.service";
import { Observable } from 'rxjs';
import { IALChrono, ALChrono } from '../../common/IALChrono.interface';

@Injectable()
export class AnnonceChronoDetailService {
    private months: string[];
    constructor(private urlDecoratorService: UrlDecoratorService, private apiFetcher: APIFetcherService) {
    }

    fetchData(chronoInfo: ALChrono): Observable<any> {
        // construct API parameters and URL
        var URL: string = this.urlDecoratorService.urlAPIDecorate("AL", "GetAccessChrono");

        var params = this.urlDecoratorService.generateParameters({
            year: chronoInfo.year,
            month: chronoInfo.month,
            sortBy: chronoInfo.sortBy,
            sortDirection: chronoInfo.sortDirection,
            pageNumber: chronoInfo.currentPage,
            pageSize: chronoInfo.pageSize
        });

        return this.apiFetcher.fetchJson(URL, params);
    }
}

it have two other services inside my service, UrlDecoratorService and APIFetcherService.

this is my e2e test:

import { AppPage } from './app.po';
import { AnnonceChronoDetailService } from '../../src/app/services/annonce-legale/annonce-chrono-detail.service';
import { ALChrono } from '../../src/app/common/IALChrono.interface';
import { APIResponse } from '../../src/app/common/api-response.interface';
import { Observable } from 'rxjs';

describe('workspace-project App', () => {
  let page: AppPage;
  let service: AnnonceChronoDetailService;
  this.chronoInfo = new ALChrono(); //it's a class

  beforeEach(() => {
    page = new AppPage();
  });

  it('should display welcome message', () => {
    page.navigateTo();
    expect(page.getParagraphText()).toEqual('Welcome to MyProject!');
  });


  it('#getObservableValue should return value from observable', (done: DoneFn) => {
    service.fetchData(this.chronoInfo).subscribe((resp: APIResponse) => {
      expect(resp.dataCount).toBe(5);
      done();
    });
  });
});

what i need is how to inject the two services UrlDecoratorService and APIFetcherService to my e2e test, or how to test services that inject another services?

if you need more informations please tell me.

Answer 1

So the purpose of the e2e testing is to actually try out your app in it's build form, basically you have done a

ng build

on your application where you then afterwards host locally(you can do it externally aswell) that build you just created.

So basically you service is included in those bundles(more precise in your main bundle) so you dont need to setup any configs instead start testing your app with the protractor api with browser and so on. So your test file could look more like this on when looking at your question:

  describe('workspace-project App', () => {
   let page: AppPage;
   this.chronoInfo = new ALChrono(); //it's a class

   beforeEach(() => {
     page = new AppPage();
   });

   it('should display welcome message', () => {
     page.navigateTo();
     expect(page.getParagraphText()).toEqual('Welcome to MyProject!');
   });
  }

So the code including the service test should include in your unit-testing If you are not sure how protractor works I suggest you to read up more on the documentation on how the setup works.