Unit-тестирование с Zepto

Zepto — это лёгкая библиотека JavaScript, созданная для удобной работы с DOM, событиями и AJAX, аналог jQuery, но с минимальным весом. Для использования Zepto достаточно подключить один файл zepto.min.js через тег <script> в HTML:

<script src="zepto.min.js"></script>

Zepto поддерживает основные методы манипуляции DOM, работу с событиями, анимацию и AJAX, что делает её удобным инструментом для разработки лёгких веб-приложений.

Основы работы с DOM в Zepto

Выбор элементов выполняется через функцию $:

var divs = $('div'); // Все элементы <div> на странице
var special = $('#special'); // Элемент с id="special"
var items = $('.item'); // Все элементы с классом "item"

Методы манипуляции DOM:

  • .html() — чтение или установка HTML содержимого:
$('#content').html('<p>Новый текст</p>');
  • .text() — получение или установка текстового содержимого:
$('.title').text('Заголовок');
  • .append() / .prepend() — добавление элементов внутрь выбранных узлов:
$('ul').append('<li>Новый элемент</li>');
  • .remove() / .empty() — удаление элементов или их содержимого:
$('.old-item').remove();

События и обработчики

Zepto предоставляет методы для работы с событиями:

  • .on(event, handler) — привязка обработчика к событию:
$('#btn').on('click', function() {
    alert('Нажатие кнопки');
});
  • .off(event, handler) — удаление обработчика:
$('#btn').off('click');
  • .trigger(event) — программальное вызов события:
$('#btn').trigger('click');

Поддерживаются все основные события: click, mouseover, keydown и пользовательские события.

AJAX-запросы в Zepto

Zepto реализует удобные методы для работы с AJAX:

  • $.ajax(options) — универсальный метод с настройкой типа запроса, URL, данных и обратных вызовов:
$.ajax({
    url: '/api/data',
    type: 'GET',
    dataType: 'json',
    success: function(data) {
        console.log(data);
    },
    error: function(xhr) {
        console.error('Ошибка запроса', xhr);
    }
});
  • $.get(url, data, callback, type) — упрощённый GET-запрос:
$.get('/api/user', { id: 1 }, function(user) {
    console.log(user.name);
}, 'json');
  • $.post(url, data, callback, type) — упрощённый POST-запрос:
$.post('/api/save', { name: 'Alex' }, function(response) {
    console.log(response.status);
}, 'json');

Zepto поддерживает цепочку методов .done(), .fail(), .always() для работы с промисоподобными объектами.

Unit-тестирование с Zepto

Хотя Zepto сама по себе не является фреймворком для тестирования, её возможности DOM и событий можно эффективно использовать совместно с JavaScript-фреймворками тестирования, такими как Mocha и Jasmine.

Настройка окружения

  1. Подключение Zepto и тестового фреймворка в HTML:
<script src="zepto.min.js"></script>
<script src="mocha.js"></script>
<script src="chai.js"></script>
  1. Инициализация Mocha:
mocha.setup('bdd');
var assert = chai.assert;

Тестирование манипуляций с DOM

Пример проверки добавления элемента:

describe('DOM манипуляции', function() {
    beforeEach(function() {
        $('body').append('<div id="test"></div>');
    });

    afterEach(function() {
        $('#test').remove();
    });

    it('добавляет текст в элемент', function() {
        $('#test').text('Hello');
        assert.equal($('#test').text(), 'Hello');
    });

    it('удаляет элемент из DOM', function() {
        $('#test').remove();
        assert.equal($('#test').length, 0);
    });
});

Тестирование событий

Проверка срабатывания событий:

describe('События', function() {
    beforeEach(function() {
        $('body').append('<button id="btn">Click</button>');
    });

    afterEach(function() {
        $('#btn').remove();
    });

    it('событие click', function(done) {
        $('#btn').on('click', function() {
            assert.isTrue(true);
            done();
        });
        $('#btn').trigger('click');
    });
});

Тестирование AJAX-запросов

Zepto позволяет тестировать AJAX с использованием моков и промисов:

describe('AJAX-запросы', function() {
    it('успешный GET-запрос', function(done) {
        $.get('/api/data', function(data) {
            assert.property(data, 'id');
            done();
        });
    });
});

Для полноценного unit-тестирования рекомендуется использовать инструменты типа Sinon.js для имитации AJAX-запросов и отслеживания вызовов функций без реального обращения к серверу.

Цепочки вызовов и тестирование интеграций

Zepto поддерживает цепочку методов, что позволяет тестировать последовательные манипуляции:

$('#container').append('<div class="item"></div>')
               .find('.item')
               .text('Текст')
               .css('color', 'red');

В тестах можно проверять состояние DOM после каждой операции, что упрощает интеграционные проверки. Пример:

describe('Цепочки вызовов', function() {
    beforeEach(function() {
        $('body').append('<div id="chain"></div>');
    });

    afterEach(function() {
        $('#chain').remove();
    });

    it('устанавливает текст и стиль', function() {
        $('#chain').append('<span></span>')
                   .find('span')
                   .text('Test')
                   .css('color', 'blue');
        var span = $('#chain').find('span');
        assert.equal(span.text(), 'Test');
        assert.equal(span.css('color'), 'blue');
    });
});

Рекомендации по тестированию

  • Всегда очищать тестовый DOM после каждого теста (afterEach) для изоляции.
  • Использовать beforeEach для создания необходимых элементов перед тестами.
  • Применять моки и стабы для AJAX-запросов, чтобы тесты были независимыми от сервера.
  • Проверять не только состояние DOM, но и свойства элементов (.css(), .attr()) для полноценной проверки поведения.

Zepto, благодаря простому и лаконичному API, позволяет строить ясные и предсказуемые unit-тесты, интегрируя их с любыми современными фреймворками JavaScript.

Оглавление