From 8a828cf0935e214b8f04b46dff0594c058b06b44 Mon Sep 17 00:00:00 2001
From: Brian Smith <112954497+brian-smith-tcril@users.noreply.github.com>
Date: Thu, 12 Dec 2024 10:53:03 -0500
Subject: [PATCH] feat: use data uri for card fallback image (#3323)

---
 src/Card/CardFallbackDefaultImage.js |   1 +
 src/Card/CardImageCap.jsx            |   2 +-
 src/Card/fallback-default.png        | Bin 613 -> 0 bytes
 src/Card/tests/CardImageCap.test.jsx |   6 +++---
 4 files changed, 5 insertions(+), 4 deletions(-)
 create mode 100644 src/Card/CardFallbackDefaultImage.js
 delete mode 100644 src/Card/fallback-default.png

diff --git a/src/Card/CardFallbackDefaultImage.js b/src/Card/CardFallbackDefaultImage.js
new file mode 100644
index 0000000000..e1df625d35
--- /dev/null
+++ b/src/Card/CardFallbackDefaultImage.js
@@ -0,0 +1 @@
+export const cardSrcFallbackImg = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAXwAAACMCAYAAAB/AhJnAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAH6SURBVHgB7dRBEYBADACxwuDf5j0QUXywiYhc7zk7APzd3gNAgvABIoQPECF8gAjhA0QIHyBC+AARwgeIED5AhPABIoQPECF8gAjhA0QIHyBC+AARwgeIED5AhPABIoQPECF8gAjhA0QIHyBC+AARwgeIED5AhPABIoQPECF8gAjhA0QIHyBC+AARwgeIED5AhPABIoQPECF8gAjhA0QIHyBC+AARwgeIED5AhPABIoQPECF8gAjhA0QIHyBC+AARwgeIED5AhPABIoQPECF8gAjhA0QIHyBC+AARwgeIED5AhPABIoQPECF8gAjhA0QIHyBC+AARwgeIED5AhPABIoQPECF8gAjhA0QIHyBC+AARwgeIED5AhPABIoQPECF8gAjhA0QIHyBC+AARwgeIED5AhPABIoQPECF8gAjhA0QIHyBC+AARwgeIED5AhPABIoQPECF8gAjhA0QIHyBC+AARwgeIED5AhPABIoQPECF8gAjhA0QIHyBC+AARwgeIED5AhPABIoQPECF8gAjhA0QIHyBC+AARwgeIED5AhPABIoQPECF8gAjhA0QIHyBC+AARwgeIED5AhPABIoQPECF8gAjhA0QIHyBC+AARwgeIED5AhPABIoQPECF8gAjhA0QIHyBC+AARwgeIED5AhPABIp4BaNpp2Q/3/wfPkGyXOQAAAABJRU5ErkJggg==';
diff --git a/src/Card/CardImageCap.jsx b/src/Card/CardImageCap.jsx
index e271246e43..eb27d912b2 100644
--- a/src/Card/CardImageCap.jsx
+++ b/src/Card/CardImageCap.jsx
@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
 import classNames from 'classnames';
 import Skeleton from 'react-loading-skeleton';
 import CardContext from './CardContext';
-import cardSrcFallbackImg from './fallback-default.png';
+import { cardSrcFallbackImg } from './CardFallbackDefaultImage';
 
 const SKELETON_HEIGHT_VALUE = 140;
 const LOGO_SKELETON_HEIGHT_VALUE = 41;
diff --git a/src/Card/fallback-default.png b/src/Card/fallback-default.png
deleted file mode 100644
index b18d751d2639cff402d41d2eb7db5a4fe560b19c..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001

literal 613
zcmeAS@N?(olHy`uVBq!ia0y~yV5|YMdpOvDWIdBmI*{Tl@Q5sCVBi)8VMc~ob0mO*
zjKx9jP7LeL$-D$|SkfJR9T^xl_H+M9WChCo@^o<wsbGA2#Zj=qfrnw^p$GS$*$M>K
zZ0PKWd2eaW@aOJ5W{0K^j7ly10*W;a91odYIOG+aelQ3gV($>Jb7&cr8gijAk1^v`
b=1u<Z|Jlz^$eC^lOce~Cu6{1-oD!M<Hs!Ra

diff --git a/src/Card/tests/CardImageCap.test.jsx b/src/Card/tests/CardImageCap.test.jsx
index e459413d65..f0ef086d03 100644
--- a/src/Card/tests/CardImageCap.test.jsx
+++ b/src/Card/tests/CardImageCap.test.jsx
@@ -3,6 +3,7 @@ import renderer from 'react-test-renderer';
 import { render, fireEvent, screen } from '@testing-library/react';
 import CardImageCap from '../CardImageCap';
 import CardContext from '../CardContext';
+import { cardSrcFallbackImg } from '../CardFallbackDefaultImage';
 
 // eslint-disable-next-line react/prop-types
 function CardImageCapWrapper({ orientation = 'vertical', isLoading, ...props }) {
@@ -119,13 +120,12 @@ describe('<CardImageCap />', () => {
     expect(logoImg.className).toEqual('pgn__card-logo-cap');
   });
 
-  it('hiding component if it isn`t fallbackSrc and src don`t work', () => {
+  it('renders the default image if both src and fallbackSrc fail to load', () => {
     render(<CardImageCapWrapper src="fakeURL" fallbackSrc="fakeURL" srcAlt="Src alt text" />);
 
     const srcImg = screen.getByAltText('Src alt text');
     fireEvent.load(srcImg);
     fireEvent.error(srcImg);
-    // test-file-stub is what our fileMock.js returns for all images
-    expect(srcImg.src.endsWith('test-file-stub')).toEqual(true);
+    expect(srcImg.src).toEqual(cardSrcFallbackImg);
   });
 });