Check if element vujs, karma, mocha exists

Question

I am new to testing in Javascript and Vue.js. I installed vue through vue-cli and the full webpack template that Karma, Mocha and PhantomJS are built in. I ran a hello world component component test and it passes.

I have a vuejs component called my-input.vue that generates the following HTML.

 <template> <div> <input class="test-focused"> </div> </template> <script> export default { } </script> 

I have a test for a component that looks like this.

 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 }) }) 

When I run each of the expect () statements separately, I get undefined is not a constructor .

This seems to be a simple pollution test.

How to check the existence of an element?

Also, if you can tell me the documentation about which methods are available for vm.$el.querySelector('input.test-focused') , as well as expect() , this will help. The inconsistent syntax for jasmine, mocha, and other drinks seems to make testing harder than it needs toBe() or not.to.be

Answer 1

Try the following: 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

expect (vm. $ el.querySelector ('input.test-focus')! == null) .to.be.true