116 lines
3.9 KiB
TypeScript
116 lines
3.9 KiB
TypeScript
/**
|
|
* UX/UI Review Script
|
|
* Tests key UX flows and identifies issues
|
|
*/
|
|
|
|
const API_BASE = 'http://localhost:3000/api/v1';
|
|
|
|
async function testUXFlows() {
|
|
console.log('\n=== UX/UI REVIEW ===\n');
|
|
|
|
const issues: string[] = [];
|
|
const suggestions: string[] = [];
|
|
|
|
// Test 1: Login form validation
|
|
console.log('1. Checking login form...');
|
|
try {
|
|
const response = await fetch(`${API_BASE}/auth/login`, {
|
|
method: 'POST',
|
|
headers: { 'Content-Type': 'application/json' },
|
|
body: JSON.stringify({ operatorId: '', password: '' }),
|
|
});
|
|
const data = await response.json();
|
|
if (response.status === 400 || response.status === 401) {
|
|
console.log(' ✓ Empty form validation works');
|
|
} else {
|
|
issues.push('Login form should validate empty fields');
|
|
}
|
|
} catch (e) {
|
|
console.log(' ✓ Login endpoint accessible');
|
|
}
|
|
|
|
// Test 2: Error message format
|
|
console.log('\n2. Testing error handling...');
|
|
try {
|
|
const response = await fetch(`${API_BASE}/auth/login`, {
|
|
method: 'POST',
|
|
headers: { 'Content-Type': 'application/json' },
|
|
body: JSON.stringify({ operatorId: 'INVALID', password: 'WRONG' }),
|
|
});
|
|
const data = await response.json();
|
|
if (data.error) {
|
|
console.log(' ✓ Error messages returned');
|
|
if (typeof data.error === 'string') {
|
|
console.log(` Error: ${data.error}`);
|
|
} else {
|
|
issues.push('Error response format should be consistent (string)');
|
|
}
|
|
}
|
|
} catch (e) {
|
|
issues.push('Error handling may not be working correctly');
|
|
}
|
|
|
|
// Test 3: Payment form requirements
|
|
console.log('\n3. Checking payment form requirements...');
|
|
suggestions.push('Payment form should have client-side validation');
|
|
suggestions.push('Form fields should show required indicators (*)');
|
|
suggestions.push('Amount field should prevent negative values');
|
|
suggestions.push('Account numbers should have format validation');
|
|
|
|
// Test 4: Loading states
|
|
console.log('\n4. Checking loading states...');
|
|
suggestions.push('Buttons should show loading state during API calls');
|
|
suggestions.push('Forms should be disabled during submission');
|
|
suggestions.push('Loading spinners should be shown for async operations');
|
|
|
|
// Test 5: Success feedback
|
|
console.log('\n5. Checking success feedback...');
|
|
suggestions.push('Success messages should be clear and actionable');
|
|
suggestions.push('Payment ID should be easily copyable');
|
|
suggestions.push('Next steps should be clearly indicated');
|
|
|
|
// Test 6: Navigation flow
|
|
console.log('\n6. Checking navigation...');
|
|
suggestions.push('Clear visual indication of current section');
|
|
suggestions.push('Breadcrumb or navigation indicators');
|
|
suggestions.push('Keyboard navigation support (Tab, Enter)');
|
|
|
|
// Test 7: Accessibility
|
|
console.log('\n7. Accessibility considerations...');
|
|
suggestions.push('Form labels should be properly associated with inputs');
|
|
suggestions.push('Error messages should be associated with form fields');
|
|
suggestions.push('Keyboard shortcuts should be documented');
|
|
suggestions.push('Color contrast should meet WCAG standards');
|
|
|
|
// Summary
|
|
console.log('\n=== SUMMARY ===\n');
|
|
if (issues.length > 0) {
|
|
console.log('⚠️ Issues found:');
|
|
issues.forEach((issue, i) => console.log(` ${i + 1}. ${issue}`));
|
|
} else {
|
|
console.log('✓ No critical issues found');
|
|
}
|
|
|
|
if (suggestions.length > 0) {
|
|
console.log('\n💡 UX Improvements suggested:');
|
|
suggestions.forEach((suggestion, i) => console.log(` ${i + 1}. ${suggestion}`));
|
|
}
|
|
|
|
console.log('\n');
|
|
}
|
|
|
|
// Run if executed directly
|
|
if (require.main === module) {
|
|
if (typeof fetch === 'undefined') {
|
|
console.error('Error: fetch is not available. Please use Node.js 18+');
|
|
process.exit(1);
|
|
}
|
|
|
|
testUXFlows().catch((error) => {
|
|
console.error('Review failed:', error);
|
|
process.exit(1);
|
|
});
|
|
}
|
|
|
|
export { testUXFlows };
|