Part 3: Jest中对Vue组件进行结构和样式测试

Test Styles and Structure of Vue.js Components in Jest

Jest中对Vue组件进行结构和样式测试

vue-test-utils provide us with a set of utilities to assert on Vue.js components.
vue-test-utils给我们提供了一系列对组件进行断言的工具

So far, in the tests we’ve tested via Jest Snapshots. This is great, but sometimes we wanna assert something more specific.
目前为止，在测试用例中我们通过快照进行了一些测试。效果很棒，但是我们有时候还想要对组件进行其他更具体的断言。

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实例，这里有一系列的实用工具可以随意使用。让我们看看它们都能干什么。

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.
这两个方法接收一个选择器作为参数，比如CSS选择器或者Vue实例都可以。

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

对结构和样式进行断言

Let’s add more tests to MessageList.test.js:
现在在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实例作为参数传递到is()、 contains()两个方法中进行检测。

We have some utils to assert the Vue instance:
我们还可以对Vue实例进行断言：

it('MessageList 和 Message 都是Vue实例', () => {
  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:
现在我们试着断言更具体的结构，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只能断言行内样式。

<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组件进行断言。用的最多是hasX()这类方法，他们虽然很棒，但是getX()类方法显然对测试体验来说更好一些。所以你可以重构代码如下：

// `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.
此类方法都还在讨论当中，不出意外，以后会将其添加到方法库中。