Drum-Machine Tests 2022

[stay1st]

I’m having some trouble with passing the test (pasted below) for the Drum-Machine project though my code works perfectly and meets User Story 6 requirements.

"User Story #6: When I press the trigger key associated with each .drum-pad, the audio clip contained in its child audio element should be triggered (e.g. pressing the Q key should trigger the drum pad which contains the string “Q”, pressing the W key should trigger the drum pad which contains the string “W”, etc.). "

posted test code below:

const keyCodes = [81, 87, 69, 65, 83, 68, 90, 88, 67];

audioElements.forEach((el, i) => {
          el.pause();
          __triggerEvent(el.parentElement, 'keydown', keyCodes[i]);
          __triggerEvent(el.parentElement, 'keypress', keyCodes[i]);
          __triggerEvent(el.parentElement, 'keyup', keyCodes[i]);
          assert.isFalse(
            el.paused,
            'No audio plays when the ' + el.id + ' key is pressed '
          );
          el.pause();
        });
      });

I’m on VS Code /React 18.2.0 /Node 18.9.0. My approach was to use if//else statements and useEffect //with a dependency array and cleanup function to add an event listener that calls back the function on ‘keydown’. For each ‘keydown’ i reset currentTime = 0, setTimeout, and cleared timeout at the bottom of the function. When looking at your test code on your repo, I think the el.pause is the issue or the use of .keyCodes since most browsers have deprecated it.

Your test code throughs an error = “Uncaught (in promise) DOMException: The play() request was interrupted by a call to pause().” Which I think is making #6 fail.

[JeremyLT]

I’ve edited your code for readability. When you enter a code block into a forum post, please precede it with a separate line of three backticks and follow it with a separate line of three backticks to make it easier to read.

You can also use the “preformatted text” tool in the editor (</>) to add backticks around text.

See this post to find the backtick on your keyboard.
Note: Backticks (`) are not single quotes (').

[hbar1st]

can you post the codepen you are using? (I’m assuming that’s what you are using)