@zap-wunschlachen/wl-shared-components 1.0.0

package/tests/unit/components/Audio/Waveform.spec.ts

@@ -0,0 +1,484 @@
+import { describe, it, expect, beforeEach, vi, afterEach } from 'vitest';
+import { mount, VueWrapper } from '@vue/test-utils';
+import { nextTick } from 'vue';
+import Waveform from '@components/Audio/Waveform.vue';
+
+// Mock WaveSurfer with proper hoisting
+vi.mock('wavesurfer.js', () => {
+  const mockWsInstance = {
+    on: vi.fn(),
+    play: vi.fn(),
+    pause: vi.fn(),
+    loadBlob: vi.fn(),
+    load: vi.fn(),
+    getCurrentTime: vi.fn(() => 0),
+    destroy: vi.fn()
+  };
+
+  const mockWaveSurfer = {
+    create: vi.fn(() => mockWsInstance),
+    on: vi.fn(),
+    play: vi.fn(),
+    pause: vi.fn(),
+    loadBlob: vi.fn(),
+    load: vi.fn(),
+    getCurrentTime: vi.fn(() => 0),
+    destroy: vi.fn()
+  };
+
+  return {
+    default: mockWaveSurfer,
+    __mockWsInstance: mockWsInstance,
+    __mockWaveSurfer: mockWaveSurfer
+  };
+});
+
+// Mock getComputedStyle
+Object.defineProperty(window, 'getComputedStyle', {
+  value: vi.fn(() => ({
+    getPropertyValue: vi.fn((prop: string) => {
+      if (prop === '--Dental-Light-Blue-2') return '#93B1CF';
+      if (prop === '--Dental-Blue-0') return '#172774';
+      return '';
+    })
+  }))
+});
+
+describe('Waveform', () => {
+  let wrapper: VueWrapper;
+  let mockWaveSurfer: any;
+  let mockWsInstance: any;
+
+  beforeEach(async () => {
+    vi.clearAllMocks();
+
+    // Get the mock instances from the mocked module
+    const WaveSurferMock = await import('wavesurfer.js');
+    mockWaveSurfer = (WaveSurferMock as any).__mockWaveSurfer;
+    mockWsInstance = (WaveSurferMock as any).__mockWsInstance;
+
+    mockWaveSurfer.create.mockReturnValue(mockWsInstance);
+
+    // Mock DOM element dimensions
+    Object.defineProperty(HTMLElement.prototype, 'clientWidth', {
+      configurable: true,
+      value: 400
+    });
+    Object.defineProperty(HTMLElement.prototype, 'clientHeight', {
+      configurable: true,
+      value: 50
+    });
+  });
+
+  afterEach(() => {
+    if (wrapper) {
+      wrapper.unmount();
+    }
+  });
+
+  describe('Rendering', () => {
+    it('renders waveform container div', () => {
+      wrapper = mount(Waveform, {
+        props: { src: 'test.mp3' }
+      });
+
+      expect(wrapper.find('.waveform').exists()).toBe(true);
+    });
+
+    it('applies correct CSS classes', () => {
+      wrapper = mount(Waveform, {
+        props: { src: 'test.mp3' }
+      });
+
+      const waveformDiv = wrapper.find('.waveform');
+      expect(waveformDiv.exists()).toBe(true);
+    });
+  });
+
+  describe('Props', () => {
+    it('accepts src prop', () => {
+      wrapper = mount(Waveform, {
+        props: { src: 'test-audio.mp3' }
+      });
+
+      expect(wrapper.props('src')).toBe('test-audio.mp3');
+    });
+
+    it('accepts blob prop', () => {
+      const blob = new Blob(['test'], { type: 'audio/wav' });
+      wrapper = mount(Waveform, {
+        props: { blob }
+      });
+
+      expect(wrapper.props('blob')).toStrictEqual(blob);
+    });
+
+    it('can be mounted without props', () => {
+      expect(() => {
+        wrapper = mount(Waveform);
+      }).not.toThrow();
+    });
+  });
+
+  describe('WaveSurfer Integration', () => {
+    it('creates WaveSurfer instance on mount', async () => {
+      wrapper = mount(Waveform, {
+        props: { src: 'test.mp3' }
+      });
+
+      await nextTick();
+
+      expect(mockWaveSurfer.create).toHaveBeenCalledWith({
+        container: expect.any(Object),
+        waveColor: '#93B1CF',
+        progressColor: '#172774',
+        barWidth: 2,
+        barGap: 2,
+        barRadius: 4,
+        cursorWidth: 0,
+        height: 50,
+        width: 400
+      });
+    });
+
+    it('loads audio from src prop', async () => {
+      wrapper = mount(Waveform, {
+        props: { src: 'test-audio.mp3' }
+      });
+
+      await nextTick();
+
+      expect(mockWsInstance.load).toHaveBeenCalledWith('test-audio.mp3');
+      expect(mockWsInstance.loadBlob).not.toHaveBeenCalled();
+    });
+
+    it('loads audio from blob prop', async () => {
+      const blob = new Blob(['test'], { type: 'audio/wav' });
+      wrapper = mount(Waveform, {
+        props: { blob }
+      });
+
+      await nextTick();
+
+      expect(mockWsInstance.loadBlob).toHaveBeenCalledWith(blob);
+      expect(mockWsInstance.load).not.toHaveBeenCalled();
+    });
+
+    it('prioritizes blob over src when both provided', async () => {
+      const blob = new Blob(['test'], { type: 'audio/wav' });
+      wrapper = mount(Waveform, {
+        props: { src: 'test.mp3', blob }
+      });
+
+      await nextTick();
+
+      expect(mockWsInstance.loadBlob).toHaveBeenCalledWith(blob);
+      expect(mockWsInstance.load).not.toHaveBeenCalled();
+    });
+
+    it('handles missing audio source', async () => {
+      const consoleSpy = vi.spyOn(console, 'error').mockImplementation(() => {});
+
+      wrapper = mount(Waveform);
+      await nextTick();
+
+      // Should handle the error gracefully
+      expect(wrapper.find('.waveform').exists()).toBe(true);
+
+      consoleSpy.mockRestore();
+    });
+  });
+
+  describe('Event Handling', () => {
+    beforeEach(async () => {
+      wrapper = mount(Waveform, {
+        props: { src: 'test.mp3' }
+      });
+      await nextTick();
+    });
+
+    it('sets up WaveSurfer event listeners', () => {
+      expect(mockWsInstance.on).toHaveBeenCalledWith('audioprocess', expect.any(Function));
+      expect(mockWsInstance.on).toHaveBeenCalledWith('finish', expect.any(Function));
+      expect(mockWsInstance.on).toHaveBeenCalledWith('ready', expect.any(Function));
+      expect(mockWsInstance.on).toHaveBeenCalledWith('error', expect.any(Function));
+    });
+
+    it('emits timeupdate when audioprocess event fires', () => {
+      const audioprocessCallback = mockWsInstance.on.mock.calls.find(call => call[0] === 'audioprocess')[1];
+
+      audioprocessCallback(30);
+
+      expect(wrapper.emitted('timeupdate')).toBeTruthy();
+      expect(wrapper.emitted('timeupdate')[0]).toEqual([30]);
+    });
+
+    it('emits finish when finish event fires', () => {
+      const finishCallback = mockWsInstance.on.mock.calls.find(call => call[0] === 'finish')[1];
+
+      finishCallback();
+
+      expect(wrapper.emitted('finish')).toBeTruthy();
+    });
+
+    it('emits ready when ready event fires', () => {
+      const readyCallback = mockWsInstance.on.mock.calls.find(call => call[0] === 'ready')[1];
+
+      readyCallback(120);
+
+      expect(wrapper.emitted('ready')).toBeTruthy();
+      expect(wrapper.emitted('ready')[0]).toEqual([120]);
+    });
+
+    it('handles error events', () => {
+      const consoleSpy = vi.spyOn(console, 'error').mockImplementation(() => {});
+      const errorCallback = mockWsInstance.on.mock.calls.find(call => call[0] === 'error')[1];
+
+      const testError = new Error('Test error');
+      errorCallback(testError);
+
+      expect(consoleSpy).toHaveBeenCalledWith(testError);
+
+      consoleSpy.mockRestore();
+    });
+  });
+
+  describe('Exposed Methods', () => {
+    beforeEach(async () => {
+      wrapper = mount(Waveform, {
+        props: { src: 'test.mp3' }
+      });
+      await nextTick();
+    });
+
+    it('exposes play method', () => {
+      expect(wrapper.vm.play).toBeInstanceOf(Function);
+
+      wrapper.vm.play();
+
+      expect(mockWsInstance.play).toHaveBeenCalled();
+    });
+
+    it('exposes pause method', () => {
+      expect(wrapper.vm.pause).toBeInstanceOf(Function);
+
+      wrapper.vm.pause();
+
+      expect(mockWsInstance.pause).toHaveBeenCalled();
+    });
+
+    it('exposes getCurrentTime method', () => {
+      expect(wrapper.vm.getCurrentTime).toBeInstanceOf(Function);
+
+      mockWsInstance.getCurrentTime.mockReturnValue(45);
+
+      const currentTime = wrapper.vm.getCurrentTime();
+
+      expect(mockWsInstance.getCurrentTime).toHaveBeenCalled();
+      expect(currentTime).toBe(45);
+    });
+
+    it('handles play when WaveSurfer instance not ready', () => {
+      const consoleSpy = vi.spyOn(console, 'warn').mockImplementation(() => {});
+
+      // Create wrapper without initializing WaveSurfer
+      wrapper = mount(Waveform);
+      wrapper.vm.ws = null;
+
+      wrapper.vm.play();
+
+      expect(consoleSpy).toHaveBeenCalledWith('WaveSurfer instance not ready');
+
+      consoleSpy.mockRestore();
+    });
+
+    it('handles pause when WaveSurfer instance not ready', () => {
+      const consoleSpy = vi.spyOn(console, 'warn').mockImplementation(() => {});
+
+      wrapper = mount(Waveform);
+      wrapper.vm.ws = null;
+
+      wrapper.vm.pause();
+
+      expect(consoleSpy).toHaveBeenCalledWith('WaveSurfer instance not ready');
+
+      consoleSpy.mockRestore();
+    });
+
+    it('returns 0 for getCurrentTime when WaveSurfer instance not ready', () => {
+      wrapper = mount(Waveform);
+      wrapper.vm.ws = null;
+
+      const currentTime = wrapper.vm.getCurrentTime();
+
+      expect(currentTime).toBe(0);
+    });
+  });
+
+  describe('CSS Variable Integration', () => {
+    it('reads CSS variables for colors', async () => {
+      wrapper = mount(Waveform, {
+        props: { src: 'test.mp3' }
+      });
+
+      await nextTick();
+
+      expect(window.getComputedStyle).toHaveBeenCalledWith(document.documentElement);
+      expect(mockWaveSurfer.create).toHaveBeenCalledWith(
+        expect.objectContaining({
+          waveColor: '#93B1CF',
+          progressColor: '#172774'
+        })
+      );
+    });
+
+    it('handles missing CSS variables gracefully', async () => {
+      const mockGetComputedStyle = vi.fn(() => ({
+        getPropertyValue: vi.fn(() => '')
+      }));
+
+      Object.defineProperty(window, 'getComputedStyle', {
+        value: mockGetComputedStyle,
+        configurable: true
+      });
+
+      wrapper = mount(Waveform, {
+        props: { src: 'test.mp3' }
+      });
+
+      await nextTick();
+
+      expect(mockWaveSurfer.create).toHaveBeenCalledWith(
+        expect.objectContaining({
+          waveColor: '',
+          progressColor: ''
+        })
+      );
+    });
+  });
+
+  describe('Component Lifecycle', () => {
+    it('destroys WaveSurfer instance on unmount', async () => {
+      wrapper = mount(Waveform, {
+        props: { src: 'test.mp3' }
+      });
+
+      await nextTick();
+
+      wrapper.unmount();
+
+      expect(mockWsInstance.destroy).toHaveBeenCalled();
+    });
+
+    it('handles unmount when WaveSurfer instance is null', async () => {
+      wrapper = mount(Waveform);
+
+      expect(() => {
+        wrapper.unmount();
+      }).not.toThrow();
+    });
+  });
+
+  describe('Error Handling', () => {
+    it('handles WaveSurfer creation errors', async () => {
+      const consoleSpy = vi.spyOn(console, 'error').mockImplementation(() => {});
+      mockWaveSurfer.create.mockImplementation(() => {
+        throw new Error('WaveSurfer creation failed');
+      });
+
+      wrapper = mount(Waveform, {
+        props: { src: 'test.mp3' }
+      });
+
+      await nextTick();
+
+      // Component should still render despite the error
+      expect(wrapper.find('.waveform').exists()).toBe(true);
+
+      consoleSpy.mockRestore();
+    });
+
+    it('handles load errors gracefully', async () => {
+      const consoleSpy = vi.spyOn(console, 'error').mockImplementation(() => {});
+      mockWsInstance.load.mockImplementation(() => {
+        throw new Error('Load failed');
+      });
+
+      wrapper = mount(Waveform, {
+        props: { src: 'invalid-url' }
+      });
+
+      await nextTick();
+
+      expect(consoleSpy).toHaveBeenCalledWith(
+        'Error initializing WaveSurfer:',
+        expect.any(Error)
+      );
+
+      consoleSpy.mockRestore();
+    });
+
+    it('handles loadBlob errors gracefully', async () => {
+      const consoleSpy = vi.spyOn(console, 'error').mockImplementation(() => {});
+      mockWsInstance.loadBlob.mockImplementation(() => {
+        throw new Error('Load blob failed');
+      });
+
+      const invalidBlob = new Blob(['invalid'], { type: 'text/plain' });
+      wrapper = mount(Waveform, {
+        props: { blob: invalidBlob }
+      });
+
+      await nextTick();
+
+      expect(consoleSpy).toHaveBeenCalledWith(
+        'Error initializing WaveSurfer:',
+        expect.any(Error)
+      );
+
+      consoleSpy.mockRestore();
+    });
+  });
+
+  describe('Component Integration', () => {
+    it('works with different container sizes', async () => {
+      Object.defineProperty(HTMLElement.prototype, 'clientWidth', {
+        configurable: true,
+        value: 800
+      });
+      Object.defineProperty(HTMLElement.prototype, 'clientHeight', {
+        configurable: true,
+        value: 100
+      });
+
+      wrapper = mount(Waveform, {
+        props: { src: 'test.mp3' }
+      });
+
+      await nextTick();
+
+      expect(mockWaveSurfer.create).toHaveBeenCalledWith(
+        expect.objectContaining({
+          width: 800,
+          height: 100
+        })
+      );
+    });
+
+    it('renders consistently on multiple mounts', () => {
+      const wrapper1 = mount(Waveform, {
+        props: { src: 'test.mp3' }
+      });
+
+      const wrapper2 = mount(Waveform, {
+        props: { src: 'test.mp3' }
+      });
+
+      expect(wrapper1.find('.waveform').exists()).toBe(true);
+      expect(wrapper2.find('.waveform').exists()).toBe(true);
+
+      wrapper1.unmount();
+      wrapper2.unmount();
+    });
+  });
+});