Drum Machine not passing keypress test

The drum machine project is not passing the test that checks if the drum can be pressed with a key that corresponds to the ID

The sound plays but for some reason the test fails, am I missing something?

here is a codepen to my project

Explain me how this works:

  click() {
    document.querySelectorAll('audio#' + this.props.sound.key)[0].play();
    this.props.update(this.props.sound.title);
  }

  bindKey(sound, callback) {
    document.addEventListener('keydown', function(event) {
      var key = event.key || event.keyCode;
      if (key === sound.key.toLowerCase()) {
        document.getElementById(sound.key).click();
      }
    });
  }
click() {
    document.querySelectorAll('audio#' + this.props.sound.key)[0].play();
    this.props.update(this.props.sound.title);
  }

selects the audio tag that has the id of the current component key value and plays the audio tag. The sound property has all the information connected to a sound such as title and associated key

  bindKey(sound, callback) {
    document.addEventListener('keydown', function(event) {
      var key = event.key || event.keyCode;
      if (key === sound.key.toLowerCase()) {
        document.getElementById(sound.key).click();
      }
    });
  }

takes in a sound property and a callback to the update function, if the keyboard key is pressed that matches the sounds key for that component the component then fires a click event to itself to trigger the click() and fire the sound. This was 1 line less than calling:

document.querySelectorAll('audio#' + this.props.sound.key)[0].play();
this.props.update(this.props.sound.title);

again and it achieves the same effect

the bindKey event is called here:

componentDidMount() {
    this.bindKey(this.props.sound, this.props.update);
  }

which takes the main app update from the components props and the sound associated with that component to make it all work

This is the definition of a spaghetti code :grinning:

Add onKeyPress handler to Drum:

class Drum extends React.Component {
  ...
  render() {
    return (
      <div
        onClick={this.click.bind(this)}
        onKeyPress={this.click.bind(this)} // <------- add this
        className={"drum-pad"}
        id={this.props.sound.key}
      >

I tried that to no avail, I even tried to create just a test function that console logged the event and it never triggers for me to intercept it and figure out if the right key is pressed

Ah, I see my mistake, I took out the bindKey when I did that, which makes it still pass the test but then if I actually tried to prsss the key it failed. I had not tried seeing if it passed when I realized sound was not playing