refactor(all): migrate to package:web

.vscode/settings.json

@@ -0,0 +1,3 @@
+{
+    "cSpell.enabled": false
+}

_tests/lib/matchers.dart

@@ -1,7 +1,6 @@
-import 'dart:html';
-
 import 'package:ngdart/angular.dart';
 import 'package:test/test.dart';
+import 'package:web/web.dart';
 
 /// Matches textual content of an element including children.
 Matcher hasTextContent(String expected) => _HasTextContent(expected);
@@ -42,19 +41,19 @@ String? _elementText(Object? n) {
       return '';
     }
 
-    if (n is ContentElement) {
-      return _elementText(n.getDistributedNodes());
+    if (n is HTMLSlotElement) {
+      return _elementText(n.assignedNodes());
     }
 
     if (n is Element && n.shadowRoot != null) {
-      return _elementText(n.shadowRoot!.nodes);
+      return _elementText(n.shadowRoot!.childNodes);
     }
 
-    if (n.nodes.isNotEmpty) {
-      return _elementText(n.nodes);
+    if (n.childNodes.length > 0) {
+      return _elementText(n.childNodes);
     }
 
-    return n.text;
+    return n.textContent;
   } else {
     return '$n';
   }

_tests/pubspec.yaml

@@ -10,14 +10,14 @@ dependencies:
   build_resolvers: ^2.4.1
   build_test: ^2.2.1
   collection: ^1.18.0
-  glob: ^2.1.2
-  js: ^0.6.7
+  glob: ^2.1.2  
   logging: ^1.2.0
   ngcompiler: ^3.0.0-dev.2
   ngdart: ^8.0.0-dev.3
   ngtest: ^5.0.0-dev.2
   source_gen: ^1.4.0
   test: ">=1.24.0 <1.25.0"
+  web: ^0.5.1
 
 dev_dependencies:
   analyzer: ^6.0.0

_tests/test/bootstrap/run_app_test.dart

@@ -2,11 +2,11 @@
 library angular.test.bootstrap.run_app_test;
 
 import 'dart:async';
-import 'dart:html';
+import 'dart:js_interop';
 
-import 'package:js/js.dart';
 import 'package:ngdart/angular.dart';
 import 'package:test/test.dart';
+import 'package:web/web.dart';
 
 import 'run_app_test.template.dart' as ng;
 
@@ -27,9 +27,10 @@ void main() {
 
   /// Verify that the DOM of the page represents the component.
   void verifyDomAndStyles({String innerText = 'Hello World!'}) {
-    expect(rootDomContainer.text, innerText);
+    expect(rootDomContainer.textContent, innerText);
     final h1 = rootDomContainer.querySelector('h1');
-    expect(h1!.getComputedStyle().height, '100px');
+
+    expect(window.getComputedStyle(h1).height, '100px');
   }
 
   /// Verify the `Testability` interface is working for this application.
@@ -38,21 +39,21 @@ void main() {
   void verifyTestability() {
     expect(component.injector.get(Testability), isNotNull);
     var jsTestability = getAngularTestability(
-      rootDomContainer.children.first,
+      rootDomContainer.children.item(0),
     );
     expect(getAllAngularTestabilities(), isNot(hasLength(0)));
     expect(jsTestability.isStable(), isTrue, reason: 'Expected stability');
-    jsTestability.whenStable(allowInterop(expectAsync0(() {
+    jsTestability.whenStable((expectAsync0(() {
       Future(expectAsync0(() {
         verifyDomAndStyles(innerText: 'Hello Universe!');
       }));
-    })));
+    })).toJS);
     runInApp(() => HelloWorldComponent.doAsyncTaskAndThenRename('Universe'));
   }
 
   setUp(() {
-    rootDomContainer = DivElement()..id = 'test-root-dom';
-    rootDomContainer.append(Element.tag('hello-world'));
+    rootDomContainer = HTMLDivElement()..id = 'test-root-dom';
+    rootDomContainer.append(document.createElement('hello-world'));
     document.body!.append(rootDomContainer);
     HelloWorldComponent.name = 'World';
   });

_tests/test/common/directives/for_test.dart

@@ -380,8 +380,8 @@ void main() {
           ];
         });
         var endElements = testFixture.rootElement.querySelectorAll('p');
-        expect(startElements[0], endElements[1]);
-        expect(startElements[1], endElements[0]);
+        expect(startElements.item(0), endElements.item(1));
+        expect(startElements.item(1), endElements.item(0));
       });
 
       test(

_tests/test/common/directives/if_test.dart

@@ -15,7 +15,7 @@ void main() {
       var testFixture = await testBed.create();
       var element = testFixture.rootElement;
       expect(element.querySelectorAll('copy-me'), hasLength(1));
-      expect(element.innerHtml, contains('hello2'));
+      expect(element.innerHTML, contains('hello2'));
     });
 
     test('should toggle node when condition changes', () async {
@@ -50,31 +50,31 @@ void main() {
         component.booleanCondition = false;
       });
       expect(element.querySelectorAll('copy-me'), hasLength(0));
-      expect(element.innerHtml!.contains('hello'), false);
+      expect(element.innerHTML.contains('hello'), false);
 
       await testFixture.update((NgIfNestedTestComponent component) {
         component.booleanCondition = true;
       });
       expect(element.querySelectorAll('copy-me'), hasLength(1));
-      expect(element.innerHtml!.contains('hello'), true);
+      expect(element.innerHTML.contains('hello'), true);
 
       await testFixture.update((NgIfNestedTestComponent component) {
         component.nestedBooleanCondition = false;
       });
       expect(element.querySelectorAll('copy-me'), hasLength(0));
-      expect(element.innerHtml!.contains('hello'), false);
+      expect(element.innerHTML.contains('hello'), false);
 
       await testFixture.update((NgIfNestedTestComponent component) {
         component.nestedBooleanCondition = true;
       });
       expect(element.querySelectorAll('copy-me'), hasLength(1));
-      expect(element.innerHtml!.contains('hello'), true);
+      expect(element.innerHTML.contains('hello'), true);
 
       await testFixture.update((NgIfNestedTestComponent component) {
         component.booleanCondition = false;
       });
       expect(element.querySelectorAll('copy-me'), hasLength(0));
-      expect(element.innerHtml!.contains('hello'), false);
+      expect(element.innerHTML.contains('hello'), false);
     });
 
     test('should update multiple bindings', () async {
@@ -84,20 +84,20 @@ void main() {
       var element = testFixture.rootElement;
       // Check startup.
       expect(element.querySelectorAll('copy-me'), hasLength(3));
-      expect(element.text, 'helloNumberhelloStringhelloFunction');
+      expect(element.textContent, 'helloNumberhelloStringhelloFunction');
 
       await testFixture.update((NgIfMultiUpdateTestComponent component) {
         component.numberCondition = 0;
       });
       expect(element.querySelectorAll('copy-me'), hasLength(1));
-      expect(element.text, 'helloString');
+      expect(element.textContent, 'helloString');
 
       await testFixture.update((NgIfMultiUpdateTestComponent component) {
         component.numberCondition = 1;
         component.stringCondition = 'bar';
       });
       expect(element.querySelectorAll('copy-me'), hasLength(1));
-      expect(element.text, 'helloNumber');
+      expect(element.textContent, 'helloNumber');
       await testFixture.update((NgIfMultiUpdateTestComponent component) {
         component.booleanCondition = false;
       });