ember.js: Test d'acceptation avec une requête ajax

Question

J'écris un test d'acceptation dans lequel un utilisateur remplit un formulaire et une requête ajax est envoyée à une ressource tierce. Je me moque de la demande avec Ember CLI Mirage. J'écris un exemple de travail de base que je refactoriserai après que mes tests soient réussis. Je sais que je dois faire abstraction de ma demande dans un service ou un utilitaire, mais je n'aime pas refactoriser mon code sans un test de fonctionnement.

Mon code semble fonctionner cependant, quand je retourne un résultat qui change du contenu dans le modèle, je n'arrive pas à passer le test.

Il peut être important de noter: L'API tierce que je suis en train de mocker n'est pas reposante.

Voici le config mirage:

export default function() { 
    this.post('/LogonAction',() => { 
    return {foo: 'bar'}; 
    }); 
} 

J'ai mis pas encore l'URL canonique du service Web. Ce devrait être un service externe.

Et mon composant:

import Ember from 'ember'; 

export default Ember.Component.extend({ 
    result: null, 
    errors: null, 
    usernameTextChanged: function() { this.reset(); }.observes('username'), 
    passwordTextChanged: function() { this.reset(); }.observes('password'), 
    reset() { 
    this.set('errors', null); 
    this.set('result', null); 
    }, 
    actions: { 
    sync() { 
     this.reset(); 

     // TODO abstract out validation and add more use cases 
     if(this.get('username') === undefined || this.get('password') === undefined) { 
     this.set('errors', 'Please fill out the form'); 
     } 
     else { 
     let params = { userId: this.get('username'), passwd: this.get('password') } 

     this.set('test', 'foos'); //just checking... 

     // TODO abstract out into a utility and move config values into config 
     Ember.$.post('/LogonAction', params).then((r) => { 
      // When I run tests, this renders to console. 
      console.log('promise happened 1', r, this.get('result')); 
      // Fails here. I don't know why. 
      this.set('result', true); 
      // This does not execute 
      console.log('promise happened 2', this.get('result')); 
     }); 
     } 
    } 
    } 
}); 

Vous verrez que la sortie I à la console deux fois pour que je puisse le déboguer. Je ne suis pas sûr que ce soit la bonne façon de déboguer pendant que j'écris des tests.

Ceci est mon modèle:

<form id="logon" {{action 'sync' on='submit'}}> 
    {{input value=username type="text" class="username" placeholder="Your username"}} 
    {{input value=password type="password" class="password"}} 
    <button>Click me</button> 

    [[{{test}}]] <!-- this is just debugging --> 

    {{#if result}} 
    <div id="result">Sync complete</div> 
    {{/if}} 
    {{#if errors}} 
    <div id="result">{{errors}}</div> 
    {{/if}} 
</form> 

Et enfin, mon test:

test('logging in', assert => { 
    server.createList('LogonAction', 0); 
    visit('/'); 

    console.log(0); 

    fillIn('input.username', 'foo'); 
    fillIn('input.password', 'bar'); 
    click('button'); 

    console.log(1); 

    andThen(() => { 
    // The above console logs have happened. 
    // It does not have the div#result tag in it! 
    console.log(find('#logon').html()); 
    assert.equal(find('#result').text(), 'Sync complete'); // fails. 
    }); 
}); 

La journalisation console (je crois) me dit que la promesse est résolu avant que j'affirme que la page montre le résultat à l'utilisateur. Mais je ne peux pas faire passer ça! Dès que je définis la valeur de result, il échoue.

Toute aide, très appréciée.

Answer 1

Je suppose que cela peut être lié au fait que la boucle d'exécution est désactivée en mode de test. Néanmoins; Je me serais attendu à ce que vous obteniez l'erreur suivante "Échec de l'assertion: Vous avez activé le mode de test, qui a désactivé l'exécution automatique de la boucle d'exécution Vous devez envelopper tout code avec des effets secondaires asynchrones" mais vous dites qu'il échoue silencieusement. Pouvez-vous donner un essai à ce qui suit: Il suffit de terminer le code this.set('result', true); dans un Ember.run comme suit:

Ember.run(()=>{ 
     this.set('result', true); 
    }); 

Je n'ai pas le temps de mettre en place un tripoter pour donner un essai aux extraits de code; vous avez fourni. Désolé; Je voudrais aider plus si vous configurez une twiddle et donner des commentaires sur le résultat de ma réponse. Bonne chance!