# ClaimAddRawView.vue Testing Guide

## Quick Testing Setup
- Web server running at: `http://localhost:3000`
- Migration completed: 2025-07-06
- Component: `src/views/ClaimAddRawView.vue`
- Route: `/claim-add-raw/:id?`

## Test URLs (Copy/Paste into Browser)

### 1. Basic JSON Editor
```
http://localhost:3000/claim-add-raw
```
**Expected**: Raw claim JSON editor loads with empty textarea

### 2. Pre-filled JSON Example
```
http://localhost:3000/claim-add-raw?claim={"type":"example","data":"test claim"}
```
**Expected**: Editor loads with formatted JSON in textarea

### 3. With Optional ID Parameter
```
http://localhost:3000/claim-add-raw/some-test-id
```
**Expected**: Editor loads normally (ID available in route params)

### 4. Invalid JSON Test
Navigate to basic page and paste this invalid JSON:
```
{"invalid": json, "missing": quotes}
```
**Expected**: JSON parsing handled gracefully

## Browser Developer Tools Validation

### Console Tab
- Check for errors during page load
- Verify error logging works (test invalid operations)
- Look for properly formatted log messages

### Application Tab
- Navigate to: IndexedDB → TimeSafari
- Check `logs` table for error entries if any errors occur
- Verify settings are loaded correctly

### Network Tab
- Monitor API calls during claim submission
- Check headers and authentication

## Testing Checklist

### Web Platform (Chrome) ✅/❌
- [ ] Basic page loads without errors
- [ ] JSON editor displays correctly
- [ ] Pre-filled JSON from query param works
- [ ] JSON validation works (valid/invalid)
- [ ] Settings load from database correctly
- [ ] Error handling works (network failures)
- [ ] Logging works (console + database)
- [ ] Claim submission functionality works

### Functional Tests

#### Basic Functionality
- [ ] **Page Load**: Navigate to `/claim-add-raw`
- [ ] **UI Elements**: JSON textarea and "Sign & Send" button visible
- [ ] **Back Button**: Navigation back button works

#### JSON Handling
- [ ] **Valid JSON**: Paste valid JSON, verify formatting
- [ ] **Invalid JSON**: Paste invalid JSON, check error handling
- [ ] **Query Param**: Test with `?claim={"test":"data"}`
- [ ] **Empty State**: Editor handles empty/null claims

#### Database Operations
- [ ] **Settings Load**: Account settings retrieved correctly
- [ ] **Error Logging**: Errors logged to database logs table
- [ ] **Persistence**: Settings persist across page refreshes

#### API Integration
- [ ] **Claim Submission**: Submit valid claim (requires server)
- [ ] **Error Handling**: Network errors handled gracefully
- [ ] **Authentication**: Headers and DID authentication work

#### Error Scenarios
- [ ] **Network Failure**: Test offline/network errors
- [ ] **Invalid Claims**: Submit malformed data
- [ ] **Server Errors**: Handle API error responses
- [ ] **Missing Settings**: Handle missing account settings

### Expected Database Operations
- **Settings Retrieval**: `this.$accountSettings()` loads activeDid and apiServer
- **Error Logging**: `this.$logAndConsole()` writes to logs table
- **Persistence**: Data survives page refresh

### Success Criteria
- ✅ No console errors during normal operation
- ✅ JSON editor loads and functions correctly
- ✅ Claims can be formatted and edited
- ✅ Error scenarios handled gracefully
- ✅ Database operations work correctly
- ✅ Logging functions as expected

## Sample Test Data

### Valid Claim JSON
```json
{
  "type": "GiveAction",
  "recipient": "did:ethr:0x1234567890123456789012345678901234567890",
  "amount": "10",
  "description": "Test claim for migration validation"
}
```

### Invalid JSON (for error testing)
```
{"invalid": json, missing: "quotes", trailing,}
```

## Navigation Testing
- **Entry Points**: Direct URL, navigation from other views
- **Exit Points**: Back button, form submission redirect
- **Deep Links**: URLs with parameters and query strings

## Notes
- Component handles raw JSON editing for claims
- Requires valid account settings (activeDid, apiServer)
- Claims submitted via endorser server API
- Error handling includes both UI notifications and logging