Test Styles and Structure of Vue.js Components in Jest
Jest中對Vue組件進(jìn)行結(jié)構(gòu)和樣式測試
vue-test-utils provide us with a set of utilities to assert on Vue.js components.
vue-test-utils給我們提供了一系列對組件進(jìn)行斷言的工具
So far, in the tests we’ve tested via Jest Snapshots. This is great, but sometimes we wanna assert something more specific.
目前為止，在測試用例中我們通過快照進(jìn)行了一些測試蜘腌。效果很棒述吸，但是我們有時候還想要對組件進(jìn)行其他更具體的斷言恩溅。
Although you can access the Vue instance via cmp.vm, you have a set of utilities at your disposal to make it easier. Let’s see what we can do.
還好姥闭，你可以通過cmp.vm斷言Vue實(shí)例褐健，這里有一系列的實(shí)用工具可以隨意使用缸血。讓我們看看它們都能干什么秉剑。
The Wrapper object
Wrapper對象
The Wrapper is the main object of vue-test-utils. It is the type returned by mount, shallow, find and findAll functions.
Wrapper對象是``vue-test-utils的主要對象,它返回自mount, shallow, find 和 findAll方法泛豪。
find and findAll
find 和 findAll方法
They accept a Selector as an argument, which can be both a CSS selector or a Vue Component.
這兩個方法接收一個選擇器作為參數(shù)，比如CSS選擇器或者Vue實(shí)例都可以秃症。
So we can do things like:
他們可以幫我們做很多有意思的事情：
let cmp = mount(MessageList)
expect(cmp.find('.message').element).toBeInstanceOf(HTMLElement)
// Or even call it multiple times
let el = cmp.find('.message').find('span').element
// Although for the previous example, we could do it in one
let el = cmp.find('.message span').element
Asserting Structure and Style
對結(jié)構(gòu)和樣式進(jìn)行斷言
Let’s add more tests to MessageList.test.js:
現(xiàn)在在MessageList.test.js里加入以下代碼
it('is a MessageList component', () => {
expect(cmp.is(MessageList)).toBe(true)
// Or with CSS selector
expect(cmp.is('ul')).toBe(true)
})
it('contains a Message component', () => {
expect(cmp.contains(Message)).toBe(true)
// Or with CSS selector
expect(cmp.contains('.message')).toBe(true)
})
Here we’re using is to assert the root component type, and contains to check for sub-components existence.
以上我們測試了根組件的類型候址，還有子組件存在與否。cmp是mount()返回的Wrapper种柑，這里主要是通過將CSS選擇器和Vue實(shí)例作為參數(shù)傳遞到is()岗仑、 contains()兩個方法中進(jìn)行檢測。
We have some utils to assert the Vue instance:
我們還可以對Vue實(shí)例進(jìn)行斷言：
it('MessageList 和 Message 都是Vue實(shí)例', () => {
expect(cmp.isVueInstance()).toBe(true)
expect(cmp.find(Message).isVueInstance()).toBe(true)
})
Now we’re going to assert Structure in more detail, exists, isEmpty and hasAttribute comes in very handy for this:
現(xiàn)在我們試著斷言更具體的結(jié)構(gòu)聚请，exists, isEmpty 和 hasAttribute方法對此很擅長荠雕。：
it('Message element exists', () => {
expect(cmp.find('.message').exists()).toBe(true)
})
it('Message is not empty', () => {
expect(cmp.find(Message).isEmpty()).toBe(false)
})
it('Message has a class attribute set to "message"', () => {
// For asserting "class", the `hasClass` method is easier
expect(cmp.find(Message).hasAttribute('class', 'message')).toBe(true)
})
Then, we have hasClass and hasStyle to assert Styling. Let’s update the Message.vue component with a style, since hasStyle asserts only inline styles:
接下來稳其，我們用hasClass 和 hasStyle來斷言樣式。
我們在Message.vue中添加一些樣式炸卑，注意既鞠，hasStyle只能斷言行內(nèi)樣式。
<li style="padding-top: 10px" class="message">{{message}}</li>
Here the tests:
測試用例可以這么寫：
it('Message component has the .message class', () => {
expect(cmp.find(Message).hasClass('message')).toBe(true)
})
it('Message component has style padding-top: 10', () => {
expect(cmp.find(Message).hasStyle('padding-top', '10px')).toBe(true)
})
get methods
get類方法
As you’ve seen, we have some useful utils to assert Vue components. Most use the form of hasX, which is great, but to have a getX brings better testing experience, in terms of flexibility and debugging. So you could rewrite the following example:
我們借助一些有用的工具類方法盖文，對Vue組件進(jìn)行斷言嘱蛋。用的最多是hasX()這類方法，他們雖然很棒五续，但是getX()類方法顯然對測試體驗來說更好一些洒敏。所以你可以重構(gòu)代碼如下：
// `has` form
expect(cmp.find(Message).hasAttribute('class', 'message')).toBe(true)
// `get` form
expect(cmp.find(Message).getAttribute('class')).toBe('message')
This is under discussion and seems like it will be added to the library at some point.
此類方法都還在討論當(dāng)中，不出意外疙驾，以后會將其添加到方法庫中凶伙。
