25+5 Clock works as expected, but fails User Story #26

Description of Issue:
I finished building the 25+5 Clock and it seems to be working as expected, but it keeps failing the test associated with User Story #26:

When a countdown reaches zero (NOTE: timer MUST reach 00:00), a sound indicating that time is up should play. This should utilize an HTML5 audio tag and have a corresponding id="beep" .

My project exhibits the above behavior, but for some reason the test keeps failing. The error message for this test says the following:

Timer has reached zero but audio is not playing while it should.: expected true to be false

This is not true. When the timer reaches zero, the audio plays.

Also, the tests take a very long time to complete (multiple minutes), so I’m wondering whether I may have gone about this in a way that was unanticipated by the testing suite, and that the testing suite is therefore struggling to monitor completion of all of the tests? Many of the tests finish with durations in the 120,000+ms range. Is that to be expected because of the timer-based nature of this project?

Link to project:
The project looks quite plain at the moment, I’ve been focusing on getting the tests to pass before introducing some styles:

Bumping this because I still cannot figure out how to get this to pass. Has anyone else encountered a similar problem?

Fixed. I was starting my timer here, at the beginning of this conditional statement within the updateTimer() function:

 if (this.state.timeLeft < 0) {
      let audio = document.getElementById("beep");
      audio.play();
      //do this stuff at "timeLeft < 0" so that 00:00 gets displayed
      //toggle break status:
      this.setState((state) => {
        return { break: !state.break };
      });
      //reset timer to beginning of either break or session depending on state.break
      this.state.break
        ? this.setState((state) => {
            return { timeLeft: state.breakLength * 60 };
          })
        : this.setState((state) => {
            return { timeLeft: state.sessionLength * 60 };
          });
    }

I was doing all of this stuff after checking for timeLeft < 0 so that the timer would display “00:00” before resetting. The problem with this is that the alarm would beep at the beginning of the next state (e.g. at the beginning of the break after the session) rather than at the moment when the timer displayed “00:00”. I’ve fixed it by just adding another conditional statement before the other one, and it now passes all tests:

 if (this.state.timeLeft == 0) {
      let audio = document.getElementById("beep");
      audio.play();
    }
    if (this.state.timeLeft < 0) {
      //do this stuff at "timeLeft < 0" so that 00:00 gets displayed
      //toggle break status:
      this.setState((state) => {
        return { break: !state.break };
      });
      //reset timer to beginning of either break or session depending on state.break
      this.state.break
        ? this.setState((state) => {
            return { timeLeft: state.breakLength * 60 };
          })
        : this.setState((state) => {
            return { timeLeft: state.sessionLength * 60 };
          });
    }
  }
1 Like

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.