Unit тесты

Smooth Scroll — это библиотека, предназначенная для плавной анимации прокрутки страницы к определённым элементам при кликах по якорным ссылкам или программных вызовах. Она позволяет заменять стандартное мгновенное перемещение по странице на более приятное визуальное движение, улучшая пользовательский опыт.

Установка и подключение

Smooth Scroll можно подключить несколькими способами:

Через npm:

npm install smooth-scroll

Через CDN:

<script src="https://cdn.jsdelivr.net/npm/smooth-scroll@16/dist/smooth-scroll.polyfills.min.js"></script>

После подключения создаётся экземпляр класса SmoothScroll с указанием селекторов и опций:

import SmoothScroll from 'smooth-scroll';

const scroll = new SmoothScroll('a[href*="#"]', {
    speed: 500,
    speedAsDuration: true,
    offset: 50,
});

Параметры:

  • speed — время анимации в миллисекундах.
  • speedAsDuration — если true, скорость становится фиксированной длительностью.
  • offset — смещение от верхней границы страницы.

Основные методы библиотеки

  1. scroll.animateScroll(target, anchor, options) Позволяет программно прокручивать страницу к элементу target или якорю anchor.
scroll.animateScroll(document.querySelector('#section2'));
  1. destroy() Убирает обработчики событий и возвращает страницу к стандартной прокрутке.
scroll.destroy();
  1. toggle() Позволяет временно включать или выключать поведение smooth scroll.

Настройка прокрутки

Smooth Scroll позволяет детально контролировать прокрутку:

  • Эластичность анимации через опцию easing:
const scroll = new SmoothScroll('a[href*="#"]', {
    easing: 'easeInOutCubic'
});

Доступные варианты: linear, easeInQuad, easeOutQuad, easeInOutCubic и другие.

  • Смещение позволяет учитывать фиксированные шапки:
const scroll = new SmoothScroll('a[href*="#"]', {
    offset: 100
});
  • Скорость и длительность: speed задаёт базовое время анимации, а speedAsDuration позволяет фиксировать её независимо от расстояния.

Unit тестирование Smooth Scroll

Для unit тестирования можно использовать Jest или любой другой фреймворк. Основная задача — проверить, что методы библиотеки вызываются корректно, а поведение при прокрутке соответствует ожиданиям.

Пример теста метода animateScroll:

import SmoothScroll from 'smooth-scroll';

describe('SmoothScroll', () => {
    let scroll;

    beforeEach(() => {
        document.body.innerHTML = `
            <a href="#section1" id="link1">Go to Section 1</a>
            <div id="section1" style="margin-top:1000px"></div>
        `;
        scroll = new SmoothScroll('a[href*="#"]');
    });

    test('animateScroll прокручивает к элементу', () => {
        const target = document.querySelector('#section1');
        const spy = jest.spyOn(scroll, 'animateScroll');
        scroll.animateScroll(target);
        expect(spy).toHaveBeenCalledWith(target, undefined, undefined);
    });

    test('destroy удаляет обработчики', () => {
        const spyRemove = jest.spyOn(scroll, 'destroy');
        scroll.destroy();
        expect(spyRemove).toHaveBeenCalled();
    });
});

Особенности unit тестов:

  • Проверяются вызовы методов, а не фактическая анимация в браузере.
  • Для DOM-элементов можно использовать jsdom в Jest.
  • Отдельно тестируются опции конфигурации (speed, offset, easing) через создание экземпляра с разными параметрами.

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

Smooth Scroll автоматически добавляет обработчики клика для всех элементов с заданным селектором. В unit тестах важно проверить, что:

  1. При клике вызывается animateScroll.
  2. Параметры передаются корректно.
test('click по ссылке вызывает animateScroll', () => {
    const link = document.querySelector('#link1');
    const target = document.querySelector('#section1');
    const spy = jest.spyOn(scroll, 'animateScroll');
    
    link.click();
    
    expect(spy).toHaveBeenCalledWith(target, link, expect.any(Object));
});

Моки и имитация DOM

Для корректного тестирования можно использовать мок элементов и событий:

const mockElement = {
    getBoundingClientRect: () => ({ top: 500 }),
    ownerDocument: document,
};
const mockEvent = { preventDefault: jest.fn() };

scroll.animateScroll = jest.fn();

scroll.animateScroll(mockElement, mockEvent);

expect(scroll.animateScroll).toHaveBeenCalledWith(mockElement, mockEvent);

Это позволяет полностью контролировать окружение и проверять все ветви логики библиотеки без необходимости реальной прокрутки страницы.

Советы по покрытию unit тестами

  • Проверять работу всех опций конфигурации (speed, offset, easing, updateURL).
  • Тестировать вызовы методов animateScroll, destroy и toggle.
  • Симулировать клик на якорные ссылки и проверять передачу правильных параметров.
  • Использовать моки для DOM-элементов, чтобы избежать зависимостей от реального браузера.
  • Создавать тесты на исключения и некорректные параметры, чтобы убедиться в стабильности библиотеки.

Unit тесты для Smooth Scroll обеспечивают уверенность в том, что анимация прокрутки работает предсказуемо, а все методы ведут себя согласно документации независимо от окружения.

Оглавление