Adding Applitools Storybook Visual Testing to Vue-material Docs

[Nkemjiks]

Hi everyone, this PR adds visual regression testing using Applitool. If you are unfamiliar with Visual Regression testing, you can checkout this link to learn more about it.

As an open source tool, this service will be offered to you free with an OSS license. They do offer a generous free tier if you want to get a license now to play around with it. I used Cypress as the browser test harness because Applitools has an SDK for it.

The process for this testing is the docs site is served using the existing design script, then Cypress launches a headless Chrome where it runs the tests. Applitool's SDK then takes DOM snapshots with styles from that headless Chrome and sends them to Applitool's servers where it renders those results in Chrome. It then takes the snapshots of that result and does its intelligent comparisons against the baseline. A baseline is created the first time you run it. If there's an issue, it'll be reported in CI tool(Travis) with an included link directly to Applitool's web app where you can see the visual differences and either accept or reject them or do other cool things like set ignored regions or tweak the matching behaviour.

I added the data-cy attributes to target the buttons as using the id or class is highly volatile to change. Using this attributes gives a selector that we can easily target to test the app. You can read more on it here.

You'll need to create an Applitools account and export APPLITOOLS_API_KEY=Your_API_Key_Here in your local environment if you run it locally.

Screenshots of a successful test looks like this:

I also included the necessary changes for it to run in your TravisCI setup, all you need to do is add your APPLITOOLS_API_KEY to your TravisCI project environment variables in their UI.

To run the test locally, go to your directory and run:
yarn run e2e-test