From f5b237adc2db53ccc2aac4c24042ad617d0d2ba9 Mon Sep 17 00:00:00 2001
From: Blake Newman <blake.newman@sainsburys.co.uk>
Date: Tue, 18 Apr 2017 11:07:05 +0100
Subject: [PATCH] [Feature] Add vue.js recipe

---
 docs/recipes/vue.md | 72 +++++++++++++++++++++++++++++++++++++++++++++
 readme.md           |  1 +
 2 files changed, 73 insertions(+)
 create mode 100644 docs/recipes/vue.md

diff --git a/docs/recipes/vue.md b/docs/recipes/vue.md
new file mode 100644
index 000000000..cd751e7a7
--- /dev/null
+++ b/docs/recipes/vue.md
@@ -0,0 +1,72 @@
+# Testing Vue.js components
+
+## Dependencies
+
+- [Require Extension hooks](https://github.com/jackmellis/require-extension-hooks):
+  - `npm i -D require-extension-hooks require-extension-hooks-vue require-extension-hooks-babel`
+
+- [browser-env](browser-testing.md)
+  - `npm i -D browser-env`
+
+## Setup
+
+The first step is setting up a helper to configure the environment to transpile `.vue` files and run in a browser like environment:
+
+```json
+{
+  "ava": {
+    "babel": "inherit",
+    "require": [
+      "./test/helpers/setup.js"
+    ]
+  }
+}
+```
+
+```js
+// ./test/helpers/setup.js
+
+// Setup browser environment
+require('browser-env')();
+const hooks = require('require-extension-hooks');
+const Vue = require('vue');
+
+// Setup Vue.js to remove production tip
+Vue.config.productionTip = false;
+
+// 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();
+```
+
+You can find more information about setting up Babel with AVA in the [babelrc recipe](babelrc.md).
+
+## Sample snapshot test
+
+```js
+import test from 'ava';
+import Vue from 'vue';
+import Component from 'component.vue';
+
+test('renders', t => {
+	const vm = new Vue(Component).$mount();
+	const tree = { $el: vm.$el.outerHTML };
+	t.snapshot(tree);
+});
+```
+
+## Coverage reporting
+
+Follow the [coverage reporting recipe](code-coverage.md), additionally adding the `.vue` extension to the nyc configuration to instrument `.vue` files.
+
+```json
+{
+  "nyc": {
+    "extension": [
+      ".js",
+      ".vue"
+    ]
+  }
+}
+```
diff --git a/readme.md b/readme.md
index 0bc5747cc..fa8693046 100644
--- a/readme.md
+++ b/readme.md
@@ -1158,6 +1158,7 @@ It's the [Andromeda galaxy](https://simple.wikipedia.org/wiki/Andromeda_galaxy).
 - [TypeScript](docs/recipes/typescript.md)
 - [Configuring Babel](docs/recipes/babelrc.md)
 - [Testing React components](docs/recipes/react.md)
+- [Testing Vue.js components](docs/recipes/vue.md)
 - [JSPM and SystemJS](docs/recipes/jspm-systemjs.md)
 - [Debugging tests with Chrome DevTools](docs/recipes/debugging-with-chrome-devtools.md)
 - [Debugging tests with WebStorm](docs/recipes/debugging-with-webstorm.md)