あいつの日誌β

働きながら旅しています。

はてなブログはじめてみました。

ということでラーメンのブログの人に招待していただきました。あざっす。今度たこ焼きのうまい店教えて下さい。

最近の俺

なぜかgoogle closure libraryを使ってインターフェースいじってます。でもテストの書き方が分かりません。なので勉強しました。

この記事を読まなくて良い人

javascriptでdom操作をするテストなんかいつも書いてるぜ！って人はもう帰っていいんじゃないかな。

覚えるポイント

  • とりあえずgoog.require('goog.testing.jsunit');って書く
  • testHogeFugaGahun () {} って関数を用意する
  • assertEquals, assertNull, assertContainsというテスト用関数覚えておく(goog.testing.domライブラリで使用されているのはこの3つなので)
  • goog.testing.domのメソッドをできるだけ一杯覚える

具体的にやる事

本家のテストコードを写経しましょう。

写経してみた

<!DOCTYPE html>
<html>
<head>
  <title>goog.testing.dom</title>
  <script src="http://closure-library.googlecode.com/svn/trunk/closure/goog/base.js"></script>
  <script>
    goog.require('goog.dom');
    goog.require('goog.testing.dom');
    goog.require('goog.testing.jsunit');
  </script>
</head>
<body>
<div id="root"></div>
<script>
    function testBasicAssertMethods () {
        assertEquals('Hello', 'Hello');
        assertNull(null);
        assertContains('Text', 'Text should match');
    
        var msg = "error:cannnot calculate";
        var err = assertThrows('throw exception', function() {
            throw msg;
        });
        assertEquals(err, msg);
    }

    // copied from https://github.com/jarib/google-closure-library/blob/master/closure/goog/testing/dom_test.html
    var root = goog.dom.getElement('root');

    function setUp() {
        root.innerHTML = '';
    }

    function testFindNode() {
        root.innerHTML = 'a<br>b';
        assertEquals(goog.testing.dom.findTextNode('a', root), root.firstChild);
        assertEquals(goog.testing.dom.findTextNode('b', root), root.lastChild);
        assertNull(goog.testing.dom.findTextNode('c', root));
    }

    function testFindNodeDuplicate() {
        root.innerHTML = 'c<br>c';
        assertEquals('Should return first duplicate',
            goog.testing.dom.findTextNode('c', root), root.firstChild);
    }

    function findNodeWithHierarchy() {
        root.innerHTML = '<div>a<p>b<span>c</span>d</p>e</div>';
/*
<div>
    a
    <p>b<span>c</span>d</p>
    e
</div>
*/
        assertEquals(goog.dom.TagName.DIV,
            goog.testing.dom.findTextNode('a', root).parentNode.tagName);
        assertEquals(goog.dom.TagName.P,
            goog.testing.dom.findTextNode('b', root).parentNode.tagName);
        assertEquals(goog.dom.TagName.SPAN,
            goog.testing.dom.findTextNode('c', root).parentNode.tagName);
        assertEquals(goog.dom.TagName.P,
            goog.testing.dom.findTextNode('d', root).parentNode.tagName);
        assertEquals(goog.dom.TagName.DIV,
            goog.testing.dom.findTextNode('e', root).parentNode.tagName);
    }

    function testAssertHtmlContentsMatch() {
        root.innerHTML='<div>test</div>';

        goog.testing.dom.assertHtmlContentsMatch(
          '<div>test</div>',
          root
        );

        goog.testing.dom.assertHtmlContentsMatch(
          '<div class="hoge">test</div>',
          root
        );
        
        var styleErr = assertThrows('Should fail due to mismatched style', function() {
            goog.testing.dom.assertHtmlContentsMatch(
            '<div style="color:red;">test</div>',
            root
            );
        });        
        assertContains('Should have same styles', styleErr.message); 

        var tagErr = assertThrows('Should fail due to mismatched tag', function() {
            goog.testing.dom.assertHtmlContentsMatch(
            '<p>test</p>',
              root
            );
        });
        assertContains('Tag names should match', tagErr.message);
    }

</script>
</body>
</html>

まだまだコードは続くが疲れたので切り上げました。

google.closure.liburaryを使った感想

使いこなすと便利だからおすすめ、という感想はありません。が、コード自体はシンプルで読みやすいので勉強するにはいいんじゃないかと思っています。