test(image): add tests for Image component and fix onerror

Author: koca

packages/chakra-ui-core/src/CImage/CImage.js

@@ -55,7 +55,7 @@ const CImage = {
         this.$emit('load', event)
       }
 
-      image.onError = (event) => {
+      image.onerror = (event) => {
         this.hasLoaded = false
         this.$emit('error', event)
       }

packages/chakra-ui-core/src/CImage/tests/CImage.test.js

@@ -0,0 +1,47 @@
+import { CImage } from '../..'
+import { render, wait, waitMs, screen } from '@/tests/test-utils'
+const LOAD_FAILURE_SRC = 'LOAD_FAILURE_SRC'
+const LOAD_SUCCESS_SRC = 'LOAD_SUCCESS_SRC'
+
+beforeAll(() => {
+  process.browser = true // Mock process.browser for CAvatar created()
+})
+
+beforeAll(() => {
+  // Mock Img
+  // eslint-disable-next-line accessor-pairs
+  Object.defineProperty(global.Image.prototype, 'src', {
+    set (src) {
+      if (src === LOAD_FAILURE_SRC) {
+        setTimeout(() => this.onerror(new Error('mocked error')))
+      } else if (src === LOAD_SUCCESS_SRC) {
+        setTimeout(() => this.onload())
+      }
+    }
+  })
+})
+
+const renderComponent = (props) => {
+  const base = {
+    components: { CImage },
+    template: '<CImage alt="Mesut Koca" data-testid="avatar" src="LOAD_SUCCESS_SRC"></CImage>',
+    ...props
+  }
+  return render(base)
+}
+
+it('should render correctly', async () => {
+  const { asFragment } = renderComponent()
+
+  await waitMs() // wait for img.onsuccess to be called.
+
+  expect(asFragment()).toMatchSnapshot()
+})
+
+it('fallback src works', async () => {
+  renderComponent({ template: '<CImage alt="Mesut Koca" src="LOAD_FAILURE_SRC" fallback-src="LOAD_FALLBACK_SRC" />' })
+
+  await wait(() => {
+    expect(screen.getByAltText(/Mesut Koca/i)).toHaveAttribute('src', 'LOAD_FALLBACK_SRC')
+  })
+})

packages/chakra-ui-core/src/CImage/tests/__snapshots__/CImage.test.js.snap

@@ -0,0 +1,13 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`should render correctly 1`] = `
+<DocumentFragment>
+  <img
+    alt="Mesut Koca"
+    class="css-fzcsno"
+    data-chakra-component="CImage"
+    data-testid="avatar"
+    src="LOAD_SUCCESS_SRC"
+  />
+</DocumentFragment>
+`;