[test] Make it easier to test the component has the right design tokens

[aleshh]

A button's color can be set to primary or secondary, and the appropriate color is applied to the button component's background color. However, when testing with testing-libraray/react, the background color is reported as transparent.

• [✓] The issue is present in the latest release.
• [✓ ] I have searched the issues of this repository and believe that this is not a duplicate.

Current Behavior 😯

Button color is reported as transparent.

Expected Behavior 🤔

Button color should be reported as whatever the appropriate color is, #3f51b5 for the default primary color.

Steps to Reproduce 🕹

Link to codesandbox with test

Context 🔦

We're overriding the color in some of our buttons and would like to test that it's working correctly. I have also posted this as a question on Stack Overflow, with no response in over two weeks.

Your Environment 🌎

Works fine in browsers, but not in jsdom.

[oliviertassinari]

TL;DR run automated test in a real browser for now.

@aleshh Your codesandbox's behavior looks expected. JSDOM doesn't have a full CSS resolution algorithm. You can't always rely on it. Here, it could be a bug in JSDOM itself. jsdom/jsdom#2690 shares a bit more details on cascading support.

We recently had a similar use case, we wanted to test that the generated CSS with emotion was using the right design token. The issue with visual regression tests is that slight changes of colors can sometimes be missed, It's not always obvious if it's using the right design token, and yet, it can be critical in making the component look great.

enzyme and styled-components have snapshot testing support but it's not the same. I'm leaving it open to collect more feedback. I believe most people don't care enough to bother testing it, but I think that it's still interesting to allow collecting more feedback.

[aleshh]

Thanks @oliviertassinari, that makes sense. We're working on incorporating Cypress tests, which should make stuff like this way easier and more comprehensive. Or in this case, possible.

[oliviertassinari]

I have added the waiting for users upvotes tag. I'm closing the issue as we are not sure enough people are looking for such capability. So please upvote this issue if you are. We will prioritize our effort based on the number of upvotes.