Создание тестового примера для угловой службы с зависимостями с использованием TestBed

Question

Добрый день.

В настоящее время выполняется проект в угловой структуре.Я пытаюсь написать тест-кейс для службы с зависимостями, но, очевидно, не понимаю, как создать его.Ниже приведены два рассматриваемых класса.

Это LoginService

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

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

Это тестовый класс для 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();
  });
});

Это просто, как япробую это.Я получаю сообщение об ошибке:

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)

По сути, я намерен внедрить зависимости LoginService, а затем использовать метод spyOn в отдельных тестах для прерывания потока, как я считаю нужным.

Сдвиг в правильном направлении был бы оценен.Если решение задокументировано, пожалуйста, укажите ссылку.

При использовании TestBed сервисы обрабатываются иначе, чем Компоненты?Если честно, я не уверен, как интерпретировать ошибку, как почему у Службы есть такие аннотации?

РЕДАКТИРОВАТЬ после прочтения @ Dream88

Решение моей проблемы:

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();
  });
});

Короче говоря - я понятия не имел, что я печатал.После понимания базовой реализации это было прямо вперед.Спасибо за толчок.Пометка Dream88 правильная.

Я спросил себя, как работает код продукта.Как предоставляются услуги?Что разграничивает службу (@Injectable).Это намекает на то, что должно быть в импорте и поставщиках.

С уважением.

Answer 1

Это не будет работать так: fixture = TestBed.createComponent(LoginService); должен создать component, то есть что-то с аннотацией @component.С @service это не предназначено для отображения пользовательского интерфейса.Отсюда и ошибка.

Тестирование службы должно быть простым тестированием, не требующим TestBed.Вам нужно будет сделать это только тогда, когда вы хотите протестировать компонент, который использует указанную услугу, и в этом случае вам нужно будет добавить это в список провайдеров.

Для простого тестирования Сервисов посмотрите Angular Doc .