さわらブログ

さわら(@xhiroga)の技術ブログ

#サーバレスシングルページアプリケーション ルーティング

ルータ関数のテストを成功させるのに1時間もかかってしまった...

原因

ルータ関数とテスト関数の両方で、ビューを編集するためのjQueryでクラスセレクタの頭に.をつけていなかった。
(一番下の行)

learnjs.showView = function(hash) {
    // ハッシュとルート関数の対応関係を持つオブジェクトをroutesオブジェクトとする
    var routes = {
        '#problem-1': learnjs.problemView
    };
    var viewFn = routes[hash];
    if(viewFn){
    $('view-container').empty().append(viewFn());
    }
}

なんでこんなことが起きてしまったのか...

テキスト通りにやってもうまくいかない段階で早めにWebインスペクターを起動して、テストにブレークポイントを挿入して一つづつ動作を見るべきだった。
こちらがあるべき姿のスクショです。
f:id:hiroga_cc:20180412080532p:plain

この方法、今ブログ書いててようやく気がついた...

よかったこと

開発の順番はちゃんとやれてよかった。
まずはルータ関数さえない状態でテストを書く。次に動かして失敗させる。
それが終わったらアサーションを成功させるべく、名前空間の定義→関数の定義→と進める。