旅好きエンジニアのメモ

旅のこと映画、統計、会計、プログラミングなど、気の向くままに語ります

railsにvue-test-utilsを入れてみる

前提

  • webpackは使わない。
  • node.jsを入れている。
  • npmを使用出来る

※ webpackを使わない理由は対象をrails5だけに絞っていないからです。

必要なものをinstall

npm install --save-dev jest @vue/test-utils vue-jest babel-jest jest-serializer-vue vue-cli babel-preset-es2015

各設定ファイルを編集する

./package.json

{
  "devDependencies": {
    "@vue/test-utils": "^1.0.0-beta.19",
    "babel-jest": "^23.0.1",
    "babel-preset-es2015": "^6.24.1",
    "jest": "^23.1.0",
    "jest-serializer-vue": "^2.0.2",
    "vue": "^2.5.16",
    "vue-cli": "^2.9.6",
    "vue-jest": "^2.6.0"
  }
}

./.babelrc

{
  "presets": ["es2015"]
}

sampleのテストファイルを用意する

./app/assets/javascripts/App.vue

<template>
  <div id="app">
    <router-view/>
  </div>
</template>

<script>
export default {
  name: 'App'
}
</script>

<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

./app/assets/javascripts/lib.js

export const sqrt = Math.sqrt;
export function square(x) {
    return x * x;
}
export function diag(x, y) {
    return sqrt(square(x) + square(y));
}

./app/assets/javascripts/tests/App.test.js

import * as lib from '../lib';
describe('Counter', () => {

  it('run test !!!!!!!!!', () => {
    expect(1).toBe(1)
  })

  it('hoge_test', () =>  {
    expect(lib.square(11)).toBe(121)
  })
})

流してみる

npm test もしくは jest で流れます。

npm testで流れる理由はpackage.jsonに記載しているからです。

rails2で'ruby-debug'(デバッグ)を使う時の注意

下記のgemでdebug(デバッグ)する時、だいたいgem入れて
gem 'ruby-debug'

自分の止めたいところで
debugger
をコードの中に入れるみたいな感じで書いていると思います。

そして、サーバーの立ち上げはいつも通りで。。。

bundle exec script/server

はい、最後これ駄目ですね。

正解はoptionを下記のようにつけることでデバッグできるようになります。

bundle exec script/server --debugger

ブログ書くのは良いけど、一応自分でみんな動かしているのかな?
バージョンと動くものを書くのが大事だと思いますね。。。

もしかしたら、普通のサーバー立ち上げでもできる方法があるのか?

rails5でapiを作成する方法

apiの改修することはあれども今までapiの作成を初めからしたことなかったので 簡単に作った時のメモをしておきます。

環境

ruby 2.4.2p198 Rails 5.1.4 sqlite3(初期設定のものを使っています)

アプリ作成

まず、適当にrails アプリ作りましょう。

rails new webapp

例として著者(Articles)を検索するapiを作成します。

マイグレーションファイル

マイグレーションファイルはこんな感じです db/migrate/20170808181112_create_articles.rb

class CreateArticles < ActiveRecord::Migration[5.0]
  def change
    create_table :articles do |t|
      t.string :title
      t.text :content
      t.index [:title,:content]
      t.timestamps
    end
  end
end

migrateしてテーブル作りましょう

rails db:migrate
モデル

モデルを書きましょう。(特にvalidation checkとかは書いてません。active record 使うためだけに書いてます) models/article.rb

class Article < ActiveRecord::Base
end
ルーティング

ルーティングはこんな感じでv1とかバージョニング管理できるようにしています。 routes.rb

Rails.application.routes.draw do
  namespace :api, {format: 'json'} do
    namespace :v1 do
      namespace :article do
        get "/" , :action => "index"
      end
    end
  end
end
コントローラー

最後にコントローラーです。一応タイトルで検索できるようにしています。 controllers/api/v1/article_controller.rb

module Api
  module V1
    class Api::V1::ArticleController < ApplicationController
      def index
          @article = Article.where("title = ?", params[:title])
          render json: @article
      end
    end
  end
end

ちなみにキャッシュ作れるのでこっちのほうが早くなります。

module Api
  module V1
    class Api::V1::ArticleController < ApplicationController
      def index
          @article = Rails.cache.fetch('article', expires_in: 60.seconds) do
            Article.where("title = ?", params[:title])
          end
          render json: @article
      end
    end
  end
end

"params[:title]"は渡ってくるパラメータです。params[]はrailsでうまくやってくれているので 例えば以下のように検索すれば params[:title]は"sample"になります。 http://localhost:3000/api/v1/article?title=sample

以下だと、 params[:title]は"sample" params[:content]は"aaa"になります。 http://localhost:3000/api/v1/article?title=sample&content=aaa

データを入れる

では、サーバーを立ち上げる前にデータを入れてみましょう。 以下コマンドでコンソールに入ります。

rails c

コンソールでデータを1件だけ作ります。

data=Article.new
data.title = "sample"
data.content = "aaa"
data.save!

先程作ったデータがあるか確かめます。

Article.first
確認

最後にサーバーを立ち上げてチェックしましょう。

rails s

ブラウザ(cheromeとか)で以下のurlを打ってみると先程いれたデータがjsonで返ってくるのが確認できるはずです。 http://localhost:3000/api/v1/article?title=sample

まとめ

rails5はapiだけの機能のアプリも作れますのでそちらでアプリを作っても良いかもしれません。 そのときの作り方はオプションでapi付けるだけです。

rails new weapp --api

これを機にapi開発をやってみてはいかがでしょうか。

rails4からrails5でインデックスの貼り方が変わった?

index貼りたいけどrails5になったらadd_indexで貼れなくて戸惑いましたw

rails4なら作られたテーブルに関してこんな感じ

class AddIndexToTestTables < ActiveRecord::Migration
  def change
    add_index :test_tables, :name
    add_index :test_tables, :name2
  end
end

rails5になるとcreate table時にこんな漢字で作るらしい。

class CreateTestTables < ActiveRecord::Migration[5.0]
  def change
    create_table :test_tables do |t|
      t.string :name
      t.string :name2
      t.index :name
      t.index :name2
    end
  end
end

indexの追加は以下のように配列でも可能です。

t.index [:name,:name2]

ちなみに、rails5はrakeコマンド基本的には使わないらしいですね。。。 (使えるっぽいですが。。。)

rails4ではこうですが。

rake db:migrate

rails5ではrailsコマンドっぽいです

rails db:migrate

いやぁ、バージョン移行するって大変ですね。。。

参考は下記ページ http://parrot.hatenadiary.jp/entry/2016/05/29/112331