Проверка работоспособности

Universal Router — это легковесная библиотека для маршрутизации в JavaScript, позволяющая сопоставлять URL с обработчиками и динамически создавать SPA-маршруты. Проверка её работоспособности требует понимания ключевых механизмов работы и способов интеграции с приложением.

Подключение и базовая конфигурация

Для начала необходимо установить библиотеку через npm или yarn:

npm install universal-router

или

yarn add universal-router

Импортируется класс UniversalRouter и создаются маршруты в виде массива объектов:

import UniversalRouter from 'universal-router';

const routes = [
  {
    path: '/',
    action: () => 'Главная страница',
  },
  {
    path: '/about',
    action: () => 'О сайте',
  },
  {
    path: '/user/:id',
    action: ({ params }) => `Профиль пользователя ${params.id}`,
  },
];

Инициализация роутера

Создание экземпляра роутера и его базовое использование:

const router = new UniversalRouter(routes);

router.resolve('/user/42').then(result => {
  console.log(result); // Профиль пользователя 42
});

Ключевой момент: resolve возвращает Promise, что позволяет использовать асинхронные действия в обработчиках маршрутов.

Асинхронные маршруты и обработка ошибок

Universal Router поддерживает асинхронные действия, что особенно полезно при загрузке данных с сервера перед отображением страницы:

const routes = [
  {
    path: '/posts/:id',
    async action({ params }) {
      const response = await fetch(`https://jsonplaceholder.typicode.com/posts/${params.id}`);
      if (!response.ok) throw new Error('Не удалось загрузить пост');
      const post = await response.json();
      return post.title;
    },
  },
];

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

router.resolve('/posts/1')
  .then(title => console.log(title))
  .catch(err => console.error(err.message));

Важно: Universal Router не перехватывает все ошибки глобально, поэтому промисы должны иметь обработчики ошибок.

Проверка динамических параметров

Маршруты с параметрами позволяют передавать данные через URL. Для тестирования их работоспособности проверяют:

  1. Корректность сопоставления пути с маршрутом.
  2. Правильность извлечения параметров.
router.resolve('/user/99').then(result => {
  console.log(result); // Профиль пользователя 99
});

Тестирование должно учитывать:

  • Отсутствие параметра → маршрут не найден.
  • Дополнительные сегменты URL → маршрут не совпадает, если не используется wildcard *.

Wildcard и fallback маршруты

Для проверки работоспособности глобального захвата или 404-путей применяются wildcard маршруты:

const routes = [
  { path: '/', action: () => 'Главная' },
  { path: '(.*)', action: () => 'Страница не найдена' },
];

const router = new UniversalRouter(routes);

router.resolve('/any/path').then(result => {
  console.log(result); // Страница не найдена
});

Ключевой момент: wildcard маршруты должны располагаться в конце списка, чтобы не блокировать более конкретные маршруты.

Тестирование с браузерным History API

Для интеграции с SPA проверяют работу pushState и отслеживание изменений URL:

window.onpopst ate = () => {
  router.resolve(window.location.pathname).then(render);
};

function navigate(path) {
  window.history.pushState({}, '', path);
  router.resolve(path).then(render);
}

function render(content) {
  document.body.textContent = content;
}

navigate('/about'); // обновляет страницу без перезагрузки

Проверка включает:

  • События popstate корректно обновляют содержимое.
  • Метод pushState изменяет URL без перезагрузки.
  • Рендеринг содержимого соответствует маршруту.

Интеграция с асинхронной загрузкой компонентов

В крупных SPA маршруты часто возвращают промисы с компонентами:

const routes = [
  {
    path: '/dashboard',
    action: async () => {
      const module = await import('./Dashboard.js');
      return module.default();
    },
  },
];

Проверка работоспособности здесь заключается в том, чтобы:

  • Модуль загружался динамически при обращении к маршруту.
  • Ошибки загрузки обрабатывались корректно.

Логирование и отладка маршрутов

Для отладки удобно использовать middleware, добавляя проверку перед вызовом action:

const router = new UniversalRouter(routes, {
  resolveRoute(context) {
    console.log('Проверка маршрута:', context.pathname);
    return context.route.action(context);
  },
});

Это позволяет:

  • Отслеживать, какой маршрут был выбран.
  • Проверять параметры и контекст вызова.
  • Выявлять ошибки сопоставления путей.

Итоговые рекомендации по проверке

  • Проверять маршруты с параметрами, wildcard и fallback.
  • Убедиться, что асинхронные промисы выполняются и ошибки обрабатываются.
  • Тестировать взаимодействие с History API при SPA.
  • Использовать логирование для мониторинга работы маршрутов.
  • Проверять загрузку динамических модулей и компонентов, если приложение их использует.

Все эти шаги обеспечивают полную проверку работоспособности Universal Router в различных сценариях, от простых маршрутов до сложных SPA с динамическими компонентами и асинхронной логикой.

Оглавление