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
Allow to change query timeout. #6
Comments
Sounds great 👍 |
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;
});
}); |
Thanks for the advice. |
cypress-testing-library
version: 2.0.0node
version: 8.4.0npm
version: 5.3.0Problem 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 inwaitForElement
, liketimeout: timeout || 3000
.I'll create a PR this weekend.
The text was updated successfully, but these errors were encountered: