Java知识分享网 - 轻松学习从此开始!    

Java知识分享网

Java1234官方群25:java1234官方群25
Java1234官方群25:838462530
     

SpringBoot打造企业级进销存

Java1234 VIP课程

领取微信扫码登录Java实现视频教程

Java1234至尊VIP(特价活动)

Testing Vue.js Applications 1st Edition PDF 下载


分享到:
时间:2020-07-07 15:54来源:http://www.bfztw.com 作者:小锋  
Testing Vue.js Applications 1st Edition PDF 下载
失效链接处理
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

 

------分隔线----------------------------
关注公众号
【Java资料站】
回复 666
获取 
66套java
从菜鸡到大神
项目实战课程
上海11选5走势 红牛彩票投注 兴盛彩票注册 英豪彩票开户 大通彩票开户 百盛彩票投注 2019注册就送的娱乐平台 迪士尼彩乐园娱乐 湖北快3开奖 红牛彩票投注