test(user-card): add a11y and visual tests

[ttaylor-stack]

SPARK-160

Added a11y and visual tests for the User Card component

[changeset-bot]

⚠️ No Changeset found

Latest commit: 52ce946

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

[netlify]

✅ Deploy Preview for stacks-svelte ready!

Name	Link
🔨 Latest commit	52ce946
🔍 Latest deploy log	https://app.netlify.com/projects/stacks-svelte/deploys/698afce89b1cd9000812ffec
😎 Deploy Preview	https://deploy-preview-2169--stacks-svelte.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 project configuration.

[netlify]

✅ Deploy Preview for stacks ready!

Name	Link
🔨 Latest commit	52ce946
🔍 Latest deploy log	https://app.netlify.com/projects/stacks/deploys/698afce8de128e0008d62b81
😎 Deploy Preview	https://deploy-preview-2169--stacks.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 project configuration.

[mukunku]

Hey Tavian, just wanted to ask if these tests were AI written? I will spend a bit extra energy reviewing the tests if that's the case.

[ttaylor-stack]

Hey Tavian, just wanted to ask if these tests were AI written? I will spend a bit extra energy reviewing the tests if that's the case.

Partially, I had AI create them and then went through each and made some changes

[mukunku]

Thanks for the clarification Tavian, that helps 🙏🏾

I noticed the following visual tests looked a bit odd. Could you confirm these are correct?

• User Card Dark Large Looks like it's not wrapping correctly?
  • Docs link: https://deploy-preview-2169--stacks.netlify.app/product/components/user-cards/#large
  • Similar thing for the Small Large Test?
• Large New Contributor Maybe it's fine but I feel like it should all be in one line, seems like the container size is restricting everything to a new line which may not be the intended test case for this test?
  • Similar thing for Large Original Poster, Large User Badges
  • This is not the case for the regular size
• For Large Recognized Member the order of items in the markup doesn't seem to be exactly correct. The icon is missing also but not as big a deal I think:

  Docs	Test

  Same for the medium and small sizes too: I think the "recognized member" is meant to be on the bottom.

[ttaylor-stack]

Thanks for the clarification Tavian, that helps 🙏🏾

I noticed the following visual tests looked a bit odd. Could you confirm these are correct?

* [User Card Dark Large](https://media.githubusercontent.com/media/StackExchange/Stacks/52ce9464534560110e3224dd50ef02b34e83a902/packages/stacks-classic/screenshots/Chromium/baseline/s-user-card-dark-large.ico) Looks like it's not wrapping correctly?
  
  * Docs link: https://deploy-preview-2169--stacks.netlify.app/product/components/user-cards/#large
  * Similar thing for the [Small Large Test?](https://media.githubusercontent.com/media/StackExchange/Stacks/52ce9464534560110e3224dd50ef02b34e83a902/packages/stacks-classic/screenshots/Chromium/baseline/s-user-card-dark-sm-large.ico)

* [Large New Contributor](https://media.githubusercontent.com/media/StackExchange/Stacks/52ce9464534560110e3224dd50ef02b34e83a902/packages/stacks-classic/screenshots/Chromium/baseline/s-user-card-dark-lg-new-contributor.ico) Maybe it's fine but I feel like it should all be in one line, seems like the container size is restricting everything to a new line which may not be the intended test case for this test?
  
  * Similar thing for [Large Original Poster](https://media.githubusercontent.com/media/StackExchange/Stacks/52ce9464534560110e3224dd50ef02b34e83a902/packages/stacks-classic/screenshots/Chromium/baseline/s-user-card-dark-lg-original-poster.ico), [Large User Badges](https://media.githubusercontent.com/media/StackExchange/Stacks/52ce9464534560110e3224dd50ef02b34e83a902/packages/stacks-classic/screenshots/Chromium/baseline/s-user-card-dark-lg-with-badges.ico)
  * This is not the case for [the regular size](https://media.githubusercontent.com/media/StackExchange/Stacks/52ce9464534560110e3224dd50ef02b34e83a902/packages/stacks-classic/screenshots/Chromium/baseline/s-user-card-dark-new-contributor.ico)

* For [Large Recognized Member](https://media.githubusercontent.com/media/StackExchange/Stacks/52ce9464534560110e3224dd50ef02b34e83a902/packages/stacks-classic/screenshots/Chromium/baseline/s-user-card-dark-lg-recognized-member.ico) the order of items in the markup doesn't seem to be exactly correct. The icon is missing also but not as big a deal I think:
    
    
    
    Docs
    
    
    Test
    
    
    
    <img alt="{9F2F1E33-DECE-4A05-9348-E56B15B577B3}" width="153" height="135" src="https://private-user-images.githubusercontent.com/4502154/547773002-1283be5b-f9f0-453d-83ab-7ec51d6d4926.png?jwt=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3NzA3Mzk5MjIsIm5iZiI6MTc3MDczOTYyMiwicGF0aCI6Ii80NTAyMTU0LzU0Nzc3MzAwMi0xMjgzYmU1Yi1mOWYwLTQ1M2QtODNhYi03ZWM1MWQ2ZDQ5MjYucG5nP1gtQW16LUFsZ29yaXRobT1BV1M0LUhNQUMtU0hBMjU2JlgtQW16LUNyZWRlbnRpYWw9QUtJQVZDT0RZTFNBNTNQUUs0WkElMkYyMDI2MDIxMCUyRnVzLWVhc3QtMSUyRnMzJTJGYXdzNF9yZXF1ZXN0JlgtQW16LURhdGU9MjAyNjAyMTBUMTYwNzAyWiZYLUFtei1FeHBpcmVzPTMwMCZYLUFtei1TaWduYXR1cmU9ZWFhNzU2YTIwOTYwNGY2NzNhMjM1ZmRjODc0YjIzODI4ZjQzYTc2NGY4YzlkYzk4NzI4ODRmZmQxNTk2ZjlmNCZYLUFtei1TaWduZWRIZWFkZXJzPWhvc3QifQ.KhwjbJC-x5wzvLyShwWjgy1BWM0T7FcUi3LAcC-RCUQ">
    
    <img alt="image" width="150" height="128" src="https://private-user-images.githubusercontent.com/4502154/547773690-1c1f3619-1148-4748-b294-626920f7c3f3.png?jwt=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3NzA3Mzk5MjIsIm5iZiI6MTc3MDczOTYyMiwicGF0aCI6Ii80NTAyMTU0LzU0Nzc3MzY5MC0xYzFmMzYxOS0xMTQ4LTQ3NDgtYjI5NC02MjY5MjBmN2MzZjMucG5nP1gtQW16LUFsZ29yaXRobT1BV1M0LUhNQUMtU0hBMjU2JlgtQW16LUNyZWRlbnRpYWw9QUtJQVZDT0RZTFNBNTNQUUs0WkElMkYyMDI2MDIxMCUyRnVzLWVhc3QtMSUyRnMzJTJGYXdzNF9yZXF1ZXN0JlgtQW16LURhdGU9MjAyNjAyMTBUMTYwNzAyWiZYLUFtei1FeHBpcmVzPTMwMCZYLUFtei1TaWduYXR1cmU9YzllYjRmNjgyMWQ0YmRiYzQwNWUzN2MxYTBjYzFlODQxMjI0Zjk2YzExYjRkNGUyMjg4NmUwMThmODIzMWJlYSZYLUFtei1TaWduZWRIZWFkZXJzPWhvc3QifQ.KyOMR0niqWyBayFehu5FhXae9lMh16hOqqrJ7Xxu9Z8">
    
    
       
    Same for the [medium](https://media.githubusercontent.com/media/StackExchange/Stacks/52ce9464534560110e3224dd50ef02b34e83a902/packages/stacks-classic/screenshots/Chromium/baseline/s-user-card-dark-recognized-member.ico) and [small](https://media.githubusercontent.com/media/StackExchange/Stacks/52ce9464534560110e3224dd50ef02b34e83a902/packages/stacks-classic/screenshots/Chromium/baseline/s-user-card-dark-sm-recognized-member.ico) sizes too: I think the "recognized member" is meant to be on the bottom.

I'll fix those now