I am currently working on the last project of the Front end curriculum and I am getting frustrated by some test that do not pass.
Content 8. I can see an element with corresponding id=“time-left”. NOTE: Paused or running, the value in this field should always be displayed in mm:ss format (i.e. 25:00).
My code for displaying the time is the following:
I get the time (in seconds) from the props of the parent component, I convert it in minutes:seconds format and make sure I have two digits.
I had a similar issue with my project; failing 2 or 3 tests and it seemed random.
Although it looks right and working visually, the test might be seeming something different since it’s moving quickly; to check this I added a log on line 146.
If you watch the time tick, you’ll notice 2 logs at the same time. My situation was slightly different (i was starting new intervals on each pause/play without clearing the old one) but once fixed & getting only 1 number in the log it passed.
Good luck! This issue was by far the hardest I had to solve in any of the projects!
I fixed the two other tests that were failing and I am left with the same error…
8. I can see an element with corresponding id=“time-left”. NOTE: Paused or running, the value in this field should always be displayed in mm:ss format (i.e. 25:00). time-left is not formatted correctly: expected ‘59’ to equal ‘60’
I really don’t understand what the problem is here…
If you log the minutes in your format function, you’ll see that when you press the increment button 1 time it responds with the old value then the new value. I’m not sure why that is happening, but if you run the session all the way up to 60 minutes you’ll see it returns 59 first, then 60. The test is seeing the 59 when it presses increment 35 times.
In the component controlling the Session time / Break time, I was changing the session / break time, then I had a change Effect which was running after the render phase.
So I was updating the timer first, then the current time.