@zap-wunschlachen/wl-shared-components 1.0.0

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

@@ -0,0 +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);
+    });
+  });
+});