AngularJS:使用 FabricJS/Canvas 进行测试

Question

如何在指令和服务中为 FabricJS 之类的东西编写测试？

示例应用:http://fabricjs.com/kitchensink/

我一直在努力，但如果没有非常糟糕的技巧，我不会取得太大进展。我想将此服务和指令集成到我的 https://github.com/clouddueling/angular-common 中 repo 以便其他人可以使用这个强大的库。

我的场景:

我正在尝试测试包含服务和指令的模块。这些将我的应用程序链接到 FabricJS。我在模拟包含 js 文件时创建的全局 fabric var 时遇到问题。我假设我会监视包含织物 Canvas 的 var。

我只需要确认我的服务与结构正确交互。不过，我在模拟/ stub 结构时遇到了麻烦。

赢得赏金:

• 我可以与 Karma 一起使用的测试示例。

Answer 1

这很困难，因为您没有提供要测试的代码。但是，为了可测试性，我会首先创建一个非常小的工厂来返回全局结构对象

app.factory('fabric', function($window) {
  return $window.fabric;
});

然后可以通过注入(inject)模拟 $window 并检查其 fabric 属性是否已返回来测试该工厂。

describe('Factory: fabric', function () {

  // load the service's module
  beforeEach(module('plunker'));

  var fabric;
  var fakeFabric;

  beforeEach(function() {
    fakeFabric = {};
  });

  beforeEach(module(function($provide) {
    $provide.value('$window', {
      fabric: fakeFabric
    });    
  }));

  beforeEach(inject(function (_fabric_) {
    fabric = _fabric_;
  }));

  it('should return $window.fabric', function () {
    expect(fabric).toBe(fakeFabric);
  });

});

下面是使用该工厂的示例服务。

app.service('MyFabricService', function(fabric) {

  this.newCanvas = function(element) {
    return new fabric.Canvas(element);
  }

  this.newRectangle = function(options) {
    return new fabric.Rect(options);
  }

  this.addToCanvas = function(canvas, obj) {
    return canvas.add(obj);
  }
});

然后您可以按如下方式测试这些方法。返回"new"对象的函数可以通过使用手动创建的 spy 创建模拟结构对象来测试，该 spy 将作为构造函数调用，然后使用 instanceof 和 toHaveBeenCalledWith 检查其构造方式:

// Create mock fabric object
beforeEach(function() {
  mockFabric = {
    Canvas: jasmine.createSpy()
  }
});

// Pass it to DI system
beforeEach(module(function($provide) {
  $provide.value('fabric', mockFabric);    
}));

// Fetch MyFabricService
beforeEach(inject(function (_MyFabricService_) {
  MyFabricService = _MyFabricService_;
}));

it('should return an instance of fabric.Canvas', function () {
  var newCanvas = MyFabricService.newCanvas();
  expect(newCanvas instanceof mockFabric.Canvas).toBe(true);
}); 

it('should pass the element to the constructor', function () {
  var element = {};
  var newCanvas = MyFabricService.newCanvas(element);
  expect(mockFabric.Canvas).toHaveBeenCalledWith(element);
}); 

可以通过使用“添加” spy 创建模拟 Canvas 对象来测试 addToCanvas 函数。

var canvas;

// Create mock canvas object
beforeEach(function() {
  canvas = {
    add: jasmine.createSpy()
  }
});

// Fetch MyFabricService
beforeEach(inject(function (_MyFabricService_) {
  MyFabricService = _MyFabricService_;
}));

it('should call canvas.add(obj)', function () {
  var obj = {};
  MyFabricService.addToCanvas(canvas, obj);
  expect(canvas.add).toHaveBeenCalledWith(obj);
}); 

这一切都可以在这个 Plunker http://plnkr.co/edit/CTlTmtTLYPwemZassYF0?p=preview 中看到。