Тестирование после обновления

После обновления версии библиотеки Tooltipster крайне важно проверить корректность работы всех элементов, использующих тултипы. Tooltipster управляет динамическими всплывающими подсказками, поэтому ошибки часто проявляются в несовместимости с новыми методами или изменением API.

Проверка инициализации

Первым шагом следует убедиться, что тултипы корректно инициализируются на всех целевых элементах. В новой версии может измениться синтаксис вызова $(selector).tooltipster({...}) или добавлены новые опции.

Пример корректной инициализации с проверкой версии:

$(document).ready(function() {
    $('.tooltip').tooltipster({
        theme: 'tooltipster-light',
        delay: 200,
        interactive: true,
        animation: 'fade',
        updateAnimation: true
    });
    console.log('Tooltipster version:', $.tooltipster.version);
});

Ключевые моменты для тестирования:

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

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

Tooltipster предоставляет множество событий: before, ready, after, show, hide. После обновления нужно убедиться, что все обработчики вызываются корректно.

$('.tooltip').on('tooltipster:show', function() {
    console.log('Тултип показан');
});
$('.tooltip').on('tooltipster:hide', function() {
    console.log('Тултип скрыт');
});

Рекомендации:

  • Проверить последовательность событий при быстром наведении курсора.
  • Проверить вызов событий на динамически добавленных элементах через $(document).on(...).

Проверка опций конфигурации

После обновления некоторые опции могли быть удалены или изменены. Основные моменты:

  • animation: убедиться, что выбранная анимация поддерживается новой версией.
  • interactive: проверить возможность взаимодействия с контентом тултипа.
  • trigger: проверить работу всех типов триггеров (hover, click, custom).
  • contentAsHTML: убедиться, что HTML-контент отображается корректно.
$('.tooltip-html').tooltipster({
    content: $('<span>HTML <strong>контент</strong></span>'),
    contentAsHTML: true
});

Тестирование динамического контента

Если тултипы содержат контент, который меняется во время работы страницы, необходимо проверить обновление с помощью метода content():

$('.tooltip-dynamic').tooltipster('content', 'Новый контент');

Важно:

  • Проверить, что динамическое обновление контента не ломает позиционирование тултипа.
  • Проверить работу при смене контента на элементы с медленной анимацией или AJAX-загрузкой.

Адаптивность и позиционирование

После обновления библиотеки может измениться механизм позиционирования. Проверить:

  • Варианты позиционирования: top, bottom, left, right.
  • Поведение при изменении размеров окна.
  • Появление и скрытие тултипов при скролле или перемещении родительских контейнеров.
$('.tooltip-position').tooltipster({
    side: 'right',
    functionPosition: function(instance, helper, position){
        position.coord.top += 10;
        return position;
    }
});

Тестирование производительности

Tooltipster активно взаимодействует с DOM. После обновления важно проверить:

  • Скорость открытия и закрытия тултипов при массовом наведении.
  • Использование ресурсов браузера, особенно на страницах с большим количеством элементов.
  • Возможные утечки памяти при удалении элементов с тултипами.

Проверка совместимости с другими библиотеками

  • jQuery: убедиться, что используемая версия не конфликтует с новой версией Tooltipster.
  • CSS-фреймворки: проверить корректность отображения тем и кастомных стилей.
  • JavaScript-функции: убедиться, что пользовательские скрипты корректно работают с событиями Tooltipster.

Автоматизация тестирования

Для масштабных проектов рекомендуется написать автоматические тесты с использованием Selenium или Cypress, проверяя:

  • Инициализацию тултипов на всех страницах.
  • Срабатывание событий show и hide.
  • Отображение динамического контента.
  • Корректность позиции при различных разрешениях экрана.

Эта структура тестирования обеспечивает системный контроль за работой Tooltipster после обновления, выявляет несовместимости и позволяет минимизировать ошибки на продакшн-сайте.

Оглавление