25 +5 clock user story 28 test fails

JavaScript
1

Hi,

I’m having issues with the test for User Story 28 :

The audio element with id of beep must stop playing and be rewound to the beginning when the element with the id of reset is clicked.

I get the following error message when running the tests:

Audio element was not stopped when reset was clicked.: expected false to be true

The way I set it up is that in the Audio component I have two useEffect hooks: one that fires when state.timer reaches zero (switchover) and the other when state.ongoing is false (counter reset):

    useEffect(() => {
        if(state.timer===0){
            audioElement.current.volume = 0.5
            audioElement.current.play()
        }
    },[state.timer])

    useEffect (() => {
        if (state.ongoing===false){
            audioElement.current.pause()
            audioElement.current.load()
        }
    },[state.ongoing])

What I don’t understand is that though both hooks are designed and seem to be functioning the same way, the second one is causing issues with the tests. When manually testing everything seems to be working as it’s supposed to.

Github repository
App page

Any suggestions? Thanks

2

You need to show your whole code for people to be able to help you.
By the way, do you rewind the player whenever it’s reset? You know, like youtube player, the slider has to be at the very beginning of the track…

3

in this order the problem will be solved.

        audioElement.current.load()
        audioElement.current.pause()
4

Thanks for your reply. I tried it without pause() and it still fails the test, I’m afraid.

5

In the meantime, I have also attempted audioElement.current.currenTime=0 (with and without a preceding .pause()) and this also produces the desired outcome but fails the test.

6

I only made mine with react class only, so thisis very foreign to me.

Before going further, is this audioElement.current.currenTime=0 literally what you’ve input, letter by letter? It’s suppose to be currentTime=0 (two Ts). I’d try put it after the pause. I have no idea what your load() is doing.

My pseudo-code when reset button is clicked (if that helps):

  • Grab the audio element;
  • Pause the audio element;
  • Rewind the audio element currentTime = 0;
  • Clear the interval;
  • Set default state.

I believe sequence matter in this regard, that we have to kill the audio first before clearing the interval, and it’s even better if all of those operations are done in the same function, to make sure there’s no noticeable lag (by the spec) between one operation and the other, since we’re dealing with asynchronous things (react state, and redux)

Below is the function ran by the spec in this link that caused your error:

case 6:case"end":return e.stop()}}),e)})))),it('The audio element with id of "beep" must stop playing and\n      be rewound to the beginning when the element with the id of "reset" is\n      clicked.',(function(){document.getElementById("beep").play(),i(),o.assert.isTrue(document.getElementById("beep").paused,"Audio element was not stopped when reset was clicked."),o.assert.strictEqual(document.getElementById("beep").currentTime,0,"Audio element was not rewound when reset was clicked. HINT: use the currentTime property of the audio element to rewind.")}))}))}))}},

I hope it can inspire you of some idea you haven’t thought of before to pass the spec.

2 Likes
7

Hi, thanks for taking the time to analyze and explore the possibilities, I really appreciate it. The order of operations doesn’t seem important but you were right about including all the operations in the same function, I included them in the button event handler and it did the trick:

                <Button iconName='sync-alt' id="reset" handler={
                    () => {
                        destroyTimer() // clears the interval
                        dispatch({type:ACTIONS.RESET_STATE}) // resets the state
                        // --> code added to pass FCC test 28
                        document.getElementById('beep').pause()
                        document.getElementById('beep').currentTime=0
                        // code added to pass FCC test 28 <--
                    }
                }/>

I think this is probably what you’d do if you had a class component, from what I’ve seen. What happens in my code is that whenever state.ongoing changes, the code inside the useEffect hook runs before the component renders; killing the audio is part of a side effect related to a state change that happens when the state is reset:

    // --> original implementation
    useEffect (() => {
        if (state.ongoing===false){
            audioElement.current.load() // load reloads the audio element, thereby resetting it
        }
    },[state.ongoing])
    // original implementation <--

The button changes the state and the new state in turn triggers changes at the component level. This way of viewing the problem makes more sense to me but I get how the synchronicity can mess up the tests, especially given the fact the course teaches class components.

Thanks for helping me solve the issue and completing the front end part of the FCC program!

1 Like
8

Thanks for the feedback! So I knew which part of my hypotheses was wrong. Let’s go the the next one!

9

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.