-
Notifications
You must be signed in to change notification settings - Fork 20
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
Conversation
src/guide/stubs-shallow-mount.md
Outdated
|
||
Sometimes you might want to stub out *all* the custom components. For example you might have a component like this: |
There was a problem hiding this comment.
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 👌
There was a problem hiding this 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 :)
src/guide/stubs-shallow-mount.md
Outdated
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` |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
## `shallow: true` or `shallowMount` | |
## Stubbing all children components |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Great!
src/guide/stubs-shallow-mount.md
Outdated
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` |
There was a problem hiding this comment.
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
## 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> |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
(same suggestion as above!)
There was a problem hiding this comment.
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. |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
nice point
Co-authored-by: Adrià Fontcuberta <[email protected]>
Co-authored-by: Adrià Fontcuberta <[email protected]>
Probably needs a lot of work, especially the discussion on
shallow
andstubs
andmount
. Good start, once we at least have something for all the pages we can move to beta!resolves #29