Тест, если существует элемент Vuejs, Karma, Mocha

Question

Я новичок в тестировании в Javascript и Vue.js. Я установил vue через vue-cli и полный шаблон webpack, в котором встроены Karma, Mocha и PhantomJS. Я запустил тест компонента hello world component, и он проходит.

У меня есть компонент vuejs, называемый my-input.vue, который генерирует следующий HTML.

<template> 
    <div> 
    <input class="test-focused"> 
    </div> 
</template> 

<script> 
    export default { 

    } 
</script> 

У меня есть тест для компонента, который выглядит следующим образом.

import Vue from 'vue' 
import { default as MyInput } from 'src/components/my-input.vue' 

describe('my-input.vue',() => { 
    it('should display an input element',() => { 
    const expected = "<input class='test-focused'>" 

    const vm = new Vue({ 
     template: '<div><my-input></my-input></div>', 
     components: { 'my-input': MyInput } 
    }).$mount() 

    // I tried these separately. 
    expect(vm.$el.querySelector('input.test-focused').isPresent()).to.be.true 

    expect(document.getElementsByTagName('input').indexOf(expected) != -1).to.be.true 
    }) 
}) 

Когда я бегу каждый из операторов ожидать() отдельно я undefined is not a constructor.

Похоже, что это простое испытание грязи.

Как правильно проверить существование элемента?

Кроме того, если вы можете указать мне документацию о том, какие методы доступны для vm.$el.querySelector('input.test-focused'), а также, expect() это поможет. Несогласованный синтаксис для жасмина, мокки и других напитков, по-видимому, делает тестирование сложнее, чем нужно toBe() или not.to.be.

Answer 1

Попробуйте это: http://jsfiddle.net/9mdqw53b/

const MyInput = { template: '<input class="test-focused">' } 

describe('my-input.vue',() => { 
    it('should display an input element',() => { 
    const vm = new Vue({ 
     template: '<div><my-input></my-input></div>', 
     components: { MyInput } 
    }).$mount() 

    // I tried these separately. 
    expect(vm.$el.querySelectorAll('input.test-focused').length).toBe(1) 
    }) 
}) 

Answer 2

ожидать (.! VM $ el.querySelector ('input.test-ориентированная') == NULL) .to.be.true