Add tests!

[james-nash]

This issue is a bit too broad, so I'll split it into individual issues for specific kinds of tests.

---

Is your feature request related to a problem? Please describe.
We do some linting on our SASS code, but other than that, there is currently no testing on the gravity-ui-web library. We ought to fix that!

Describe the solution you'd like
Off the top of my head, these are all kinds of tests we should consider adding:

• Directly on the SASS code:
  • Testing our SASS mixins and functions using something like sass-true
  • Testing that the SASS files from our ITCSS settings and tools layers do not output any CSS. (I think this would currently fail due to gravy, but nonetheless it would be good to have a test covering this, so we can fix that and avoid future regressions)
  • --> Split out into issue Add SASS unit tests #362
• Directly on the client-side JS code
  • Bog-standard unit-tests using Jest or whatever.
  • Note, currently we only have a teeny bit of JS code for the toggle button, but I anticipate this will grow in future releases, so having some testing infrastrcture in place would be good
• Via the pattern library:
  • Run a11y tests (using either pa11y or aXe per component (if you look at the Pattern Lab output in dist/, you can see that each pattern is output to its own HTML file. We could potentially just load each of those in turn and run our tests on them --> Split out into issue Add automated a11y testing #361
  • Run visual regression tests per component.
    • While we fully expect things to render subtly differently in different browsers, components should render identically in the same browser - unless we've intentionally changed something. Therefore, running visual regression tests in one or more representative browsers would flag up any unintentional styling regressions.
    • Since some components change appearance across breakpoints, we ought to test each component at a selection of viewport sizes.
    • The reference images could be quite large, so we may want to explore storing them somewhere other than our git repo
  • Maybe do snapshot testing of the rendered HTML?
    • Similar to the visual regression testing, our HTML structures shouldn't really change by accident. So, something like Jest's snapshot testing might be a convenient way of checking against a reference and warning when that changes.
  • E2E tests
    • Being able to test the bahviour of any interactive components (currently only toggle button - but there are likely to be more in future) in a browser would be good.
    • Toolks like Cypress or something the runs over WebDriver would be good
    • Personally, I'd prefer the latter because we could then run our tests across many different browsers (e.g. via BrowserStack or similar). Cypress is convenient but is tied to the Blink engine (i.e. Chromium). I think we should make an effort to test in other browser engines too.

I'm sure there's more - but you get the idea. Feel free to add comments and suggestions in the comments below.

I wouldn't expect all of these right away. Each category probably deserves its own PR (and deeper discussion before implementing), but I wanted to brain-dump my thoughts somewhere :-D

I think the SASS testing would be a good place to start as that's going to give us the most value in the short term.