Как протестировать (TDD) `HtmlDocument` в Dart? - PullRequest
Новая
       59

Как протестировать (TDD) `HtmlDocument` в Dart?

0 голосов
/ 04 августа 2020

1. Проблема

Я пытаюсь создать расширение для браузера в Dart. В настоящее время я использую пакет webext, который в основном имитирует типичную среду JS в Dart.

В функции main() файла content.dart я использую sh для управления DOM. Переменная document доступна и имеет тип HtmlDocument, который происходит от dart:html. Это все хорошо, но как бы вы создали с его помощью средство тестирования, учитывая, что HtmlDocument не имеет конструктора publi c?

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 нет необходимого API, и регистрация пользовательских тегов, по-видимому, не поддерживается - геттер supportsRegisterElement возвращает мне false, что может быть связано с Chrome или Dartium, я не уверен.

1 Ответ

0 голосов
/ 06 сентября 2020

Я до сих пор не знаю, почему создание пользовательского 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. Парсер сможет обрабатывать их, изменяя / инициализируя их tagName в фоновом режиме - на самом деле, похоже, он делает это для всех тегов.

...