SpeechProvider tests fails after ElevenLabs API key integration

[magush27]

The SpeechProvider test suite is currently failing due to the recent ElevenLabs API key integration. Three test files need updates to account for the new elevenLabsApiKey field and store dependencies.

The ElevenLabs integration added new elevenLabsApiKey field to SpeechProvider reducer state, TTS module now depends on Redux store being available and UI changes to Speech settings component for API key input.

Test failures breakdown:

1. Reducer Test - Initial State Mismatch

File: src/providers/SpeechProvider/__tests__/SpeechProvider.reducer.test.js:80

Error:

  expect(received).toEqual(expected)
  + "elevenLabsApiKey": "",  // Missing from test's initialState

Cause: Test's initialState doesn't include the new elevenLabsApiKey field.

---

2. Actions Test - Store Mock Missing

File: src/providers/SpeechProvider/__tests__/SpeechProvider.actions.test.js

Error:

  TypeError: Cannot read properties of undefined (reading 'getState')
  at getStateVoices (tts.js:36:13)

Cause: tts.js module tries to access store.getState() but the store isn't properly mocked in the test environment. Multiple speak() action tests affected (line ~127).

---

3. Actions Test - System Voice Dependencies

File: src/providers/SpeechProvider/__tests__/SpeechProvider.actions.test.js

Cause: After fixing store mock, tests will still fail because:

• tts.js calls window.speechSynthesis.getVoices()
• JSDOM test environment has no real voices
• Tests trying to speak or get voices will fail

Fix needed: Mock window.speechSynthesis and provide fake voices:

// Mock speechSynthesis API
  global.window.speechSynthesis = {
    getVoices: jest.fn(() => [
      { voiceURI: 'test-voice-en', lang: 'en-US', name: 'Test Voice' },
      { voiceURI: 'test-voice-es', lang: 'es-ES', name: 'Voz de Prueba' }
    ]),
    speak: jest.fn(),
    cancel: jest.fn(),
    pause: jest.fn(),
    resume: jest.fn()
  };

---

4. Component Snapshot Outdated

File: src/components/Settings/Speech/Speech.component.test.js

Error: 1 snapshot failed
Cause: Component now renders ElevenLabs API key input field, making the snapshot outdated.

---

Tasks

• Fix reducer test: Add elevenLabsApiKey: "" to initialState in SpeechProvider.reducer.test.js
• Add reducer test case: Test CHANGE_ELEVENLABS_API_KEY action updates state correctly
• Fix actions test: Mock Redux store or TTS module's store dependency in test setup
• Verify snapshot: Review UI changes and update snapshot with yarn test Speech.component.test.js -u
• Add new action test: Test changeElevenLabsApiKey() action creator
• Verify all tests pass: Run yarn test Speech --watchAll=false and confirm all tests pass
• Provide fake voice data for tests

Acceptance Criteria

• All SpeechProvider tests pass
• New elevenLabsApiKey functionality has test coverage
• Snapshots accurately reflect current UI
• No console warnings or errors during test run
• Tests don't depend on system having TTS voices installed

Testing Commands

Run all speech tests

yarn test Speech --watchAll=false

Run specific test file

yarn test SpeechProvider.reducer.test.js
yarn test SpeechProvider.actions.test.js
yarn test Speech.component.test.js

Update snapshots (after verifying UI changes)

yarn test Speech.component.test.js -u

Related PR

#1998 Create complete test coverage for ElevenLabs integration