I’m working on the 25+5 clock and I am currently passing 20/29, although when I try it manually, everything works as requested in the user stories
I have seen that in test 11 it remains in an eternal loop and I suspect that this determines the rest of the tests. Here is my code: https://codepen.io/testinghelloworld/pen/mdLpEao (You can check on your own that it works correctly) and the error log:
#Timer
1. When I click the element with the id of "reset", any running timer should be stopped, the value within id="break-length" should return to 5, the value within id="session-length" should return to 25, and the element with id="time-left" should reset to it's default state.
Error: Mocha instance is currently running tests, cannot start a next test run until this one is done (https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js:569)
FCC_Global</</r/Hr.on/r.onerror@https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js:575:14032
9. If the timer is running, the element with the id of "time-left" should display the remaining time in mm:ss format (decrementing by a value of 1 and updating the display every 1000ms).
25 + 5 clock has started but time displayed is not changing : expected 0 to be above 0
a@https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js:82:477
FCC_Global</e.exports/o.prototype.assert@https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js:510:1366
f@https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js:525:2957
u@https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js:407:130
FCC_Global</e.exports/n.isAbove@https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js:550:960
FCC_Global</test/</</e/<@https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js:584:162996
l@https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js:584:79174
FCC_Global</u/o._invoke@https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js:584:78928
FCC_Global</b/</<@https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js:584:79533
r@https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js:1:1054
s@https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js:1:1266
10. If the timer is running and I click the element with id="start_stop", the countdown should pause.
25 + 5 has started but time displayed is not changing: expected '00' to not equal '00'
a@https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js:82:477
FCC_Global</e.exports/o.prototype.assert@https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js:510:1366
c@https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js:525:1889
u@https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js:407:130
FCC_Global</e.exports/n.notStrictEqual@https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js:550:736
FCC_Global</test/</</e/<@https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js:584:163513
l@https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js:584:79174
FCC_Global</u/o._invoke@https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js:584:78928
FCC_Global</b/</<@https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js:584:79533
r@https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js:1:1054
s@https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js:1:1266
11. If the timer is paused and I click the element with id="start_stop", the countdown should resume running from the point at which it was paused.
25 + 5 clock has started but time displayed is not changing: expected '00' to not equal '00'
a@https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js:82:477
FCC_Global</e.exports/o.prototype.assert@https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js:510:1366
c@https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js:525:1889
u@https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js:407:130
FCC_Global</e.exports/n.notStrictEqual@https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js:550:736
FCC_Global</test/</</e/<@https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js:584:164251
l@https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js:584:79174
FCC_Global</u/o._invoke@https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js:584:78928
FCC_Global</b/</<@https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js:584:79533
r@https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js:1:1054
s@https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js:1:1266
12. When a session countdown reaches zero (NOTE: timer MUST reach 00:00), and a new countdown begins, the element with the id of "timer-label" should display a string indicating a break has begun.
Error: Mocha instance is currently running tests, cannot start a next test run until this one is done (https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js:569)
FCC_Global</</r/Hr.on/r.onerror@https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js:575:14032
13. When a session countdown reaches zero (NOTE: timer MUST reach 00:00), a new break countdown should begin, counting down from the value currently displayed in the id="break-length" element.
Error: Mocha instance is currently running tests, cannot start a next test run until this one is done (https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js:569)
FCC_Global</</r/Hr.on/r.onerror@https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js:575:14032
14. When a break countdown reaches zero (NOTE: timer MUST reach 00:00), and a new countdown begins, the element with the id of "timer-label" should display a string indicating a session has begun.
Error: Mocha instance is currently running tests, cannot start a next test run until this one is done (https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js:569)
FCC_Global</</r/Hr.on/r.onerror@https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js:575:14032
15. When a break countdown reaches zero (NOTE: timer MUST reach 00:00), a new session countdown should begin, counting down from the value currently displayed in the id="session-length" element.
Error: Mocha instance is currently running tests, cannot start a next test run until this one is done (https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js:569)
FCC_Global</</r/Hr.on/r.onerror@https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js:575:14032
#Audio
1. When a countdown reaches zero (NOTE: timer MUST reach 00:00), a sound indicating that time is up should play. This should utilize an HTML5 <audio> tag and have a corresponding id="beep".
Error: Mocha instance is currently running tests, cannot start a next test run until this one is done (https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js:569)
FCC_Global</</r/Hr.on/r.onerror@https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js:575:14032
you need to modify your logic for when the time gets less than ten in order to keep the desired mm:ss format. fix that and you will pass step 11.
also what @lasjorg mentioned is true. if you can rewrite your app to follow best practices that would be best, because what you are doing is an anti-pattern in react. there are some cases where you would use refs, however, even refs in your app wouldnt be necessary.
Thanks @lasjorg@kravmaguy , I’ve now reached 24/29 tests passed by changing the format (i don’t know how i didn’t find out earlier…). Anyway, it keeps failing tests 19, 20, 21, 22 and 23. Here are the details:
Timer
9. If the timer is running, the element with the id of “time-left” should display the remaining time in mm:ss format (decrementing by a value of 1 and updating the display every 1000ms).
25 + 5 clock has started but time displayed is not changing : expected 0 to be above 0
10. If the timer is running and I click the element with id=“start_stop”, the countdown should pause.
25 + 5 has started but time displayed is not changing: expected ‘00’ to not equal ‘00’
11. If the timer is paused and I click the element with id=“start_stop”, the countdown should resume running from the point at which it was paused.
25 + 5 clock has started but time displayed is not changing: expected ‘00’ to not equal ‘00’
12. When a session countdown reaches zero (NOTE: timer MUST reach 00:00), and a new countdown begins, the element with the id of “timer-label” should display a string indicating a break has begun.
Timer has reached zero but didn’t switch to Break time: expected ‘Session’ to not equal ‘Session’
13. When a session countdown reaches zero (NOTE: timer MUST reach 00:00), a new break countdown should begin, counting down from the value currently displayed in the id=“break-length” element.
Timer has reached zero but didn’t switch to Break time: expected ‘Session’ to not equal ‘Session’
Do you recommend to modify all my code and make a new one with best practices or is there a simple way to get out of it? Thanks
I just modified the code a lot and I’m still passing 24/29 tests. I now handle the timer state as an integer in seconds (to stop using the JavaScript DOM) and created this function to format the time:
and then it is called in “time-left”. Idk how to improve it
Ok, this is kind of weird. I tried putting less than 1000 in the setInterval and it worked. Is it a codepen performance issue? Any ideas how I can improve this without changing the value of the setInterval?
It seems to be passing now with the normal interval time. I’m curious about what you changed.
The test will “hack” the interval timer to make the tests run faster so what you put for the interval shouldn’t matter. Not really sure what was going on with that.
Unrelated, I would suggest you capture the interval id and clear it in place using clearInterval, the killIntervals method even if it works seems like an odd way of doing it.
Yes, it is happening because I thought the problems were coming from the test and its response time, and I found out that it was. Now when you click the start and pause button it automatically subtracts 1 second from the timer before starting and 2 seconds when it resumes… and it’s working! (Which means that the test expects results in a certain time and not that the test works correctly). I know it shouldn’t be like this, but my code used to work as expected and it still didn’t pass the tests. I’ve also tried converting everything to pure JavaScript and the error remains at the same point (even in this case, killIntervals() doesn’t exist anymore)
So since this shouldn’t be this way, I removed it (react and js) and ran the project and tests. I noticed that the first update to the clock on start took 2-3 seconds (probably 2, it’s hard to time exactly) and the failed tests were timer tests 9, 10, and 11. In the past that usually meant an off by one between render and state, usually with the first and second renders using the 25:00 time and then decrementing as it should.
The source for these three tests are in line with these observations as those tests click the start/stop button, get the seconds before, wait 1.5 s, and then get the seconds again. I believe these tests are good (I have a class based version that passes with react 16, 17, and 18). Your code without the subtractions waits longer than this and therefore the timer does not appear to be moving; leaving them in means skipping from 25:00 to 24:58 while still waiting to change.
But render errors should by React only, so it must be some common problem. My leading suspects are the CSS transitions that you are using (all set to 1 s…; I tried removing them but it’s hard to do a hard refresh with codepen assets to clear them) or a interval/timer in both versions that’s running prematurely and possibly the off-by-one render in React. I would try removing the transitions wherever they all are and retesting and if necessary, then checking all your interval/timers are running at the appropriate time and frequencies.
I went ahead and added some logging statements to the start/stop and runInterval functions (react version) and got this output:
@jeremy.a.gray First of all, thanks for taking your time to help me. I really appreciate it.
On the other hand, continuing with the thread of the conversation, I have tried eliminating the transitions and it still does not work as it should. I have tried modifying the countdown of seconds of the timer once it enters the function after clicking the startAndStop button and it didn’t work either. Do you have any ideas or hints on what change I should make?
illustrates the problem. With your app reset, you click the start button, timer says 25:00, the first message is logged, and runInterval is called with the original state, time = 1500, setting time = 1500 in the setInterval callback. One second later, the callback in runIntervalruns the first time, displays the second message, updates state with time = 1500, decrements time, and the timer still says 25:00. One second later, the callback runs again, updates state with time = 1499, displays the second message, and finally the timer reads 24:59. This two second delay happens every time startAndStop initiates the timer, and so it fails the tests that it’s failing.
There is a lot of material about this, but the best may be here, even though it’s about hooks the theory still applicable (there’s a class example too). You could also google “react setInterval” or some variation. Using the function form of setState may be helpful as well. There should be similar non-react solutions as well.
