Quote Machine - Functionality works, but 3 tests won't pass ¯\_(ツ)_/¯

Hello,

Thanks in advance for any help on this!

Code Pen: https://codepen.io/jpvajda/pen/ExaxeYL

I have my quote machine working locally and on CodePen, I can generate quotes and post a tweet however when I run the test suite I get 3 particular failures and I’m not sure why. These same failures occur on Code Pen as well

Also on Code Pen, I actually can’t post the tweet as it throws a browser error but can locally:

Blocked by Content Security Policy

An error occurred during a connection to twitter.com.

Firefox prevented this page from loading in this way because the page has a content security policy that disallows it.

The 3 failed tests report back and I’m wondering if it’s an issue with the Quote API I am using, perhaps it’s just slow at responding to requests?

6. On first load, my quote machine displays a random quote in the element with id="text".

Timeout of 15000ms exceeded. For async tests and hooks, ensure "done()" is called; if returning a Promise, ensure it resolves.
FCC_Global</</<[33]</</p.prototype._timeoutError@https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js:598:36139
FCC_Global</</<[33]</</p.prototype.resetTimeout/this.timer<@https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js:598:34258

 7. On first load, my quote machine displays the random quote's author in the element with id="author".

Timeout of 15000ms exceeded. For async tests and hooks, ensure "done()" is called; if returning a Promise, ensure it resolves.
FCC_Global</</<[33]</</p.prototype._timeoutError@https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js:598:36139
FCC_Global</</<[33]</</p.prototype.resetTimeout/this.timer<@https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js:598:34258

10. I can tweet the current quote by clicking on the #tweet-quote <a> element. This <a> element should include the "twitter.com/intent/tweet" path in it's href attribute to tweet the current quote.

#tweet-quote <a> element must have an href attribute : expected false to be truthy
a@https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js:106:475
FCC_Global</e.exports/o.prototype.assert@https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js:534:1366
FCC_Global</e.exports/<@https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js:549:14828
e@https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js:425:182
e@https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js:92:1380
FCC_Global</e.exports/n.isOk@https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js:574:179
test/</</<@https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js:657:164908
c@https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js:598:35224
FCC_Global</</<[33]</</p.prototype.run@https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js:598:35154
FCC_Global</</<[34]</</T.prototype.runTest@https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js:598:41723
i/<@https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js:598:42605
o@https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js:598:41019
o/<@https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js:598:41089
o@https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js:598:40141
FCC_Global</</<[34]</</T.prototype.hook/<@https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js:598:40906
f@https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js:593:1377

If I remember correctly Codepen doesn’t allow that particular API call for whatever reason and it looks like that’s what the error is referring to, so that’s likely your issue.

But the quotes are so good… :smile:

Nevermind, it’s actually the browser. It was answered in another thread

“If your page is served over https, then everything it fetches must also be over https. Since it appears the API you’re using doesn’t support https, you’ll have to switch your codepen connection to http, or find a different API.” I remember that now.

You can also use the same quotes in an array and avoid the API altogether.

It’s odd it works now, so perhaps it’s a rate limit problem… but I will look into those options. Thanks!

1 Like

I’ve done the tweet button 2 different ways and still can’t get it to pass the test, Now it works in Code Pen. but the test fails.

The API I am using definitely is causing problems so I just may switch to another API as I like the use of dynamic APIs for this solution vs. a static array

1 Like