Fix / reorganize tests, deprecate RTU

Author: aaronlademann-wf

.editorconfig

@@ -1,6 +1,3 @@
-# top-most EditorConfig file
-root = true
-
 [*.dart]
 max_line_length = 120
 

build.yaml

@@ -1,6 +1,25 @@
 targets:
   $default:
     builders:
+      test_html_builder:
+        options:
+          templates:
+            "test/js_builds/templates/js_dev.html":
+              - "test/js_builds/js_dev_test.dart"
+            "test/js_builds/templates/js_dev_with_addons.html":
+              - "test/js_builds/js_dev_with_addons_test.dart"
+            "test/js_builds/templates/js_prod_combined.html":
+              - "test/js_builds/js_prod_combined_test.dart"
+            "test/js_builds/templates/js_prod.html":
+              - "test/js_builds/js_prod_test.dart"
+            "test/factory/_factory_test_template.html":
+              - "test/factory/**_test.dart"
+            "test/lifecycle/_react_lifecycle_test_template.html":
+              - "test/lifecycle/**_test.dart"
+            "test/react_client/_react_client_test_template.html":
+              - "test/react_client/**_test.dart"
+            "test/_react_test_template.html":
+              - "test/*_test.dart"
       # mockito's builder is expensive and is not needed until this package is
       # migrated to null-safety. At that point, it should be scoped only to
       # relevant files.

lib/react_test_utils.dart

@@ -1,17 +1,17 @@
 // Copyright (c) 2016, the Clean project authors.  Please see the AUTHORS file
 // for details. All rights reserved. Use of this source code is governed by a
 // BSD-style license that can be found in the LICENSE file.
-
+// ignore_for_file: deprecated_member_use_from_same_package
+@Deprecated('Use the react_testing_library package instead.')
 @JS()
 library react.test_utils;
 
-import 'dart:js_util' show getProperty;
-
 import 'package:js/js.dart';
 import 'package:react/react_client.dart';
 import 'package:react/react_client/js_interop_helpers.dart';
 import 'package:react/react_client/react_interop.dart';
 import 'package:react/src/react_test_utils/simulate_wrappers.dart' as sw;
+import 'package:react/src/react_test_utils/internal_test_utils.dart' as itu;
 
 // Notes
 // ---------------------------------------------------------------------------
@@ -36,8 +36,10 @@ import 'package:react/src/react_test_utils/simulate_wrappers.dart' as sw;
 ///
 /// * For DOM components, this with return the String corresponding to its tagName ('div', 'a', etc.).
 /// * For custom composite components React.createClass()-based components, this will return the [ReactClass].
-dynamic getComponentTypeV2(ReactComponentFactoryProxy componentFactory) => componentFactory.type;
+@Deprecated('Use the react_testing_library package instead.')
+final getComponentTypeV2 = itu.getComponentTypeV2;
 
+@Deprecated('Use the react_testing_library package instead.')
 typedef bool ComponentTestFunction(/* [1] */ component);
 
 dynamic _jsifyEventData(Map eventData) => jsifyAndAllowInterop(eventData ?? const {});
@@ -51,6 +53,7 @@ dynamic _jsifyEventData(Map eventData) => jsifyAndAllowInterop(eventData ?? cons
 ///
 /// This should include all events documented at:
 /// http://facebook.github.io/react/docs/events.html
+@Deprecated('Use the UserEvent or fireEvent utilities from the react_testing_library package instead.')
 class Simulate {
   static void animationEnd(/* [1] */ node, [Map eventData]) =>
       sw.Simulate.animationEnd(node, _jsifyEventData(eventData));
@@ -120,6 +123,7 @@ class Simulate {
 ///
 /// Included in Dart for completeness
 @JS('React.addons.TestUtils.findAllInRenderedTree')
+@Deprecated('Use the react_testing_library package instead.')
 external List<dynamic> findAllInRenderedTree(
     /* [1] */ tree,
     ComponentTestFunction test);
@@ -128,6 +132,7 @@ external List<dynamic> findAllInRenderedTree(
 /// result, and returns that one result, or throws exception if there is
 /// any other number of matches besides one.
 @JS('React.addons.TestUtils.findRenderedDOMComponentWithClass')
+@Deprecated('Use the react_testing_library package instead.')
 external dynamic /* [1] */ findRenderedDOMComponentWithClass(
     /* [1] */ tree,
     String className);
@@ -136,63 +141,51 @@ external dynamic /* [1] */ findRenderedDOMComponentWithClass(
 /// and returns that one result, or throws exception if there is any other
 /// number of matches besides one.
 @JS('React.addons.TestUtils.findRenderedDOMComponentWithTag')
+@Deprecated('Use the react_testing_library package instead.')
 external dynamic /* [1] */ findRenderedDOMComponentWithTag(
     /* [1] */ tree,
     String tag);
 
 @JS('React.addons.TestUtils.findRenderedComponentWithType')
+@Deprecated('Use the react_testing_library package instead.')
 external dynamic /* [1] */ _findRenderedComponentWithType(
     /* [1] */ tree,
     dynamic type);
 
 /// Same as [scryRenderedComponentsWithTypeV2] but expects there to be one result
 /// and returns that one result, or throws exception if there is any other
 /// number of matches besides one.
+@Deprecated('Use the react_testing_library package instead.')
 /* [1] */ findRenderedComponentWithTypeV2(
     /* [1] */ tree,
     ReactComponentFactoryProxy componentFactory) {
   return _findRenderedComponentWithType(tree, getComponentTypeV2(componentFactory));
 }
 
-@JS('React.addons.TestUtils.isCompositeComponent')
-external bool _isCompositeComponent(/* [1] */ instance);
-
 /// Returns true if element is a composite component.
 /// (created with React.createClass()).
-bool isCompositeComponent(/* [1] */ instance) {
-  return _isCompositeComponent(instance)
-      // Workaround for DOM components being detected as composite: https://github.com/facebook/react/pull/3839
-      &&
-      getProperty(instance, 'tagName') == null;
-}
-
-@JS('React.addons.TestUtils.isCompositeComponentWithType')
-external bool _isCompositeComponentWithType(/* [1] */ instance, dynamic type);
+@Deprecated('Use the react_testing_library package instead.')
+final isCompositeComponent = itu.isCompositeComponent;
 
 /// Returns `true` if instance is a custom composite component created using `React.createClass()`
 /// that is of the [ReactComponentFactoryProxy.type] of the provided [componentFactory].
-bool isCompositeComponentWithTypeV2(
-    /* [1] */ instance,
-    ReactComponentFactoryProxy componentFactory) {
-  return _isCompositeComponentWithType(instance, getComponentTypeV2(componentFactory));
-}
+@Deprecated('Use the react_testing_library package instead.')
+final isCompositeComponentWithTypeV2 = itu.isCompositeComponentWithTypeV2;
 
 /// Returns true if instance is a DOM component (such as a <div> or <span>).
 @JS('React.addons.TestUtils.isDOMComponent')
-external bool isDOMComponent(/* [1] */ instance);
+@Deprecated('Use the react_testing_library package instead.')
+final isDOMComponent = itu.isDOMComponent;
 
 /// Returns true if [object] is a valid React component.
 @JS('React.addons.TestUtils.isElement')
+@Deprecated('Use the react_testing_library package instead.')
 external bool isElement(dynamic object);
 
-@JS('React.addons.TestUtils.isElementOfType')
-external bool _isElementOfType(dynamic element, dynamic componentClass);
-
 /// Returns `true` if [element] is a [ReactElement]
 /// that is of the [ReactComponentFactoryProxy.type] of the provided [componentFactory].
-bool isElementOfTypeV2(dynamic element, ReactComponentFactoryProxy componentFactory) {
-  return _isElementOfType(element, getComponentTypeV2(componentFactory));
-}
+@Deprecated('Use the react_testing_library package instead.')
+final isElementOfTypeV2 = itu.isElementOfTypeV2;
 
 @JS('React.addons.TestUtils.scryRenderedComponentsWithType')
 external List<dynamic> /* [1] */ _scryRenderedComponentsWithType(
@@ -201,6 +194,7 @@ external List<dynamic> /* [1] */ _scryRenderedComponentsWithType(
 
 /// Finds all instances within the provided [tree]
 /// that are of the [ReactComponentFactoryProxy.type] of the provided [componentFactory].
+@Deprecated('Use the react_testing_library package instead.')
 List<dynamic> /* [1] */ scryRenderedComponentsWithTypeV2(
     /* [1] */ tree,
     ReactComponentFactoryProxy componentFactory) {
@@ -211,6 +205,7 @@ List<dynamic> /* [1] */ scryRenderedComponentsWithTypeV2(
 
 /// Finds all instances of components in the rendered tree that are DOM
 /// components with the class name matching className.
+@Deprecated('Use the react_testing_library package instead.')
 external List<dynamic> scryRenderedDOMComponentsWithClass(
     /* [1] */ tree,
     String className);
@@ -219,19 +214,22 @@ external List<dynamic> scryRenderedDOMComponentsWithClass(
 
 /// Finds all instances of components in the rendered tree that are DOM
 /// components with the tag name matching tagName.
+@Deprecated('Use the react_testing_library package instead.')
 external List<dynamic> scryRenderedDOMComponentsWithTag(
     /* [1] */ tree,
     String tagName);
 
 /// Render a Component into a detached DOM node in the document.
 @JS('React.addons.TestUtils.renderIntoDocument')
+@Deprecated('Use the render() utility from the react_testing_library package instead.')
 external /* [1] */ renderIntoDocument(ReactElement instance);
 
 /// Pass a mocked component module to this method to augment it with useful
 /// methods that allow it to be used as a dummy React component. Instead of
 /// rendering as usual, the component will become a simple <div> (or other tag
 /// if mockTagName is provided) containing any provided children.
 @JS('React.addons.TestUtils.mockComponent')
+@Deprecated('Use the react_testing_library package instead.')
 external ReactClass mockComponent(ReactClass componentClass, String mockTagName);
 
 /// Returns a ReactShallowRenderer instance
@@ -255,6 +253,7 @@ external ReactShallowRenderer createRenderer();
 /// See react_with_addons.js#ReactShallowRenderer
 @JS()
 @anonymous
+@Deprecated('Use the react_testing_library package instead.')
 class ReactShallowRenderer {
   /// Get the rendered output. [render] must be called first
   external ReactElement getRenderOutput();

lib/src/react_test_utils/internal_test_utils.dart

@@ -0,0 +1,58 @@
+@JS()
+library react.src.react_test_utils.internal_test_utils;
+
+import 'dart:js_util' show getProperty;
+
+import 'package:js/js.dart';
+import 'package:react/react_client.dart';
+import 'package:react/react_client/react_interop.dart';
+
+/// Returns the [ReactComponentFactoryProxy.type] of a given [componentFactory].
+///
+/// * For DOM components, this with return the String corresponding to its tagName ('div', 'a', etc.).
+/// * For custom composite components React.createClass()-based components, this will return the [ReactClass].
+dynamic getComponentTypeV2(ReactComponentFactoryProxy componentFactory) => componentFactory.type;
+
+@JS('React.addons.TestUtils.isCompositeComponent')
+external bool _isCompositeComponent(/* [1] */ instance);
+
+/// Returns true if element is a composite component.
+/// (created with React.createClass()).
+bool isCompositeComponent(/* [1] */ instance) {
+  return _isCompositeComponent(instance)
+      // Workaround for DOM components being detected as composite: https://github.com/facebook/react/pull/3839
+      &&
+      getProperty(instance, 'tagName') == null;
+}
+
+@JS('React.addons.TestUtils.isCompositeComponentWithType')
+external bool _isCompositeComponentWithType(/* [1] */ instance, dynamic type);
+
+/// Returns `true` if instance is a custom composite component created using `React.createClass()`
+/// that is of the [ReactComponentFactoryProxy.type] of the provided [componentFactory].
+bool isCompositeComponentWithTypeV2(
+    /* [1] */ instance,
+    ReactComponentFactoryProxy componentFactory) {
+  return _isCompositeComponentWithType(instance, getComponentTypeV2(componentFactory));
+}
+
+/// Returns true if instance is a DOM component (such as a <div> or <span>).
+@JS('React.addons.TestUtils.isDOMComponent')
+external bool isDOMComponent(/* [1] */ instance);
+
+/// Returns true if [object] is a valid React component.
+@JS('React.addons.TestUtils.isElement')
+external bool isElement(dynamic object);
+
+@JS('React.addons.TestUtils.isElementOfType')
+external bool _isElementOfType(dynamic element, dynamic componentClass);
+
+/// Returns `true` if [element] is a [ReactElement]
+/// that is of the [ReactComponentFactoryProxy.type] of the provided [componentFactory].
+bool isElementOfTypeV2(dynamic element, ReactComponentFactoryProxy componentFactory) {
+  return _isElementOfType(element, getComponentTypeV2(componentFactory));
+}
+
+/// Render a Component into a detached DOM node in the document.
+@JS('React.addons.TestUtils.renderIntoDocument')
+external ReactComponent renderIntoDocument(ReactElement instance);

pubspec.yaml

@@ -15,4 +15,14 @@ dev_dependencies:
   dependency_validator: ">=2.0.0 <4.0.0"
   matcher: ^0.12.5
   mockito: ">=4.1.1 <6.0.0"
+  react_testing_library: ^2.0.0
   test: ^1.6.5
+  test_html_builder: ">=2.2.2 <4.0.0"
+
+
+dependency_overrides:
+  react_testing_library:
+    git:
+      url: https://github.com/Workiva/react_testing_library
+      ref: r18
+

test/_react_test_template.html

@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <!-- The "testName" placeholder will be replaced with a unique name for
+    each test. -->
+    <title>{{testName}} Test</title>
+
+    <!-- Load custom assets needed by the test. -->
+    <script src="packages/react/react_with_addons.js"></script>
+    <script src="packages/react/react_dom.js"></script>
+    <script src="packages/react_testing_library/js/react-testing-library.js"></script>
+
+    <!-- Every template must include this placeholder. -->
+    {{testScript}}
+    <!-- It will be replaced by the builder with the required <link> tag:
+    <link rel="x-dart-test" href="...">
+    -->
+
+    <!-- Every template must include the test runner script. -->
+    <script src="packages/test/dart.js"></script>
+  </head>
+</html>

test/factory/_factory_test_template.html

@@ -0,0 +1,34 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <!-- The "testName" placeholder will be replaced with a unique name for
+    each test. -->
+    <title>{{testName}} Test</title>
+
+    <!-- Load custom assets needed by the test. -->
+    <script src="packages/react/react_with_addons.js"></script>
+    <script src="packages/react/react_dom.js"></script>
+    <script src="packages/react_testing_library/js/react-testing-library.js"></script>
+
+    <script>
+      window._JsFoo = class JsFooComponent extends React.Component {
+        render() {
+          return React.createElement("div", this.props, this.props.children);
+        }
+      };
+
+      window._JsFooFunction = React.forwardRef((props, ref) => (
+        React.createElement("div", {...props, ref: ref})
+      ));
+    </script>
+
+    <!-- Every template must include this placeholder. -->
+    {{testScript}}
+    <!-- It will be replaced by the builder with the required <link> tag:
+    <link rel="x-dart-test" href="...">
+    -->
+
+    <!-- Every template must include the test runner script. -->
+    <script src="packages/test/dart.js"></script>
+  </head>
+</html>