block

プログラミング初心者のアウトプットブログです。

【RSpec rails】 タスクの一覧表機能のsystemテストコード

テストすること

  • ユーザー1のタスクが画面上に表示されることを確認する
  • ユーザー1のタスクがユーザー2に表示されていないことを確認する(作成者のみに表示)

はじめに、FactoryBotでタスクのテストデータを作成できるようにしておく。

FactoryBot
FactoryBot.define do
  factory :task do
    name { 'タスク' }
    association :user
  end
end


テスト詳細
require 'rails_helper'

RSpec.describe "Tasks", type: :system do
  before do
  describe '一覧表示機能' do
    before do
      # ユーザー1を作成
      # ユーザー1のtaskを作成
    end
    
    context 'ユーザー1がログインしているとき' do
      before do
        # ユーザー1でログイン
      end
      it 'ユーザー1が作成したtaskが表示されていること' do
        # 作成済みのtask名が画面に表示されていることを確認
      end
    end

    context 'ユーザー2がログインしているとき' do
      before do
        # ユーザー2を作成
        # ユーザー2でログイン
      end

      it 'ユーザー1が作成したtaskが表示されていないこと' do
        # ユーザー1が作成したtask名が画面に表示されていないこと
      end
    end
  end
end


一覧表示のテストコード
require 'rails_helper'

RSpec.describe "Tasks", type: :system do
  describe '一覧表示機能' do
    before do
      @user_1 = FactoryBot.create(:user, nickname: 'ユーザー1', email: 'user1@com')
      FactoryBot.create(:box, name: 'タスク', user: @user_1)
    end
    
    context 'ユーザー1がログインしているとき' do
      before do
        visit root_path
        visit new_user_session_path
        fill_in 'メールアドレス', with: @user_1.email
        fill_in 'パスワード', with: @user_1.password
        click_on 'ログイン'
      end
      it 'ユーザー1が作成したtaskが表示されていること' do
        expect(page).to have_content('タスク')
      end
    end

    context 'ユーザー2がログインしているとき' do
      before do
        @user_2 = FactoryBot.create(:user, nickname: 'ユーザー2', email: 'user2@com')
        visit root_path
        visit new_user_session_path
        fill_in 'メールアドレス', with: @user_2.email
        fill_in 'パスワード', with: @user_2.password
        click_on 'ログイン'
      end

      it 'ユーザー1が作成したtaskが表示されていないこと' do
        expect(page).to have_no_content('タスク')
      end
    end
  end
end


mac-san.hatenablog.com


mac-san.hatenablog.com

【rails】destroy_allメソッドで指定したすべてのデータを一括で削除する


指定した親データのコメントをすべて削除する


routes.rb

Rails.application.routes.draw do
  devise_for :users
  root "parents#index"
  resources :parent  do
    resources :comment do
     # collectionでdestroy_allアクションへのルーティングを設定
      collection do
        delete 'destroy_all'
      end
    end
  end
end


parentのedit.html.erbに 全てのコメントを削除する要素を追加する

<div><%= link_to "全てのコメントを削除", destroy_all_box_comments_path(@parent.id), method: :delete %></div>


comments_controller.rbでdestroy_allメソッドの処理を記述する

class ConnectsController < ApplicationController
  # destroy_allメソッド
  def destroy_all
    # paramsで送られてきた親のレコード取得
    parent = parent.find(params[:box_id])
   # 取得した親に紐付いているすべてのコメントをcommentsに入れる
    comments = box.comments
    # 一括削除に成功したときと失敗したときの分岐
    if comments.destroy_all
      redirect_to box_comments_path(parent)
    else
      render edit_parent_path(parent)
    end
  end
end

【Ruby on Rails】deviseのdevise_parameter_sanitizerメソッドを使って追加したカラムを許可する

標準のdeviseに含まれているemailとpasswordに加えてnicknameを追加する

nicknameカラムを追加する
## マイグレーションファイル
t.string :nickname, null: false  ##追加
t.string :email,              null: false, default: ""
t.string :encrypted_password, null: false, default: ""


ApplicationControllerでnicknameカラムを許可する
class ApplicationController < ActionController::Base
  ##deviseコントローラーでの処理のときのみ、configure_permitted_parametersメソッドが実行される
  before_action :configure_permitted_parameters, if: :devise_controller?

  private

  def configure_permitted_parameters
    ##sing_upのときnicknameカラムを許可
    devise_parameter_sanitizer.permit(:sign_up, keys: [:nickname])
  end
end


deviseの導入手順

mac-san.hatenablog.com

ユーザーモデルの単体テストコード

mac-san.hatenablog.com

【JavaScript】サイドバー開閉操作

クラス名を変更してサイドバー開閉を操作するコード

CSS

/* オーブン状態 */
.side-open {
  width: 200px;
  overflow: scroll;
}

/* クローズ状態 */
.side-close {
  width: 0px;
  overflow: hidden;
}

JavaScript

引数で受け取ったHTML要素のクラス名をside-openに変更する

// サイドバーを開く
function open(element){
  element.className="side-open";
}


引数で受け取ったHTML要素のクラス名をside-closeに変更する

// サイドバー閉じる
function close(element) {
  element.className="side-close";
}


// サイドバー開閉操作
function change(){
  const btn = document.getElementById("btn");
     let bool = false;
     btn.addEventListener("click", () => {
        const side = document.getElementById("side-open");
        if (bool) {
          // オーブンするメソッドを呼び出す
          open(side);
          bool = false;
        } else {
          // クローズするメソッドを呼び出す
          close(side);
          bool = true;
        }
   });
}

【JavaScript】特定のページのみイベント発火


URLの一部とマッチしていたらイベント発火をし、処理されるようにする

if (document.URL.match(/URLの一部/)) {
  const foo = document.getElementById("btn");
  foo.addEventListener("イベント", () => {
      //処理
  });
}


これを使うと、特定のアクションのときにのみ処理されるようにできる。
document.URL.match(/show/)としたら、URLにshowが含まれているページにのみ共通のイベント処理が行われる。

【JavaScript】ボタンワンクリックですべてのリンクを新しいタブで開く機能

JavaScript

// DOM操作
function getBtn() {
  const openBtn = document.getElementById("all-open");
  openBtn.addEventListener("click", allOpen);
}

// すべてのリンクを開くメソッド
function allOpen() {
  const allItems = document.querySelectorAll(".link");
  allItems.forEach(a => {
    window.open(a);
  });
}

setInterval(getBtn, 1000);

実際の挙動

f:id:macbookpro_san:20201113090951g:plain
複数のリンクを一度に開く

【AWS】画像の保存先をS3にする。(Railsアプリ)

画像の保存先をS3にする

gemをインストール

Gemfile

gem 'aws-sdk-s3', require: false

ターミナル

$ bundle install

開発環境での画像の保存先をS3に変更

# config/environments/development.rb

config.active_storage.service = :amazon

storage.ymlの編集

region→ap-northeast-1 アジアパシフィック (東京)
# config/storage.yml

amazon:
 service: S3
 access_key_id: <%=  環境変数'] %>
 secret_access_key: <%= 環境変数'] %>
 region: ap-northeast-1
 bucket: バケット名

本番環境での画像の保存先をS3に変更

# config/environments/production.rb

config.active_storage.service = :amazon

開発・本番環境それぞれ環境変数を設定する