feat(within): Support cy.within #11

npeterkamps · 2018-06-03T18:01:18Z

What / How:

Support cy.within by using cy.state('withinSubject') when available.
Support passing in a container within the options object.
Since Cypress uses jQuery elements and dom-testing-library expects DOM nodes, created a helper to retrieve the DOM node.
- Used isJquery provided by Cypress, since instanceof didn't work.
Installed wait-port and use it within test:cypress:run to avoid race-conditions.

Why:

See #8

Checklist:

Documentation
Tests
Ready to be merged
Added myself to contributors table

…within the options object. * Installed wait-port and use it within test:cypress:run to avoid race-conditions

kentcdodds

LGTM. Would be good to get another review though!

sompylasar

LGTM overall, but I'd make some adjustments to make things clearer.

sompylasar · 2018-06-03T20:10:27Z

cypress/integration/commands.spec.js

+
+  it('getByText in container', () => {
+    cy.get('#nested')
+      .then((subject) => {


It's not clear from the documentation https://docs.cypress.io/api/commands/then.html#DOM-element , but as I remember, .then callback gets a jQuery collection in its first argument, not a single DOM element. Could you please verify this?

Oh I see, you use Cypress.dom.isJquery(element) to accept both jQuery collection and a single element as the container. This wasn't the case before, so likely requires a documentation update where the container option type is described.

sompylasar · 2018-06-03T20:10:51Z

package.json

-    "test:cypress:serve": "serve -l 13370 ./cypress/fixtures/test-app",
-    "test:cypress:run": "cypress run",
+    "test:cypress:serve": "serve --listen 13370 ./cypress/fixtures/test-app",
+    "test:cypress:run": "wait-port --timeout 10000 localhost:13370 && cypress run",


sompylasar · 2018-06-03T20:15:02Z

src/support/utils.js

+  return element
+}
+
+function getContainer(cy, container) {


cy is assumed a global in Cypress, too, so either make this function pure and take both Cypress and cy from arguments (and pass Cypress to getElement), or just take both from globals.

sompylasar · 2018-06-03T20:19:27Z

src/support/utils.js

@@ -0,0 +1,21 @@
+function getElement(element) {


function getFirstElement(jqueryOrElement) { would state the intent clearer.

sompylasar · 2018-06-03T20:23:29Z

src/index.js

@@ -1,4 +1,5 @@
 import {queries, waitForElement} from 'dom-testing-library'
+import {getContainer} from './support/utils'


I wonder why did you place this file as ./support/utils — the file structure of ./ is not dictated by Cypress, so it's confusing as if the structure mattered for Cypress; just ./utils is enough.

Well, I remembered you already had a utils file within your code from #6:

import { makeCypressCommandLog, makeElementDebugString, getNodeFullText, } from '../support/utils';

So I just tried to match that 😉

The snippet I have shown is in the cypress folder of my app where Cypress defines the file structure, it's not in the library code.

* Documented jQuery vs DOM nodes. * Use Cypress.cy global. * Renamed function and parameter. * Moved utils file.

sompylasar · 2018-06-04T19:07:41Z

@npeterkamps Thanks for the fixes in 6394e7e – I apologize for the confusion that I brought, but I did not notice that command takes cy as its argument, propagated from add-commands:

https://github.com/kentcdodds/cypress-testing-library/blob/7d14b896f6f68775e962d03928a9023f325e0791/src/add-commands.js#L1-L7

I wonder why Cypress is still accessed from the globals, but cy is made injected as a local. Consistency of where to take the references to these objects from is what I try to ensure. Either take both Cypress and cy from globals everywhere, or take both from globals in add-commands (in the one and only place), but otherwise take them as local variables from command arguments and propagate to any utility function that needs them.

npeterkamps · 2018-06-05T17:34:37Z

Is container currently the only option across all the library APIs where the library takes a DOM element or jQuery collection?

Yes. The only API that cypress-testing-library exposes is the command function that is created for each of the query functions. Looking at the documentation from dom-testing-library, there are two HTMLElement parameters; the one passed to the query functions and the one within the options object for waitForElement. So as far as I'm aware, we're supporting all current options.

I'm questioning this quite broad statement that "cypress-testing-library supports both jQuery elements and DOM nodes." – if we want it to be so, we have to ensure this is true for all the current and future APIs.

Since Cypress uses jQuery elements and dom-testing-library expects DOM nodes, I think it would be quite inconvenient if we don't automatically convert jQuery input to DOM nodes. So I think we do need to ensure that we support both (in the future as well).

sompylasar · 2018-06-05T18:03:24Z

Thanks @npeterkamps, all looks good.

kentcdodds · 2018-06-05T18:05:06Z

Thanks friends!

kentcdodds · 2018-06-05T18:09:54Z

🎉 This PR is included in version 2.2.0 🎉

The release is available on:

npm package (@latest dist-tag)
GitHub release

Your semantic-release bot 📦🚀

sompylasar · 2018-06-05T18:11:21Z

@kentcdodds I didn't find this in CONTRIBUTING.md, which option should I use just in case I need to merge a PR here (squash and merge? on desktop only? how to compose the message?).

kentcdodds · 2018-06-05T18:52:27Z

I think it's in the maintaining.md in the other directory. It's squash and merge and you need to make sure that the commit message is right and you can do that in the GitHub UI

sompylasar · 2018-06-05T20:57:15Z

@kentcdodds Found it, thanks!

feat(within): Support cy.within. Also support passing in a container …

72510dc

…within the options object. * Installed wait-port and use it within test:cypress:run to avoid race-conditions

npeterkamps requested a review from sompylasar June 3, 2018 18:01

kentcdodds approved these changes Jun 3, 2018

View reviewed changes

sompylasar reviewed Jun 3, 2018

View reviewed changes

Improvements based on feedback.

6394e7e

* Documented jQuery vs DOM nodes. * Use Cypress.cy global. * Renamed function and parameter. * Moved utils file.

Use the cy global.

68237c9

kentcdodds merged commit d105706 into testing-library:master Jun 5, 2018

sompylasar mentioned this pull request Jun 10, 2018

Improve the 'byText' queries capability. testing-library/dom-testing-library#53

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat(within): Support cy.within #11

feat(within): Support cy.within #11

npeterkamps commented Jun 3, 2018

kentcdodds left a comment

sompylasar left a comment

sompylasar Jun 3, 2018

sompylasar Jun 3, 2018

sompylasar Jun 3, 2018

sompylasar Jun 3, 2018

sompylasar Jun 3, 2018

sompylasar Jun 3, 2018

npeterkamps Jun 4, 2018

sompylasar Jun 4, 2018

sompylasar commented Jun 4, 2018 •

edited

Loading

npeterkamps commented Jun 5, 2018

sompylasar commented Jun 5, 2018

kentcdodds commented Jun 5, 2018

kentcdodds commented Jun 5, 2018

sompylasar commented Jun 5, 2018

kentcdodds commented Jun 5, 2018

sompylasar commented Jun 5, 2018

		@@ -1,4 +1,5 @@
		import {queries, waitForElement} from 'dom-testing-library'
		import {getContainer} from './support/utils'

feat(within): Support cy.within #11

feat(within): Support cy.within #11

Conversation

npeterkamps commented Jun 3, 2018

kentcdodds left a comment

Choose a reason for hiding this comment

sompylasar left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

sompylasar commented Jun 4, 2018 • edited Loading

npeterkamps commented Jun 5, 2018

sompylasar commented Jun 5, 2018

kentcdodds commented Jun 5, 2018

kentcdodds commented Jun 5, 2018

sompylasar commented Jun 5, 2018

kentcdodds commented Jun 5, 2018

sompylasar commented Jun 5, 2018

sompylasar commented Jun 4, 2018 •

edited

Loading