As you may have heard, @no-stack-dub-sack and @Weezlo have been hard at work building projects with testable user stories. We are looking for a few volunteers to attempt to build these based on their automated tests.
This is a brand-new project that should be a ton of fun to build: a drum kit! Note that the test suite may not yet work in browsers other than Chrome.
The goal is for campers to be able to build these projects step by step following user stories. This will make the projects less intimidating and more fun. Oh, and donāt worry - weāll still have plenty of optional projects where we donāt provide you with any tests. And if youāve previously built these projects, you donāt need to build them again.
If youāre interested in attempting this, please reply to the thread and let us know youāve started it. The more people who want to build this, the better, as we can start gathering feedback.
I can see a wrapper element with a corresponding id="quote-box".
Within #quote-box, I can see an element with corresponding id="text".
Within #quote-box, I can see an element with corresponding id="author".
Within #quote-box, I can see a clickable element with corresponding id="new-quote".
Within #quote-box, I can see a ātweetā button with corresponding id="tweet-quote".
On first load, my quote machine displays a random quote in the element with id="text".
On first load, my quote machine displays the random quoteās author in the element with id="author".
When the #new-quote button is clicked, my quote machine should fetch a new quote and display it in the #text element.
My quote machine should fetch the new quoteās author when the #new-quote button is clicked and display it in the #author element.
I can tweet the current quote by clicking on the #tweet-quote button. This button should use the ātwitter.com/intent/tweetā path to tweet the current quote.
Layout
The #quote-box wrapper element should be horizontally centered.
I can tweet the current quote by clicking on the #tweet-quote button. This button should use the ātwitter.com/intent/tweetā path and tweet the current quote.
And assertion error:
AssertionError: #tweet-quote button must have an href attribute : expected false to be truthy
But according to specs button doesnāt have href attribute: HTML Standard
I went with <a> styled as a button. Also as there wasnāt a requirement to use API, I just created an array with quotes.
@jenovs Whoa - donāt know how I missed this for so long, sorry Iāve been buried. But good feedback, thanks! I think button is used a little loosely here as well, I think I remember thinking it should say āclickable elementā when I was going through this actually, and I will change it to that.
As always, thanks for participating, youāve been a big help in QAing these.
No API required - totally cool the way you did it.
EDIT: fixed assertion errors and associated user stories - thanks
Iāve been getting random timeout errors on tests 8 and 9 (I believe it only happened in Editor View)
Test 11 (#Layout 1) seems to be failing in Editor View but passing in Full Page Viewā¦
Iād added the error messages / call stacks at the bottom of the CSS tab in the Codepen because I can only include 2 links in my posts.
Hey @christophherr, sorry for the late reply - so everything seems to be running correctly on my end, were you able to figure out the issue? Did the timeout issues only happen every now and then or consistently? If this is still happening for you - feel like opening an issue on the repo? https://github.com/freeCodeCamp/testable-projects-fcc/issues
I just tested the timeout issue again and it happened in about 50% of tests.
Maybe just increase the timeout?
The Layout test keeps failing in the editor view.
IĀ“m using a 13.3" monitor and always have a scroll bar in the editor view.
I think clientWidth does not take a scroll bar into account and might be throwing off the calculations in testHorizontallyCentered.
Would offsetWidth be a viable alternative to clientWidth?
Should I open separate issues for timeout and centering?
@christophherr Yeah, that sounds good, separate issues for separate errors works for me! Also, feel free to clone the repo and run locally if you feel like playing around and seeing what might work! Thereās a pretty good contributing doc on the repo that explains how to test the changes locally, also PRs should follow freeCodeCampās general contributing guidelines as well.
I refactored my old Quote Machine a little bit for test-suites, bit it doesnāt pass the Layout test. The quote-box was centered with margin: 2% auto; - it didnāt pass. I added flexbox in the body tag, centered it with flexbox, and now it passes only if I donāt have any margin on box-quote. If I add margin-top or margin: 2% auto; , test fails. But without it quote-box is just on top and itās kinda ugly. http://codepen.io/enk/pen/PWedvY Hereās my pen.
Hey @Enikol, just curious - what browser are you using? My guess is chrome since the test suite is really finicky in other browsers, if it works at all, but Iām messing around with you code and with our without flex on the body and with margin: 2% auto it seems to be passing all tests fine
Yep, Iām using Chrome, and it still doesnāt pass the test with margin: 2% auto in editor view, but passes in full-page view, so itās probably the same problem previous commentator had.
@Enikol Hmmmā¦ itās just odd that I canāt reproduce the issue. Which OS are you on? Not sure that should make a difference, but trying to narrow this down and see if it is in fact the same issue that @christophherr was having. Are you seeing any errors in the console? And what is the error the test is throwing?
This is what Iām getting on my end, on Chrome, Mac OSX 10.11.7.
@no-stack-dub-sack Desktop, 24". Also, I just tried changing the layout on Codepen - I usually use horisontal layout, but I changed it to vertical, editor on the side, like on you screenshot, and now it passes tests just fine! Probably because in this layout there is no scrollbar (on my monitor, at least), so I think it might be the same issue @christophherr had.
@Enikol Would you mind running my pen with a scroll bar present (e.g. decrease the height of the browser window and reload the page) and check the value for delta in the console?
Just wondering if it changes depending on screen size.
Iām thrilled to announce that our testable challenges now feature a link you can click to report a bug or submit feedback.
Iām closing this topic. We can continue discussing specific issues as they come up over on the testable-projects-fcc repo. Happy coding and QAāing!