test(e2e): fix candle chart tests and add multi-exchange tests

- Fix data loading mock in candle-chart.spec.ts
- Add new multi-exchange.spec.ts
- Update CandleChart.svelte to support testability

Author: patrickcmserrano

e2e-tests/candle-chart.spec.ts

@@ -11,7 +11,22 @@ async function showChart(page: any) {
 
 test.describe('CandleChart E2E Tests', () => {
   test.beforeEach(async ({ page }) => {
-    // Navegar para a página com o componente CandleChart
+    // Setup API route interception BEFORE navigation
+    // This ensures the mock is ready when the chart loads data
+    await page.route('**/api.binance.com/api/v3/klines**', async route => {
+      const mockData = [
+        [1625097600000, "50000", "51000", "49000", "50500"],
+        [1625097660000, "50500", "52000", "50000", "51500"],
+        [1625097720000, "51500", "53000", "51000", "52000"]
+      ];
+
+      await route.fulfill({
+        contentType: 'application/json',
+        body: JSON.stringify(mockData)
+      });
+    });
+
+    // Now navigate to the page with the route already set up
     await page.goto('./');
   });
 
@@ -24,29 +39,28 @@ test.describe('CandleChart E2E Tests', () => {
   });
 
   test('deve carregar dados históricos', async ({ page }) => {
-    // Interceptar chamadas para a API da Binance
-    await page.route('**/api.binance.com/api/v3/klines**', async route => {
-      const mockData = [
-        [1625097600000, "50000", "51000", "49000", "50500"],
-        [1625097660000, "50500", "52000", "50000", "51500"],
-        [1625097720000, "51500", "53000", "51000", "52000"]
-      ];
+    // Track if the API was called
+    let apiCalled = false;
 
-      await route.fulfill({
-        contentType: 'application/json',
-        body: JSON.stringify(mockData)
-      });
+    // Set up a listener for the specific API call
+    page.on('request', request => {
+      if (request.url().includes('api.binance.com/api/v3/klines')) {
+        apiCalled = true;
+      }
     });
 
-    // Verificar se a requisição foi feita
-    const [response] = await Promise.all([
-      page.waitForResponse(response =>
-        response.url().includes('api.binance.com/api/v3/klines') && response.status() === 200
-      ),
-      showChart(page)
-    ]);
+    // Wait for the chart to load - the beforeEach already set up the route mock
+    await showChart(page);
+
+    // Wait a bit for the async data loading to complete
+    await page.waitForTimeout(2000);
 
-    expect(response.ok()).toBeTruthy();
+    // Verify the API was called
+    expect(apiCalled).toBeTruthy();
+
+    // Verify the chart container is visible (data loaded successfully)
+    const chartContainer = page.locator('div[class*="min-h-[500px]"]');
+    await expect(chartContainer).toBeVisible();
   });
 
   test.skip('deve estabelecer conexão WebSocket', async ({ page }) => {
@@ -154,11 +168,18 @@ test.describe('CandleChart E2E Tests', () => {
   });
 
   test('deve lidar com erros de rede graciosamente', async ({ page }) => {
+    // Create a new page context to avoid route conflicts
+    // We need to set up the error route BEFORE navigating
+    await page.unroute('**/api.binance.com/api/v3/klines**');
+
     // Simular erro na API da Binance
     await page.route('**/api.binance.com/api/v3/klines**', async route => {
       await route.abort('failed');
     });
 
+    // Navigate to trigger a fresh load with the error route
+    await page.goto('./');
+
     // Capturar erros do console
     const errors: string[] = [];
     page.on('console', msg => {

e2e-tests/multi-exchange.spec.ts

@@ -0,0 +1,57 @@
+import { test, expect } from '@playwright/test';
+
+test.describe('Multi-Exchange Support', () => {
+    test.beforeEach(async ({ page }) => {
+        await page.goto('./');
+        await page.waitForLoadState('domcontentloaded');
+    });
+
+    test('should display exchange selector and spread monitor', async ({ page }) => {
+        // Check for Exchange Selector
+        const binanceButton = page.getByRole('button', { name: 'Binance' });
+        const bitgetButton = page.getByRole('button', { name: 'Bitget' });
+
+        await expect(binanceButton).toBeVisible();
+        await expect(bitgetButton).toBeVisible();
+
+        // Check for Spread Monitor
+        const spreadMonitor = page.locator('text=Arbitrage Monitor');
+        await expect(spreadMonitor).toBeVisible();
+
+        // Check for price rows
+        await expect(page.locator('text=Binance:')).toBeVisible();
+        await expect(page.locator('text=Bitget:')).toBeVisible();
+        await expect(page.locator('text=Spread:')).toBeVisible();
+    });
+
+    test('should switch exchanges', async ({ page }) => {
+        // Default should be Binance
+        const binanceButton = page.getByRole('button', { name: 'Binance' });
+        await expect(binanceButton).toHaveClass(/bg-blue-600/);
+
+        // Switch to Bitget
+        const bitgetButton = page.getByRole('button', { name: 'Bitget' });
+        await bitgetButton.click();
+
+        // Verify Bitget is active
+        await expect(bitgetButton).toHaveClass(/bg-blue-600/);
+        await expect(binanceButton).not.toHaveClass(/bg-blue-600/);
+
+        // Verify chart reloads (mocking might be needed for full verification, but we check UI state)
+        // We can check if localStorage was updated
+        const storedExchange = await page.evaluate(() => localStorage.getItem('selected_exchange'));
+        expect(storedExchange).toBe('bitget');
+    });
+
+    test('should persist exchange selection', async ({ page }) => {
+        // Select Bitget
+        await page.getByRole('button', { name: 'Bitget' }).click();
+
+        // Reload page
+        await page.reload();
+
+        // Verify Bitget is still selected
+        const bitgetButton = page.getByRole('button', { name: 'Bitget' });
+        await expect(bitgetButton).toHaveClass(/bg-blue-600/);
+    });
+});

src/components/CandleChart.svelte

@@ -15,6 +15,7 @@
   import { IndicatorService } from "./chart/services/indicatorService";
   import { DataService } from "./chart/services/dataService";
   import type { IndicatorState, DrawingMode } from "./chart/types";
+  import { selectedExchange } from "../lib/config/exchangeConfig";
 
   // Props
   export let symbol = "BTCUSDT";
@@ -67,11 +68,23 @@
     if (chartService) {
       const candleSeries = chartService.getCandleSeries();
       if (candleSeries) {
-        candleSeries.update(candle);
-        chartService.getDrawingService()?.updateLastCandle(candle);
+        // Safety check: ensure we don't update with older data
+        if (
+          lastCandle &&
+          (candle.time as number) < (lastCandle.time as number)
+        ) {
+          return;
+        }
+
+        try {
+          candleSeries.update(candle);
+          chartService.getDrawingService()?.updateLastCandle(candle);
+          lastCandle = candle;
+        } catch (error) {
+          console.error("Error updating chart:", error);
+        }
       }
     }
-    lastCandle = candle;
 
     // Update indicators with new candle data
     updateIndicators();
@@ -98,7 +111,11 @@
     dataService = new DataService(handleNewCandle, handleConnectionStatus);
 
     // Load Data
-    const data = await dataService.loadHistoricalData(symbol, interval);
+    const data = await dataService.loadHistoricalData(
+      symbol,
+      interval,
+      $selectedExchange,
+    );
     if (chartService && chartService.getCandleSeries()) {
       chartService.getCandleSeries()?.setData(data);
       if (data.length > 0) lastCandle = data[data.length - 1];
@@ -133,7 +150,7 @@
     }
 
     // Connect WebSocket
-    dataService.connectWebSocket(symbol, interval);
+    dataService.connectWebSocket(symbol, interval, $selectedExchange);
     isLoading = false;
   }
 
@@ -261,6 +278,14 @@
     setTimeout(init, 0);
   }
 
+  // React to exchange changes
+  let previousExchange = $selectedExchange;
+  $: if ($selectedExchange !== previousExchange) {
+    previousExchange = $selectedExchange;
+    cleanup();
+    setTimeout(init, 0);
+  }
+
   // Theme observer
   onMount(() => {
     init();