Pomodoro Clock tests failing: Timer has not reached 00:00

JavaScript
1

Tell us what’s happening:
I’ve built a Pomodoro Clock with React and it fails tests #1, #8-15 of timer and test #1 of audio with a following error:

Timer has not reached 00:00.
Error: Timer has not reached 00:00

When I test the clock myself, it clearly goes to 00:00, stays like this for a second while playing a sound, then starts a break timer as written in user stories. But I noticed a difference between how FCC tests run on other people’s Pomodoros and mine: in “succesful” apps the test goes once for 1 minute session on 30ms intervals/timeouts, shows 00:00 for a second, then starts doing other tests, while in my app it goes for a lot of sessions of 1 minute on 30ms intervals, playing the 00:00 sound and all that, but it looks like the test never sees what it wants to see and after 30 or so speed-ran sessions it just gives up.

I’ve googled that problem a fair bit, looked up how other people did that challenge, tried switching setInterval to recursive setTimeout, used accurateInterval() which was used in the example project, rewrote my timer function in many ways but still am unable to tackle this problem. This forum thread is my last resort, if you have any ideas I would greatly appreciate your feedback.

Thanks and sorry if this is the wrong forum branch, didn’t know where to create my thread.

Your code so far
/sander-chief/pen/qgjLZV?editors=0110 on codepen
(sorry, the forum prohibits me from posting links and I don’t think posting the whole app here is a good idea)

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/72.0.3626.96 Safari/537.36.

Link to the challenge:
learn freecodecamp org/front-end-libraries/front-end-libraries-projects/build-a-pomodoro-clock
(sorry, the forum prohibits me from posting ANY links)

2

I am having the same issue :frowning:
My code is at codepen io/SunshineMcCoy/pen/dLZbqm

3

With a fresh pair of eyes today, I realized my mistake. Please ignore!

4

Hi there, I just solved this myself after trying to find some answers. What I did, is I made the clock intentionally sit on 00:00 for one second (1000ms) when it hit zero. I found the original code wouldn’t let it hit zero, because as soon as (timeLeft === 0), it would move on and the test would miss it.

Here is the failing code:

componentDidUpdate(prevProps) {
    if(this.state.time === 0 && this.state.mode === 'session') {     
        this.setState({ time: this.state.breakValue * 60 * 1000, mode: 'break' })
        console.log("Break time!")
        this.audio.pause()
        this.audio.currentTime = 0
        this.audio.play()     
    }
    if(this.state.time === 0 && this.state.mode === 'break') {
        this.setState({ time: this.state.sessionValue * 60 * 1000, mode: 'session' })
        console.log("Work time!")
        this.audio.pause()
        this.audio.currentTime = 0
        this.audio.play()      
    }
  }

Here is the working code:


const sleep = (milliseconds) => {
  return new Promise(resolve => setTimeout(resolve, milliseconds))
}

componentDidUpdate(prevProps) {
    if(this.state.time === 0 && this.state.mode === 'session') {
      sleep(1000).then(() => {
        this.setState({ time: this.state.breakValue * 60 * 1000, mode: 'break' })
        console.log("Break time!")
        this.audio.pause()
        this.audio.currentTime = 0
        this.audio.play()
      })      
    }
    if(this.state.time === 0 && this.state.mode === 'break') {
      sleep(1000).then(() => {
        this.setState({ time: this.state.sessionValue * 60 * 1000, mode: 'session' })
        console.log("Work time!")
        this.audio.pause()
        this.audio.currentTime = 0
        this.audio.play()
      })
    }
  }

I hope this helps anyone else trying to pass this test.

Nick