webページ更新しました。というか、webのお勉強 →bootstrap →webテスト

webページ更新しました。
・・・といっても、コンテンツとしては特になく、構造をね。。。
webコンテンツ作成の勉強になった。

そして、更新履歴を見て、約１年ぶりの更新。。。


以下に、変更点を記載します。

＜template＞

foundation　→　bootstrap

　簡単。
　この前が、jadeでlayoutを外出ししていたため、そこの構成やclass名を変えるだけですぐに対応できた。

＜追加導入＞

サブメニュー

　　これまでサイドのメニューは、topのメニューと同じにしていたけど、同じページ内の項目にしてみた

ページtopへ

　　ページの右下などでよく見る。同じページのtopへ移動ボタン追加。
　　これも、bootstrapであるかと思ったんだけど、無いようなのでjsにサンプルからそのまま記載

affix

　サイドのメニューが、スクロールしても同じ位置に固定する機能。
　bootstrapにあったので、追加してみた。
　追加で、レスポンシブで幅が狭い時は、上部にあるため、コンテンツと被らないように、実施しないよう@mediaで制御追加

scrollspy

　スクロールしていると、現在のコンテンツにあわせたサブメニューの見出しをactive表示して、自分が今どれを読んでいるか分かるもの。bootstrapのサイトでも利用されている。
　こちらも、bootstrapにあるので追加してみた。
　スクロールを始めると、サブメニューの幅が小さくなるというバグが有るらしいので、それにも対応。

fontawesome

　

js concat

 　bowerのものを、１つにconcatしようとしたけれど、jsは順番がやっぱり重要で、順番が異なると動かない。依存関係を確認するというのをいろいろ調べたけれども、できなかったけど、
　　bower.json内のdependenciesの順番変更したらすぐ出来た。
　　dependenciesは、アルファベット順かと思っていたけど、変更できたみたい。

＜構成の分離＞

jade内の記載のうち、ページ構成ではないデータをjsonに分離
繰り返し処理のPGM化促進　変更履歴など

＜CSS＞

css spriteを利用しようとして、うまくいかないからやめた
後で、これだけ試す

scssをsass記法に変えようとして、うまくいかないし、bowerのscssファイルを現在参照しているので、やめた

＜gulp＞

browsersyncで、変更があったらブラウザ上もリロードして確認
gulpのcoffeeコンパイルを、これまで、coffeeだけのもので行っていたけれど、webpackで行う

＜webテスト＞

karma・jasmine

この辺を見て、勉強したので、使ってみようと思った。
静的サイトなので、特にjsのロジックはなく、animationぐらいなんだけど、試してみようとした。
http://qiita.com/hosomichi/items/4e508e804b0e50e7b6ec
http://qiita.com/hosomichi/items/311e3eac4f55183b62c2
http://qiita.com/hosomichi/items/7464c69bf54927d019a7


こちらにもwebpack導入。テストをcoffeeで書くため

DOMの操作をしやすくするよう、karma jquery導入

ページが表示されないと思ったら、相対パスが異なっていた。（specファイルからの相対位置ではない？）
　document.body.innerHTML = window.__html__['../WebContent/history.html']
→document.body.innerHTML = window.__html__['WebContent/history.html']

jsのcoverageがとれないと思ったら、パス指定の間違いだった（間に空白入ってた）
　'WebContent/js/**/* .js': ['coverage']
→'WebContent/js/**/*.js': ['coverage']

karmaでwebページ動作テストをしようと思ったが、ページリンク動作がうまく動かず
結局、karmaはunit testで、integrated testじゃねーからと言われたので、
ひとまずunit testのみを行うことにする
、、、が、単体で出来る事もないのでやめたｗ
http://bittersweetryan.github.io/jasmine-presentation/#slide-17

protractor

そこで、end to endテストを行うことにした。
karmaにも、end2endのプラグインが（非公式？？）あるようだけど、動かなかったので、e2e用という、protractorを利用してみる。
はじめ、for AngularJSと書かれていたので、他のだと使えないと思って諦めていたけど、使ってみたら出来た。検索したら、Angular以外で利用しようとしている人も、まあまあいるみたい

tutorialが、confとspecをjsで書かれていたが、coffeeで書きたい。
エラーが出ていたが、byがcoffeescriptの予約語とかぶっている記事を思い出して、Byに変更すると実行できた。

windowサイズ初期化

リンククリック後のスクロール値取得しようとしたが、animationで時間差があるため、sleep使用

helper関数化

テスト完成後、共通部分を関数として外出し
　しかし、javascriptの文法＋coffeescriptの文法がいまいちわかっていないので、なかなか動かない。結局、()のあるなしで動かなかったみたい。
　　getScrollTop
　→getScrollTop()

さらに、helper関数として外出し

サーバー終了設定

gulpの設定で、こちらの方法で、サーバーのexitをしようとすると、テスト実行されない
https://github.com/schickling/gulp-webserver/issues/48

こちらの方法で、終了時の処理を入れると、テストが実行後、自動終了するようになった
    .on 'end', -> process.exit()
http://stackoverflow.com/questions/29968380/how-to-exit-protractor-when-done


なお、参考までに、最終的なspecファイルはこちら。

<e2eSpec.coffee>

h = require('../helpers/helper')

describe 'テスト（更新履歴）', ->

  submenu_link_list = $$('.submenulist li')
  submenu_link_last = submenu_link_list.last()
  submenu = $('.submenulist')
  mainrow = $('.main-row')
  gototop_link = $('.gototop')

  SLEEP_TIME = 1000
  INIT_WINDOW_WIDTH = 1500
  INIT_WINDOW_HEIGHT = 1000
  SCROLL_TEST_ITEM = 5


  beforeEach ->
    browser.driver.manage().window()
        .setSize(INIT_WINDOW_WIDTH, INIT_WINDOW_HEIGHT)
    browser.ignoreSynchronization = true
    browser.get browser.baseUrl+'/history.html'
    return


  it 'サブメニューの最後の要素は「2006年」', ->
    expect(submenu_link_last.getText()).toEqual '2006年'

  it 'サブメニューの最後の要素のリンク先は、#submenu[0-9]*であること', ->
    submenu_link_last.$('a').getAttribute('href').then (submenu_link_url) ->
      expect(submenu_link_url).toMatch '#submenu[0-9]*$'

  it 'サブメニューリンクをクリックすることで、ページ内リンク先に移動すること', ->
    # 初期スクロール位置の確認
    expect(h.getScrollTop()).toEqual 0

    # サブメニューリンクをクリック
    submenu_link_last.click()
    browser.sleep(SLEEP_TIME)

    # クリック後のスクロール位置の確認
    submenu_link_last.$('a').getAttribute('href').then (submenu_link_url) ->
      submenu_link_id = h.getLinkId(submenu_link_url)
      $(submenu_link_id).getLocation().then (locationdata) ->
        mainrow.getCssValue('padding-top').then (headerH) ->
          expect(h.getScrollTop()).toEqual locationdata.y - parseInt(headerH, 10)


  it 'スクロールすると、サブメニューが合わせて移動すること', ->
    # サブメニューの初期location取得
    init_locationdata_y = 0
    submenu.getLocation().then (locationdata) ->
      init_locationdata_y = locationdata.y

    # スクロール
    submenu_link_list.get(SCROLL_TEST_ITEM).click()
    browser.sleep(SLEEP_TIME)

    # スクロール後のサブメニューの位置が、スクロール量+初期locationであること
    h.getScrollTop().then (scrollTop) ->
      submenu.getLocation().then (locationdata) ->
        expect(locationdata.y).toEqual scrollTop + init_locationdata_y

  it 'スクロールすると、scrollspyが動作すること', ->
    # 初期はactive状態ではないこと
    expect(h.hasClass(submenu_link_list.get(SCROLL_TEST_ITEM), 'active')).toBe(false)

    # スクロール
    submenu_link_list.get(SCROLL_TEST_ITEM).click()
    browser.sleep(SLEEP_TIME)

    # スクロール後に、titleに一致した項目がactiveになっていること
    expect(h.hasClass(submenu_link_list.get(SCROLL_TEST_ITEM), 'active')).toBe(true)

  it 'トップへボタンで、ページ先頭に移動すること', ->
    # トップへボタンをクリック前に、スクロールする。初期位置がページ先頭でないこと
    submenu_link_list.get(SCROLL_TEST_ITEM).click()
    browser.sleep(SLEEP_TIME)
    expect(h.getScrollTop()).toBeGreaterThan 0

    # トップへボタンをクリック
    gototop_link.click()
    browser.sleep(SLEEP_TIME)

    # ページ先頭に移動していること
    expect(h.getScrollTop()).toEqual 0

<helper.coffee>

module.exports = {
  getScrollTop : ->
    browser.executeScript('return document.body.scrollTop;')

  hasClass : (element, cls) ->
    element.getAttribute('class').then (classes) ->
      classes.split(' ').indexOf(cls) != -1

  getLinkId : (url) ->
    url.substring(url.lastIndexOf('#'), url.length)
}

＜今後＞

今後、追加でやりたいことメモ
・Jenkinsでテスト　CI　→（7/14 build/test/lint）
・css sprite　→アイコン整理したら、spriteする画像がなくなった。。。
・coffeescript lint　→（7/11）
・sourcemap　→（7/11 仮）
・SNSアイコン変更　→　（7/15）
・gulpファイルをtaskで分割　→　(11/26)


なお、現在、こちらの本で、javascriptのことを一旦勉強中。