starting

Author: Andy

db.json

@@ -0,0 +1,3 @@
+{
+  "message": { "text": "Hello from the db!" }
+}

package-lock.json

@@ -9,6 +9,7 @@
     "lint": "vue-cli-service lint"
   },
   "dependencies": {
+    "axios": "^0.21.1",
     "core-js": "^3.6.5",
     "vue": "^3.0.0",
     "vue-router": "^4.0.0-0",
@@ -30,6 +31,7 @@
     "eslint-plugin-vue": "^7.0.0-0",
     "prettier": "^1.19.1",
     "typescript": "~3.9.3",
-    "vue-jest": "^5.0.0-0"
+    "vue-jest": "^5.0.0-0",
+    "flush-promises": "^1.0.2"
   }
 }

package.json

@@ -0,0 +1,24 @@
+<template>
+  <p v-if="error" data-testid="message-error">{{ error }}</p>
+  <p v-else data-testid="message">{{ message.text }}</p>
+</template>
+
+<script>
+import { getMessage } from '@/services/axios.js'
+
+export default {
+  data() {
+    return {
+      message: {},
+      error: null
+    }
+  },
+  async created() {
+    try {
+      this.message = await getMessage()
+    } catch (err) {
+      this.error = 'Oops! Something went wrong.'
+    }
+  }
+}
+</script>

src/components/MessageDisplay.vue

@@ -0,0 +1,7 @@
+import axios from 'axios'
+
+export function getMessage() {
+  return axios.get('http://localhost:3000/message').then(response => {
+    return response.data
+  })
+}

src/services/axios.js

@@ -0,0 +1,20 @@
+import MessageDisplay from '@/components/MessageDisplay'
+import { mount } from '@vue/test-utils'
+
+describe('MessageDisplay', () => {
+  it('Calls getMessage and displays message', async () => {
+    // mock the API call
+    const wrapper = mount(MessageDisplay)
+    // wait for promise to resolve
+    // check that call happened once
+    // check that component displays message
+  })
+
+  it('Displays an error when getMessage call fails', async () => {
+    // mock the failed API call
+    const wrapper = mount(MessageDisplay)
+    // wait for promise to resolve
+    // check that call happened once
+    // check that component displays error
+  })
+})