React drum machine test case 3

JavaScript
1

Hi! so been working on my drum machine but hit a snag.
test case 3 seems to not pass. Not sure why though…

NOTE: I’m still working on most of the other test cases right now.
Also, do the test cases go in order like if u fail one all the test after that
also fail?

https://codepen.io/bmansk14/pen/yrGNMd?editors=0110

2
The test cases tend to go in a logical order, but a failing test does NOT stop the test script. (Note, that this is not the case for all test suites.)

In the case of the drum machine, test 1 requires “an outer container with a corresponding id=‘drum-machine’” while test 2 requires within “#drum-machine I can see an element with corresponding id=‘display’.” Regardless of whether your code passed or failed test #1, the testing script itself will check whether your code passes test #2, but because code that passes test #2 itself is dependent on code that would have passed test #1, it will fail.

For example,

<div class="drum-machine"><div>

Will fail test one because it doesn’t have "an outer container with a corresponding id=“drum-machine”.

Likewise,

<div class="drum-machine">
  <div id="display"></div>
<div>

Will fail test #2 because while there is a “drum-machine” id it is not visible in "an element with corresponding id=“display”. However if test #2 didn’t depend on #display being within an element with #drum-machine, then it would have passed.

NOTE: Many other test suites will stop at a failing test.

I’d definitely suggest that you focus on the first currently failing test. Read each part of what the test is evaluating.

For example, your first currently failing test is,

  1. Within #drum-machine I can see 9 clickable “drum pad” elements, each with a class name of “drum-pad”, a unique id that describes the audio clip the drum pad will be set up to trigger, and an inner text that corresponds to one of the following keys on the keyboard: Q, W, E, A, S, D, Z, X, C. The drum pads MUST be in this order.

But, when I look at your compiled html, I see:

drum-machine
drum-machine690×574 74.4 KB

Which includes:

  • test #1’s div with an id of “drum-machine”
  • test #2’s #display element inside of of div#drum-machine
  • test #3’s
    • 9 clickable “drum pad elements”
    • each with a class name of “drum-pad”

But none of those 9 elements have a unique id.

Here's a slightly more visual highlight of what's failing.

[test marked up for clarity]

  1. Within #drum-machine I can see 9 clickable “drum pad” elements :white_check_mark:, each with a class name of “drum-pad” :white_check_mark:, a unique id that describes the audio clip the drum pad will be set up to trigger :x:, and an inner text that corresponds to one of the following keys on the keyboard: Q, W, E, A, S, D, Z, X, C. The drum pads MUST be in this order.
3

Hi! thanks for the post, I found the problem though. I misspelled something on line 189 of my project saying clidId in stead of clipId. I was kinda confused by your post cause I was assigning ids on line 168 of my project. but obviously the misspelling is what was causing the problem. Thanks for the help anyway though!

1 Like