Update to current API

Author: dfcook

package.json

@@ -4,7 +4,7 @@
   "description": "Simple and completed Vue DOM testing utilities that encourage good testing practices.",
   "main": "src/index.js",
   "scripts": {
-    "test": "jest --verbose"
+    "test": "jest --verbose --watch"
   },
   "author": "Daniel Cook",
   "license": "MIT",
@@ -17,12 +17,14 @@
     "babel-plugin-transform-runtime": "^6.23.0",
     "babel-preset-env": "^1.6.1",
     "jest": "^22.4.2",
+    "jest-in-case": "^1.0.2",
     "jest-serializer-vue": "^1.0.0",
     "vue": "^2.5.16",
     "vue-jest": "^2.2.1",
     "vue-router": "^3.0.1",
     "vue-template-compiler": "^2.5.16",
-    "vuex": "^3.0.1"
+    "vuex": "^3.0.1",
+    "wait-for-expect": "^0.4.0"
   },
   "jest": {
     "moduleDirectories": [
@@ -33,6 +35,10 @@
       "js",
       "vue"
     ],
+    "testPathIgnorePatterns": [
+      "/node_modules/",
+      "<rootDir>/src/__tests__/components/"
+    ],
     "transform": {
       "^.+\\.js$": "<rootDir>/node_modules/babel-jest",
       ".*\\.(vue)$": "<rootDir>/node_modules/vue-jest"

src/Simulate.js

@@ -1,7 +1,24 @@
 export default {
-  click(elem) {        
-    if (elem) {      
-      elem.click()
+  click(elem) {
+    if (elem) {
+      if (elem.trigger) {
+        elem.trigger('submit')
+      }
+
+      if (elem.click) {
+        elem.click()
+      }
+    }
+  },
+  submit(elem) {
+    if (elem) {
+      if (elem.trigger) {
+        elem.trigger('submit')
+      }
+
+      if (elem.submit) {
+        elem.submit()
+      }
     }
   }
 }

src/__tests__/__snapshots__/element-queries.js.snap

@@ -0,0 +1,15 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`get throws a useful error message 1`] = `"Unable to find a label with the text of: LucyRicardo"`;
+
+exports[`get throws a useful error message 2`] = `"Unable to find an element with the placeholder text of: LucyRicardo"`;
+
+exports[`get throws a useful error message 3`] = `"Unable to find an element with the text: LucyRicardo. This could be because the text is broken up by multiple elements. In this case, you can provide a function for your text matcher to make your matcher more flexible."`;
+
+exports[`get throws a useful error message 4`] = `"Unable to find an element by: [data-testid=\\"LucyRicardo\\"]"`;
+
+exports[`get throws a useful error message 5`] = `"Unable to find an element with the alt text: LucyRicardo"`;
+
+exports[`label with no form control 1`] = `"Found a label with the text of: alone, however no form control was found associated to that label. Make sure you're using the \\"for\\" attribute or \\"aria-labelledby\\" attribute correctly."`;
+
+exports[`totally empty label 1`] = `"Found a label with the text of: , however no form control was found associated to that label. Make sure you're using the \\"for\\" attribute or \\"aria-labelledby\\" attribute correctly."`;

src/__tests__/components/EndToEnd.vue

@@ -0,0 +1,36 @@
+<template>
+  <div v-if="loading">
+    Loading...
+  </div>
+  <div v-else data-testid="message">
+    Loaded this message: {{ data.returnedMessage }}
+  </div>
+</template>
+
+<script>
+const fetchAMessage = () =>
+  new Promise(resolve => {
+    // we are using random timeout here to simulate a real-time example
+    // of an async operation calling a callback at a non-deterministic time
+    const randomTimeout = Math.floor(Math.random() * 100)
+    setTimeout(() => {
+      resolve({returnedMessage: 'Hello World'})
+    }, randomTimeout)
+  })
+
+export default {
+  data () {
+    return {
+      loading: true,
+      data: {
+        returnedMessage: null
+      }
+    }
+  },
+  async mounted () {
+    const data = await fetchAMessage()
+    this.loading = false
+    this.data = data
+  }
+}
+</script>

src/__tests__/components/Login.vue

@@ -0,0 +1,43 @@
+<template>
+  <div>
+    <form @submit.prevent="submit">
+      <label for="username-input">Username</label>
+      <input v-model="username" id="username-input" placeholder="Username..." name="username" />
+      <label id="password-label">Password</label>
+      <input
+        v-model="password"
+        placeholder="Password..."
+        type="password"
+        name="password"
+        aria-labelledby="password-label"
+      />
+      <button type="submit">Submit</button>
+    </form>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    onSubmit: {
+      type: Function,
+      required: true
+    }
+  },
+  data () {
+    return {
+      username: '',
+      password: ''
+    }
+  },
+  methods: {
+    submit () {
+      this.onSubmit({
+        username: this.username,
+        password: this.password
+      })
+    }
+  }
+}
+</script>
+

src/__tests__/components/Router/App.vue

@@ -12,7 +12,7 @@
 </template>
 
 <script>
-import LocationDisplay from './LocationDisplay.vue'
+import LocationDisplay from './LocationDisplay'
 
 export default {
   components: {

src/__tests__/components/Router/Home.vue

@@ -1,3 +1,3 @@
-<template functional>
+<template>
   <div>You are home</div>
 </template>

src/__tests__/components/TextMatchers.vue

@@ -0,0 +1,3 @@
+<template>
+  <a href="/about" id="anchor">About</a>
+</template>

src/__tests__/components/VuexTest.vue

@@ -2,13 +2,9 @@
   <div>
     <h2>Counter</h2>
     <div>
-      <button @click="decrement" data-testid="decrementer">
-        -
-      </button>
+      <button @click="decrement" data-testid="decrementer">-</button>
       <span data-testid="count-value">{{ count }}</span>
-      <button @click="increment" data-testid="incrementer">
-        +
-      </button>
+      <button @click="increment" data-testid="incrementer">+</button>
     </div>
   </div>
 </template>

src/__tests__/components/queries/AltText.vue

@@ -0,0 +1,3 @@
+<template>
+  <span data-testid="count-value">2</span>
+</template>