Allow to change query timeout.

[npeterkamps]

• cypress-testing-library version: 2.0.0
• node version: 8.4.0
• npm version: 5.3.0

Problem description:

Currently, the timeout for queries is hard-coded to 3000:
https://github.com/kentcdodds/cypress-testing-library/blob/master/src/index.js#L11

When I visit my app, it shows a loading indicator, which takes more than 3 seconds. I can add a cy.wait to make things work, but if the website gets faster, that wait just slows everything down. So I'd like to be able to configure the timeout as an option to the query functions.

Suggested solution:

Destructure the last option in the command function {timeout, ...args} and use it in waitForElement, like timeout: timeout || 3000.

I'll create a PR this weekend.

[kentcdodds]

Sounds great 👍

[sompylasar]

Yes! Please consider the following, notice the timeout + 100 for cypress builtin to make the waitForElement's exception to show up instead of cypress builtin timeout exception (not pushed to cypress-testing-library yet):

/* eslint-disable import/no-extraneous-dependencies */
/* globals Cypress */

import { waitForElement, matches as domTestingLibraryTextMatches } from 'dom-testing-library';
import 'cypress-testing-library/add-commands';

import {
  makeCypressCommandLog,
  makeElementDebugString,
  getNodeFullText,
} from '../support/utils';

Cypress.Commands.add('getVisuallyBelow', { prevSubject: 'element' }, (
  subject,
  matcher,
  {
    log,
    timeout = 4000,
    selector = '*',
    verticalDistThreshold = 0,
    horizontalDistThreshold = -12,
    waitForElementOptions = {},
  } = {}
) => {
  const result = {};
  makeCypressCommandLog({
    name: 'getVisuallyBelow',
    message: String(matcher),
    subject: subject,
    consoleProps: {
      subject,
      matcher,
      timeout,
      selector,
      verticalDistThreshold,
      horizontalDistThreshold,
      waitForElementOptions,
      result,
    },
    logEnabled: log,
  })((chain, { logName, logMessage }) => {
    const domNode = subject.get(0);
    const doc = domNode.ownerDocument;

    const waitForElementOptionsWithDefaults = Object.assign(
      {
        timeout: timeout,
      },
      waitForElementOptions,
      {
        container: doc,
      }
    );

    const candidateMatcher = (
      typeof matcher === 'function'
        ? (candidate) => matcher(candidate.el)
        : (candidate) => domTestingLibraryTextMatches(getNodeFullText(candidate.el), candidate.el, matcher)
    );

    const thenHandler = () => (
      waitForElement(() => {
        const rect = domNode.getBoundingClientRect();
        if (!rect || !Cypress.dom.isVisible(domNode)) {
          Object.assign(result, { subjectVisible: false, rect: null });
          return null;
        }

        Object.assign(result, { subjectVisible: true, rect: rect });

        const candidates = Array.from(doc.querySelectorAll(selector))
          .filter((el) => Cypress.dom.isVisible(el))
          .map((el) => {
            const computedStyle = window.getComputedStyle(el);
            let zIndex = 0;
            let parentNode = el;
            while (parentNode) {
              try {
                const style =
                  parentNode === el ? computedStyle : window.getComputedStyle(parentNode);
                const zIndexCss = parseInt(style.zIndex || '', 10);
                if (style.position !== 'static' && !isNaN(zIndexCss)) {
                  zIndex = zIndexCss;
                }
              }
              catch (ex) {
                // IGNORE_EXCEPTION
              }
              parentNode = parentNode.parentNode;
            }
            const matchingRect = el.getBoundingClientRect();
            const area = matchingRect.width * matchingRect.height;
            const verticalDist = (matchingRect.top - rect.bottom);
            const horizontalDist = (matchingRect.left - rect.left);
            return {
              el,
              rect: matchingRect,
              verticalDist,
              horizontalDist,
              zIndex,
              area,
              fullText: getNodeFullText(el),
            };
          })
          .filter(({ verticalDist, horizontalDist }) => (
            verticalDist >= verticalDistThreshold &&
            horizontalDist >= horizontalDistThreshold
          ));

        candidates.sort((left, right) => (
          left.zIndex - right.zIndex !== 0
            ? -(left.zIndex - right.zIndex)
            : (
              left.verticalDist - right.verticalDist !== 0
                ? left.verticalDist - right.verticalDist
                : (
                  left.horizontalDist - right.horizontalDist !== 0
                    ? left.horizontalDist - right.horizontalDist
                    : left.area - right.area
                )
            )
        ));

        const candidatesMatched = candidates.filter((candidate) => candidateMatcher(candidate));

        Object.assign(result, { candidates, candidatesMatched });

        return (candidatesMatched[0] ? candidatesMatched[0].el : null);
      }, waitForElementOptionsWithDefaults)
        .catch((error) => {
          throw new Error(logName + ' failed: ' + thenHandler.toString() + '\n' + error.message);
        })
    );

    thenHandler.toString = () => {
      return (
        logName + ' ' +
        logMessage +
        (result ? ' ' + JSON.stringify(result, (key, value) => {
          if (value && value.nodeName) {
            return makeElementDebugString(value);
          }
          if (Array.isArray(value)) {
            return value;
          }
          if (typeof value === 'object') {
            const ret = {};
            for (const x in value) {  // eslint-disable-line no-restricted-syntax
              ret[x] = value[x];
            }
            return ret;
          }
          return value;
        }, 2) : '')
      );
    };

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

    return chain;
  });
});

[npeterkamps]

Please consider the following, notice the timeout + 100 for cypress builtin to make the waitForElement's exception to show up instead of cypress builtin timeout exception (not pushed to cypress-testing-library yet)

Thanks for the advice.