✨ Display errors when no slots are provided

src/index.js

@@ -1,3 +1,5 @@
+import { assert } from './util'
+
 export default {
   name: 'Promised',
   props: {
@@ -13,10 +15,22 @@ export default {
 
   render (h) {
     if (this.error instanceof Error || (this.error && this.error.length)) {
+      assert(
+        this.$scopedSlots && this.$scopedSlots.error,
+        'Provide exactly one scoped slot named "error" for the rejected promise'
+      )
       return this.$scopedSlots.error(this.error)
     } else if (this.resolved) {
+      assert(
+        this.$scopedSlots && this.$scopedSlots.default,
+        'Provide exactly one default scoped slot for the resolved promise'
+      )
       return this.$scopedSlots.default(this.data)
-    } else if (this.$slots.default && this.$slots.default.length > 0) {
+    } else {
+      assert(
+        this.$slots.default && this.$slots.default.length === 1,
+        'Provide exactly one default slot with no `slot-scope` for the pending promise'
+      )
       return this.$slots.default[0]
     }
   },

src/util.js

@@ -0,0 +1,5 @@
+export function assert (condition, message) {
+  if (!condition) {
+    throw new Error(`[vue-promised] ${message}`)
+  }
+}

test/index.spec.js

@@ -1,6 +1,9 @@
 import { mount } from '@vue/test-utils'
 import fakePromise from 'faked-promise'
 import Helper from './utils/Helper'
+import NoError from './utils/NoError'
+import NoResolve from './utils/NoResolve'
+import NoPending from './utils/NoPending'
 
 const tick = () => new Promise(resolve => setTimeout(resolve, 0))
 
@@ -53,11 +56,13 @@ describe('Promised', () => {
   describe('multiple promise', () => {
     let fakedPromises
     beforeEach(async () => {
-      fakedPromises = Array.from({ length: 3 }, () => fakePromise()).map(([promise, resolve, reject]) => ({
-        promise,
-        resolve,
-        reject,
-      }))
+      fakedPromises = Array.from({ length: 3 }, () => fakePromise()).map(
+        ([promise, resolve, reject]) => ({
+          promise,
+          resolve,
+          reject,
+        })
+      )
 
       const promises = fakedPromises.map(({ promise }) => promise)
 
@@ -107,4 +112,54 @@ describe('Promised', () => {
       expect(wrapper.text()).toBe('loading')
     })
   })
+
+  describe('errors', () => {
+    let promise, resolve, reject, errorSpy
+    beforeEach(() => {
+      // silence the log
+      errorSpy = jest.spyOn(console, 'error').mockImplementation(() => {
+        // useful for debugging
+        // console.log('CONSOLE ERROR')
+      })
+      ;[promise, resolve, reject] = fakePromise()
+    })
+
+    afterEach(() => {
+      errorSpy.mockRestore()
+    })
+
+    test('throws if no error scoped slot provided on error', async () => {
+      wrapper = mount(NoError, {
+        propsData: {
+          promise,
+        },
+      })
+      expect(errorSpy).not.toHaveBeenCalled()
+      reject(new Error('nope'))
+      await tick()
+      expect(errorSpy).toHaveBeenCalledTimes(2)
+    })
+
+    test('throws if no default scoped slot provided on resolve', async () => {
+      wrapper = mount(NoResolve, {
+        propsData: {
+          promise,
+        },
+      })
+      expect(errorSpy).not.toHaveBeenCalled()
+      resolve()
+      await tick()
+      expect(errorSpy).toHaveBeenCalledTimes(2)
+    })
+
+    test('throws if no default slot provided while pending', async () => {
+      expect(errorSpy).not.toHaveBeenCalled()
+      wrapper = mount(NoPending, {
+        propsData: {
+          promise,
+        },
+      })
+      expect(errorSpy).toHaveBeenCalledTimes(2)
+    })
+  })
 })

test/utils/NoError.vue

@@ -0,0 +1,21 @@
+<template>
+  <Promised v-bind="$props">
+    <h1>loading</h1>
+    <!-- The default scoped slots will be used as the result -->
+    <h1 slot-scope="data">{{ data | text }}</h1>
+  </Promised>
+</template>
+
+<script>
+import Promised from '../../src'
+
+export default {
+  props: ['promise', 'promises'],
+  filters: {
+    text(data) {
+      return Array.isArray(data) ? data.join(',') : data
+    },
+  },
+  components: { Promised },
+}
+</script>

test/utils/NoPending.vue

@@ -0,0 +1,25 @@
+<template>
+  <Promised v-bind="$props">
+    <!-- The default scoped slots will be used as the result -->
+    <h1 slot-scope="data">{{ data | text }}</h1>
+    <!-- The 'error' named scoped slots will be used if there is an error -->
+    <h1 slot="error" slot-scope="error">{{ error | errorText }}</h1>
+  </Promised>
+</template>
+
+<script>
+import Promised from '../../src'
+
+export default {
+  props: ['promise', 'promises'],
+  filters: {
+    text(data) {
+      return Array.isArray(data) ? data.join(',') : data
+    },
+    errorText(data) {
+      return Array.isArray(data) ? data.map(e => e.message).join(',') : data.message
+    },
+  },
+  components: { Promised },
+}
+</script>

test/utils/NoResolve.vue

@@ -0,0 +1,24 @@
+<template>
+  <Promised v-bind="$props">
+    <h1>loading</h1>
+    <!-- The 'error' named scoped slots will be used if there is an error -->
+    <h1 slot="error" slot-scope="error">{{ error | errorText }}</h1>
+  </Promised>
+</template>
+
+<script>
+import Promised from '../../src'
+
+export default {
+  props: ['promise', 'promises'],
+  filters: {
+    text(data) {
+      return Array.isArray(data) ? data.join(',') : data
+    },
+    errorText(data) {
+      return Array.isArray(data) ? data.map(e => e.message).join(',') : data.message
+    },
+  },
+  components: { Promised },
+}
+</script>