Jasmine 与 jQuery Mobile 的兼容性答案

【问题标题】：Jasmine compatibility with jQuery MobileJasmine 与 jQuery Mobile 的兼容性
【发布时间】：2012-03-20 09:52:16
【问题描述】：

我正在为我正在开发的jQuery mobile 应用程序实现一些Jasmine tests，我遇到了一个错误，我设法追踪到添加jQuery 移动库，该错误如下：

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 日更新：

门票在 github Jasmine 项目中：

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

【问题讨论】：

标签： javascript unit-testing jquery-mobile jasmine

【解决方案1】：

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

诀窍是您需要在 DOMready 上禁用 jquery 移动增强功能，因为它会尝试增强 jasmine runner 的 html。您可以使用插入到 html 运行器文件头部的这个脚本来做到这一点：

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

然后你需要在你的fixture插入的html上触发jquery mobile的增强（jasmine-jquery功能）：

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

【讨论】：

【解决方案2】：

尝试禁用自动初始化和哈希监听：

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

【讨论】：