@zap-wunschlachen/wl-shared-components 1.0.16 → 1.0.17

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

@@ -1,404 +1,404 @@
-import { describe, it, expect, beforeEach, vi } from 'vitest';
-import { mount, VueWrapper } from '@vue/test-utils';
-import Audio from '@components/Audio/Audio.vue';
-
-// Mock all icon components
-vi.mock('@components/Icons/Audio/Play.vue', () => ({
-  default: {
-    name: 'IconPlayAudio',
-    template: '<div class="icon-play-audio">Play Icon</div>'
-  }
-}));
-
-vi.mock('@components/Icons/Audio/Pause.vue', () => ({
-  default: {
-    name: 'IconPauseAudio',
-    template: '<div class="icon-pause-audio">Pause Icon</div>'
-  }
-}));
-
-vi.mock('@components/Icons/Audio/CloudSaved.vue', () => ({
-  default: {
-    name: 'IconCloudSaved',
-    template: '<div class="icon-cloud-saved">Cloud Saved Icon</div>'
-  }
-}));
-
-vi.mock('@components/Icons/Audio/CloudFailed.vue', () => ({
-  default: {
-    name: 'IconCloudFailed',
-    template: '<div class="icon-cloud-failed">Cloud Failed Icon</div>'
-  }
-}));
-
-vi.mock('@components/Icons/Audio/Delete.vue', () => ({
-  default: {
-    name: 'IconDeleteAudio',
-    template: '<div class="icon-delete-audio">Delete Icon</div>'
-  }
-}));
-
-// Mock Waveform component
-vi.mock('@components/Audio/Waveform.vue', () => ({
-  default: {
-    name: 'WLWaveform',
-    template: '<div class="wl-waveform">Waveform Component</div>',
-    props: ['src', 'blob'],
-    methods: {
-      play: vi.fn(),
-      pause: vi.fn(),
-      getCurrentTime: vi.fn(() => 0)
-    }
-  }
-}));
-
-describe('Audio', () => {
-  let wrapper: VueWrapper;
-
-  const defaultProps = {
-    id: 1,
-    src: 'test-audio.mp3',
-    cloudStatus: true,
-    viewType: 'OVERVIEW',
-    showDeleteButton: true,
-    showCloudStatus: true
-  };
-
-  beforeEach(() => {
-    wrapper = mount(Audio, {
-      props: defaultProps
-    });
-  });
-
-  describe('Rendering', () => {
-    it('renders audio container with correct testid', () => {
-      expect(wrapper.find('[data-testid="root"]').exists()).toBe(true);
-      expect(wrapper.find('.audio-container').exists()).toBe(true);
-    });
-
-    it('renders with waveform component by default', () => {
-      expect(wrapper.find('.waveform-container').exists()).toBe(true);
-      expect(wrapper.findComponent({ name: 'WLWaveform' }).exists()).toBe(true);
-    });
-
-    it('renders playback controls', () => {
-      expect(wrapper.find('.playback-button').exists()).toBe(true);
-      expect(wrapper.find('.time').exists()).toBe(true);
-    });
-
-    it('shows play icon when not playing', () => {
-      expect(wrapper.findComponent({ name: 'IconPlayAudio' }).exists()).toBe(true);
-      expect(wrapper.findComponent({ name: 'IconPauseAudio' }).exists()).toBe(false);
-    });
-
-    it('shows pause icon when playing', async () => {
-      // Access the reactive reference directly
-      wrapper.vm.isPlaying = true;
-      await wrapper.vm.$nextTick();
-
-      expect(wrapper.findComponent({ name: 'IconPauseAudio' }).exists()).toBe(true);
-      expect(wrapper.findComponent({ name: 'IconPlayAudio' }).exists()).toBe(false);
-    });
-  });
-
-  describe('Props', () => {
-    it('accepts required id prop', () => {
-      expect(wrapper.props('id')).toBe(1);
-    });
-
-    it('accepts src prop', () => {
-      expect(wrapper.props('src')).toBe('test-audio.mp3');
-    });
-
-    it('accepts blob prop', () => {
-      const blob = new Blob(['test'], { type: 'audio/wav' });
-      const wrapperWithBlob = mount(Audio, {
-        props: { ...defaultProps, blob }
-      });
-
-      expect(wrapperWithBlob.props('blob')).toStrictEqual(blob);
-    });
-
-    it('has correct default values', () => {
-      const minimalWrapper = mount(Audio, {
-        props: { id: 1 }
-      });
-
-      expect(minimalWrapper.props('cloudStatus')).toBe(false);
-      expect(minimalWrapper.props('viewType')).toBe('OVERVIEW');
-      expect(minimalWrapper.props('showDeleteButton')).toBe(true);
-      expect(minimalWrapper.props('showCloudStatus')).toBe(true);
-    });
-
-    it('accepts viewType prop with enum values', () => {
-      const recorderWrapper = mount(Audio, {
-        props: { ...defaultProps, viewType: 'RECORDER' }
-      });
-
-      expect(recorderWrapper.props('viewType')).toBe('RECORDER');
-    });
-  });
-
-  describe('Cloud Status Display', () => {
-    it('shows cloud saved icon when cloudStatus is true', () => {
-      expect(wrapper.findComponent({ name: 'IconCloudSaved' }).exists()).toBe(true);
-      expect(wrapper.findComponent({ name: 'IconCloudFailed' }).exists()).toBe(false);
-    });
-
-    it('shows cloud failed icon when cloudStatus is false', async () => {
-      await wrapper.setProps({ cloudStatus: false });
-
-      expect(wrapper.findComponent({ name: 'IconCloudFailed' }).exists()).toBe(true);
-      expect(wrapper.findComponent({ name: 'IconCloudSaved' }).exists()).toBe(false);
-    });
-
-    it('hides cloud status when showCloudStatus is false', async () => {
-      await wrapper.setProps({ showCloudStatus: false });
-
-      expect(wrapper.find('.cloud-status').exists()).toBe(false);
-      expect(wrapper.findComponent({ name: 'IconCloudSaved' }).exists()).toBe(false);
-      expect(wrapper.findComponent({ name: 'IconCloudFailed' }).exists()).toBe(false);
-    });
-
-    it('shows cloud status when showCloudStatus is true', () => {
-      expect(wrapper.find('.cloud-status').exists()).toBe(true);
-    });
-  });
-
-  describe('Delete Button', () => {
-    it('shows delete button when showDeleteButton is true', () => {
-      expect(wrapper.find('.delete-button').exists()).toBe(true);
-      expect(wrapper.findComponent({ name: 'IconDeleteAudio' }).exists()).toBe(true);
-    });
-
-    it('hides delete button when showDeleteButton is false', async () => {
-      await wrapper.setProps({ showDeleteButton: false });
-
-      expect(wrapper.find('.delete-button').exists()).toBe(false);
-      expect(wrapper.findComponent({ name: 'IconDeleteAudio' }).exists()).toBe(false);
-    });
-
-    it('emits remove event with id when delete button is clicked', async () => {
-      const deleteIcon = wrapper.findComponent({ name: 'IconDeleteAudio' });
-      await deleteIcon.trigger('click');
-
-      expect(wrapper.emitted('remove')).toBeTruthy();
-      expect(wrapper.emitted('remove')[0]).toEqual([1]);
-    });
-  });
-
-  describe('Time Display', () => {
-    it('displays current time', () => {
-      const timeElement = wrapper.find('.time');
-      expect(timeElement.exists()).toBe(true);
-      expect(timeElement.text()).toBe('00:00');
-    });
-
-    it('updates time display when updateTime is called', async () => {
-      await wrapper.vm.updateTime(125); // 2:05
-
-      expect(wrapper.find('.time').text()).toBe('02:05');
-    });
-
-    it('formats time correctly', () => {
-      // Test the formatTime function indirectly
-      expect(wrapper.vm.formatTime(0)).toBe('00:00');
-      expect(wrapper.vm.formatTime(65)).toBe('01:05');
-      expect(wrapper.vm.formatTime(3661)).toBe('61:01');
-    });
-  });
-
-  describe('Playback Controls', () => {
-    it('toggles play state when play button is clicked', async () => {
-      const playButton = wrapper.findComponent({ name: 'IconPlayAudio' });
-
-      // Mock the audioFile ref methods
-      const mockAudioFile = {
-        play: vi.fn(),
-        pause: vi.fn()
-      };
-      wrapper.vm.audioFile = mockAudioFile;
-
-      await playButton.trigger('click');
-
-      expect(mockAudioFile.play).toHaveBeenCalled();
-      expect(wrapper.vm.isPlaying).toBe(true);
-    });
-
-    it('toggles pause state when pause button is clicked', async () => {
-      wrapper.vm.isPlaying = true;
-      await wrapper.vm.$nextTick();
-
-      const mockAudioFile = {
-        play: vi.fn(),
-        pause: vi.fn()
-      };
-      wrapper.vm.audioFile = mockAudioFile;
-
-      const pauseButton = wrapper.findComponent({ name: 'IconPauseAudio' });
-      await pauseButton.trigger('click');
-
-      expect(mockAudioFile.pause).toHaveBeenCalled();
-      expect(wrapper.vm.isPlaying).toBe(false);
-    });
-
-    it('handles togglePlay when audioFile is not available', async () => {
-      wrapper.vm.audioFile = null;
-
-      expect(() => {
-        wrapper.vm.togglePlay();
-      }).not.toThrow();
-
-      expect(wrapper.vm.isPlaying).toBe(false);
-    });
-  });
-
-  describe('Waveform Integration', () => {
-    it('passes correct props to WLWaveform component', () => {
-      const waveformComponent = wrapper.findComponent({ name: 'WLWaveform' });
-
-      expect(waveformComponent.props('src')).toBe('test-audio.mp3');
-      expect(waveformComponent.props('blob')).toBeUndefined();
-    });
-
-    it('passes blob prop to WLWaveform when provided', async () => {
-      const blob = new Blob(['test'], { type: 'audio/wav' });
-      await wrapper.setProps({ blob });
-
-      const waveformComponent = wrapper.findComponent({ name: 'WLWaveform' });
-      expect(waveformComponent.props('blob')).toStrictEqual(blob);
-    });
-
-    it('handles waveform timeupdate event', async () => {
-      const waveformComponent = wrapper.findComponent({ name: 'WLWaveform' });
-
-      await waveformComponent.vm.$emit('timeupdate', 30);
-
-      expect(wrapper.find('.time').text()).toBe('00:30');
-    });
-
-    it('handles waveform finish event', async () => {
-      wrapper.vm.isPlaying = true;
-      await wrapper.vm.$nextTick();
-
-      const waveformComponent = wrapper.findComponent({ name: 'WLWaveform' });
-      await waveformComponent.vm.$emit('finish');
-
-      expect(wrapper.vm.isPlaying).toBe(false);
-    });
-
-    it('handles waveform ready event', async () => {
-      const waveformComponent = wrapper.findComponent({ name: 'WLWaveform' });
-
-      await waveformComponent.vm.$emit('ready', 180); // 3 minutes
-
-      expect(wrapper.vm.totalDuration).toBe('03:00');
-      expect(wrapper.find('.time').text()).toBe('03:00');
-    });
-  });
-
-  describe('Fallback Audio Element', () => {
-    it('shows native audio element when useWaveformComponent is false', async () => {
-      wrapper.vm.useWaveformComponent = false;
-      await wrapper.vm.$nextTick();
-
-      expect(wrapper.find('audio').exists()).toBe(true);
-      expect(wrapper.find('.waveform-container').exists()).toBe(false);
-    });
-
-    it('native audio element has correct attributes', async () => {
-      wrapper.vm.useWaveformComponent = false;
-      await wrapper.vm.$nextTick();
-
-      const audioElement = wrapper.find('audio');
-      expect(audioElement.attributes('src')).toBe('test-audio.mp3');
-      expect(audioElement.attributes('controls')).toBeDefined();
-    });
-  });
-
-  describe('Event Handling', () => {
-    it('deleteAudio function emits remove event', () => {
-      wrapper.vm.deleteAudio();
-
-      expect(wrapper.emitted('remove')).toBeTruthy();
-      expect(wrapper.emitted('remove')[0]).toEqual([1]);
-    });
-
-    it('onFinish sets isPlaying to false', () => {
-      wrapper.vm.isPlaying = true;
-      wrapper.vm.onFinish();
-
-      expect(wrapper.vm.isPlaying).toBe(false);
-    });
-
-    it('onLoaded sets duration and current time', () => {
-      wrapper.vm.onLoaded(240); // 4 minutes
-
-      expect(wrapper.vm.totalDuration).toBe('04:00');
-      expect(wrapper.vm.currentTimeText).toBe('04:00');
-    });
-  });
-
-  describe('Component Integration', () => {
-    it('can be mounted with minimal props', () => {
-      expect(() => {
-        mount(Audio, {
-          props: { id: 1 }
-        });
-      }).not.toThrow();
-    });
-
-    it('renders consistently on multiple mounts', () => {
-      const wrapper1 = mount(Audio, {
-        props: defaultProps
-      });
-
-      const wrapper2 = mount(Audio, {
-        props: defaultProps
-      });
-
-      expect(wrapper1.find('.audio-container').exists()).toBe(true);
-      expect(wrapper2.find('.audio-container').exists()).toBe(true);
-    });
-  });
-
-  describe('Error Handling', () => {
-    it('handles missing src and blob props gracefully', () => {
-      const wrapperWithoutSrc = mount(Audio, {
-        props: { id: 2 }
-      });
-
-      expect(wrapperWithoutSrc.find('.audio-container').exists()).toBe(true);
-    });
-
-    it('handles invalid id prop type', () => {
-      const wrapperWithStringId = mount(Audio, {
-        props: { ...defaultProps, id: '123' as any }
-      });
-
-      expect(wrapperWithStringId.props('id')).toBe('123');
-    });
-  });
-
-  describe('Styling Classes', () => {
-    it('applies correct CSS classes', () => {
-      expect(wrapper.find('.audio-container').exists()).toBe(true);
-      expect(wrapper.find('.audio-controls').exists()).toBe(true);
-      expect(wrapper.find('.playback-button').exists()).toBe(true);
-      expect(wrapper.find('.time').exists()).toBe(true);
-      expect(wrapper.find('.cloud-status').exists()).toBe(true);
-      expect(wrapper.find('.delete-button').exists()).toBe(true);
-    });
-  });
-
-  describe('Accessibility', () => {
-    it('provides testid for testing', () => {
-      expect(wrapper.find('[data-testid="root"]').exists()).toBe(true);
-    });
-
-    it('maintains semantic structure', () => {
-      expect(wrapper.find('.audio-container').exists()).toBe(true);
-      expect(wrapper.find('.audio-controls').exists()).toBe(true);
-    });
-  });
+import { describe, it, expect, beforeEach, vi } from 'vitest';
+import { mount, VueWrapper } from '@vue/test-utils';
+import Audio from '@components/Audio/Audio.vue';
+
+// Mock all icon components
+vi.mock('@components/Icons/Audio/Play.vue', () => ({
+  default: {
+    name: 'IconPlayAudio',
+    template: '<div class="icon-play-audio">Play Icon</div>'
+  }
+}));
+
+vi.mock('@components/Icons/Audio/Pause.vue', () => ({
+  default: {
+    name: 'IconPauseAudio',
+    template: '<div class="icon-pause-audio">Pause Icon</div>'
+  }
+}));
+
+vi.mock('@components/Icons/Audio/CloudSaved.vue', () => ({
+  default: {
+    name: 'IconCloudSaved',
+    template: '<div class="icon-cloud-saved">Cloud Saved Icon</div>'
+  }
+}));
+
+vi.mock('@components/Icons/Audio/CloudFailed.vue', () => ({
+  default: {
+    name: 'IconCloudFailed',
+    template: '<div class="icon-cloud-failed">Cloud Failed Icon</div>'
+  }
+}));
+
+vi.mock('@components/Icons/Audio/Delete.vue', () => ({
+  default: {
+    name: 'IconDeleteAudio',
+    template: '<div class="icon-delete-audio">Delete Icon</div>'
+  }
+}));
+
+// Mock Waveform component
+vi.mock('@components/Audio/Waveform.vue', () => ({
+  default: {
+    name: 'WLWaveform',
+    template: '<div class="wl-waveform">Waveform Component</div>',
+    props: ['src', 'blob'],
+    methods: {
+      play: vi.fn(),
+      pause: vi.fn(),
+      getCurrentTime: vi.fn(() => 0)
+    }
+  }
+}));
+
+describe('Audio', () => {
+  let wrapper: VueWrapper;
+
+  const defaultProps = {
+    id: 1,
+    src: 'test-audio.mp3',
+    cloudStatus: true,
+    viewType: 'OVERVIEW',
+    showDeleteButton: true,
+    showCloudStatus: true
+  };
+
+  beforeEach(() => {
+    wrapper = mount(Audio, {
+      props: defaultProps
+    });
+  });
+
+  describe('Rendering', () => {
+    it('renders audio container with correct testid', () => {
+      expect(wrapper.find('[data-testid="root"]').exists()).toBe(true);
+      expect(wrapper.find('.audio-container').exists()).toBe(true);
+    });
+
+    it('renders with waveform component by default', () => {
+      expect(wrapper.find('.waveform-container').exists()).toBe(true);
+      expect(wrapper.findComponent({ name: 'WLWaveform' }).exists()).toBe(true);
+    });
+
+    it('renders playback controls', () => {
+      expect(wrapper.find('.playback-button').exists()).toBe(true);
+      expect(wrapper.find('.time').exists()).toBe(true);
+    });
+
+    it('shows play icon when not playing', () => {
+      expect(wrapper.findComponent({ name: 'IconPlayAudio' }).exists()).toBe(true);
+      expect(wrapper.findComponent({ name: 'IconPauseAudio' }).exists()).toBe(false);
+    });
+
+    it('shows pause icon when playing', async () => {
+      // Access the reactive reference directly
+      wrapper.vm.isPlaying = true;
+      await wrapper.vm.$nextTick();
+
+      expect(wrapper.findComponent({ name: 'IconPauseAudio' }).exists()).toBe(true);
+      expect(wrapper.findComponent({ name: 'IconPlayAudio' }).exists()).toBe(false);
+    });
+  });
+
+  describe('Props', () => {
+    it('accepts required id prop', () => {
+      expect(wrapper.props('id')).toBe(1);
+    });
+
+    it('accepts src prop', () => {
+      expect(wrapper.props('src')).toBe('test-audio.mp3');
+    });
+
+    it('accepts blob prop', () => {
+      const blob = new Blob(['test'], { type: 'audio/wav' });
+      const wrapperWithBlob = mount(Audio, {
+        props: { ...defaultProps, blob }
+      });
+
+      expect(wrapperWithBlob.props('blob')).toStrictEqual(blob);
+    });
+
+    it('has correct default values', () => {
+      const minimalWrapper = mount(Audio, {
+        props: { id: 1 }
+      });
+
+      expect(minimalWrapper.props('cloudStatus')).toBe(false);
+      expect(minimalWrapper.props('viewType')).toBe('OVERVIEW');
+      expect(minimalWrapper.props('showDeleteButton')).toBe(true);
+      expect(minimalWrapper.props('showCloudStatus')).toBe(true);
+    });
+
+    it('accepts viewType prop with enum values', () => {
+      const recorderWrapper = mount(Audio, {
+        props: { ...defaultProps, viewType: 'RECORDER' }
+      });
+
+      expect(recorderWrapper.props('viewType')).toBe('RECORDER');
+    });
+  });
+
+  describe('Cloud Status Display', () => {
+    it('shows cloud saved icon when cloudStatus is true', () => {
+      expect(wrapper.findComponent({ name: 'IconCloudSaved' }).exists()).toBe(true);
+      expect(wrapper.findComponent({ name: 'IconCloudFailed' }).exists()).toBe(false);
+    });
+
+    it('shows cloud failed icon when cloudStatus is false', async () => {
+      await wrapper.setProps({ cloudStatus: false });
+
+      expect(wrapper.findComponent({ name: 'IconCloudFailed' }).exists()).toBe(true);
+      expect(wrapper.findComponent({ name: 'IconCloudSaved' }).exists()).toBe(false);
+    });
+
+    it('hides cloud status when showCloudStatus is false', async () => {
+      await wrapper.setProps({ showCloudStatus: false });
+
+      expect(wrapper.find('.cloud-status').exists()).toBe(false);
+      expect(wrapper.findComponent({ name: 'IconCloudSaved' }).exists()).toBe(false);
+      expect(wrapper.findComponent({ name: 'IconCloudFailed' }).exists()).toBe(false);
+    });
+
+    it('shows cloud status when showCloudStatus is true', () => {
+      expect(wrapper.find('.cloud-status').exists()).toBe(true);
+    });
+  });
+
+  describe('Delete Button', () => {
+    it('shows delete button when showDeleteButton is true', () => {
+      expect(wrapper.find('.delete-button').exists()).toBe(true);
+      expect(wrapper.findComponent({ name: 'IconDeleteAudio' }).exists()).toBe(true);
+    });
+
+    it('hides delete button when showDeleteButton is false', async () => {
+      await wrapper.setProps({ showDeleteButton: false });
+
+      expect(wrapper.find('.delete-button').exists()).toBe(false);
+      expect(wrapper.findComponent({ name: 'IconDeleteAudio' }).exists()).toBe(false);
+    });
+
+    it('emits remove event with id when delete button is clicked', async () => {
+      const deleteIcon = wrapper.findComponent({ name: 'IconDeleteAudio' });
+      await deleteIcon.trigger('click');
+
+      expect(wrapper.emitted('remove')).toBeTruthy();
+      expect(wrapper.emitted('remove')[0]).toEqual([1]);
+    });
+  });
+
+  describe('Time Display', () => {
+    it('displays current time', () => {
+      const timeElement = wrapper.find('.time');
+      expect(timeElement.exists()).toBe(true);
+      expect(timeElement.text()).toBe('00:00');
+    });
+
+    it('updates time display when updateTime is called', async () => {
+      await wrapper.vm.updateTime(125); // 2:05
+
+      expect(wrapper.find('.time').text()).toBe('02:05');
+    });
+
+    it('formats time correctly', () => {
+      // Test the formatTime function indirectly
+      expect(wrapper.vm.formatTime(0)).toBe('00:00');
+      expect(wrapper.vm.formatTime(65)).toBe('01:05');
+      expect(wrapper.vm.formatTime(3661)).toBe('61:01');
+    });
+  });
+
+  describe('Playback Controls', () => {
+    it('toggles play state when play button is clicked', async () => {
+      const playButton = wrapper.findComponent({ name: 'IconPlayAudio' });
+
+      // Mock the audioFile ref methods
+      const mockAudioFile = {
+        play: vi.fn(),
+        pause: vi.fn()
+      };
+      wrapper.vm.audioFile = mockAudioFile;
+
+      await playButton.trigger('click');
+
+      expect(mockAudioFile.play).toHaveBeenCalled();
+      expect(wrapper.vm.isPlaying).toBe(true);
+    });
+
+    it('toggles pause state when pause button is clicked', async () => {
+      wrapper.vm.isPlaying = true;
+      await wrapper.vm.$nextTick();
+
+      const mockAudioFile = {
+        play: vi.fn(),
+        pause: vi.fn()
+      };
+      wrapper.vm.audioFile = mockAudioFile;
+
+      const pauseButton = wrapper.findComponent({ name: 'IconPauseAudio' });
+      await pauseButton.trigger('click');
+
+      expect(mockAudioFile.pause).toHaveBeenCalled();
+      expect(wrapper.vm.isPlaying).toBe(false);
+    });
+
+    it('handles togglePlay when audioFile is not available', async () => {
+      wrapper.vm.audioFile = null;
+
+      expect(() => {
+        wrapper.vm.togglePlay();
+      }).not.toThrow();
+
+      expect(wrapper.vm.isPlaying).toBe(false);
+    });
+  });
+
+  describe('Waveform Integration', () => {
+    it('passes correct props to WLWaveform component', () => {
+      const waveformComponent = wrapper.findComponent({ name: 'WLWaveform' });
+
+      expect(waveformComponent.props('src')).toBe('test-audio.mp3');
+      expect(waveformComponent.props('blob')).toBeUndefined();
+    });
+
+    it('passes blob prop to WLWaveform when provided', async () => {
+      const blob = new Blob(['test'], { type: 'audio/wav' });
+      await wrapper.setProps({ blob });
+
+      const waveformComponent = wrapper.findComponent({ name: 'WLWaveform' });
+      expect(waveformComponent.props('blob')).toStrictEqual(blob);
+    });
+
+    it('handles waveform timeupdate event', async () => {
+      const waveformComponent = wrapper.findComponent({ name: 'WLWaveform' });
+
+      await waveformComponent.vm.$emit('timeupdate', 30);
+
+      expect(wrapper.find('.time').text()).toBe('00:30');
+    });
+
+    it('handles waveform finish event', async () => {
+      wrapper.vm.isPlaying = true;
+      await wrapper.vm.$nextTick();
+
+      const waveformComponent = wrapper.findComponent({ name: 'WLWaveform' });
+      await waveformComponent.vm.$emit('finish');
+
+      expect(wrapper.vm.isPlaying).toBe(false);
+    });
+
+    it('handles waveform ready event', async () => {
+      const waveformComponent = wrapper.findComponent({ name: 'WLWaveform' });
+
+      await waveformComponent.vm.$emit('ready', 180); // 3 minutes
+
+      expect(wrapper.vm.totalDuration).toBe('03:00');
+      expect(wrapper.find('.time').text()).toBe('03:00');
+    });
+  });
+
+  describe('Fallback Audio Element', () => {
+    it('shows native audio element when useWaveformComponent is false', async () => {
+      wrapper.vm.useWaveformComponent = false;
+      await wrapper.vm.$nextTick();
+
+      expect(wrapper.find('audio').exists()).toBe(true);
+      expect(wrapper.find('.waveform-container').exists()).toBe(false);
+    });
+
+    it('native audio element has correct attributes', async () => {
+      wrapper.vm.useWaveformComponent = false;
+      await wrapper.vm.$nextTick();
+
+      const audioElement = wrapper.find('audio');
+      expect(audioElement.attributes('src')).toBe('test-audio.mp3');
+      expect(audioElement.attributes('controls')).toBeDefined();
+    });
+  });
+
+  describe('Event Handling', () => {
+    it('deleteAudio function emits remove event', () => {
+      wrapper.vm.deleteAudio();
+
+      expect(wrapper.emitted('remove')).toBeTruthy();
+      expect(wrapper.emitted('remove')[0]).toEqual([1]);
+    });
+
+    it('onFinish sets isPlaying to false', () => {
+      wrapper.vm.isPlaying = true;
+      wrapper.vm.onFinish();
+
+      expect(wrapper.vm.isPlaying).toBe(false);
+    });
+
+    it('onLoaded sets duration and current time', () => {
+      wrapper.vm.onLoaded(240); // 4 minutes
+
+      expect(wrapper.vm.totalDuration).toBe('04:00');
+      expect(wrapper.vm.currentTimeText).toBe('04:00');
+    });
+  });
+
+  describe('Component Integration', () => {
+    it('can be mounted with minimal props', () => {
+      expect(() => {
+        mount(Audio, {
+          props: { id: 1 }
+        });
+      }).not.toThrow();
+    });
+
+    it('renders consistently on multiple mounts', () => {
+      const wrapper1 = mount(Audio, {
+        props: defaultProps
+      });
+
+      const wrapper2 = mount(Audio, {
+        props: defaultProps
+      });
+
+      expect(wrapper1.find('.audio-container').exists()).toBe(true);
+      expect(wrapper2.find('.audio-container').exists()).toBe(true);
+    });
+  });
+
+  describe('Error Handling', () => {
+    it('handles missing src and blob props gracefully', () => {
+      const wrapperWithoutSrc = mount(Audio, {
+        props: { id: 2 }
+      });
+
+      expect(wrapperWithoutSrc.find('.audio-container').exists()).toBe(true);
+    });
+
+    it('handles invalid id prop type', () => {
+      const wrapperWithStringId = mount(Audio, {
+        props: { ...defaultProps, id: '123' as any }
+      });
+
+      expect(wrapperWithStringId.props('id')).toBe('123');
+    });
+  });
+
+  describe('Styling Classes', () => {
+    it('applies correct CSS classes', () => {
+      expect(wrapper.find('.audio-container').exists()).toBe(true);
+      expect(wrapper.find('.audio-controls').exists()).toBe(true);
+      expect(wrapper.find('.playback-button').exists()).toBe(true);
+      expect(wrapper.find('.time').exists()).toBe(true);
+      expect(wrapper.find('.cloud-status').exists()).toBe(true);
+      expect(wrapper.find('.delete-button').exists()).toBe(true);
+    });
+  });
+
+  describe('Accessibility', () => {
+    it('provides testid for testing', () => {
+      expect(wrapper.find('[data-testid="root"]').exists()).toBe(true);
+    });
+
+    it('maintains semantic structure', () => {
+      expect(wrapper.find('.audio-container').exists()).toBe(true);
+      expect(wrapper.find('.audio-controls').exists()).toBe(true);
+    });
+  });
 });