EDIT:
I figured out why my test was failing. I was looking for the key rather than the key code for keyboard press events. Just another case of not paying close enough attention.
I don’t understand why my code is failing. Everything seems to be working just as it should.
This is the test that is failing:
No audio plays when the Q key is pressed : expected true to be false …
Also, there is a DOM error that is occurring after I run the tests. I haven’t found anything online that can give me a clue as to what it means.
Here is my code:
import React, { Component } from "react";
import { connect } from "react-redux";
import { drumClicked } from "../actions/drumsAction";
import { drumPressed } from "../actions/drumsAction";
class Drums extends Component {
constructor(props) {
super(props);
this.state = {
current: 'active'
};
this.handleClick = this.handleClick.bind(this);
this.handleKeyPress = this.handleKeyPress.bind(this);
}
componentDidMount() {
document.addEventListener("keydown", e => this.handleKeyPress(e));
}
componentWillUnmount() {
document.addEventListener("keydown", e => this.handleKeyPress(e));
}
playClip(e, d) {
e.target.children[0].currentTime = 0;
e.target.children[0].play();
e.persist()
e.target.classList.add(this.state.current);
setTimeout(() => {
e.target.classList.remove(this.state.current);
}, 100);
this.props.itemClicked(d);
}
handleClick(e, d) {
this.playClip(e, d);
}
handleKeyPress(e) {
this.props.drumData.drumData.forEach(d => {
if (e.key === d.keyCode) {
let currentDrum = document.querySelector(`#key-${d.key}`);
currentDrum.children[0].currentTime = 0;
currentDrum.children[0].play();
currentDrum.classList.add(this.state.current);
setTimeout(() => {
currentDrum.classList.remove(this.state.current);
}, 100);
this.props.itemPressed(d);
}
});
}
render() {
let displayDrums = this.props.drumData.drumData.map(drum => {
return (
<li
key={drum.id}
onClick={e => this.handleClick(e, drum)}
id={`key-${drum.key}`}
className='drum-pad'
tabIndex="0"
>
{drum.key}
<audio src={drum.audio} className="clip" id={drum.key} />
</li>
);
});
return (
<div className="display-drums-container">
<ul>{displayDrums}</ul>
</div>
);
}
}
function mapStateToProps(drum_data) {
return {
drumData: drum_data
};
}
function mapDispatchToProps(dispatch) {
return {
itemClicked: data => {
dispatch(drumClicked(data));
},
itemPressed: data => {
dispatch(drumPressed(data));
}
};
}
export default connect(
mapStateToProps,
mapDispatchToProps
)(Drums);
Any help is much appreciated.