正文 

当前位置： 首页 > 知识 >

AngularJS – 如何在 Jasmine 中为输入事件指令编写单元测试

     2023-02-22     134

关键词：

【中文标题】AngularJS – 如何在 Jasmine 中为输入事件指令编写单元测试【英文标题】：AngularJS – how to write unit-test in Jasmine for enter events directive 【发布时间】：2014-09-15 16:45:23 【问题描述】：

我在 AngularJS 中创建了 enter event 指令，所以我想为该指令运行测试用例。但我不知道如何为输入事件编写代码。

describe('Unit Test: Enter Event', function() 
var elm, compile, scope;    

beforeEach(function() 
    module('att.sandbox.attEnterEvent');
    inject(function($compile, $rootScope) 
        compile = $compile;
        scope = $rootScope.$new();
    );
);

/*scenarion 1*/
it("Enetr Key should call the method inside controller", function() 
    elm = angular.element('<input type="text" att-enter-event="enterEvent()">');
    elm = compile(elm)(scope);
    scope.$digest();
    scope.enterEvent = jasmine.createSpy();

     //**Here i want to add enter event test case** 

     expect().toHaveBeenCalled();
);
)

【问题讨论】：

你的意思是输入关键事件是吗？ 是的..我想为enter evet写测试用例 我真的不明白你的实际查询是什么 @Sprottenwels 我想为输入事件编写 jasmine 测试用例。 你在写单元测试还是e2e测试？ 【参考方案1】：

最重要的是：

创建事件对象 修改指令 编写测试

Create event 并在元素上触发它

var ev = jQuery.Event("keydown", 
   keyCode: 13
);

el.trigger(ev); // as el is reference to compiled directive


// ---IMPLEMETATION-----------------
angular.module('att.sandbox.attEnterEvent', [])
  .directive('hitEnterEvent', function() 
    return 
      restrict: 'A',
      scope: 
        hitEnterEvent: '&'
      ,
      link: function(scope, element, attrs) 
        element.bind("keydown keypress", function(event) 
          if (event.which === 13 || event.keyCode === 13) 
            scope.$apply(function() 
              scope.hitEnterEvent()
            );
            event.preventDefault();
          
        );
      
    ;
  )
  .controller('hitEntereventCtrl', function($scope) 
    $scope.showinputtext = false;
    $scope.enterEvent = function() 
      $scope.showinputtext = true;
    ;
  );

// ---SPECS-------------------------
describe('Unit Test: Enter Event', function() 
  var el, scope;

  beforeEach(function() 
    module('att.sandbox.attEnterEvent');
    inject(function($compile, $rootScope) 
      scope = $rootScope.$new();
      el = $compile(angular.element('<input type="text" hit-enter-event="enterEvent()">'))(scope);
    );
  );

  it("Enter key should call the method inside controller", function() 
    scope.enterEvent = jasmine.createSpy('enterEvent');

    var enterKey = jQuery.Event("keydown", 
      keyCode: 13
    );

    el.trigger(enterKey);

    expect(scope.enterEvent).toHaveBeenCalled();
  );
);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="//safjanowski.github.io/jasmine-jsfiddle-pack/pack/jasmine.css" rel="stylesheet" />
<script src="//safjanowski.github.io/jasmine-jsfiddle-pack/pack/jasmine-2.0.3-concated.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular-mocks.js"></script>

【讨论】：

在 AngularJS/Jasmine 中注入 Mock 服务

】在AngularJS/Jasmine中注入Mock服务【英文标题】：InjectingMockserviceinAngularJS/Jasmine【发布时间】：2013-08-3010:26:29【问题描述】：我正在使用jasmine来测试我用TypeScript编写的控制器。我的单元测试是用纯JavaScript编写的。我在测试控制器... 查看详情

如何在 Jasmine 测试中测试 $scope？

...间】：2016-09-1414:47:20【问题描述】：我尝试使用Jasmine为Angularjs编写单元测试。这是我的控制器：functionHomeController($scope,fav,news,materials)console.log(\'homecontroller\');$scope.test 查看详情

AngularJS – 如何在 Jasmine 中为输入事件指令编写单元测试

】AngularJS–如何在Jasmine中为输入事件指令编写单元测试【英文标题】：AngularJS–howtowriteunit-testinJasmineforentereventsdirective【发布时间】：2014-09-1516:45:23【问题描述】：我在AngularJS中创建了enterevent指令，所以我想为该指令运行测试... 查看详情

AngularJS 指令链接功能在 Jasmine 测试中不运行

】AngularJS指令链接功能在Jasmine测试中不运行【英文标题】：AngularJSdirectivelinkfunctiondoesnotruninJasminetest【发布时间】：2015-09-1123:32:13【问题描述】：在我的JSFiddle我有这个指令。(function()angular.module(\'myApp\',[]).directive(\'appFoo\',appFoo);f... 查看详情

使用 Jasmine 在 AngularJS 中测试去抖函数从不调用该函数

】使用Jasmine在AngularJS中测试去抖函数从不调用该函数【英文标题】：TestingadebouncedfunctioninAngularJSwithJasminenevercallsthefunction【发布时间】：2016-04-0219:03:53【问题描述】：我在使用下划线去抖动的服务中有一个方法。该方法内部是对... 查看详情

如何在 Visual Studio Code 中使用 Typescript 和 Jasmine 框架编写 Protractor 测试脚本？

...题描述】：我的项目正在从独立到Web，我们的新网站是在AngularJS 查看详情

使用 yeoman 的 ReSharper Jasmine AngularJS 单元测试

】使用yeoman的ReSharperJasmineAngularJS单元测试【英文标题】：ReSharperJasmineAngularJSunit-testusingyeoman【发布时间】：2014-01-1117:46:48【问题描述】：我正在尝试使用Resharper8.0.2让yeoman生成的单元测试在VisualStudio中运行。使用yeoman，如果你只... 查看详情

如何在 Rails 6 中配置 Jasmine？

】如何在Rails6中配置Jasmine？【英文标题】：HowtoconfigureJasmineinRails6?【发布时间】：2020-02-1903:48:50【问题描述】：如何在Rails6环境中配置Jasmine（Webpack替换了Javascript的资产管道），以便我可以测试为我的应用编写的Javascript模块？... 查看详情

Chutzpah - 使用 jasmine 和 TypeScript 进行 AngularJS 测试

】Chutzpah-使用jasmine和TypeScript进行AngularJS测试【英文标题】：Chutzpah-AngularJStestingwithjasmineandTypeScript【发布时间】：2016-05-2800:26:29【问题描述】：我在VisualStudio2015Update1的TypeScript中使用Angular1.4.9和Jasmine2.2.0和Chutzpah4.2.0以及我的Angul... 查看详情

基于karma和jasmine的angularjs单元测试

Angularjs基于karma和jasmine的单元测试目录：1.单元测试的配置2.实例文件目录解释3.测试controller  3.1 测试controller中变量值是否正确  3.2 模拟http请求返回值，测试$http服务相关4. 从文件中读取json，来模拟http... 查看详情

如何在 Jasmine 中模拟 rxjs webSocket？

】如何在Jasmine中模拟rxjswebSocket？【英文标题】：HowtomockrxjswebSocketinJasmine?【发布时间】：2021-08-2509:45:47【问题描述】：这是我的聊天服务：importwebSocket,WebSocketSubjectfrom\'rxjs/webSocket\';importdelayWhen,retryWhen,takefrom\'rxjs/operators\';impo 查看详情

如何使用 karma/jasmine 在 angularAMD 中模拟服务？

】如何使用karma/jasmine在angularAMD中模拟服务？【英文标题】：HowtomockserviceinangularAMDwithkarma/jasmine?【发布时间】：2014-12-1223:44:13【问题描述】：我有一个使用AngularAMD/RequireJS/Karma/Jasmine的项目，我的基本配置一切正常，大多数单元... 查看详情

AngularJS Jasmine 测试失败：无法实例化模块

】AngularJSJasmine测试失败：无法实例化模块【英文标题】：AngularJSJasmineTestFails:Failedtoinstantiatemodule【发布时间】：2014-03-0723:25:28【问题描述】：我的Angular应用运行良好，我的测试也运行良好，使用karma和jasmine，直到我在ui.bootstrap... 查看详情

如何在 jasmine 中编写单元测试用例？

】如何在jasmine中编写单元测试用例？【英文标题】：Howtowriteunittestcaseinjasmine?【发布时间】：2021-07-1110:27:36【问题描述】：Flag(a)letelement=this.selected.filter(item=>item.a===a)returnelement.length>1?true:false;不确定如何为上述函数编写单元... 查看详情

如何在 Angular 中使用 Jasmine 测试 RxJS switchMap？

】如何在Angular中使用Jasmine测试RxJSswitchMap？【英文标题】：HowtotestRxJSswitchMapwithJasmineinAngular?【发布时间】：2022-01-1611:45:10【问题描述】：在我的Angular项目中，我的一个组件中有这段代码：delete(post:PostInterface):voidconstdelete$=this.app... 查看详情

如何在 Jasmine-Rails 中使用 CoffeeScript 规范

】如何在Jasmine-Rails中使用CoffeeScript规范【英文标题】：HowtouseCoffeeScriptspecswithJasmine-Rails【发布时间】：2013-06-1422:34:48【问题描述】：我正在运行带有Ruby版本2.0.0-p195的Rails3.2.13。我正在使用启用资产管道的Jasmine-Railsgem版本0.4.5。... 查看详情

angularjs基于karma和jasmine的单元测试

目录：1.单元测试的配置2.实例文件目录解释3.测试controller  3.1 测试controller中变量值是否正确  3.2 模拟http请求返回值，测试$http服务相关4. 从文件中读取json，来模拟http请求返回数据5. 测试返回promise... 查看详情

如何在 Jasmine 中使用 React 测试工具

】如何在Jasmine中使用React测试工具【英文标题】：HowtouseReactTestUtilitieswithJasmine【发布时间】：2014-03-3012:53:09【问题描述】：我用React的测试工具编写了单元测试代码。但是遇到了问题我的环境是：导轨4茉莉花2.0.0主干1.1.2describe("... 查看详情