chore: establish learning module baseline

OpenMAIC/packages/@openmaic/renderer/test/elements/audio/BaseAudioElement.interaction.test.tsx

@@ -0,0 +1,55 @@
+// @vitest-environment jsdom
+import { fireEvent, render, screen } from '@testing-library/react';
+import { afterEach, describe, expect, it, vi } from 'vitest';
+import type { PPTAudioElement } from '@openmaic/dsl';
+import { BaseAudioElement } from '../../../src/elements/audio/BaseAudioElement';
+
+const audio: PPTAudioElement = {
+  id: 'audio-1',
+  type: 'audio',
+  left: 40,
+  top: 80,
+  width: 48,
+  height: 48,
+  rotate: 0,
+  fixedRatio: true,
+  color: '#7c3aed',
+  loop: false,
+  autoplay: false,
+  src: 'https://cdn.example.com/lesson-intro.mp3',
+};
+
+class MockAudio {
+  onended: (() => void) | null = null;
+  onerror: (() => void) | null = null;
+  loop = false;
+  pause = vi.fn();
+  play = vi.fn().mockResolvedValue(undefined);
+}
+
+afterEach(() => vi.unstubAllGlobals());
+
+describe('BaseAudioElement preview control', () => {
+  it('switches from the speaker to a pause control while previewing', async () => {
+    const instance = new MockAudio();
+    const AudioMock = vi.fn(function AudioMock() {
+      return instance;
+    });
+    vi.stubGlobal('Audio', AudioMock);
+    render(<BaseAudioElement elementInfo={audio} />);
+
+    const button = screen.getByRole('button', { name: 'Play audio' });
+    fireEvent.click(button);
+
+    expect(AudioMock).toHaveBeenCalledWith(audio.src);
+    expect(
+      (await screen.findByRole('button', { name: 'Pause audio' })).getAttribute('aria-pressed'),
+    ).toBe('true');
+
+    fireEvent.click(screen.getByRole('button', { name: 'Pause audio' }));
+    expect(instance.pause).toHaveBeenCalledOnce();
+    expect(screen.getByRole('button', { name: 'Play audio' }).getAttribute('aria-pressed')).toBe(
+      'false',
+    );
+  });
+});

OpenMAIC/packages/@openmaic/renderer/test/elements/audio/BaseAudioElement.test.ts

@@ -0,0 +1,43 @@
+import React from 'react';
+import { renderToStaticMarkup } from 'react-dom/server';
+import { describe, expect, it } from 'vitest';
+import type { PPTAudioElement } from '@openmaic/dsl';
+import { BaseAudioElement } from '../../../src/elements/audio/BaseAudioElement';
+
+const audio: PPTAudioElement = {
+  id: 'audio-1',
+  type: 'audio',
+  left: 40,
+  top: 80,
+  width: 240,
+  height: 64,
+  rotate: 0,
+  fixedRatio: true,
+  color: '#7c3aed',
+  loop: false,
+  autoplay: false,
+  src: 'https://cdn.example.com/lesson-intro.mp3?version=2',
+};
+
+describe('BaseAudioElement', () => {
+  it('renders a standalone speaker control without exposing the source name', () => {
+    const markup = renderToStaticMarkup(
+      React.createElement(BaseAudioElement, { elementInfo: audio }),
+    );
+
+    expect(markup).toContain('base-element-audio');
+    expect(markup).toContain('data-audio-element');
+    expect(markup).toContain('Play audio');
+    expect(markup).not.toContain('lesson-intro.mp3');
+    expect(markup).toContain('width:240px');
+    expect(markup).toContain('height:64px');
+  });
+
+  it('renders a disabled speaker when the source is missing', () => {
+    const markup = renderToStaticMarkup(
+      React.createElement(BaseAudioElement, { elementInfo: { ...audio, src: '' } }),
+    );
+
+    expect(markup).toContain('disabled=""');
+  });
+});