{{ error.stack }}
+ {{ currentActivity }}
+You are currently offline. Please check your connection.
', + { + status: 503, + statusText: 'Service Unavailable', + headers: { 'Content-Type': 'text/html' } + } + ) +} + +/** + * Default handler for other requests + */ +async function handleDefault(request) { + return networkFirst(request, DYNAMIC_CACHE) +} + +/** + * Cache-first strategy: Check cache, fallback to network + */ +async function cacheFirst(request, cacheName, maxAge = Infinity) { + const cachedResponse = await caches.match(request) + + if (cachedResponse && !isExpired(cachedResponse, maxAge)) { + return cachedResponse + } + + try { + const networkResponse = await fetch(request) + + if (networkResponse.ok) { + const cache = await caches.open(cacheName) + cache.put(request, networkResponse.clone()) + return networkResponse + } + + // Return cached response even if expired if network fails + return cachedResponse || networkResponse + } catch (error) { + console.log('Service Worker: Network error in cache-first', error) + return cachedResponse || new Response('Network Error', { status: 503 }) + } +} + +/** + * Network-first strategy: Try network, fallback to cache + */ +async function networkFirst(request, cacheName, maxAge = Infinity) { + try { + const networkResponse = await fetch(request) + + if (networkResponse.ok) { + const cache = await caches.open(cacheName) + cache.put(request, networkResponse.clone()) + return networkResponse + } + } catch (error) { + console.log('Service Worker: Network error in network-first', error) + } + + const cachedResponse = await caches.match(request) + if (cachedResponse && !isExpired(cachedResponse, maxAge)) { + return cachedResponse + } + + return new Response('Network Error', { status: 503 }) +} + +/** + * Stale-while-revalidate strategy: Return cache immediately, update in background + */ +async function staleWhileRevalidate(request, cacheName, maxAge = Infinity) { + const cachedResponse = await caches.match(request) + + // Always fetch from network in background + const networkResponsePromise = fetch(request).then(response => { + if (response.ok) { + const cache = caches.open(cacheName) + cache.then(c => c.put(request, response.clone())) + } + return response + }).catch(error => { + console.log('Service Worker: Background fetch failed', error) + }) + + // Return cached response if available and not expired + if (cachedResponse && !isExpired(cachedResponse, maxAge)) { + return cachedResponse + } + + // Wait for network response if no valid cache + return networkResponsePromise || new Response('Network Error', { status: 503 }) +} + +/** + * Check if a cached response is expired + */ +function isExpired(response, maxAge) { + if (maxAge === Infinity) return false + + const cachedTime = response.headers.get('sw-cache-time') + if (!cachedTime) return false + + return Date.now() - parseInt(cachedTime) > maxAge +} + +/** + * Find matching API cache strategy + */ +function findApiCacheStrategy(pathname) { + for (const pattern in API_CACHE_STRATEGIES) { + if (pathname.startsWith(pattern)) { + return pattern + } + } + return null +} + +/** + * Check if URL is for a static asset + */ +function isStaticAsset(pathname) { + return /\.(js|css|png|jpg|jpeg|gif|svg|woff2?|ttf|eot|ico)$/i.test(pathname) || + pathname.startsWith('/assets/') || + pathname.startsWith('/static/') +} + +/** + * Background sync for failed API requests + */ +self.addEventListener('sync', event => { + console.log('Service Worker: Background sync event', event.tag) + + if (event.tag === 'api-retry') { + event.waitUntil(retryFailedApiRequests()) + } +}) + +/** + * Retry failed API requests + */ +async function retryFailedApiRequests() { + // Implementation for retrying failed requests stored in IndexedDB + console.log('Service Worker: Retrying failed API requests') + // This would typically read from IndexedDB and retry failed requests +} + +/** + * Handle push notifications + */ +self.addEventListener('push', event => { + if (!event.data) return + + const data = event.data.json() + const options = { + body: data.body, + icon: '/assets/images/icon-192x192.png', + badge: '/assets/images/badge-72x72.png', + data: data.data, + actions: data.actions || [] + } + + event.waitUntil( + self.registration.showNotification(data.title || 'FinTradeAgent', options) + ) +}) + +/** + * Handle notification click + */ +self.addEventListener('notificationclick', event => { + event.notification.close() + + const data = event.notification.data + if (data && data.url) { + event.waitUntil( + self.clients.matchAll().then(clients => { + // Check if the target URL is already open + for (const client of clients) { + if (client.url === data.url && 'focus' in client) { + return client.focus() + } + } + + // Open new window/tab + if (self.clients.openWindow) { + return self.clients.openWindow(data.url) + } + }) + ) + } +}) + +/** + * Performance monitoring + */ +let performanceMetrics = { + cacheHits: 0, + cacheMisses: 0, + networkRequests: 0, + errors: 0 +} + +// Log performance metrics periodically +setInterval(() => { + console.log('Service Worker Performance Metrics:', performanceMetrics) +}, 60000) // Every minute \ No newline at end of file diff --git a/frontend/scripts/analyze-bundle.js b/frontend/scripts/analyze-bundle.js new file mode 100644 index 0000000..07ac26b --- /dev/null +++ b/frontend/scripts/analyze-bundle.js @@ -0,0 +1,390 @@ +#!/usr/bin/env node +/** + * Bundle analysis script for FinTradeAgent frontend + * Analyzes build output and provides optimization recommendations + */ + +const fs = require('fs') +const path = require('path') +const { execSync } = require('child_process') + +class BundleAnalyzer { + constructor() { + this.distPath = path.join(__dirname, '..', 'dist') + this.results = { + assets: [], + chunks: [], + recommendations: [], + metrics: {} + } + } + + async analyze() { + console.log('๐ Analyzing bundle...\n') + + if (!fs.existsSync(this.distPath)) { + console.error('โ Build directory not found. Please run "npm run build" first.') + process.exit(1) + } + + // Analyze assets + this.analyzeAssets() + + // Analyze JavaScript chunks + this.analyzeJSChunks() + + // Analyze CSS files + this.analyzeCSSFiles() + + // Calculate metrics + this.calculateMetrics() + + // Generate recommendations + this.generateRecommendations() + + // Display results + this.displayResults() + + // Save analysis report + this.saveReport() + } + + analyzeAssets() { + const assetsDir = path.join(this.distPath, 'assets') + if (!fs.existsSync(assetsDir)) return + + const analyzeDir = (dir, category) => { + const files = fs.readdirSync(dir) + + files.forEach(file => { + const filePath = path.join(dir, file) + const stats = fs.statSync(filePath) + + if (stats.isFile()) { + this.results.assets.push({ + name: file, + category, + size: stats.size, + sizeKB: Math.round(stats.size / 1024), + sizeMB: Math.round(stats.size / (1024 * 1024) * 100) / 100 + }) + } + }) + } + + // Analyze different asset types + const subDirs = fs.readdirSync(assetsDir) + + subDirs.forEach(subDir => { + const subDirPath = path.join(assetsDir, subDir) + if (fs.statSync(subDirPath).isDirectory()) { + analyzeDir(subDirPath, subDir) + } else { + // Files directly in assets folder + const stats = fs.statSync(subDirPath) + this.results.assets.push({ + name: subDir, + category: this.getCategoryFromExtension(subDir), + size: stats.size, + sizeKB: Math.round(stats.size / 1024), + sizeMB: Math.round(stats.size / (1024 * 1024) * 100) / 100 + }) + } + }) + } + + analyzeJSChunks() { + const jsAssets = this.results.assets.filter(asset => + asset.name.endsWith('.js') || asset.category === 'js' + ) + + jsAssets.forEach(asset => { + const chunkInfo = this.analyzeJSChunk(asset) + this.results.chunks.push(chunkInfo) + }) + } + + analyzeJSChunk(asset) { + // Determine chunk type based on name + let type = 'unknown' + let purpose = 'Unknown' + + if (asset.name.includes('vendor')) { + type = 'vendor' + purpose = 'Third-party libraries' + } else if (asset.name.includes('pages-')) { + type = 'page' + purpose = 'Page components' + } else if (asset.name.includes('components-')) { + type = 'component' + purpose = 'Shared components' + } else if (asset.name.includes('main') || asset.name.includes('index')) { + type = 'entry' + purpose = 'Application entry point' + } else if (asset.name.includes('chunk')) { + type = 'dynamic' + purpose = 'Lazy-loaded content' + } + + return { + ...asset, + type, + purpose, + isLarge: asset.sizeKB > 250, + isHuge: asset.sizeKB > 500 + } + } + + analyzeCSSFiles() { + const cssAssets = this.results.assets.filter(asset => + asset.name.endsWith('.css') || asset.category === 'css' + ) + + // Add CSS-specific analysis + cssAssets.forEach(asset => { + asset.type = 'stylesheet' + asset.purpose = 'Styling' + asset.isLarge = asset.sizeKB > 50 + }) + } + + calculateMetrics() { + const assets = this.results.assets + + this.results.metrics = { + totalSize: assets.reduce((sum, asset) => sum + asset.size, 0), + totalSizeKB: Math.round(assets.reduce((sum, asset) => sum + asset.sizeKB, 0)), + totalSizeMB: Math.round(assets.reduce((sum, asset) => sum + asset.sizeMB, 0) * 100) / 100, + + jsSize: this.getSizeByCategory(['js']), + cssSize: this.getSizeByCategory(['css']), + imageSize: this.getSizeByCategory(['img', 'images']), + fontSize: this.getSizeByCategory(['fonts']), + + chunkCount: this.results.chunks.length, + largeChunks: this.results.chunks.filter(chunk => chunk.isLarge).length, + hugeChunks: this.results.chunks.filter(chunk => chunk.isHuge).length, + + gzipEstimate: Math.round(this.results.metrics?.totalSizeKB * 0.3) // Rough gzip estimate + } + } + + getSizeByCategory(categories) { + return this.results.assets + .filter(asset => categories.includes(asset.category)) + .reduce((sum, asset) => sum + asset.sizeKB, 0) + } + + generateRecommendations() { + const metrics = this.results.metrics + const chunks = this.results.chunks + + // Bundle size recommendations + if (metrics.totalSizeMB > 5) { + this.results.recommendations.push({ + type: 'critical', + category: 'bundle-size', + title: 'Bundle size is very large', + description: `Total bundle size is ${metrics.totalSizeMB}MB. Consider code splitting and lazy loading.`, + actions: [ + 'Implement more aggressive code splitting', + 'Lazy load non-critical components', + 'Review and remove unused dependencies' + ] + }) + } else if (metrics.totalSizeMB > 2) { + this.results.recommendations.push({ + type: 'warning', + category: 'bundle-size', + title: 'Bundle size could be optimized', + description: `Bundle size is ${metrics.totalSizeMB}MB. Consider additional optimizations.`, + actions: [ + 'Implement code splitting for large pages', + 'Optimize images and assets' + ] + }) + } + + // Chunk size recommendations + const hugeChunks = chunks.filter(chunk => chunk.isHuge) + if (hugeChunks.length > 0) { + this.results.recommendations.push({ + type: 'warning', + category: 'chunk-size', + title: `${hugeChunks.length} chunk(s) are very large`, + description: 'Large chunks can slow down initial load times.', + actions: [ + 'Split large chunks further', + 'Move heavy dependencies to separate chunks', + 'Consider lazy loading for non-critical features' + ], + details: hugeChunks.map(chunk => `${chunk.name}: ${chunk.sizeKB}KB`) + }) + } + + // JavaScript recommendations + if (metrics.jsSize > 1000) { + this.results.recommendations.push({ + type: 'warning', + category: 'javascript', + title: 'JavaScript bundle is large', + description: `JavaScript size: ${metrics.jsSize}KB`, + actions: [ + 'Enable tree shaking', + 'Remove unused code', + 'Consider using smaller alternatives for heavy libraries' + ] + }) + } + + // CSS recommendations + if (metrics.cssSize > 200) { + this.results.recommendations.push({ + type: 'info', + category: 'css', + title: 'CSS bundle could be optimized', + description: `CSS size: ${metrics.cssSize}KB`, + actions: [ + 'Remove unused CSS', + 'Consider CSS-in-JS for component-specific styles', + 'Use PurgeCSS to eliminate dead code' + ] + }) + } + + // Performance recommendations + if (chunks.some(chunk => chunk.type === 'vendor' && chunk.sizeKB > 400)) { + this.results.recommendations.push({ + type: 'warning', + category: 'performance', + title: 'Vendor chunk is large', + description: 'Large vendor chunks can slow down the application startup.', + actions: [ + 'Split vendor chunk by usage frequency', + 'Load non-critical libraries on demand', + 'Consider using CDN for common libraries' + ] + }) + } + } + + displayResults() { + console.log('๐ Bundle Analysis Results') + console.log('=' .repeat(50)) + console.log() + + // Summary metrics + console.log('๐ Summary Metrics:') + console.log(` Total Size: ${this.results.metrics.totalSizeMB}MB (${this.results.metrics.totalSizeKB}KB)`) + console.log(` JavaScript: ${this.results.metrics.jsSize}KB`) + console.log(` CSS: ${this.results.metrics.cssSize}KB`) + console.log(` Images: ${this.results.metrics.imageSize}KB`) + console.log(` Fonts: ${this.results.metrics.fontSize}KB`) + console.log(` Estimated Gzipped: ~${this.results.metrics.gzipEstimate}KB`) + console.log() + + // Chunk analysis + console.log('๐งฉ Chunk Analysis:') + console.log(` Total Chunks: ${this.results.metrics.chunkCount}`) + console.log(` Large Chunks (>250KB): ${this.results.metrics.largeChunks}`) + console.log(` Huge Chunks (>500KB): ${this.results.metrics.hugeChunks}`) + console.log() + + // Top 10 largest assets + const sortedAssets = [...this.results.assets].sort((a, b) => b.sizeKB - a.sizeKB) + console.log('๐ฆ Top 10 Largest Assets:') + sortedAssets.slice(0, 10).forEach((asset, index) => { + console.log(` ${index + 1}. ${asset.name} (${asset.category}) - ${asset.sizeKB}KB`) + }) + console.log() + + // Recommendations + if (this.results.recommendations.length > 0) { + console.log('๐ก Recommendations:') + this.results.recommendations.forEach((rec, index) => { + const icon = rec.type === 'critical' ? '๐จ' : rec.type === 'warning' ? 'โ ๏ธ' : 'โน๏ธ' + console.log(` ${icon} ${rec.title}`) + console.log(` ${rec.description}`) + rec.actions.forEach(action => { + console.log(` - ${action}`) + }) + if (rec.details) { + rec.details.forEach(detail => { + console.log(` โ ${detail}`) + }) + } + console.log() + }) + } else { + console.log('โ No optimization recommendations at this time!') + console.log() + } + + // Performance score + const score = this.calculatePerformanceScore() + console.log('๐ฏ Performance Score:') + console.log(` ${score}/100 ${this.getScoreEmoji(score)}`) + console.log() + } + + calculatePerformanceScore() { + let score = 100 + const metrics = this.results.metrics + + // Deduct points for large bundle + if (metrics.totalSizeMB > 5) score -= 30 + else if (metrics.totalSizeMB > 2) score -= 15 + else if (metrics.totalSizeMB > 1) score -= 5 + + // Deduct points for large chunks + score -= this.results.metrics.hugeChunks * 10 + score -= this.results.metrics.largeChunks * 5 + + // Deduct points for recommendations + const criticalRecs = this.results.recommendations.filter(r => r.type === 'critical').length + const warningRecs = this.results.recommendations.filter(r => r.type === 'warning').length + + score -= criticalRecs * 15 + score -= warningRecs * 5 + + return Math.max(0, score) + } + + getScoreEmoji(score) { + if (score >= 90) return '๐ข Excellent' + if (score >= 75) return '๐ก Good' + if (score >= 60) return '๐ Needs Improvement' + return '๐ด Poor' + } + + getCategoryFromExtension(filename) { + const ext = path.extname(filename).toLowerCase() + + if (['.js', '.mjs'].includes(ext)) return 'js' + if (['.css'].includes(ext)) return 'css' + if (['.png', '.jpg', '.jpeg', '.gif', '.svg', '.webp'].includes(ext)) return 'img' + if (['.woff', '.woff2', '.ttf', '.eot'].includes(ext)) return 'fonts' + + return 'other' + } + + saveReport() { + const reportPath = path.join(__dirname, '..', 'bundle-analysis.json') + const report = { + timestamp: new Date().toISOString(), + version: '1.0.0', + ...this.results + } + + fs.writeFileSync(reportPath, JSON.stringify(report, null, 2)) + console.log(`๐พ Detailed report saved to: ${reportPath}`) + } +} + +// Run analysis if called directly +if (require.main === module) { + const analyzer = new BundleAnalyzer() + analyzer.analyze().catch(console.error) +} + +module.exports = BundleAnalyzer \ No newline at end of file diff --git a/frontend/src/App.vue b/frontend/src/App.vue new file mode 100644 index 0000000..3c08a4a --- /dev/null +++ b/frontend/src/App.vue @@ -0,0 +1,27 @@ + +{{ eyebrow }}
++ {{ message }} +
+ + +{{ title }}
+{{ description }}
++ {{ message }} +
+ + +{{ errorDetails }}
+ {{ label }}
+{{ value }}
+ + {{ trend }} + +{{ description }}
+{{ toast.message }}
+ + +Card content
' + } + }) + + expect(wrapper.html()).toContain('Card content
') + }) + + it('renders footer slot content', () => { + const wrapper = mount(BaseCard, { + slots: { + footer: 'Body
', + footer: 'Body
') + expect(wrapper.html()).toContain('Modal content goes here
' + } + }) + + expect(wrapper.html()).toContain('Modal content goes here
') + }) + + it('renders footer slot content', () => { + const wrapper = mount(BaseModal, { + props: { open: true }, + slots: { + footer: '' + } + }) + + expect(wrapper.html()).toContain('') + }) + + it('emits close event when close button is clicked', async () => { + const wrapper = mount(BaseModal, { + props: { open: true } + }) + + const closeButton = wrapper.find('button[aria-label="Close"]') + await closeButton.trigger('click') + + expect(wrapper.emitted('close')).toHaveLength(1) + }) + + it('emits close event when backdrop is clicked', async () => { + const wrapper = mount(BaseModal, { + props: { open: true } + }) + + const backdrop = wrapper.find('.fixed.inset-0.bg-black') + await backdrop.trigger('click') + + expect(wrapper.emitted('close')).toHaveLength(1) + }) + + it('does not emit close when clicking inside modal content', async () => { + const wrapper = mount(BaseModal, { + props: { open: true } + }) + + const modalContent = wrapper.find('.bg-white') + await modalContent.trigger('click') + + expect(wrapper.emitted('close')).toBeFalsy() + }) + + it('handles different sizes correctly', () => { + const smallWrapper = mount(BaseModal, { + props: { + open: true, + size: 'sm' + } + }) + expect(smallWrapper.find('.max-w-sm').exists()).toBe(true) + + const mediumWrapper = mount(BaseModal, { + props: { + open: true, + size: 'md' + } + }) + expect(mediumWrapper.find('.max-w-md').exists()).toBe(true) + + const largeWrapper = mount(BaseModal, { + props: { + open: true, + size: 'lg' + } + }) + expect(largeWrapper.find('.max-w-lg').exists()).toBe(true) + + const xlWrapper = mount(BaseModal, { + props: { + open: true, + size: 'xl' + } + }) + expect(xlWrapper.find('.max-w-xl').exists()).toBe(true) + }) + + it('shows close button by default', () => { + const wrapper = mount(BaseModal, { + props: { open: true } + }) + + expect(wrapper.find('button[aria-label="Close"]').exists()).toBe(true) + }) + + it('hides close button when showClose is false', () => { + const wrapper = mount(BaseModal, { + props: { + open: true, + showClose: false + } + }) + + expect(wrapper.find('button[aria-label="Close"]').exists()).toBe(false) + }) + + it('handles keyboard events for closing', async () => { + const wrapper = mount(BaseModal, { + props: { open: true }, + attachTo: document.body + }) + + // Simulate Escape key press + await wrapper.trigger('keydown', { key: 'Escape' }) + + expect(wrapper.emitted('close')).toHaveLength(1) + }) + + it('manages focus trap correctly', async () => { + const wrapper = mount(BaseModal, { + props: { open: true }, + attachTo: document.body + }) + + await nextTick() + + // Check that modal contains focusable elements + const focusableElements = wrapper.element.querySelectorAll( + 'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])' + ) + + expect(focusableElements.length).toBeGreaterThan(0) + }) +}) \ No newline at end of file diff --git a/frontend/src/components/__tests__/ConnectionStatus.test.js b/frontend/src/components/__tests__/ConnectionStatus.test.js new file mode 100644 index 0000000..2b78d7a --- /dev/null +++ b/frontend/src/components/__tests__/ConnectionStatus.test.js @@ -0,0 +1,240 @@ +import { describe, it, expect, vi } from 'vitest' +import { mount } from '@vue/test-utils' +import ConnectionStatus from '../ConnectionStatus.vue' + +describe('ConnectionStatus', () => { + it('shows connected status correctly', () => { + const wrapper = mount(ConnectionStatus, { + props: { + status: 'connected' + } + }) + + expect(wrapper.text()).toContain('Connected') + expect(wrapper.find('.bg-green-100').exists()).toBe(true) + expect(wrapper.find('.text-green-800').exists()).toBe(true) + }) + + it('shows disconnected status correctly', () => { + const wrapper = mount(ConnectionStatus, { + props: { + status: 'disconnected' + } + }) + + expect(wrapper.text()).toContain('Disconnected') + expect(wrapper.find('.bg-red-100').exists()).toBe(true) + expect(wrapper.find('.text-red-800').exists()).toBe(true) + }) + + it('shows connecting status correctly', () => { + const wrapper = mount(ConnectionStatus, { + props: { + status: 'connecting' + } + }) + + expect(wrapper.text()).toContain('Connecting') + expect(wrapper.find('.bg-yellow-100').exists()).toBe(true) + expect(wrapper.find('.text-yellow-800').exists()).toBe(true) + expect(wrapper.find('.animate-pulse').exists()).toBe(true) + }) + + it('shows reconnecting status correctly', () => { + const wrapper = mount(ConnectionStatus, { + props: { + status: 'reconnecting' + } + }) + + expect(wrapper.text()).toContain('Reconnecting') + expect(wrapper.find('.bg-blue-100').exists()).toBe(true) + expect(wrapper.find('.text-blue-800').exists()).toBe(true) + expect(wrapper.find('.animate-pulse').exists()).toBe(true) + }) + + it('shows error status correctly', () => { + const wrapper = mount(ConnectionStatus, { + props: { + status: 'error' + } + }) + + expect(wrapper.text()).toContain('Error') + expect(wrapper.find('.bg-red-100').exists()).toBe(true) + expect(wrapper.find('.text-red-800').exists()).toBe(true) + }) + + it('displays custom message when provided', () => { + const wrapper = mount(ConnectionStatus, { + props: { + status: 'connected', + message: 'WebSocket connection active' + } + }) + + expect(wrapper.text()).toContain('WebSocket connection active') + }) + + it('shows last connected time when provided', () => { + const lastConnected = new Date('2026-02-11T10:30:00Z') + const wrapper = mount(ConnectionStatus, { + props: { + status: 'disconnected', + lastConnected: lastConnected + } + }) + + expect(wrapper.text()).toContain('Last connected') + }) + + it('shows retry count when provided', () => { + const wrapper = mount(ConnectionStatus, { + props: { + status: 'reconnecting', + retryCount: 3 + } + }) + + expect(wrapper.text()).toContain('Attempt 3') + }) + + it('shows connection type when provided', () => { + const wrapper = mount(ConnectionStatus, { + props: { + status: 'connected', + connectionType: 'WebSocket' + } + }) + + expect(wrapper.text()).toContain('WebSocket') + }) + + it('renders with icon by default', () => { + const wrapper = mount(ConnectionStatus, { + props: { + status: 'connected' + } + }) + + expect(wrapper.find('svg').exists()).toBe(true) + }) + + it('hides icon when showIcon is false', () => { + const wrapper = mount(ConnectionStatus, { + props: { + status: 'connected', + showIcon: false + } + }) + + expect(wrapper.find('svg').exists()).toBe(false) + }) + + it('shows retry button when status is error or disconnected', () => { + const errorWrapper = mount(ConnectionStatus, { + props: { + status: 'error', + showRetryButton: true + } + }) + + expect(errorWrapper.find('button').exists()).toBe(true) + expect(errorWrapper.text()).toContain('Retry') + + const disconnectedWrapper = mount(ConnectionStatus, { + props: { + status: 'disconnected', + showRetryButton: true + } + }) + + expect(disconnectedWrapper.find('button').exists()).toBe(true) + }) + + it('does not show retry button when connected', () => { + const wrapper = mount(ConnectionStatus, { + props: { + status: 'connected', + showRetryButton: true + } + }) + + expect(wrapper.find('button').exists()).toBe(false) + }) + + it('emits retry event when retry button clicked', async () => { + const wrapper = mount(ConnectionStatus, { + props: { + status: 'error', + showRetryButton: true + } + }) + + const retryButton = wrapper.find('button') + await retryButton.trigger('click') + + expect(wrapper.emitted('retry')).toHaveLength(1) + }) + + it('applies compact styling when compact prop is true', () => { + const wrapper = mount(ConnectionStatus, { + props: { + status: 'connected', + compact: true + } + }) + + expect(wrapper.classes()).toContain('text-sm') + expect(wrapper.classes()).toContain('px-2') + }) + + it('applies full styling by default', () => { + const wrapper = mount(ConnectionStatus, { + props: { + status: 'connected' + } + }) + + expect(wrapper.classes()).toContain('px-3') + expect(wrapper.classes()).toContain('py-1') + }) + + it('updates status color and icon correctly', () => { + const wrapper = mount(ConnectionStatus, { + props: { + status: 'connected' + } + }) + + // Check connected state + expect(wrapper.find('.bg-green-100').exists()).toBe(true) + + // Update to disconnected + wrapper.setProps({ status: 'disconnected' }) + + expect(wrapper.find('.bg-red-100').exists()).toBe(true) + }) + + it('shows connection latency when provided', () => { + const wrapper = mount(ConnectionStatus, { + props: { + status: 'connected', + latency: 45 + } + }) + + expect(wrapper.text()).toContain('45ms') + }) + + it('applies dark mode classes correctly', () => { + const wrapper = mount(ConnectionStatus, { + props: { + status: 'connected' + } + }) + + expect(wrapper.classes()).toContain('dark:bg-green-900') + expect(wrapper.classes()).toContain('dark:text-green-200') + }) +}) \ No newline at end of file diff --git a/frontend/src/components/__tests__/ErrorBoundary.test.js b/frontend/src/components/__tests__/ErrorBoundary.test.js new file mode 100644 index 0000000..de41d02 --- /dev/null +++ b/frontend/src/components/__tests__/ErrorBoundary.test.js @@ -0,0 +1,225 @@ +import { describe, it, expect, vi } from 'vitest' +import { mount } from '@vue/test-utils' +import ErrorBoundary from '../ErrorBoundary.vue' +import { ref } from 'vue' + +// Mock component that throws an error +const ErrorThrowingComponent = { + template: 'FinTradeAgent
+Analysis
++ Compare performance, risk, and allocation across multiple portfolios +
+| Portfolio | +Total Value | +Daily P&L | +Positions | +Win Rate | +Risk Level | +
|---|---|---|---|---|---|
|
+ {{ portfolio.name }}
+ {{ portfolio.config?.strategy || 'Default' }}
+ |
+ + {{ portfolio.metrics?.totalValue || '$0' }} + | ++ {{ portfolio.metrics?.dailyPnL || '$0' }} + | ++ {{ portfolio.metrics?.positions || '0' }} + | ++ {{ portfolio.metrics?.winRate || '0%' }} + | +
+ |
+
Performance
+Execution
++ {{ log.title || log.action || 'Execution' }} +
++ {{ log.timestamp || log.created_at || 'Timestamp pending' }} +
+{{ log.summary }}
+Scheduler
+Trades
++ Review and manage trade recommendations from agent executions +
+{{ trade.name || 'Unknown Company' }}
+{{ trade.portfolio }}
+| Symbol | +Action | +Quantity | +Price | +Total | +Portfolio | +Confidence | +Created | +Actions | +
|---|---|---|---|---|---|---|---|---|
|
+ {{ trade.symbol }}
+ {{ trade.name || 'Unknown' }}
+ |
+
+ |
+ + {{ formatNumber(trade.quantity) }} + | ++ ${{ formatNumber(trade.price, 2) }} + | ++ ${{ formatNumber(trade.price * trade.quantity, 2) }} + | +{{ trade.portfolio }} | +
+
+
+ {{ trade.confidence }}%
+
+
+
+ |
+ + {{ formatDate(trade.created_at) }} + | +
+
+
+ |
+
Portfolio Detail
+{{ portfolio?.description || 'No description provided.' }}
+Configuration
+{{ configText }}
+ Performance
+Trade Recommendations
+Execution History
+Automated Scheduling
+Automatically run agent at scheduled intervals
+{{ selectedExecution.logs }}
+ {{ selectedExecution.error }}
+ Portfolios
+{{ actionMessage }}
+{{ actionError }}
+System
++ Monitor system performance, service status, and scheduled operations +
+