Corp/backend/tests/textarea_autoexpand_test.html

<!DOCTYPE html>
<html lang="ru">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Тест автоматического расширения textarea</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
  <style>
    body {
      padding: 20px;
      max-width: 800px;
      margin: 0 auto;
    }
    .test-section {
      margin-bottom: 40px;
      padding: 20px;
      border: 1px solid #dee2e6;
      border-radius: 8px;
    }
    .test-section h3 {
      margin-bottom: 15px;
      color: #0d6efd;
    }
    textarea {
      resize: none;
      overflow-y: auto;
    }
    .status {
      margin-top: 10px;
      padding: 8px 12px;
      border-radius: 4px;
      font-size: 14px;
    }
    .status.success {
      background-color: #d1e7dd;
      color: #0f5132;
    }
    .status.pending {
      background-color: #fff3cd;
      color: #664d03;
    }
  </style>
</head>
<body>
  <h1 class="mb-4">🔧 Тест автоматического расширения textarea</h1>
  
  <div class="alert alert-info">
    <strong>Инструкция:</strong> Начните вводить текст в каждое поле. Поля должны автоматически расширяться до максимум 6 строк (144px).
  </div>

  <!-- Тест 1: Комментарий в ленте -->
  <div class="test-section">
    <h3>1. Быстрый комментарий в ленте (rows="1")</h3>
    <div class="comment-form-quick">
      <textarea name="text" class="form-control message-input" rows="1" placeholder="Оставить комментарий…"></textarea>
    </div>
    <div class="status pending" id="status1">⏳ Ожидание ввода...</div>
  </div>

  <!-- Тест 2: Комментарий в модальном окне -->
  <div class="test-section">
    <h3>2. Комментарий в модальном окне (rows="1")</h3>
    <div class="comment-form-modal">
      <textarea name="text" class="form-control message-input" rows="1" placeholder="Оставить комментарий в модальном окне…"></textarea>
    </div>
    <div class="status pending" id="status2">⏳ Ожидание ввода...</div>
  </div>

  <!-- Тест 3: Комментарий к заявке -->
  <div class="test-section">
    <h3>3. Комментарий к заявке (rows="1")</h3>
    <form class="request-comment-form">
      <textarea name="text" class="form-control message-input" rows="1" placeholder="Комментарий к заявке…"></textarea>
    </form>
    <div class="status pending" id="status3">⏳ Ожидание ввода...</div>
  </div>

  <!-- Тест 4: Чат composer -->
  <div class="test-section">
    <h3>4. Поле ввода в чате (composer-textarea)</h3>
    <textarea class="form-control composer-textarea message-input" placeholder="Написать сообщение…"></textarea>
    <div class="status pending" id="status4">⏳ Ожидание ввода...</div>
  </div>

  <!-- Тест 5: Textarea без автоматического расширения -->
  <div class="test-section">
    <h3>5. Textarea БЕЗ автоматического расширения (rows="3")</h3>
    <textarea class="form-control message-input" rows="3" placeholder="Это поле НЕ должно автоматически расширяться…"></textarea>
    <div class="status pending" id="status5">⏳ Должно остаться на 3 строках</div>
  </div>

  <!-- Тест 6: Динамически добавленный textarea -->
  <div class="test-section">
    <h3>6. Динамически добавленный textarea</h3>
    <button class="btn btn-primary mb-3" id="addTextarea">Добавить textarea</button>
    <div id="dynamicContainer"></div>
    <div class="status pending" id="status6">⏳ Нажмите кнопку</div>
  </div>

  <!-- Результаты тестирования -->
  <div class="card mt-4">
    <div class="card-body">
      <h5 class="card-title">📊 Результаты тестирования</h5>
      <ul id="results" class="mb-0">
        <li>Инициализация модуля...</li>
      </ul>
    </div>
  </div>

  <!-- Загружаем модуль -->
  <script src="../static/js/components/textareaAutoExpand.js"></script>

  <!-- Тестовая логика -->
  <script>
    // Ждём инициализации модуля
    setTimeout(() => {
      const results = document.getElementById('results');
      results.innerHTML = '';
      
      // Проверяем, что модуль загружен
      if (window.textareaAutoExpand) {
        results.innerHTML += '<li class="text-success">✅ Модуль textareaAutoExpand загружен</li>';
      } else {
        results.innerHTML += '<li class="text-danger">❌ Модуль textareaAutoExpand НЕ загружен</li>';
      }
      
      // Проверяем инициализацию textarea
      const textareas = document.querySelectorAll('textarea[rows="1"], textarea.composer-textarea');
      results.innerHTML += `<li>Найдено textarea для автоматического расширения: ${textareas.length}</li>`;
      
      textareas.forEach((ta, idx) => {
        if (ta.dataset.autoExpandInit) {
          results.innerHTML += `<li class="text-success">✅ Textarea #${idx + 1} инициализирован</li>`;
        } else {
          results.innerHTML += `<li class="text-warning">⚠️ Textarea #${idx + 1} не инициализирован</li>`;
        }
      });

      // Мониторинг изменений высоты
      textareas.forEach((ta, idx) => {
        const statusId = `status${idx + 1}`;
        const statusEl = document.getElementById(statusId);
        if (!statusEl) return;

        let lastHeight = ta.offsetHeight;
        
        ta.addEventListener('input', () => {
          const currentHeight = ta.offsetHeight;
          if (currentHeight !== lastHeight) {
            statusEl.className = 'status success';
            statusEl.textContent = `✅ Высота изменена: ${lastHeight}px → ${currentHeight}px`;
            lastHeight = currentHeight;
            
            if (currentHeight >= 144) {
              statusEl.textContent += ' (достигнут максимум 6 строк)';
            }
          }
        });
      });

      // Тест динамического добавления
      document.getElementById('addTextarea').addEventListener('click', () => {
        const container = document.getElementById('dynamicContainer');
        const textarea = document.createElement('textarea');
        textarea.className = 'form-control message-input';
        textarea.setAttribute('rows', '1');
        textarea.placeholder = 'Динамически добавленное поле…';
        container.appendChild(textarea);
        
        setTimeout(() => {
          if (textarea.dataset.autoExpandInit) {
            document.getElementById('status6').className = 'status success';
            document.getElementById('status6').textContent = '✅ MutationObserver работает! Textarea инициализирован автоматически';
          } else {
            document.getElementById('status6').className = 'status danger';
            document.getElementById('status6').textContent = '❌ MutationObserver НЕ работает';
          }
        }, 500);
      });

      // Тест textarea с rows="3"
      const textarea3 = document.querySelector('textarea[rows="3"]');
      textarea3.addEventListener('input', () => {
        const status5 = document.getElementById('status5');
        if (!textarea3.dataset.autoExpandInit) {
          status5.className = 'status success';
          status5.textContent = '✅ Корректно: НЕ инициализирован (rows="3")';
        } else {
          status5.className = 'status danger';
          status5.textContent = '❌ Ошибка: инициализирован, хотя не должен был';
        }
      });
    }, 1000);
  </script>
</body>
</html>