Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Rails System Test on Docker

Rails System Test on Docker

TokyuRuby会議11 発表資料

https://tokyurubykaigi.github.io/tokyu11/

Fumiaki MATSUSHIMA

July 29, 2017
Tweet

More Decks by Fumiaki MATSUSHIMA

Other Decks in Programming

Transcript

  1. @mtsmfm
    Rails System Test
    on Docker

    View Slide

  2. 松島 史秋
    GitHub, Twitter
    @mtsmfm
    Web Developer

    View Slide

  3. https://www.quipper.com/

    View Slide

  4. https://ninirb.github.io

    View Slide

  5. https://www.meetup.com/ja-JP/GraphQL-Tokyo/

    View Slide

  6. この発表で
    伝えたいこと

    View Slide

  7. Docker を
    使うと
    楽できる

    View Slide

  8. 開発環境に
    Docker を
    使おう

    View Slide

  9. 1. Rails System Test とは
    2. Docker を使うとどうなるか
    3. Docker とのくっつけかた

    View Slide

  10. Rails System Test とは

    View Slide

  11. - Rails 5.1 で入った
    - Capybara を使う
    - DB cleaner の類が
    要らない

    View Slide

  12. http://weblog.rubyonrails.org/2017/4/27/Rails-5-1-final/

    View Slide

  13. - Rails 5.1 で入った
    - Capybara を使う
    - DB cleaner の類が
    要らない

    View Slide

  14. require "test_helper"
    class ApplicationSystemTestCase < ActionDispatch::SystemTestCase
    driven_by :selenium, using: :chrome, screen_size: [1400, 1400]
    end
    require "application_system_test_case"
    class PostsTest < ApplicationSystemTestCase
    test "visiting the index" do
    visit posts_url
    assert_selector "h1", text: "Post"
    end
    end

    View Slide

  15. require "test_helper"
    class ApplicationSystemTestCase < ActionDispatch::SystemTestCase
    driven_by :selenium, using: :chrome, screen_size: [1400, 1400]
    end
    require "application_system_test_case"
    class PostsTest < ApplicationSystemTestCase
    test "visiting the index" do
    visit posts_url
    assert_selector "h1", text: "Post"
    end
    end

    View Slide

  16. - Rails 5.1 で入った
    - Capybara を使う
    - DB cleaner の類が
    要らない

    View Slide

  17. Test code
    (minitest)
    Rails
    (puma)
    DB
    Connection
    Connection

    View Slide

  18. - database_cleaner
    - transaction
    - truncation
    - database_rewinder
    - 賢い truncation

    View Slide

  19. https://gist.github.com/josevalim/470808

    View Slide

  20. Test code
    (minitest)
    Rails
    (puma)
    DB
    Connection

    View Slide

  21. https://github.com/rails/rails/pull/28083

    View Slide

  22. https://github.com/rails/rails/pull/28083/files?diff=unified

    View Slide

  23. https://speakerdeck.com/eileencodes/railsconf-2017-
    building-the-new-rails-system-test-framework

    View Slide

  24. 1. Rails System Test とは
    2. Docker を使うとどうなるか
    3. Docker とのくっつけかた

    View Slide

  25. Docker を使うとどうなるか

    View Slide

  26. Test code
    (minitest)
    Rails
    (puma)
    DB
    Connection

    View Slide

  27. Test code
    (minitest)
    Rails
    (puma)
    DB
    Selenium
    Browser
    Host

    View Slide

  28. Test code
    (minitest)
    Rails
    (puma)
    DB
    Selenium
    Browser
    (chrome)
    web db
    chrome

    View Slide

  29. $ brew install chromedriver

    View Slide

  30. $ brew install chromedriver
    $ brew install postgresql
    $ brew install rbenv
    ...

    View Slide

  31. $ brew install chromedriver
    $ brew install postgresql
    $ brew install rbenv
    ...

    View Slide

  32. 必要なもの
    Docker for Mac
    docker-sync
    以上!

    View Slide

  33. 1. Rails System Test とは
    2. Docker を使うとどうなるか
    3. Docker とのくっつけかた


    View Slide

  34. Test code
    (minitest)
    Rails
    (puma)
    DB
    Selenium
    Browser
    (chrome)
    web db
    chrome

    View Slide

  35. version: '2'
    services:
    web:
    build: .
    environment:
    - DATABASE_URL=postgres://postgres:@db
    - PORT=3000
    - HOST=0.0.0.0
    tty: true
    stdin_open: true
    ports:
    - 3000:3000
    depends_on:
    - db
    - chrome
    volumes:
    - .:/app
    chrome:
    image: selenium/standalone-chrome-debug
    ports:
    - 5900:5900
    db:
    image: postgres:9.5.4

    View Slide

  36. require "test_helper"
    require "socket"
    class ApplicationSystemTestCase < ActionDispatch::SystemTestCase
    driven_by :selenium, using: :chrome, screen_size: [1400, 1400],
    options: {url:"http://chrome:4444/wd/hub"}
    def setup
    host! "http://#{IPSocket.getaddress(Socket.gethostname)}"
    super
    end
    end

    View Slide

  37. require "test_helper"
    require "socket"
    class ApplicationSystemTestCase < ActionDispatch::SystemTestCase
    driven_by :selenium, using: :chrome, screen_size: [1400, 1400],
    options: {url:"http://chrome:4444/wd/hub"}
    def setup
    host! "http://#{IPSocket.getaddress(Socket.gethostname)}"
    super
    end
    end

    View Slide

  38. Test code
    (minitest)
    Rails
    (puma)
    DB
    Selenium
    Browser
    (chrome)
    web db
    chrome

    View Slide

  39. https://github.com/rails/rails/pull/28341

    View Slide

  40. require "test_helper"
    require "socket"
    class ApplicationSystemTestCase < ActionDispatch::SystemTestCase
    driven_by :selenium, using: :chrome, screen_size: [1400, 1400],
    options: {url:"http://chrome:4444/wd/hub"}
    def setup
    host! "http://#{IPSocket.getaddress(Socket.gethostname)}"
    super
    end
    end

    View Slide

  41. Test code
    (minitest)
    Rails
    (puma)
    DB
    Selenium
    Browser
    (chrome)
    web db
    chrome

    View Slide

  42. https://github.com/rails/rails/pull/28644

    View Slide

  43. $ open vnc://:secret@localhost:5900

    View Slide

  44. View Slide

  45. ヘッドレスっぽく使いつつ
    直接操作もできる!

    View Slide

  46. この構成をとっておけば
    Browser Stack なども
    導入しやすい

    View Slide

  47. 100.times do |i|
    test "visiting the index #{i}" do
    visit posts_url
    assert_selector "h1", text: "Post"
    end
    end
    ブラウザ 時間
    Chrome 25.269699s
    Headless Chrome 16.881625s
    PhantomJS 12.243397s
    https://github.com/mtsmfm/rails-system-test-example/pull/2

    View Slide

  48. ※ Chrome unstable にしつつ
    cap-add SYS_ADMIN しないと
    動かなかった
    https://github.com/mtsmfm/rails-system-test-example/pull/2/files#d
    iff-1f904fb99929e223c9e3d8171b05d87e

    View Slide

  49. まとめ
    - Docker を使うとホストに
    いれるものが減る
    - ヘッドレスっぽくありつつも
    VNC で入れて便利
    - とはいえ --headlessの方が速い
    - どっちにしろ Docker で動かせる
    - CI だと --headless にするといい?
    - 作り始めるときは Docker 上で

    View Slide

  50. Credits
    Background pattern from subtlepatterns.com

    View Slide