Failed Test case , Random quote machine project (React js)

I am using React js and plain CSS to build the random quote machine project for the “Front-end-libraries Certification” Click for the user story here

I am unable to pass the user story #8 .

My approach to get the random quote is :

  1. Load the JSON data from simply importing it
    import data from './quotes.json';

  2. Just pick a random index and update the component state variable

getRandomQuote = () => {
    var index = Math.floor(Math.random() * 3000);
    this.setState({
      text:data[index].quoteText,
      author:data[index].quoteAuthor
    });
  }

In the render method , I have the following code:

<div id="text">
            {this.state.text}
 </div>
  <div id="author">
      - {this.state.author}
  </div>

Do you have a link to your code?

Sure Kevin , here is the github link :
https://github.com/ROHROCK/Random-Quote-Generator.git

Your issue is with this:

User Story #4: Within #quote-box , I can see a clickable element with a corresponding id="new-quote" .

This is your relevant code:

<div id="new-quote" >
  <button style={{backgroundColor:this.state.color}} id="submit" onClick={this.getRandomQuote}>Next Quote</button>
</div>

This is the test that is failing:

it(`When the #new-quote button is clicked, my quote machine
should fetch a new quote and display it in the #text element.`, function() {
  let prevText;

  this.timeout(requestTimeout);

  prevText = document.getElementById('text').innerText;
  document.getElementById('new-quote').click();

  return new Promise(resolve => {
    const intervalId = setInterval(() => {
      const newText = document.getElementById('text').innerText;
      if (newText !== prevText) {
        clearInterval(intervalId);
        resolve();
      }
    }, 500);
  });
});

But the problem is that you didn’t give it a clickable element with a corresponding id="new-quote" - no, you gave is a div with that id that contains that clickable element. So, the test is trying to click your button but it cannot find it and eventually gives up.

When I change the id for the button and remove it from the div, those tests pass.