Simulation von Benutzereingaben für TDD JavaScript

Question

Ich finde es immer schwieriger, tatsächliche Benutzerereignisse mit jQuery oder nativen Element-Trigger-Funktionen zu simulieren. Wenn Sie zum Beispiel eine Texteingabe haben und nicht wollen, dass der Benutzer ein Zeichen hinzufügen kann, können Sie e.preventDefault() mit dem jQuery-normalisierten Ereignisobjekt auf der keydown Veranstaltung. Es gibt jedoch keine Möglichkeit, dieses Testszenario programmatisch zu überprüfen.

Der folgende Test wird auch ohne den Aufruf von preventDefault weil der jQuery Keydown-Trigger kein "echtes" Ereignis ist.

input.val('test').trigger(jQuery.Event({
    which: 68
});
expect(input).toHaveValue('test');

Ohne den korrekten Code sollte dieser Test fehlschlagen, da die Eingabe den Wert "testd" haben sollte (68 ist der Zeichencode für "d").

Kennt jemand Methoden oder Bibliotheken zur Simulation von real Browser UI-Ereignisse?

Answer 1

Die Simulation eines realen Ereignisses ist ziemlich kompliziert. Sie müssen zuerst bestimmen, welche Art von Ereignis Sie benötigen und es mit document.createEvent . Dann rufen Sie verschiedene init*Event um das Ereignisobjekt zu initialisieren. Verwenden Sie schließlich element.dispatchEvent um das Ereignis an das Zielobjekt zu senden.

Answer 2

Wahrscheinlich sollten Sie es mit Selenium versuchen: http://seleniumhq.org/

Hier finden Sie einen guten Überblick: http://blog.frontendforce.com/2010/05/unit-testing-in-javascript-selenium/

Answer 3

Ich glaube, YUI hatte einen Code, der dies ermöglichte. Laden Sie den Code herunter und sehen Sie ihn sich an. Ich glaube, er heißt simulate.js oder etwas Ähnliches. Alternativ können Sie sich auch ansehen, wie Selen es macht.

Answer 4

Hier ist ein Repo, das recht gut auf dem Laufenden gehalten zu werden scheint: https://github.com/mmonteleone/jquery.autotype