Clean up debugger_test to use dart:js_interop/avoid dynamic

- Use JSAny for values returned by the devtoolsFormatter.
- Makes deliberate wherever we *have* to make unsafe casts from
Dart objects to a JS value
- Removes use of package:js (except to test a package:js class
for formatting) and dart:js_util
- Cleans up implicit dynamic in favor of Object/Object? and
void
- References dart:_debugger types to make it more clear what
types we're using

Change-Id: I1b388501a65984bfc92c298dbce9181951040c4b
Reviewed-on: https://dart-review.googlesource.com/c/sdk/+/389588
Commit-Queue: Srujan Gaddam <[email protected]>
Reviewed-by: Nicholas Shahan <[email protected]>

Author: srujzs

tests/dartdevc/debugger/debugger_test.dart

@@ -1,18 +1,19 @@
 /// Debugger custom formatter tests.
-/// If the tests fail, paste the expected output into the [expectedGolden]
-/// string literal in this file and audit the diff to ensure changes are
-/// expected.
+/// If the tests fail, paste the expected output into the golden file and audit
+/// the diff to ensure changes are expected.
 ///
 /// Currently only DDC supports debugging objects with custom formatters
 /// but it is reasonable to add support to Dart2JS in the future.
 @JS()
 library debugger_test;
 
 import 'dart:html';
+import 'dart:js_interop';
+import 'dart:js_interop_unsafe';
+
 import 'package:expect/async_helper.dart';
 import 'package:expect/legacy/minitest.dart'; // ignore: deprecated_member_use_from_same_package
-import 'package:js/js.dart';
-import 'package:js/js_util.dart' as js_util;
+import 'package:js/js.dart' as pkgJs;
 
 import 'dart:_debugger' as _debugger;
 
@@ -47,78 +48,103 @@ class TestGenericClass<X, Y> {
   X x;
 }
 
-@JS('Object.getOwnPropertyNames')
-external List getOwnPropertyNames(obj);
+class FormattedObject {
+  FormattedObject(this.object, this.config);
 
-@JS('devtoolsFormatters')
-external List get _devtoolsFormatters;
-List get devtoolsFormatters => _devtoolsFormatters;
+  JSAny? object;
+  JSAny? config;
+}
 
 @JS('JSON.stringify')
-external stringify(value, [Function replacer, int space]);
+external String? stringify(JSAny? value, [JSFunction replacer, int space]);
+
+@JS('Object.getOwnPropertyNames')
+external JSArray<JSString> getOwnPropertyNames(JSObject obj);
+
+@JS()
+external JSArray? get devtoolsFormatters;
+
+@JS('Object.getPrototypeOf')
+external Prototype getPrototypeOf(JSAny obj);
+
+extension type FormattedJSObject._(JSObject _) implements JSObject {
+  external JSAny? get object;
+  external JSAny? get config;
+}
+
+// We use `JSAny` here since we're using this to interop with the prototype of a
+// Dart class, which isn't a `JSObject`.
+extension type Prototype._(JSAny _) implements JSAny {
+  external JSAny get constructor;
+}
+
+extension type FooBar._(JSObject _) implements JSObject {
+  external FooBar({String foo});
+}
 
-// TODO(jacobr): this is only valid if the DDC library loader is used.
-// We need a solution that works with all library loaders.
-@JS('dart_library.import')
-external importDartLibrary(String path);
+@pkgJs.JS()
+class PackageJSClass<T> {
+  external factory PackageJSClass(T x);
+}
 
-@JS('ExampleJSClass')
-class ExampleJSClass<T> {
-  external factory ExampleJSClass(T x);
-  external T get x;
+T unsafeCast<T extends JSAny?>(Object? object) {
+  // This is improper interop code. However, this test mixes Dart and JS values.
+  // Since this is only ever run on DDC, this is okay, but we should be
+  // deliberate about where we're mixing Dart and JS values.
+  return object as T;
 }
 
-// Replacer normalizes file names that could vary depending on the test runner.
+// Replacer normalizes file names that could vary depending on the test runner
 // styles.
-replacer(String key, value) {
+JSAny? replacer(String key, JSAny? externalValue) {
   // The values for keys with name 'object' may be arbitrary Dart nested
   // Objects so are not safe to stringify.
-  if (key == 'object') return '<OBJECT>';
-  if (value is String) {
-    if (value.contains('dart_sdk.js')) return '<DART_SDK>';
-    if (new RegExp(r'[.](js|dart|html)').hasMatch(value)) return '<FILE>';
+  if (key == 'object') return '<OBJECT>'.toJS;
+  if (externalValue.isA<JSString>()) {
+    final value = (externalValue as JSString).toDart;
+    if (value.contains('dart_sdk.js')) return '<DART_SDK>'.toJS;
+    if (new RegExp(r'[.](js|dart|html)').hasMatch(value)) {
+      return '<FILE>'.toJS;
+    }
     // Normalize the name of the `Event` type as it appears in this test.
     // The new type system preserves the original name from the Dart source.
     // TODO(48585): Remove when no longer running with the old type system.
-    value = value.replaceAll(r'Event$', 'Event');
+    return value.replaceAll(r'Event$', 'Event').toJS;
   }
-  return value;
+  return externalValue;
 }
 
-String? format(value) {
+String? format(JSAny? value) {
   // Avoid double-escaping strings.
-  if (value is String) return value;
-  if (value is Function) value = allowInterop(value);
-  return stringify(value, allowInterop(replacer), 4);
-}
-
-class FormattedObject {
-  FormattedObject(this.object, this.config);
-
-  Object? object;
-  Object? config;
+  if (value.isA<JSString>()) return (value as JSString).toDart;
+  return stringify(value, replacer.toJS, 4);
 }
 
 /// Extract all object tags from a json ml expression to enable
 /// calling the custom formatter on the extracted object tag.
-List<FormattedObject> extractNestedFormattedObjects(json) {
+List<FormattedObject> extractNestedFormattedObjects(JSAny json) {
   var ret = <FormattedObject>[];
-  if (json is String || json is bool || json is num) return ret;
-  if (json is List) {
-    for (var e in json) {
-      ret.addAll(extractNestedFormattedObjects(e));
+  if (json.isA<JSString>() || json.isA<JSBoolean>() || json.isA<JSNumber>()) {
+    return ret;
+  }
+  if (json.isA<JSArray>()) {
+    for (var i = 0; i < (json as JSArray<JSAny>).length; i++) {
+      ret.addAll(extractNestedFormattedObjects(json[i]));
     }
     return ret;
   }
 
-  for (var name in getOwnPropertyNames(json)) {
+  // Must be a JS object. See JsonMLElement in dart:_debugger.
+  final jsObject = json as FormattedJSObject;
+  final propertyNames = getOwnPropertyNames(jsObject);
+  for (var i = 0; i < propertyNames.length; i++) {
+    final name = propertyNames[i].toDart;
     if (name == 'object') {
       // Found a nested formatted object.
-      ret.add(new FormattedObject(js_util.getProperty(json, 'object'),
-          js_util.getProperty(json, 'config')));
+      ret.add(new FormattedObject(jsObject.object, jsObject.config));
       return ret;
     }
-    ret.addAll(extractNestedFormattedObjects(js_util.getProperty(json, name)));
+    ret.addAll(extractNestedFormattedObjects(jsObject[name]!));
   }
   return ret;
 }
@@ -146,12 +172,14 @@ main() async {
   document.body!.append(new ScriptElement()
     ..type = 'text/javascript'
     ..innerHtml = r"""
-window.ExampleJSClass = function ExampleJSClass(x) {
+window.PackageJSClass = function PackageJSClass(x) {
   this.x = x;
 };
 """);
 
-  var _devtoolsFormatter = devtoolsFormatters.first;
+  var _devtoolsFormatter = (devtoolsFormatters![0]
+          as ExternalDartReference<_debugger.JsonMLFormatter>)
+      .toDartObject;
 
   var actual = new StringBuffer();
 
@@ -162,22 +190,22 @@ window.ExampleJSClass = function ExampleJSClass(x) {
   // of expectations.
   // The verify golden match test cases does the final comparison of golden
   // to expected output.
-  addGolden(String name, value) {
+  void addGolden(String name, JSAny value) {
     var text = format(value);
     actual.write('Test: $name\n'
         'Value:\n'
         '$text\n'
         '-----------------------------------\n');
   }
 
-  addFormatterGoldens(String name, object, [config]) {
+  void addFormatterGoldens(String name, Object? object, [Object? config]) {
     addGolden(
         '$name formatting header', _devtoolsFormatter.header(object, config));
     addGolden('$name formatting body', _devtoolsFormatter.body(object, config));
   }
 
   // Include goldens for the nested [[class]] definition field.
-  addNestedFormatterGoldens(String name, obj) {
+  void addNestedFormatterGoldens(String name, Object obj) {
     addGolden('$name instance header', _devtoolsFormatter.header(obj, null));
     var body = _devtoolsFormatter.body(obj, null);
     addGolden('$name instance body', body);
@@ -190,9 +218,11 @@ window.ExampleJSClass = function ExampleJSClass(x) {
   }
 
   // Include goldens for the nested [[class]] definition field.
-  addAllNestedFormatterGoldens(String name, obj) {
+  void addAllNestedFormatterGoldens(String name, Object obj) {
     addGolden('$name header', _devtoolsFormatter.header(obj, null));
-    var body = _devtoolsFormatter.body(obj, null);
+    // The cast to `JSAny` is safe as `header` and `body` should always return
+    // JS values.
+    var body = _devtoolsFormatter.body(obj, null) as JSAny;
     addGolden('$name body', body);
 
     var nestedObjects = extractNestedFormattedObjects(body);
@@ -256,14 +286,13 @@ window.ExampleJSClass = function ExampleJSClass(x) {
     addFormatterGoldens('Function with function arguments', addEventListener);
 
     // Closure
-    addGolden('dart:html method', window.addEventListener);
+    addGolden('dart:html method', unsafeCast(window.addEventListener));
 
     // Get a reference to the JS constructor for a Dart class.
     // This tracks a regression bug where overly verbose and confusing output
     // was shown for this case.
     var testClass = new TestClass(17);
-    var dartConstructor = js_util.getProperty(
-        js_util.objectGetPrototypeOf(testClass)!, 'constructor');
+    var dartConstructor = getPrototypeOf(unsafeCast(testClass)).constructor;
     addFormatterGoldens('Raw reference to dart constructor', dartConstructor);
   });
 
@@ -281,8 +310,7 @@ window.ExampleJSClass = function ExampleJSClass(x) {
   });
 
   group('JS interop object formatting', () {
-    var object = js_util.newObject();
-    js_util.setProperty(object, 'foo', 'bar');
+    var object = FooBar(foo: 'bar');
     // Make sure we don't apply the Dart custom formatter to JS interop objects.
     expect(_devtoolsFormatter.header(object, null), isNull);
   });
@@ -322,8 +350,8 @@ window.ExampleJSClass = function ExampleJSClass(x) {
         'TestGenericClass', new TestGenericClass<int, List>(42));
     addNestedFormatterGoldens(
         'TestGenericClassJSInterop',
-        new TestGenericClass<ExampleJSClass<String>, int>(
-            new ExampleJSClass("Hello")));
+        new TestGenericClass<PackageJSClass<JSString>, int>(
+            new PackageJSClass("Hello".toJS)));
   });
 
   test('verify golden match', () {