✅ Test multiple promises

test/index.spec.js

@@ -5,29 +5,76 @@ import Helper from './utils/Helper'
 const tick = () => new Promise(resolve => setTimeout(resolve, 0))
 
 describe('Promised', () => {
-  let wrapper, promise, resolve, reject
-  beforeEach(async () => {
-    [promise, resolve, reject] = await fakePromise()
-    wrapper = mount(Helper, {
-      propsData: {
-        promise,
-      },
+  let wrapper
+  describe('single promise', () => {
+    let promise, resolve, reject
+    beforeEach(async () => {
+      [promise, resolve, reject] = await fakePromise()
+      wrapper = mount(Helper, {
+        propsData: {
+          promise,
+        },
+      })
     })
-  })
 
-  test('displays a loading screen waiting for the promise', async () => {
-    expect(wrapper.text()).toBe('loading')
-  })
+    test('displays a loading screen waiting for the promise', async () => {
+      expect(wrapper.text()).toBe('loading')
+    })
+
+    test('displays the resolved value once resolved', async () => {
+      resolve('foo')
+      await tick()
+      expect(wrapper.text()).toBe('foo')
+    })
 
-  test('displays the resolved value once resolved', async () => {
-    resolve('foo')
-    await tick()
-    expect(wrapper.text()).toBe('foo')
+    test('displays an error if rejected', async () => {
+      reject(new Error('hello'))
+      await tick()
+      expect(wrapper.text()).toBe('hello')
+    })
   })
 
-  test('displays an error if rejected', async () => {
-    reject(new Error('hello'))
-    await tick()
-    expect(wrapper.text()).toBe('hello')
+  describe('multiple promise', () => {
+    let fakedPromises
+    beforeEach(async () => {
+      fakedPromises = (await Promise.all(
+        Array.from({ length: 3 }, () => fakePromise())
+      )).map(([promise, resolve, reject]) => ({
+        promise,
+        resolve,
+        reject,
+      }))
+
+      const promises = fakedPromises.map(({ promise }) => promise)
+
+      wrapper = mount(Helper, {
+        propsData: {
+          promises,
+        },
+      })
+    })
+
+    test('displays a loading screen while no promise is resolved', async () => {
+      expect(wrapper.text()).toBe('loading')
+    })
+
+    test('displays the resolved values once resolved', async () => {
+      fakedPromises[0].resolve('foo')
+      await tick()
+      expect(wrapper.text()).toBe('foo')
+    })
+
+    test('displays errors if rejected', async () => {
+      fakedPromises[0].reject(new Error('failed'))
+      await tick()
+      expect(wrapper.text()).toBe('failed')
+    })
+
+    test('displays multiple errors if rejected', async () => {
+      fakedPromises[0].reject(new Error('one'))
+      fakedPromises[1].reject(new Error('two'))
+      await tick()
+      expect(wrapper.text()).toBe('one,two')
+    })
   })
 })

test/utils/Helper.vue

@@ -2,9 +2,9 @@
   <Promised v-bind="$props">
     <h1>loading</h1>
     <!-- The default scoped slots will be used as the result -->
-    <h1 slot-scope="data">{{ data }}</h1>
+    <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.message }}</h1>
+    <h1 slot="error" slot-scope="error">{{ error | errorText }}</h1>
   </Promised>
 </template>
 
@@ -13,6 +13,14 @@ 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>