Jasmine与jQuery Mobile的兼容性

时间:2012-03-20 09:52:17

标签: javascript unit-testing jquery-mobile jasmine

我正在为我正在处理的Jasmine tests应用程序实现一些jQuery mobile,我遇到了一个错误,我设法追查到添加jQuery mobile库,错误如下:

Jasmine.js:1769 TypeError: Cannot read property 'abort' of undefined.

一旦删除jQM依赖项,错误就会消失。

这是我的代码:

<!DOCTYPE html>
<html>
<head>
    <title>HTML5/Common/Tests</title>
    <!-- LOAD STYLES FIRST -->
    <link type="text/css" rel="stylesheet" href="libs/jasmine.css" media="screen">
    <link type="text/css" rel="stylesheet" href="../../Common/libs/jquery.mobile-1.0.1.css" />
    <!-- LOAD JASMINE LIBRARIES -->
    <script type="text/javascript" src="libs/jasmine.js"></script>
    <script type="text/javascript" src="libs/jasmine-html.js"></script>
    <!-- LOAD DEPENDENCIES -->
    <script type="text/javascript" src="../../Common/libs/jquery-1.7.1.min.js"></script>
    <script type="text/javascript" src="../../Common/libs/jquery.mobile-1.0.1.min.js"></script>
    <!-- LOAD CODE TO TEST -->
    <script type="text/javascript" src="../../Common/libs/myLib.js"></script>
    <!-- LOAD ACTUAL TESTS -->
    <script type="text/javascript">
       describe("Suite 1", function() {
            it("Should be that 1 equals 0", function() {
                  expect(0).toEqual(1);
            });
       });
    </script>
</head>
<body>
    <script type="text/javascript">
     jasmine.getEnv().addReporter(new jasmine.TrivialReporter());
     jasmine.getEnv().execute();
    </script>
</body>
</html>

我更喜欢将Jasmine用于此应用程序而不是qUnit,因为我认为它更灵活,更容易在CI中实现并向BA和PM解释..但是在为一对夫妇修补这个问题之后谷歌的小时和一些徒劳的搜索我仍然无法解决它所以我开始考虑继续前进。

在我这样做之前,有没有人遇到过同样的问题,并为此找到了解决方案?

谢谢和问候。

3月20日更新:

Ticket在github Jasmine项目中:

https://github.com/pivotal/jasmine/issues/204

2 个答案:

答案 0 :(得分:9)

我能够使用jasmine-jquery对jquery移动脚本进行茉莉花测试。

诀窍是你需要在DOMready上禁用jquery移动增强功能,因为它会尝试增强jasmine runner的html。 您可以使用插入html runner文件头部的脚本来执行此操作:

<script type="text/javascript">
  $(document).bind("mobileinit", function(){
    $.mobile.autoInitializePage = false;
  });
</script>

然后你需要在从你的灯具插入的html(jasmine-jquery functionnality)上触发jquery mobile的增强:

describe('my test', function(){
  beforeEach(function() {
    loadFixtures("fixtures/MYFixture.html");
    $("#jasmine-fixtures").attr("data-role","page").trigger("create");
  }
  it( ...
});

答案 1 :(得分:1)

尝试禁用自动初始化和哈希侦听:

<script type="text/javascript">
  $(document).bind("mobileinit", function(){
    $.mobile.autoInitializePage = false;
    $.mobile.hashListeningEnabled = false;
  });
</script>

然后将jqm页面添加到jasmine-jquery fixture,并初始化页面:

beforeEach(function() {
  jasmine.getFixtures().set('<div data-role="page"></div>');
  $.mobile.initializePage();
});