feat: use data uri for card fallback image

[brian-smith-tcril]

Description

Deploy Preview

Include a direct link to your changes in this PR's deploy preview here (e.g., a specific component page).

Merge Checklist

• If your update includes visual changes, have they been reviewed by a designer? Send them a link to the Netlify deploy preview, if applicable.
• Does your change adhere to the documented style conventions?
• Do any prop types have missing descriptions in the Props API tables in the documentation site (check deploy preview)?
• Were your changes tested using all available themes (see theme switcher in the header of the deploy preview, under the "Settings" icon)?
• Were your changes tested in the example app?
• Is there adequate test coverage for your changes?
• Consider whether this change needs to reviewed/QA'ed for accessibility (a11y). If so, please request an a11y review for the PR in the #wg-paragon Open edX Slack channel.

Post-merge Checklist

• Verify your changes were released to NPM at the expected version.
• If you'd like, share your contribution in #show-and-tell.
• 🎉 🙌 Celebrate! Thanks for your contribution.

[netlify]

✅ Deploy Preview for paragon-openedx ready!

Built without sensitive environment variables

Name	Link
🔨 Latest commit	7d270e0
🔍 Latest deploy log	https://app.netlify.com/sites/paragon-openedx/deploys/675711c27580260008c6a8ca
😎 Deploy Preview	https://deploy-preview-3323--paragon-openedx.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[bradenmacdonald]

Wow, that was fast! Thanks :)
I agree "no image at all" would be better, but this is a nice improvement for now.

[brian-smith-tcril]

So this is failing on

paragon/src/Card/tests/CardImageCap.test.jsx

Lines 122 to 130 in 1b90fda

	it('hiding component if it isn`t fallbackSrc and src don`t work', () => {
	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);
	});

now, but I'm not sure what "hiding component if it isn`t fallbackSrc and src don`t work" is supposed to be testing, or if it's accomplishing its intended purpose.

It was passing before because the fallback png would lead to

paragon/__mocks__/fileMock.js

Line 1 in 1b90fda

module.exports = 'test-file-stub';

I tried throwing

jest.mock('../CardFallbackDefaultImage', () => ({ cardSrcFallbackImg: 'test-file-stub' }));

into the test file to see if I could fix the error really quickly, but it still failed.

Before spending any real amount of time fighting this test I'd like to understand what it is actually trying to verify.

[brian-smith-tcril]

@PKulkoRaccoonGang I checked the git blame on the test and it looks like you added it last year as part of #1994.

Any chance you remember what

expect(srcImg.src.endsWith('test-file-stub')).toEqual(true);

is verifying?

[PKulkoRaccoonGang]

@brian-smith-tcril, thank you for these changes!

In the package.json, we have the following configuration:

"moduleNameMapper": {
  "\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$": "<rootDir>/__mocks__/fileMock.js",
  "\\.(css|scss)$": "identity-obj-proxy"
}

This setup is necessary because Jest does not natively handle media files. Instead, a stub is provided to prevent errors during test execution. We use this approach in the Avatar component, as it requires mocking a .svg image.

expect(srcImg.src.endsWith('test-file-stub')).toEqual(true);

This check verifies that the mocked file (test-file-stub) is used as the source for the component’s src attribute when the actual image loading fails.

Since we now want to use an image in base64 format, there is no longer a need to mock the image. I propose updating the test as follows:

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);
  expect(srcImg.src).toEqual(cardSrcFallbackImg);
});

I tested this change locally, and it works as expected.

[codecov]

Codecov Report

All modified and coverable lines are covered by tests ✅

Project coverage is 93.57%. Comparing base (1b90fda) to head (7d270e0).
Report is 21 commits behind head on release-22.x.

Additional details and impacted files

@@               Coverage Diff                @@
##           release-22.x    #3323      +/-   ##
================================================
+ Coverage         93.31%   93.57%   +0.25%     
================================================
  Files               249      259      +10     
  Lines              4441     4635     +194     
  Branches           1014     1077      +63     
================================================
+ Hits               4144     4337     +193     
+ Misses              294      292       -2     
- Partials              3        6       +3     

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

[brian-smith-tcril]

Thanks for the advice @PKulkoRaccoonGang! I've updated the test and everything looks good now!

[brian-smith-tcril]

trying close/reopen to trigger the required deploy preview (switched base from master to release-22.x)

[openedx-semantic-release-bot]

🎉 This PR is included in version 22.12.0 🎉

The release is available on:

• npm package (@release-22.x dist-tag)
• GitHub release

Your semantic-release bot 📦🚀

[openedx-semantic-release-bot]

🎉 This PR is included in version 23.1.0 🎉

The release is available on:

• npm package (@latest dist-tag)
• GitHub release

Your semantic-release bot 📦🚀