Add assertions for checking dom node classes

[iamrandys]

Nice react assertion package! Are you interested in adding assertions to check DOM node classes. I've search around and haven't found anything to solve this need. I've created three assertions to check DOM node classes. It would be great to add them to what you have and move them out of my code.

I could also add more documentation to your readme.md, if you'd like.

For a given DOM node:

<div class="class-a class-b class-c"></div>

to.have.classes

The classes in the DOM node must exactly match the expected class names.

expect(domComponent.getDOMNode()).to.have.classes(['class-b', 'class-a', 'class-c']);  // SUCCESS
expect(domComponent.getDOMNode()).to.have.classes(['class-b', 'class-a']);             // FAIL

to.containClasses

The classes in the DOM node just need contain the expected classes.

expect(domComponent.getDOMNode()).to.containClasses(['class-b', 'class-c']);  // SUCCESS
expect(domComponent.getDOMNode()).to.containClasses(['class-b', 'class-d']);  // FAIL

to.containClass

The classes in the DOM node just needs to contain the expected class.

expect(domComponent.getDOMNode()).to.containClass('class-c');  // SUCCESS
expect(domComponent.getDOMNode()).to.containClass('class-d');  // FAIL

[percyhanna]

Hi @iamrandys, thanks for the feedback. This seems like a decent idea, although I'm not sure I want to add too many DOM specific assertions to chai-react. Not that I'm against it, but I think something like chai-jquery might serve better if you're testing against DOM nodes instead of actual React components.

However, I did add some extra prop matching magic that you might find useful in v0.0.5.

[percyhanna]

@iamrandys I think rquery will do exactly what you want, and even do it better. You can write CSS/jQuery-like selectors to find components:

expect($R(myComponent, '.class-b')).to.have.length(2);

[iamrandys]

Oh this is nice! We actually started developing something that is similar but not nearly as feature rich just last week. You developed this just in time :) I'll have to take it for a spin.

Thanks!!

On Mar 5, 2015, at 12:46 PM, Andrew Hanna notifications@github.com wrote:

@iamrandys I think rquery will do exactly what you want, and even do it better. You can write CSS/jQuery-like selectors to find components:

expect($R(myComponent, '.class-b')).to.have.length(2); — Reply to this email directly or view it on GitHub.

[percyhanna]

Awesome! Let me know how it goes! I want to keep adding to rquery as well as adding to chai-react to help them complement each other.