├── .babelrc ├── .editorconfig ├── .gitignore ├── .travis.yml ├── LICENSE ├── README.md ├── package.json ├── src ├── App.vue ├── components │ ├── Bar.vue │ └── Foo.vue └── main.js ├── test ├── .setup.js ├── Bar.spec.js └── Foo.spec.js └── yarn.lock /.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": ["es2015", "stage-2"] 3 | } 4 | -------------------------------------------------------------------------------- /.editorconfig: -------------------------------------------------------------------------------- 1 | root = true 2 | 3 | [*] 4 | charset = utf-8 5 | indent_style = space 6 | indent_size = 2 7 | end_of_line = lf 8 | insert_final_newline = true 9 | trim_trailing_whitespace = true 10 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | node_modules/ 3 | 4 | # Editor files 5 | /.idea 6 | *.suo 7 | *.ntvs* 8 | *.njsproj 9 | *.sln 10 | 11 | # Log files 12 | *.log 13 | reports 14 | .nyc_output 15 | 16 | # Build 17 | dist 18 | 19 | # Docs 20 | _book 21 | .tmp 22 | tmp* 23 | -------------------------------------------------------------------------------- /.travis.yml: -------------------------------------------------------------------------------- 1 | language: node_js 2 | node_js: 3 | - "6" 4 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | Copyright (c) Edd Yerburgh and other contributors 2 | 3 | Permission is hereby granted, free of charge, to any person 4 | obtaining a copy of this software and associated documentation 5 | files (the "Software"), to deal in the Software without 6 | restriction, including without limitation the rights to use, 7 | copy, modify, merge, publish, distribute, sublicense, and/or sell 8 | copies of the Software, and to permit persons to whom the 9 | Software is furnished to do so, subject to the following 10 | conditions: 11 | 12 | The above copyright notice and this permission notice shall be 13 | included in all copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, 16 | EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES 17 | OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND 18 | NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT 19 | HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, 20 | WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING 21 | FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR 22 | OTHER DEALINGS IN THE SOFTWARE. -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # avoriaz-ava-example 2 | 3 | > an example project using avoriaz and ava to test Vue components 4 | 5 | 6 | ## Installation 7 | 8 | ``` 9 | npm install 10 | ``` 11 | 12 | ## Usage 13 | 14 | ``` 15 | npm test 16 | ``` 17 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "avoriaz-ava-example", 3 | "version": "1.0.0", 4 | "description": "example project using avoriaz with ava-webpack to test Vue.js components", 5 | "main": ".eslintrc.js", 6 | "scripts": { 7 | "lint:fix": "eslint src test --ext .js,.vue -- --fix", 8 | "test": "./node_modules/.bin/nyc ./node_modules/.bin/ava test/*.spec.js", 9 | "report": "./node_modules/.bin/nyc report --reporter=html", 10 | "codecov": "./node_modules/.bin/nyc report --reporter=lcov > coverage.lcov && codecov" 11 | }, 12 | "nyc": { 13 | "exclude": [ 14 | "node_modules" 15 | ], 16 | "extension": [ 17 | ".js", 18 | ".vue" 19 | ] 20 | }, 21 | "ava": { 22 | "require": [ 23 | "./test/.setup.js" 24 | ] 25 | }, 26 | "author": "Edd Yerburgh", 27 | "license": "MIT", 28 | "devDependencies": { 29 | "ava": "^0.21.0", 30 | "avoriaz": "^3.0.0", 31 | "babel-core": "^6.25.0", 32 | "babel-eslint": "^7.2.3", 33 | "babel-loader": "^7.1.1", 34 | "babel-preset-es2015": "^6.24.1", 35 | "babel-preset-stage-2": "^6.24.1", 36 | "browser-env": "^3.1.0", 37 | "codecov": "^2.2.0", 38 | "css-loader": "^0.28.4", 39 | "eslint": "^4.3.0", 40 | "eslint-config-airbnb": "^15.1.0", 41 | "eslint-plugin-html": "^3.1.1", 42 | "eslint-plugin-import": "^2.7.0", 43 | "eslint-plugin-jsx-a11y": "^6.0.2", 44 | "eslint-plugin-react": "^7.1.0", 45 | "nyc": "^11.1.0", 46 | "require-extension-hooks": "^0.3.0", 47 | "require-extension-hooks-babel": "^0.1.1", 48 | "require-extension-hooks-vue": "^0.4.0", 49 | "vue-loader": "^13.0.2", 50 | "vue-template-compiler": "^2.4.2", 51 | "webpack": "^3.4.1" 52 | }, 53 | "dependencies": { 54 | "vue": "^2.4.2" 55 | } 56 | } 57 | -------------------------------------------------------------------------------- /src/App.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | -------------------------------------------------------------------------------- /src/components/Bar.vue: -------------------------------------------------------------------------------- 1 | 13 | 14 | 19 | -------------------------------------------------------------------------------- /src/components/Foo.vue: -------------------------------------------------------------------------------- 1 | 9 | 10 | 31 | -------------------------------------------------------------------------------- /src/main.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue'; 2 | import App from './App.vue'; 3 | 4 | /* eslint-disable no-new */ 5 | new Vue({ 6 | el: '#app', 7 | template: '', 8 | components: { App }, 9 | }); 10 | -------------------------------------------------------------------------------- /test/.setup.js: -------------------------------------------------------------------------------- 1 | require('browser-env')() 2 | 3 | var hooks = require('require-extension-hooks') 4 | 5 | // Setup vue files to be processed by `require-extension-hooks-vue` 6 | hooks('vue').plugin('vue').push() 7 | 8 | // Setup vue and js files to be processed by `require-extension-hooks-babel` 9 | hooks(['vue', 'js']).plugin('babel').push() 10 | -------------------------------------------------------------------------------- /test/Bar.spec.js: -------------------------------------------------------------------------------- 1 | import { mount } from 'avoriaz'; 2 | import test from 'ava'; 3 | import Bar from '../src/components/Bar.vue'; 4 | 5 | test('renders a div with class bar', (t) => { 6 | const wrapper = mount(Bar); 7 | t.true(wrapper.hasClass('bar')); 8 | }); 9 | 10 | test('renders 4 list elements inside .parent-ul', (t) => { 11 | const wrapper = mount(Bar); 12 | const listElements = wrapper.find('.parent-ul li'); 13 | t.is(listElements.length, 4); 14 | }); 15 | 16 | test('renders 2 list elements as direct descendants of .parent-ul', (t) => { 17 | const wrapper = mount(Bar); 18 | const listElements = wrapper.find('.parent-ul > li'); 19 | t.is(listElements.length, 2); 20 | }); 21 | 22 | test('.child-ul has color style set to red', (t) => { 23 | const wrapper = mount(Bar); 24 | const childUl = wrapper.find('.child-ul')[0]; 25 | t.true(childUl.hasStyle('color', 'red')); 26 | }); 27 | -------------------------------------------------------------------------------- /test/Foo.spec.js: -------------------------------------------------------------------------------- 1 | import { mount } from 'avoriaz'; 2 | import test from 'ava'; 3 | import Foo from '../src/components/Foo.vue'; 4 | import Bar from '../src/components/Bar.vue'; 5 | 6 | test('renders an h1', (t) => { 7 | const wrapper = mount(Foo); 8 | const numberOfH1 = wrapper.find('h1').length; 9 | t.is(numberOfH1, 1); 10 | }); 11 | 12 | test('h1 renders data.msg as text', (t) => { 13 | const wrapper = mount(Foo); 14 | const message = wrapper.data().msg; 15 | const h1Text = wrapper.find('h1')[0].text(); 16 | 17 | t.is(h1Text, message); 18 | }); 19 | 20 | test('h1 text changes when button is clicked', (t) => { 21 | const expectedMessage = 'new message'; 22 | 23 | const wrapper = mount(Foo); 24 | const button = wrapper.find('#change-message')[0]; 25 | button.trigger('click'); 26 | const h1Text = wrapper.find('h1')[0].text(); 27 | 28 | t.is(h1Text, expectedMessage); 29 | }); 30 | 31 | test('renders a message that equals prop msg2', (t) => { 32 | const msg2 = 'test message'; 33 | const wrapper = mount(Foo, { propsData: { msg2 } }); 34 | const text = wrapper.find('p')[0].text(); 35 | 36 | t.is(text, msg2); 37 | }); 38 | 39 | test('renders Bar', (t) => { 40 | const wrapper = mount(Foo); 41 | const bar = wrapper.find(Bar)[0]; 42 | t.true(bar.is(Bar)); 43 | }); 44 | --------------------------------------------------------------------------------