mirror of
https://github.com/nuxt/nuxt.git
synced 2024-11-23 14:15:13 +00:00
Add with-tape example
This commit is contained in:
parent
1b18bc692b
commit
e711e8e431
21
examples/with-tape/package.json
Executable file
21
examples/with-tape/package.json
Executable 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"
|
||||
}
|
||||
}
|
31
examples/with-tape/pages/index.vue
Executable file
31
examples/with-tape/pages/index.vue
Executable 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>
|
43
examples/with-tape/test/index.test.js
Executable file
43
examples/with-tape/test/index.test.js
Executable 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]'
|
||||
)
|
||||
})
|
14
examples/with-tape/test/setup.js
Normal file
14
examples/with-tape/test/setup.js
Normal 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()
|
Loading…
Reference in New Issue
Block a user