Unité testant un appel API à l'aide de jasmin

Question

J'écris des tests unitaires pour mon site Web au travail et je n'arrive pas à comprendre comment tester un appel api.

Disons que je veux tester un appel api dans un de mes composants Vue

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; 

Ainsi, l'appel api initialise fondamentalement juste le tableau des utilisateurs. Comment puis-je tester quelque chose comme ça dans le jasmin? J'ai essayé des espions, et je me moquais.

Toutes les entrées seraient grandement appréciées!

Edition -> Le test je tente d'écrire

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

• Vous peut espionner l'objet ajax.

• Puisque je ne suis pas complètement familier avec vue.js je voudrais partager une implémentation simple en utilisant javascript simple, jQuery & jasmine. 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'); 
      }); 
  }); 
  

Points à noter:

• Le code this.users[key] = value de votre méthode de jeu ne peut être valide que users n'est pas directement, est un sous-objet de store
• Vous besoin d'utiliser un objet $ Deferred() personnalisé qui renvoie une promesse qui pourrait être résolue/rejetée
• e n'utilise pas de fonctions flèches pour les méthodes d'objet car elles ont besoin d'une telle référence. En savoir plus sur arrow function here
• également explorer d'autres options de moqueur appels ajax, je vous suggère de commencer here