Merge pull request #242 from cleandart/CPLAT-9057-strictmode

kealjones-wk · web-flow · commit f834a56f7eef · 2019-12-23T14:12:16.000-07:00
CPLAT-9057: Implement StrictMode Component
diff --git a/lib/react.dart b/lib/react.dart
@@ -35,6 +35,13 @@ typedef ReactDartComponentFactoryProxy2 ComponentRegistrar2(
 /// See: <https://reactjs.org/docs/fragments.html>
 var Fragment = ReactJsComponentFactoryProxy(React.Fragment);
 
+/// StrictMode is a tool for highlighting potential problems in an application.
+///
+/// StrictMode does not render any visible UI. It activates additional checks and warnings for its descendants.
+///
+/// See: <https://reactjs.org/docs/strict-mode.html>
+var StrictMode = ReactJsComponentFactoryProxy(React.StrictMode);
+
 /// Top-level ReactJS [Component class](https://facebook.github.io/react/docs/react-component.html)
 /// which provides the [ReactJS Component API](https://facebook.github.io/react/docs/react-component.html#reference)
 ///
diff --git a/lib/react_client/react_interop.dart b/lib/react_client/react_interop.dart
@@ -36,13 +36,13 @@ abstract class React {
   @Deprecated('6.0.0')
   external static ReactClass createClass(ReactClassConfig reactClassConfig);
   external static ReactJsComponentFactory createFactory(type);
-
   external static ReactElement createElement(dynamic type, props, [dynamic children]);
+  external static JsRef createRef();
 
   external static bool isValidElement(dynamic object);
-  external static ReactClass get Fragment;
 
-  external static JsRef createRef();
+  external static ReactClass get StrictMode;
+  external static ReactClass get Fragment;
 }
 
 /// Creates a [Ref] object that can be attached to a [ReactElement] via the ref prop.
diff --git a/test/react_strictmode_test.dart b/test/react_strictmode_test.dart
@@ -0,0 +1,39 @@
+@TestOn('browser')
+@JS()
+library react_test_utils_test;
+
+import 'dart:html';
+
+import 'package:js/js.dart';
+import 'package:react/react.dart' as react;
+import 'package:react/react_dom.dart' as react_dom;
+import 'package:test/test.dart';
+import 'package:react/react_client.dart';
+
+main() {
+  setClientConfiguration();
+
+  group('StrictMode', () {
+    test('renders nothing but its children', () {
+      var wrappingDivRef;
+
+      react_dom.render(
+        react.div({
+          'ref': (ref) {
+            wrappingDivRef = ref;
+          }
+        }, [
+          react.StrictMode({}, [
+            react.div({}),
+            react.div({}),
+            react.div({}),
+            react.div({}),
+          ])
+        ]),
+        new Element.div(),
+      );
+
+      expect(wrappingDivRef.children, hasLength(4));
+    });
+  });
+}
diff --git a/test/react_strictmode_test.html b/test/react_strictmode_test.html
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html>
+<head lang="en">
+    <meta charset="UTF-8">
+    <title></title>
+    <script src="packages/react/react_with_addons.js"></script>
+    <script src="packages/react/react_dom.js"></script>
+    <link rel="x-dart-test" href="react_strictmode_test.dart">
+    <script src="packages/test/dart.js"></script>
+</head>
+<body>
+</body>
+</html>
