Question

我正在为工作中的网站编写单元测试，我似乎无法弄清楚如何测试api调用。

假设我想在我的一个Vue组件中测试api调用

  api.ajax("users")
.done((response) => {
  stores.usersStore.init(response)
})

usersStore.js

 let usersStore = {

  store: {
    users: []
  },

  get() {
    return this.store
  },

  set(key, value) {
    if (key) {
      this.users[key] = value
    } else {
      console.error("Key required")
    }
  },

  init(initObject) {
    this.store.users = initObject
  }


}

export default usersStore;

所以api调用基本上只是初始化用户数组。我如何在茉莉花中测试这样的东西？我试过间谍，嘲笑。

非常感谢任何投入！

编辑 - ＆gt;我试图写的测试

  describe(" Tests", function() {

  var us;

    beforeEach(function() {

      us = new usersStore()
       us.store.users.push("Anand Dharne")
    });

    describe("when retrieved by name", function() {
      var u;

      beforeEach(function(done) {
        u = us.init(response, {
          success: function () {
            done();
          }
        });
      });

      it("api call", function() {
        expect(u.store.users).toEqual("Anand Dharne");
      });
    });
  });

Answer 1

您可以监视ajax对象。

由于我不完全熟悉vue.js，我想使用普通的javascript，jQuery和amp;来分享一个简单的实现。茉莉花。 See it in action

var usersStore = {
 store: {
    users: []
  },
  get: function() {
    return this.store;
  },
  set: function(key, value) {
    if (key) {
      this.store[key] = value;
    } else {
      console.error("Key required");
    }
  },
  init: function(initObject) {
    this.store.users = initObject;
  }
};

var api = {
  serviceCall: () => {
    $.ajax('').done((data) => {
      usersStore.init(data);
    });
  }
};

describe('test api call', () => {
  it('ajax success', () => {
    expect(true).toBe(true);
    var userObj = [{
      'name': 'StackOverflow'
    }];
    spyOn($, 'ajax').and.callFake((e) => {
      return $.Deferred().resolve(userObj).promise();
    });
    api.serviceCall();
    expect(usersStore.get().users[0].name).toEqual('StackOverflow');
  });
});

注意事项：

您的set方法中的代码this.users[key] = value可能无效，因为users无法直接使用，它是store
您需要使用自定义$ Deferred（）对象，该对象返回可以解析/拒绝的承诺
我没有使用箭头函数作为对象的方法，因为它们需要这个引用。有关arrow function here
另外，为了探索模拟ajax调用的其他选项，我建议你开始here

单位使用茉莉花测试api电话

1 个答案: