1. avoriaz
a Vue.js testing utility library
avoriaz
Package: avoriaz
Created by: eddyerburgh
Last modified: Mon, 13 Jun 2022 03:52:21 GMT
Version: 6.3.0
License: MIT
Downloads: 5,306
Repository: https://github.com/eddyerburgh/avoriaz

Install

npm install avoriaz
yarn add avoriaz

avoriaz Build Status

a Vue.js testing utility library

Deprecation

This library will be deprecated once vue-test-utils is released.

Installation

npm install --save-dev avoriaz

Documentation

Visit the docs

Examples

Assert wrapper contains a child
 import { mount } from 'avoriaz'
import Foo from './Foo.vue'

const wrapper = mount(Foo)
expect(wrapper.contains('.bar')).to.equal(true)
Shallow render components
 import { shallow } from 'avoriaz'
import Foo from './Foo.vue'
import Bar from './Bar.vue'

const wrapper = shallow(Foo)
expect(wrapper.contains(Bar)).to.equal(true)
Assert style is rendered
 const button = wrapper.find('div > button .button-child')[0]
expect(button.hasStyle('color', 'red')).to.equal(true)
Assert method is called when DOM event is triggered
 const clickHandler = sinon.stub()
const wrapper = mount(Foo, {
  propsData: { clickHandler }
})
wrapper.find('div .bar')[0].trigger('click')
expect(clickHandler.called).to.equal(true)
Assert wrapper contains text
 const title = wrapper.find('h1.title')[0]
expect(title.text()).to.equal('some text')
Inject globals
 const $route = { path: 'http://www.example-path.com' }
const wrapper = mount(Foo, { 
    globals: {
        $route
    }
})
expect(wrapper.vm.$route.path).to.equal($route.path)
Inject slots
 const wrapper = mount(Foo, { 
    slots: {
        default: Foo
    }
})
Set data
 wrapper.setData({
  someData: 'some data'
})

expect(wrapper.vm.someData).to.equal('some data')
Update props
 wrapper.setProps({
  someProp: 'some prop',
  anotherProp: 'another prop'
})

For more examples, see the docs

Dependencies

RELATED POST

Enhancing Vue.js Development: Harnessing the Potential of Vue-Loader

Enhancing Vue.js Development: Harnessing the Potential of Vue-Loader

Simplify Data Validation in Vue.js: A Step-by-Step Guide to Using Regex

Simplify Data Validation in Vue.js: A Step-by-Step Guide to Using Regex

Troubleshooting Made Easy: Common Issues and Solutions with vue-loader Without vue-cli

Troubleshooting Made Easy: Common Issues and Solutions with vue-loader Without vue-cli

Optimizing Webpack 4 with Vue CLI 3: Disabling the Cache-Loader

Optimizing Webpack 4 with Vue CLI 3: Disabling the Cache-Loader

Step-by-Step Guide: How to Add a Function to Your Vuex Plugin

Step-by-Step Guide: How to Add a Function to Your Vuex Plugin