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.

Your services should already be available when running the e2e, update the post with error you are getting. What exactly do you want to test? If it's the actual services you want to test you should not be doing e2e tests, instead do unit-tests on them — Lucho, Nov 18 '18 at 08:47
@Lucho this is [my first post](https://stackoverflow.com/questions/53118495/typeerror-cannot-read-property-fetchdata-of-undefined-jasmine-karma), i want to test the real data returned by the service. — Saad, Nov 19 '18 at 12:00
So you have a real dev. application hosted from a server already then? If so you can run Protractor straight to that server through to url and test it live with Protractor — Lucho, Nov 19 '18 at 19:44
because i try this, [see my post please](https://stackoverflow.com/questions/53335638/e2e-testing-angular-7-failed-cannot-read-property-fetchdata-of-undefined) — Saad, Nov 21 '18 at 09:07
Yes e2e testing. That's the purpose of it. Try a dev build and run it as if you were clicking around in the actual app. — Lucho, Nov 21 '18 at 09:15
yes, but when i try to do e2e testing, i can't inject the services of my service that i want to test it. actually i don't understand what do you mean exactlly. — Saad, Nov 21 '18 at 09:31

score 1 · Accepted Answer · answered Nov 24 '18 at 23:08

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.

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

1 Answers1

Linked