feat: support queryBy* queryAllBy* (#5)

* initial work for enabling queries * update docs, contributors * fixed typo
testing-library · May 5, 2018 · 04c5850 · 04c5850
1 parent adf3d83
commit 04c5850
Show file tree

Hide file tree

Showing 5 changed files with 76 additions and 34 deletions.
diff --git a/.all-contributorsrc b/.all-contributorsrc
@@ -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"

diff --git a/README.md b/README.md
@@ -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]
 
@@ -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)
@@ -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
 
@@ -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 -->
 

diff --git a/cypress/integration/commands.spec.js b/cypress/integration/commands.spec.js
@@ -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 */
diff --git a/src/__tests__/__snapshots__/commands.js.snap b/src/__tests__/__snapshots__/commands.js.snap
@@ -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",
 ]

diff --git a/src/index.js b/src/index.js
@@ -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,
+        })
+      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}