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

JavaScript
23

I seem to be having a similar issue. The problem is tests 12, 13 & 15, but weirdly I am passing test 14. As far as I can tell, my clock is doing what it is supposed to be doing. It reaches 00:00, then starts the next session/break time and changes the label accordingly.

https://codepen.io/sophie-chapman/pen/wvwNgoJ

Has anyone got any ideas?

1 Like
24

Same here.

The only tests I failed are (1) those stating ‘timer has not reached 00:00’ despite the glaring zeroes on the screen at the end of each session/break, and (2) those stating ‘can’t read property ‘1’ of null’ although the browser itself clearly has no problem interpreting it.

After an extensive search of possible issues online without avail, and gaining sufficient confidence that my clock is working perfectly through console logging every stage to confirm data is flowing fine and being processed correctly, I simply gave up battling with the black box of FCC test bundle.

(…I mean, I really don’t care to guess if “00:00 being a string instead of number” or “the unknown inner working of setInterval” is the reason why the test fails when the app is working just fine and not showing any sign of bug)

Anyway, so I threw my app into code sand box (I’m using create-react-app), got the url, pasted it into the project page, and submitted regardless of the test results. Got through. If this helps some of you.

25

hi @QwenLoh,
i had the same problem, i fixed it by changing the format to mm:ss. basically the single digit numbers (0-9) were giving the problem you have to pad them to 2 digits.
i used this function -

function pad(n){
  return (n<10)?('0'+n):n;
}

hope that it helps you.

26

Hi @sankettchauhan,

Thanks for your reply. Unfortunately that is not the issue I face. I have already padded my clock to two digits but still can’t pass the test.

Here’s my clock. https://qwen-3108.github.io/pomodoro-clock/

Would be great if you can point out the mistake that I fail to identify. Thanks

P/S: I pad the number using JavaScript’s native string.padStart() function. I will check if that’s causing my issue and update again.

27

Hey guys,
I’ve been struggling with this pomodoro thing a lot, getting strange results when running tests - some of the tests demanding the counter to be at 00:00 passing, the others not, although everything seems to work perfectly.
I’ve lost a lot of time modifying the counter itself, believing it’s not precise enough.
I’ve read a lot of your posts but still couldn’t find an error and seeing that some people claim that they have completely functional pomodoros and still not passing all the tests I almost submitted my solution and reported a bug.
I came back to my code after couple of days of pause to do some aesthetic changes before submitting and realized that I was setting the state more than once, accidentally.
I had this idea to use a switch expression for button click, assigning state values to local variables, changing them through switch and then in the end changing the state. Something like:

handleClick(btn) {
  let someVariable = this.state.variable;
  let someOtherVariable = this.state.variable2;
  .
  .
  .
  switch(btn) {
    case 1:
      if (...) {someVariable++};
      break;
    case 2:
      if (...) {
        someVariable--;
        someOtherVariable: false;
      };
      break;
      
    .
    .
    .
  }
  this.setState({
    variable:  someVariable,
    variable2: someOtherVariable,
    .
    .
    .
  }
}

The idea was to save some lines of code by not having to type this.setState(…) for every case, but only once in the end.
The problem was that one of the cases of switch calls another function which itself sets the state, so I had double state setting in some cases and not in the others…
After rewriting the code so that every case of the switch sets the state independently, all tests have passed.
I wanted to share this with you in case you’re maybe having a similar problem.
I can provide the code if needed, still haven’t put it on codepen since I’m using create-react-app.

2 Likes
28

hi @sankettchauhan,

I stored my countdown time in state as number and only converted it to string to use str.padStart() before displaying. Following your input, I replaced my formatting operation with your pad function, but unfortunately it still doesn’t help me pass the test.

So, not helpful.

29

hi @mpjevac,

I thought that was very likely so I console.logged my timer value in useEffect hook (the equivalent of componentDidUpdate of class component) to check if I did accidentally update my state twice. If I did, I should see duplicate timer values in the console as the same value is written to the state twice, causing the component to be rendered twice with the same timer value.

Unfortunately I did not see any duplicates. So it seems like that’s not the issue I’m facing either.

Anyway thanks for the reply! I believe it will definitely help someone.

30

I’m in the same boat as @QwenLoh. I’ve padded out my time-left text using padStart() and it doesn’t seem to ever have spaces, but test 8 still keeps failing with TypeError: Cannot read property '1' of null.

I’ve also tried changing my setInterval period to less than 1000 and using accurate_interval like the example, but neither of those seem to make a difference.

The most frustrating part is that because the test code and error message is so vague it’s really hard to figure out what exactly is being tested and where to try and start fixing it.

Would appreciate if anyone had any ideas: https://codepen.io/deliciousfudge/pen/ExVOKdW

31

Just had a breakthrough since my last post.

Because I had designed my timer graphic using SVG, the easiest way I could think to center the time-left text inside of it was to use a <text> element. This was because other text-related tags (<p>, <i>, <h1>, etc) are automatically hidden when enclosed within the <svg> tag, even though on the surface <text> seemed to work much the same. Such as the inner text being selectable in the browser and viewable in the developer console.

However, when I created a <p> tag outside of the <svg> object and set it up like the <text> one, all of the relevant tests passed. I’m not sure if this is because of the way the tests were set up or because of a limitation in the way <text> is designed, but either way hopefully it helps someone in the same boat.

32

Thanks! I had the same problem. Can’t believe I got stuck on this. The tests were also much faster once I fixed this.

33

I’m in exactly the same position, everything looks fine on the screen and on the console but it is only passing 11/29 tests (and some of those are because I haven’t implemented the audio yet).

I think if I can’t get the rest working after I get the audio working then I’ll be tempted to do the same.

Craig.