# Forum Module Testing Guide

## Overview
This document provides step-by-step instructions to test the completed forum improvements:
1. Quill.js WYSIWYG Editor with bold/italic/formatting
2. Like/Dislike button functionality
3. Reply navigation with smooth scroll and highlight
4. Quote functionality

---

## Test 1: Quill.js Editor - Text Formatting

### Prerequisites
- Be logged in as an authenticated user
- Navigate to a forum topic page

### Steps
1. Scroll to the "💬 Yanıt Gönder" (Send Reply) section at the bottom
2. Look for the editor area with a toolbar above the text field
3. The toolbar should display buttons for:
   - ℋ Header (H2, H3)
   - **B** Bold
   - *I* Italic
   - <u>U</u> Underline
   - ~~S~~ Strikethrough
   - " Blockquote
   - </> Code Block
   - Numbered and bullet lists
   - Link icon
   - Clear formatting

### Expected Results
✅ All toolbar buttons should be visible
✅ Click "Bold" button, type text → text should appear **bold**
✅ Click "Italic" button, type text → text should appear *italic*
✅ Click "Underline" button, type text → text should have underline
✅ Click "Blockquote" button, type text → text should be indented in blockquote style
✅ Buttons should highlight when formatting is applied
✅ No JavaScript console errors

---

## Test 2: Like/Dislike Buttons

### Prerequisites
- Be logged in as an authenticated user
- View a forum topic with existing posts

### Steps

#### Test 2a: Like Button
1. Find a post with like/dislike buttons (👍 and 👎)
2. Click the 👍 (like) button
3. Observe the button color change and like count update
4. Click the 👍 button again to toggle off
5. Observe the button returns to normal state and count decreases

#### Test 2b: Dislike Button
1. Find a different post (or same post after test 2a)
2. Click the 👎 (dislike) button
3. Observe the button color change and dislike count update
4. Click the 👎 button again to toggle off
5. Observe the button returns to normal state and count decreases

#### Test 2c: Switch Like to Dislike
1. Click the 👍 (like) button - should highlight and like count increases
2. Immediately click the 👎 (dislike) button
3. Observe:
   - 👎 button highlights
   - 👍 button returns to normal (no longer highlighted)
   - Like count decreases by 1
   - Dislike count increases by 1

### Expected Results
✅ Like button background changes to blue/primary color when clicked
✅ Dislike button background changes to red/warning color when clicked
✅ Like/dislike counts update immediately (no page reload)
✅ Only one button can be active per post (toggle switches between them)
✅ Clicking active button again deactivates it
✅ All changes persist after page refresh
✅ No 404 or 401 errors in console
✅ Unauthenticated users see like counts but cannot click buttons

---

## Test 3: Reply Navigation with Scroll & Highlight

### Prerequisites
- View a forum topic with multiple posts
- Be logged in

### Steps
1. Click the "Yanıtla" (Reply) button on any post (except the first)
2. Observe:
   - Page smoothly scrolls to the reply form at the bottom
   - A notification appears: "Kullanıcı adı kullanıcısının mesajına yanıtlanıyor"
   - Reply form is focused

3. Look back at the original post you clicked "Reply" on
4. Observe: The post should have a blue/highlight pulsing animation for 2 seconds
5. The animation should fade out smoothly

### Expected Results
✅ Smooth scroll behavior (not instant jump)
✅ Reply form shows the correct "replying to" notification
✅ Target post has blue pulse animation
✅ Animation lasts approximately 2 seconds
✅ Cancel button appears next to submit button
✅ reply_to_id hidden input is populated with post ID

---

## Test 4: Quote Functionality

### Prerequisites
- View a forum topic with multiple posts
- Be logged in

### Steps
1. Click the "Alıntı Yap" (Quote) button on a post
2. Observe:
   - Page scrolls to reply form
   - "Alıntı yapılıyor" notification appears
   - Quote text appears in the editor:
     ```
     [username] yazdı:
     [original post content]
     ```
   - Editor is focused and ready for user to add their response

3. Type some text after the quote
4. Click "Yanıt Gönder" (Send Reply)

### Expected Results
✅ Quote text is inserted into Quill editor
✅ Quote text maintains formatting
✅ User can add their own text before or after the quote
✅ When submitted, reply is attached to the original post (reply_to_id is set)
✅ Quote appears in the published post

---

## Test 5: Reply Submission & Content Preservation

### Prerequisites
- View a forum topic
- Be logged in

### Steps
1. In the reply form, enter formatted content:
   - Regular text
   - **Bold text** (use toolbar)
   - *Italic text* (use toolbar)
   - A list (use list button)
   - A blockquote (use blockquote button)
   
2. Click "🚀 Yanıt Gönder" (Send Reply)
3. Wait for page refresh and scroll down to see new post

### Expected Results
✅ Form disables (button shows "Gönderiliyor...")
✅ Post is created successfully
✅ New post appears at bottom of topic
✅ All formatting is preserved:
   - Bold text is bold
   - Italic text is italic
   - Lists are formatted as lists
   - Blockquotes are indented
✅ Posted by information shows current user
✅ Timestamp is current

---

## Test 6: Unauthenticated User Behavior

### Prerequisites
- Not logged in / logged out

### Steps
1. Navigate to a forum topic
2. Observe the reply section

### Expected Results
✅ Like/dislike buttons visible but disabled
✅ Like/dislike counts visible
✅ Reply form replaced with login prompt:
   "Yanıt göndermek için giriş yapmalısınız."
✅ "Giriş Yap" link directs to login page

---

## Test 7: Console & Network Errors

### Prerequisites
- Open browser Developer Tools (F12)
- Go to Console tab

### Steps
1. Perform all tests above while monitoring console
2. Click like buttons and check Network tab
3. Submit replies and check Network tab

### Expected Results
✅ No red error messages in Console
✅ No JavaScript exceptions
✅ Network requests to `/forum/posts/{id}/like` return HTTP 200
✅ Like requests return JSON with: `action`, `likes`, `dislikes`, `user_action`
✅ Form submission uses POST method with CSRF token

---

## Troubleshooting

### Issue: Editor not showing
**Solution**: Check browser console for JavaScript errors. Ensure Quill CDN is accessible:
```
https://cdn.quilljs.com/1.3.7/quill.snow.css
https://cdn.quilljs.com/1.3.7/quill.min.js
```

### Issue: Like buttons not responding
**Solution**: 
- Verify you're logged in (like buttons are disabled for guests)
- Check browser console for network errors
- Verify route `/forum/posts/{id}/like` is accessible
- Check that ForumLike table exists in database

### Issue: Format buttons not working
**Solution**:
- Verify Quill toolbar buttons are clickable
- Check that `#editor-container` div exists in HTML
- Ensure Quill JavaScript is loaded (check Network tab)
- Check console for initialization errors

### Issue: Scroll not working after click
**Solution**:
- Verify JavaScript is enabled
- Check that reply form has `id="reply-form"`
- Verify target post has `id="post-{id}"` attribute
- Check console for `scrollIntoView` errors

---

## Performance Notes

- Like requests should complete within 100-500ms
- Editor should respond to typing immediately
- Scroll animations should be smooth (60fps)
- No page reload required for like/dislike operations

---

## Browser Compatibility

Tested on:
- Chrome 90+
- Firefox 88+
- Edge 90+
- Safari 14+

Quill.js supports all modern browsers with ES6 support.