Add better support for various modifiers

[Joelkang]

There are 2 commits in this PR as discussed in this issue #64

1. Updates the existing modifier syntax to remove the need to add a starting space. Also adds support for more complex modifiers
2. Updates the modifier syntax to accept child Styled Components by passing in an array of strings and styled components, interpolating them into a final string modifier.

I'm open to discussion about the 2nd one, since that's a pretty ugly looking array. Im not sure how else to support nested components without requiring testers to know about the styledComponentId property. If we're otherwise ok with this modification, I can go ahead and update the docs as well.

An alternative I've been thinking of could be something like:

expect(wrapper.find(Text)).toHaveStyleRule('color', 'purple', {
  context: Link,
  modifier: '> & span',
})

I haven't really thought in much detail how deeper nested components can be handled in this way (it might just be available out of the box depending on the implementation)

[chrissinclair]

Heya! This would be very helpful for a project I'm working on at the moment - any word of when it'll get merged & published?

R.e. 2) - agree that the array isn't the prettiest. Given that styled-components has already taken the approach of template literals, could we not do something similar?

expect(wrapper.find(Text)).toHaveStyleRule('color', 'purple', {
  modifier: select`> ${Link} span`,
});

Even if all select does is swap that string to be the array from the current implementation? I suppose taking it a step further, you could get it to generate that whole object:

expect(wrapper.find(Text)).toHaveStyleRule('color', 'purple', select`> ${Link} span`);

Either way, being able to get that array version merged in would be awesome! Thanks :)

[MicheleBertoli]

Thank you very much for this PR, @Joelkang.
I love how the code is simple, well tested, and it works as expected.
The only comment/nit I have is to avoid mutating the modifier argument.

I also agree the array syntax is not optimal in terms of DX, would you mind experimenting with the tagged template literal solution suggested by @chrissinclair (thanks!)?

We should be able to reuse css helper, like:

css`> ${Text} span`.join('')

// => > .sc-gZMcBi span

Please let me know if you need any help.

[Joelkang]

@MicheleBertoli herp derp I dont know why it didnt occur to me to use the css helper which already does the interpolations. I was hoping to be able to have it inside toHaveStyleRule instead of requiring consumers/testers to use it manually, but it doesnt seem like you can use a pass a template literal to a tag (which makes sense). Seems like an okay tradeoff for more complex modifiers though.

[MicheleBertoli]

🙌thank you very much @Joelkang