Skip to content

Commit 8a70d6b

Browse files
committed
Add inline comments
1 parent e6dad3e commit 8a70d6b

File tree

1 file changed

+13
-6
lines changed

1 file changed

+13
-6
lines changed

src/guide/conditional-rendering.md

+13-6
Original file line numberDiff line numberDiff line change
@@ -50,21 +50,26 @@ If `get()` does not return an element matching the selector, it will raise an er
5050

5151
## Using `find()` and `exists()`
5252

53-
`get()` works for asserting elements do exist, because it throws an error when it can't find an element, you can't use it to assert elements don't exist. For this, we can use `find()` and `exists()`. The next test asserts that if `admin` is `false` (which is it by default), the admin link is not present:
53+
`get()` works for asserting elements do exist. However, as we mentioned, it throws an error when it can't find an element, so you can't use it to assert whether if elements exist.
54+
55+
To do so, we use `find()` and `exists()`. The next test asserts that if `admin` is `false` (which is it by default), the admin link is not present:
5456

5557
```js
5658
test('does not render an admin link', () => {
5759
const wrapper = mount(Nav)
58-
const adminLink = wrapper.find('#admin')
59-
expect(adminLink.exists()).toBe(false)
60+
61+
// Using `wrapper.get` would throw and make the test fail.
62+
expect(wrapper.find('#admin').exists()).toBe(false)
6063
})
6164
```
6265

6366
Notice we are calling `exists()` on the value returned from `.find()`? `find()`, like `mount()`, also returns a wrapper, similar to `mount()`. `mount()` has a few extra methods, because it's wrapping a Vue component, and `find()` only returns a regular DOM node, but many of the methods are shared between both. Some other methods include `classes()`, which gets the classes a DOM node has, and `trigger()` for simulating user interaction. You can find a list of methods supported [here](/api/#wrapper-methods).
6467

6568
## Using `data`
6669

67-
The final test is to assert that the admin link is rendered when `admin` is `true`. It's default by `false`, but we can override that using the second argument to `mount()`, the [`mounting options`](/api/#mount-options). For `data`, we use the aptly named `data` option:
70+
The final test is to assert that the admin link is rendered when `admin` is `true`. It's `false` by default, but we can override that using the second argument to `mount()`, the [`mounting options`](/api/#mount-options).
71+
72+
For `data`, we use the aptly named `data` option:
6873

6974
```js
7075
test('renders an admin link', () => {
@@ -75,8 +80,10 @@ test('renders an admin link', () => {
7580
}
7681
}
7782
})
78-
const adminLink = wrapper.find('#admin')
79-
expect(adminLink.exists()).toBe(true)
83+
84+
// Again, by using `get()` we are implicitly asserting that
85+
// the element exists.
86+
expect(wrapper.get('#admin').text()).toEqual('Admin')
8087
})
8188
```
8289

0 commit comments

Comments
 (0)