Skip to content

feat(within): Support cy.within #11

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
kentcdodds merged 3 commits into from
Jun 5, 2018
Merged

feat(within): Support cy.within #11

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
72510dc
feat(within): Support cy.within. Also support passing in a container …
npeterkamps Jun 3, 2018
6394e7e
Improvements based on feedback.
npeterkamps Jun 4, 2018
68237c9
Use the cy global.
npeterkamps Jun 5, 2018
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 2 additions & 1 deletion .all-contributorsrc
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -47,7 +47,8 @@
"contributions": [
"code",
"doc",
"ideas"
"ideas",
"test"
]
}
],
Expand Down
8 changes: 7 additions & 1 deletion README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -74,6 +74,12 @@ 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')
})
```

## Other Solutions
Expand All @@ -87,7 +93,7 @@ Thanks goes to these people ([emoji key][emojis]):

<!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section -->
<!-- prettier-ignore -->
| [<img src="https://avatars.githubusercontent.com/u/1500684?v=3" width="100px;"/><br /><sub><b>Kent C. Dodds</b></sub>](https://kentcdodds.com)<br />[💻](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") | [<img src="https://avatars2.githubusercontent.com/u/498274?v=4" width="100px;"/><br /><sub><b>Ivan Babak</b></sub>](https://sompylasar.github.io)<br />[💻](https://github.com/kentcdodds/cypress-testing-library/commits?author=sompylasar "Code") [🤔](#ideas-sompylasar "Ideas, Planning, & Feedback") | [<img src="https://avatars1.githubusercontent.com/u/4002543?v=4" width="100px;"/><br /><sub><b>Łukasz Gandecki</b></sub>](http://team.thebrain.pro)<br />[💻](https://github.com/kentcdodds/cypress-testing-library/commits?author=lgandecki "Code") [⚠️](https://github.com/kentcdodds/cypress-testing-library/commits?author=lgandecki "Tests") | [<img src="https://avatars1.githubusercontent.com/u/25429764?v=4" width="100px;"/><br /><sub><b>Peter Kamps</b></sub>](https://github.com/npeterkamps)<br />[💻](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") |
| [<img src="https://avatars.githubusercontent.com/u/1500684?v=3" width="100px;"/><br /><sub><b>Kent C. Dodds</b></sub>](https://kentcdodds.com)<br />[💻](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") | [<img src="https://avatars2.githubusercontent.com/u/498274?v=4" width="100px;"/><br /><sub><b>Ivan Babak</b></sub>](https://sompylasar.github.io)<br />[💻](https://github.com/kentcdodds/cypress-testing-library/commits?author=sompylasar "Code") [🤔](#ideas-sompylasar "Ideas, Planning, & Feedback") | [<img src="https://avatars1.githubusercontent.com/u/4002543?v=4" width="100px;"/><br /><sub><b>Łukasz Gandecki</b></sub>](http://team.thebrain.pro)<br />[💻](https://github.com/kentcdodds/cypress-testing-library/commits?author=lgandecki "Code") [⚠️](https://github.com/kentcdodds/cypress-testing-library/commits?author=lgandecki "Tests") | [<img src="https://avatars1.githubusercontent.com/u/25429764?v=4" width="100px;"/><br /><sub><b>Peter Kamps</b></sub>](https://github.com/npeterkamps)<br />[💻](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") |
| :---: | :---: | :---: | :---: |
<!-- ALL-CONTRIBUTORS-LIST:END -->

Expand Down
4 changes: 4 additions & 0 deletions cypress/fixtures/test-app/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -29,6 +29,10 @@ <h2>getByPlaceholderText</h2>
<section>
<h2>getByText</h2>
<button onclick="this.innerText = 'Button Clicked'">Button Text</button>
<div id="nested">
<h3>getByText within</h3>
<button onclick="this.innerText = 'Button Clicked'">Button Text</button>
</div>
</section>
<section>
<h2>getByLabelText</h2>
Expand Down
14 changes: 14 additions & 0 deletions cypress/integration/commands.spec.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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) => {
Copy link
Collaborator

@sompylasar sompylasar Jun 3, 2018

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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?

Copy link
Collaborator

@sompylasar sompylasar Jun 3, 2018

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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.

cy.getByText('Button Text', { container: subject }).click()
})
})
})

/* global cy */
7 changes: 4 additions & 3 deletions package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Copy link
Collaborator

@sompylasar sompylasar Jun 3, 2018

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

👍

"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",
Expand Down Expand Up @@ -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"
Expand Down
9 changes: 6 additions & 3 deletions src/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
import {queries, waitForElement} from 'dom-testing-library'
import {getContainer} from './support/utils'
Copy link
Collaborator

@sompylasar sompylasar Jun 3, 2018

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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.

Copy link
Collaborator Author

@npeterkamps npeterkamps Jun 4, 2018

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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 😉

Copy link
Collaborator

@sompylasar sompylasar Jun 4, 2018

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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.


const defaults = {
timeout: 3000,
Expand All @@ -14,10 +15,12 @@ const commands = Object.keys(queries).map(queryName => {
: defaults

const queryImpl = queries[queryName]
const baseCommandImpl = doc =>
waitForElement(() => queryImpl(doc, ...args), Object.assign({}, waitOptions, {
container: doc,
const baseCommandImpl = doc => {
const container = getContainer(cy, waitOptions.container || doc);
return waitForElement(() => queryImpl(container, ...args), Object.assign({}, waitOptions, {
container,
}))
}
let commandImpl
if (
queryName.startsWith('queryBy') ||
Expand Down
21 changes: 21 additions & 0 deletions src/support/utils.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,21 @@
function getElement(element) {
Copy link
Collaborator

@sompylasar sompylasar Jun 3, 2018

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

if (Cypress.dom.isJquery(element)) {
return element.get(0)
}
return element
}

function getContainer(cy, container) {
Copy link
Collaborator

@sompylasar sompylasar Jun 3, 2018

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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.

const withinContainer = cy.state('withinSubject')
if (withinContainer) {
return getElement(withinContainer)
}
return getElement(container)
}

export {
getElement,
getContainer,
}

/* globals Cypress */