Skip to content

queryBy* queryAllBy* #5

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
merged 3 commits into from
May 5, 2018
Merged

queryBy* queryAllBy* #5

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
e9dc4eb
initial work for enabling queries
lgandecki May 5, 2018
80c79f7
update docs, contributors
lgandecki May 5, 2018
3e60b35
fixed typo
lgandecki May 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
10 changes: 10 additions & 0 deletions .all-contributorsrc
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -28,6 +28,16 @@
"code",
"ideas"
]
},
{
"login": "lgandecki",
"name": "Łukasz Gandecki",
"avatar_url": "https://avatars1.githubusercontent.com/u/4002543?v=4",
"profile": "http://team.thebrain.pro",
"contributions": [
"code",
"test"
]
}
],
"repoType": "github"
Expand Down
17 changes: 12 additions & 5 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,7 @@
[![downloads][downloads-badge]][npmtrends]
[![MIT License][license-badge]][license]

[![All Contributors](https://img.shields.io/badge/all_contributors-2-orange.svg?style=flat-square)](#contributors)
[![All Contributors](https://img.shields.io/badge/all_contributors-3-orange.svg?style=flat-square)](#contributors)
[![PRs Welcome][prs-badge]][prs]
[![Code of Conduct][coc-badge]][coc]

Expand All @@ -42,7 +42,6 @@ This allows you to use all the useful [`dom-testing-library`][dom-testing-librar

* [Installation](#installation)
* [Usage](#usage)
* [Inspiration](#inspiration)
* [Other Solutions](#other-solutions)
* [Contributors](#contributors)
* [LICENSE](#license)
Expand All @@ -68,7 +67,15 @@ Add this line to your project's `cypress/support/commands.js`:
import 'cypress-testing-library/add-commands';
```

You can now use all of `dom-testing-library`'s `getBy` and `getAllBy` commands. [See `dom-testing-library` repo for reference](https://github.com/kentcdodds/dom-testing-library#usage)
You can now use all of `dom-testing-library`'s `getBy`, `getAllBy`, `queryBy` and `queryAllBy` commands. [See `dom-testing-library` repo for reference](https://github.com/kentcdodds/dom-testing-library#usage)

To show some simple examples (from [cypress/integration/commands.spec.js](cypress/integration/commands.spec.js)):

```javascript
cy.getAllByText('Jackie Chan').click()
cy.queryByText('Button Text').should('exist')
cy.queryByText('Non-existing Button Text').should('not.exist')
```

## Other Solutions

Expand All @@ -82,8 +89,8 @@ 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://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") |
| :---: | :---: | :---: |

<!-- ALL-CONTRIBUTORS-LIST:END -->

Expand Down
5 changes: 5 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 @@ -31,6 +31,11 @@ describe('dom-testing-library commands', () => {
it('getAllByText', () => {
cy.getAllByText('Jackie Chan').click({multiple: true})
})

it('queryByText', () => {
cy.queryByText('Button Text').should('exist')
cy.queryByText('Non-existing Button Text').should('not.exist')
})
})

/* global cy */
10 changes: 10 additions & 0 deletions src/__tests__/__snapshots__/commands.js.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,14 +2,24 @@

exports[`exports expected commands 1`] = `
Array [
"queryByPlaceholderText",
"queryAllByPlaceholderText",
"getByPlaceholderText",
"getAllByPlaceholderText",
"queryByText",
"queryAllByText",
"getByText",
"getAllByText",
"queryByLabelText",
"queryAllByLabelText",
"getByLabelText",
"getAllByLabelText",
"queryByAltText",
"queryAllByAltText",
"getByAltText",
"getAllByAltText",
"queryByTestId",
"queryAllByTestId",
"getByTestId",
"getAllByTestId",
]
Expand Down
68 changes: 39 additions & 29 deletions src/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,39 +1,49 @@
import {queries, waitForElement} from 'dom-testing-library'

const commands = Object.keys(queries)
.filter(
queryName =>
queryName.startsWith('getBy') || queryName.startsWith('getAllBy'),
)
.map(queryName => {
return {
name: queryName,
command: (cy, ...args) => {
const queryImpl = queries[queryName]
const commandImpl = doc =>
waitForElement(() => queryImpl(doc, ...args), {container: doc})
const thenHandler = new Function(
'commandImpl',
`
const commands = Object.keys(queries).map(queryName => {
return {
name: queryName,
command: (cy, ...args) => {
const queryImpl = queries[queryName]
const baseCommandImpl = doc =>
waitForElement(() => queryImpl(doc, ...args), {
container: doc,
timeout: 3000,
Copy link
Collaborator

Choose a reason for hiding this comment

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

It's not related directly to the subject of this PR, but as you're adding hardcoded timeout: 3000 I would suggest adding a way to pass these defaults to the command, e.g. use the argument that follows query arguments, something like args[queryImpl.length] (hacky generic way, queryImpl arity plus one) as an options object of structure like { timeout: 3000, waitForElementOptions: { ... } } (timeout as a top-level option because it may be used in multiple lower-level calls, not just in waitForElement call).

P.S. Cypress default timeout is 4000, not 3000.

Copy link
Member

Choose a reason for hiding this comment

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

If we do the same timeout as Cypress, we run the risk of Cypress timing out before us. Could we make the Cypress timeout 5000ms for this command to deal with that issue?

Copy link
Collaborator

Choose a reason for hiding this comment

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

I did this in getVisuallyBelow command (maintained in proprietary closed source for now, easier to test there):

    chain = chain
      .then({
        timeout: waitForElementOptionsWithDefaults.timeout + 100,
        log: false,
      }, thenHandler);

Copy link
Member

Choose a reason for hiding this comment

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

Looks perfect

Copy link
Collaborator

Choose a reason for hiding this comment

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

The timeout option to cy builtins overrides the default Cypress timeout. I was saying that we should default to the same number in our options.

Copy link
Collaborator

Choose a reason for hiding this comment

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

Cypress.Commands.add('getVisuallyBelow', { prevSubject: 'element' }, (
  subject,
  matcher,
  {
    log,
    timeout = 4000,
    selector = '*',
    verticalDistThreshold = 0,
    horizontalDistThreshold = -12,
    waitForElementOptions = {},
  } = {}
) => {

})
let commandImpl
if (
queryName.startsWith('queryBy') ||
queryName.startsWith('queryAllBy')
) {
commandImpl = doc =>
baseCommandImpl(doc).catch(_ =>
doc.querySelector('.___cypressNotExistingSelector'),
)
} else {
commandImpl = doc => baseCommandImpl(doc)
}
const thenHandler = new Function(
'commandImpl',
`
return function Command__${queryName}(thenArgs) {
return commandImpl(thenArgs.document)
}
`,
)(commandImpl)
return cy
.window({log: false})
.then(thenHandler)
.then(subject => {
Cypress.log({
$el: subject,
name: queryName,
message: args,
})
return subject
)(commandImpl)
return cy
.window({log: false})
.then(thenHandler)
.then(subject => {
Cypress.log({
$el: subject,
name: queryName,
message: args,
})
},
}
})
return subject
})
},
}
})

export {commands}

Expand Down