test(frontend): add missing unit tests for vocabulary and core modules

Add comprehensive tests for previously uncovered frontend components:
- audio_feedback.ts: success/failure sound functions
- language_config.ts: language configuration store
- multi_word_modal.ts: Alpine.js multi-word expression modal
- word_modal.ts: Alpine.js word edit modal component
- word_popover.ts: Alpine.js word popover component

Extend existing tests:
- review_header.ts: event delegation and DOMContentLoaded init
- tts_settings.ts: init() and initVoices() functions

Improves overall frontend coverage from 64.31% to 66.59% statements.

Author: HugoFara

tests/frontend/admin/tts_settings.test.ts

@@ -298,5 +298,133 @@ describe('tts_settings.ts', () => {
         expect(component.getVoiceDisplayName(voice)).toBe('Test Voice');
       });
     });
+
+    describe('init', () => {
+      it('calls autoSetCurrentLanguage, loadSavedSettings, and initVoices', () => {
+        const config: TTSSettingsConfig = { currentLanguageCode: 'en' };
+        const component = ttsSettingsApp(config);
+
+        const autoSetSpy = vi.spyOn(component, 'autoSetCurrentLanguage');
+        const loadSpy = vi.spyOn(component, 'loadSavedSettings');
+        const initVoicesSpy = vi.spyOn(component, 'initVoices');
+
+        component.init();
+
+        expect(autoSetSpy).toHaveBeenCalled();
+        expect(loadSpy).toHaveBeenCalled();
+        expect(initVoicesSpy).toHaveBeenCalled();
+      });
+
+      it('initializes component state in correct order', () => {
+        mockGetTTSSettingsWithMigration.mockReturnValue({
+          voice: 'Saved Voice',
+          rate: 1.2,
+          pitch: 0.9
+        });
+
+        Object.defineProperty(window, 'location', {
+          value: { search: '?lang=de' },
+          writable: true
+        });
+
+        const config: TTSSettingsConfig = { currentLanguageCode: 'en' };
+        const component = ttsSettingsApp(config);
+
+        component.init();
+
+        // After init, language should be set from URL
+        expect(component.currentLanguage).toBe('de');
+        // Settings should be loaded for the correct language
+        expect(mockGetTTSSettingsWithMigration).toHaveBeenCalledWith('de');
+      });
+    });
+
+    describe('initVoices', () => {
+      it('sets voicesLoading to false when speechSynthesis is undefined', () => {
+        delete (window as any).speechSynthesis;
+
+        const component = ttsSettingsApp();
+        component.initVoices();
+
+        expect(component.voicesLoading).toBe(false);
+      });
+
+      it('loads voices immediately when available', () => {
+        (window as any).speechSynthesis = {
+          getVoices: vi.fn().mockReturnValue([
+            { name: 'Voice 1', lang: 'en', default: false }
+          ]),
+          onvoiceschanged: null
+        };
+
+        const component = ttsSettingsApp({ currentLanguageCode: '' });
+        const populateSpy = vi.spyOn(component, 'populateVoiceList');
+
+        component.initVoices();
+
+        expect(populateSpy).toHaveBeenCalled();
+        expect(component.voicesLoading).toBe(false);
+      });
+
+      it('waits for onvoiceschanged when voices not immediately available', () => {
+        let onvoiceschangedCallback: (() => void) | null = null;
+        (window as any).speechSynthesis = {
+          getVoices: vi.fn().mockReturnValue([]),
+          set onvoiceschanged(cb: (() => void) | null) {
+            onvoiceschangedCallback = cb;
+          },
+          get onvoiceschanged() {
+            return onvoiceschangedCallback;
+          }
+        };
+
+        const component = ttsSettingsApp({ currentLanguageCode: '' });
+        const populateSpy = vi.spyOn(component, 'populateVoiceList');
+
+        component.initVoices();
+
+        // Should not call populate yet, still loading
+        expect(populateSpy).not.toHaveBeenCalled();
+        expect(component.voicesLoading).toBe(true);
+
+        // Simulate voices becoming available
+        if (onvoiceschangedCallback) {
+          onvoiceschangedCallback();
+        }
+
+        expect(populateSpy).toHaveBeenCalled();
+        expect(component.voicesLoading).toBe(false);
+      });
+    });
+
+    describe('saveSettings with empty voice', () => {
+      it('saves undefined voice when selectedVoice is empty', () => {
+        const config: TTSSettingsConfig = { currentLanguageCode: 'en' };
+        const component = ttsSettingsApp(config);
+        component.selectedVoice = '';
+        component.rate = 1.0;
+        component.pitch = 1.0;
+
+        component.saveSettings();
+
+        expect(mockSaveTTSSettings).toHaveBeenCalledWith('en', {
+          voice: undefined,
+          rate: 1.0,
+          pitch: 1.0
+        });
+      });
+    });
+
+    describe('saveSettings error case', () => {
+      it('logs error when no language is set', () => {
+        const consoleSpy = vi.spyOn(console, 'error').mockImplementation(() => {});
+        const component = ttsSettingsApp();
+
+        component.saveSettings();
+
+        expect(consoleSpy).toHaveBeenCalledWith('Cannot save TTS settings: no language selected');
+        expect(mockSaveTTSSettings).not.toHaveBeenCalled();
+      });
+    });
   });
 });

tests/frontend/core/audio_feedback.test.ts

@@ -0,0 +1,202 @@
+/**
+ * Tests for audio_feedback.ts - Audio feedback utility functions.
+ */
+import { describe, it, expect, beforeEach, afterEach, vi } from 'vitest';
+import { successSound, failureSound } from '../../../src/frontend/js/shared/utils/audio_feedback';
+
+describe('audio_feedback.ts', () => {
+  let mockSuccessAudio: HTMLAudioElement;
+  let mockFailureAudio: HTMLAudioElement;
+
+  beforeEach(() => {
+    vi.clearAllMocks();
+    document.body.innerHTML = '';
+
+    // Create mock audio elements with mocked methods
+    mockSuccessAudio = document.createElement('audio');
+    mockSuccessAudio.id = 'success_sound';
+    mockSuccessAudio.pause = vi.fn();
+    mockSuccessAudio.play = vi.fn().mockResolvedValue(undefined);
+
+    mockFailureAudio = document.createElement('audio');
+    mockFailureAudio.id = 'failure_sound';
+    mockFailureAudio.pause = vi.fn();
+    mockFailureAudio.play = vi.fn().mockResolvedValue(undefined);
+  });
+
+  afterEach(() => {
+    document.body.innerHTML = '';
+  });
+
+  describe('successSound', () => {
+    it('plays success sound when both audio elements exist', async () => {
+      document.body.appendChild(mockSuccessAudio);
+      document.body.appendChild(mockFailureAudio);
+
+      await successSound();
+
+      expect(mockSuccessAudio.pause).toHaveBeenCalled();
+      expect(mockFailureAudio.pause).toHaveBeenCalled();
+      expect(mockSuccessAudio.play).toHaveBeenCalled();
+    });
+
+    it('pauses failure audio before playing success', async () => {
+      document.body.appendChild(mockSuccessAudio);
+      document.body.appendChild(mockFailureAudio);
+      const callOrder: string[] = [];
+      mockSuccessAudio.pause = vi.fn(() => callOrder.push('success.pause'));
+      mockFailureAudio.pause = vi.fn(() => callOrder.push('failure.pause'));
+      mockSuccessAudio.play = vi.fn(() => {
+        callOrder.push('success.play');
+        return Promise.resolve();
+      });
+
+      await successSound();
+
+      expect(callOrder).toContain('failure.pause');
+      expect(callOrder.indexOf('failure.pause')).toBeLessThan(callOrder.indexOf('success.play'));
+    });
+
+    it('returns resolved promise when success audio element exists', async () => {
+      document.body.appendChild(mockSuccessAudio);
+
+      const result = successSound();
+
+      await expect(result).resolves.toBeUndefined();
+    });
+
+    it('returns resolved promise when success audio element does not exist', async () => {
+      // No audio elements in DOM
+
+      const result = successSound();
+
+      await expect(result).resolves.toBeUndefined();
+    });
+
+    it('handles only success audio element existing', async () => {
+      document.body.appendChild(mockSuccessAudio);
+
+      await successSound();
+
+      expect(mockSuccessAudio.pause).toHaveBeenCalled();
+      expect(mockSuccessAudio.play).toHaveBeenCalled();
+    });
+
+    it('handles only failure audio element existing', async () => {
+      document.body.appendChild(mockFailureAudio);
+
+      const result = successSound();
+
+      expect(mockFailureAudio.pause).toHaveBeenCalled();
+      await expect(result).resolves.toBeUndefined();
+    });
+
+    it('propagates play promise rejection', async () => {
+      const playError = new Error('Playback failed');
+      mockSuccessAudio.play = vi.fn().mockRejectedValue(playError);
+      document.body.appendChild(mockSuccessAudio);
+
+      await expect(successSound()).rejects.toThrow('Playback failed');
+    });
+  });
+
+  describe('failureSound', () => {
+    it('plays failure sound when both audio elements exist', async () => {
+      document.body.appendChild(mockSuccessAudio);
+      document.body.appendChild(mockFailureAudio);
+
+      await failureSound();
+
+      expect(mockSuccessAudio.pause).toHaveBeenCalled();
+      expect(mockFailureAudio.pause).toHaveBeenCalled();
+      expect(mockFailureAudio.play).toHaveBeenCalled();
+    });
+
+    it('pauses success audio before playing failure', async () => {
+      document.body.appendChild(mockSuccessAudio);
+      document.body.appendChild(mockFailureAudio);
+      const callOrder: string[] = [];
+      mockSuccessAudio.pause = vi.fn(() => callOrder.push('success.pause'));
+      mockFailureAudio.pause = vi.fn(() => callOrder.push('failure.pause'));
+      mockFailureAudio.play = vi.fn(() => {
+        callOrder.push('failure.play');
+        return Promise.resolve();
+      });
+
+      await failureSound();
+
+      expect(callOrder).toContain('success.pause');
+      expect(callOrder.indexOf('success.pause')).toBeLessThan(callOrder.indexOf('failure.play'));
+    });
+
+    it('returns resolved promise when failure audio element exists', async () => {
+      document.body.appendChild(mockFailureAudio);
+
+      const result = failureSound();
+
+      await expect(result).resolves.toBeUndefined();
+    });
+
+    it('returns resolved promise when failure audio element does not exist', async () => {
+      // No audio elements in DOM
+
+      const result = failureSound();
+
+      await expect(result).resolves.toBeUndefined();
+    });
+
+    it('handles only failure audio element existing', async () => {
+      document.body.appendChild(mockFailureAudio);
+
+      await failureSound();
+
+      expect(mockFailureAudio.pause).toHaveBeenCalled();
+      expect(mockFailureAudio.play).toHaveBeenCalled();
+    });
+
+    it('handles only success audio element existing', async () => {
+      document.body.appendChild(mockSuccessAudio);
+
+      const result = failureSound();
+
+      expect(mockSuccessAudio.pause).toHaveBeenCalled();
+      await expect(result).resolves.toBeUndefined();
+    });
+
+    it('propagates play promise rejection', async () => {
+      const playError = new Error('Playback failed');
+      mockFailureAudio.play = vi.fn().mockRejectedValue(playError);
+      document.body.appendChild(mockFailureAudio);
+
+      await expect(failureSound()).rejects.toThrow('Playback failed');
+    });
+  });
+
+  describe('interaction between success and failure sounds', () => {
+    it('calling success then failure stops success and plays failure', async () => {
+      document.body.appendChild(mockSuccessAudio);
+      document.body.appendChild(mockFailureAudio);
+
+      await successSound();
+      vi.clearAllMocks();
+
+      await failureSound();
+
+      expect(mockSuccessAudio.pause).toHaveBeenCalled();
+      expect(mockFailureAudio.play).toHaveBeenCalled();
+    });
+
+    it('calling failure then success stops failure and plays success', async () => {
+      document.body.appendChild(mockSuccessAudio);
+      document.body.appendChild(mockFailureAudio);
+
+      await failureSound();
+      vi.clearAllMocks();
+
+      await successSound();
+
+      expect(mockFailureAudio.pause).toHaveBeenCalled();
+      expect(mockSuccessAudio.play).toHaveBeenCalled();
+    });
+  });
+});