Hi everyone
I can’t seem to get past the last test for the Drum Machine project. It’s a repeat of #6 which I had already passed and I did fulfill all the user story requirements.
Any ideas?
It appears you might be working on this right now because your app is currently throwing an error and is thus unusable.
I see you have a keydown listener on the “drum-pads” div, which I’m assuming is to fulfill the requirements of the test you aren’t passing. You are on the right track but this will only work if that div or one of the buttons in that div currently has focus. In order to catch these keydowns at any time you need to add that listener to the document.
Hey. Comment out the cdn import in public.html line 32 and it should work. The cdn works on my local environment but not in codesandbox for some reason.
.drum-pads does have focus. The pads play on both keyboard and mouse events. And if you’ve seen the screenshot I attached on my post, I did pass test #6, it’s just that it repeats it as #7 and tells me I didn’t pass it.
Hopefully I can find a solution otherwise I will ignore it as a nonissue because now it shows different results when I run the test. 7/8 passed, 8/8 passed (in red), 8/8 passed (in green). 
Move the test script from the HTML to the “External resources” found below “Dependencies” on the left.
Your project is passing all the tests when I do that.
Which section would that be in the react codebase? I’m only using codesandbox for demonstration.
The test script should work just fine in your create-react-app version, although your code does seem to be throwing errors.
If I remove preload=“none” and audio.load() it gets a bit better but the minute I click one of the buttons and then run the test it throws. The errors are also not the same in Firefox and Chrome.
Also, your focus solution doesn’t seem to be working in Firefox for me (not sure why). I think the keyboard test is only passing in Firefox because the test does the button click test first before testing the keyboard so the buttons already have focus.
Firefox:
Uncaught (in promise) DOMException: The fetching process for the media resource was aborted by the user agent at the user's request.
In Chrome I get a bunch of
Uncaught Error: The error you provided does not contain a stack trace.
The number of errors logged in Chrome seems directly related to how many of the buttons I click before running the test.
BTW, you can ignore this error in Chrome
Uncaught (in promise) DOMException: The play() request was interrupted by a call to pause().
I didn’t really look into it, but it might be related to how you are loading the audio files.
That would explain it. I hadn’t thought of that scenario. I guess those tests should be reversed 
The test doesn’t actually click the buttons, which I would have known if I had thought about it.
It is just firing off events on the elements so it doesn’t even matter if it works or not for a real user. If you remove the focus code it still passes the keyboard test. Which isn’t ideal.
But even if it was using the .click method it would be called directly on the element and I’m not sure if that actually causes the element to get focus or not (didn’t test it).
Not really sure how to test the focus using the current test setup.
Yeah I did preload=“none” because Chrome kept trying to download the files for some reason. And I added audio.load() to see if it would help with the stack trace error it kept throwing and this error:
Yeah I had initially written the code to work with the Audio() constructor and it was working with no issues at all but the test wants the audio element to be played instead of a new constructor. So I guess the way I wrote the playAudio and playAudioKey functions doesn’t work quite as well with the audio element as it did with the audio constructor. I have no idea. (The example codepen that FCC provides throws that error too btw)
My last comment was in regard to the other errors you have and not the last Chrome error.
That one is caused by the test calling .pause() and Chrome expecting the use of the promise that .play() returns. It has been there for a long time and I never bother with it, it is only Chrome that throws that error.
You can click the link the error gives in the console to read more about it DOMException: The play() request was interrupted
I did fix it in my 25 + 5 project using some hacky fix I never even understood why it worked the way it did.
Here is part of the code.
Summary
const handleResetTime = () => {
// https://developers.google.com/web/updates/2017/06/play-request-was-interrupted
// weird fix for test causing the browser to throw an error on .pause()
// Only calling .pause() inside .then() does not pass the test (it does work correctly though and doesn't throw in the browser)
// calling .pause() before .then() doesn't throw in the browser???
// both calls to .pause() are needed to pass the test and not throw???
if (playPromise !== undefined) {
audioElement.current.pause();
playPromise
.then((_) => {
audioElement.current.pause();
audioElement.current.currentTime = 0;
})
.catch((error) => {
console.log(error);
});
}
...more code
}
I just checked on Firefox both click and keyboard events work. But it does throw that error after a while. It may be an issue of loading which is the common theme between both chrome and firefox errors.
Well, it sort of works.
But try loading the page and giving the page focus by clicking an empty space, now try using the keyboard. You can see it doesn’t work the same as it does in Chrome.
Thanks I will see if that fixes the problem. I had tried something similar to that but it didn’t work in my case.
Ah alright.
I did and it worked fine 
still throws the error after a while
Ohhhh so it’s the test that’s calling pause()? That makes sense now. What about the get request to fetch the audio files?
Well, it doesn’t work for me in Firefox. It doesn’t gain focus again after clicking the page in Firefox as it does in Chrome so you can’t play the sounds using the keyboard.
I guess the DOMException: The fetching process for the media resource was aborted by the user agent at the user's request is Firefox’s version of the Chrome error. It didn’t use to throw that (afaik). But it does look related.
As we are not the one calling .pause() I don’t think we can do anything about that error in the client code. It would need to be fixed in the test code I believe. I have looked at it before but I’m still not sure what the solution is. I think I tried a few things that didn’t work and just gave up. It is a known issue. We have had issues open on the test repo but they are all gone now (issues have been disabled).
This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.