"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
const jsx_runtime_1 = require("react/jsx-runtime");
const react_1 = require("@testing-library/react");
require("@testing-library/jest-dom");
const AIMetricsChart_1 = require("../AIMetricsChart");
const BFUIProvider_1 = require("../../../core/BFUIProvider");
if (!window.matchMedia) {
    window.matchMedia = function () {
        return {
            matches: false,
            addListener: function () { },
            removeListener: function () { },
            addEventListener: function () { },
            removeEventListener: function () { },
            dispatchEvent: function () { return false; }
        };
    };
}
// Mock Chart.js
jest.mock('chart', () => ({
    Chart: {
        register: jest.fn(),
        getChart: jest.fn(() => ({
            destroy: jest.fn(),
            update: jest.fn(),
            data: { datasets: [] },
            options: {}
        })),
    },
    LinearScale: jest.fn(),
    CategoryScale: jest.fn(),
    BarElement: jest.fn(),
    LineElement: jest.fn(),
    PointElement: jest.fn(),
    Tooltip: jest.fn(),
    Legend: jest.fn(),
    Title: jest.fn(),
}));
jest.mock('react-chartjs-2', () => ({
    Line: ({ data, options, ...props }) => ((0, jsx_runtime_1.jsx)("div", { "data-testid": "line-chart", "data-chart-data": JSON.stringify(data), ...props, children: "Line Chart" })),
    Bar: ({ data, options, ...props }) => ((0, jsx_runtime_1.jsx)("div", { "data-testid": "bar-chart", "data-chart-data": JSON.stringify(data), ...props, children: "Bar Chart" })),
    Scatter: ({ data, options, ...props }) => ((0, jsx_runtime_1.jsx)("div", { "data-testid": "scatter-chart", "data-chart-data": JSON.stringify(data), ...props, children: "Scatter Chart" })),
    Doughnut: ({ data, options, ...props }) => ((0, jsx_runtime_1.jsx)("div", { "data-testid": "doughnut-chart", "data-chart-data": JSON.stringify(data), ...props, children: "Doughnut Chart" })),
    Radar: ({ data, options, ...props }) => ((0, jsx_runtime_1.jsx)("div", { "data-testid": "radar-chart", "data-chart-data": JSON.stringify(data), ...props, children: "Radar Chart" })),
}));
const TestWrapper = ({ children }) => ((0, jsx_runtime_1.jsx)(BFUIProvider_1.BFUIProvider, { children: children }));
describe('AIMetricsChart Component - Advanced AI Visualizations', () => {
    const mockPerformanceData = [
        { timestamp: '2024-01-01T00:00:00Z', accuracy: 94.2, latency: 120, throughput: 45, cost: 0.15 },
        { timestamp: '2024-01-01T01:00:00Z', accuracy: 94.8, latency: 115, throughput: 48, cost: 0.14 },
        { timestamp: '2024-01-01T02:00:00Z', accuracy: 93.9, latency: 125, throughput: 42, cost: 0.16 },
        { timestamp: '2024-01-01T03:00:00Z', accuracy: 95.1, latency: 110, throughput: 50, cost: 0.13 },
        { timestamp: '2024-01-01T04:00:00Z', accuracy: 94.6, latency: 118, throughput: 46, cost: 0.15 }
    ];
    const mockModelComparisonData = [
        { model: 'GPT-4', accuracy: 95.2, latency: 180, cost: 0.25, throughput: 35 },
        { model: 'Claude-3', accuracy: 94.8, latency: 140, cost: 0.18, throughput: 42 },
        { model: 'Llama-2', accuracy: 92.5, latency: 90, cost: 0.08, throughput: 65 },
        { model: 'Mistral-7B', accuracy: 91.2, latency: 75, cost: 0.05, throughput: 78 }
    ];
    const mockTokenUsageData = [
        { date: '2024-01-01', input_tokens: 125000, output_tokens: 89000, cost: 2.45 },
        { date: '2024-01-02', input_tokens: 134000, output_tokens: 95000, cost: 2.68 },
        { date: '2024-01-03', input_tokens: 128000, output_tokens: 91000, cost: 2.52 },
        { date: '2024-01-04', input_tokens: 142000, output_tokens: 103000, cost: 2.89 },
        { date: '2024-01-05', input_tokens: 138000, output_tokens: 98000, cost: 2.71 }
    ];
    const mockConversationFlowData = {
        nodes: [
            { id: 'start', label: 'User Input', type: 'input', x: 100, y: 100 },
            { id: 'process', label: 'AI Processing', type: 'processing', x: 300, y: 100 },
            { id: 'decision', label: 'Confidence Check', type: 'decision', x: 500, y: 100 },
            { id: 'response', label: 'AI Response', type: 'output', x: 700, y: 100 },
            { id: 'escalation', label: 'Human Handoff', type: 'escalation', x: 500, y: 250 }
        ],
        edges: [
            { from: 'start', to: 'process', weight: 1000 },
            { from: 'process', to: 'decision', weight: 950 },
            { from: 'decision', to: 'response', weight: 890 },
            { from: 'decision', to: 'escalation', weight: 60 }
        ]
    };
    beforeEach(() => {
        jest.clearAllMocks();
    });
    /**
     * Test Suite 1: Performance Metrics Visualization
     */
    describe('Performance Metrics Visualization', () => {
        it('should render real-time performance metrics with multi-axis chart', async () => {
            (0, react_1.render)((0, jsx_runtime_1.jsx)(AIMetricsChart_1.AIMetricsChart, { type: "performance", data: mockPerformanceData, metrics: ['accuracy', 'latency', 'throughput'], realTime: true, updateInterval: 5000, showTrendlines: true, "data-testid": "performance-chart" }), { wrapper: TestWrapper });
            expect(react_1.screen.getByTestId('performance-chart')).toBeInTheDocument();
            expect(react_1.screen.getByTestId('line-chart')).toBeInTheDocument();
            // Should show multiple y-axes for different metrics
            expect(react_1.screen.getByText('Accuracy (%)')).toBeInTheDocument();
            expect(react_1.screen.getByText('Latency (ms)')).toBeInTheDocument();
            expect(react_1.screen.getByText('Throughput (req/s)')).toBeInTheDocument();
            // Should show real-time indicator
            expect(react_1.screen.getByTestId('realtime-indicator')).toBeInTheDocument();
            expect(react_1.screen.getByText('Live')).toBeInTheDocument();
        });
        it('should display performance anomaly detection with alerts', async () => {
            const dataWithAnomalies = [
                ...mockPerformanceData,
                { timestamp: '2024-01-01T05:00:00Z', accuracy: 85.2, latency: 250, throughput: 25, cost: 0.35 } // Anomaly
            ];
            (0, react_1.render)((0, jsx_runtime_1.jsx)(AIMetricsChart_1.AIMetricsChart, { type: "performance", data: dataWithAnomalies, enableAnomalyDetection: true, anomalyThresholds: {
                    accuracy: { min: 90, max: 100 },
                    latency: { min: 0, max: 200 },
                    throughput: { min: 30, max: 100 }
                }, "data-testid": "anomaly-chart" }), { wrapper: TestWrapper });
            await (0, react_1.waitFor)(() => {
                expect(react_1.screen.getByTestId('anomaly-indicator')).toBeInTheDocument();
                expect(react_1.screen.getByText('Performance Anomaly Detected')).toBeInTheDocument();
                expect(react_1.screen.getByTestId('anomaly-details')).toBeInTheDocument();
            });
        });
        it('should support predictive analytics with forecast visualization', async () => {
            (0, react_1.render)((0, jsx_runtime_1.jsx)(AIMetricsChart_1.AIMetricsChart, { type: "performance", data: mockPerformanceData, enablePredictiveAnalytics: true, forecastPeriod: 24, confidenceInterval: 0.95, "data-testid": "predictive-chart" }), { wrapper: TestWrapper });
            await (0, react_1.waitFor)(() => {
                expect(react_1.screen.getByTestId('forecast-line')).toBeInTheDocument();
                expect(react_1.screen.getByTestId('confidence-band')).toBeInTheDocument();
                expect(react_1.screen.getByText('95% Confidence Interval')).toBeInTheDocument();
            });
        });
    });
    /**
     * Test Suite 2: Model Comparison Visualizations
     */
    describe('Model Comparison Visualizations', () => {
        it('should render radar chart for multi-dimensional model comparison', async () => {
            (0, react_1.render)((0, jsx_runtime_1.jsx)(AIMetricsChart_1.AIMetricsChart, { type: "model-comparison", data: mockModelComparisonData, chartType: "radar", metrics: ['accuracy', 'latency', 'cost', 'throughput'], normalizeMetrics: true, "data-testid": "model-radar-chart" }), { wrapper: TestWrapper });
            expect(react_1.screen.getByTestId('model-radar-chart')).toBeInTheDocument();
            expect(react_1.screen.getByTestId('radar-chart')).toBeInTheDocument();
            // Should normalize metrics for fair comparison
            const chartData = JSON.parse(react_1.screen.getByTestId('radar-chart').getAttribute('data-chart-data') || '{}');
            expect(chartData.datasets).toHaveLength(4); // One for each model
        });
        it('should provide interactive model benchmarking with detailed tooltips', async () => {
            (0, react_1.render)((0, jsx_runtime_1.jsx)(AIMetricsChart_1.AIMetricsChart, { type: "model-comparison", data: mockModelComparisonData, chartType: "scatter", xAxis: "cost", yAxis: "accuracy", bubbleSize: "throughput", enableInteractivity: true, detailedTooltips: true, "data-testid": "benchmark-scatter" }), { wrapper: TestWrapper });
            expect(react_1.screen.getByTestId('benchmark-scatter')).toBeInTheDocument();
            expect(react_1.screen.getByTestId('scatter-chart')).toBeInTheDocument();
            // Test interaction
            react_1.fireEvent.mouseOver(react_1.screen.getByTestId('scatter-chart'));
            await (0, react_1.waitFor)(() => {
                expect(react_1.screen.getByTestId('detailed-tooltip')).toBeInTheDocument();
                expect(react_1.screen.getByText(/Cost per token:/)).toBeInTheDocument();
                expect(react_1.screen.getByText(/Accuracy score:/)).toBeInTheDocument();
            });
        });
        it('should support cost-performance optimization visualization', async () => {
            (0, react_1.render)((0, jsx_runtime_1.jsx)(AIMetricsChart_1.AIMetricsChart, { type: "cost-optimization", data: mockModelComparisonData, showParetoFrontier: true, optimizationMetrics: ['cost', 'accuracy'], showOptimalRegion: true, "data-testid": "optimization-chart" }), { wrapper: TestWrapper });
            await (0, react_1.waitFor)(() => {
                expect(react_1.screen.getByTestId('pareto-frontier')).toBeInTheDocument();
                expect(react_1.screen.getByTestId('optimal-region')).toBeInTheDocument();
                expect(react_1.screen.getByText('Pareto Optimal Models')).toBeInTheDocument();
            });
        });
    });
    /**
     * Test Suite 3: Token Usage and Cost Analytics
     */
    describe('Token Usage & Cost Analytics', () => {
        it('should render stacked area chart for token consumption over time', async () => {
            (0, react_1.render)((0, jsx_runtime_1.jsx)(AIMetricsChart_1.AIMetricsChart, { type: "token-usage", data: mockTokenUsageData, chartType: "stacked-area", stackedMetrics: ['input_tokens', 'output_tokens'], showCostProjection: true, "data-testid": "token-usage-chart" }), { wrapper: TestWrapper });
            expect(react_1.screen.getByTestId('token-usage-chart')).toBeInTheDocument();
            expect(react_1.screen.getByTestId('stacked-area-chart')).toBeInTheDocument();
            // Should show cost projection
            expect(react_1.screen.getByTestId('cost-projection')).toBeInTheDocument();
            expect(react_1.screen.getByText(/Projected monthly cost:/)).toBeInTheDocument();
        });
        it('should provide cost breakdown with interactive drilling', async () => {
            (0, react_1.render)((0, jsx_runtime_1.jsx)(AIMetricsChart_1.AIMetricsChart, { type: "cost-breakdown", data: mockTokenUsageData, chartType: "treemap", breakdownBy: ['model', 'user', 'feature'], enableDrillDown: true, "data-testid": "cost-breakdown-chart" }), { wrapper: TestWrapper });
            expect(react_1.screen.getByTestId('cost-breakdown-chart')).toBeInTheDocument();
            expect(react_1.screen.getByTestId('treemap-chart')).toBeInTheDocument();
            // Test drill-down functionality
            react_1.fireEvent.click(react_1.screen.getByTestId('treemap-segment-model'));
            await (0, react_1.waitFor)(() => {
                expect(react_1.screen.getByTestId('drilldown-view')).toBeInTheDocument();
                expect(react_1.screen.getByText('Model Cost Breakdown')).toBeInTheDocument();
            });
        });
        it('should support budget tracking with threshold alerts', async () => {
            (0, react_1.render)((0, jsx_runtime_1.jsx)(AIMetricsChart_1.AIMetricsChart, { type: "budget-tracking", data: mockTokenUsageData, budget: { monthly: 100, daily: 5 }, enableAlerts: true, alertThresholds: [50, 75, 90], "data-testid": "budget-chart" }), { wrapper: TestWrapper });
            await (0, react_1.waitFor)(() => {
                expect(react_1.screen.getByTestId('budget-chart')).toBeInTheDocument();
                expect(react_1.screen.getByTestId('budget-progress')).toBeInTheDocument();
                expect(react_1.screen.getByTestId('threshold-lines')).toBeInTheDocument();
            });
            // Should show alert if over threshold
            expect(react_1.screen.getByTestId('budget-alert')).toBeInTheDocument();
        });
    });
    /**
     * Test Suite 4: Conversation Flow Visualization
     */
    describe('Conversation Flow Visualization', () => {
        it('should render interactive conversation flow diagram', async () => {
            (0, react_1.render)((0, jsx_runtime_1.jsx)(AIMetricsChart_1.AIMetricsChart, { type: "conversation-flow", data: mockConversationFlowData, chartType: "sankey", enableNodeInteraction: true, showFlowMetrics: true, "data-testid": "conversation-flow-chart" }), { wrapper: TestWrapper });
            expect(react_1.screen.getByTestId('conversation-flow-chart')).toBeInTheDocument();
            expect(react_1.screen.getByTestId('sankey-diagram')).toBeInTheDocument();
            // Should show flow metrics
            expect(react_1.screen.getByText('User Input')).toBeInTheDocument();
            expect(react_1.screen.getByText('AI Processing')).toBeInTheDocument();
            expect(react_1.screen.getByText('Human Handoff')).toBeInTheDocument();
            // Test node interaction
            react_1.fireEvent.click(react_1.screen.getByTestId('flow-node-decision'));
            await (0, react_1.waitFor)(() => {
                expect(react_1.screen.getByTestId('node-details-panel')).toBeInTheDocument();
                expect(react_1.screen.getByText('Confidence Check Details')).toBeInTheDocument();
            });
        });
        it('should display escalation patterns with heatmap visualization', async () => {
            const escalationData = {
                timeSlots: ['00:00', '04:00', '08:00', '12:00', '16:00', '20:00'],
                days: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
                values: [
                    [2, 1, 0, 3, 8, 5], // Monday
                    [1, 0, 2, 5, 12, 7], // Tuesday
                    [0, 1, 1, 4, 10, 6], // Wednesday
                    [1, 2, 3, 6, 15, 8], // Thursday
                    [3, 1, 4, 8, 18, 9], // Friday
                    [5, 3, 2, 4, 8, 6], // Saturday
                    [4, 2, 1, 2, 5, 4], // Sunday
                ]
            };
            (0, react_1.render)((0, jsx_runtime_1.jsx)(AIMetricsChart_1.AIMetricsChart, { type: "escalation-patterns", data: escalationData, chartType: "heatmap", colorScale: "viridis", showPatternInsights: true, "data-testid": "escalation-heatmap" }), { wrapper: TestWrapper });
            expect(react_1.screen.getByTestId('escalation-heatmap')).toBeInTheDocument();
            expect(react_1.screen.getByTestId('heatmap-chart')).toBeInTheDocument();
            // Should show pattern insights
            expect(react_1.screen.getByTestId('pattern-insights')).toBeInTheDocument();
            expect(react_1.screen.getByText(/Peak escalation times:/)).toBeInTheDocument();
        });
    });
    /**
     * Test Suite 5: Advanced Features and Customization
     */
    describe('Advanced Features & Customization', () => {
        it('should support custom themes and branding', async () => {
            (0, react_1.render)((0, jsx_runtime_1.jsx)(AIMetricsChart_1.AIMetricsChart, { type: "performance", data: mockPerformanceData, theme: "dark", customColors: ['#ff6b6b', '#4ecdc4', '#45b7d1', '#96ceb4'], brandLogo: "/logo.png", "data-testid": "themed-chart" }), { wrapper: TestWrapper });
            const chart = react_1.screen.getByTestId('themed-chart');
            expect(chart).toHaveClass('theme-dark');
            expect(react_1.screen.getByTestId('brand-logo')).toBeInTheDocument();
        });
        it('should provide export capabilities in multiple formats', async () => {
            (0, react_1.render)((0, jsx_runtime_1.jsx)(AIMetricsChart_1.AIMetricsChart, { type: "performance", data: mockPerformanceData, enableExport: true, exportFormats: ['png', 'svg', 'pdf', 'csv'], "data-testid": "exportable-chart" }), { wrapper: TestWrapper });
            react_1.fireEvent.click(react_1.screen.getByTestId('export-menu-toggle'));
            await (0, react_1.waitFor)(() => {
                expect(react_1.screen.getByTestId('export-menu')).toBeInTheDocument();
                expect(react_1.screen.getByText('Export as PNG')).toBeInTheDocument();
                expect(react_1.screen.getByText('Export as SVG')).toBeInTheDocument();
                expect(react_1.screen.getByText('Export as PDF')).toBeInTheDocument();
                expect(react_1.screen.getByText('Export Data as CSV')).toBeInTheDocument();
            });
        });
        it('should support dashboard integration with auto-refresh', async () => {
            const onDataUpdate = jest.fn();
            (0, react_1.render)((0, jsx_runtime_1.jsx)(AIMetricsChart_1.AIMetricsChart, { type: "performance", data: mockPerformanceData, dashboardMode: true, autoRefresh: true, refreshInterval: 30000, onDataUpdate: onDataUpdate, showLastUpdate: true, "data-testid": "dashboard-chart" }), { wrapper: TestWrapper });
            expect(react_1.screen.getByTestId('dashboard-chart')).toBeInTheDocument();
            expect(react_1.screen.getByTestId('auto-refresh-indicator')).toBeInTheDocument();
            expect(react_1.screen.getByTestId('last-update-time')).toBeInTheDocument();
            // Should call onDataUpdate when auto-refresh triggers
            await (0, react_1.waitFor)(() => {
                expect(onDataUpdate).toHaveBeenCalled();
            }, { timeout: 31000 });
        });
        it('should provide accessibility features with screen reader support', async () => {
            (0, react_1.render)((0, jsx_runtime_1.jsx)(AIMetricsChart_1.AIMetricsChart, { type: "performance", data: mockPerformanceData, enableAccessibility: true, ariaLabel: "AI Performance Metrics Chart", dataTableFallback: true, "data-testid": "accessible-chart" }), { wrapper: TestWrapper });
            const chart = react_1.screen.getByTestId('accessible-chart');
            expect(chart).toHaveAttribute('aria-label', 'AI Performance Metrics Chart');
            expect(chart).toHaveAttribute('role', 'img');
            // Should provide data table fallback
            react_1.fireEvent.click(react_1.screen.getByTestId('show-data-table'));
            await (0, react_1.waitFor)(() => {
                expect(react_1.screen.getByTestId('data-table-fallback')).toBeInTheDocument();
                expect(react_1.screen.getByRole('table')).toBeInTheDocument();
            });
        });
        it('should support collaborative features with annotations', async () => {
            const onAnnotationAdd = jest.fn();
            (0, react_1.render)((0, jsx_runtime_1.jsx)(AIMetricsChart_1.AIMetricsChart, { type: "performance", data: mockPerformanceData, enableAnnotations: true, onAnnotationAdd: onAnnotationAdd, existingAnnotations: [
                    { x: '2024-01-01T02:00:00Z', y: 93.9, text: 'Server maintenance impact', user: 'admin' }
                ], "data-testid": "collaborative-chart" }), { wrapper: TestWrapper });
            expect(react_1.screen.getByTestId('collaborative-chart')).toBeInTheDocument();
            expect(react_1.screen.getByTestId('annotation-marker')).toBeInTheDocument();
            // Test adding new annotation
            react_1.fireEvent.doubleClick(react_1.screen.getByTestId('line-chart'));
            await (0, react_1.waitFor)(() => {
                expect(react_1.screen.getByTestId('annotation-dialog')).toBeInTheDocument();
            });
            const annotationInput = react_1.screen.getByPlaceholderText('Add annotation...');
            react_1.fireEvent.change(annotationInput, { target: { value: 'Performance dip noted' } });
            react_1.fireEvent.click(react_1.screen.getByRole('button', { name: 'Add Annotation' }));
            expect(onAnnotationAdd).toHaveBeenCalledWith(expect.objectContaining({
                text: 'Performance dip noted'
            }));
        });
    });
});
//# sourceMappingURL=AIMetricsChart.test.js.map