[BETA] Markdown Previewer - not Passing test 5

1

My markdown previewer is passing test 6(renders all elements from #5), but NOT passing test 5 (have these elements written in markdown). I have met all the requirements:

  • h1
  • h2
  • bolded text.
  • inline code
  • link
  • blockquote
  • code block
  • list item
  • image

My pen is here, but my initial markdown string is provided here:

const INITIAL_MARKDOWN = "# Markdown Text goes here\n## You can also make subheadings\n\nOne of the **trickiest** parts of getting this project to work was learning how to use `dangerouslySetInnerHTML` to make the previewer display the output of [marked.js](https://github.com/markedjs/marked/blob/master/README.md) as HTML instead of a string.\n\nAccording to the React Documentation,\n>dangerouslySetInnerHTML is React’s replacement for using innerHTML in the browser DOM. In general, setting HTML from code is risky because it’s easy to inadvertently expose your users to a cross-site scripting (XSS) attack.\n\nExample Code:\n```\nfunction createMarkup() {\n  return {__html: 'First &middot; Second'};\n}\n\nfunction MyComponent() {\n  return <div dangerouslySetInnerHTML={createMarkup()} />;\n}\n```\n\nJust remember to:\n- Search, Read, Ask\n- Ask for help on the Forum (that's what worked for me.)\n\n![Vipatron icon](http://vipinjeetsandhu.com/images/BW_Scaryface_icon.jpg 'Vip face1')\n\n![Vipatron icon][picref]\n\n[picref]: http://vipinjeetsandhu.com/images/BW_Scaryface_icon.jpg 'Vip face2'\n";

Looking at the test output below, I can’t figure out why it is failing: “expected -1 to not equal -1”—is that the problem?

  1. 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
    I have included the program output below:
    AssertionError: write some markdown representing a
    : expected -1 to not equal -1AssertionError@https://gitcdn.link/repo/freeCodeCamp/testable-projects-fcc/master/build/bundle.js:10986:14
    FCC_Global</module.exports/Assertion.prototype.assert@https://gitcdn.link/repo/freeCodeCamp/testable-projects-fcc/master/build/bundle.js:15320:14
    assertEqual@https://gitcdn.link/repo/freeCodeCamp/testable-projects-fcc/master/build/bundle.js:15837:8
    FCC_Global</module.exports/ctx[name]@https://gitcdn.link/repo/freeCodeCamp/testable-projects-fcc/master/build/bundle.js:14907:19
    FCC_Global</module.exports/assert.notStrictEqual@https://gitcdn.link/repo/freeCodeCamp/testable-projects-fcc/master/build/bundle.js:17660:6
    createMarkdownPreviewerTests/</</<@https://gitcdn.link/repo/freeCodeCamp/testable-projects-fcc/master/build/bundle.js:20109:10
    r@https://cdnjs.cloudflare.com/ajax/libs/mocha/3.0.2/mocha.min.js:2:7850
    [33]</</r.prototype.run@https://cdnjs.cloudflare.com/ajax/libs/mocha/3.0.2/mocha.min.js:2:8853
    [34]</</i.prototype.runTest@https://cdnjs.cloudflare.com/ajax/libs/mocha/3.0.2/mocha.min.js:2:13551
    r/<@https://cdnjs.cloudflare.com/ajax/libs/mocha/3.0.2/mocha.min.js:2:14190
    r@https://cdnjs.cloudflare.com/ajax/libs/mocha/3.0.2/mocha.min.js:2:13024
    r/<@https://cdnjs.cloudflare.com/ajax/libs/mocha/3.0.2/mocha.min.js:2:13000
    n@https://cdnjs.cloudflare.com/ajax/libs/mocha/3.0.2/mocha.min.js:2:12791
    [34]</</i.prototype.hook/<@https://cdnjs.cloudflare.com/ajax/libs/mocha/3.0.2/mocha.min.js:2:12855
    i@https://cdnjs.cloudflare.com/ajax/libs/mocha/3.0.2/mocha.min.js:1:550
  2. When my markdown previewer first loads, the default markdown in the #editor field should be rendered as HTML in the #preview element
2

When I run it the assertion error says: write some markdown representing a <blockquote>.
I didn’t check your whole text because I can’t really remember that type of markup. Maybe check if you have a blockquote or if it is written how it is meant to be?

3

You can use this search string to find the beginning of my blockquote:
\n>dangerouslySetInnerHTML

Also, I’ve modified my CSS to color the blockquote red, and it is highlighting correctly.

4

Also, to confirm with Google’s Element Inspector, I’ve taken this screenshot proving the web browser knows it’s a blockquote:

image
image1920×1041 209 KB

5

I have tried coping and pasting my initial markdown variable from my codepen (I did it a while back) and it did pass the test.

It seems like >quote is not the problem but something you have before or after that stops the tester from reading it properly. I have initial markdown declared with backticks wich seem to work fine and don’t need all the new carriage characters.

6

I fixed it. I just figured it out by reading the JS file for the testing suite. The relevant part is:

_chai.assert.notStrictEqual(markdown.search(/>\s.+/), -1, 'write some markdown representing a <blockquote> ');

Basically, the regex says I need at least whitespace between the blockquote initiator and the beginning of the quote. marked.js correctly interprets the blockquote without the whitespace. I think I’m going to open an issue on github.

7

Yea, I had problems solving mine too, they should make the tester a bit less strict. Glad you found it.