Skip to content

docs: shallow and stubs #38

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 4 commits into from
Jul 17, 2020
Merged

docs: shallow and stubs #38

merged 4 commits into from
Jul 17, 2020

Conversation

lmiller1990
Copy link
Member

@lmiller1990 lmiller1990 commented Jul 14, 2020

Probably needs a lot of work, especially the discussion on shallow and stubs and mount. Good start, once we at least have something for all the pages we can move to beta!

resolves #29

@lmiller1990 lmiller1990 requested a review from afontcu July 14, 2020 08:06
Comment on lines 80 to 82

Sometimes you might want to stub out *all* the custom components. For example you might have a component like this:
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I love framing shallowMount this way 👌

Copy link
Member

@afontcu afontcu left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Looks great overall!! Left several notes with comments here and there, but I'm totally on with the direction of this (particularly complex) guide :)

This will stub out *all* the `<FetchDataFromApi />` components in the entire render tree, regardless of what level they appear at. That's why it is in the `global` mounting option.

## `shallow: true` or `shallowMount`
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
## `shallow: true` or `shallowMount`
## Stubbing all children components

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Great!

Vue Test Utils provides some features for *stubbing* components. A *stub* is where you replace an existing implementation of a custom component with a dummy component that doesn't do anything at all, which can simplify an otherwise complex test. Let's see an example.

## Mocking with `global.stubs`
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

💡 I'd suggest using headings that help readers understand what's the section about over using API-focused ones

Suggested change
## Mocking with `global.stubs`
## Stubbing a single child component

}
})
console.log(wrapper.html()) // <div><h1>Welcome to Vue.js 3</h1><fetch-data-from-api-stub></fetch-data-from-api-stub></div>
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

(same suggestion as above!)

Copy link
Member Author

@lmiller1990 lmiller1990 Jul 17, 2020

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Hm. I don't want people to think asserting a that a specific dom structure is rendered is a good idea, though. 🤔

```

This will stub out *all* the `<FetchDataFromApi />` components in the entire render tree, regardless of what level they appear at. That's why it is in the `global` mounting option.
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

nice point

@lmiller1990 lmiller1990 merged commit 6ffa638 into master Jul 17, 2020
@lmiller1990 lmiller1990 deleted the docs/stubs-shallow branch July 17, 2020 11:43
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

feat: Add Stubs/Shallow Mount section
2 participants