#preview does not contain the H1 - Need some help with Markdown Previewer Test #6

JavaScript
1

Hi all!

I’m having trouble passing all of the Markdown Previewer tests, specifically test #6:

When my markdown previewer first loads, the default markdown in the #editor field should be rendered as HTML in the #preview element

#preview does not contain the H1 element represented by the markdown in the #editor field : expected false to be true

When I look at the test suite assertion and enter it into the console, it returns 1 like it’s supposed to:

>> document.querySelectorAll("#preview h1").length
<- 1

Any ideas on what I’m doing wrong?

Here’s the working project:
https://camper-fcc.gitlab.io/markdown-previewer/

Here’s the code:

Any and all help is appreciated. Thanks! :sunny:

1 Like
2

Looks like it is the content of the h1 and h2 that is causing the test to fail. Replace the content with just plain text (no emoji or link).

1 Like
3

@lasjorg, thanks! You are correct. For people looking at this issue in the future, my markdown originally looked like:

# Welcome to [@camper-fCC's](https://freecodecamp.org/camper-fcc) React Markdown Previewer!

## :star2: :star2: :star2: :star2: :star2: :star2: :star2:

Changing it to the following lets it pass the test:

# Welcome to React Markdown Previewer!

## Fun with React!

In trying to solve this, I added plain h1s and h2s below those top headers and it still didn’t pass the test. I guess the “clean” h1 and h2 have to be the first h1 and h2 in the text.

4

I looked at the test and any markdown syntax that will transform into HTML tags will make the test fail. E.g. you can’t bold some text in the header etc. I might make a PR if I can find a good solution, right now I’m not so sure what I have is that great.

  1. The renderer overwrite needs to use the text raw param.

  2. We need to convert the HTML back into markdown (e.g. using turndown) before doing the compare.

@camper Can you test this version of the test script a bit for me with some different markdown in your project?
https://raw.githubusercontent.com/lasjorg/bundle-test/master/bundle.js

1 Like
5

@lasjorg Thanks for your work! Using the markdown that didn’t work from my previous comment and your version of the test script gave the same failure.

I don’t think this is a major problem and doesn’t seem to affect many people. When I searched for previous forum topics about this problem, it seemed people solved it but it wasn’t clear how they solved it. So, hopefully this forum topic will be helpful for the few that do run into this problem.

6

It’s strange the little I tested it, it seem to work with links and making text bold in the header using the example project running locally. I might look into it some more at some point but as you said it isn’t that big of a deal.

Anyway, thanks for testing it.