test(image+avatar+avatargroup): mock onload implementation

Author: codebender828

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

@@ -249,7 +249,8 @@ const CAvatar = {
             h: '100%',
             rounded: 'full',
             objectFit: 'cover',
-            alt: this.name
+            alt: this.name,
+            src: this.src
           },
           domProps: {
             src: this.src

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

@@ -12,6 +12,9 @@ beforeAll(() => {
   // eslint-disable-next-line accessor-pairs
   Object.defineProperty(global.Image.prototype, 'src', {
     set (src) {
+      // Mock the Image.prototype.onload/onerror implementations
+      this.onload = jest.fn().mockImplementation(fn => fn)
+      this.onerror = jest.fn().mockImplementation(err => err)
       if (src === LOAD_FAILURE_SRC) {
         setTimeout(() => this.onerror(new Error('mocked error')))
       } else if (src === LOAD_SUCCESS_SRC) {

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

@@ -8,12 +8,12 @@ exports[`Avatar with AvatarBadge renders correctly 1`] = `
   >
     <img
       alt="Mesut Koca"
-      class="css-58rle2"
+      class="css-6qjm3j"
       data-chakra-component="CBox"
       src="LOAD_SUCCESS_SRC"
     />
     <div
-      class="css-mwkd9l"
+      class="css-bruuz9"
       data-chakra-component="CAvatarBadge"
     />
   </div>
@@ -27,13 +27,13 @@ exports[`renders an image 1`] = `<DocumentFragment />`;
 exports[`should render correctly 1`] = `
 <DocumentFragment>
   <div
-    class="css-2sxxyf"
+    class="css-1sovlky"
     data-chakra-component="CAvatar"
     data-testid="avatar"
   >
     <img
       alt="Mesut Koca"
-      class="css-58rle2"
+      class="css-6qjm3j"
       data-chakra-component="CBox"
       src="LOAD_SUCCESS_SRC"
     />

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

@@ -13,6 +13,9 @@ beforeAll(() => {
   // eslint-disable-next-line accessor-pairs
   Object.defineProperty(global.Image.prototype, 'src', {
     set (src) {
+      // Mock the Image.prototype.onload/onerror implementations
+      this.onload = jest.fn().mockImplementation(fn => fn)
+      this.onerror = jest.fn().mockImplementation(err => err)
       if (src === LOAD_FAILURE_SRC) {
         setTimeout(() => this.onerror(new Error('mocked error')))
       } else if (src === LOAD_SUCCESS_SRC) {

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

@@ -54,7 +54,7 @@ exports[`should render correctly 1`] = `
     >
       <img
         alt="Mesut Koca"
-        class="css-58rle2"
+        class="css-6qjm3j"
         data-chakra-component="CBox"
         src="LOAD_SUCCESS_SRC"
       />
@@ -65,7 +65,7 @@ exports[`should render correctly 1`] = `
     >
       <img
         alt="Evan You"
-        class="css-58rle2"
+        class="css-6qjm3j"
         data-chakra-component="CBox"
         src="LOAD_SUCCESS_SRC"
       />

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

@@ -76,9 +76,9 @@ const CImage = {
     return h(CNoSsr, [
       h('img', {
         class: this.className,
-        domProps: {
-          ...imageProps
-        },
+        // domProps: {
+        //   ...imageProps
+        // },
         attrs: {
           ...imageProps,
           ...this.computedAttrs,

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

@@ -12,6 +12,9 @@ beforeAll(() => {
   // eslint-disable-next-line accessor-pairs
   Object.defineProperty(global.Image.prototype, 'src', {
     set (src) {
+      // Mock the Image.prototype.onload/onerror implementations
+      this.onload = jest.fn().mockImplementation(fn => fn)
+      this.onerror = jest.fn().mockImplementation(err => err)
       if (src === LOAD_FAILURE_SRC) {
         setTimeout(() => this.onerror(new Error('mocked error')))
       } else if (src === LOAD_SUCCESS_SRC) {

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

@@ -1,5 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`fallback src works 1`] = `<DocumentFragment />`;
+
 exports[`should render correctly 1`] = `
 <DocumentFragment>
   <img