unit-testing - spec - testing angular 2

Cómo probar la unidad de la manipulación DOM(con jazmín)

Question

Necesito probar algunas funciones de manipulación DOM con jazmín (actualmente ejecuto mis pruebas en el navegador y con Karma)

Me preguntaba cuál sería el mejor enfoque para hacer esto?

Por ejemplo, puedo simular y resguardar la ventana y documentar objetos y poder ver algunas de sus funciones. Pero esto realmente no parece una solución fácil, ¡por eso estoy haciendo esta pregunta!

¿O hay una mejor manera (no usar jazmín tal vez) para hacer esto?

Muchas gracias

Answer 1

Estaba buscando algo para mí y finalmente hice una pequeña biblioteca con 19 corresponsales personalizados. Tal vez lo encuentres útil. https://github.com/devrafalko/jasmine-DOM-custom-matchers

Answer 2

He estado usando una adición útil a jazmín llamada jazmín-jquery disponible en github.

Le da acceso a varias funciones de emparejamiento adicionales útiles, para afirmar objetos jquery y sus propiedades.

En particular, las características que he encontrado útiles hasta ahora son afirmar sobre los atributos de los elementos dom y espiar eventos como clics y envíos ...

Aquí hay un ejemplo algo artificial ... :)

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());
    });
});

y aquí está el código:

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();

He encontrado que el jazmín es muy flexible y agradable de usar hasta ahora; sin embargo, siempre aprecié los indicadores para mejorar el código.