Pomodoro Project - Can't Pass Audio Tests

JavaScript
1

I’ve been struggling for almost a week now trying to pass the audio tests for the pomodoro timer. I’m just not sure why it doesn’t pass. To me it looks like it is working fine, but I’m assuming I’ve done something weird because the testing suite doesn’t like it. Could someone take a look and help me out?

Link to my code pen:
https://codepen.io/mxryan/pen/mjVqrq?editors=0110

Brief overview of the structure:
I’m using React. There is one parent component which holds all state. There are three child components, the Timer Display, the Control Panel, and one for the audio.

When the time remaining property reaches 0, the Timer Display is calling the setAudio method in a componentDidUpdate hook, which sets shouldAudioPlay in the parent component’s state to true. The audio component conditionally renders an audio element based on whether or not this is true.

I’ve added a button to manually tick the timer as part of my debugging process.

I would greatly appreciate any and all help!

PS The current styling is only temporary, so don’t judge me on it :slight_smile:

2

So, if I’m reading your code correctly, you play the audio by rendering the audio component with an autoPlay attribute? That would screw up the tests.

3

Thanks for taking the time to read and respond.

A bit after posting this I tried a different approach where there audio element is always rendered without autoPlay and I set it to play/pause in the componentDidUpdate hook.

I pass one of the audio tests now, but not the other two and I’m still not sure why. I’m wondering if there is a slight discrepancy in when the timer hits ‘00:00’ and when the audio starts playing. I’ll keep investigating.

Thanks for the response

5

Oops! Thanks for catching that. I believe I’m already checking whether not session/break remaining is 0 before calling setAudio too, so I probably only need to evaluate shouldAudioPlay now that I think about it.

Thanks man, appreciate it!