If it is failing the tests, that usually means that it’s not doing what was intended.
When I look that first failing test (pressing on the red test fail button), I see:
- 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 ‘26’ to equal ‘60’
This is the code in the test that is failing:
// Set session length to 60
clickButtonsById(Array(35).fill(seshPlus));
// wait for 1.5 seconds to allow any re-renders to catch up
await timeout(1500);
assert.strictEqual(
getMinutes(target.innerText),
'60',
'time-left is not formatted correctly'
);
When I inspect your DOM, I see that it is all there and seems to be working. But for some reason, when the test runs, it is starting out at 25 (from the reset) and pressing the increment button 35 times, but instead of ending up with 60, it is ending up with 36, only incrementing once. That is certainly odd.
When I look in your code, I see this:
const handleSessionIncrease = () => {
if (!isPlaying && sessionlength < 60) {
setSessionlength(sessionlength + 1);
if (currentTimer === "Session") {
setClockCount((sessionlength + 1) * 60);
}
}
};
So, you are setting the next state based on the old state. This can be problematic, especially when things are being fired off rapidly. For this, instead of giving the new state as the parameter, give callback function, like:
setSessionlength(oldSessionLength => (oldSessionLength + 1) * 60);
That might clear up your issue.
