DSD-1121: SVG testing update

[7emansell]

Fixes JIRA ticket DSD-1121

This PR does the following:

• Adds jest-transformer-svg package
• Updates component tests to use the new data-file-name prop generated in the SVG mock (closest we can get to testing that the correct icon is being displayed)
  • Icon, Logo, SocialMediaLinks, Banner

How has this been tested?

• Tested a release candidate in Turbine, no reason to expect this would change anything there, but all tests passed and SVGs displayed as expected locally

Accessibility concerns or updates

Accessibility Checklist

• Checked Storybook's "Accessibility" tab for color contrast and other issues.
• The feature works with keyboard inputs including tabbing back and forward and pressing space, enter, arrow, and esc keys.
• For hidden text or when aria-live is used, a screenreader was used to verify the text is read.
• For features that involve UI updates and focusing on DOM refs, focus management was reviewed.
• The feature works when the page is zoomed in to 200% and 400%.

Open Questions

Checklist:

• I have updated the Storybook documentation and changelog accordingly.
• I have added relevant accessibility documentation for this pull request.
• All new and existing tests passed.

Front End Review:

• Review the Vercel preview deployment once it is ready.

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
nypl-design-system	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Dec 18, 2024 3:17pm

[EdwinGuzman]

Great, thanks! Was this package always installed so you didn't have to add it to package.json?

I don't think all components need to test the SVGs they render, but I think more components can use the data-file-name confirmation test. For example, Accordion could use it but that's not needed for MultiSelect or FilterBarInline because those use Accordions internally. It's not necessary for this PR since it wasn't requested to update all tests, but we should aim to update other component tests later on.

[7emansell]

Great, thanks! Was this package always installed so you didn't have to add it to package.json?

I think so, but since we were including svg in the list of elements for fileMock.ts, it wasn't being used.

I don't think all components need to test the SVGs they render, but I think more components can use the data-file-name confirmation test. For example, Accordion could use it but that's not needed for MultiSelect or FilterBarInline because those use Accordions internally. It's not necessary for this PR since it wasn't requested to update all tests, but we should aim to update other component tests later on.

Added Accordion test. I think it's definitely within the scope of this PR to update the tests but I guess by the same token, full coverage of the Icon component makes any tests we would do on Accordion, SocialMediaLinks, etc., redundant since they're using Icon internally. @EdwinGuzman

[EdwinGuzman]

Yes, I'm also thinking about whether we should just write tests or if they're redundant since the Icon is already tested. I'm ok with what is already written.