Issue(1147): Add option to pretty print html components

[addisonssense]

This PR is to implement pretty printing for html components.

Fixes #1147

[quinnlangille]

Yes! I've been waiting for this 🥇

[eddyerburgh]

Thank you for the PR, as per my comment in the issue: can you make pretty-printing the default behavior?

[addisonssense]

@eddyerburgh done! I have updated the existing test to use the prettyPrint: false option. If its better to update the html being asserted instead of using the flag, I can definitely do that instead. I figured this method was less intrusive

[bilyes]

Very cool feature at a relatively low cost. Thanks for the initiative @addisonssense !

[briwa]

@addisonssense I think existing tests should be updated with prettyPrint: true instead of false, since it should reflect the default behavior of .html? It will be consistent for future tests that use .html, since they would probably be written with the default behavior in mind (pretty-printed).

Just my $0.02 ✌️ But anyhow, nice PR!

[addisonssense]

@briwa I think you make a good point. I'll do that 👍

[TheJaredWilcurt]

A few months ago I proposed a different approach to this. jest-serializer-vue has options built in, but the options do not format (or "pretty print") the code very well.

• Change (or expose) "pretty" options eddyerburgh/jest-serializer-vue#13

TLDR:

• Change the default settings being passed in to pretty to these:

  const options = {
    indent_char: ' ',
    indent_inner_html: true,
    indent_size: 2,
    inline: [],
    sep: '\n',
    unformatted: ['code', 'pre']
  };

• Allow users to pass in their own options object. (Not sure where they would do this, package.json?)
• Have instructions of how to pass in the object with the previous settings (so users can opt out of breaking changes).

This allows us to change the defaults again in the future without worrying about breaking people's tests, as the defaults can be documented for each version.

[eddyerburgh]

I intend to implement the changes in jest-serializer-vue but I haven't had time to work on it.

jest-serializer-vue will be formatted more heavily, whereas vue-test-utils can just use the defaults.

@addisonssense thanks for updating, but I wasn't clear in my previous comment. I don't think there should be an option to pretty-print or not. I don't think it should be configurable, and pretty printing should always be the default behavior.

Can you update the PR to remove the prettyPrint option entirely?

[addisonssense]

@eddyerburgh done! Pretty printing is now the default. The option to disable it is removed.

[eddyerburgh]

Thanks :)

[vue-bot]

Hey @addisonssense, thank you for your time and effort spent on this PR, contributions like yours help make Vue better for everyone. Cheers! 💚