DEV Community

Vesa Piittinen
Vesa Piittinen

Posted on

How to display/output as template string?

#help #javascript

I'm trying to make prettier HTML for my tests so that they are easy to read. This means I want to write them as template strings.

The problem is that tools do not output template strings, instead giving me diffs like this:

"'\\n<ul class=\"list\">\\n    <li class=\"list-item\">\\n        <input\\n            type=\"radio\"\\n            checked=\"\"\\n            name=\"item\"\\n            value=\"1\"\\n        />\\n    </li>\\n</ul>\\n'"
Enter fullscreen mode Exit fullscreen mode

Which I would like to see as:

`
<ul class="list">
    <li class="list-item">
        <input
            type="radio"
            checked=""
            name="item"
            value="1"
        />
    </li>
</ul>
`
Enter fullscreen mode Exit fullscreen mode

I could write a custom solution but is there an existing tool for this?

Top comments (2)

Collapse
 
merri profile image
Vesa Piittinen • • Edited

The poor man's solution... open Codepen and throw these codes:

<textarea rows="40" cols="120" style="font-family:monospace"></textarea>

.

document.getElementsByTagName('textarea')[0].textContent = eval(
    // copy-and-paste the above type of string here
)

Could automate more. Also noticed that apparently my setup for tap-nirvana isn't probably working right as I'm getting deepEqual comparisons in a very unfriendly syntax and the whole purpose for tap-nirvana is to give me pretty colors and diffs.

Collapse
 
merri profile image
Vesa Piittinen •

Replaced tap-nirvana with tap-difflet and no more issues with double escaped strings and diffs are easier to read :)

Read next

shafayeat profile image

TypeScript for Domain-Driven Design (DDD)

Shafayet Hossain -

sharathchandark profile image

How to Build a QR Code Generator with API Using HTML, CSS, and JavaScript

sharathchandark -

fabbuilder profile image

React + Vite: The ultimate guide to static application deployment

FAB Builder | Code Generation -

rawas_aditya profile image

Understanding the Barrel Pattern in JavaScript/TypeScript

Aditya Rawas -