forked from jsnbuchanan/crowd-funder-for-time-pwa
fix: Remove explicit axios declaration in ClaimAddRawView
- Remove conflicting axios!: AxiosStatic declaration - Let Vue's axios plugin handle injection naturally - Fix HTTP request errors in raw claim editor - Clean up unused AxiosStatic import - Verified build and lint success
This commit is contained in:
132
docs/migration-testing/TESTING_CLAIMADDRAWVIEW.md
Normal file
132
docs/migration-testing/TESTING_CLAIMADDRAWVIEW.md
Normal file
@@ -0,0 +1,132 @@
|
|||||||
|
# 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
|
||||||
@@ -30,17 +30,16 @@
|
|||||||
|
|
||||||
<script lang="ts">
|
<script lang="ts">
|
||||||
import { Component, Vue } from "vue-facing-decorator";
|
import { Component, Vue } from "vue-facing-decorator";
|
||||||
import { AxiosResponse, AxiosStatic } from "axios";
|
import { AxiosResponse } from "axios";
|
||||||
|
|
||||||
import QuickNav from "../components/QuickNav.vue";
|
import QuickNav from "../components/QuickNav.vue";
|
||||||
import { NotificationIface } from "../constants/app";
|
import { NotificationIface } from "../constants/app";
|
||||||
import * as databaseUtil from "../db/databaseUtil";
|
|
||||||
import { logConsoleAndDb } from "../db/databaseUtil";
|
|
||||||
import * as serverUtil from "../libs/endorserServer";
|
import * as serverUtil from "../libs/endorserServer";
|
||||||
import * as libsUtil from "../libs/util";
|
import * as libsUtil from "../libs/util";
|
||||||
import { errorStringForLog } from "../libs/endorserServer";
|
import { errorStringForLog } from "../libs/endorserServer";
|
||||||
import { Router, RouteLocationNormalizedLoaded } from "vue-router";
|
import { Router, RouteLocationNormalizedLoaded } from "vue-router";
|
||||||
import { logger } from "../utils/logger";
|
import { logger } from "../utils/logger";
|
||||||
|
import { PlatformServiceMixin } from "@/utils/PlatformServiceMixin";
|
||||||
|
|
||||||
// Type guard for API responses
|
// Type guard for API responses
|
||||||
function isApiResponse(response: unknown): response is AxiosResponse {
|
function isApiResponse(response: unknown): response is AxiosResponse {
|
||||||
@@ -52,18 +51,39 @@ function isApiResponse(response: unknown): response is AxiosResponse {
|
|||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// TODO: Testing Required - Database Operations + Logging Migration to PlatformServiceMixin
|
||||||
|
// Priority: High | Migrated: 2025-07-06 | Author: Matthew Raymer
|
||||||
|
//
|
||||||
|
// MIGRATION DETAILS: Migrated from legacy database utilities + logging to PlatformServiceMixin
|
||||||
|
// - Replaced legacy logging calls with this.$logAndConsole()
|
||||||
|
// - Replaced legacy settings retrieval with this.$accountSettings()
|
||||||
|
// - Removed legacy database and logging imports
|
||||||
|
//
|
||||||
|
// TESTING NEEDED: Raw claim editor functionality
|
||||||
|
// 1. Test basic page load: /claim-add-raw (JSON editor displays)
|
||||||
|
// 2. Test with sample JSON: /claim-add-raw?claim={"type":"example","data":"test"}
|
||||||
|
// 3. Test JSON validation (valid/invalid JSON handling)
|
||||||
|
// 4. Test claim submission functionality
|
||||||
|
// 5. Test error scenarios: network failure, invalid JSON, server errors
|
||||||
|
// 6. Verify error logging appears in console and database
|
||||||
|
// 7. Cross-platform testing: web, mobile, desktop
|
||||||
|
//
|
||||||
|
// Test URLs:
|
||||||
|
// /claim-add-raw (basic editor)
|
||||||
|
// /claim-add-raw?claim={"type":"test","data":"sample"}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* View component for adding or editing raw claim data
|
* View component for adding or editing raw claim data
|
||||||
* Allows direct JSON editing of claim data with validation and submission
|
* Allows direct JSON editing of claim data with validation and submission
|
||||||
*/
|
*/
|
||||||
@Component({
|
@Component({
|
||||||
components: { QuickNav },
|
components: { QuickNav },
|
||||||
|
mixins: [PlatformServiceMixin],
|
||||||
})
|
})
|
||||||
export default class ClaimAddRawView extends Vue {
|
export default class ClaimAddRawView extends Vue {
|
||||||
$notify!: (notification: NotificationIface, timeout?: number) => void;
|
$notify!: (notification: NotificationIface, timeout?: number) => void;
|
||||||
$route!: RouteLocationNormalizedLoaded;
|
$route!: RouteLocationNormalizedLoaded;
|
||||||
$router!: Router;
|
$router!: Router;
|
||||||
axios!: AxiosStatic; // Using any to avoid type conflicts with Vue's axios property
|
|
||||||
|
|
||||||
accountIdentityStr: string = "null";
|
accountIdentityStr: string = "null";
|
||||||
activeDid = "";
|
activeDid = "";
|
||||||
@@ -88,7 +108,7 @@ export default class ClaimAddRawView extends Vue {
|
|||||||
* Initialize settings from active account
|
* Initialize settings from active account
|
||||||
*/
|
*/
|
||||||
private async initializeSettings() {
|
private async initializeSettings() {
|
||||||
const settings = await databaseUtil.retrieveSettingsForActiveAccount();
|
const settings = await this.$accountSettings();
|
||||||
this.activeDid = settings.activeDid || "";
|
this.activeDid = settings.activeDid || "";
|
||||||
this.apiServer = settings.apiServer || "";
|
this.apiServer = settings.apiServer || "";
|
||||||
}
|
}
|
||||||
@@ -175,7 +195,7 @@ export default class ClaimAddRawView extends Vue {
|
|||||||
* Handle error loading claim data
|
* Handle error loading claim data
|
||||||
*/
|
*/
|
||||||
private handleClaimError(error: unknown) {
|
private handleClaimError(error: unknown) {
|
||||||
logConsoleAndDb(
|
this.$logAndConsole(
|
||||||
"Error retrieving claim: " + errorStringForLog(error),
|
"Error retrieving claim: " + errorStringForLog(error),
|
||||||
true,
|
true,
|
||||||
);
|
);
|
||||||
|
|||||||
Reference in New Issue
Block a user