Help, please! My pomodoro clock won't pass the tests

Hey guys,
I’m really stuck on my Pomodoro Clock that I have been building in React. It passes most of the tests (sometimes 26, sometimes 27, I can’t figure the inconsistency out), but consistently fails two of the tests relating to the timer reaching 00:00. When I manually test, I can see the timer reach zero, switch to the opposite timer, and start counting down from the appropriate value, so I’m not sure what is going on with the FCC tests. Another weird thing I noticed is after running the FCC tests, my timer seems to countdown 2 separate timers at the same time - I’m sure this is a hint as to what’s going on, but I’m not sure what it means.

Here is my project in a Codesandbox:

Any help or insight would be greatly appreciated! Thanks in advance!

Hmm, my first guess would be that the failing tests might be caused by how you are tracking the time. Right now, your time is stored in the state as a string so it never reaches 00:00, instead, it goes to “00:00”.

It’s an interesting approach, but I would suggest using Date objects to track the time. There can be issues with the setInterval event firing on time if the thread is busy doing something else. We are talking ms here, but the difference can add up over time.

Thank you so much for taking a look at my project!

I will look into rewriting so that I use Date objects to manage the time. What I’m still really confused about is why it would pass those tests sometimes but not others.

Yeah, inconsistency is always a real pain. I took another look at your project and found a few more possible issues that could be causing you problems.

First, if you look at the state as the timer counts down you will see that at 0 the time reads “0:0” not 00:00. My initial theory about string vs number may or may not be a factor here. That would depend on how the tests are written. You could try to deal with the disappearing 0’s issue and see if that results in a passing test. However, I would encourage you to just switch to a Date driven application as that is surely what was intended with this project, but if you can get the tests passing as is…

The other issue is how you are referencing the current state inside your interval setState logic. This isn’t recommended as the state can change unexpectedly due to the asynchronous nature of setState. You can either pass in the current state into your setState function and then reference the passed in state vs the application state, or you can break up your setState and have a separate setState for each of the two options.

1 Like

Thank you so much again for your help! I really appreciate all of your suggestions. I changed some of my logic (it’s still not completely clean yet, but it functions). Your information about state change was very helpful too. After some trial and error and lots googling and console.log statements, I finally figured out that I was using the callback function incorrectly inside setState. When I put the () => in front it worked! Passing all of the tests now, just have to add some style and make it responsive. Thanks again!

1 Like

Glad you figured it out!!