Testing suite limitations

So far I have found that the testing suite is fairly rigid. With a few projects, I satisfied all user stories, but failed some tests. In particular with the drum machine project, I added code to animate a button when a key is pressed, but that caused a test to fail. I removed the code and passed all tests, but the project is slightly less functional.

If you are having trouble passing the tests with something you want to functional in your app, then post a link to your project and explain exactly what you are expecting vs. what is happening.

The tests may seem rigid, but if you think about a real life project where a customer or another project team has specified certain user stories (specifications) which must be in the project, then it is just another day in the life of being a web developer. It is a constant balancing act of meeting certain requirements vs what you want to achieve for an overall user experience.

I get meeting user stories. And I meet them. I am saying that you can satisfy the user stories in some instances and still fail some of the tests.

For instance:

The Drum Machine Project All user stories satisfied. All tests passed. Key presses do not animate the buttons.

The Drum Machine Project II All user stories satisfied. One test failed with the following error: Uncaught TypeError: Cannot read property ‘classList’ of null (pen.js:112) The code adds a class to animate the associated button. Buttons animated on keypress.

In the following methods, you are directly manipulating the DOM, which may or may not be a problem. You should not be redirect manipulating the DOM elements. You should be passing props to the elements and using those props to let React update the DOM for you. That is the main purposes of using React. If you are just going to manipulate the DOM outside of React, you would be better of just using vanilla JavaScript or the jQuery library.

  componentDidMount() {
    document.addEventListener('keydown', (e) => {
      document.getElementById(e.key.toUpperCase()).currentTime = 0;
  buttonClick(e) {
    document.getElementById("displayText").innerHTML = e.target.id;
    document.getElementById(e.target.value).currentTime = 0;

Thanks for the feedback. I have learned a bit more about how react handles things like the audio element. I have refactored so that there is no direct DOM manipulation. It is however much more complex. I feel this is a tad overkill, but that is perhaps just me.