percyhanna / rquery Goto Github PK

First off, this is a great library. This is what I was expecting to see when I looked at React TestUtils the first time. Thank you!

I'm interested in adding some convenience functions to RQuery. I don't think everyone will need them, so I didn't really want to send a pull request. I was thinking of having something more like a jquery extension. My question, is this intended to be extendable? I seem to be able to add functions easily enough like this:

$R.rquery.prototype.innerHTML = -> (this.components.map (c) -> c.getDOMNode().innerHTML).join('')
now I can use my function like so:

$comp.find('.renderedWikiText').innerHTML()

I just didn't want to find out I'm hacking in an unexpected way and not be able to upgrade because you closed access to the prototype. Any other downsides to this?

• ' ': Descendent selector
• '>': Child selector
• ',': Union selector
• '?=': Extended attribute selectors (e.g. ~=, |=, ^=, $=, *=)

I've tried using this on a component attained through shallow rendering, and though the initial $R(component) call seems to work, running a find() doesn't seem to work at all.

Is shallow rendering currently supported?

ReferenceError: _ is not defined
      at getDescendents (/project/path/node_modules/rquery/rquery.js:25:12)

Looks like you need to _ = require('lodash') in the node js module setup, and should be added as a real dependency in package.json

It seems the selectors work with elements, for instance "div a" but normal css selectors like ".button.delete" don't seem to work with find. Are there plans for this?

Hey there, nice work with rquery. I either found a bug or I'm not really sure if I'm using this right
It's a simple components that has a inner component which has a state

    it('it should open a dropdown onClick', () => {
        var date      = moment().toDate();
        var callback  = sinon.spy();
        var component = TestUtils.renderIntoDocument(
            <MyComponent
                date={date}
                onChange={callback} />
        );

        // Click the Button -> doesn't work
        $R(component).find('a').ensureClick();
        component = $R(component).findComponent(MyInnerComponent).get(0);
        expect(component.state.open).to.equal(true);

        // Click the Button -> works
        component = TestUtils.findRenderedComponentWithType(component, MyInnerComponent);
        var button = TestUtils.findRenderedDOMComponentWithTag(component, 'a');
        TestUtils.Simulate.click(button);
        expect(component.state.open).to.equal(true);
    });

I have error in my test

TypeError: Cannot read property 'getAttribute' of null
    at rquery_getReactId (/Users/dperetyagin/work/pwdocker/Pushwoosh/Web/new/src/js/views/applications/application/__tests__/deeplinks-test.js:35083:41 <- webpack:///~/rquery/rquery.js?f17e:70:0)
    at componentDepth (/Users/dperetyagin/work/pwdocker/Pushwoosh/Web/new/src/js/views/applications/application/__tests__/deeplinks-test.js:35071:26 <- webpack:///~/rquery/rquery.js?f17e:58:0)

I did some research and came to the conclusion that the cause is component Collapse from react-bootstrap
ReactDOM.findDOMNode() for this component returns null, because the component have not any dom node.

Hello,

I can't find a component using Shallow Rendering with $R(component).find('MyComponentName').
It just returns a rquery object with a length of zero. Does this work with Shallow Rendering?
Thanks!

rquery works fine in my local dev environment, karma and webpack (and is very helpful, thx!).
However when I try to run the tests under Travis (continuous integration service) I see the following error.

22 03 2016 14:00:48.500:DEBUG [web-server]: serving (cached): /home/travis/build/betteroutcomes/boc-pro/tests.webpack.js
  Uncaught TypeError: Cannot read property 'TestUtils' of undefined
  at /home/travis/build/betteroutcomes/boc-pro/tests.webpack.js:37072

It seems, looking at the source, that this line is failing:

https://github.com/percyhanna/rquery/blob/master/rquery.js#L13

I added some logs to the test, to try to understand the initialization better:

var React= require('react');
var ReactDOM = require('react-dom');
var TestUtils = require('react-addons-test-utils');
var _ = require('lodash');
console.log(typeof require);
console.log(typeof exports);
console.log(typeof module);
var $R = require('rquery')(_, React, ReactDOM, TestUtils);

but the result doesn't help explain what is going on:

Chromium 45.0.2454 (Ubuntu 0.0.0) LOG: 'function' 
Chromium 45.0.2454 (Ubuntu 0.0.0) LOG: 'object'
Chromium 45.0.2454 (Ubuntu 0.0.0) LOG: 'object'
Chromium 45.0.2454 (Ubuntu 0.0.0) ERROR
  Uncaught TypeError: Cannot read property 'TestUtils' of undefined    
    at /home/travis/build/betteroutcomes/boc-pro/tests.webpack.js:37072 

Any suggestions as to what might be the problem? (Thanks in advance)

Hi,

I've really enjoyed using rquery for a long time now in our quite large project, and it's been working splendidly, thanks!

I just tried to upgrade my version of rquery with npm install --save-dev rquery@latest and it seems that you've published version 2.0.9, probably accidentally, as the "latest" module.

https://docs.npmjs.com/cli/dist-tag#purpose

By default, the latest tag is used by npm to identify the current version of a package, and npm install <pkg> (without any @<version> or @<tag> specifier) installs the latest tag. Typically, projects only use the latest tag for stable release versions, and use other tags for unstable versions such as prereleases.

When publishing new versions, you probably need to set the --tag option manually when running npm publish with 2.x and 3.x branches :)

I looked at your specs and I see that you've implemented get() to return a rquery component so that it works identical to the array lookup. I got a little confused, as I was expecting get() to work similarly to jQuery's get() — that is, returning the underlying React Component.

I believe it might be better to mimic the API of jQuery in this case and return the React component instead of the rquery instance. What do you think?