Corp/backend/docs/TEXTAREA_TESTING.md

🎯 Тестирование унификации textarea

Что было исправлено

Проблема: Поля ввода комментариев в заявлениях вели себя иначе, чем в новостях.

Причина:

1. В request-list.css были специфичные стили для .comment-new textarea:

   • min-height: 44px
   • max-height: 220px
   • resize: vertical

2. В _message-inputs.scss были конфликтующие стили:

   • .message-input { min-height: 44px; max-height: 260px; }
   • .message-field--compact .message-input { min-height: 32px; }

Решение:

• ✅ Удалены все фиксированные min-height и max-height из CSS
• ✅ Удален resize: vertical (теперь только resize: none)
• ✅ Все textarea с rows="1" автоматически управляются через textareaAutoExpand.js

Как тестировать

1. Комментарии в ленте новостей

1. Откройте главную страницу /feed/
2. Найдите любую новость
3. Начните вводить комментарий в поле "Оставить комментарий…"
4. ✅ Ожидается: Поле плавно расширяется от 1 до 6 строк (144px)

2. Комментарии в заявлениях

1. Откройте список заявлений /requests/
2. Нажмите на кнопку "Комментарии" под любой заявкой
3. Начните вводить комментарий в поле "Написать…"
4. ✅ Ожидается: Поле ведёт себя ИДЕНТИЧНО полю в новостях

3. Комментарии в детальном просмотре заявки

1. Откройте заявку /requests/<id>/
2. Прокрутите до раздела комментариев
3. Начните вводить комментарий
4. ✅ Ожидается: Точно такое же поведение, как в новостях

4. Комментарии при обработке заявки

1. Откройте заявку для обработки /requests/<id>/process/
2. Прокрутите до комментариев
3. Начните вводить
4. ✅ Ожидается: Единообразное поведение

5. Модальные окна

1. Откройте модальное окно новости
2. Попробуйте добавить комментарий
3. ✅ Ожидается: Расширение от 1 до 6 строк

Что проверять

Критерий	Ожидаемое поведение
Начальная высота	1 строка (~38-40px)
Максимальная высота	6 строк (144px)
Поведение при вводе	Плавное автоматическое расширение
Скроллбар	Появляется только после 6 строк
Уменьшение высоты	При удалении текста высота уменьшается
Единообразие	Все поля с rows="1" работают одинаково
Визуальный стиль	Нет отличий между новостями и заявлениями

Известные исключения

Следующие textarea НЕ должны автоматически расширяться:

• Модальные окна редактирования с rows="3" или rows="4"
• Поле создания новости с большим textarea
• Любые textarea без rows="1" и без класса .composer-textarea

Проверка в DevTools

Откройте DevTools → Elements и проверьте textarea:

✅ Правильно (новости и заявления должны быть одинаковыми):

<textarea class="form-control message-input" 
          rows="1" 
          data-auto-expand-init="true"
          style="height: auto; height: 72px;">

Проверки:

• rows="1" ✅
• data-auto-expand-init="true" ✅ (добавлен модулем)
• style="height: XXpx" ✅ (динамически изменяется)
• Нет min-height, max-height в computed styles ❌ (должны отсутствовать!)

❌ Неправильно (если видите):

/* В Computed Styles не должно быть: */
min-height: 44px;  /* ❌ ПЛОХО */
max-height: 260px; /* ❌ ПЛОХО */
resize: vertical;   /* ❌ ПЛОХО */

Быстрый визуальный тест

1. Откройте новость → введите 5 строк текста → запомните высоту
2. Откройте заявку → введите 5 строк текста → сравните высоту
3. ✅ Должны быть ИДЕНТИЧНЫ!

Если что-то пошло не так

1. Очистите кеш браузера (Ctrl+Shift+Delete)
2. Проверьте, что собрана статика: python manage.py collectstatic
3. Проверьте, что скомпилирован CSS: cd backend/static && npm run build:css
4. Перезагрузите страницу с Ctrl+F5

Файлы для проверки

• ✅ backend/static/js/components/textareaAutoExpand.js - основной модуль
• ✅ backend/static/scss/components/_message-inputs.scss - стили без min/max height
• ✅ backend/static/css/components/request-list.css - удалены специфичные стили
• ✅ backend/static/css/bootstrap-custom.css - скомпилированный CSS

---

Дата создания: 29.11.2025
Версия: 1.0