fix: show image fallbacks in image gallery modal (#2212)

Author: MartinCupela

src/components/Gallery/ModalGallery.tsx

@@ -1,5 +1,6 @@
 import React, { useMemo } from 'react';
-import ImageGallery from 'react-image-gallery';
+import ImageGallery, { ReactImageGalleryItem } from 'react-image-gallery';
+import { BaseImage } from './BaseImage';
 import { useTranslationContext } from '../../context';
 
 import type { Attachment } from 'stream-chat';
@@ -14,6 +15,16 @@ export type ModalGalleryProps<
   index?: number;
 };
 
+const onError: React.ReactEventHandler<HTMLImageElement> = (e) => {
+  // Prevent having alt attribute on img as the img takes the height of the alt text
+  // instead of the CSS / element width & height when the CSS mask (fallback) is applied.
+  (e.target as HTMLImageElement).alt = '';
+};
+
+const renderItem = ({ original, originalAlt }: ReactImageGalleryItem) => (
+  <BaseImage alt={originalAlt} className='image-gallery-image' onError={onError} src={original} />
+);
+
 export const ModalGallery = <
   StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics
 >(
@@ -38,6 +49,7 @@ export const ModalGallery = <
   return (
     <ImageGallery
       items={formattedArray}
+      renderItem={renderItem}
       showIndex={true}
       showPlayButton={false}
       showThumbnails={false}

src/components/Gallery/__tests__/ModalGallery.test.js

@@ -0,0 +1,40 @@
+import React from 'react';
+import { act, fireEvent, render, screen } from '@testing-library/react';
+import '@testing-library/jest-dom';
+
+import { ModalGallery } from '../ModalGallery';
+import { TranslationProvider } from '../../../context';
+import { generateImageAttachment } from '../../../mock-builders';
+
+const images = Array.from({ length: 3 }, generateImageAttachment);
+
+const t = (val) => val;
+const BASE_IMAGE_TEST_ID = 'str-chat__base-image';
+const getImages = () => screen.queryAllByTestId(BASE_IMAGE_TEST_ID);
+
+const renderComponent = (props = {}) =>
+  render(
+    <TranslationProvider value={{ t }}>
+      <ModalGallery {...props} />
+    </TranslationProvider>,
+  );
+
+describe('ModalGallery', () => {
+  it('uses BaseImage component to display images', () => {
+    const { container } = renderComponent({ images });
+    expect(container.querySelectorAll('.str-chat__base-image')).toHaveLength(images.length);
+  });
+  it('displays image fallback on error', () => {
+    const { container } = renderComponent({ images });
+    const imageElements = getImages();
+    act(() => {
+      imageElements.forEach((element) => fireEvent.error(element));
+    });
+
+    const fallbacks = container.querySelectorAll('.str-chat__base-image--load-failed');
+    expect(fallbacks).toHaveLength(images.length);
+    fallbacks.forEach((fallback) => {
+      expect(fallback.alt).toBe('');
+    });
+  });
+});