2

Hello I am trying to simulate an 'ended' event on and HTML5 audio element without success. Here is my component:

export class AudioPlayer extends Component {
    constructor (props) {
        super(props);

        // Auto play turned off when component render for the first time

        this.autoPlay = false;
        this.shouldAudioAutoPlay = this.shouldAudioAutoPlay.bind(this);
    }

    componentDidMount () {
        let audio = findDOMNode(this.player);
        if (audio) {
            console.log('in')
            audio.addEventListener('ended', () => {
                console.log('event dispatched')
                this.props.audioFinished();
            });
        }

    }

    render () {
        return (
            <Media>
                <div>
                    <div className="media-player">
                        <Player src={this.props.audioUrl.url}
                            autoPlay={false}
                            id="activeModuleAudio"
                            vendor="audio"
                            ref={(player) => { this.player = player }}
                        />
                    </div>
                    <div className="ap-main">
                        <div className="ap-controls">
                            <PlayButton />
                            <ProgressBar enableUserInput={this.props.enableUserInput} audio={this.props.audioUrl} />
                        </div>
                        <a href={this.props.facebookUrl}><div className="ap-facebook-group" /></a>
                    </div>
                </div>
            </Media>
        );
    }
}

And here the test:

it('should dispatch an action when audio is finished', () => {
        let mockedAudioFinishedAction = jest.fn();
        let mockedEnableUserInputAction = jest.fn();
        let mountedWrapper = mount(
            <AudioPlayer
                audioUrl={{ url: 'audio-url', autoPlay: true }}
                facebookUrl="facebook-url" audioFinished={mockedAudioFinishedAction}
                enableUserInput={mockedEnableUserInputAction}
            />
        );
        mountedWrapper.update();
        mountedWrapper.update();
        mountedWrapper.find(Player).simulate('ended');
        expect(mockedAudioFinishedAction.mock.calls.length).toBe(1);
    });

The simulate seems to not be dispatching the event,despite working on the browser. Any thoughts?

Thanks in advance!

Nicolas
  • 1,193
  • 1
  • 10
  • 25

0 Answers0