Skip to content

Release Beta #122

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.

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 4 commits into from
Mar 12, 2020
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
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: 1 addition & 2 deletions .gitattributes
Original file line number Diff line number Diff line change
@@ -1,2 +1 @@
* text=auto
*.js text eol=lf
* text=auto eol=lf
4 changes: 0 additions & 4 deletions .gitignore
Original file line number Diff line number Diff line change
@@ -1,11 +1,7 @@
node_modules
coverage
dist
.opt-in
.opt-out
.DS_Store
.eslintcache
.idea/

# these cause more harm than good
# when working with contributors
Expand Down
3 changes: 1 addition & 2 deletions .prettierignore
Original file line number Diff line number Diff line change
@@ -1,4 +1,3 @@
package.json
node_modules
dist
coverage
dist
11 changes: 0 additions & 11 deletions .prettierrc

This file was deleted.

1 change: 1 addition & 0 deletions .prettierrc.js
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
module.exports = require('kcd-scripts/prettier')
69 changes: 34 additions & 35 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -57,7 +57,6 @@ This allows you to use all the useful
<!-- START doctoc generated TOC please keep comment here to allow auto update -->
<!-- DON'T EDIT THIS SECTION, INSTEAD RE-RUN doctoc TO UPDATE -->


- [Installation](#installation)
- [With TypeScript](#with-typescript)
- [Usage](#usage)
Expand All @@ -79,7 +78,8 @@ npm install --save-dev @testing-library/cypress

### With TypeScript

Typings are defined in `@types/testing-library__cypress` at [DefinitelyTyped](https://github.com/DefinitelyTyped/DefinitelyTyped/tree/master/types/testing-library__cypress),
Typings are defined in `@types/testing-library__cypress` at
[DefinitelyTyped](https://github.com/DefinitelyTyped/DefinitelyTyped/tree/master/types/testing-library__cypress),
and should be added as follows in `tsconfig.json`:

```json
Expand All @@ -100,11 +100,12 @@ Add this line to your project's `cypress/support/commands.js`:
import '@testing-library/cypress/add-commands'
```

You can now use all of `DOM Testing Library`'s `findBy`, `findAllBy`, `queryBy`
and `queryAllBy` commands.
You can now use all of `DOM Testing Library`'s `findBy` and `findAllBy`
commands.
[See the `DOM Testing Library` docs for reference](https://testing-library.com)

You can find [all Library definitions here](https://github.com/DefinitelyTyped/DefinitelyTyped/tree/master/types/testing-library__cypress/index.d.ts).
You can find
[all Library definitions here](https://github.com/DefinitelyTyped/DefinitelyTyped/tree/master/types/testing-library__cypress/index.d.ts).

To configure DOM Testing Library, use the following custom command:

Expand All @@ -113,46 +114,43 @@ cy.configureCypressTestingLibrary(config)
```

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

```javascript
cy.queryAllByText('Button Text').should('exist')
cy.queryAllByText('Non-existing Button Text').should('not.exist')
cy.queryAllByLabelText('Label text', {timeout: 7000}).should('exist')
cy.findAllByText('Jackie Chan').click();
cy.findAllByText('Button Text').should('exist')
cy.findAllByText('Non-existing Button Text').should('not.exist')
cy.findAllByLabelText('Label text', {timeout: 7000}).should('exist')
cy.findAllByText('Jackie Chan').click()

// findAllByText _inside_ a form element
cy.get('form').within(() => {
cy.findAllByText('Button Text').should('exist')
})
cy.get('form').then(subject => {
cy.findAllByText('Button Text', {container: subject}).should('exist')
})
cy.get('form').findAllByText('Button Text').should('exist')
cy.get('form')
.findAllByText('Button Text')
.should('exist')
```

### Differences from DOM Testing Library

`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.

`get*` queries are disabled. `find*` queries do not use the Promise API of
`DOM Testing Library`, but instead forward to the `get*` queries and use Cypress'
built-in retryability using error messages from `get*` APIs to forward as error
messages if a query fails. `query*` also uses `get*` APIs, but disables retryability.

`findAll*` can select more than one element and is closer in functionality to how
Cypress built-in commands work. `findAll*` is preferred to `find*` queries.
`find*` commands will fail if more than one element is found that matches the criteria
which is not how built-in Cypress commands work, but is provided for closer compatibility
to other Testing Libraries.

Cypress handles actions when there is only one element found. For example, the following
will work without having to limit to only 1 returned element. The `cy.click` will
automatically fail if more than 1 element is returned by the `findAllByText`:
expects DOM nodes. When you chain a query, it will get the first DOM node from
`subject` of the collection and use that as the `container` parameter for the
`DOM Testing Library` functions.

`get*` and `query*` queries are disabled. `find*` queries do not use the Promise
API of `DOM Testing Library`, but instead forward to the `get*` queries and use
Cypress' built-in retryability using error messages from `get*` APIs to forward
as error messages if a query fails.

`findAll*` can select more than one element and is closer in functionality to
how Cypress built-in commands work. `find*` commands will fail if more than one
element is found that matches the criteria which is not how built-in Cypress
commands work, but is provided for closer compatibility to other Testing
Libraries.

Cypress handles actions when there is only one element found. For example, the
following will work without having to limit to only 1 returned element. The
`cy.click` will automatically fail if more than 1 element is returned by the
`findAllByText`:

```javascript
cy.findAllByText('Some Text').click()
Expand Down Expand Up @@ -237,6 +235,7 @@ Thanks goes to these people ([emoji key][emojis]):

<!-- markdownlint-enable -->
<!-- prettier-ignore-end -->

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

This project follows the [all-contributors][all-contributors] specification.
Expand Down
18 changes: 0 additions & 18 deletions cypress/integration/configure.spec.js

This file was deleted.

22 changes: 1 addition & 21 deletions cypress/integration/find.spec.js
Original file line number Diff line number Diff line change
Expand Up @@ -108,7 +108,7 @@ describe('find* dom-testing-library commands', () => {

it('findByText with a previous subject', () => {
cy.get('#nested')
.findByText('Button Text 1', {fallbackRetryWithoutPreviousSubject: false})
.findByText('Button Text 1')
.should('not.exist')
cy.get('#nested')
.findByText('Button Text 2')
Expand Down Expand Up @@ -188,15 +188,6 @@ describe('find* dom-testing-library commands', () => {
cy.findByText(/^Button Text/i, {timeout: 100})
})

it('findByText should not break existing code', () => {
cy.window()
.findByText('Button Text 1')
.should('exist')
cy.location()
.findByText('Button Text 1')
.should('exist')
})

it('findByText should show as a parent command if it starts a chain', () => {
const assertLog = (attrs, log) => {
if (log.get('name') === 'findByText') {
Expand All @@ -218,17 +209,6 @@ describe('find* dom-testing-library commands', () => {
cy.on('log:added', assertLog)
cy.get('body').findByText('Button Text 1')
})

it('should chain findBy* with subject different of document, element or window', () => {
cy.wrap(true)
.should('be.true')
.findByText('Error message')
.findByLabelText(/Required/i)
.type('something')
.findByText('Submit')
.queryByText('Error message')
.should('not.be.visible')
})
})

/* global cy */
Loading