Angular 2+服务测试。在ng测试运行时，服务导入未定义。

Question

我是一个新手Angular，尝试测试一个Angular 6服务，该服务利用handlebars.js构建基于输入JSON /数据的客户端HTML模板。

该服务在开发中产生了期望的结果，但我无法构建一个测试以确认服务正确编译HTML。我将基本模板（作为JavaScript字符串）直接导入到服务中，但当我尝试在.spec文件中运行编译方法时，我收到错误：Error: You must pass a string or Handlebars AST to Handlebars.compile. You passed undefined，这意味着基本模板字符串变量未在.spec文件中的服务内实例化。 PdfReportService.service.ts文件

import { Injectable } from '@angular/core';
import * as Handlebars from 'handlebars/dist/handlebars.min.js';

// base template
import base_html from './root_template/html';
// form templates
import form_html from './form_template/form.html';
import form_css from './form_template/form.css';

@Injectable({
  providedIn: 'root'
})
export class PdfReportService {
  ...
  ...

  public compileform(json: object, context?: any) {
    Handlebars.registerPartial({ hbs_css_template: form_css });
    Handlebars.registerPartial({ hbs_form_body: form_html });
    return Handlebars.compile(base_html)({ json, context });
  }
}

PdfReportService.service.spec.ts 文件

import { TestBed, inject } from '@angular/core/testing';
import { PdfReportService } from './pdf-reports.service';
// import test data
import {
  formInputJson,
  formInputContext,
  formCompiledHTML
} from './pdf-reports.service.spec.data';

fdescribe('PdfReportService', () => {
  beforeEach(() => {
    TestBed.configureTestingModule({
      providers: [PdfReportService]
    });
  });

  it('should compile the correct html from form input data', inject(
    [PdfReportService],
    (service: PdfReportService) => {
      const result = service.compileform(formInputJson, formInputContext);
      expect(result).toEqual(formCompiledHTML);
    }
  ));
});

我尝试了更改服务和多种不同的传递变量的方法进行测试，但它们始终未定义。任何帮助将不胜感激！

- Andrew

Answer 1

典型的单元测试方法只是确保您的代码执行了它应该执行的操作，而不是测试从第三方库返回的数据。因此，我建议在测试过程中对Handlebars方法进行间谍监视，以便在测试服务调用这些方法的方式时，它们实际上不会被调用。

根据您上面写的内容，我设置了一个Stackblitz测试环境来尝试一些想法。它在这里：https://stackblitz.com/edit/stackoverflow-q-53075746?file=app%2Fpdf-reports.service.spec.ts。随意将其分叉到您自己的Stackblitz帐户中并进行测试 - 我没有任何数据可以放入各种测试文件中，并且不太了解如何正确导入Handlebars。尽管如此，我仍然能够获得您的服务的工作测试。

基本上，我在规范文件中导入了Handlebars，以便我可以对其方法进行间谍监视，然后将规范更改为以下内容：

it('should compile the correct html from form input data', inject(
  [PdfReportService],
  (service: PdfReportService) => {
    const returnFunc = jasmine.createSpy('returnFunc').and.returnValue(formCompiledHTML);
    const regPartialSpy = spyOn(Handlebars, 'registerPartial');
    const compileSpy = spyOn(Handlebars, 'compile').and.returnValue(returnFunc);
    const result = service.compileform(formInputJson, formInputContext);
    expect(regPartialSpy).toHaveBeenCalledTimes(2);
    expect(compileSpy).toHaveBeenCalledWith({/* base_html */});
    expect(returnFunc).toHaveBeenCalledWith({ json: jasmine.any(Function), context: jasmine.any(Function) });
    expect(result).toEqual(formCompiledHTML);
  }));
});

我希望这对你有所帮助。

- dmcgrandle