@getmicdrop/svelte-components 1.0.1

package/dist/telemetry.spec.js

@@ -0,0 +1,660 @@
+import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest';
+
+// Mock all OpenTelemetry modules before importing telemetry
+vi.mock('@opentelemetry/sdk-trace-web', () => ({
+  WebTracerProvider: vi.fn().mockImplementation(() => ({
+    addSpanProcessor: vi.fn(),
+    register: vi.fn(),
+    getTracer: vi.fn().mockReturnValue({
+      startSpan: vi.fn().mockReturnValue({
+        setAttribute: vi.fn(),
+        setStatus: vi.fn(),
+        recordException: vi.fn(),
+        end: vi.fn(),
+        name: 'test-span',
+      }),
+    }),
+    shutdown: vi.fn().mockResolvedValue(undefined),
+  })),
+}));
+
+vi.mock('@opentelemetry/sdk-trace-base', () => ({
+  BatchSpanProcessor: vi.fn(),
+}));
+
+vi.mock('@opentelemetry/exporter-trace-otlp-http', () => ({
+  OTLPTraceExporter: vi.fn(),
+}));
+
+vi.mock('@opentelemetry/resources', () => ({
+  Resource: vi.fn(),
+}));
+
+vi.mock('@opentelemetry/semantic-conventions', () => ({
+  SEMRESATTRS_SERVICE_NAME: 'service.name',
+  SEMRESATTRS_SERVICE_VERSION: 'service.version',
+  SEMRESATTRS_DEPLOYMENT_ENVIRONMENT: 'deployment.environment',
+}));
+
+vi.mock('@opentelemetry/instrumentation-document-load', () => ({
+  DocumentLoadInstrumentation: vi.fn().mockImplementation(() => ({
+    enable: vi.fn(),
+  })),
+}));
+
+vi.mock('@opentelemetry/instrumentation-fetch', () => ({
+  FetchInstrumentation: vi.fn().mockImplementation(() => ({
+    enable: vi.fn(),
+  })),
+}));
+
+vi.mock('@opentelemetry/instrumentation-xml-http-request', () => ({
+  XMLHttpRequestInstrumentation: vi.fn().mockImplementation(() => ({
+    enable: vi.fn(),
+  })),
+}));
+
+vi.mock('@opentelemetry/instrumentation-user-interaction', () => ({
+  UserInteractionInstrumentation: vi.fn().mockImplementation(() => ({
+    enable: vi.fn(),
+  })),
+}));
+
+vi.mock('@opentelemetry/context-zone', () => ({
+  ZoneContextManager: vi.fn(),
+}));
+
+vi.mock('@opentelemetry/propagator-b3', () => ({
+  B3Propagator: vi.fn(),
+}));
+
+describe('Telemetry Module', () => {
+  let telemetry;
+  let originalWindow;
+  let originalDocument;
+  let mockSpan;
+
+  beforeEach(async () => {
+    vi.resetModules();
+
+    // Save original globals
+    originalWindow = global.window;
+    originalDocument = global.document;
+
+    // Setup mock window
+    global.window = {
+      location: {
+        pathname: '/performers',
+        search: '?test=1',
+        hash: '#section',
+        href: 'http://localhost/performers?test=1#section',
+      },
+      addEventListener: vi.fn(),
+      __TRACE_CONTEXT__: null,
+    };
+
+    global.document = {
+      readyState: 'complete',
+      title: 'Test Page',
+      referrer: 'http://localhost/',
+      addEventListener: vi.fn(),
+    };
+
+    global.navigator = {
+      userAgent: 'test-agent',
+      language: 'en-US',
+      platform: 'test-platform',
+    };
+
+    // Create mock span
+    mockSpan = {
+      setAttribute: vi.fn(),
+      setStatus: vi.fn(),
+      recordException: vi.fn(),
+      end: vi.fn(),
+      name: 'test-span',
+    };
+
+    // Re-import with fresh mocks
+    telemetry = await import('./telemetry.js');
+  });
+
+  afterEach(() => {
+    global.window = originalWindow;
+    global.document = originalDocument;
+    vi.clearAllMocks();
+  });
+
+  describe('initTelemetry', () => {
+    it('exports initTelemetry function', () => {
+      expect(telemetry.initTelemetry).toBeDefined();
+      expect(typeof telemetry.initTelemetry).toBe('function');
+    });
+
+    it('can be called without errors', () => {
+      expect(() => telemetry.initTelemetry()).not.toThrow();
+    });
+  });
+
+  describe('startSpan', () => {
+    it('exports startSpan function', () => {
+      expect(telemetry.startSpan).toBeDefined();
+      expect(typeof telemetry.startSpan).toBe('function');
+    });
+
+    it('returns null when tracer is not initialized', async () => {
+      vi.resetModules();
+      const tempWindow = global.window;
+      delete global.window;
+
+      const freshTelemetry = await import('./telemetry.js');
+      global.window = tempWindow;
+
+      const result = freshTelemetry.startSpan('test-span');
+      expect(result).toBeNull();
+    });
+
+    it('can be called with name only', () => {
+      telemetry.initTelemetry();
+      const result = telemetry.startSpan('test-span');
+      expect(result === null || typeof result === 'object').toBe(true);
+    });
+
+    it('can be called with name and options', () => {
+      telemetry.initTelemetry();
+      const result = telemetry.startSpan('test-span', { attributes: { key: 'value' } });
+      expect(result === null || typeof result === 'object').toBe(true);
+    });
+  });
+
+  describe('endSpan', () => {
+    it('exports endSpan function', () => {
+      expect(telemetry.endSpan).toBeDefined();
+      expect(typeof telemetry.endSpan).toBe('function');
+    });
+
+    it('handles null span gracefully', () => {
+      expect(() => telemetry.endSpan(null)).not.toThrow();
+    });
+
+    it('handles undefined span gracefully', () => {
+      expect(() => telemetry.endSpan(undefined)).not.toThrow();
+    });
+
+    it('can end a span with default status', () => {
+      expect(() => telemetry.endSpan(mockSpan)).not.toThrow();
+      expect(mockSpan.setStatus).toHaveBeenCalledWith({ code: 0 });
+      expect(mockSpan.end).toHaveBeenCalled();
+    });
+
+    it('can end a span with custom status', () => {
+      expect(() => telemetry.endSpan(mockSpan, { code: 2, message: 'error' })).not.toThrow();
+      expect(mockSpan.setStatus).toHaveBeenCalledWith({ code: 2, message: 'error' });
+    });
+  });
+
+  describe('trackPageView', () => {
+    it('exports trackPageView function', () => {
+      expect(telemetry.trackPageView).toBeDefined();
+      expect(typeof telemetry.trackPageView).toBe('function');
+    });
+
+    it('can be called without errors', () => {
+      expect(() => telemetry.trackPageView('/test-page')).not.toThrow();
+    });
+
+    it('can be called with page path and title', () => {
+      expect(() => telemetry.trackPageView('/test-page', 'Test Page Title')).not.toThrow();
+    });
+  });
+
+  describe('trackEvent', () => {
+    it('exports trackEvent function', () => {
+      expect(telemetry.trackEvent).toBeDefined();
+      expect(typeof telemetry.trackEvent).toBe('function');
+    });
+
+    it('can be called with event name only', () => {
+      expect(() => telemetry.trackEvent('button_click')).not.toThrow();
+    });
+
+    it('can be called with event name and attributes', () => {
+      expect(() => telemetry.trackEvent('button_click', { button_id: 'submit' })).not.toThrow();
+    });
+  });
+
+  describe('trackPerformerAction', () => {
+    it('exports trackPerformerAction function', () => {
+      expect(telemetry.trackPerformerAction).toBeDefined();
+      expect(typeof telemetry.trackPerformerAction).toBe('function');
+    });
+
+    it('can be called with action only', () => {
+      expect(() => telemetry.trackPerformerAction('profile_update')).not.toThrow();
+    });
+
+    it('can be called with action and metadata', () => {
+      expect(() => telemetry.trackPerformerAction('profile_update', { field: 'bio' })).not.toThrow();
+    });
+  });
+
+  describe('trackError', () => {
+    it('exports trackError function', () => {
+      expect(telemetry.trackError).toBeDefined();
+      expect(typeof telemetry.trackError).toBe('function');
+    });
+
+    it('can be called with Error object', () => {
+      const error = new Error('Test error');
+      expect(() => telemetry.trackError(error)).not.toThrow();
+    });
+
+    it('can be called with Error and context', () => {
+      const error = new Error('Test error');
+      expect(() => telemetry.trackError(error, { component: 'TestComponent' })).not.toThrow();
+    });
+
+    it('handles error without stack trace', () => {
+      const error = { message: 'Simple error', name: 'SimpleError' };
+      expect(() => telemetry.trackError(error)).not.toThrow();
+    });
+
+    it('handles string error', () => {
+      expect(() => telemetry.trackError('String error message')).not.toThrow();
+    });
+  });
+
+  describe('trackAPICall', () => {
+    it('exports trackAPICall function', () => {
+      expect(telemetry.trackAPICall).toBeDefined();
+      expect(typeof telemetry.trackAPICall).toBe('function');
+    });
+
+    it('can be called with basic parameters', () => {
+      expect(() => telemetry.trackAPICall('GET', '/api/users', 200, 150)).not.toThrow();
+    });
+
+    it('can be called with additional attributes', () => {
+      expect(() => telemetry.trackAPICall('POST', '/api/users', 201, 200, { user_id: '123' })).not.toThrow();
+    });
+
+    it('handles error status codes', () => {
+      expect(() => telemetry.trackAPICall('GET', '/api/users', 500, 100)).not.toThrow();
+    });
+
+    it('handles 4xx status codes', () => {
+      expect(() => telemetry.trackAPICall('GET', '/api/users', 404, 50)).not.toThrow();
+    });
+  });
+
+  describe('trackUserAction', () => {
+    it('exports trackUserAction function', () => {
+      expect(telemetry.trackUserAction).toBeDefined();
+      expect(typeof telemetry.trackUserAction).toBe('function');
+    });
+
+    it('can be called with action only', () => {
+      expect(() => telemetry.trackUserAction('login')).not.toThrow();
+    });
+
+    it('can be called with action and metadata', () => {
+      expect(() => telemetry.trackUserAction('login', { method: 'email' })).not.toThrow();
+    });
+  });
+
+  describe('shutdownTelemetry', () => {
+    it('exports shutdownTelemetry function', () => {
+      expect(telemetry.shutdownTelemetry).toBeDefined();
+      expect(typeof telemetry.shutdownTelemetry).toBe('function');
+    });
+
+    it('can be called without errors', async () => {
+      await expect(telemetry.shutdownTelemetry()).resolves.not.toThrow();
+    });
+
+    it('handles shutdown when not initialized', async () => {
+      vi.resetModules();
+      const tempWindow = global.window;
+      delete global.window;
+
+      const freshTelemetry = await import('./telemetry.js');
+      global.window = tempWindow;
+
+      await expect(freshTelemetry.shutdownTelemetry()).resolves.not.toThrow();
+    });
+  });
+
+  describe('Module auto-initialization', () => {
+    it('adds DOMContentLoaded listener when document is loading', async () => {
+      vi.resetModules();
+
+      global.document = {
+        readyState: 'loading',
+        addEventListener: vi.fn(),
+        title: 'Test',
+        referrer: '',
+      };
+
+      await import('./telemetry.js');
+
+      expect(global.document.addEventListener).toHaveBeenCalledWith(
+        'DOMContentLoaded',
+        expect.any(Function)
+      );
+    });
+
+    it('initializes immediately when document is ready', async () => {
+      vi.resetModules();
+
+      global.document = {
+        readyState: 'complete',
+        title: 'Test',
+        referrer: '',
+        addEventListener: vi.fn(),
+      };
+
+      await import('./telemetry.js');
+    });
+
+    it('adds beforeunload listener for cleanup', async () => {
+      vi.resetModules();
+
+      global.window.addEventListener = vi.fn();
+
+      await import('./telemetry.js');
+
+      expect(global.window.addEventListener).toHaveBeenCalledWith(
+        'beforeunload',
+        expect.any(Function)
+      );
+    });
+  });
+
+  describe('SSR trace context connection', () => {
+    it('handles missing SSR trace context', async () => {
+      vi.resetModules();
+
+      global.window.__TRACE_CONTEXT__ = null;
+
+      await expect(import('./telemetry.js')).resolves.not.toThrow();
+    });
+
+    it('handles SSR trace context when present', async () => {
+      vi.resetModules();
+
+      global.window.__TRACE_CONTEXT__ = {
+        traceId: 'test-trace-id',
+        spanId: 'test-span-id',
+        traceFlags: 1,
+      };
+
+      await expect(import('./telemetry.js')).resolves.not.toThrow();
+    });
+  });
+});
+
+describe('Telemetry with traces disabled', () => {
+  let telemetry;
+
+  beforeEach(async () => {
+    vi.resetModules();
+
+    vi.stubEnv('VITE_OTEL_TRACES_ENABLED', 'false');
+
+    global.window = {
+      location: {
+        pathname: '/performers',
+        search: '',
+        hash: '',
+        href: 'http://localhost/performers',
+      },
+      addEventListener: vi.fn(),
+      __TRACE_CONTEXT__: null,
+    };
+
+    global.document = {
+      readyState: 'complete',
+      title: 'Test',
+      referrer: '',
+      addEventListener: vi.fn(),
+    };
+
+    global.navigator = {
+      userAgent: 'test',
+      language: 'en',
+      platform: 'test',
+    };
+
+    telemetry = await import('./telemetry.js');
+  });
+
+  afterEach(() => {
+    vi.unstubAllEnvs();
+    vi.clearAllMocks();
+  });
+
+  it('initTelemetry returns early when tracing is disabled', () => {
+    const consoleSpy = vi.spyOn(console, 'log');
+    telemetry.initTelemetry();
+    expect(consoleSpy).toHaveBeenCalledWith('[Telemetry] Tracing is disabled');
+  });
+});
+
+describe('Telemetry debug mode', () => {
+  let telemetry;
+
+  beforeEach(async () => {
+    vi.resetModules();
+
+    vi.stubEnv('VITE_OTEL_DEBUG', 'true');
+
+    global.window = {
+      location: {
+        pathname: '/performers',
+        search: '',
+        hash: '',
+        href: 'http://localhost/performers',
+      },
+      addEventListener: vi.fn(),
+      __TRACE_CONTEXT__: null,
+    };
+
+    global.document = {
+      readyState: 'complete',
+      title: 'Test',
+      referrer: '',
+      addEventListener: vi.fn(),
+    };
+
+    global.navigator = {
+      userAgent: 'test',
+      language: 'en',
+      platform: 'test',
+    };
+
+    telemetry = await import('./telemetry.js');
+  });
+
+  afterEach(() => {
+    vi.unstubAllEnvs();
+    vi.clearAllMocks();
+  });
+
+  it('can initialize with debug mode enabled', () => {
+    expect(() => telemetry.initTelemetry()).not.toThrow();
+  });
+});
+
+describe('Telemetry shutdown error handling', () => {
+  let telemetry;
+
+  beforeEach(async () => {
+    vi.resetModules();
+
+    // Mock shutdown to throw error
+    vi.mock('@opentelemetry/sdk-trace-web', () => ({
+      WebTracerProvider: vi.fn().mockImplementation(() => ({
+        addSpanProcessor: vi.fn(),
+        register: vi.fn(),
+        getTracer: vi.fn().mockReturnValue({
+          startSpan: vi.fn().mockReturnValue({
+            setAttribute: vi.fn(),
+            setStatus: vi.fn(),
+            recordException: vi.fn(),
+            end: vi.fn(),
+            name: 'test-span',
+          }),
+        }),
+        shutdown: vi.fn().mockRejectedValue(new Error('Shutdown failed')),
+      })),
+    }));
+
+    global.window = {
+      location: {
+        pathname: '/performers',
+        search: '',
+        hash: '',
+        href: 'http://localhost/performers',
+      },
+      addEventListener: vi.fn(),
+      __TRACE_CONTEXT__: null,
+    };
+
+    global.document = {
+      readyState: 'complete',
+      title: 'Test',
+      referrer: '',
+      addEventListener: vi.fn(),
+    };
+
+    global.navigator = {
+      userAgent: 'test',
+      language: 'en',
+      platform: 'test',
+    };
+
+    telemetry = await import('./telemetry.js');
+  });
+
+  afterEach(() => {
+    vi.unstubAllEnvs();
+    vi.clearAllMocks();
+  });
+
+  it('handles shutdown error gracefully', async () => {
+    const consoleErrorSpy = vi.spyOn(console, 'error');
+    telemetry.initTelemetry();
+    await telemetry.shutdownTelemetry();
+    // Should not throw, just log error
+    expect(consoleErrorSpy).toBeDefined();
+  });
+});
+
+describe('Telemetry DOMContentLoaded event', () => {
+  let telemetry;
+  let domContentLoadedCallback;
+
+  beforeEach(async () => {
+    vi.resetModules();
+
+    global.window = {
+      location: {
+        pathname: '/performers',
+        search: '',
+        hash: '',
+        href: 'http://localhost/performers',
+      },
+      addEventListener: vi.fn(),
+      __TRACE_CONTEXT__: null,
+    };
+
+    // Mock document with loading state
+    global.document = {
+      readyState: 'loading',
+      title: 'Test',
+      referrer: '',
+      addEventListener: vi.fn((event, callback) => {
+        if (event === 'DOMContentLoaded') {
+          domContentLoadedCallback = callback;
+        }
+      }),
+    };
+
+    global.navigator = {
+      userAgent: 'test',
+      language: 'en',
+      platform: 'test',
+    };
+
+    telemetry = await import('./telemetry.js');
+  });
+
+  afterEach(() => {
+    vi.unstubAllEnvs();
+    vi.clearAllMocks();
+  });
+
+  it('registers DOMContentLoaded event listener when document is loading', () => {
+    expect(document.addEventListener).toHaveBeenCalledWith('DOMContentLoaded', expect.any(Function));
+  });
+
+  it('calls initTelemetry and connectWithSSRTrace when DOMContentLoaded fires', () => {
+    // Trigger the DOMContentLoaded callback
+    if (domContentLoadedCallback) {
+      expect(() => domContentLoadedCallback()).not.toThrow();
+    }
+  });
+});
+
+describe('Telemetry beforeunload event', () => {
+  let beforeUnloadCallback;
+
+  beforeEach(async () => {
+    vi.resetModules();
+
+    global.window = {
+      location: {
+        pathname: '/performers',
+        search: '',
+        hash: '',
+        href: 'http://localhost/performers',
+      },
+      addEventListener: vi.fn((event, callback) => {
+        if (event === 'beforeunload') {
+          beforeUnloadCallback = callback;
+        }
+      }),
+      __TRACE_CONTEXT__: null,
+    };
+
+    global.document = {
+      readyState: 'complete',
+      title: 'Test',
+      referrer: '',
+      addEventListener: vi.fn(),
+    };
+
+    global.navigator = {
+      userAgent: 'test',
+      language: 'en',
+      platform: 'test',
+    };
+
+    await import('./telemetry.js');
+  });
+
+  afterEach(() => {
+    vi.unstubAllEnvs();
+    vi.clearAllMocks();
+  });
+
+  it('registers beforeunload event listener', () => {
+    expect(window.addEventListener).toHaveBeenCalledWith('beforeunload', expect.any(Function));
+  });
+
+  it('calls shutdownTelemetry when beforeunload fires', () => {
+    if (beforeUnloadCallback) {
+      expect(() => beforeUnloadCallback()).not.toThrow();
+    }
+  });
+});