Im appreciate if anyone can provide feedback for my 25+5 clock project. I used useEffect to run the setInterval(). It didn’t go back to the Session after finished the Break, it kept running in the Break. (Problem Fixed)
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 back to Session time.: expected ‘Session’ to not equal ‘Session’
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.
Default timer label was not properly reset : expected ‘Break’ to equal ‘Session’
I did console.log to check the time-left and the status of onBreak. they looked normal. how to fix this bug?
I haven’t had a chance to dig deeply (busy at work) but your error message is:
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.
Default timer label was not properly reset : expected ‘Session’ to equal ‘Break’
AssertionError: Default timer label was not properly reset : expected ‘Session’ to equal ‘Break’
Looking at the code on the repo, this is the test:
it(`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.`, async function () {
this.timeout(100000);
hackGlobalTimerFunctions();
// decrement session and break length
clickButtonsById(Array(60).fill(seshMin));
clickButtonsById(Array(60).fill(breakMin));
// start the 25 + 5 clock
clickButtonsById([startStop]);
// wait while timer reaches 00:00
await timerHasReachedZero();
restoreGlobalTimerFunctions();
// once timer has reached zero wait 1.5 seconds then reset and
// see if every default value is reset
await timeout(1500);
resetTimer();
const timerLabelAfterReset =
document.getElementById('timer-label').innerText;
const secondsAfterReset = getSeconds(
document.getElementById('time-left').innerText
);
// see if timer label changed back
assert.strictEqual(
timerLabelAfterReset,
originalTimerLabel,
'Default timer label was not properly reset '
);
// wait another 1.5 seconds to be sure value has not changed
// (25 + 5 clock is stopped)
await timeout(1500);
assert.strictEqual(
getInputValue(document.getElementById('break-length')),
'5',
'Default values for break length were not properly reset'
);
assert.strictEqual(
getInputValue(document.getElementById('session-length')),
'25',
'Default values for session length were not properly reset'
);
const secondsAfterAWhile = getSeconds(
document.getElementById('time-left').innerText
);
assert.strictEqual(
secondsAfterAWhile,
secondsAfterReset,
'25 + 5 has paused but time continued elapsing'
);
});
So, it looks like there is some issue with the label.
Default timer label was not properly reset : expected ‘Session’ to equal ‘Break’
So, it is expecting that label to be “Session” after a reset, but it was “Break”. That makes sense - when you reset, it should go back to its default state. That label started out as “Session”.
So, I look at the sequence of events. I look at the test. The sequence of events is:
click the session minutes 60 times
clickButtonsById(Array(60).fill(seshMin));
start the clock
wait until the timer is 0 (i.e., the session is over, break starting)
wait a little bit (make sure we’re in the break)
press the reset button
We can sum that up as “run the clock until it is in break, then hit reset”. If I do that, I see this:
Ended it up, I just found out i had a minor typo for a variable in my “reset” function that was supposed to reset the timer back to “Session”, cause it looked similar to the other variable name.
I am really thankful for someone like a teacher helping me out when Im learning coding online. Thank you again, Kevin
Yeah, variable naming is a crucial aspect of coding. As the old saying goes, “There are 2 hard problems in computer science: cache invalidation, naming things, and off-by-one errors.”
