Добавлена документация по тестированию рефакторинга API

2025-11-28 14:26:41 +03:00 · 2025-11-28 14:26:41 +03:00 · 9766004e83
commit 9766004e83
parent 38c4d3aeab
1 changed files with 156 additions and 0 deletions
--- a/API_REFACTORING_TESTING.md
+++ b/API_REFACTORING_TESTING.md
@ -0,0 +1,156 @@
+# Рефакторинг API запросов - Инструкция по тестированию
+
+## ✅ Что было сделано
+
+### Проблема
+При переходе на главную страницу выполнялось **10+ дублирующихся API запросов**:
+- `/api/v1/departments/my-departments/` - **3 раза** (!!!)
+- `/api/v1/calendar/events/?start=...&end=...` - **2-3 раза** для каждого периода
+
+### Решение
+Создана система централизованного управления данными с кешированием и дедупликацией:
+
+1. **DataManager** - умный менеджер данных
+   - Кеширование с TTL (Time To Live)
+   - Дедупликация одновременных запросов
+   - Система подписки на изменения
+   - Логирование для отладки
+
+2. **API обертки**:
+   - `calendarApi.js` - события календаря (TTL 30 сек)
+   - `departmentsApi.js` - отделы пользователя (TTL 60 сек)
+
+3. **Рефакторинг calendarWidget.js**:
+   - Заменены прямые `fetch()` на API обертки
+   - Автоматическое переиспользование данных между виджетами
+
+## 🧪 Тестирование
+
+### 1. Проверка работы календаря
+
+```bash
+# На сервере
+cd /home/igor/EUSRR
+git pull origin master
+sudo systemctl restart eusrr
+```
+
+### 2. Откройте DevTools в браузере
+
+1. **Открыть главную страницу** (`/`)
+2. **F12 → вкладка Network**
+3. **Очистить** (кнопка 🚫)
+4. **Обновить страницу** (F5)
+
+**Ожидаемый результат:**
+- `/api/v1/departments/my-departments/` - **1 раз** (было 3)
+- `/api/v1/calendar/events/?start=...` - **1 раз на период** (было 2-3)
+
+### 3. Проверка кеширования
+
+1. **Вкладка Console в DevTools**
+2. **Обновите страницу** (F5)
+3. Ищите логи:
+   ```
+   [DataManager] Fetching: departments:my
+   [DataManager] Fetching: calendar:events:{"end":"...","start":"..."}
+   ```
+
+4. **Переключите календарь** (Компания → Отдел → Компания)
+5. Ищите логи:
+   ```
+   [DataManager] Cache HIT: calendar:events:{"end":"...","start":"..."}
+   ```
+
+### 4. Проверка дедупликации
+
+1. **Console в DevTools**
+2. **Быстро несколько раз** переключите календарь
+3. Ищите логи:
+   ```
+   [DataManager] Request DEDUPED: calendar:events:...
+   ```
+
+## 📊 Метрики до/после
+
+### ДО рефакторинга:
+- **API запросов:** ~10-15
+- **Дублирования:** 3-4x для departments, 2-3x для calendar
+- **Время загрузки:** зависит от сети
+
+### ПОСЛЕ рефакторинга:
+- **API запросов:** 3-5 (первая загрузка)
+- **Дублирования:** 0 (кеш + дедупликация)
+- **Повторная загрузка:** мгновенная (кеш)
+
+## 🐛 Отладка
+
+### Проверить статистику кеша:
+
+```javascript
+// В консоли браузера
+window.dataManager.getStats()
+// → {cacheSize: 5, pendingCount: 0, subscribersCount: 0, keys: [...]}
+```
+
+### Очистить кеш вручную:
+
+```javascript
+window.dataManager.clear()
+```
+
+### Инвалидировать конкретные данные:
+
+```javascript
+// Календарь
+window.dataManager.invalidatePattern(/^calendar:/)
+
+// Отделы
+window.dataManager.invalidate('departments:my')
+```
+
+## ⚠️ Возможные проблемы
+
+### 1. "Старые данные в календаре"
+**Причина:** Долгий TTL кеша (30 сек)  
+**Решение:** Уменьшить TTL в `calendarApi.js` или добавить кнопку "Обновить"
+
+### 2. "Календарь не загружается"
+**Причина:** Ошибка в импортах модулей  
+**Решение:** Проверить консоль на ошибки импорта
+
+### 3. "Лог 'Cache HIT' не появляется"
+**Причина:** Слишком короткий TTL или кеш очищается  
+**Решение:** Проверить `dataManager.getStats()` в консоли
+
+## 🚀 Следующие шаги
+
+### Приоритет 2: Расширить кеширование
+
+Добавить обертки для других API:
+- `notificationsApi.js` - уведомления
+- `postsApi.js` - посты ленты
+- `employeesApi.js` - сотрудники
+
+### Приоритет 3: Batch API
+
+Создать endpoint для загрузки нескольких периодов календаря за 1 запрос:
+
+```python
+# backend/api/v1/views.py
+class BatchCalendarEventsView(APIView):
+    def post(self, request):
+        ranges = request.data.get('ranges', [])
+        result = {}
+        for r in ranges:
+            key = f"{r['start']}_{r['end']}"
+            result[key] = get_events(r['start'], r['end'])
+        return Response(result)
+```
+
+## 📝 Заметки
+
+- Кеш хранится **в памяти** (очищается при перезагрузке страницы)
+- TTL можно настроить для каждого запроса
+- DataManager работает как singleton (один экземпляр на всё приложение)
+- Дедупликация работает только для **одновременных** запросов