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

我尝试过更改服务以及通过测试传递var的多种不同方法，但是它们始终保持未定义状态。任何帮助将不胜感激！

Answer 1

单元测试中使用的典型方法仅是确保您的代码正在执行应做的事情，而不是测试从第三方库返回的数据。因此，我建议您监视一下Handlebar的方法，以便在测试过程中不实际调用它们，但是您可以测试服务如何尝试调用它们。

基于您在上面的内容，我建立了一个stackblitz测试环境来尝试一些想法。在这里：https://stackblitz.com/edit/stackoverflow-q-53075746?file=app%2Fpdf-reports.service.spec.ts。随意将其存储到您自己的stackblitz帐户中并进行处理-我没有任何数据可放入各种测试文件中，并且也不了解足够正确地将其导入的把手。不过，我仍然能够对您的服务进行有效测试。

基本上，我在spec文件中执行的操作是import Handlebars，这样我可以监视其方法，然后将spec更改为以下内容：

class Reservation extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      inputs: Array(10).fill("-"),
    };

    this.handleInputChange = this.handleInputChange.bind(this);
  }

  handleInputChange(event) {
    const inputs = this.state.inputs.slice();

    const target = event.target;
    inputs[parseInt(target.name)] = target.value;
    this.setState({inputs: inputs});
  }

  render() {
    var labels = [...Array(10).keys()].map((i) => {
      const iAsString = i.toString();
      return <div><label>
          <input
            name={iAsString}
            value={this.state.inputs[i]}
            onChange={this.handleInputChange} />
        </label></div>
      ;
    });

    return (
      <form>
        {labels}
        <p>{this.state.inputs.join(' | ')}</p> 
      </form>
    );
  }
}

我希望这会有所帮助。

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

1 个答案: