Merge pull request #48 from Workiva/expose-skip-pointer-event-option

Expose the skipPointerEventsCheck check

.github/workflows/build_and_deploy_docs.yml

@@ -13,7 +13,7 @@ jobs:
     strategy:
       fail-fast: false
       matrix:
-        sdk: [ stable ]
+        sdk: [ 2.13.4 ]
     steps:
       - uses: actions/checkout@v2
       - uses: dart-lang/setup-dart@v1
@@ -26,7 +26,7 @@ jobs:
       - id: build-docs
         name: Build Docs
         run: pub global activate dartdoc && dartdoc --show-undocumented-categories
-        if: ${{ matrix.sdk == 'stable' }}
+        if: ${{ matrix.sdk == '2.13.4' }}
 
       - id: deploy-docs
         name: Deploy Docs 🚀

.github/workflows/dart_ci.yml

@@ -37,15 +37,15 @@ jobs:
 
       - name: Run tests (DDC)
         run: |
-          pub run build_runner test -- -P concurrent-tests
-          pub run build_runner test -- -P non-concurrent-tests
+          dart run build_runner test -- -P concurrent-tests
+          dart run build_runner test -- -P non-concurrent-tests
         timeout-minutes: 10
         if: ${{ always() && steps.install.outcome == 'success' }}
 
       - name: Run tests (dart2js)
         run: |
-          pub run build_runner test -r -- -P concurrent-tests --file-reporter json:reports/${{ matrix.sdk }}/dart2js/concurrent/test-results.json
-          pub run build_runner test -r -- -P non-concurrent-tests --file-reporter json:reports/${{ matrix.sdk }}/dart2js/non-concurrent/test-results.json
+          dart run build_runner test -r -- -P concurrent-tests --file-reporter json:reports/${{ matrix.sdk }}/dart2js/concurrent/test-results.json
+          dart run build_runner test -r -- -P non-concurrent-tests --file-reporter json:reports/${{ matrix.sdk }}/dart2js/non-concurrent/test-results.json
         timeout-minutes: 10
         if: ${{ always() && steps.install.outcome == 'success' }}
 

js_src/package.json

@@ -18,7 +18,7 @@
     "core-js": "3",
     "@testing-library/dom": "^7.30.0",
     "@testing-library/react": "^11.2.5",
-    "@testing-library/user-event": "^13.1.9",
+    "@testing-library/user-event": "^13.5.0",
     "react": "^17.0.0",
     "react-dom": "^17.0.0"
   },

lib/src/user_event/user_event.dart

@@ -63,6 +63,15 @@ abstract class UserEvent {
   /// [UIEvent.detail](https://developer.mozilla.org/en-US/docs/Web/API/UIEvent/detail)
   /// for more information.
   ///
+  /// ### [skipPointerEventsCheck]
+  ///
+  /// Attempting to interact with an element that has `'pointer-events: none'`
+  /// set will throw an error. Use [skipPointerEventsCheck] to prevent that error
+  /// from being thrown by skipping the check of whether any element in the
+  /// DOM-tree has `'pointer-events: none'` set. In addition, the underlying
+  /// check for pointer events is costly in general and very costly when rendering
+  /// large DOM-trees. Can be used to speed up tests.
+  ///
   /// ## Example
   ///
   /// ```html
@@ -107,8 +116,13 @@ abstract class UserEvent {
     Map eventInit,
     bool skipHover = false,
     int clickCount = 0,
+    bool skipPointerEventsCheck = false,
   }) {
-    final options = {'skipHover': skipHover, 'clickCount': clickCount};
+    final options = {
+      'skipHover': skipHover,
+      'clickCount': clickCount,
+      'skipPointerEventsCheck': skipPointerEventsCheck,
+    };
     eventHandlerErrorCatcher(() {
       getProperty(_userEvent, 'click')(
         element,
@@ -133,6 +147,15 @@ abstract class UserEvent {
   /// UserEvent.dblClick(element, eventInit: {'shiftKey': true});
   /// ```
   ///
+  /// ### [skipPointerEventsCheck]
+  ///
+  /// Attempting to interact with an element that has `'pointer-events: none'`
+  /// set will throw an error. Use [skipPointerEventsCheck] to prevent that error
+  /// from being thrown by skipping the check of whether any element in the
+  /// DOM-tree has `'pointer-events: none'` set. In addition, the underlying
+  /// check for pointer events is costly in general and very costly when rendering
+  /// large DOM-trees. Can be used to speed up tests.
+  ///
   /// ## Example
   ///
   /// ```jsx
@@ -179,11 +202,16 @@ abstract class UserEvent {
   /// {@macro RenderSupportsReactAndOverReactCallout}
   ///
   /// {@category UserActions}
-  static void dblClick(Element element, {Map eventInit}) {
+  static void dblClick(Element element, {Map eventInit, bool skipPointerEventsCheck = false}) {
+    final options = {
+      'skipPointerEventsCheck': skipPointerEventsCheck,
+    };
+
     eventHandlerErrorCatcher(() {
       getProperty(_userEvent, 'dblClick')(
         element,
         _jsifyEventData(eventInit),
+        jsifyAndAllowInterop(options),
       );
     });
   }
@@ -815,6 +843,15 @@ abstract class UserEvent {
   ///
   /// Use [clickInit] to initialize the click events that occur as a part of the selection.
   ///
+  /// ### [skipPointerEventsCheck]
+  ///
+  /// Attempting to interact with an element that has `'pointer-events: none'`
+  /// set will throw an error. Use [skipPointerEventsCheck] to prevent that error
+  /// from being thrown by skipping the check of whether any element in the
+  /// DOM-tree has `'pointer-events: none'` set. In addition, the underlying
+  /// check for pointer events is costly in general and very costly when rendering
+  /// large DOM-trees. Can be used to speed up tests.
+  ///
   /// ## Example
   ///
   /// ```html
@@ -877,12 +914,18 @@ abstract class UserEvent {
     SelectElement selectElement,
     List<dynamic> values, {
     Map clickInit,
+    bool skipPointerEventsCheck = false,
   }) {
+    final options = {
+      'skipPointerEventsCheck': skipPointerEventsCheck,
+    };
+
     eventHandlerErrorCatcher(() {
       getProperty(_userEvent, 'selectOptions')(
         selectElement,
         values,
         _jsifyEventData(clickInit),
+        jsifyAndAllowInterop(options),
       );
     });
   }
@@ -903,6 +946,15 @@ abstract class UserEvent {
   ///
   /// Use [clickInit] to initialize the click events that occur as a part of the selection.
   ///
+  /// ### [skipPointerEventsCheck]
+  ///
+  /// Attempting to interact with an element that has `'pointer-events: none'`
+  /// set will throw an error. Use [skipPointerEventsCheck] to prevent that error
+  /// from being thrown by skipping the check of whether any element in the
+  /// DOM-tree has `'pointer-events: none'` set. In addition, the underlying
+  /// check for pointer events is costly in general and very costly when rendering
+  /// large DOM-trees. Can be used to speed up tests.
+  ///
   /// ## Example:
   ///
   /// ```html
@@ -965,12 +1017,18 @@ abstract class UserEvent {
     SelectElement selectElement,
     List values, {
     Map clickInit,
+    bool skipPointerEventsCheck = false,
   }) {
+    final options = {
+      'skipPointerEventsCheck': skipPointerEventsCheck,
+    };
+
     eventHandlerErrorCatcher(() {
       getProperty(_userEvent, 'deselectOptions')(
         selectElement,
         values,
         _jsifyEventData(clickInit),
+        jsifyAndAllowInterop(options),
       );
     });
   }
@@ -1087,6 +1145,15 @@ abstract class UserEvent {
   ///
   /// Use [eventInit] to initialize the `onMouseOver` event.
   ///
+  /// ### [skipPointerEventsCheck]
+  ///
+  /// Attempting to interact with an element that has `'pointer-events: none'`
+  /// set will throw an error. Use [skipPointerEventsCheck] to prevent that error
+  /// from being thrown by skipping the check of whether any element in the
+  /// DOM-tree has `'pointer-events: none'` set. In addition, the underlying
+  /// check for pointer events is costly in general and very costly when rendering
+  /// large DOM-trees. Can be used to speed up tests.
+  ///
   /// ## Example
   ///
   /// ```html
@@ -1143,9 +1210,21 @@ abstract class UserEvent {
   /// {@macro RenderSupportsReactAndOverReactCallout}
   ///
   /// {@category UserActions}
-  static void hover(Element element, {Map eventInit}) {
+  static void hover(
+    Element element, {
+    Map eventInit,
+    bool skipPointerEventsCheck = false,
+  }) {
+    final options = {
+      'skipPointerEventsCheck': skipPointerEventsCheck,
+    };
+
     eventHandlerErrorCatcher(() {
-      getProperty(_userEvent, 'hover')(element, _jsifyEventData(eventInit));
+      getProperty(_userEvent, 'hover')(
+        element,
+        _jsifyEventData(eventInit),
+        jsifyAndAllowInterop(options),
+      );
     });
   }
 
@@ -1161,6 +1240,15 @@ abstract class UserEvent {
   ///
   /// Use [eventInit] to initialize the `onMouseOut` event.
   ///
+  /// ### [skipPointerEventsCheck]
+  ///
+  /// Attempting to interact with an element that has `'pointer-events: none'`
+  /// set will throw an error. Use [skipPointerEventsCheck] to prevent that error
+  /// from being thrown by skipping the check of whether any element in the
+  /// DOM-tree has `'pointer-events: none'` set. In addition, the underlying
+  /// check for pointer events is costly in general and very costly when rendering
+  /// large DOM-trees. Can be used to speed up tests.
+  ///
   /// ## Example
   ///
   /// ```html
@@ -1223,9 +1311,17 @@ abstract class UserEvent {
   /// {@macro RenderSupportsReactAndOverReactCallout}
   ///
   /// {@category UserActions}
-  static void unhover(Element element, {Map eventInit}) {
+  static void unhover(Element element, {Map eventInit, bool skipPointerEventsCheck = false}) {
+    final options = {
+      'skipPointerEventsCheck': skipPointerEventsCheck,
+    };
+
     eventHandlerErrorCatcher(() {
-      getProperty(_userEvent, 'unhover')(element, _jsifyEventData(eventInit));
+      getProperty(_userEvent, 'unhover')(
+        element,
+        _jsifyEventData(eventInit),
+        jsifyAndAllowInterop(options),
+      );
     });
   }
 

test/unit/user_event/click_test.dart

@@ -97,6 +97,24 @@ void main() {
         _verifyClickEvent(clickCount: clickCount);
       });
 
+      test('skipPointerEventsCheck', () {
+        var wasClicked = false;
+
+        view.rerender(react.button({
+          'style': {'pointerEvents': 'none'},
+          'onClick': (_) {
+            wasClicked = true;
+          }
+        }, 'oh hai') as ReactElement);
+
+        UserEvent.click(
+          view.getByRole('button'),
+          skipPointerEventsCheck: true,
+        );
+
+        expect(wasClicked, isTrue);
+      });
+
       testEventHandlerErrors(
         ['onClick'],
         UserEvent.click,
@@ -137,6 +155,25 @@ void main() {
         _verifyDblClickEvent(hasEventInit: true);
       });
 
+      test('skipPointerEventsCheck', () {
+        var wasClicked = false;
+
+        view.rerender(react.button({
+          'data-test-id': 'the-local-button',
+          'style': {'pointerEvents': 'none'},
+          'onDoubleClick': (_) {
+            wasClicked = true;
+          }
+        }, 'oh hai') as ReactElement);
+
+        UserEvent.dblClick(
+          view.getByRole('button'),
+          skipPointerEventsCheck: true,
+        );
+
+        expect(wasClicked, isTrue);
+      });
+
       testEventHandlerErrors(
         ['onDoubleClick'],
         UserEvent.dblClick,

test/unit/user_event/hover_test.dart

@@ -18,7 +18,7 @@ import 'dart:html';
 
 import 'package:react/hooks.dart' show useState;
 import 'package:react/react.dart' as react;
-import 'package:react/react_client.dart' show ReactElement;
+import 'package:react/react_client.dart' show ReactDartFunctionComponentFactoryProxy, ReactElement;
 import 'package:react_testing_library/matchers.dart';
 import 'package:react_testing_library/react_testing_library.dart' as rtl;
 import 'package:react_testing_library/user_event.dart';
@@ -33,27 +33,9 @@ void main() {
 
     setUp(() {
       calls = [];
-
-      final HoverTestComponent = react.registerFunctionComponent((props) {
-        final isShown = useState(false);
-        return react.div({}, [
-          react.button({
-            'onMouseOver': (e) {
-              isShown.set(true);
-              calls.add((e as react.SyntheticMouseEvent).nativeEvent as MouseEvent);
-            },
-            'onMouseOut': (e) {
-              isShown.set(false);
-              calls.add((e as react.SyntheticMouseEvent).nativeEvent as MouseEvent);
-            }
-          }, [
-            'Hover over me!'
-          ]),
-          if (isShown.value) react.span({}, ['Hello!']) else null,
-        ]);
-      });
-
-      view = rtl.render(react.div({}, [HoverTestComponent({})]) as ReactElement);
+      view = rtl.render(react.div({}, [
+        HoverTestComponent({'calls': calls})
+      ]) as ReactElement);
       // Sanity check.
       expect(view.queryByText('Hello!'), isNull);
     });
@@ -92,6 +74,20 @@ void main() {
       _verifyHoverEvent(hasEventInit: true);
     });
 
+    test('skipPointerEventsCheck', () {
+      view.rerender(react.div({
+        'style': {'pointerEvents': 'none'}
+      }, [
+        HoverTestComponent({'calls': calls})
+      ]) as ReactElement);
+
+      UserEvent.hover(view.getByRole('button'), skipPointerEventsCheck: true);
+      expect(view.getByText('Hello!'), isInTheDocument);
+
+      UserEvent.unhover(view.getByRole('button'), skipPointerEventsCheck: true);
+      expect(view.queryByText('Hello!'), isNull);
+    });
+
     testEventHandlerErrors(
       ['onMouseOver', 'onMouseOut'],
       UserEvent.hover,
@@ -100,3 +96,22 @@ void main() {
     );
   });
 }
+
+ReactDartFunctionComponentFactoryProxy HoverTestComponent = react.registerFunctionComponent((props) {
+  final isShown = useState(false);
+  return react.div({}, [
+    react.button({
+      'onMouseOver': (e) {
+        isShown.set(true);
+        props['calls'].add((e as react.SyntheticMouseEvent).nativeEvent as MouseEvent);
+      },
+      'onMouseOut': (e) {
+        isShown.set(false);
+        props['calls'].add((e as react.SyntheticMouseEvent).nativeEvent as MouseEvent);
+      }
+    }, [
+      'Hover over me!'
+    ]),
+    if (isShown.value) react.span({}, ['Hello!']) else null,
+  ]);
+});