From 6c7f3e08bb400c840d837f5a1617b00fc31f296b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Maciej=20Jastrze=CC=A8bski?= Date: Wed, 8 Jan 2025 15:07:20 +0100 Subject: [PATCH] improve debug details --- src/fire-event.ts | 44 ++++++++++++++++++-------- src/helpers/format-default.ts | 2 ++ src/helpers/format-element.ts | 1 - src/user-event/utils/dispatch-event.ts | 7 ++++ 4 files changed, 39 insertions(+), 15 deletions(-) diff --git a/src/fire-event.ts b/src/fire-event.ts index 5931ca9d1..e2f32654e 100644 --- a/src/fire-event.ts +++ b/src/fire-event.ts @@ -49,29 +49,43 @@ const textInputEventsIgnoringEditableProp = new Set([ 'onScroll', ]); -export function isEventEnabled( +type EventHandlerState = { + enabled: boolean; + reason?: string; +}; + +function getEventHandlerState( element: ReactTestInstance, eventName: string, nearestTouchResponder?: ReactTestInstance, -) { +): EventHandlerState { if (nearestTouchResponder != null && isHostTextInput(nearestTouchResponder)) { - return ( - isEditableTextInput(nearestTouchResponder) || - textInputEventsIgnoringEditableProp.has(eventName) - ); + if (isEditableTextInput(nearestTouchResponder)) { + return { enabled: true }; + } + + if (textInputEventsIgnoringEditableProp.has(eventName)) { + return { enabled: true }; + } + + return { enabled: false, reason: '"editable" prop' }; } if (eventsAffectedByPointerEventsProp.has(eventName) && !isPointerEventEnabled(element)) { - return false; + return { enabled: false, reason: '"pointerEvents" prop' }; } const touchStart = nearestTouchResponder?.props.onStartShouldSetResponder?.(); const touchMove = nearestTouchResponder?.props.onMoveShouldSetResponder?.(); if (touchStart || touchMove) { - return true; + return { enabled: true }; } - return touchStart === undefined && touchMove === undefined; + if (touchStart === undefined && touchMove === undefined) { + return { enabled: true }; + } + + return { enabled: false, reason: 'not a touch responder' }; } function findEventHandler( @@ -83,13 +97,15 @@ function findEventHandler( const handler = getEventHandler(element, eventName); if (handler) { - if (isEventEnabled(element, eventName, touchResponder)) { + const handlerState = getEventHandlerState(element, eventName, touchResponder); + + if (handlerState.enabled) { return handler; } else { logger.warn( - `FireEvent "${eventName}": event handler is disabled on ${formatElement(element, { + `FireEvent: "${eventName}" event handler is disabled on ${formatElement(element, { minimal: true, - })}`, + })} (${handlerState.reason}).`, ); } } @@ -142,9 +158,9 @@ function fireEvent(element: ReactTestInstance, eventName: EventName, ...data: un const handler = findEventHandler(element, eventName); if (!handler) { logger.warn( - `FireEvent "${eventName}": no event handler found on ${formatElement(element, { + `FireEvent: no enabled event handler for "${eventName}" found on ${formatElement(element, { minimal: true, - })} or its ancestors`, + })} or its ancestors.`, ); return; } diff --git a/src/helpers/format-default.ts b/src/helpers/format-default.ts index 7ee42b5b1..72d2f5664 100644 --- a/src/helpers/format-default.ts +++ b/src/helpers/format-default.ts @@ -24,9 +24,11 @@ const propsToDisplay = [ 'aria-valuenow', 'aria-valuetext', 'defaultValue', + 'editable', 'importantForAccessibility', 'nativeID', 'placeholder', + 'pointerEvents', 'role', 'testID', 'title', diff --git a/src/helpers/format-element.ts b/src/helpers/format-element.ts index fae33bbec..b9a00da37 100644 --- a/src/helpers/format-element.ts +++ b/src/helpers/format-element.ts @@ -1,7 +1,6 @@ import { ElementType } from 'react'; import { ReactTestInstance } from 'react-test-renderer'; import prettyFormat, { plugins } from 'pretty-format'; -import redent from 'redent'; import { defaultMapProps } from './format-default'; export type FormatElementOptions = { diff --git a/src/user-event/utils/dispatch-event.ts b/src/user-event/utils/dispatch-event.ts index d1202fd54..6249b1bc8 100644 --- a/src/user-event/utils/dispatch-event.ts +++ b/src/user-event/utils/dispatch-event.ts @@ -1,6 +1,8 @@ import { ReactTestInstance } from 'react-test-renderer'; import act from '../../act'; import { isElementMounted } from '../../helpers/component-tree'; +import { formatElement } from '../../helpers/format-element'; +import { logger } from '../../helpers/logger'; /** * Basic dispatch event function used by User Event module. @@ -16,6 +18,11 @@ export function dispatchEvent(element: ReactTestInstance, eventName: string, ... const handler = getEventHandler(element, eventName); if (!handler) { + logger.debug( + `User Event: no event handler for "${eventName}" found on ${formatElement(element, { + minimal: true, + })}`, + ); return; }