Skip to content

Commit

Permalink
Merge pull request nuxt#1910 from ooade/add/with-tape
Browse files Browse the repository at this point in the history
Add with-tape example
  • Loading branch information
Atinux committed Oct 30, 2017
2 parents 2f1d60d + e711e8e commit c688fc0
Show file tree
Hide file tree
Showing 4 changed files with 109 additions and 0 deletions.
21 changes: 21 additions & 0 deletions examples/with-tape/package.json
Original file line number Diff line number Diff line change
@@ -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 changes: 31 additions & 0 deletions examples/with-tape/pages/index.vue
Original file line number Diff line number Diff line change
@@ -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 changes: 43 additions & 0 deletions examples/with-tape/test/index.test.js
Original file line number Diff line number Diff line change
@@ -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 changes: 14 additions & 0 deletions examples/with-tape/test/setup.js
Original file line number Diff line number Diff line change
@@ -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()

0 comments on commit c688fc0

Please sign in to comment.