4

Dart での web-ui テストに関するドキュメントはあまりありません。2 つの方法が利用可能です: a) Chrome の DumpRenderTree を実行するか、b)アプリをそのままロードし、その上でテスト コードを実行するトリック。些細なケースの場合、最初のオプションは少し面倒に思えます。したがって、後者のオプション - 私の場合、コンポーネントのロードに関しては機能しません。

次のファイル構造を使用します。

test/
  main_test.html
  main_test.dart
web/
  main.html
  app.html

（すべてのファイルはこの要点にリストされています）

次のテスト セットは、2 番目のステップでハングします。

main() {
  useShadowDom = true;

  test('Inline element is initially present.', () {
    var story = () => expect(query('#hdr'), isNotNull);
    Timer.run(expectAsync0(story));
  });

  test('Component is loaded.', () {
    var story = () => expect(query('#globe'), isNotNull);
    Timer.run(expectAsync0(story));
  });
}

app コンポーネントをどのようにロードできますか? もっと広く言えば、Web コンポーネントをテストする別の方法はありますか?

4

3 に答える 3

3

Web-UI テストでは、「クラシック」DOM の代わりに、テストする Web コンポーネントの Shadow DOM または Xtag (this) を照会する必要があります。TodoMVC コードサンプル
に基づく

あなたのコードで:
このテストの作業バージョンは次のとおりです:

main() {
  useShadowDom = true;

  test('Inline element is initially present.', () {
    var story = () => expect(query('#hdr'), isNotNull);
    Timer.run(expectAsync0(story));
  });

  test('Component is loaded.', () {
    var root = query("span[is=x-app]").shadowRoot;
    var story = () => expect(root.query('#globe'), isNotNull);
    Timer.run(expectAsync0(story));
  });
}

また、expectAsync を使用しないテスト バージョンは次のようになります。

main() {
  useShadowDom = true;

  Timer.run(() {
    test('Header element is initially present.', () {
      var hdr = query('#hdr');
      expect(hdr, isNotNull);
    });

    test('EchapApp component is loaded.', () {
      var root = query("span[is=x-app]").shadowRoot;
      var globe = root.query('#globe');
      expect(globe, isNotNull);
    });
  });
}

最後に、シャドウ DOM のないバージョン:

main() {
  //useShadowDom = true;

  Timer.run(() {
    test('Header element is initially present.', () {
      var hdr = query('#hdr');
      expect(hdr, isNotNull);
    });

    test('EchapApp component is loaded.', () {
      var root = query("span[is=x-app]").xtag;
      var globe = root.query('#globe');
      expect(globe, isNotNull);
    });
  });

}

私にとって、この 3 つのコードは
Dart Editor バージョン 0.5.20_r24275
Dart SDK バージョン 0.5.20.4_r24275で Dartium を 100% パスします。

于 2013-07-04T21:13:36.733 に答える
0

Dart 固有ではありませんが、Selenium を使用して UI をテストできます。Dart チームのメンバーの中には、Selenium を使用して UI テストを行っている人もいると思います。

于 2013-06-24T18:10:59.117 に答える