feat(ImgLoader): add 'onError' prop

test for 'onerror' event

src/app/components/shared/ImgLoader/ImgLoader.js

@@ -6,19 +6,26 @@ import Spinner from '@/components/base/Spinner/Spinner';
 import './ImgLoader.scss';
 
 type PropsType = {
-  src: string
+  src?: string,
+  onError: (error: Error) => void
 };
 
-function ImgLoader({ src }: PropsType) {
+function ImgLoader({ src, onError }: PropsType) {
   const [imgObj, setImg] = useState({ img: null, isLoading: true });
   const image = new Image();
 
-  image.onload = () => setImg({ img: image.src, isLoading: false });
+  image.onload = (): void => setImg({ img: image.src, isLoading: false });
+  image.onerror = (error: Error): void => onError(error);
+  // $FlowIgnore
   image.src = src;
 
   return (
     imgObj.isLoading ? (<Spinner />) : (<img className="imgLoader img-fluid" src={imgObj.img} alt="img" />)
   );
 }
 
+ImgLoader.defaultProps = {
+  onError: () => {},
+};
+
 export default ImgLoader;

src/app/components/shared/ImgLoader/ImgLoader.test.js

@@ -1,13 +1,55 @@
 // @flow strict
-
 import React from 'react';
-import { shallow } from 'enzyme';
+import { act } from 'react-dom/test-utils';
+// $FlowFixMe
+import { render } from 'react-testing-library';
 
 import ImgLoader from './ImgLoader';
 
 describe('ImgLoader', () => {
-  it('tests something', () => {
-    const src = 'https://static.street-beat.ru/upload/resize_cache/iblock/d69/450_450_1/d699afc7b3428f2f51c2f2de6665b506.jpg';
-    shallow(<ImgLoader src={src} />);
+  const imgUrl = 'https://static.street-beat.ru/upload/resize_cache/iblock/d69/450_450_1/d699afc7b3428f2f51c2f2de6665b506.jpg';
+  /**
+   * @link https://stackoverflow.com/questions/44462665/how-do-you-use-jest-to-test-img-onerror
+   */
+  beforeAll(() => {
+    // Mocking Image.prototype.src to call the onload or onerror
+    // $FlowIgnoreMe
+    Object.defineProperty(global.Image.prototype, 'src', {
+      // Define the property setter
+      set(src) {
+
+        if (src === undefined) {
+          // Call with setTimeout to simulate async loading
+          setTimeout(() => this.onerror(new Error('mocked error')));
+        } else if (src === imgUrl) {
+          setTimeout(() => this.onload());
+        }
+      },
+    });
+  });
+
+  it('calls onError when there\'s not "src"', (done) => {
+    const onError = evt => {
+      expect(evt).toBeInstanceOf(Error);
+      done();
+    };
+    render(<ImgLoader onError={onError} />);
+  });
+
+  let containerParent = document.createElement('div');
+
+  it('should render <Spinner/> while loading', () => {
+    let container;
+    act(() => {
+      const result = render(<ImgLoader src={imgUrl} />, {
+        container: document.body.appendChild(containerParent),
+      });
+      container = result.container;
+    });
+
+    const spinner = container.firstChild;
+
+    expect(spinner.className).toEqual('spinner');
   });
+
 });