单元测试 – 如何在Dart中测试Web组件？

概述在Dart的web-ui测试中没有太多的文档.有两种方法可供选择：a)运行Chrome的DumpRenderTree或b)由 loading the app as is and running the test code on top of it组成的技巧.对于琐碎的情况,第一种选择似乎有点单调乏味.所以后一个选项 – 在我的情况下,在加载组件时不起作用. 使用以下文件结构： test/ ma 在Dart的web-ui测试中没有太多的文档.有两种方法可供选择：a)运行Chrome的DumpRenderTree或b)由 loading the app as is and running the test code on top of it组成的技巧.对于琐碎的情况,第一种选择似乎有点单调乏味.所以后一个选项 – 在我的情况下,在加载组件时不起作用.

使用以下文件结构：

@H_403_13@test/ main_test.HTML main_test.dartweb/ main.HTML app.HTML

(all the files are listed in this gist)

以下测试集在第二步中挂起.

@H_403_13@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)); });}

如何加载应用程序组件？更广泛地说,还有另一种测试Web组件的方法吗？

解决方法 对于web-ui测试,您必须查询您要测试的web组件的阴影dom或xtag(this),而不是“经典”dom.
基于 TodoMVC code sample

使用您的代码：
该测试的工作版本是：

@H_403_13@main() { useShadowDom = true; test('Inline element is initially present.',() { var root = query("span[is=x-app]").shadowRoot; var story = () => expect(root.query('#globe'),isNotNull); Timer.run(expectAsync0(story)); });}

没有expectAsync的测试版应该是：

@H_403_13@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的版本：

@H_403_13@main() { //useShadowDom = true; Timer.run(() { test('header element is initially present.',() { var root = query("span[is=x-app]").xtag; var globe = root.query('#globe'); expect(globe,isNotNull); }); });}

对我来说,这3个代码100％传递给DartiumDart编辑器版本0.5.20_r24275Dart SDK版本0.5.20.4_r24275

总结

以上是内存溢出为你收集整理的单元测试 – 如何在Dart中测试Web组件？全部内容，希望文章能够帮你解决单元测试 – 如何在Dart中测试Web组件？所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。