[Curriculum Help] 25 + 5 Clock does what it should, but fails tests

Problem
The app seams to do what it should do.
Nevertheless, it fails some tests…

When I manually replicate the tests, I can not find anything wrong.
Unfortunately the error messages are hard to decipher for me…

Project
25 + 5 Clock of the Frontend Libraries Certificate
https://www.freecodecamp.org/learn/front-end-development-libraries/front-end-development-libraries-projects/build-a-25–5-clock

App
Heroku App: https://free-pomodoro.herokuapp.com/
GitHub Repo: GitHub - alexandrosshomper/pomodoro

Any help appreciated :slight_smile:

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:

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

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.

1 Like

Thank you kevinSmith for the structured elaboration of the issue. That was very insightful already.

Unfortunately I am running in a new issue with Test 8 now.
I tried the callback function in handleSessionIncrease.
Somehow, the sessionLeft gets multiplied by 60 two times, and results at 1501 when I increase sessionlength to 26.

I have tried numerous ideas on working this out, but nothing solved this issue as long as I used the callback function. So I assume, I do something wrong there…

Currently I went back to the first attempt of using the callback function, which looks like:

const handleSessionIncrease = () => {
    let oldSessionLength = sessionlength;
    if (!isPlaying && sessionlength < 60) {
      setSessionlength((oldSessionLength) => oldSessionLength + 1);
      if (currentTimer === "Session") {
        setClockCount((oldSessionLength) => (oldSessionLength + 1) * 60);
      }
    }
  };

Project
25 + 5 Clock of the Frontend Libraries Certificate
https://www.freecodecamp.org/learn/front-end-development-libraries/front-end-development-libraries-projects/build-a-25–5-clock

App
Heroku App: https://free-pomodoro.herokuapp.com/
GitHub Repo: GitHub - alexandrosshomper/pomodoro

Again, thankful for any help.