Tell us what’s happening:
I’m failing tests #8 and #9, with the error message:
“8. When the #new-quote button is clicked, my quote machine should fetch a new quote and display it in the #text element. Error: timeout of 15000ms exceeded. Ensure the done() callback is being called in this test.
at https://cdnjs.cloudflare.com/ajax/libs/mocha/3.0.2/mocha.min.js:2:7197”
And very similar for #9.
I’ve removed most of the quotes, I actually have about 50 in my pen. There’s nothing really relevant in the CSS, so I’ve omitted that too. I’ve set the preprocessor to Babel, and added ‘React’, ‘React DOM’, and ‘react.development.js’ to the Javascript external resources.
From a user perspective, the app is working fine…fetches different quotes every time with the matching author. I’m guessing I’m failing because of one of the following reasons:
1: there’s no delay/animation between quotes
2: the handleClick logic is causing a problem with the tests
3. I need to be getting the quotes from an external resouce.
Can anyone confirm which it is, or am I missing something else?
The pen can be seen with CSS etc here: https://codepen.io/CTKShadow/pen/wxMKrR/
Your code so far
`const Quote = (props) => {
return (
<div>
<div id="text"><p><i className="fa fa-quote-left"></i> {props.quote.quote}</p>
</div>
<div id="author"><p>- {props.quote.author}</p>
</div>
</div>
)
}
Quote.defaultProps = {
quote: {quote: "default quote", author: "default author"}
}
class QuoteBox extends React.Component {
constructor(props) {
super(props);
this.state = {
quote: this.pickQuote(),
color: this.pickColor(),
}
this.pickQuote = this.pickQuote.bind(this)
this.pickColor = this.pickColor.bind(this)
this.handleClick = this.handleClick.bind(this)
}
pickQuote() {
const quotes = [
{ quote: "I have a dream that my four little children will one day live in a nation where they will not be judged by the color of their skin, but by the content of their character.",
author: "Martin Luther King Jr."},
{ quote: "When the debate is lost, slander becomes the tool of the loser.",
author: "Socrates"},
]
let i = Math.floor(Math.random()*quotes.length);
return quotes[i];
}
pickColor() {
const colors = ['red', 'blue', 'lightblue', 'black', 'orange', 'purple', 'violet', 'pink'];
let i = Math.floor(Math.random()*colors.length);
return colors[i];
}
handleClick() {
const currentQuote = this.state.quote.quote;
const currentColor = this.state.color;
let newQuote;
let newColor;
do {
newQuote = this.pickQuote();
} while (newQuote.quote === currentQuote)
do {
newColor = this.pickColor();
} while (newColor === currentColor)
this.setState({
quote: newQuote,
color: newColor,
})
}
render () {
const bgStyle = { backgroundColor: this.state.color};
const txtStyle = { color: this.state.color};
return (
<div className="container-fluid" id="quotebox" style={bgStyle}>
<div id="wrapper">
<div className="container" id="quote-box" style={txtStyle}>
<Quote quote={this.state.quote} />
<a id="tweet-quote" target="_blank" href={'https://twitter.com/intent/tweet?hashtags=quotes&text=' + encodeURIComponent("\"" + this.state.quote.quote + "\" -" + this.state.quote.author)}><i className="fab fa-twitter"></i></a>
<div id="new-quote">
<button className="btn" id="nq-button" onClick={this.handleClick} style={bgStyle}>New quote</button>
</div>
</div>
<p className="small">By CTKShadow</p>
</div>
</div>
)
}
}
ReactDOM.render(<QuoteBox />, document.getElementById("quotebox"))`
Your browser information:
I’m using Chrome for codepen/running tests, but this post is from Firefox.
Link to the challenge:
https://learn.freecodecamp.org/front-end-libraries/front-end-libraries-projects/build-a-random-quote-machine