如何在 Dart 中测试（TDD）`HtmlDocument`？

Question

1。问题

我正在尝试在 Dart 中创建一个浏览器扩展。目前，我正在使用 webext 包，它基本上模拟了 Dart 中典型的 JS 环境。

在content.dart文件的main()函数中，我想操作DOM。 document 变量可用，类型为 HtmlDocument，来自 dart:html。这一切都很好，但是考虑到 HtmlDocument 没有 public 构造函数，您将如何创建测试工具？

2。到目前为止我尝试了什么

我尝试使用 HtmlDocument 的父级，即 Document。像这样的自定义 HTML 标签：

import 'dart:html';

void main() {
  final Document document = Document();
  document.registerElement(CustomElement.tag, CustomElement);
  document.createElement(CustomElement.tag);
}

class CustomElement extends HtmlElement {
  static const String tag = 'custom-tag';

  factory CustomElement.created() => null;
}

但是 Document class 没有必要的 API 并且显然不支持注册自定义标签 — supportsRegisterElement getter 给了我返回 false，这可能与 Chrome 或 Dartium 有关，我不确定。

Answer 1

我仍然不知道为什么在这种情况下创建自定义 HtmlElement 不起作用，但是有一个足够好的方法解决整个问题：DomParser.

您可以使用 parseFromString 方法将 HTML 字符串解析为 Document 并将其用作测试代码的简化方法。 DomParser 的行为模仿其 JS 对应物：DOMParser.

一个例子：

import 'dart:html' show Document, DomParser, Element;

import 'package:test/test.dart' show expect, test;

void main() {
  const String htmlAsString = '<p>A paragraph</p>';
  
  final Document document = DomParser().parseFromString(htmlAsString, 'text/html');
  
  test('Checking the text inside the paragraph', () {
    final Element paragraph = document.querySelector('p');
  
    expect(paragraph.text, 'A paragraph');
  });
}

请注意，无法使用 dart:io 打开 HTML fixtures/fakes/mocks，因为浏览器不支持其大部分功能。

自定义标签也可以在上面的字符串HTML中使用，它们不会有自定义类，它们都是运行时类型HtmlElement，它是一个子类Element。解析器将能够在后台通过 changing/initializing 它们的 tagName 来处理它们——它实际上基本上似乎对所有标签都这样做。

如何在 Dart 中测试（TDD）`HtmlDocument`？

How to test (TDD) an `HtmlDocument` in Dart?

html

web

dart

tdd

1。问题

2。到目前为止我尝试了什么