如何模拟聚合物核心Ajax，以进行单元测试 [英] How do I mock polymer core ajax, for unit testing

问题描述

我正在为我的新聚合物项目建造脚手架，并正在考虑进行单元测试.我想我将使用业力/茉莉花组合. http://japhr.blogspot.co.uk/2014/03/polymer-page-objects-and-jasmine-20.html 我已经足够理解，可以让我入门，但是我必须要解决和避开的关键问题没有找到任何标准的方法来做到这一点，我该如何模拟ajax调用.

I am building the scaffolding for my new polymer project, and am considering unit tests. I think I will be using the karma/jasmine combination. There is an interesting post at http://japhr.blogspot.co.uk/2014/03/polymer-page-objects-and-jasmine-20.html which I understand enough to get me started, but the key question I will have to address and haven't found any standard way to do it is how do I mock the ajax calls.

当我在JQuery Mobile项目上独立使用jasmine时，我能够直接使用Jasmine SpyOn功能来模拟JQuery.ajax调用.聚合物有类似的东西吗?

When I was using jasmine, standalone, on a JQuery Mobile project, I was able to directly use the Jasmine SpyOn ability to mock the JQuery.ajax call. Is there something similar for Polymer?

我遇到了元素<polymer-mock-data>，但是没有真正的文档，因此我无法弄清楚它们是否有帮助

I came across an element <polymer-mock-data> but there is no real documentation for it, so I couldn't figure out if they might help

推荐答案

事实证明，Jasmine2.0具有一个Jasmine-ajax插件，可以模拟全局XMLHttpRequest. core-ajax可以在后台使用它，因此我可以直接拨打电话.

It turns out that Jasmine2.0 has an Jasmine-ajax plugin that will mock the global XMLHttpRequest. core-ajax uses this under the hood, so I can directly get at the call.

效果很好，在顶部的beforeEach函数中调用了jasmine.Ajax.install套件，在afterEach函数中调用了jasmine.Ajax.uninstall，它会自动替换XMLHttpRequest.

It works well, in a beforeEach function at the top the suite you call jasmine.Ajax.install and in the afterEach function you call jasmine.Ajax.uninstall, and it automatically replaces the XMLHttpRequest.

计时也是至关重要的，因为您需要确保在被测元素使用Ajax调用之前就已经对其进行了模拟.我实现了使用单独的函数专门加载包含被测元素的夹具的功能，该夹具在调用jasmine.Ajax.install之后被调用.因此，我使用了特殊的设置脚本

Timing is also crucial, in that you need to ensure you have mocked the Ajax call before the element under test uses it. I achieve that using a separate function to specifically load the fixture which contains the element under test, which is called after jasmine.Ajax.install has been called. I use a special setup script thus

(function(){
  var PolymerTests = {};
  //I am not sure if we can just do this once, or for every test.  I am hoping just once
  var script = document.createElement("script");
  script.src = "/base/components/platform/platform.js";
  document.getElementsByTagName("head")[0].appendChild(script);

  var POLYMER_READY = false;
  var container;  //Used to hold fixture
  PolymerTests.loadFixture = function(fixture,done) {
    window.addEventListener('polymer-ready', function(){
      POLYMER_READY = true;
     done();
    });
    container = document.createElement("div");
    container.innerHTML = window.__html__[fixture];
    document.body.appendChild(container);
    if (POLYMER_READY) done();
  };
  //After every test, we remove the fixture
  afterEach(function(){
    document.body.removeChild(container);
  });

  window.PolymerTests = PolymerTests;

})();

这里唯一需要注意的是，夹具文件已由karma html2js预处理程序加载，然后将其加载到window.__html__数组中，在这里我们使用代码将其添加到测试上下文中

The only point to note here is that the fixture files have been loaded by the karma html2js pre-processor, which loads them into the window.__html__ array, from where we use the code to add to the test context

我的测试套件就是这样

describe('<smf-auth>',function(){
  beforeEach(function(done){
    jasmine.Ajax.install();
    PolymerTests.loadFixture('client/smf-auth/smf-auth-fixture.html',done);
  });
  afterEach(function(){
    jasmine.Ajax.uninstall();
  });
  describe("The element authenticates",function(){
    it("Should Make an Ajax Request to the url given in the login Attribute",function(){
      var req = jasmine.Ajax.requests;
      expect(req.mostRecent().url).toBe('/football/auth_json.php'); //Url declared in our fixture
    });

  })
});

这篇关于如何模拟聚合物核心Ajax，以进行单元测试的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！