Add tests for react_dom entrypoint APIs

Author: greglittlefield-wf

test/react_dom_test.dart

@@ -0,0 +1,165 @@
+// ignore_for_file: deprecated_member_use_from_same_package
+@TestOn('browser')
+import 'dart:html';
+
+import 'package:react/react.dart' as react;
+import 'package:react/react_client/react_interop.dart';
+import 'package:react/react_dom.dart' as react_dom;
+import 'package:react/react_test_utils.dart';
+import 'package:test/test.dart';
+
+void main() {
+  // These tests redundantly test some React behavior, but mostly serve to validate that
+  // all supported inputs/outputs are handled properly by the Dart bindings and their typings.
+  group('react_dom entrypoint APIs:', () {
+    group('render', () {
+      group(
+          'accepts and renders content of different supported types,'
+          ' and returns a representation of what was mounted', () {
+        test('ReactElement for a DOM component', () {
+          final mountNode = DivElement();
+          final result = react_dom.render(react.button({}, 'test button'), mountNode);
+          expect(mountNode.children, [isA<ButtonElement>()]);
+          expect(mountNode.children.single.innerText, 'test button');
+          expect(result, isA<ButtonElement>());
+        });
+
+        test('ReactElement for a class component', () {
+          final mountNode = DivElement();
+          final result = react_dom.render(classComponent({}), mountNode);
+          expect(mountNode.innerText, 'class component content');
+          expect(result, isA<ReactComponent>().having((c) => c.dartComponent, 'dartComponent', isA<_ClassComponent>()));
+        });
+
+        group('other "ReactNode" types:', () {
+          test('string', () {
+            final mountNode = DivElement();
+            final result = react_dom.render('test string', mountNode);
+            expect(mountNode.innerText, 'test string');
+            expect(result, isA<Node>());
+          });
+
+          test('lists and nested lists', () {
+            final mountNode = DivElement();
+            final result = react_dom.render([
+              'test string',
+              ['test string 2', react.span({}, 'test span')]
+            ], mountNode);
+            expect(mountNode.innerText, 'test string' 'test string 2' 'test span');
+            expect(result, isA<Node>());
+          });
+
+          test('number', () {
+            final mountNode = DivElement();
+            final result = react_dom.render(123, mountNode);
+            expect(mountNode.innerText, '123');
+            expect(result, isA<Node>());
+          });
+
+          test('false', () {
+            final mountNode = DivElement();
+            react_dom.render(react.span({}, 'test content that will be cleared'), mountNode);
+            expect(mountNode.innerText, 'test content that will be cleared');
+            final result = react_dom.render(false, mountNode);
+            expect(mountNode.innerText, isEmpty);
+            expect(result, isNull);
+          });
+
+          test('null', () {
+            final mountNode = DivElement();
+            react_dom.render(react.span({}, 'test content that will be cleared'), mountNode);
+            expect(mountNode.innerText, 'test content that will be cleared');
+            final result = react_dom.render(null, mountNode);
+            expect(mountNode.innerText, isEmpty);
+            expect(result, isNull);
+          });
+        });
+      });
+    });
+
+    group('unmountComponentAtNode', () {
+      test('unmounts a React tree at a node, and returns true to indicate it has unmounted', () {
+        final mountNode = DivElement();
+        react_dom.render(react.span({}), mountNode);
+        final result = react_dom.unmountComponentAtNode(mountNode);
+        expect(result, isTrue);
+      });
+
+      test('returns false when a React tree has already been unmounted', () {
+        final mountNode = DivElement();
+        react_dom.render(react.span({}), mountNode);
+        final result = react_dom.unmountComponentAtNode(mountNode);
+        expect(result, isTrue, reason: 'test setup check');
+        final secondUnmountResult = react_dom.unmountComponentAtNode(mountNode);
+        expect(secondUnmountResult, isFalse);
+      });
+
+      test('returns false when no React tree has been mounted within a node', () {
+        final result = react_dom.unmountComponentAtNode(DivElement());
+        expect(result, isFalse);
+      });
+    });
+
+    group('findDOMNode', () {
+      group('returns the mounted element when provided', () {
+        test('a Dart class component instance', () {
+          final ref = createRef<_ClassComponent>();
+          renderIntoDocument(classComponent({'ref': ref}));
+          final dartComponentInstance = ref.current;
+          expect(dartComponentInstance, isNotNull, reason: 'test setup check');
+          dartComponentInstance!;
+          expect(react_dom.findDOMNode(dartComponentInstance), isA<AnchorElement>());
+        });
+
+        test('a JS class component instance', () {
+          final ref = createRef<_ClassComponent>();
+          renderIntoDocument(classComponent({'ref': ref}));
+          final jsComponentInstance = ref.current!.jsThis;
+          expect(jsComponentInstance, isNotNull, reason: 'test setup check');
+          expect(react_dom.findDOMNode(jsComponentInstance), isA<AnchorElement>());
+        });
+
+        test('an element representing a mounted component', () {
+          final ref = createRef<SpanElement>();
+          renderIntoDocument(react.span({'ref': ref}));
+          final element = ref.current;
+          expect(element, isNotNull, reason: 'test setup check');
+          element!;
+          expect(react_dom.findDOMNode(element), same(element));
+        });
+      });
+
+      test('passes through a non-React-mounted element', () {
+        final element = DivElement();
+        expect(react_dom.findDOMNode(element), same(element));
+      });
+
+      test('passes through null', () {
+        expect(react_dom.findDOMNode(null), isNull);
+      });
+
+      group('throws when passed other objects that don\'t represent mounted React components', () {
+        test('arbitrary Dart objects', () {
+          expect(() => react_dom.findDOMNode(Object()),
+              throwsA(isA<Object>().havingToStringValue(contains('Argument appears to not be a ReactComponent'))));
+        });
+
+        test('ReactElement', () {
+          expect(() => react_dom.findDOMNode(react.span({})),
+              throwsA(isA<Object>().havingToStringValue(contains('Argument appears to not be a ReactComponent'))));
+        });
+      });
+    });
+  });
+}
+
+final classComponent = react.registerComponent2(() => _ClassComponent());
+
+class _ClassComponent extends react.Component2 {
+  @override
+  Object? render() => react.a({}, 'class component content');
+}
+
+extension<T> on TypeMatcher<T> {
+  TypeMatcher<T> havingToStringValue(dynamic matcher) => having((o) => o.toString(), 'toString() value', matcher);
+}

test/react_dom_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_dom_test.dart">
+    <script src="packages/test/dart.js"></script>
+</head>
+<body>
+</body>
+</html>