@testing-library/cypress - npm Package Compare versions

Comparing version 4.2.0 to 5.0.0-alpha.0

dist/index.js

@@ -8,8 +8,2 @@ "use strict";
 });
-Object.defineProperty(exports, "configure", {
-  enumerable: true,
-  get: function () {
-    return _dom.configure;
-  }
-});
 exports.commands = void 0;
@@ -29,5 +23,33 @@
 
-const commands = Object.keys(_dom.queries).map(queryName => {
+const queryNames = Object.keys(_dom.queries);
+const getRegex = /^get/;
+const queryRegex = /^query/;
+const findRegex = /^find/;
+const getQueryNames = queryNames.filter(q => getRegex.test(q));
+const queryQueryNames = queryNames.filter(q => queryRegex.test(q));
+const findQueryNames = queryNames.filter(q => findRegex.test(q));
+const getCommands = getQueryNames.map(queryName => {
   return {
     name: queryName,
+    command: () => {
+      Cypress.log({
+        name: queryName
+      });
+      throw new Error(`You used '${queryName}' which has been removed from Cypress Testing Library because it does not make sense in this context. Please use '${queryName.replace(getRegex, 'find')}' instead.`);
+    }
+  };
+});
+const queryCommands = queryQueryNames.map(queryName => {
+  return createCommand(queryName, queryName);
+});
+const findCommands = findQueryNames.map(queryName => {
+  // dom-testing-library find* queries use a promise to look for an element, but that doesn't work well with Cypress retryability
+  // Use the query* commands so that we can lean on Cypress to do the retry for us
+  // When it does return a null or empty array, Cypress will retry until the assertions are satisfied or the command times out
+  return createCommand(queryName, queryName.replace(findRegex, 'query'));
+});
+
+function createCommand(queryName, implementationName) {
+  return {
+    name: queryName,
     command: (...args) => {
@@ -37,53 +59,95 @@ const lastArg = args[args.length - 1];
       const waitOptions = typeof lastArg === 'object' ? (0, _extends2.default)({}, defaults, {}, lastArg) : defaults;
-      const queryImpl = _dom.queries[queryName];
+      const queryImpl = _dom.queries[implementationName];
 
       const baseCommandImpl = doc => {
         const container = (0, _utils.getContainer)(waitOptions.container || doc);
-        return (0, _dom.waitForElement)(() => queryImpl(container, ...args), (0, _extends2.default)({}, waitOptions, {
-          container
-        }));
+        return queryImpl(container, ...args);
       };
 
-      let commandImpl;
+      const commandImpl = doc => baseCommandImpl(doc);
 
-      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);
+      const inputArr = args.filter(filterInputs);
+      const consoleProps = {
+        // TODO: Would be good to completely separate out the types of input into their own properties
+        input: inputArr
+      };
+      Cypress.log({
+        $el: inputArr,
+        name: queryName,
+        message: inputArr,
+        consoleProps: () => consoleProps
+      });
       return cy.window({
         log: false
-      }).then({
-        timeout: waitOptions.timeout + 100
-      }, thenHandler).then(subject => {
-        Cypress.log({
-          $el: subject,
-          name: queryName,
-          message: args.filter(value => {
-            if (Array.isArray(value) && value.length === 0) {
-              return false;
-            }
+      }).then(thenArgs => {
+        const getValue = () => {
+          const value = commandImpl(thenArgs.document);
+          const result = Cypress.$(value); // Overriding the selector of the jquery object because it's displayed in the long message of .should('exist') failure message
+          // Hopefully it makes it clearer, because I find the normal response of "Expected to find element '', but never found it" confusing
 
-            if (value instanceof RegExp) {
-              return value.toString();
-            }
+          result.selector = `${queryName}(${queryArgument(args)})`;
 
-            if (typeof value === 'object' && Object.keys(value).length === 0) {
-              return false;
-            }
+          if (result.length > 0) {
+            consoleProps.yielded = result.toArray();
+          }
 
-            return Boolean(value);
-          })
+          return result;
+        };
+
+        const resolveValue = () => {
+          // retry calling "getValue" until following assertions pass or this command times out
+          return Cypress.Promise.try(getValue).then(value => {
+            return cy.verifyUpcomingAssertions(value, waitOptions, {
+              onRetry: resolveValue
+            });
+          });
+        };
+
+        if (queryRegex.test(queryName)) {
+          // For get* queries, do not retry
+          return getValue();
+        }
+
+        return resolveValue().then(subject => {
+          // Remove the error that occurred because it is irrelevant now
+          if (consoleProps.error) {
+            delete consoleProps.error;
+          }
+
+          return subject;
         });
-        return subject;
       });
     }
   };
-});
+}
+
+function filterInputs(value) {
+  if (Array.isArray(value) && value.length === 0) {
+    return false;
+  }
+
+  if (value instanceof RegExp) {
+    return value.toString();
+  }
+
+  if (typeof value === 'object' && Object.keys(value).length === 0) {
+    return false;
+  }
+
+  return Boolean(value);
+}
+
+function queryArgument(args) {
+  const input = args.find(value => {
+    return value instanceof RegExp || typeof value === 'string';
+  });
+
+  if (input && typeof input === 'string') {
+    return `\`${input}\``;
+  }
+
+  return input;
+}
+
+const commands = [...getCommands, ...findCommands, ...queryCommands];
 /* eslint no-new-func:0, complexity:0 */
@@ -90,0 +154,0 @@

package.json

 {
   "name": "@testing-library/cypress",
-  "version": "4.2.0",
+  "version": "5.0.0-alpha.0",
   "description": "Simple and complete custom Cypress commands and utilities that encourage good testing practices.",
@@ -5,0 +5,0 @@ "main": "dist/index.js",

README.md

@@ -28,3 +28,3 @@ <div align="center">
 
-[![All Contributors](https://img.shields.io/badge/all_contributors-22-orange.svg?style=flat-square)](#contributors)
+[![All Contributors](https://img.shields.io/badge/all_contributors-21-orange.svg?style=flat-square)](#contributors)
 [![PRs Welcome][prs-badge]][prs] [![Code of Conduct][coc-badge]][coc]
@@ -170,5 +170,2 @@
   </tr>
-  <tr>
-    <td align="center"><a href="https://github.com/Megoos"><img src="https://avatars2.githubusercontent.com/u/9866017?v=4" width="100px;" alt="Mikhail Guskov"/><br /><sub><b>Mikhail Guskov</b></sub></a><br /><a href="https://github.com/testing-library/cypress-testing-library/issues?q=author%3AMegoos" title="Bug reports">🐛</a></td>
-  </tr>
 </table>
@@ -175,0 +172,0 @@

New alerts

No v1

Quality

Package is not semver >=1. This means it is not stable and does not support ^ ranges.

Found 1 instance in 1 package

Fixed alerts

Uses eval

Supply chain risk

Package uses eval() which is a dangerous function. This prevents the code from running in certain environments and increases the risk that the code may contain exploits or malicious behavior.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

24852

increased by8.56%

Lines of code

156

increased by50%

Number of medium supply chain risk alerts

0

decreased by-100%

Worsened metrics

Number of low quality alerts

1

increased byInfinity%

Number of lines in readme file

221

decreased by-1.34%

No dependency changes