Add with-tape example

This commit is contained in:
Ademola Adegbuyi 2017-10-20 13:31:29 +01:00
parent 1b18bc692b
commit e711e8e431
4 changed files with 109 additions and 0 deletions

21
examples/with-tape/package.json Executable file
View File

@ -0,0 +1,21 @@
{
"name": "nuxt-with-tape",
"scripts": {
"dev": "nuxt",
"build": "nuxt build",
"start": "nuxt start",
"test": "tape ./test/**/*.js -r ./test/setup.js | tap-spec"
},
"devDependencies": {
"browser-env": "^3.2.1",
"require-extension-hooks": "^0.3.2",
"require-extension-hooks-babel": "^0.1.1",
"require-extension-hooks-vue": "^0.4.1",
"tap-spec": "^4.1.1",
"tape": "^4.8.0",
"vue-test-utils": "^1.0.0-beta.2"
},
"dependencies": {
"nuxt": "latest"
}
}

View File

@ -0,0 +1,31 @@
<template>
<div>
<h1 :class="className">Hello {{ name }}!</h1>
<button @click="changeColor()"> Change h1 Color </button>
</div>
</template>
<script>
export default {
data() {
return { name: 'world', className: 'red' }
},
methods: {
changeColor() {
this.className = this.className === 'red' ? 'blue' : 'green'
}
}
}
</script>
<style>
.red {
color: red;
}
.blue {
color: blue;
}
.green {
color: green;
}
</style>

View File

@ -0,0 +1,43 @@
import test from 'tape'
import { shallow } from 'vue-test-utils'
import Index from '../pages/index.vue'
test('renders Index.vue correctly', t => {
t.plan(4)
const wrapper = shallow(Index, {
data: {
name: 'nuxt'
}
})
const button = wrapper.find('button')
t.equal(
wrapper.find('h1').text(),
'Hello nuxt!',
'renders "Hello nuxt!" text'
)
t.equal(
wrapper.find('h1').hasClass('red'),
true,
'h1 has a red class [default]'
)
button.trigger('click')
t.equal(
wrapper.find('h1').hasClass('blue'),
true,
'h1 class changes to blue [after 1st click]'
)
button.trigger('click')
t.equal(
wrapper.find('h1').hasClass('green'),
true,
'h1 class changes to green [after 2nd click]'
)
})

View File

@ -0,0 +1,14 @@
const hooks = require('require-extension-hooks')
// Setup browser environment
require('browser-env')()
// Setup vue files to be processed by `require-extension-hooks-vue`
hooks('vue')
.plugin('vue')
.push()
// Setup vue and js files to be processed by `require-extension-hooks-babel`
hooks(['vue', 'js'])
.plugin('babel')
.push()