Add screenshot integration tests

We should do automated browser testing for each PR to make sure we don’t have regressions like #212 again and to make sure our injection mechanism works as expected.

I have never done that, so if somebody has tips on free services we could use to test on IE10+ and all major evergreen browser that’d be 👌 It basically just needs to make sure our example in the example/ folder renders as expected in all browsers and doesn’t throw errors.

The best way to go about this would be to use screenshot integration testing, similar to what we do for the styled-components website. Essentially, have a simple page that you render with puppeteer, then screenshot it and compare it against a stored screenshot in the repo. If there’s any diversion between the screenshots (i.e. if any injected styles have changed), fail the tests.

This would be a great first task for anybody wanting to start contributing to styled-components. Take a look at the website PR (https://github.com/styled-components/styled-components-website/pull/168) and implement something based on that in this repo.

[FezVrasta]

I can take this, I literally just finished tweaking the SauceLabs tests for one of my projects, I could simply copy-paste the setup.

We should add karma and karma-sauce-launcher to be able to run mocha in the SL browsers.

Would it be okay @mxstbr?

[mxstbr]

Awesome @maciej-ka, it’s all yours! Looking forward to the PR, if you got any questions ping me on Spectrum: https://spectrum.chat/styled-components