# CRUD Operations - Testing Guide

## Pre-Test Checklist

- [ ] Server is running (XAMPP Apache/MySQL)
- [ ] Application URL is accessible
- [ ] Browser console is open (F12)
- [ ] Network tab enabled to monitor requests
- [ ] Database has test data or is ready for new entries

---

## Test Suite 1: CREATE Operation (Add User)

### Test Case 1.1: Create User with Valid Data
**Steps:**
1. Navigate to User Management page
2. Click "Add New User" button
3. Fill all fields with valid data:
   - User ID: 999
   - Employee ID: EMP999
   - User Name: Test User
   - DOB: 1990-01-01
   - Department: IT
   - Location: Office
   - Email: testuser@example.com
   - Password: Test@123
   - Confirm Password: Test@123
   - Mobile: 1234567890
   - Role: User
   - Status: Active
   - Notes: Test user for CRUD testing

4. Click Submit button
5. Verify:
   - [ ] Green "User created successfully!" alert appears
   - [ ] Alert slides in from right
   - [ ] Modal automatically closes
   - [ ] Page reloads after 1.5 seconds
   - [ ] New user appears in table
   - [ ] Network tab shows POST /users (201 status)
   - [ ] Request has X-CSRF-TOKEN header
   - [ ] Response contains: `{ success: true }`

**Expected Result:** ✅ User created successfully

---

### Test Case 1.2: Password Validation - Mismatch
**Steps:**
1. Click "Add New User"
2. Fill form with:
   - Password: Test@123
   - Confirm Password: Test@456
3. Click Submit

**Verify:**
- [ ] Red "Passwords do not match!" alert appears
- [ ] Modal stays open
- [ ] Form fields retain values
- [ ] No network request sent
- [ ] No database changes

**Expected Result:** ✅ Validation error shown locally

---

### Test Case 1.3: Password Validation - Too Short
**Steps:**
1. Click "Add New User"
2. Fill form with:
   - Password: pass
   - Confirm Password: pass
3. Click Submit

**Verify:**
- [ ] Red "Password must be at least 6 characters!" alert
- [ ] Modal stays open
- [ ] Form retains values
- [ ] No network request

**Expected Result:** ✅ Length validation triggered

---

### Test Case 1.4: Duplicate Email Validation
**Steps:**
1. Click "Add New User"
2. Fill form with:
   - All valid data
   - Email: admin@example.com (existing email)
3. Click Submit

**Verify:**
- [ ] Red error alert appears (validation error message)
- [ ] Alert contains "already been taken" or similar
- [ ] Modal stays open
- [ ] Form retains values except password
- [ ] Network tab shows POST request with 422 status
- [ ] Response contains errors array

**Expected Result:** ✅ Server validation error caught

---

### Test Case 1.5: Missing Required Fields
**Steps:**
1. Click "Add New User"
2. Leave required fields blank (user_id, user_name, email, password)
3. Click Submit

**Verify:**
- [ ] HTML5 validation prevents submission OR
- [ ] Red error alert shows first validation error
- [ ] Modal stays open
- [ ] Form prevents submission

**Expected Result:** ✅ Required field validation works

---

## Test Suite 2: READ Operation (View User)

### Test Case 2.1: View User Details
**Steps:**
1. In user table, find any user row
2. Click the eye icon (view button)
3. Observe the view modal

**Verify:**
- [ ] Modal opens with title
- [ ] All user data displays:
  - [ ] User ID
  - [ ] User Name
  - [ ] Department ID
  - [ ] Location ID
  - [ ] Email ID
  - [ ] Status
  - [ ] Created Date
  - [ ] Role
- [ ] Text is clearly visible (dark color)
- [ ] Labels are dark (#0f172a)
- [ ] All fields are read-only (not editable)
- [ ] No network request made
- [ ] No form submission

**Expected Result:** ✅ User data displayed correctly

---

### Test Case 2.2: View Modal - Close Button
**Steps:**
1. Open any user's view modal
2. Click outside modal or close button

**Verify:**
- [ ] Modal closes
- [ ] Overlay disappears
- [ ] Page returns to normal state
- [ ] No changes made

**Expected Result:** ✅ Modal closes without action

---

### Test Case 2.3: View Multiple Users
**Steps:**
1. Click view icon for User A
2. Verify data is correct
3. Close modal
4. Click view icon for User B
5. Verify data is correct (different from User A)

**Verify:**
- [ ] Each modal shows correct user's data
- [ ] No data leakage between users
- [ ] Modals can be opened/closed multiple times

**Expected Result:** ✅ Correct user data shown each time

---

## Test Suite 3: UPDATE Operation (Edit User)

### Test Case 3.1: Edit User with Valid Data
**Steps:**
1. In user table, find the test user created in 1.1
2. Click the pencil icon (edit button)
3. Modify fields:
   - User Name: Updated Test User
   - Email: newemail@example.com
   - Mobile: 9876543210
   - Status: Inactive
4. Click Save button

**Verify:**
- [ ] Edit modal opens
- [ ] All fields pre-filled with current values
- [ ] Changes can be made to fields
- [ ] Click Save triggers AJAX PUT request
- [ ] Network tab shows PUT /users/{id} (200 status)
- [ ] Request has X-CSRF-TOKEN header
- [ ] Green "User updated successfully!" alert
- [ ] Modal closes
- [ ] Page reloads
- [ ] Changes visible in table

**Expected Result:** ✅ User updated successfully

---

### Test Case 3.2: Edit - Duplicate Email Error
**Steps:**
1. Click edit on User A
2. Change email to another existing user's email
3. Click Save

**Verify:**
- [ ] Network request sent (PUT)
- [ ] Server returns 422 validation error
- [ ] Red error alert shows "already been taken"
- [ ] Modal stays open
- [ ] Form retains all changes
- [ ] No database changes

**Expected Result:** ✅ Uniqueness validation prevents update

---

### Test Case 3.3: Edit - Required Field Empty
**Steps:**
1. Click edit on a user
2. Clear a required field (user_name, email, role, status)
3. Click Save

**Verify:**
- [ ] Server validation fails
- [ ] 422 response with validation error
- [ ] Red error alert displays
- [ ] Modal stays open
- [ ] Database unchanged

**Expected Result:** ✅ Required field validation works

---

### Test Case 3.4: Edit - Cancel Without Saving
**Steps:**
1. Click edit on a user
2. Make changes to fields
3. Click close/cancel without saving

**Verify:**
- [ ] Modal closes
- [ ] Changes are NOT saved
- [ ] No network request sent
- [ ] Database unchanged
- [ ] Table shows original data

**Expected Result:** ✅ Cancel works without side effects

---

### Test Case 3.5: Edit - Only Optional Fields
**Steps:**
1. Click edit on a user
2. Change only optional fields (mobile, notes)
3. Keep required fields unchanged
4. Click Save

**Verify:**
- [ ] PUT request succeeds
- [ ] Only changed fields updated in DB
- [ ] Other fields unchanged
- [ ] Success alert shows
- [ ] Changes visible after reload

**Expected Result:** ✅ Partial updates work correctly

---

## Test Suite 4: DELETE Operation (Remove User)

### Test Case 4.1: Delete User - Full Flow
**Steps:**
1. In user table, find the test user
2. Click the trash icon (delete button)
3. View confirmation modal
4. Click "Confirm Delete" button
5. Browser shows confirmation dialog
6. Click "OK" to confirm

**Verify:**
- [ ] Delete modal opens with user name in message
- [ ] Confirmation message is clear: "Are you sure..."
- [ ] Text "This action cannot be undone" visible
- [ ] Click "Confirm Delete" triggers browser confirm()
- [ ] User clicks "OK" in browser dialog
- [ ] Network tab shows DELETE /users/{id} (200 status)
- [ ] Request has X-CSRF-TOKEN header
- [ ] Green "User deleted successfully!" alert
- [ ] Modal closes
- [ ] Page reloads
- [ ] User no longer in table

**Expected Result:** ✅ User deleted successfully

---

### Test Case 4.2: Delete User - Cancel at Browser Dialog
**Steps:**
1. Click delete icon
2. Click "Confirm Delete"
3. Browser dialog appears
4. Click "Cancel"

**Verify:**
- [ ] Browser dialog closes
- [ ] No DELETE request sent
- [ ] Modal stays open
- [ ] No page reload
- [ ] User still in table/database

**Expected Result:** ✅ Cancel prevents deletion

---

### Test Case 4.3: Delete User - Cancel at Modal
**Steps:**
1. Click delete icon
2. Click close button on modal (without clicking Confirm)

**Verify:**
- [ ] Modal closes
- [ ] No delete operation
- [ ] No network request
- [ ] User remains in table

**Expected Result:** ✅ Close modal without action

---

### Test Case 4.4: Delete Non-Existent User
**Steps:**
1. Manually go to browser console
2. Run: `handleDeleteUser(99999)` (invalid ID)
3. Click OK on browser dialog

**Verify:**
- [ ] Network request sent with invalid ID
- [ ] Server returns 404 error
- [ ] Red error alert appears
- [ ] Modal closes
- [ ] Page does NOT reload

**Expected Result:** ✅ 404 error handled gracefully

---

## Test Suite 5: Alert Notifications

### Test Case 5.1: Success Alert
**Steps:**
1. Create a new user successfully
2. Watch alert appear and disappear

**Verify:**
- [ ] Alert appears in top-right corner
- [ ] Background color is green (#d1fae5)
- [ ] Text color is dark green (#065f46)
- [ ] Border is green (#10b981)
- [ ] Slides in from right (animation)
- [ ] Auto-dismisses after ~4 seconds
- [ ] Smooth animation

**Expected Result:** ✅ Alert displays and dismisses correctly

---

### Test Case 5.2: Error Alert
**Steps:**
1. Try to create user with duplicate email
2. Watch error alert

**Verify:**
- [ ] Alert appears in top-right corner
- [ ] Background color is red (#fee2e2)
- [ ] Text color is dark red (#991b1b)
- [ ] Border is red (#ef4444)
- [ ] Message is readable
- [ ] Auto-dismisses after ~4 seconds

**Expected Result:** ✅ Error alert displays correctly

---

### Test Case 5.3: Multiple Alerts
**Steps:**
1. Try to create user with mismatched password
2. Alert should show
3. Try again with correct password but duplicate email
4. Different error alert should show

**Verify:**
- [ ] Each alert displays correct message
- [ ] New alert replaces old alert
- [ ] Colors match alert type
- [ ] Auto-dismiss works for each

**Expected Result:** ✅ Multiple alerts work correctly

---

## Test Suite 6: Modal Management

### Test Case 6.1: Modal Opens/Closes
**Steps:**
1. Open add modal
2. Close modal
3. Open view modal
4. Close modal
5. Open edit modal
6. Close modal

**Verify:**
- [ ] Each modal opens correctly
- [ ] Modal backdrop shows/disappears
- [ ] Form fields visible in create/edit
- [ ] Read-only content visible in view
- [ ] Close button works
- [ ] Clicking outside closes (if configured)
- [ ] No JavaScript errors in console

**Expected Result:** ✅ All modals work correctly

---

### Test Case 6.2: Modal Form State
**Steps:**
1. Open create modal
2. Fill some fields
3. Close modal (without submitting)
4. Reopen create modal

**Verify:**
- [ ] Form fields are empty (reset)
- [ ] Previous values not retained
- [ ] Ready for new entry

**Expected Result:** ✅ Form resets on open

---

## Test Suite 7: Cross-Browser Testing

### Test Case 7.1: Chrome/Chromium
**Steps:**
1. Run all tests in Chrome
2. Check console for errors
3. Check performance

**Verify:**
- [ ] All operations work
- [ ] No JavaScript errors
- [ ] Alerts display correctly
- [ ] No CSS issues
- [ ] Performance is smooth

**Expected Result:** ✅ Full support

---

### Test Case 7.2: Firefox
**Steps:**
1. Run key tests in Firefox
2. Check console
3. Test form submission

**Verify:**
- [ ] Forms submit correctly
- [ ] AJAX works
- [ ] Alerts display
- [ ] No compatibility issues

**Expected Result:** ✅ Full support

---

### Test Case 7.3: Safari
**Steps:**
1. Run key tests in Safari
2. Check console
3. Test modal functionality

**Verify:**
- [ ] Modals open/close
- [ ] Forms work
- [ ] Animations smooth
- [ ] No Safari-specific issues

**Expected Result:** ✅ Full support

---

## Test Suite 8: Network & Performance

### Test Case 8.1: Network Requests
**Steps:**
1. Open Network tab in DevTools
2. Create a user
3. Check request/response

**Verify:**
- [ ] POST /users request visible
- [ ] Status: 201
- [ ] Headers include:
  - [ ] X-CSRF-TOKEN
  - [ ] Accept: application/json
  - [ ] Content-Type: (multipart or form-data)
- [ ] Response includes: `{ success: true }`
- [ ] Response time < 1s

**Expected Result:** ✅ Network communication correct

---

### Test Case 8.2: CSRF Token
**Steps:**
1. Create new user
2. Check network request
3. Inspect headers

**Verify:**
- [ ] X-CSRF-TOKEN present in headers
- [ ] Token matches meta tag value
- [ ] Token sent in all CRUD requests
- [ ] Server accepts token

**Expected Result:** ✅ CSRF protection working

---

### Test Case 8.3: Page Reload Timing
**Steps:**
1. Create/Update/Delete a user
2. Time from success alert to page reload

**Verify:**
- [ ] Alert shows immediately (< 100ms)
- [ ] Reload happens after ~1.5s
- [ ] Sufficient time for user to see success message
- [ ] Page reloads show fresh data

**Expected Result:** ✅ Timing is appropriate

---

## Test Suite 9: Data Integrity

### Test Case 9.1: Database Values Persist
**Steps:**
1. Create user with specific data
2. Refresh page
3. Check if data is still there

**Verify:**
- [ ] User appears in table
- [ ] All fields have correct values
- [ ] Email is exactly as entered
- [ ] Status matches selection

**Expected Result:** ✅ Data saved correctly

---

### Test Case 9.2: Password Hashing
**Steps:**
1. Create user with password: TestPass123
2. Check database directly

**Verify:**
- [ ] Password is hashed (not plain text)
- [ ] Hash starts with $2y$ (bcrypt)
- [ ] Password length > 20 characters
- [ ] Different users have different hashes

**Expected Result:** ✅ Passwords hashed correctly

---

### Test Case 9.3: Timestamp Fields
**Steps:**
1. Create a user
2. Check created_at and updated_at fields

**Verify:**
- [ ] created_at is current date/time
- [ ] updated_at is current date/time
- [ ] Format is correct (YYYY-MM-DD HH:MM:SS)
- [ ] Edit user, updated_at changes

**Expected Result:** ✅ Timestamps recorded correctly

---

## Test Suite 10: Edge Cases

### Test Case 10.1: Special Characters in Input
**Steps:**
1. Create user with:
   - Name: "O'Brien & Co."
   - Notes: "Test <script>alert('xss')</script>"
2. Save and view

**Verify:**
- [ ] Special characters saved correctly
- [ ] Script tags NOT executed
- [ ] Data displayed as-is (escaped)
- [ ] No XSS vulnerability

**Expected Result:** ✅ Input sanitization working

---

### Test Case 10.2: Very Long Input
**Steps:**
1. Create user with:
   - Notes: 500+ character string
2. Save and view

**Verify:**
- [ ] Long text saved
- [ ] Displays correctly
- [ ] No truncation (unless max length)
- [ ] Form accepts it

**Expected Result:** ✅ Long inputs handled

---

### Test Case 10.3: SQL Injection Attempt
**Steps:**
1. Try to create user with:
   - Name: "'; DROP TABLE users; --"
2. Save

**Verify:**
- [ ] Input saved as literal string
- [ ] No SQL executed
- [ ] Table still exists
- [ ] Data treated as string

**Expected Result:** ✅ SQL injection prevented

---

## Test Suite 11: Validation Edge Cases

### Test Case 11.1: Email Format Validation
**Steps:**
1. Try to create user with invalid emails:
   - missing@
   - @example.com
   - test@.com
   - test domain.com

**Verify:**
- [ ] Server rejects invalid format
- [ ] Error alert shows
- [ ] Modal stays open
- [ ] User can correct

**Expected Result:** ✅ Email format validated

---

### Test Case 11.2: Numeric Field Validation
**Steps:**
1. Try to create user with:
   - User ID: "ABC" (should be numeric)
   - Mobile: "abc123"
2. Submit

**Verify:**
- [ ] Server rejects non-numeric
- [ ] Error alert shows
- [ ] Database unchanged

**Expected Result:** ✅ Type validation works

---

### Test Case 11.3: Date Field Validation
**Steps:**
1. Try to create user with:
   - DOB: "invalid date"
   - DOB: "32/13/2024"
2. Submit

**Verify:**
- [ ] Server rejects invalid date
- [ ] Error alert shows
- [ ] Database unchanged

**Expected Result:** ✅ Date validation works

---

## Test Report Template

```
CRUD Operation Test Report
Date: _______________
Tester: _______________
Browser: _______________
Environment: _______________

TEST SUITE RESULTS:
- Suite 1 (Create): [ ] PASS [ ] FAIL
- Suite 2 (Read): [ ] PASS [ ] FAIL
- Suite 3 (Update): [ ] PASS [ ] FAIL
- Suite 4 (Delete): [ ] PASS [ ] FAIL
- Suite 5 (Alerts): [ ] PASS [ ] FAIL
- Suite 6 (Modals): [ ] PASS [ ] FAIL
- Suite 7 (Browsers): [ ] PASS [ ] FAIL
- Suite 8 (Network): [ ] PASS [ ] FAIL
- Suite 9 (Data): [ ] PASS [ ] FAIL
- Suite 10 (Edge Cases): [ ] PASS [ ] FAIL
- Suite 11 (Validation): [ ] PASS [ ] FAIL

OVERALL: [ ] PASS [ ] FAIL

Issues Found:
1. _______________
2. _______________
3. _______________

Recommendations:
1. _______________
2. _______________

Signed: _______________
```

---

## Quick Smoke Test (5 minutes)

If you only have 5 minutes, run this quick test:

1. ✅ Create User
   - Click "Add User" → Fill form → Submit → See success alert → User in table

2. ✅ View User
   - Click eye icon → See user details → Close modal

3. ✅ Edit User
   - Click edit icon → Change email → Save → See success alert → User updated

4. ✅ Delete User
   - Click trash → Confirm → User deleted

**Result**: If all 4 pass, CRUD is working! ✅

---

**Testing Duration**: 1-2 hours for full suite
**Quick Test Duration**: 5 minutes
**Status**: Ready for QA testing

Good luck with testing! 🚀