feat(test-utils): add 'overview' function

[SergiCL]

close #1461

What kind of change does this PR introduce? (check at least one)

• Feature

Does this PR introduce a breaking change? (check one)

• No

If yes, please describe the impact and migration path for existing applications:

The PR fulfills these requirements:

• It's submitted to the dev branch.
• When resolving a specific issue, it's referenced in the PR's title (e.g. fix #xxx[,#xxx], where "xxx" is the issue number)
• All tests are passing: https://github.com/vuejs/vue-test-utils/blob/dev/.github/CONTRIBUTING.md#development-setup
• New/updated tests are included

If adding a new feature, the PR's description includes:

• A convincing reason for adding this feature (to avoid wasting your time, it's best to open a suggestion issue first and wait for approval before working on it)

Other information:
The main objective of this feature is "To give an overview of the state of the wrapper at the time the function is executed"

Example execution:

wraper.overview()

// Output
Wrapper (Visible):

Html:
    <div class="test">
      <p>My name is Tess Ting</p>
    </div>

Data: {
    firstName: Tess,
    lastName: Ting
}

Computed: {
    fullName: Tess Ting'
}

Emitted: {',
    foo: [',
        0: [ hello, world ],
        1: [ bye, world ]'
    ],
    bar: [
        0: [ hey ]'
    ]
}

More info

[lmiller1990]

Holy moly what a PR! I like how in depth your tests go.

Please give me some time to review this.

[SergiCL]

Holy moly what a PR! I like how in depth your tests go.

Please give me some time to review this.

Thank you. No problem, take as much time as you need.

[lmiller1990]

I left some comments!

[lmiller1990]

looks like a solid PR.

this is the last API we will be adding before v1! This will go out with v1, should be in a week or two.

[julisch94]

Hey folks, I'm unsure if this is the right place to ask. I would like such an overview() function but I can't find it anywhere even though I can see it was added by you.

It's still in the code:
https://github.com/vuejs/vue-test-utils/blob/dev/packages/test-utils/src/wrapper.js#L450-L455C21
(even though deprecated, why?)

There's also nothing about it in the docs:
https://v1.test-utils.vuejs.org/api/wrapper

So how can I print the DOM tree of a component with vue test utils like I can do with react testing library using screen.debug()?

Anyone can help me understand this a bit better?

[lmiller1990]

You can print the HTML with wrapper.html() https://test-utils.vuejs.org/api/#html

I am not sure about overview(), I completely forgot about it. I think the confusion is the overview() function was added to v1 of this lib (which works with Vue 2) but you might be on v2 of this lib (which works with Vue 3).

[julisch94]

@lmiller1990 oh right! Thanks! I was looking at the v1 of the docs. Didn't notice that Google sent me to v1 instead of v2. And also thanks for pointing me to wrapper.html(). It served my purpose. :)