Подтвердить что ты не робот

Как unit test DOM-манипуляция (с жасмином)

Мне нужно unit test некоторые функции манипуляции с DOM с жасмином (в настоящее время я запускаю свои тесты в браузере и с кармой)

Мне было интересно, какой лучший подход должен был бы сделать это?

Например, я могу высмеять и заглушить объекты окна и document и выполнить spyOn несколько своих функций. Но это не похоже на простое решение, поэтому я задаю этот вопрос!

Или есть лучший способ (возможно, не использовать жасмин)?

Спасибо большое

Ответ 1

Я использовал полезное дополнение к жасмину под названием jasmine-jquery, доступное в github.

Он предоставляет вам доступ к ряду полезных дополнительных функций-сокетов, для утверждения объектов jquery и их свойств.

В частности, функции, которые я нашел полезными до сих пор, утверждают атрибуты элементов dom и отслеживают события, такие как щелчки и отправляют...

Вот несколько надуманный пример...:)

describe("An interactive page", function() {
    it(" 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());
    });
});

и вот код:

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

Я нашел жасмин, чтобы быть действительно гибким и приятным для использования до сих пор, я всегда ценю указатели на то, чтобы сделать код лучше, хотя!

Ответ 2

Я искал что-то для себя, и, наконец, я создал небольшую библиотеку с 19 обычными помощниками. Может быть, вы найдете это полезным. https://github.com/devrafalko/jasmine-DOM-custom-matchers