improved CSS selectors for the find middleware?

[NickStefan]

I understand that the library is very flexible, and it's easier to make plugins than make breaking changes to the .find middleware.

However, I think that we could support more css selectors than the current find middleware does.

This is by no means perfect, but it's my first pass at it:

/*
 * For now only handles things like:
 *     'span#bob.single-theater-container[data-bob-thing]'
 * CANNOT handle
 *     'span#bob .single-theater-container[data-bob-thing]'
 * CANNOT handle
 *     'span#bob > .single-theater-container[data-bob-thing]'
 */

import * as ReactTestUtils from 'react-addons-test-utils';
import _ from 'lodash-compat';

function findSelector(selector, fn){
    var self = this;
    var foundElements = [];
    var tokens = selector.split(/(?=\.)|(?=#)|(?=\[)/);

    tokens
    .forEach(function(subselector, key, collection){
        var els;
        switch (subselector[0]){
            // class
            case '.':
                els = ReactTestUtils.scryRenderedDOMComponentsWithClass(self.instance, subselector.slice(1));
                foundElements.push( Array.isArray(els) ? els : [els] );
                break;

            // id
            case '#':
                els = ReactTestUtils.findAllInRenderedTree(self.instance, function(component){
                    if (component.id === subselector.slice(1)){
                        return true;
                    }
                });
                foundElements.push( Array.isArray(els) ? els : [els] );
                break;

            // data attribute
            case '[':
                els = ReactTestUtils.findAllInRenderedTree(self.instance, function(component){
                    if (component.getAttribute) {
                        return component.getAttribute(subselector.slice(1,-1));
                    }
                });
                foundElements.push( Array.isArray(els) ? els : [els] );
                break;

            // tag
            default:
                els = ReactTestUtils.scryRenderedDOMComponentsWithTag(self.instance, subselector);
                foundElements.push( Array.isArray(els) ? els : [els] );
                break;
        }
    });

    var elements = _.intersection.apply(_, foundElements);

    if (Array.isArray(elements) && elements.length === 1) {
        this.elements[selector] = elements[0];
    } else {
        this.elements[selector] = elements;
    }
}

Any ideas for how we could support even more selectors? Sizzle?

[zackify]

Hmm, that looks like a good way to support more selectors. If you made a PR I'd accept it. Sorry about taking so long to reply, missed this.

[NickStefan]

#37

[zackify]

https://github.com/Legitcode/tests/releases/tag/1.0.0 thanks!