typescript - Lage testtilfelle for Angular-tjeneste med avhengigheter ved hjelp av TestBed

God dag.

Kjører for øyeblikket et prosjekt i Angular-rammeverket. Jeg prøver å skrive en testtilfelle for en tjeneste med avhengigheter, men forstår åpenbart ikke hvordan jeg skal strukturere det. Nedenfor er de to klassene det gjelder.

Dette er LoginService

@Injectable({
  providedIn: 'root'
})
export class LoginService implements CanActivate, OnInit {

  constructor(private router: Router,
              private httpClient: HttpClient,
              private cookieService: CookieService) { }

Dette er testklassen for LoginService:

import {Router} from '@angular/router';
import {CookieService} from 'angular2-cookie/core';
import {ComponentFixture, TestBed} from '@angular/core/testing';
import {LoginService} from './login.service';
import {HttpClient} from '@angular/common/http';

describe('Service: LoginService', () => {

  let router: Router;
  let httpClient: HttpClient;
  let cookieService: CookieService;
  let service: LoginService;
  let fixture: ComponentFixture<LoginService>;

  beforeEach(() => {
    TestBed.configureTestingModule({
      declarations: [LoginService],
      providers: [Router, HttpClient, CookieService]
    });

    fixture = TestBed.createComponent(LoginService);
    service = fixture.componentInstance;
    router = TestBed.get(Router);
    httpClient = TestBed.get(HttpClient);
    cookieService = TestBed.get(CookieService);
  });

  it('should return true from isLoggedIn when token is set', function () {
    spyOn(cookieService, 'get').and.returnValue('true');
    expect(service.isLoggedIn()).toBeTruthy();
  });
});

Det er enkelt da jeg prøver det ut. Feilen jeg får er:

Error: Unexpected value 'LoginService' declared by the module 'DynamicTestModule'. Please add a @Pipe/@Directive/@Component annotation.
    at syntaxError (http://localhost:9876/node_modules/@angular/compiler/fesm5/compiler.js?:2547:1)

I utgangspunktet er min intensjon å få injisert avhengighetene til LoginService, og deretter bruke spyOn-metoden i de enkelte testene for å forstyrre flyten slik jeg finner det passende.

En dytt i riktig retning vil bli satt pris på. Hvis løsningen er dokumentert, vennligst legg ved en lenke.

Blir tjenester behandlet på en annen måte sammenlignet med komponentene når man bruker TestBed? For å være ærlig er jeg ikke sikker på hvordan jeg skal tolke feilen, for hvorfor skulle en tjeneste ha disse annotasjonene?

REDIGER etter å ha lest @Dream88

Løsningen på problemet mitt:

import {Router} from '@angular/router';
import {CookieService} from 'angular2-cookie/core';
import {LoginService} from './login.service';
import {HttpClient, HttpClientModule} from '@angular/common/http';
import {AppRoutingModule} from '../../app-routing.module';
import {TestBed} from '@angular/core/testing';
import {AppModule} from '../../app.module';

describe('Service: LoginService', () => {

  let router: Router;
  let httpClient: HttpClient;
  let cookieService: jasmine.SpyObj<CookieService>;
  let service: LoginService;

  beforeEach(() => {
    const cookieServiceSpy = jasmine.createSpyObj('CookieService', ['get']);
    TestBed.configureTestingModule({
      imports: [
        AppModule,
        AppRoutingModule,
        HttpClientModule
      ],
      providers: [LoginService, {
        provide: CookieService, useValue: cookieServiceSpy
      }]
    });

    router = TestBed.get(Router);
    httpClient = TestBed.get(HttpClient);
    cookieService = TestBed.get(CookieService);
    service = new LoginService(router, httpClient, cookieService);
  });

  it('should return true from isLoggedIn when token is set', function () {
    cookieService.get.and.returnValue('true');
    expect(service.isLoggedIn()).toBeTruthy();
  });
});

Kort sagt - jeg hadde ingen idé om hva jeg skrev. Etter å ha forstått den underliggende implementeringen var det ganske rett frem. Takk for dytten. Marker Dream88 som korrekt.

Jeg spurte meg selv hvordan produksjonskoden fungerer. Hvordan blir tjenester injisert? Hva markerer en tjeneste (@Injectable)? Det ga en pekepinn på hva som burde være i importerte og leverandører.

Vennlig hilsen.

Svar #1

Dette vil ikke fungere siden: fixture=TestBed.createComponent(LoginService); skal lage en component, altså noe med annotasjonen @component. Med @service er det ikke ment å rendre en UI. Derfor oppstår feilen.

Å teste en tjeneste bør være en enkel funksjonalitetstest, ingen behov for TestBed. Du vil bare trenge å gjøre dette når du vil teste en komponent som bruker den nevnte tjenesten, i så fall må du legge dette til i listen over leverandører.

For bare testing av tjenester, ta en titt på Angular-dokumentasjonen.

Relaterte artikler