25+5 clock tests failing

Tell us what’s happening:
Describe your issue in detail here.
I wrote the code for the 25+5 clock project and in the browser it behaves according to the requirements. First it passed on 25/29 tests and then I fixed a tiny issue and then it first passes on 27/29 tests and then suddenly jumps to 16/29 tests and stops. There are a lot of tests that require some behaviour, but it is hard to find out what they expect.

Your code so far

function App() {

  const [breakTime, setBreakTime] = React.useState(5 * 60);
  const [sessionTime, setSessionTime] = React.useState(25 * 60)
  const [displayTime, setDisplayTime] = React.useState(25 * 60);
  const [timerOn, setTimerOn] = React.useState(false);
  const [onBreak, setOnbreak] = React.useState(false);
  const [workSound, setWorkSound] = React.useState(new Audio('./wolf.mp3'));
  const [breakSound, setBreakSound] = React.useState(new Audio('./leopard.mp3'));

  const log = (...args) => {
    console.log(...args);
  }

  const playBreakSound = () => {
    breakSound.currentTime = 0;
    breakSound.play();
  }

  const playWorkSound = () => {
    workSound.currentTime = 0;
    workSound.play();
  }

  const formatTime = (time, type) => {
    let minutes = Math.floor(time / 60);
    if (type == 'sec') {
      let seconds = time % 60;
      return (
        (minutes < 10 ? "0" + minutes : minutes) +
        ":" +
        (seconds < 10 ? "0" + seconds : seconds)
      );
    } else {
      return minutes;
    }
  }

  const capitalise = (str) => {
    return str.charAt(0).toUpperCase() + str.slice(1);
  }

  const changeTime = (change, type) => {
    if (type == "break") {
      if (breakTime <= 60 && change < 0 || breakTime >= 60 * 60 && change > 0) {
        return;
      }
      if (!timerOn) {
        setBreakTime(prev => prev + change);
        if (onBreak) {
          setDisplayTime(() => breakTime + change);
        }
      }
    } else if (type == "session") {
      if (sessionTime <= 60 && change < 0 || sessionTime >= 60 * 60 && change > 0) {
        return;
      }
      if (!timerOn) {
        setSessionTime(prev => prev + change);
        if (!onBreak) {
          setDisplayTime(() => sessionTime + change);
        }
      }
    }
  }

  const play = () => {
    let second = 1000;
    let date = new Date().getTime();
    let nextDate = Math.round(new Date().getTime() + second);
    let onBreakVariable = onBreak;
    if (!timerOn) {
      let interval = setInterval(() => {
        date = new Date().getTime();
        if (date > nextDate) {
          setDisplayTime(prev => {
            if (prev <= 0 && !onBreakVariable) {
              playBreakSound();
              onBreakVariable = true;
              setOnbreak(true);
              return breakTime;
            } else if (prev <= 0 && onBreakVariable) {
              playWorkSound();
              onBreakVariable = false;
              setOnbreak(false);
              return sessionTime;
            }
            return prev - 1;
          });
          nextDate += second;
        }
      }, 30)
      localStorage.clear();
      localStorage.setItem('interval-id', interval);
    } else {
      clearInterval(localStorage.getItem('interval-id'));
    }
    setTimerOn(prev => !prev);
  }

  const reset = () => {
    if (timerOn) {
      play();
    }
    setDisplayTime(25 * 60);
    setBreakTime(5 * 60);
    setSessionTime(25 * 60);
  }

  return (
    <div className="container">
      <h1 className="title">clock</h1>
      <div className="length-container">
        <Length
          title={"break"}
          type={"break"}
          time={breakTime}
          changeTime={changeTime}
          formatTime={formatTime}
          capitalise={capitalise}
        />
        <Length
          title={"session"}
          type={"session"}
          time={sessionTime}
          changeTime={changeTime}
          formatTime={formatTime}
          capitalise={capitalise}
        />
      </div>
      <div className="time-container">
        <div className="timer-wrapper">
          <h2 className="label" id="timer-label">{onBreak ? "Break" : "Session"}</h2>
          <h1 className="time" id="time time-left">{formatTime(displayTime, 'sec')}</h1>
          <div className="timer">
            <button className="btn btn-small deep-purple lighten2" onClick={() => play()}>
              {timerOn
                ? (<i className="material-icons" id="start_top">pause_circle_filled</i>)
                : (<i className="material-icons" id="start_stop">play_circle_filled</i>)
              }
            </button>
            <button className="btn btn-small deep-purple lighten2" onClick={() => reset()}>
              <i className="material-icons" id="reset">autorenew</i>
            </button>
            <audio id="beep"></audio>
          </div>
        </div>
      </div>
    </div>
  )
}

function Length({ title, changeTime, type, time, formatTime, capitalise }) {

  return (
    <div className={`${title}-wrapper`}>
      <h2 className="label" id={`${title}-label`}>{capitalise(title)} Length</h2>
      <div className="time-sets">
        <button className="btn btn-small deep-purple lighten2" onClick={() => changeTime(-60, type)}>
          <i className="material-icons" id={`${title}-decrement`}>arrow_downward</i>
        </button>
        <h4 className="time" id={`${title}-length`}>{formatTime(time)}</h4>
        <button className="btn btn-small deep-purple lighten2" onClick={() => changeTime(+60, type)}>
          <i className="material-icons" id={`${title}-increment`}>arrow_upward</i>
        </button>
      </div>
    </div>
  )
}

ReactDOM.render(<App />, document.getElementById('root'))

link to codepen: https://codepen.io/danmikes/pen/vYmJdOd

Your browser information:

User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/91.0.4472.164 Safari/537.36

Challenge: Build a 25 + 5 Clock

Link to the challenge:

Some styling looks different, even breaking behaviour. For example: locally I manage to fit all elements nicely centred in a container, but on codepen they are left-aligned and overflowing. Is there a general explanation for this or should I post my entire code?

Without seeing your code we have no way of helping. Please post your Codepen.

Of course. Here it is:

Could someone give me help on how to read tests for projects? I am doing the 25+5 (Pomodoro) clock. I understand the user stories, but not the tests. There seem to be a lot more tests than user stories and the error messages seem cryptical to me, although this is probably due my ignorance. Could someone give me tips on how to approach this? Or could I see all test scenarios or tests themselves?

If you post a link to your project we can at least see which tests are failing and maybe help explain them.

Here it is:

I somehow managed to pass all tests!
I would appreciate any feedback/tips on my code.
And some help on how fix the layout on codepen.