Тестирование фильтрации и сортировки

Isotope — мощная библиотека для организации и управления сетками элементов на веб-странице с возможностями фильтрации, сортировки и динамического позиционирования. Правильное тестирование этих функций обеспечивает стабильную работу интерфейса и корректное отображение контента независимо от изменений данных.

Настройка среды для тестирования

Для начала необходимо подготовить контейнер и элементы сетки. Каждый элемент должен содержать атрибуты или классы, используемые для фильтрации и сортировки. Например:

<div class="grid">
  <div class="grid-item" data-category="fruit" data-price="10">Яблоко</div>
  <div class="grid-item" data-category="vegetable" data-price="5">Морковь</div>
  <div class="grid-item" data-category="fruit" data-price="15">Банан</div>
</div>

Инициализация Isotope выполняется с указанием селектора элементов и настроек сортировки:

const iso = new Isotope('.grid', {
  itemSelector: '.grid-item',
  layoutMode: 'fitRows',
  getSortData: {
    category: '[data-category]',
    price: '[data-price] parseInt'
  }
});

Тестирование фильтрации

Фильтрация позволяет отображать только те элементы, которые соответствуют определённым критериям. Основные шаги тестирования:

  1. Проверка корректности селектора Необходимо убедиться, что фильтры срабатывают только на указанные элементы. Например:

    iso.arrange({ filter: '[data-category="fruit"]' });

    После выполнения фильтрации нужно проверить, что отображаются только элементы с data-category="fruit".

  2. Комбинация фильтров Тестирование должно охватывать случаи, когда применяются несколько фильтров одновременно. В Isotope это реализуется через объединение селекторов:

    iso.arrange({ filter: '[data-category="fruit"][data-price="15"]' });

    Проверка: отображается только элемент «Банан».

  3. Сброс фильтрации Для возврата к исходному состоянию выполняется фильтр по '*':

    iso.arrange({ filter: '*' });

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

Тестирование сортировки

Сортировка организует элементы сетки в определённом порядке. В Isotope доступны различные критерии сортировки, включая числовые значения, текстовые строки и пользовательские функции.

  1. Сортировка по тексту Например, сортировка по категории:

    iso.arrange({ sortBy: 'category', sortAscending: true });

    Проверка: элементы располагаются в алфавитном порядке категорий.

  2. Сортировка по числовым значениям Использование атрибута data-price:

    iso.arrange({ sortBy: 'price', sortAscending: false });

    Проверка: элемент с наибольшей ценой отображается первым.

  3. Пользовательская сортировка Можно передавать функцию для гибкой логики сортировки:

    iso.arrange({
  sortBy: 'custom',
  getSortData: {
    custom: itemElem => parseInt(itemElem.getAttribute('data-price')) % 10
  }
});

    Проверка: элементы расположены в соответствии с остатком от деления цены на 10.

Тестирование взаимодействия фильтрации и сортировки

Особое внимание уделяется сценарию, когда одновременно применяются фильтры и сортировка:

iso.arrange({
  filter: '[data-category="fruit"]',
  sortBy: 'price',
  sortAscending: true
});

Необходимо убедиться, что:

  • фильтр скрывает все элементы, не соответствующие категории;
  • сортировка корректно переставляет видимые элементы;
  • скрытые элементы не нарушают порядок отображения.

Визуальные и функциональные проверки

  • Проверка позиции элементов: после фильтрации и сортировки элементы должны занимать правильное место, без наложений и пустых промежутков.
  • Анимация: если используется плавное расположение (transitionDuration), проверяется, что анимация проходит без багов и элементов, “застревающих” на старых позициях.
  • Обновление данных: при динамическом добавлении новых элементов (appended) или удалении существующих (remove), фильтры и сортировка должны корректно применяться к изменённой сетке.

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

Для систематической проверки рекомендуется использовать фреймворки тестирования:

  • Jest или Mocha для логики фильтрации и сортировки.
  • Cypress или Selenium для визуальной проверки работы сетки и анимации.

Примеры проверок:

test('фильтрация по категории', () => {
  iso.arrange({ filter: '[data-category="vegetable"]' });
  const visibleItems = document.querySelectorAll('.grid-item:visible');
  expect(visibleItems.length).toBe(1);
  expect(visibleItems[0].textContent).toBe('Морковь');
});
test('сортировка по цене', () => {
  iso.arrange({ sortBy: 'price', sortAscending: true });
  const items = Array.from(document.querySelectorAll('.grid-item'));
  const prices = items.map(item => parseInt(item.getAttribute('data-price')));
  expect(prices).toEqual(prices.slice().sort((a, b) => a - b));
});

Оптимизация тестового покрытия

  • Проверять каждый фильтр и сортировку отдельно.
  • Комбинировать фильтры и сортировку в нестандартных сценариях (например, пустой фильтр, отрицательные значения).
  • Тестировать динамическое добавление и удаление элементов, чтобы убедиться в устойчивости сетки.

Тщательное тестирование фильтрации и сортировки в Isotope обеспечивает корректное отображение данных, предотвращает баги в интерфейсе и гарантирует стабильное поведение при любых изменениях контента.

Оглавление