More tests.

Author: knpwrs

package.json

@@ -38,6 +38,7 @@
     "eslint-config-airbnb-base": "^11.1.0",
     "eslint-plugin-html": "^2.0.0",
     "eslint-plugin-import": "^2.2.0",
+    "p-immediate": "^2.1.0",
     "vue": "^2.1.10",
     "vue-loader": "^10.3.0",
     "vue-template-compiler": "^2.1.10",

test/index.test.js

@@ -1,15 +1,29 @@
+/* eslint-disable no-underscore-dangle */
 import _ from 'lodash';
 import Vue from 'vue';
 import test from 'ava';
+import nextTick from 'p-immediate';
 import TestComponent from './test.vue';
 
-test('works like it does in a browser', (t) => {
-  const Constructor = Vue.extend(TestComponent);
-  const vm = new Constructor().$mount();
-  t.is(vm.$el.querySelector('h1').textContent, 'Hello, World!');
+test('has a created hook', (t) => {
+  t.true(_.isFunction(TestComponent.created));
 });
 
 test('sets default data', (t) => {
   t.true(_.isFunction(TestComponent.data));
-  t.deepEqual(TestComponent.data(), { name: 'World' });
+  t.deepEqual(TestComponent.data(), { name: 'Test' });
+});
+
+test('renders the correct message', async (t) => {
+  const Constructor = Vue.extend(TestComponent);
+  const vm = new Constructor().$mount();
+  t.is(vm.$el.querySelector('h1').textContent, 'Hello, World!');
+  // Update
+  vm.setName('Foo');
+  await nextTick();
+  t.is(vm.$el.querySelector('h1').textContent, 'Hello, Foo!');
+  // Update directly 👻
+  vm._data.name = 'Bar';
+  await nextTick();
+  t.is(vm.$el.querySelector('h1').textContent, 'Hello, Bar!');
 });

test/test.vue

@@ -10,9 +10,17 @@ import _ from 'lodash';
 export default {
   data() {
     return {
-      name: _.capitalize('world'),
+      name: _.capitalize('test'),
     };
   },
+  created() {
+    this.name = 'World';
+  },
+  methods: {
+    setName(name) {
+      this.name = name;
+    },
+  },
 };
 </script>