testharness.js を使ってみた。

testharness.js の解説と、具体的なテストの記述例です。

Transcript

1. testharness.js を 使ってみた。 Test the Web Forward Meetup (仮), Tokyo #2 (2014/04/12) ACCESS Yuki Sekiguchi
2. About Us
3. About Me Yuki Sekiguchi / Twitter: @yukiseki712 Software Engineer NetFront Browser NetFront Life Browser NetFront Browser NX for Wii U PUBLUS Reader Chromium(20) / WebKit(13)
4. Agenda • testharness.js? • assert? • 実行結果 • 書いてみた。 • Q&A
5. testharness.js?
6. W3C test ref test testharness.js manual test
7. W3C test ref test testharness.js manual test
8. W3C test ref test testharness.js manual test
9. testharness.js? xUnit!
10. testharness.js JavaScript を使った DOM 等の値の確認
11. template(html) <script src="/resources/testharness.js"></script> <script src="/resources/testharnessreport.js"></script> <link rel="stylesheet" href="/resources/testharness.css"> <div id="log"></div> http://testthewebforward.org/docs/test-templates.html#script-test-templates
12. template(script) <script> test(function() { [body of test function - must include at least one assert*() function] }, [Test Name]); </script>
13. assert?
14. assert? これは、(true / false / XXXと等しい / XXX と等しく ない) べきだ！ assert_something(確かめる値: actual, 期待する 値: expected, 何を確かめてるのかの説明: description)
15. assert family(value) assert_true(actual, description) assert_false(actual, description) assert_equals(actual, expected, description) assert_not_equals(actual, expected, description)
16. assert family(DOM) assert_own_property(object, property_name, description) assert_inherits(object, property_name, description) assert_idl_attribute(object, attribute_name, description) assert_readonly(object, property_name, description) assert_throws(code, func, description)
17. 実行結果
18. Pass! (｀・ω・´) test(function() { var cake = true; assert_true(cake, "The cake is a lie!"); }, "There will be cake.");
19. Fail (´・ω・｀) test(function() { var cake = false; assert_true(cake, "The cake is a lie!"); }, "There will be cake.");
20. 書いてみた。
21. insertBefore test(function() { var parent = document.getElementById("parent"); var before = document.getElementById("before"); var child = document.createElement("div"); parent.insertBefore(child, before); assert_equals(child.parentNode, parent, "There should be the element under the parent element."); assert_equals(child.nextSibling, before, "There should be the element at the previous of the before element."); }, "Insert before the before element.");
22. window.document readonly attribute Document document; test(function() { assert_own_property(window, "document", "The window object should have document attribute."); assert_readonly(window, "document", "The document attribute should read only."); }, "Checks document attribute of window object.");
23. Ruby <ruby><span id="base">漢字</span><rt id="text">かんじ</ruby> test(function() { var base = document.getElementById("base"); var text = document.getElementById("text"); assert_equals(base.getBoundingClientRect().left, text.getBoundingClientRect(). left, "Ruby base and ruby text should create one ruby pair."); }, "Ruby base and ruby text creates one ruby pair.");
24. Q&A
25. Enjoy!