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.
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.
Thanks, and happy coding!
Here is the blank pen for campers to fork: http://codepen.io/freeCodeCamp/pen/MJjpwO
Here is the example project with passing tests: http://codepen.io/freeCodeCamp/pen/GrZVVO
Here are the user stories for campers to reference:
- I can see a
<textarea>
element with corresponding id="editor"
.
- I can see an element with corresponding
id="preview"
.
- When I enter text into the
#editor
element, the #preview
element is updated as I type to display the content of the textarea.
- When I enter GitHub flavored markdown into the
#editor
element, the text is rendered as HTML to #preview
as I type (Hint: You don't need to parse Markdown yourself - you can import the Marked library for this: marked - Libraries - cdnjs - The #1 free and open source CDN built to make life easier for developers).
- When my markdown previewer first loads, the
#editor
field should contain valid default markdown that provides a brief description of the project and demonstrates the previewer's capabilities.
- When my markdown previewer first loads, the default text in the
#editor
field should contain valid markdown that represents at least one of each of the following elements: a header (H1 size), a sub header (H2 size), a link, inline code, a code block, a list item, a blockquote, an image, and bolded text.
- When my markdown previewer first loads, the default markdown in the
#editor
field should be rendered as HTML in the #preview
element.
Just made one with absolutely no stylingā¦ https://codepen.io/leonfeng/pen/PWprQE
Bug in the test suite: Test #8 passes even though my links donāt open in new tabs.
1 Like
Excellent work. Thank you for the feedback.
Did you encounter any other difficulties or ambiguities building this?
@no-stack-dub-sack do you know what might be causing test #8 to pass without links that open in new tabs?
Well, at one point I somehow had the wrong test suite selected, and it took me a while to find out why the tests werenāt running. The test suite dropdown menu could use a larger font size, I think. Some kind of warning that pops up when you choose the wrong test suite would be helpful, too.
1 Like
If you can figure out how we would be able to warn campers about the wrong test suite, that would indeed be a big improvement. Do you have any ideas? If they donāt tell us what theyāre working on, it would be hard to pick the right test suite for them based purely on their initial code.
And thanks for the feedback on the font size. Iām mentioning @no-stack-dub-sack here to get his opinion on this.
Youāre welcome I canāt think of any good solutions, given CodePenās limitations. Maybe the most practical solution is to add a comment in the Fork Me template, like ā// MAKE SURE TO CHOOSE THE CORRECT TEST SUITE!!!ā
@QuincyLarson @leonfeng Hey guys, sorry, Iām a bit behind on my notifications hereā¦
As for test 8 - yes, test 8 (and test 9) will pass no matter what, as they are marked OPTIONAL BONUS: ...
just to let campers know that there is an extra challenge there if theyād like to undertake it.
As for the wrong test suite issue - itās not so much a limitation of codepen, but a limitation of the concept of the project in general. Without adding a hard coded ātest harnessā variable to the test suite āfork meā pen, there is no way to detect what a user is attempting to build at this point. Campers may encounter this issue, but upon reading the user stories and checking out the two where the app notifies what you are working on, it should be pretty easily overcome (as it seems like it was for you @leonfeng). Like with many things, thereās a slight learning curve (very slight I hope), but once the problem is realized, itās unlikely to happen again. I.E. this is a first-timers issue, and once someone gets used to working with the test suite, it should be a non-issue. That said - your suggestion is a good one, and Iāll do that now!
EDIT:
Thanks for participating in the QA process @leonfeng, and glad to see you were able to get all of the tests to pass!
1 Like
@leonfeng Iām also very happy you were able to get this working with React!!! It was exceedingly difficult for me to figure out how to programmatically trigger a change event on a textarea
in a React app, so glad it is actually working on someone elseās implementation (its not as simple a task as it seems )
1 Like
@no-stack-dub-sack I actually attempted this particular challenge last year, so it was not too hard once I warmed up on React docs And you probably get this a lot, but this testable user stories thing is genius! Now I totally get test-driven development!
@leonfeng great! Glad to hear you enjoyed the process! Thatās the effect we were hoping it would have I wish I could take credit for the idea, but @QuincyLarson & @Weezlo came up with the concept, I just helped a lot with the implementation, but glad you are loving it either way!!!
Just built a Markdown Editor with Vue.js and tests 3, 4, and 7 are failing.
@christophherr hmmmmā¦ interesting. Thanks for reporting this. Iāve opened an issue on the repo here.
Unfortunately, Iām not sure thereās a whole lot that can be done about this, which is a problem. Partly because I have no idea how Vue.js works, Iām going to tie in some other folks on the issue thread.
Thanks for your feedback on this one!
Thanks for your feedback so far, everyone!
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!