正文 

当前位置： 首页 > 源码 >

AngularJS：使用 FabricJS/Canvas 进行测试

     2023-03-25     175

关键词：

【中文标题】AngularJS：使用 FabricJS/Canvas 进行测试【英文标题】：AngularJS: Testing with FabricJS/Canvas 【发布时间】：2014-02-07 23:39:55 【问题描述】：

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

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

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

我的场景：

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

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

要赢得赏金：

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

【问题讨论】：

【参考方案1】：

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

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

然后可以通过注入一个模拟 $window 来测试这个工厂，并检查它的结构属性是否返回。

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

然后您可以按如下方式测试这些方法。返回“新”对象的函数可以通过使用手动创建的 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);
);

可以通过使用“添加”间谍创建模拟画布对象来测试 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 中看到

【讨论】：

这必须是一篇博文！我缺少的关键是您使用 $window 的第一个示例。永远不会想到这一点。【参考方案2】：

为什么要为外部依赖编写测试？

您首先假设 FabricJS 可以正常工作。测试它不是您的工作，即使是，您也必须进行字节流比较（这就是画布，将字节流解释为图像）。测试用户输入是完全不同的事情。查找 Selenium。

然后您为为 FabricJS 生成正确输入的代码编写测试。

【讨论】：

他可能想为特定于应用程序的功能编写测试，而不是视觉表示。在 Fabric 中，我们有单元测试和功能测试。但是对于使用 Fabric 的应用程序，您可以测试 Fabric 和用户操作之间的功能层（例如单击那个按钮？画布上应该有 1 个文本对象；不是视觉上的，而是通过 Fabric 的对象模型以编程方式进行的 - canvas.item(0).type === 'text'，等） 是的，我的术语不是一流的，但这就是我所说的“为 FabricJS 输入”的意思，即 API 边界。 您是否碰巧有一个示例来说明如何测试依赖于像fabric 这样的全局变量的服务？你如何嘲笑它，它看起来像什么？我只需要知道我的服务正在运行并正确调用 FabricJS 或其他任何内容。 请在 cmets 中继续讨论或修改您的提交以回答问题。

使用 angularjs 动态创建控件

】使用angularjs动态创建控件【英文标题】：Createthecontrolsdynamicallyusingangularjs【发布时间】：2014-08-1420:43:21【问题描述】：我是angularjs的新手，谁能帮我创建使用angularjs进行高级搜索的动态控件。喜欢单击此按钮后，我们有高级搜... 查看详情

关于angularjs的简单使用

前言angularjs无疑是一款实现前后端分离js库，利用mvc的思想进行，它的使用也是很简单的。下面我就简单的介绍一下平时我们用的最多的表格和导航。1、在页面的开始引用angularjs库。2、在一个页面中会有地方运用到angularjs，那... 查看详情

angularjs路由使用案例

AngularJS路由使用案例：1<!DOCTYPEhtml>2<html>3<head>4<metacharset="UTF-8">5<title>AngularJS路由使用案例</title>6<scripttype="text/javascript"src="../js/angular.min.js">< 查看详情

如何使用angularjs

   本期更新，博主将给大家分享一些AngularJs常用的一些属性和方法，AngularJS是由Google的员工MiškoHevery从2009年开始着手开发。这是一个非常好的构想，该项目目前已由Google正式支持，有一个全职的开发团队继续开... 查看详情

如何使用 Angularjs 添加图像

】如何使用Angularjs添加图像【英文标题】：HowtoaddanimageusingAngularjs【发布时间】：2020-12-2202:26:17【问题描述】：我开始使用Angularjs开发Web应用程序。我试图将图像添加到页面。图片不显示在页面上。imgsrc="src/assets/img/f1.png"我在中... 查看详情

使用 Express 为 AngularJS 渲染一个 .ejs 模板并使用 AngularJS $scope 中的数据

】使用Express为AngularJS渲染一个.ejs模板并使用AngularJS$scope中的数据【英文标题】：UsingExpresstorenderan.ejstemplateforAngularJSandusethedatainsideAngularJS$scope【发布时间】：2015-08-2622:58:48【问题描述】：我希望我可以用我在StackOverflow上发布的... 查看详情

angularjs学习使用分享

angularjs是一个为动态web应用设计的结构框架，它是为了克服html在构建应用上的不足而设计的。工作原理：1 加载html，然后解析成DOM；2 加载angular.js脚本；3 AngularJS等待DOMContentLoaded事件的触发；4 AngularJS寻找ng-app指... 查看详情

使用 webpack 导入 angularjs 模块

】使用webpack导入angularjs模块【英文标题】：Importangularjsmoduleswithwebpack【发布时间】：2018-03-1520:02:44【问题描述】：我们有一个用angularjs编写的相当大的项目，并且正在逐渐转向angular4。计划是首先将所有内容重写为typescript+angular... 查看详情

angularjs动画-nganimate--快速上手使用

AngularJS动画AngularJS提供了动画效果，可以配合CSS使用。AngularJS使用动画需要外部引入angular-animate.js库。1.把ngAnimate依赖注入写入当前的myApp模块中；<script>var app=angular.module(‘myApp‘,[‘ngAnimate‘]);</script>2.ngAnimate模型 查看详情

使用 Undertow 服务 AngularJS

】使用Undertow服务AngularJS【英文标题】：UseUndertowtoserveAngularJS【发布时间】：2014-09-0404:44:25【问题描述】：我想使用Undertow作为一个简单的Web服务器来为AngularJS应用程序提供服务。AngularJS应用程序所需的其余服务由ApacheCamel提供，... 查看详情

使用 AngularJS 进行服务器端渲染？

】使用AngularJS进行服务器端渲染？【英文标题】：Server-sideRenderingwithAngularJS?【发布时间】：2018-08-2509:32:59【问题描述】：是否可以我看过很多使用Angular2或更高版本的教程，但没有找到关于angularJS的资源。有可能吗？怎么走？【... 查看详情

使用 AngularJS 和 MeteorJS

】使用AngularJS和MeteorJS【英文标题】：UsingAngularJSwithMeteorJS【发布时间】：2012-10-2011:47:00【问题描述】：所以我对这两种技术都很陌生。我的计划是使用MeteorJS实现他们使用Backbone(https://github.com/philipkobernik/backbone-tunes)制作的Peepcode... 查看详情

如何在 AngularJS 中使用 HTTPS？

】如何在AngularJS中使用HTTPS？【英文标题】：HowcanIuseHTTPSinAngularJS?【发布时间】：2013-09-2106:46:20【问题描述】：我正在使用AngularJS、$resource和$http并使用apis，但是由于安全原因，我需要发出HTTPS请求（在HTTPS协议下工作）。在Angula... 查看详情

使用 AngularJS 进行快速会话

】使用AngularJS进行快速会话【英文标题】：ExpresssessionswithAngularJS【发布时间】：2013-08-1517:01:57【问题描述】：我正在尝试使用express和angularjs创建一个简单的登录。angularjs应用程序在单独的服务器（grunt服务器localhost:9000）上运行... 查看详情

如何使用 Angularjs 显示 Json？

】如何使用Angularjs显示Json？【英文标题】：HowtoshowJsonusingAngularjs?【发布时间】：2017-09-1612:41:44【问题描述】：我正在学习AngularJS并设置了项目的结构，但JSON无法在html中显示。我是Angularjs的新手。如何使用ng-repeat指令将JSON显示... 查看详情

如何使用angularjs对表单提交内容进行验证

AngularJS是一款优秀的前端JS框架，已经被用于Google的多款产品当中。它有着诸多特性，最为核心的是：MVC、模块化、自动化双向数据绑定、语义化标签、依赖注入等……使用它可以大大减少书写代码的工作量，但和Jquery不同，使... 查看详情

如何在骨干和angularjs中使用reactJS组件

】如何在骨干和angularjs中使用reactJS组件【英文标题】：howtousereactJScomponentinsidebackboneandangularjs【发布时间】：2016-08-0320:23:23【问题描述】：我有骨干应用程序和angularJS应用程序，同时，我正在使用reactJS创建组件库。现在的目标... 查看详情

AngularJS：为啥在说“服务”时使用“工厂”？

】AngularJS：为啥在说“服务”时使用“工厂”？【英文标题】：AngularJS:whyuse"factory"whenyousay"services"?AngularJS：为什么在说“服务”时使用“工厂”？【发布时间】：2014-08-0804:09:48【问题描述】：这可能是一个愚蠢的... 查看详情