diff --git a/.all-contributorsrc b/.all-contributorsrc
index 2ff0486..74e8584 100644
--- a/.all-contributorsrc
+++ b/.all-contributorsrc
@@ -47,7 +47,8 @@
"contributions": [
"code",
"doc",
- "ideas"
+ "ideas",
+ "test"
]
}
],
diff --git a/README.md b/README.md
index bbb59b0..be0ddd3 100644
--- a/README.md
+++ b/README.md
@@ -74,8 +74,16 @@ cy.getAllByText('Jackie Chan').click()
cy.queryByText('Button Text').should('exist')
cy.queryByText('Non-existing Button Text').should('not.exist')
cy.queryByLabelText('Label text', { timeout: 7000 }).should('exist')
+cy.get('form').within(() => {
+ cy.getByText('Button Text').should('exist')
+})
+cy.get('form').then((subject) => {
+ cy.getByText('Button Text', { container: subject }).should('exist')
+})
```
+`cypress-testing-library` supports both jQuery elements and DOM nodes. This is necessary because Cypress uses jQuery elements, while `dom-testing-library` expects DOM nodes. When you pass a jQuery element as `container`, it will get the first DOM node from the collection and use that as the `container` parameter for the `dom-testing-library` functions.
+
## Other Solutions
I'm not aware of any, if you are please [make a pull request][prs] and add it
@@ -87,7 +95,7 @@ Thanks goes to these people ([emoji key][emojis]):
-| [
Kent C. Dodds](https://kentcdodds.com)
[💻](https://github.com/kentcdodds/cypress-testing-library/commits?author=kentcdodds "Code") [📖](https://github.com/kentcdodds/cypress-testing-library/commits?author=kentcdodds "Documentation") [🚇](#infra-kentcdodds "Infrastructure (Hosting, Build-Tools, etc)") [⚠️](https://github.com/kentcdodds/cypress-testing-library/commits?author=kentcdodds "Tests") | [
Ivan Babak](https://sompylasar.github.io)
[💻](https://github.com/kentcdodds/cypress-testing-library/commits?author=sompylasar "Code") [🤔](#ideas-sompylasar "Ideas, Planning, & Feedback") | [
Łukasz Gandecki](http://team.thebrain.pro)
[💻](https://github.com/kentcdodds/cypress-testing-library/commits?author=lgandecki "Code") [⚠️](https://github.com/kentcdodds/cypress-testing-library/commits?author=lgandecki "Tests") | [
Peter Kamps](https://github.com/npeterkamps)
[💻](https://github.com/kentcdodds/cypress-testing-library/commits?author=npeterkamps "Code") [📖](https://github.com/kentcdodds/cypress-testing-library/commits?author=npeterkamps "Documentation") [🤔](#ideas-npeterkamps "Ideas, Planning, & Feedback") |
+| [
Kent C. Dodds](https://kentcdodds.com)
[💻](https://github.com/kentcdodds/cypress-testing-library/commits?author=kentcdodds "Code") [📖](https://github.com/kentcdodds/cypress-testing-library/commits?author=kentcdodds "Documentation") [🚇](#infra-kentcdodds "Infrastructure (Hosting, Build-Tools, etc)") [⚠️](https://github.com/kentcdodds/cypress-testing-library/commits?author=kentcdodds "Tests") | [
Ivan Babak](https://sompylasar.github.io)
[💻](https://github.com/kentcdodds/cypress-testing-library/commits?author=sompylasar "Code") [🤔](#ideas-sompylasar "Ideas, Planning, & Feedback") | [
Łukasz Gandecki](http://team.thebrain.pro)
[💻](https://github.com/kentcdodds/cypress-testing-library/commits?author=lgandecki "Code") [⚠️](https://github.com/kentcdodds/cypress-testing-library/commits?author=lgandecki "Tests") | [
Peter Kamps](https://github.com/npeterkamps)
[💻](https://github.com/kentcdodds/cypress-testing-library/commits?author=npeterkamps "Code") [📖](https://github.com/kentcdodds/cypress-testing-library/commits?author=npeterkamps "Documentation") [🤔](#ideas-npeterkamps "Ideas, Planning, & Feedback") [⚠️](https://github.com/kentcdodds/cypress-testing-library/commits?author=npeterkamps "Tests") |
| :---: | :---: | :---: | :---: |
diff --git a/cypress/fixtures/test-app/index.html b/cypress/fixtures/test-app/index.html
index 1719775..867a217 100644
--- a/cypress/fixtures/test-app/index.html
+++ b/cypress/fixtures/test-app/index.html
@@ -29,6 +29,10 @@ getByPlaceholderText
getByText
+
+
getByText within
+
+
getByLabelText
diff --git a/cypress/integration/commands.spec.js b/cypress/integration/commands.spec.js
index 7fbbd0f..fe813e9 100644
--- a/cypress/integration/commands.spec.js
+++ b/cypress/integration/commands.spec.js
@@ -36,6 +36,20 @@ describe('dom-testing-library commands', () => {
cy.queryByText('Button Text').should('exist')
cy.queryByText('Non-existing Button Text').should('not.exist')
})
+
+ it('getByText within', () => {
+ cy.get('#nested')
+ .within(() => {
+ cy.getByText('Button Text').click()
+ })
+ })
+
+ it('getByText in container', () => {
+ cy.get('#nested')
+ .then((subject) => {
+ cy.getByText('Button Text', { container: subject }).click()
+ })
+ })
})
/* global cy */
diff --git a/package.json b/package.json
index 209dc12..27c349f 100644
--- a/package.json
+++ b/package.json
@@ -13,8 +13,8 @@
"test": "npm-run-all --parallel test:unit test:cypress",
"test:unit": "kcd-scripts test --no-watch",
"test:unit:watch": "kcd-scripts test",
- "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",
"test:cypress:open": "cypress open",
"test:cypress": "npm-run-all --silent --parallel --race test:cypress:serve test:cypress:run",
"test:cypress:dev": "npm-run-all --silent --parallel --race test:cypress:serve test:cypress:open",
@@ -45,7 +45,8 @@
"cypress": "^3.0.1",
"kcd-scripts": "^0.37.0",
"npm-run-all": "^4.1.2",
- "serve": "^7.2.0"
+ "serve": "^7.2.0",
+ "wait-port": "^0.2.2"
},
"peerDependencies": {
"cypress": "^2.1.0 || ^3.0.0"
diff --git a/src/add-commands.js b/src/add-commands.js
index 52d90ba..43e8f14 100644
--- a/src/add-commands.js
+++ b/src/add-commands.js
@@ -1,7 +1,7 @@
import {commands} from './'
commands.forEach(({name, command}) => {
- Cypress.Commands.add(name, command.bind(null, cy))
+ Cypress.Commands.add(name, command)
})
-/* global Cypress, cy */
+/* global Cypress */
diff --git a/src/index.js b/src/index.js
index b9fa208..095004c 100644
--- a/src/index.js
+++ b/src/index.js
@@ -1,4 +1,5 @@
import {queries, waitForElement} from 'dom-testing-library'
+import {getContainer} from './utils'
const defaults = {
timeout: 3000,
@@ -7,17 +8,19 @@ const defaults = {
const commands = Object.keys(queries).map(queryName => {
return {
name: queryName,
- command: (cy, ...args) => {
+ command: (...args) => {
const lastArg = args[args.length - 1]
const waitOptions = (typeof lastArg === 'object')
? Object.assign({}, defaults, lastArg)
: defaults
const queryImpl = queries[queryName]
- const baseCommandImpl = doc =>
- waitForElement(() => queryImpl(doc, ...args), Object.assign({}, waitOptions, {
- container: doc,
+ const baseCommandImpl = doc => {
+ const container = getContainer(waitOptions.container || doc);
+ return waitForElement(() => queryImpl(container, ...args), Object.assign({}, waitOptions, {
+ container,
}))
+ }
let commandImpl
if (
queryName.startsWith('queryBy') ||
@@ -64,4 +67,4 @@ const commands = Object.keys(queries).map(queryName => {
export {commands}
/* eslint no-new-func:0 */
-/* globals Cypress */
+/* globals Cypress, cy */
diff --git a/src/utils.js b/src/utils.js
new file mode 100644
index 0000000..abe38b9
--- /dev/null
+++ b/src/utils.js
@@ -0,0 +1,21 @@
+function getFirstElement(jqueryOrElement) {
+ if (Cypress.dom.isJquery(jqueryOrElement)) {
+ return jqueryOrElement.get(0)
+ }
+ return jqueryOrElement
+}
+
+function getContainer(container) {
+ const withinContainer = cy.state('withinSubject')
+ if (withinContainer) {
+ return getFirstElement(withinContainer)
+ }
+ return getFirstElement(container)
+}
+
+export {
+ getFirstElement,
+ getContainer,
+}
+
+/* globals Cypress, cy */