Pomodoro Clock Project Test Fail on User Story #8

Here is my project: https://codepen.io/parkers116/pen/MWwomGW

I cannot pass the user story #8 but I don’t get what I have wrong.

This is the error message:

time-left is not formatted correctly: expected ‘59’ to equal ‘60’

I tested my code.
When session length is set to 60, my clock will display 60:00
I also tested that when break length is set to 60, break clock will start at 60:00.

And this my code to handle the mm:ss format:

let minutes = time / 60 >= 10 ? Math.floor(time / 60) : ("0" + Math.floor(time / 60))
let seconds = time % 60 >= 10 ? Math.floor(time % 60) : ("0" + Math.floor(time % 60))
let timeDisplay = `${minutes}:${seconds}`

I found some similar cases like Test #8 Pomodoro Clock 28/29 and Pomodoro Clock not passing mm:ss test but I already handled those issues.

I stuck on this project over a week and still can’t find the root cause of the fail case. Is there anyone can help me to find out the problem?

Thank you so much for helping me to figure out the problem!

impressed from the answer of Pomodoro Clock using React Hooks / ContextAPI

The reason of the test #8 fail is that the time hasn’t change immediately when session length / break length change. I use state (sessionLength) to store the change first and then use useEffect in Timer component to monitor the state in order to modify the time. It is the root cause that makes the test fail.

const onClickIncrement = () => {
    if(props.sessionLength < 60 && !props.isStart) {
       props.setSessionLength(props.sessionLength + 1)
    }
  }
  
  const onClickDecrement = () => {
    if(props.sessionLength > 1 && !props.isStart) {
      props.setSessionLength(props.sessionLength - 1)
    }
  }
useEffect(() => {
    if (!props.isStart) {
      props.setType("Session")
      setTime(props.sessionLength * 60)
    }
  }, [props.sessionLength])

To prevent this case, I put the state (time) to the parent component and it can modify it immedicately when the session change is triggered.

const onClickIncrement = () => {
    if (props.sessionLength < 60 && !props.isStart) {
      props.setTime((props.sessionLength + 1) * 60);
      props.setSessionLength(props.sessionLength + 1);
    }
  };

  const onClickDecrement = () => {
    if (props.sessionLength > 1 && !props.isStart) {
      props.setTime((props.sessionLength - 1) * 60);
      props.setSessionLength(props.sessionLength - 1);
    }
  };

This challenge takes me a lot of time…