crowd-funder-for-time-pwa/docs/migration-testing/TESTING_CLAIMADDRAWVIEW.md

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

{
  "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