Merge pull request nuxt#1910 from ooade/add/with-tape

Add with-tape example
victorsaly · Oct 30, 2017 · c688fc0 · c688fc0
2 parents 2f1d60d + e711e8e
commit c688fc0
Show file tree

Hide file tree

Showing 4 changed files with 109 additions and 0 deletions.
diff --git a/examples/with-tape/package.json b/examples/with-tape/package.json
@@ -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"
+	}
+}
diff --git a/examples/with-tape/pages/index.vue b/examples/with-tape/pages/index.vue
@@ -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>
diff --git a/examples/with-tape/test/index.test.js b/examples/with-tape/test/index.test.js
@@ -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]'
+	)
+})
diff --git a/examples/with-tape/test/setup.js b/examples/with-tape/test/setup.js
@@ -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()