| 失效链接处理 |
|
Testing Vue.js Applications 1st Edition PDF 下载
本站整理下载：
提取码：unv0
相关截图：
主要内容：
The Item component should render a link to the item.url with item.title as the text. This test
needs to be more specific than checking that the text is rendered somewhere in the component.
This text must be rendered in an <a> element.
Note
You’ll check that the <a> element has the correct href in the next section—testing DOM
attributes.
The test will use find to get a wrapper containing an <a> element and then call the textmethod
to retrieve the text content of the element. Add the following test to the describeblock in
src/components/__tests__/Item.spec.js.
Listing 3.4. Testing component text
test('renders a link to the item.url with item.title as text',
() => { const item = { 1
title: 'some title'
}
const wrapper = shallowMount(Item, {
propsData: { item } 2
})
expect(wrapper.find('a').text()).toBe(item.title) 3
})
• 1 Creates a mock item to pass in as prop data
• 2 Passes prop data
• 3 Finds an <a> element and checks the text rendered is item.title
Run the unit test script to make sure the test fails for the right reason: npm run test:unit. You’ll
get a Vue Test Utils error that tells you an <a> element couldn’t be found.
A Vue Test Utils error means the test is almost failing for the right reason, but not quite. You
can check that the test fails for the right reason after add the <a> tag and make the test pass.
To make the test pass, you need to render item.title in the <a> tag. Open
src/components/Item.vue, and replace the <template> block with the following code:
<template>
<li>
<a>{{ item.title }}</a>
{{ item.url }}
</li>
</template>
Run the unit script again: npm run test:unit. It passes, but you never saw it fail for the right
reason. If you want to be extra careful (which I always am), you can remove the text from
the <a> tag to see an assertion error. Be sure to add the text again once you’ve verified it fails for
the correct reason.
In line with TDD, you added the bare minimum source code to pass this test. You’re just
rendering a title inside an <a> element, which is not a full functioning link. The next step is to
make it a link by adding a test to check that the <a> element has an href value!
3.3. TESTING DOM ATTRIBUTES
I don’t always write components that render DOM attributes as part of the component contract,
but when I do I write a test for them. Luckily, it’s easy to test DOM attributes with Vue Test
Utils.
The specification you’re working on is that the Item component renders a link to
theitem.url with item.title as the text. You’ve rendered it with the title text, so now you need
to give it an href property using the item.url value. To do that, you need a way to access
the href attribute in the test.
A Vue Test Utils wrapper has an attributes method that returns an object of the component
attributes. You can use the object to test the value of an attribute as follows:
expect(wrapper.attributes().href).toBe('http://google.com')
You’ll use attributes in your test to check that the <a> element has the correct href value. You
can find a wrapper containing the <a> element and then call the attributes method to access
the href value. Replace the renders a link to the item.url with item.title as texttest with the
code from the next sample into src/components/__tests__/Item.spec.js.
Listing 3.5. Testing DOM attributes
test('renders a link to the item.url with item.title as text', () => {
const item = {
url: 'http://some-url.com',
title: 'some-title'
}
const wrapper = shallowMount(Item, {
propsData: { item }
})
const a = wrapper.find('a')
expect(a.text()).toBe(item.title)
expect(a.attributes().href === item.url).toBe(true) 1
})
• 1 Asserts that an <a> element has an href attribute with value of item.ur
|
| Java1234官方群25： | 
|
| Java1234官方群25： | 838462530 |
苏公网安备 32061202001004号
