Test Suite not recognizing my element with id="time-left"

[t1690]

Tell us what’s happening:
Describe your issue in detail here.

The problem is actually so small to the point I question whether I should ask the question here in the forums or not, but it feels so frustrating why I can’t get it to pass.

In this 25+5 Clock project (or Pomodoro timer as I like to call it), my current code can already get 28/29 user stories passing the test suite. Basically, it has no problems at all with its functionality.

I displayed the time remaining on the screen in the mm:ss format, it is responsive to the countdown and the pause, but for some reason, the test suite fails it in this following user story:

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).

Your code so far

In the component state I had a key output storing the string value for the time format, and used the following code to set the said string:
this.state = {output: String(Math.floor((this.state.break * 60) / 60)).padStart(2, "0") + ":" + String((this.state.break * 60) % 60).padStart(2, "0")}

After that in the render() I called it using the code:
<span id="time-left">{this.state.output}</span>
I did it the exact same way to display break and session time toggling UI and it worked for the test suite, I had no idea why this one threw me a fail.

My complete code can be found at: https://codepen.io/brandon_t1690/pen/ExwvvoK?editors=0011

Any kind of response or suggestion is highly appreciated, thank you.

Challenge: Build a 25 + 5 Clock

Link to the challenge:

freeCodeCamp.org

[ayushkr07]

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).

The test suite says to display time in minutes:second format but your project is displaying in seconds:milliseconds format, correcting it should pass the test suite

PS: Pomodoro is actually a technique to break work into intervals, traditionally 25 minutes in length, thus came Pomodoro timer to track this time.

[t1690]

How is it seconds:milliseconds when the time displayed on my screen is literally minutes:seconds? My timer runs 25:00, then 24:59, then 24:58. It does not run like 1500:000, then 1499:999 like how your seconds:milliseconds would look like.

[saurabhv749]

hey @t1690 using reat-developer tool I found this
when I changed the session and break to 1 and started the clock,
you can see the state of output is still “25:00” and starts from there this is the reason for error

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 '25' to equal '60'

and reason for taking too long to test I hope now you can fix this.
Best of luck

[ayushkr07]

Sorry, it seems I did something wrong while checking

[t1690]

Oh, I guess the issue arises from a different configuration on my side then. I made my timer so that the user would have to click on the Set Session or Set Break button in order to finalize and apply the changes in break length/session length to the timer.

I can fix it quite easily… Though I kinda want to keep my timer the way it is now, I’ll try to see what I can do.

Thanks a lot for pointing out where the issue lies!

[saurabhv749]

@t1690

user would have to click on the Set Session or Set Break button in order to finalize

this is the reason for test failure since the test suite isn’t pressing those buttons and your timer always starts from 25:00

you can change state of session and break in the functions
[handleDecreBreak,handleIncreSession,handleDecreSession,handleIncreBreak]