RTL changes to AudioQueue tests

code-dot-org · Feb 8, 2024 · 802c256 · 802c256
1 parent f59a8ed
commit 802c256
Show file tree

Hide file tree

Showing 2 changed files with 44 additions and 37 deletions.
diff --git a/apps/src/templates/instructions/InlineAudio.jsx b/apps/src/templates/instructions/InlineAudio.jsx
@@ -123,9 +123,11 @@ class InlineAudio extends React.Component {
         playing: false,
         autoplayed: this.props.ttsAutoplayEnabled,
       });
-      const {playNextAudio, isPlaying} = this.context;
-      isPlaying.current = false;
-      playNextAudio();
+      if (this.props.ttsAutoplayEnabled) {
+        const {playNextAudio, isPlaying} = this.context;
+        isPlaying.current = false;
+        playNextAudio();
+      }
     });
 
     audio.addEventListener('error', e => {
@@ -226,8 +228,10 @@ class InlineAudio extends React.Component {
   pauseAudio() {
     this.getAudioElement().pause();
     this.setState({playing: false});
-    const {clearQueue} = this.context;
-    clearQueue();
+    if (this.props.ttsAutoplayEnabled) {
+      const {clearQueue} = this.context;
+      clearQueue();
+    }
   }
 
   render() {

diff --git a/apps/test/unit/templates/instructions/AudioQueueTest.jsx b/apps/test/unit/templates/instructions/AudioQueueTest.jsx
@@ -1,17 +1,19 @@
 import React from 'react';
-import {mount} from 'enzyme';
-import {act} from 'react-dom/test-utils';
-
-import {setExternalGlobals} from '../../../util/testUtils';
+import {render} from '@testing-library/react';
 import {expect} from '../../../util/reconfiguredChai';
+import {setExternalGlobals} from '../../../util/testUtils';
 import {UnconnectedInlineAudio as InlineAudio} from '@cdo/apps/templates/instructions/InlineAudio';
-import {AudioQueue} from '@cdo/apps/templates/instructions/AudioQueue';
+import {
+  AudioQueue,
+  AudioQueueContext,
+} from '@cdo/apps/templates/instructions/AudioQueue';
+import sinon from 'sinon';
 
 const DEFAULT_PROPS = {
   assetUrl: () => {},
   isK1: true,
   locale: 'it_it',
-  src: 'test_source',
+  src: 'test',
   textToSpeechEnabled: true,
   style: {
     button: {},
@@ -24,6 +26,7 @@ describe('AudioQueue', () => {
   setExternalGlobals();
 
   let windowAudio;
+
   beforeEach(() => {
     windowAudio = window.Audio;
     window.Audio = FakeAudio;
@@ -32,36 +35,36 @@ describe('AudioQueue', () => {
   afterEach(() => {
     window.Audio = windowAudio;
   });
-
-  it('plays the next audio item in the queue', () => {
-    const wrapper = mount(
+  it('calls addToQueue for each InlineAudio rendered', () => {
+    const addToQueueSpy = sinon.spy();
+    render(
       <AudioQueue>
-        <InlineAudio {...DEFAULT_PROPS} />
-        <InlineAudio {...DEFAULT_PROPS} />
+        <AudioQueueContext.Provider
+          value={{
+            addToQueue: addToQueueSpy,
+          }}
+        >
+          <InlineAudio {...DEFAULT_PROPS} />
+          <InlineAudio {...DEFAULT_PROPS} />
+        </AudioQueueContext.Provider>
       </AudioQueue>
     );
-    console.log(wrapper.debug());
-
-    const audioQueueInstance = wrapper.at(0).find(AudioQueue).instance();
-
-    const inlineAudioInstance = wrapper.find('InlineAudio').at(0).instance();
-
-    act(() => {
-      audioQueueInstance.addToQueue(inlineAudioInstance);
-    });
-
-    const queueState = audioQueueInstance.state.audioQueue;
-
-    expect(queueState).toHaveLength(1);
-    expect(queueState[0]).toBe(inlineAudioInstance);
-
-    act(() => {
-      audioQueueInstance.playNextAudio();
-    });
-
-    expect(inlineAudioInstance.playAudio).toHaveBeenCalled();
+    expect(addToQueueSpy).to.have.been.calledTwice;
+  });
 
-    wrapper.unmount();
+  it('does not add to queue if autoplay is off', () => {
+    const addToQueueSpy = sinon.spy();
+    render(
+      <AudioQueueContext.Provider
+        value={{
+          addToQueue: addToQueueSpy,
+        }}
+      >
+        <InlineAudio {...DEFAULT_PROPS} ttsAutoplayEnabled={false} />
+        <InlineAudio {...DEFAULT_PROPS} ttsAutoplayEnabled={false} />
+      </AudioQueueContext.Provider>
+    );
+    expect(addToQueueSpy).to.not.have.been.called;
   });
 });