25+5 Clock not passing some tests although it appears to work properly

The clock works however, these test fail, are the tests inaccurate or possibly containing bugs?

Tests:
9:
25 + 5 clock has started but time displayed is not changing : expected 0 to be above 0

10:
25 + 5 has started but time displayed is not changing: expected ‘00’ to not equal ‘00’

11:
25 + 5 clock has started but time displayed is not changing: expected ‘00’ to not equal ‘00’

12:
Break time didn’t start with the correct value.: expected 60 to be at most 5

13:
Timer has switched to Break time, but it didn’t start with the correct value.: expected 60 to equal 5

23/29 tests are passed, can someone there take a look at my code?

Thanks

Hello~!

Can you provide us with a link to your CodePen or live page?

Please do not create duplicate topics for the same challenge/project question(s). This duplicate topic has been merged.

Thank you.

1 Like

Sure:

What do you mean merged? This is a question and has a tag called “Certification Projects”. Is that correct?

I have sent the link:

Okay, here are some things I notice:

  1. There is a delay between when I click “start” and when the timer actually starts.
  2. When a session ends, the label switches to break 00:00 then break 01:00 then starts counting down.
  3. The reset button does not stop the audio if it is playing.

Hey I just finished the Pomodoro project as well and wanted to add to this. I struggle with getting lots of tests to pass as well.

A one second delay for the timer to start is sort of expected behavior as most implementations of this I’ve seen use some sort of interval that waits some amount before the first run. But like @nhcarrigan said there is a significant delay before your timer starts.

The tests want to hear a beep when the clock displays 00:00 and not necessarily exactly when the phase switches. The tests also want the phase label to switch exactly at the same time that the clock moves from 00:00 to the next appropriate time. There are also definitely some logical errors in the way you’re setting your breaktime. Try doing some weird stuff like letting the clock run, pausing it, changing values, and then starting again.

Also I’m just learning like you but I’ve been told that typically you don’t want to assign undefined to anything and it’s better to substitute “null” in any case you might put it. This can be helpful for debugging – whenever something is undefined you know it’s been declared but not assigned a value, whereas when it is null you know you have intentionally assigned it a null value.

1 Like

I have updated the code and when it runs it appears to work perfectly, however for some reason it does not pass test 12 and 13, the output in the console log appears to not show any inconsistencies. Below is the codesandbox.io for it passing 27 of 29 tests: https://codesandbox.io/s/nifty-worker-6h941

Essentially your session label is switching over a second too soon. You switch your label when the time reads 00:00 instead of at the start of the next time allotment.

This may or may not have anything to do with your errors but I see you are mutating state directly here in this line:

var intervalFunc = setInterval(() => down(this.state.timeLeftSeconds--), 1000);

which is something you want to avoid in react.

In the console, it appears that precisely when timeLeftSeconds reaches 0, state.init is set to break and state.timeLeftSeconds to breakSeconds . Where exactly in the code, or the console, can you see that session is being switched to break too soon?

Well I wasn’t talking about the code just how your app actually behaves, compared to what the test expects.

Imagine the clock hitting 00:00 and there are some invisible milliseconds left over. You are still in session at this point, and yet your label has already switched over to break. I realize it is splitting hairs but this is the source of the test failing. When the label switches it wants to see the value currently displayed in session/break, instead it is seeing 00:00 because the label has switched a second early.

edit
just to clarify, I don’t think the test cares about what your state values are. It’s looking at what’s actually rendered to the DOM.

Would you be able to point out, in the code, the reason why tests 12 and 13 are not passing? Switching init from session to break and vice versa appears to be working perfectly on time. Take a look in the console here: https://codesandbox.io/s/nifty-worker-6h941

const down = (time) =>
    {

      if(time > 0){
        // converts seconds to MM:SS at every t-minus
        this.setState({ timeLeft: secondsToMins(time)});
        console.log(time);
        console.log(this.state.timeLeft);
      }

      if (time <= 0) {

        let sound = document.getElementById(id).childNodes[0];
        sound.play();

        let stateIndex = (this.state.stateIndex + 1) % states.length;
        this.setState({ stateIndex: stateIndex});
        this.setState({ timeLeftSeconds: states[stateIndex].duration});
        this.setState({ init: states[stateIndex].name});
        this.setState({ timeLeft: secondsToMins(time)});

        console.log(time);
        console.log(this.state.timeLeft);
        console.log(this.state.init);
      }
    }

your second if statement is where you are doing the logic of switching the label state. The block executes if time <= 0, but this.setState({ init: states[stateIndex].name}); should not happen if time = 0. That is the source of the test failing and the reason your label switches to break when the timer ticks from 00:01 to 00:00 rather than 00:00 to 5:00 which is what the test wants.

I hope that helps and I hope it’s clear what the test is expecting.

It appears that the problem is that updating state is asynchronous, therefore the switch to ‘session’ or ‘break’ is not exactly on time.

@super

That could be it! I am curious to know how you solve this, I also struggled with some of the little things on the test suite for this project.

Sure. It was solved by setting state in a more proper way: