Corp/backend/docs/testing/CHAT_TESTS_GUIDE.md
Игорь Надеин 6d76988cdd refactor: восстановлены старые стили пузырей сообщений, аватаров и разделителей (pre-redesign)
- Восстановлен мягкий цвет пузырей: color-mix(92%) вместо жесткого var(--bs-primary)
- Аватары: border-radius 9999px + grid layout для идеальных кругов
- Разделители: правильный spacing, font-weight 700, pointer-events, color-mix прозрачность
- Добавлены оптимизации скролла: rootMargin 300px, limit 50 сообщений (Telegram-стиль)
- Добавлены новые модули: messageLoader, scrollManager, chatUtils
- Рефакторинг логики загрузки сообщений для предотвращения дубликатов
- Создана документация по архитектуре и тестированию
2026-01-12 17:21:41 +03:00

11 KiB
Raw Blame History

Руководство по тестированию системы чата

📋 Обзор

Комплексная система тестирования для всех компонентов чата EUSRR. Тесты написаны на чистом JavaScript и могут быть запущены прямо в консоли браузера без дополнительных инструментов.

🚀 Способы запуска тестов

Способ 1: Через HTML интерфейс (Рекомендуется)

  1. Откройте файл в браузере:

    http://localhost:8000/static/js/tests/runTests.html
    
  2. Нажмите на кнопку для запуска нужного набора тестов:

    • 🚀 Запустить все тесты - полный набор всех тестов
    • 📦 MessageStore - тесты хранилища сообщений
    • 📥 MessageLoader - тесты загрузчика сообщений
    • 📜 ScrollManager - тесты менеджера скролла
    • 🎨 MessageRenderer - тесты рендерера сообщений
    • 🎮 ChatController - тесты контроллера чата
    • 🔗 Интеграционные - тесты взаимодействия компонентов
    • ⚡ Производительность - тесты производительности
  3. Результаты отображаются:

    • В интерфейсе страницы
    • В консоли браузера (F12)

Способ 2: Из консоли браузера на странице чата

  1. Откройте страницу чата в браузере

  2. Откройте консоль разработчика (F12)

  3. Загрузите тестовый модуль:

    const script = document.createElement('script');
    script.src = '/static/js/tests/chatTests.js';
    script.type = 'module';
    document.head.appendChild(script);
    
  4. Запустите тесты:

    // Все тесты
    await window.ChatTests.runAll()
    
    // Отдельные модули
    await window.ChatTests.testMessageStore()
    await window.ChatTests.testMessageLoader()
    await window.ChatTests.testScrollManager()
    await window.ChatTests.testMessageRenderer()
    await window.ChatTests.testChatController()
    await window.ChatTests.testIntegration()
    await window.ChatTests.testPerformance()
    

Способ 3: Скопировать код в консоль

  1. Откройте файл /static/js/tests/chatTests.js
  2. Скопируйте весь код
  3. Вставьте в консоль браузера на странице чата
  4. Запустите: await window.ChatTests.runAll()

📊 Что тестируется?

MessageStore (Хранилище сообщений)

  • ✅ Добавление одного сообщения
  • ✅ Обработка дубликатов
  • ✅ Массовое добавление сообщений
  • ✅ Получение сообщения по ID
  • ✅ Проверка наличия сообщения
  • ✅ Получение старейшего/новейшего сообщения
  • ✅ Обновление сообщения
  • ✅ Удаление сообщения
  • ✅ Очистка чата
  • ✅ Оптимистичные сообщения
  • ✅ События Store (messagesAdded, messageUpdated, etc.)

MessageLoader (Загрузчик сообщений)

  • ✅ Инициализация
  • ✅ Состояния загрузки
  • ✅ Состояния чата (hasMore, oldestId)
  • ✅ Обработка WebSocket событий (новое сообщение, редактирование, удаление)
  • ✅ Обработка реакций
  • ✅ Оптимистичная отправка

ScrollManager (Менеджер скролла)

  • ✅ Инициализация
  • ✅ Скролл вниз
  • ✅ Скролл к сообщению
  • ✅ Сохранение/восстановление позиции
  • ✅ IntersectionObserver для lazy loading истории

MessageRenderer (Рендерер сообщений)

  • ✅ Инициализация
  • ✅ Рендеринг сообщения
  • ✅ Обновление сообщения
  • ✅ Рендеринг собственного сообщения
  • ✅ Удаление сообщения
  • ✅ Очистка контейнера

ChatController (Контроллер чата)

  • ✅ Инициализация всех компонентов
  • ✅ Наличие всех методов (init, loadChat, sendMessage, etc.)
  • ✅ Event listeners
  • ✅ Оптимистичная отправка

Интеграционные тесты

  • ✅ Полный цикл жизни сообщения (добавление → редактирование → удаление)
  • ✅ Множественные сообщения
  • ✅ Оптимистичная отправка с подтверждением
  • ✅ События Store → Renderer

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

  • ✅ Массовое добавление (1000 сообщений)
  • ✅ Поиск сообщений (100 запросов)
  • ✅ Рендеринг большого количества сообщений
  • ✅ Массовое обновление

📈 Интерпретация результатов

Успешный запуск

🏁 ИТОГОВЫЕ РЕЗУЛЬТАТЫ
============================================================
Всего тестов: 87
✅ Успешно: 87
❌ Провалено: 0
📈 Процент успеха: 100.0%
============================================================

С ошибками

🏁 ИТОГОВЫЕ РЕЗУЛЬТАТЫ
============================================================
Всего тестов: 87
✅ Успешно: 82
❌ Провалено: 5
📈 Процент успеха: 94.3%
============================================================

❌ Проваленные тесты:
  - Добавление дубликата должно вернуть 0 (expected: 0, got: 1)
  - Должно быть отрендерено 10 сообщений (expected: 10, got: 9)
  ...

🔧 Добавление новых тестов

Структура теста:

async testYourFeature() {
    console.log('\n🧪 Тестирование YourFeature...\n');
    this.resetResults();

    // Подготовка
    const component = new YourComponent();

    // Тест 1
    const result = component.doSomething();
    this.assertEqual(result, expectedValue, 'Описание теста');

    // Тест 2
    this.assert(condition, 'Условие должно быть истинным');

    // Тест 3
    this.assertNotNull(value, 'Значение не должно быть null');

    this.printResults();
    return this.results;
}

Добавьте в runAll():

const yourResults = await this.testYourFeature();

Экспортируйте:

window.ChatTests = {
    // ...
    testYourFeature: () => chatTests.testYourFeature()
};

🐛 Отладка проваленных тестов

  1. Проверьте консоль браузера - там будет детальная информация об ошибках
  2. Запустите конкретный тест - window.ChatTests.testMessageStore() вместо runAll()
  3. Добавьте console.log в проваленный тест для отладки
  4. Проверьте DOM - возможно, элементы не создаются корректно
  5. Проверьте timing - добавьте await this.sleep(100) если нужно время на рендеринг

📝 Примеры использования

Быстрая проверка после изменений

// После изменения MessageStore
await window.ChatTests.testMessageStore()

// После изменения рендеринга
await window.ChatTests.testMessageRenderer()

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

// Запускайте периодически для мониторинга
await window.ChatTests.testPerformance()

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

// Все тесты должны пройти успешно
const results = await window.ChatTests.runAll()
console.log(`Готов к коммиту: ${results.failed === 0}`)

🎯 Best Practices

  1. Запускайте тесты регулярно - после каждого значимого изменения
  2. Проверяйте производительность - следите за регрессией скорости
  3. Добавляйте тесты для новых фич - покрывайте новый код тестами
  4. Не коммитьте без тестов - все тесты должны проходить
  5. Используйте HTML интерфейс - удобнее для повседневной работы

🔍 Troubleshooting

Тесты не загружаются

  • Убедитесь, что Django сервер запущен
  • Проверьте путь к файлу: /static/js/tests/chatTests.js
  • Откройте консоль и проверьте ошибки загрузки модулей

Тесты падают с ошибками модулей

  • Убедитесь, что вы на странице чата (модули должны быть доступны)
  • Проверьте, что все зависимости импортированы корректно
  • Очистите кэш браузера (Ctrl+Shift+R)

Производительность тестов низкая

  • Проверьте производительность в режиме инкогнито (без расширений)
  • Используйте последнюю версию браузера
  • Закройте другие вкладки браузера

📞 Поддержка

При возникновении проблем:

  1. Проверьте консоль браузера на ошибки
  2. Запустите тесты по отдельности для локализации проблемы
  3. Проверьте, что все модули чата загружены корректно
  4. Убедитесь, что используете актуальную версию кода

Последнее обновление: 12 января 2026