app/tests/magnitude/09-voice.mag.ts

import { test } from 'magnitude-test';

test('[Happy Path] User can have a full voice conversation with AI', async (agent) => {
  // Act: Navigate to chat page (assumes user is already authenticated)
  await agent.act('Navigate to http://localhost:3000/chat');

  // Check: Initial state - voice button shows "Start Voice Conversation"
  await agent.check('A button with text "Start Voice Conversation" is visible');

  // Act: Click to start voice mode
  await agent.act('Click the "Start Voice Conversation" button');

  // Check: Button text changes to indicate checking or generating state
  // Could be "Checking for greeting..." or "Generating speech..." or "Listening..."
  await agent.check(
    'The button text has changed from "Start Voice Conversation" to indicate an active state'
  );

  // Act: If there's a Skip button visible (greeting is playing), click it
  await agent.act('Click the Skip button if it is visible');

  // Check: Should transition to listening state
  await agent.check('The button shows "Listening... Start speaking"');

  // Check: Development test controls should be visible (in dev mode)
  await agent.check('A section with text "DEV: State Machine Testing" is visible');

  // Act: Use dev button to simulate user starting to speak
  await agent.act('Click the "Simulate Speech" button in the dev controls');

  // Check: Button shows speaking state
  await agent.check('The button text contains "Speaking"');

  // Act: Add a phrase using the dev button
  await agent.act('Click the "Add Phrase" button in the dev controls');

  // Check: A message bubble appears showing the transcript being spoken
  await agent.check('A message with text "You (speaking...)" is visible');
  await agent.check('The message contains the text "Test message"');

  // Check: Button shows timing out state
  await agent.check('The button text contains "auto-submit"');

  // Act: Trigger the timeout using dev button
  await agent.act('Click the "Trigger Timeout" button in the dev controls');

  // Check: Button shows submitting or waiting state
  await agent.check('The button text contains "Submitting" or "Waiting for AI"');

  // Check: The user message appears in the chat
  await agent.check('A message with text "Test message" appears in the chat history');

  // Wait for AI response (this takes a few seconds)
  await agent.wait(10000);

  // Check: AI message appears
  await agent.check('An AI message appears in the chat');

  // Check: Button shows generating or playing TTS state
  await agent.check('The button text contains "Generating speech" or "AI is speaking"');

  // Check: Skip button is visible during TTS
  await agent.check('A "Skip" button is visible');

  // Act: Skip the AI audio
  await agent.act('Click the Skip button');

  // Check: Returns to listening state
  await agent.check('The button shows "Listening... Start speaking"');

  // Act: Stop voice mode
  await agent.act('Click the main voice button to stop');

  // Check: Returns to idle state
  await agent.check('The button shows "Start Voice Conversation"');
});

test('[Unhappy Path] Voice mode handles errors gracefully', async (agent) => {
  await agent.act('Navigate to http://localhost:3000/chat');

  // Act: Start voice mode
  await agent.act('Click the "Start Voice Conversation" button');

  // Simulate an error scenario (e.g., microphone permission denied)
  // Note: In a real test, this would involve mocking the getUserMedia API to reject
  await agent.act('Simulate a microphone permission error');

  // Check: Error message is displayed
  await agent.check('An error message is shown to the user');

  // Check: Voice mode returns to idle state
  await agent.check('The button shows "Start Voice Conversation"');
});

test('[Happy Path] Text input is disabled during voice mode', async (agent) => {
  await agent.act('Navigate to http://localhost:3000/chat');

  // Check: Text input is enabled initially
  await agent.check('The text input field "Or type your thoughts here..." is enabled');

  // Act: Start voice mode
  await agent.act('Click the "Start Voice Conversation" button');

  // Check: Text input is disabled
  await agent.check('The text input field is disabled');

  // Act: Stop voice mode
  await agent.act('Click the main voice button to stop');

  // Check: Text input is enabled again
  await agent.check('The text input field is enabled');
});

test('[Happy Path] User can type a message while voice mode is idle', async (agent) => {
  await agent.act('Navigate to http://localhost:3000/chat');

  // Act: Type a message in the text input
  await agent.act('Type "This is a text message" into the text input field');

  // Act: Submit the message
  await agent.act('Press Enter or click the Send button');

  // Check: Message appears in chat
  await agent.check('The message "This is a text message" appears as a user message');

  // Wait for AI response
  await agent.wait(5000);

  // Check: AI responds
  await agent.check('An AI response appears in the chat');
});