Java知識分享網 - 輕松學習從此開始!????

Java知識分享網

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

GIT視頻教程(結合github,碼云)免費領取

BAT一線大廠筆試面試打包下載

java1234.vip企業級站點全新上線(可以領取站點源碼)

SpringBoot打造企業級進銷存

Java1234 VIP課程

領取微信掃碼登錄Java實現視頻教程

Java1234至尊VIP(特價活動)

Testing Vue.js Applications 1st Edition PDF 下載


分享到:
時間:2020-07-07 15:54來源:http://www.luygg.com 作者:小鋒  侵權舉報
Testing Vue.js Applications 1st Edition PDF 下載
失效鏈接處理
Testing Vue.js Applications 1st Edition  PDF 下載

本站整理下載:
 
相關截圖:
 
主要內容:

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
從菜雞到大神
項目實戰課程
日本色在线