web-dev-qa-db-fra.com

comment tester de manière unitaire la manipulation DOM (avec du jasmin)

J'ai besoin de tester unitairement certaines fonctions de manipulation DOM avec du jasmin (actuellement je lance mes tests dans le navigateur et avec Karma)

Je me demandais quelle serait la meilleure approche pour ce faire?

Par exemple, je peux me moquer et écraser les objets window et document et espionner quelques-unes de leurs fonctions. Mais cela ne ressemble pas vraiment à une solution facile, c'est pourquoi je pose cette question!

Ou existe-t-il une meilleure façon (de ne pas utiliser de jasmin peut-être) de le faire?

Merci beaucoup

unit-testingjasminedom-manipulation
37
Jeanluca Scaljeri

J'ai utilisé un ajout utile au jasmin appelé jasmine-jquery disponible sur github.

Il vous donne accès à un certain nombre de fonctions de correspondance supplémentaires utiles, pour affirmer les objets jquery et leurs propriétés.

En particulier, les fonctionnalités que j'ai trouvées utiles jusqu'à présent sont l'affirmation des attributs des éléments dom et l'espionnage d'événements tels que les clics et les soumissions ...

Voici un exemple quelque peu artificiel ... :)

describe("An interactive page", function() {
    it("'s text area should not contain any text before pressing the button", function() {
        expect(Page.textArea).toBeEmpty();
    });

    it("should contain a text area div", function() {
        expect(Page.textArea).toBe('div#textArea');
    });

    it("should append a div containing a random string to the text area when clicking the button", function() {
        var clickEvent = spyOnEvent('#addTextButton', 'click');
        $('button#addTextButton').click();

        expect('click').toHaveBeenTriggeredOn('#addTextButton');
        expect(clickEvent).toHaveBeenTriggered();

        expect($('div.addedText:last')).not.toBeEmpty());
    });
});

et voici le code:

var Page = {
    title : 'a title',
    description : 'Some kind of description description',
    textArea : $('div#textArea'),
    addButton : $('button#addTextButton'),


    init : function() {
        var _this = this;
        this.addButton.click(function(){
        var randomString = _this.createRandomString();
            _this.addTextToPage(randomString);
        });
    },

    addTextToPage : function( text ) {
        var textDivToAdd = $('<div>').html('<p>'+text+'</p>');

        this.textArea.append( textDivToAdd );
    },

    createRandomString : function() {
        var text = "";
        var possible = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";

        for( var i=0; i < 5; i++ )
             text += possible.charAt(Math.floor(Math.random() * possible.length));

        return text;
    },
};

Page.init();

J'ai trouvé que le jasmin était vraiment flexible et agréable à utiliser jusqu'à présent, j'apprécie toujours les pointeurs pour améliorer le code!

28
tlcowling

Je cherchais quelque chose pour moi et finalement j'ai fait une petite bibliothèque avec 19 matchers personnalisés. Vous le trouverez peut-être utile. https://github.com/devrafalko/jasmine-DOM-custom-matchers

3
Paweł