mirror of
https://github.com/nuxt/nuxt.git
synced 2024-11-14 01:53:55 +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