Help required Pomodoro Clock

JavaScript
1

Hello

I have been working for Pomodoro Clock project with React as per requirements specified here.

Here is my Codesanbox link.

As per my understanding, I have implemented all the user stories, but 3 tests seems failing in the test suite and I am unable to figure out why so.

The errors seems to indicate that a new timer is not started after session/ break timer has ended and there is not a string in the UI to indicate the timer change.

But visually in the browser, these functionalities seem to work fine.

I guess, in Timer component (Timer.js file), the timer length and timer mode label (session/ break) is toggled in useEffect hook which is been invoked on next render whereas it is expected to toggled in current render as per the tests.

Please help for finding the issue and possible approaches for fixing.

2

Timer.js Line 26 should be if (timerLength === 0) {

3

Thanks @jenovs, it seem to work in Firefox after the fix with all tests passing. But when I checked the app in Chrome while running tests, there seem multiple errors in the console with several tests failing.

As per log, there seem issue with something stating like

The play() request was interrupted by a call to pause()

This seems to be as per design of the Audio web API for the Chrome.

Let me know if you got any idea to fix this as well :slightly_smiling_face:

4

Simplest way to “fix” it is to add .catch to .play() (and just ignore that overlay error):

audioRef.current.play().catch((e) => e);

Correct way would require a bit of restructuring of your Timer.js.

5

Thanks. I have done the fix and created a thread for project feedback for this app here. It will be great if you can share some feedback!