Schreiben eines Tests für eine Direktive, die ein vollständiges Neuladen der Seite in Karma durchführt
-
21-12-2019 - |
Frage
Ich möchte eine Direktive einem Unit-Test unterziehen, die einen Benutzer zur hinterlegten Social-Login-URL weiterleitet.
Da Karma das Neuladen ganzer Seiten nicht unterstützt, möchte ich das Verhalten des JavaScript-Objekts location.href ändern, um den Parameter, den es empfängt, an ein HTML-Element mit einer bestimmten ID auszugeben, und ich habe Schwierigkeiten, dies zu tun.
Direktive:
__app.directive('socialAuth', function(utils, authService, $location){
return{
restrict: 'A',
scope: false,
link: function(scope, elem, attrs){
elem.bind('click', function(){
utils.cleanSocialSearch();
if(attrs.checkbox == 'personal'){
scope.$apply(function(){
scope.model.personalShare[attrs.network] = true;
$location.search('personalShare', '1');
});
}
else if(attrs.checkbox == 'group'){
scope.$apply(function(){
var __index = attrs.checkbox + '_' + attrs.network;
scope.model.personalShare[__index] = true;
$location.search('groupShare', '1');
});
}
var callback = encodeURIComponent(window.location.href);
var loginUrl = utils.getBaseUrl() + '/social/login/' + attrs.network + '?success_url=' + callback;
location.href = loginUrl;
});
}
}
});
Testen Sie mit einem Versuch, das location.href-Objekt zu verspotten (ja, ich weiß, dass es keine Funktion ist):
var location = {//an attempt to mock the location href object
href: function(param){
$('#content').html(param);
}
};
'use strict';
describe('socail-auth', function(){//FB
var scope, compiled, linkFn, html, elem, elemPersonal, elemGroups, compile, authService;
html = "<span id='content' data-social-auth data-network='facebook'>";
beforeEach(function(){
module('myApp.directives');
module('myApp.services');
inject(function($compile, $rootScope){
scope = $rootScope.$new();
linkFn = $compile(angular.element(html));
elem = linkFn(scope);
scope.$digest();
elem.scope().$apply()
});
})
it("should redirect user to social login url at the backend", function(){
// console.log(location.href);
elem.click();
console.log($(elem).html());
expect($(elem).html()).toBeDefined();
});
});
Lösung 2
Die Lösung besteht darin, die Umleitung zur API in eine Dienstfunktion zu packen und sie innerhalb des Tests zu verspotten, um die Umleitungs-URL in einer Dienstvariablen zu speichern und sie dann über eine Getter-Methode dem Test zugänglich zu machen, anstatt dorthin umzuleiten.
Ein Mock kann aus dem Testkörper heraus erstellt werden:
module('myApp.services.mock', function($provide){
var __service = function(){
var __data;
return{
getFn: function(){
return __data;
},
setFn: function: function(data){
__data = data;
}
}
}
$provide.value('someService', __service);
});
Ich habe mich jedoch dafür entschieden, dieses Schein-Intro von seinem eigenen Modell zu trennen, um die Struktur und Modularität zu verbessern
'use strict';
angular.module('myApp.services.mock', ['urlConfig']).
factory('utils', function(API_URL, $location, $rootScope, $window){
var __redirectURL = $window.location.href;
var utilsMock = {
getBaseUrl: function(){
return API_URL;
},
getLocationHref: function(){
return __redirectURL;
},
setLocationHref: function(redirectURL){
$rootScope.$apply(function(){
__redirectURL = redirectURL;
});
},
cleanSocialSearch: function(){
$location.search('auth_success', null);
$location.search('auth_error', null);
$location.search('auth_media', null);
$location.search('personalShare', null);
$location.search('groupShare', null);
}
}
return utilsMock;
});
--
__app.directive('socialAuth', function(utils, $location){
return{
restrict: 'A',
scope: false,
link: function(scope, elem, attrs){
elem.bind('click', function(){
utils.cleanSocialSearch();
if(attrs.checkbox == 'personal'){
scope.$apply(function(){
scope.model.personalShare[attrs.network] = true;
$location.search('personalShare', '1');
});
}
else if(attrs.checkbox == 'group'){
scope.$apply(function(){
var __index = attrs.checkbox + '_' + attrs.network;
scope.model.personalShare[__index] = true;
$location.search('groupShare', '1');
});
}
var callback = encodeURIComponent(utils.getLocationHref());
var loginUrl = utils.getBaseUrl() + '/social/login/' + attrs.network + '?success_url=' + callback;
utils.setLocationHref(loginUrl);
});
}
}
});
Und zum Schluss der Test:
describe('socail-auth', function(){//FB
var scope, compiled, linkFn, utils, html, elem, elemPersonal, elemGroups, compile, authService, utilsMock, _window, BASE_URL, __network;
__network = 'facebook';
html = "<span data-social-auth data-network='" + __network + "'></span>";
beforeEach(function(){
module('urlConfig');
module('myApp.services.mock');
module('myApp.directives');
inject(function($compile, $rootScope, $injector){
scope = $rootScope.$new();
utils = $injector.get('utils');
_window = $injector.get('$window');
BASE_URL = $injector.get('API_URL');
linkFn = $compile(angular.element(html));
elem = linkFn(scope);
// scope.$digest();
elem.scope().$apply()
});
})
it("should redirect user to social login url at the backend", function(){
elem.click();
//scope.$digest();
var loginUrl = BASE_URL + '/social/login/' + __network + '?success_url=' + encodeURIComponent(_window.location.href);
expect(utils.getLocationHref()).toEqual(loginUrl);
});
});
Andere Tipps
Verwenden $window.location.href
anstatt location.href
.
Dann spotten $window.location
Mit einem leeren Objekt erledigt es die Aufgabe.
describe('location', function() {
var $window;
beforeEach( module('myApp') );
// You can copy/past this beforeEach
beforeEach( module( function($provide) {
$window = {
// now, $window.location.path will update that empty object
location: {},
// we keep the reference to window.document
document: window.document
};
// We register our new $window instead of the old
$provide.constant( '$window' , $window );
}))
// whatever you want to test
it('should be redirected', function() {
// action which reload the page
$scope.reloadPage();
// we can test if the new path is correct.
expect( $window.location.path ).toBe('/the-url-expected');
})
})