Wie spottet man eine AJAX-Anfrage?

Was ist der einfachste Weg, um scenics.js zu modifizieren, um eine AJAX-Anfrage während eines End-to-End-Tests nachzuahmen?Wie spottet man eine AJAX-Anfrage?

<!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>

Spieler bekommen richtig geholt aus einer Datei mit dem Namen player.json auf dem Server und der folgende Test besteht. Wie übergebe ich verschiedene json in diesen Test und verhindere das Abrufen zurück zum 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(); 
    }); 

});

Quelle

2012-12-16 Chris

Sie sollten $httpBackend from ngMockE2E module verwenden, um HTTP-Anfragen nachzuahmen. Sehen Sie sich die Dokumentation an.

Quelle

2012-12-17 13:38:02

Mein Punkt ist, dass ich nicht das ngMockE2E Beispiel in der Dokumentation sehen. Ich suche nach den wenigen Codezeilen, die zu scenarias.js hinzugefügt werden müssen. – Chris

Sie sollten scenario.js nicht ändern müssen, wenn ich Ihre Frage richtig verstanden habe. Caio's Antwort ist die Standardmethode, um mit dieser Situation umzugehen. –

Ok. Lass mich deutlich sein. Ich verstehe nicht, was ich tun soll, was Caio empfiehlt. Es gibt einige magische Dinge, die von der Dokumentation übernommen werden, wie zum Beispiel "Danach die App mit diesem neuen Modul bootstrappen". Wie macht man das? – Chris

Als erstes fügen Sie angular-mocks.js und die Datei (app.js zum Beispiel) hinzu, wo Sie das Modul zu Ihrer index.html-Seite erstellen, die die ng-app-Deklaration enthält.

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

Dann in der Datei app.js das Modul definieren und die Scheinantworten hinzufügen.

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

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

Quelle

2012-12-24 04:32:06 Chris

Es scheint, dass derzeit nicht nur scenarios.js ändern $ httpBackend enthalten spöttisch. Sie müssen etwas anderen Code hinzufügen, um es zu unterstützen.

Für mich ist die beste Art und Weise scheint die folgenden

ein myAppTest.js in Ihrem Testordner hinzufügen zu sein, die ‚ngMockE2E‘ enthalten, so dass Sie benötigen, um Ihre bestehende app.js nicht verschmutzen

'use strict'; 

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

Fügen Sie dann eine separate test-index.html hinzu, die die neue myAppTest.js verwendet. Beachten Sie, dass Sie angular-mocks.js einschließen müssen. (Dies läßt Ihre Produktion HTML-Datei intakt und frei von Mocks)

<!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>

Dann in Ihrem scenarios.js nur Ihren neuen Test index.html verweisen, bevor die anderen Tests ausgeführt werden.

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

ich angepasst habe dieses Beispiel aus:

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

Quelle

2013-07-31 11:41:10 EdL

Wie genau werden Sie Routen in Ihrer ursprünglichen App testen? Die Routen werden mit dem App-Namen konfiguriert – wakandan

Antwort

Verwandte Themen