Come prendere in giro una richiesta AJAX?

Qual è il modo più semplice per modificare scenari.js per simulare una richiesta AJAX durante un test end-to-end?Come prendere in giro una richiesta AJAX?

<!doctype html> 
<html lang="en" ng-app="myApp"> 
<head> 
    <meta charset="utf-8"> 
    <title>My Test AngularJS App</title> 
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.2/angular.min.js"></script> 
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.2/angular-resource.min.js"></script> 

    <script language="javascript" type="text/javascript"> 
     angular.module('myApp', ['ngResource']); 
     function PlayerController($scope,$resource){ 
     $scope.player = $resource('player.json').get(); 
     } 
    </script> 

</head> 
    <body ng-controller="PlayerController"> 
    <p>Hello {{player.name}}</p> 
    </body> 
</html>

Il lettore viene prelevato correttamente da un file denominato player.json sul server e vengono eseguiti i seguenti passaggi di test. Come posso passare diversi json in questo test e impedire il recupero sul server?

/* 
How do I pass in 
player.json -> {"name":"Chris"} 
*/ 
describe('my app', function() { 

    beforeEach(function() { 
    browser().navigateTo('../../app/index.html'); 
    }); 

    it('should load player from player.json', function() { 
    expect(element('p:first').text()). 
     toMatch("Hello Chris"); 
    pause(); 
    }); 

});

fonte

2012-12-16 Chris

È necessario utilizzare $httpBackend from ngMockE2E module per simulare le richieste http. Dai un'occhiata ai documenti.

fonte

2012-12-17 13:38:02

Il mio punto è che non vedo l'esempio ngMockE2E nella documentazione. Sto cercando le poche righe di codice da aggiungere a scenarios.js. – Chris

Non dovresti aver bisogno di mod scenari.js se sto capendo correttamente la tua domanda. La risposta di Caio è il modo standard per gestire questa situazione –

Ok. Lasciami essere chiaro. Non capisco come fare ciò che Caio sta raccomandando. C'è un po 'di magia che viene assunta dalla documentazione come "Successivamente, avvia la tua app con questo nuovo modulo". Come si fa a farlo? – Chris

Come prima cosa, aggiungere angular-mocks.js e il file (app.js per esempio) in cui verrà creato il modulo nella pagina index.html che contiene la dichiarazione ng-app.

<html lang="en" ng-app="myApp"> 
    <head> 
    <script src="js/app.js"></script> 
    <script src="../test/lib/angular/angular-mocks.js"></script> 
    ...

Quindi nel file app.js definire il modulo e aggiungere le risposte di simulazione.

var myAppDev = angular.module('myApp', ['ngResource','ngMockE2E']); 

myAppDev.run(function($httpBackend) { 
    var user = {name: 'Sandra'}; 
    $httpBackend.whenGET('/api/user').respond(user); 
});

fonte

2012-12-24 04:32:06 Chris

sembra che attualmente non si può solo modificare scenarios.js per includere $ httpBackend beffardo. Dovrai aggiungere altro codice per supportarlo.

Per me il modo migliore sembra essere il seguente

Aggiungi un myAppTest.js nella cartella test che include 'ngMockE2E' in modo che non c'è bisogno di inquinare i vostri app.js esistenti

'use strict'; 

angular.module('myAppTest', ['myApp', 'ngMockE2E']) 
.run(function($httpBackend) { 
    var user = {name: 'Sandra'}; 
    $httpBackend.whenGET('/api/user').respond(user); 
});

Quindi aggiungere un test-index.html separato che utilizza il nuovo myAppTest.js. Nota che devi includere angular-mocks.js. (Questo lascia il file HTML di produzione intatto e privo di schernisce)

<!doctype html> 
<html lang="en" ng-app="myAppTest"> 
<head> 
    <script src="lib/angular/angular.js"></script> 
    <script src="lib/angular/angular-resource.js"></script> 
    <script src="../test/lib/angular/angular-mocks.js"></script> 
    <script src="js/app.js"></script> 
    <script src="js/controllers.js"></script> 
    <script src="../test/e2e/myAppTest.js"></script> 
</head> 
<body> 
    <div ng-view></div> 
</body> 
</html>

Poi, nel tuo scenarios.js basta fare riferimento il vostro nuovo test-index.html prima di eseguire le altre prove.

beforeEach(function() { 
    browser().navigateTo('../../app/test-index.html#/'); 
});

Ho adattato questo esempio da:

https://github.com/stephennancekivell/angular_e2e_http/tree/ngMockE2E

fonte

2013-07-31 11:41:10 EdL

con quale precisione testerai i percorsi nell'app originale? I percorsi sono configurati con il nome dell'app – wakandan

Come prendere in giro una richiesta AJAX?

risposta

Problemi correlati