Skip to content

Technik Blog

Programmieren | Arduino | ESP32 | MicroPython | Python | Raspberry Pi | Raspberry Pi Pico

Menu
  • Smarthome
  • Arduino
  • ESP32 & Co.
  • Raspberry Pi & Pico
  • Solo Mining
  • Über mich
  • Deutsch
  • English
Menu

JavaScript asyncrone Testfälle mit Mockjax und Jasmine erstellen

Posted on 4. November 20152. Mai 2023 by Stefan Draeger

Sobald man sich im Internet befindet, wird man merken das die Testfälle etwas anders „gestrickt“ werden müssen, zbsp. wenn man auf die Antwort warten muss.
Das Testen von Asynchrone Funktionen möchte ich gerne in diesem Tutorial beschreiben.

  • Mocken von Ajax Request für Testzwecke
  • Jasmine Testprojekt
  • Aufbau eines Mock Objektes
  • Einbinden von Mockjax
  • Einen Callback simulieren
  • Besonderheit beim Attribut URL
  • Mögliche Rückgabewerte eines Mockobjektes
    • Datentyp Text
    • Datentyp JSON
    • Datentyp HTML
    • Datentyp XML
  • Erstellen eines asyncronen Testfalls mit Jasmine

Mocken von Ajax Request für Testzwecke

Durch die Same Origin Regel ist es nicht möglich vom lokalen Computer, Scripte aus dem Internet zu benutzen, jedoch möchten wir gerne unsere Methoden Testen, dafür gibt es die Möglichkeit Funktionen zu Mocken d.h. zu simulieren.

Für diesen Testfall benutze ich Mockjax welches einfach zu implementieren und noch einfacher zu benutzen ist.

Jasmine Testprojekt

Als Projekt verwende ich das Testprojekt aus dem Tutorial
Jasmine JavaScript Test, „toBe || not.toBe“ wieder.

Aufbau eines Mock Objektes

Ein einfaches Mock Objekt von Mockjax ist wie folgt aufgebaut:

AttributErläuterungWerte
urlDie Adresse welche simuliert werden soll, diese muss auf eine reale Datei/ Adresse zeigen.login.php
dataTypeDer Datentyp des Rückgabewertes bei Text kann dieses Attribut weggelassen werden‚json‘, ‚html‘, ‚xml‘
responseTimeAntwortzeit in Millisekunden1000
responseTextAntwort des MockObjektes‚Hello World‘
{say: ‚Hello World!‘}

Es gibt noch weitere Attribute welche auf der GitHub Seite vom Mockjax Plugin beschrieben werden.

Einbinden von Mockjax

Für das Mocken wir „nur“ die JavaScript Datei „jquery.mockjax.min.js“ mit

<script src="../js/jquery.mockjax.min.js"></script>

in die Datei „SpecRunner.html“ eingebunden. Es ist darauf zu achten das dieses nach dem Einbinden von jQuery geschieht.

Einen Callback simulieren

Um einen einfachen Callback zu simulieren, kann man folgenden Code verwenden.

$.mockjax({
   url: "login.php",
   responseTime: 1000,
   responseText: 'Test Result'
});

Wenn man nun ein Ajax Request auf die Adresse „login.php“ erstellt wird unser Mockobjekt ausgeführt.

var callAsyncFuntionExtern = function(){
   $.mockjax({
	url: "hello.php",
	responseTime: 1000,
	responseText: 'Hello World!'
   });
	
   $.ajax({
	url: "hello.php",
	async: true
   }).done(function (response) {
	console.log(response);
	$.mockjaxClear();
   });
}

Wenn man diese Funktion aus einer HTML Seite aufruft, dann erhält man folgende Ausgabe auf der Konsole.

FireBug Konsolenausgabe
FireBug Konsolenausgabe

Als ersten Eintrag sieht man das gemockte Objekt mit seinen Attributen und nach kurzer Zeit (1sek.) erscheint der Wert „Hello World!“.

Besonderheit beim Attribut URL

Das Attribut ‚URL‘ sollte unique d.h. einzigartig sein, denn wenn man 2x das gleiche Mockobjekt jedoch mit unterschiedlichen Datentypen oder Rückgabe werte erstellt so wird immer das erste erstellte Objekt gefunden und benutzt.

Hier ein Beispiel:

var callFuntion1Extern = function(){
   $.mockjax({
	url: 'greeting.php',
	dataType: 'text',
	responseTime: 1000,
	responseText: 'Hello World!'
   });
}

var callFuntion2Extern = function(){
   $.mockjax({
	url: 'greeting.php',
	dataType: 'json',
	responseTime: 1000,
	responseText: {
			say: 'json -> Hello World!'
	}
   });
}

function SimpleMockSample(){
   this.callFuntion1 = callFuntion1Extern;
   this.callFuntion2 = callFuntion2Extern;
}

var simpleMockSample = new SimpleMockSample();
simpleMockSample.callFuntion1();
simpleMockSample.callFuntion2();
		
$.ajax({
	url: 'greeting.php',
	dataType: 'json',
	async: true
	}).done(function (json) {
		console.log(json.say);
	}).fail(function (json) {
		console.log("Fehler!");
	});

Durch dieses Beispiel wird deutlich warum das URL-Attribut unique sein muss, denn woher soll der Ajax aufruf wissen welches Objekt jetzt aufgerufen werden soll?

Mögliche Rückgabewerte eines Mockobjektes

Es ist nicht nur möglich einfache Werte wie „Hello World!“ zurückzugeben sondern auch komplexe Objekte wie ein JSON, HTML oder XML Objekt.
Für das Mocken von XML Objekten wird ein das XML DOM Plugin benötigt.

Datentyp Text

Der einfachste Datentyp ist Text.

$.mockjax({
   url: 'greeting.php',
   dataType: 'text',
   responseTime: 1000,
   responseText: 'Hello World!'
});

Datentyp JSON

Ein JSON Objekt, ist ein Objekt mit Key Value paaren. Ein Mockobjekt mit einem Rückgabewert für ein JSON  Objekt könnte etwa so aussehen:

$.mockjax({
   url: 'greeting.php',
   dataType: 'json',
   responseTime: 1000,
   responseText: { say: 'json -> Hello World!'}
});

Datentyp HTML

Der Datentyp HTML kann eine komplexte oder einfache HTML Struktur zurückliefern.

$.mockjax({
  url: "greeting.php",
  dataType: "html",
  responseText: "<div>Hello World!</div>"
});

Datentyp XML

Ähnlich wie beim HTML kann auch XML eine Struktur zurückliefern jedoch wird für diesen Datentyp ein extra Plugin benötigt.

$.mockjax({
  url: "greeting.php",
  dataType: "xml",
  responseXML: "<document><say>Hello World!</say></document>"
});

Erstellen eines asyncronen Testfalls mit Jasmine

Da wir jetzt mit Mockjax uns Objekte mocken (simulieren) können, wollen wir nun ein asyncronen Testfall erstellen.

describe("async test", function () {
   var simpleAsyncObject;
   
   beforeEach(function (done) {
	loadFixtures('ajaxfixture.html');
	$.mockjax({
	   url : 'login.php',
           responseTime : 1000,
	   responseText : 'Hello World!'
	});
		
	var simpleAsyncObject = new SimpleAsyncObject();
	simpleAsyncObject.callAsyncFunction($('#output'));
    	setTimeout(function () {
		done();
	}, 2000);	
   });
	
   it("test async call", function () {
	var outputText = $('#output').text();
        expect(outputText).not.toBe('');
   });

});

Zuallererst müssen wir mit der Funktion „beforeEach“ unsere asyncrone Funktion aufrufen. Nachdem aufrufen der Funktion wird ein Timeout („setTimeout“) gesetzt, in diesem Beispiel sind es 2 Sekunden. Ist der Timeout erfolgt, so wird die Funktion „done();“ aufgerufen, somit ist der Timeout erfolgreich abgehandelt und es wird der eigentliche Testfall aufgerufen in welchem wir auf das erwartete Ergebnis prüfen.

Schreibe einen Kommentar Antworten abbrechen

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert

Fragen oder Feedback?

Du hast eine Idee, brauchst Hilfe oder möchtest Feedback loswerden?
Support-Ticket erstellen

Newsletter abonnieren

Bleib auf dem Laufenden: Erhalte regelmäßig Updates zu neuen Projekten, Tutorials und Tipps rund um Arduino, ESP32 und mehr – direkt in dein Postfach.

Jetzt Newsletter abonnieren

Unterstütze meinen Blog

Wenn dir meine Inhalte gefallen, freue ich mich über deine Unterstützung auf Tipeee.
So hilfst du mit, den Blog am Leben zu halten und neue Beiträge zu ermöglichen.

draeger-it.blog auf Tipeee unterstützen

Vielen Dank für deinen Support!
– Stefan Draeger

Kategorien

Tools

  • Unix-Zeitstempel-Rechner
  • ASCII Tabelle
  • Spannung, Strom, Widerstand und Leistung berechnen
  • Widerstandsrechner
  • 8×8 LED Matrix Tool
  • 8×16 LED Matrix Modul von Keyestudio
  • 16×16 LED Matrix – Generator

Links

Blogverzeichnis Bloggerei.de TopBlogs.de das Original - Blogverzeichnis | Blog Top Liste Blogverzeichnis trusted-blogs.com

Stefan Draeger
Königsberger Str. 13
38364 Schöningen

Tel.: 01778501273
E-Mail: info@draeger-it.blog

Folge mir auf

  • Impressum
  • Datenschutzerklärung
  • Disclaimer
  • Cookie-Richtlinie (EU)
©2025 Technik Blog | Built using WordPress and Responsive Blogily theme by Superb
Cookie-Zustimmung verwalten
Wir verwenden Technologien wie Cookies, um Geräteinformationen zu speichern und/oder darauf zuzugreifen. Wir tun dies, um das Surferlebnis zu verbessern und um personalisierte Werbung anzuzeigen. Wenn Sie diesen Technologien zustimmen, können wir Daten wie das Surfverhalten oder eindeutige IDs auf dieser Website verarbeiten. Wenn Sie Ihre Zustimmung nicht erteilen oder zurückziehen, können bestimmte Funktionen beeinträchtigt werden.
Funktional Immer aktiv
Die technische Speicherung oder der Zugang ist unbedingt erforderlich für den rechtmäßigen Zweck, die Nutzung eines bestimmten Dienstes zu ermöglichen, der vom Teilnehmer oder Nutzer ausdrücklich gewünscht wird, oder für den alleinigen Zweck, die Übertragung einer Nachricht über ein elektronisches Kommunikationsnetz durchzuführen.
Vorlieben
Die technische Speicherung oder der Zugriff ist für den rechtmäßigen Zweck der Speicherung von Präferenzen erforderlich, die nicht vom Abonnenten oder Benutzer angefordert wurden.
Statistiken
Die technische Speicherung oder der Zugriff, der ausschließlich zu statistischen Zwecken erfolgt. Die technische Speicherung oder der Zugriff, der ausschließlich zu anonymen statistischen Zwecken verwendet wird. Ohne eine Vorladung, die freiwillige Zustimmung deines Internetdienstanbieters oder zusätzliche Aufzeichnungen von Dritten können die zu diesem Zweck gespeicherten oder abgerufenen Informationen allein in der Regel nicht dazu verwendet werden, dich zu identifizieren.
Marketing
Die technische Speicherung oder der Zugriff ist erforderlich, um Nutzerprofile zu erstellen, um Werbung zu versenden oder um den Nutzer auf einer Website oder über mehrere Websites hinweg zu ähnlichen Marketingzwecken zu verfolgen.
Optionen verwalten Dienste verwalten Verwalten von {vendor_count}-Lieferanten Lese mehr über diese Zwecke
Einstellungen anzeigen
{title} {title} {title}