Drum Machine testing #5 & 7 difficulties

JavaScript
1

I’m looking for some help on how to troubleshoot my failing tests for the Front End Drum Machine Project.

The failing tests in question are:

  • User Story #5: When I click on a .drum-pad element, the audio clip contained in its child audio element should be triggered.
  • User Story #7: When a .drum-pad is triggered, a string describing the associated audio clip is displayed as the inner text of the #display element (each string must be unique).

From what I can tell, without automated tests, there is the appropriate functionality. When you click on a ‘drum-pad’ or press the corresponding key the music plays and displays the sound name. I’ve tried looking around for similar problems from others, but haven’t seen anything too applicable. I was wondering if there may be an issue in the nesting of the elements, but I’ve tried re-arranging them and I haven’t had any success passing the tests. I’m hopeful test 7 may pass once test 5 passes. Maybe 7 fails since the music isn’t playing, thereby failing at displaying the name in this case (clicking)?

I’m suspicious of the way the test is run, and wondering if that might provide some more insight. However, I don’t really know how to go about finding the details of the automated tests.

My project so far can be found here:
Drum Machine - Project

I’m using Firefox Developer 97.0b4 if that helps.

If you have any tips for troubleshooting the issue please let me know. Thanks!

2

I’m not sure you have the DOM set up correctly. Take a look at User Story #5 again:

“When I click on a .drum-pad element, the audio clip contained in its child audio element should be triggered.”

The element that has the click event is the <button> (which is as it should be) but your <button>s don’t have the .drum-pad class on them.

3

Thank you @bbsmooth that was it. Feel silly, but really appreciate your help!

I condensed the structure as you suggested, and as the user story states. I made <audio> a direct child of .drum-pad and made sure the click event was on the .drum-pad element.

Now onto cleaning it up and making it look good.

4

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