Add visual regression testing

[jayphelps]

Hey folks! Since you have a Storybook I figured you might want to have some visual regression testing against it, so Applitools was kind enough to sponsor me to help out and make some PRs.

If you're not familiar with automated visual regression testing there's a pretty good summary in the Storybook docs but the tl;dr is that it involves comparing the pixels visually like a human would, ideally ignoring differences that a human couldn't perceive e.g. 1 pixel changes, differences in how browsers render images, drop shadows, etc. to avoid false positives; but you can still do a strict 1:1 pixel match if that's your preference.

Applitools thankfully provides an SDK that made it trivial to test Storybooks. So other than the things I included what you'll need to do is create your own Applitools account and then setup your GitHub CI integration if you want it to run automatically on Pull Requests; optional, but probably a good idea. Happy to help with this as well, though someone with admin access to this repo will have to drive cause it requires that permission to setup.

While the default Applitools account has decent limits they also offer free unlimited accounts to open source projects, so if you want to unlock that you can either contact them directly or if you shoot me your account email I can ask them to hook you up.

[codecov[bot]]

Codecov Report

Merging #245 into master will not change coverage. The diff coverage is n/a.

@@           Coverage Diff           @@
##           master     #245   +/-   ##
=======================================
  Coverage   58.01%   58.01%           
=======================================
  Files          96       96           
  Lines        1079     1079           
  Branches      190      190           
=======================================
  Hits          626      626           
  Misses        370      370           
  Partials       83       83

---

Continue to review full report at Codecov.

Legend - Click here to learn more Δ = absolute <relative> (impact), ø = not affected, ? = missing data Powered by Codecov. Last update 78b8211...e5ba5f5. Read the comment docs.

[jayphelps]

Hey everyone! Any thoughts? 🕺

[jayphelps]

👋

[myspivey]

Hey All! Any thoughts on this PR? Would love to help this along if I can!

[myspivey]

Hey everyone! It has been a while since the last follow up, just wanted to see where things are at. Appreciate the time!