🎄teratailクリスマスプレゼントキャンペーン2024🎄』開催中!

\teratail特別グッズやAmazonギフトカード最大2,000円分が当たる!/

詳細はこちら
RSpec

RSpecはRuby用のBDD(behaviour-driven development)フレームワークです。

Ruby on Rails

Ruby on Railsは、オープンソースのWebアプリケーションフレームワークです。「同じことを繰り返さない」というRailsの基本理念のもと、他のフレームワークより少ないコードで簡単に開発できるよう設計されています。

Q&A

2回答

1089閲覧

現場で使えるRuby on Rails速習実践ガイド RSpec System specのエラーを解決したい。

kit1987

総合スコア16

RSpec

RSpecはRuby用のBDD(behaviour-driven development)フレームワークです。

Ruby on Rails

Ruby on Railsは、オープンソースのWebアプリケーションフレームワークです。「同じことを繰り返さない」というRailsの基本理念のもと、他のフレームワークより少ないコードで簡単に開発できるよう設計されています。

0グッド

1クリップ

投稿2019/11/03 13:14

編集2019/11/03 13:28

前提・実現したいこと

初学者でありrailsで数ヶ月勉強しており現在現場で使えるRuby on Rails速習実践ガイドを使用して勉強しています。その際にRSpecのテスト実行でSystem specの新規作成機能のテストを実行中に以下のエラーが出たので解決したいです。

発生している問題・エラーメッセージ

2019-11-03 12:28:01 WARN Selenium [DEPRECATION] Selenium::WebDriver::Chrome#driver_path= is deprecated. Use Selenium::WebDriver::Chrome::Service#driver_path= instead. ...F. Failures: 1) 投稿管理機能 新規作成機能 新規作成画面でタイトルを入力したとき 正常に登録される Failure/Error: expect(page).to have_selector '.alert-success', text: '新規作成のテストを書く' expected to find css ".alert-success" but there were no matches # ./spec/system/posts_spec.rb:60:in `block (4 levels) in <top (required)>' Finished in 7.91 seconds (files took 10.07 seconds to load) 5 examples, 1 failure Failed examples: rspec ./spec/system/posts_spec.rb:59 # 投稿管理機能 新規作成機能 新規作成画面でタイトルを入力したとき 正常に登録される

該当のソースコード

posts_spec.rb

1require 'rails_helper' 2 3RSpec.describe '投稿管理機能', type: :system do 4 let(:user_a) { create(:user, name: 'ユーザーA', email: 'a@example.com') } 5 let(:user_b) { create(:user, name: 'ユーザーB', email: 'b@example.com') } 6 let!(:post_a) { create(:post, name: '最初の投稿', user: user_a ) } 7 8 before do 9 visit login_path 10 fill_in 'メールアドレス', with: login_user.email 11 fill_in 'パスワード', with: login_user.password 12 click_button 'ログインする' 13 end 14 15 shared_examples_for 'ユーザーAが作成した投稿が表示される' do 16 it { expect(page).to have_content '最初の投稿' } 17 end 18 19 describe '一覧表示機能' do 20 context 'ユーザーAがログインしている時' do 21 let(:login_user) { user_a } 22 23 it_behaves_like 'ユーザーAが作成した投稿が表示される' 24 end 25 26 context 'ユーザーBがログインしているとき' do 27 let(:login_user) { user_b } 28 29 it 'ユーザーAが作成した投稿が表示されない' do 30 expect(page).to have_no_content '最初の投稿' 31 end 32 end 33 end 34 35 describe '詳細表示機能' do 36 context 'ユーザーAがログインしているとき' do 37 let(:login_user) { user_a } 38 39 before do 40 visit post_path(post_a) 41 end 42 43 it_behaves_like 'ユーザーAが作成した投稿が表示される' 44 end 45 end 46 47 describe '新規作成機能' do 48 let(:login_user) { user_a } 49 50 before do 51 visit new_post_path 52 fill_in '投稿', with: post_name 53 click_button '登録する' 54 end 55 56 context '新規作成画面でタイトルを入力したとき' do 57 let(:post_name) { '新規作成のテストを書く'} 58 59 it '正常に登録される' do 60 expect(page).to have_selector '.alert-success', text: '新規作成のテストを書く' 61 end 62 end 63 64 context '新規作成画面でタイトルを入力しなかったとき' do 65 let(:post_name){''} 66 it 'エラーになる' do 67 within '#error_explanation' do 68 expect(page).to have_content 'タイトルを入力してください' 69 end 70 end 71 end 72 end 73end

新規作成機能でcreateアクションが関係していると思いました調べましたが分からず

class PostsController < ApplicationController before_action :set_post, only: [:show, :edit, :update, :destroy] def index @posts = current_user.posts.order(created_at: :desc) end def show end def new @post = Post.new end **def create @post = current_user.posts.new(post_params) if @post.save redirect_to @post, notice: "投稿「#{@post.name}」を登録しました。" else render :new end end ** def edit end def update @post.update!(post_params) redirect_to posts_url, notice: "投稿「#{post.name}」を更新しました。" end def destroy @post.destroy redirect_to posts_url, notice: "投稿「#{post.name}」を削除しました。" end private def post_params params.require(:post).permit(:name, :description) end def set_post @post = current_user.posts.find(params[:id]) end end

実際に.alert-successを記述している箇所も調べましたが分からずです。

application.html.slim

1body 2 header 3 nav.navbar.navbar-expand-lg.navbar-light.bg-whites 4 a.navbar-brand href="/" 5 img src="/images/logo.jpg" / 6 button.navbar-toggler aria-controls="navbarText" aria-expanded="false" aria-label=("Toggle navigation") data-target="#navbarText" data-toggle="collapse" type="button" 7 span.navbar-toggler-icon 8 #navbarText.collapse.navbar-collapse 9 ul.navbar-nav.mr-auto 10 - if current_user 11 li.nav-item.active= link_to 'Funファッション','/', class: 'nav-link' 12 li.nav-item.active= link_to '投稿一覧', posts_path, class: 'nav-link' 13 li.nav-item.active= link_to '新規投稿', new_post_path, class: 'nav-link' 14 - if current_user.admin? 15 li.nav-item.active= link_to 'ユーザー一覧', admin_users_path, class: 'nav-link' 16 li.nav-item.active= link_to 'ログアウト', logout_path, method: :delete, class: 'nav-link' 17 - else 18 li.nav-item.active= link_to 'Funファッション','/', class: 'nav-link' 19 li.nav-item.active= link_to '新規登録', new_admin_user_path, class: 'nav-link' 20 li.nav-item.active= link_to 'ログイン', login_path, class: 'nav-link' 21 22 .container 23 - if flash.notice.present? 24 .alert.alert-success= flash.notice 25 = yield 26

試したこと

フラッシュメッセージのテストを実行していることは分かったのですがそれに関係する箇所を予測しても分からず、恐れ入りますがもしわかる方いればご教授お願いいたします。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答2

0

エラーの原因はHTML上にセレクタで指定したcssクラス.alert-successが存在していないからです。
まず行うことは、postが正常に登録されているかどうか確認することです。

もしpostの作成が正常に行えているのにテストに失敗する場合は、次に表示されているページを確認します。
save_and_open_pageメソッドを使えばその時点の画面をブラウザで確認できます。

試してみてください。

投稿2019/11/05 01:53

Mugheart

総合スコア2349

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

kit1987

2019/11/05 04:47 編集

ご返答ありがとうございます。 現在手元で確認ができないので帰宅次第確認して、返答させていただきます。
kit1987

2019/11/05 23:47

上記の件ですがpostの作成も正常に行われており、特に問題は見当たらなかったです。 save_and_open_pageは昨日実行ができなかったので本日再度試してみます。 これ以上お時間いただくのも恐縮なのでここからは自力で解決してみます。 わざわざありがとうございました。
guest

0

app/assets/stylesheets の中に、.alert-success classを定義していない、もしくは定義してあるファイルが取り込まれていない、のが原因です

投稿2019/11/03 19:59

winterboum

総合スコア23567

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

kit1987

2019/11/03 21:37 編集

ご返答ありがとうございます。 bootstrapの場合でもcssでクラスを定義する必要があると言うことでしょうか?
winterboum

2019/11/04 02:35

bootstrapが定義しているはずのcssなのですね。 すると application.css にとり込む宣言がなされていないか かな。 layout/apprikation.html と stylesheet/application.css を開示して下さい
kit1987

2019/11/04 20:39

返答が遅くなり失礼しました。以下コードです。 application.scss(scssに変更しております) /* * This is a manifest file that'll be compiled into application.css, which will include all the files * listed below. * * Any CSS and SCSS file within this directory, lib/assets/stylesheets, or any plugin's * vendor/assets/stylesheets directory can be referenced here using a relative path. * * You're free to add application-wide styles to this file and they'll appear at the bottom of the * compiled file so the styles you add here take precedence over styles defined in any other CSS/SCSS * files in this directory. Styles in this file should be added after the last require_* statement. * It is generally better to create a new file per style scope. * */ @import "bootstrap"; @import "posts"; application.html.slim(slimで記述しております) doctype html html head title | App = csrf_meta_tags = csp_meta_tag = stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' = javascript_include_tag 'application', 'data-turbolinks-track': 'reload' body header nav.navbar.navbar-expand-lg.navbar-light.bg-whites a.navbar-brand href="/" img src="/images/logo.jpg" / button.navbar-toggler aria-controls="navbarText" aria-expanded="false" aria-label=("Toggle navigation") data-target="#navbarText" data-toggle="collapse" type="button" span.navbar-toggler-icon #navbarText.collapse.navbar-collapse ul.navbar-nav.mr-auto - if current_user li.nav-item.active= link_to 'Funファッション','/', class: 'nav-link' li.nav-item.active= link_to '投稿一覧', posts_path, class: 'nav-link' li.nav-item.active= link_to '新規投稿', new_post_path, class: 'nav-link' - if current_user.admin? li.nav-item.active= link_to 'ユーザー一覧', admin_users_path, class: 'nav-link' li.nav-item.active= link_to 'ログアウト', logout_path, method: :delete, class: 'nav-link' - else li.nav-item.active= link_to 'Funファッション','/', class: 'nav-link' li.nav-item.active= link_to '新規登録', new_admin_user_path, class: 'nav-link' li.nav-item.active= link_to 'ログイン', login_path, class: 'nav-link' .container - if flash.notice.present? .alert.alert-success= flash.notice = yield 以上私が記述したコードです。 何か相違がある部分があればご教授お願い致します。
winterboum

2019/11/05 00:30

一見すると大丈夫ですね。 bootstrapはちょっと触っただけで造詣は浅いので、確認ですが 他の bootstrap 由来のcssは期待通り動いてますか? 綴間違えてはいませんか?
kit1987

2019/11/05 04:45

ご返答ありがとうございます。 他のbootstrap特に問題なく動くので綴りは問題ないかと思うのですが、只今、手元にPCがないので帰宅次第再度確認してみます。
kit1987

2019/11/05 23:50

bootstrap自体もローカル環境や他のところでも特に問題なく動作しました。 色々とアドバイスいただき申し訳ないですが、これ以上お時間いただくのも恐縮なのでここからは自力で解決してみます。 わざわざありがとうございました。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだベストアンサーが選ばれていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.36%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問