test: add test for load and error events (#841)

playground/layouts/default.vue

@@ -11,6 +11,9 @@
         <NuxtLink to="/picture">
           NuxtPicture
         </NuxtLink>
+        <NuxtLink to="/events">
+          Events
+        </NuxtLink>
       </li>
       <li>
         <ProviderSelector />

playground/pages/events.vue

@@ -0,0 +1,45 @@
+<template>
+  <div>
+    <h1>Original</h1>
+    <nuxt-img
+      src="/images/colors.jpg"
+      width="500"
+      height="500"
+      @load="() => { console.log('Image was loaded') }"
+    />
+    <nuxt-picture
+      src="/images/colors.jpg"
+      width="500"
+      height="500"
+      @load="() => { console.log('Image was loaded') }"
+    />
+
+    <h1>Placeholder</h1>
+    <nuxt-img
+      :src="src"
+      placeholder
+      width="500"
+      height="500"
+      @load="() => { console.log('Image was loaded') }"
+    />
+    <nuxt-picture
+      :src="src"
+      placeholder
+      width="500"
+      height="500"
+      @load="() => { console.log('Image was loaded') }"
+    />
+
+    <h1>404</h1>
+    <nuxt-img
+      :src="'nonexistent' + src"
+      width="500"
+      height="500"
+      @error="() => { console.log('Error loading image') }"
+    />
+  </div>
+</template>
+
+<script setup lang="ts">
+const src = 'https://images.unsplash.com/photo-1497215728101-856f4ea42174?ixlib=rb-1.2.1&ixid=MnwxMjA3fDF8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1740&q=80'
+</script>

test/e2e/no-ssr.test.ts

@@ -39,12 +39,18 @@ describe('browser (ssr: false)', () => {
 
     expect(requests.map(r => r.replace(url('/'), '/')).filter(r => r !== providerPath && !r.match(/\.(js|css)/))).toMatchSnapshot()
   })
+})
+
+describe('browser (ssr: false) common', () => {
+  it('should emit load and error events', async () => {
+    const page = await createPage(url('/events'))
+    const logs: string[] = []
+
+    page.on('console', (msg) => { logs.push(msg.text()) })
 
-  it.todo('should emit load event', async () => {
-    // await page.waitForEvent('console', (msg) => {
-    //   expect(msg.text()).toBe('Image was loaded.')
+    await page.waitForLoadState('networkidle')
 
-    //   return true
-    // })
+    expect(logs.filter(log => log === 'Image was loaded').length).toBe(4)
+    expect(logs.filter(log => log === 'Error loading image').length).toBe(1)
   })
 })