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

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:

  1. 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:

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

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.

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'

ezgif.com-gif-maker (1)
and reason for taking too long to test I hope now you can fix this.
Best of luck :+1:

1 Like

Sorry, it seems I did something wrong while checking

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!

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]

1 Like