2023.10.08 学習記録

昨日の続き、user_sessionsコントローラのcreateアクションを作るところから始める。

たぶんできた…？ブラウザから確かめてみる。

!?
なぜか管理者アカウントでログインしたら掲示板一覧に飛んだ…そんな処理書いてないのに何故？

リダイレクト先をadmin_rootって書いてた。admin_root_pathに直したらいけるかな？

だめだ…やっぱり掲示板一覧に行っちゃう。ログインはできてるけど、これはgeneral判定になってるってことか？それにしたってrootにリダイレクトするようにしてあるから不思議だけど…

確かめるためにadminでログインしたときとgeneralでログインしたときでフラッシュメッセージを変えてみた。いざ。

どっちのメッセージでもなく通常ログインのときの成功メッセージが出てる！ということはひょっとしてフォームの送信先が間違ってるのでは？？

当たり〜〜！送信先login_pathになってる！
admin_login_pathに直します…

NoMethodError at /admin/login
undefined method `admin?' for "admin":String

seedsを修正したあとDBをリセットするの忘れてた。リセットする。

んん？やっぱりだめだな。
コンソールで確認すると確かにroleの値が文字列になってる。DBのスキーマではちゃんとintegerになってるんだけどなあ。どういうことなんだろ。

うーーん、配列使った書き方してるからってことある？ハッシュのほうで書き直してみるか？

あ、@user&.role.admin?じゃなくて@user&.admin?なのでは？？カラム名が必要ない気がする。

できたーーー！そうかenumのメソッドはカラム名なしでいいのか。たしかに昨日自分が書いたTIL見てもそうなってるわ…変な勘違いしてた。

一般ユーザーのログインも試したら、

NoMethodError at /admin/login
undefined method `general?' for #<User id: 1 ...中略
Did you mean? geneeral?

enumの設定でタイポしとるなこれたぶん…

案の定geneeralになってた🤣
直したら無事成功。

destroyアクションもとりあえず作ったので、次は管理画面トップページの中身を作る。といっても一旦はコピペするだけ。細かいところは後でやる。

確認のため、管理者ユーザーでログインしてみる。

OK、無事表示された。
一旦休憩してその後ビューの中身を整えていく。

まず管理画面トップページのログアウトボタンを実際に使えるようにする。

ん？data: {turbo_method: :delete}って付けてるのにGETメソッドになっちゃうな。なんでだろ。

えっstimulusがインストールされてないからなんてことある？それだと逆になんで今まで動いてたの？

いちおうやってみる。

だめじゃん！やっぱかんけいないわ。
ええ〜何が原因？？

ロボらんてくんにきいたらJavaScriptが問題かもって言われた。ってことはひょっとして先にdartsassの設定をやらなきゃいけないのかも。
やってみよう。

今まではアセットパイプラインでアセット（JSとかCSSとか画像とか）のプリコンパイルをやってたけど、今回の課題ではdartsassでやってる（なんでかまでは今はわからん）、だからdartsassの設定ファイルを編集して、プリコンパイル対象のファイルを追加する必要がある、ということか。

まずは必要なファイルを作る。

• ログイン画面用のCSSファイル
• 管理画面トップページ用のCSSファイル
• 共通のJSファイル

あ〜〜やっぱこれが原因ぽいなあ。
application.jsでimport "@hotwired/turbo-rails"ってしてて、通常のレイアウトではそのapplication.jsを読み込んでるからturboが使えてるんであって、application.jsを読み込んでない独自のレイアウトでは使えないと。たぶんそういうことだな。

で、中身をどうするって話だな…。今読み込んでるCSSとJSファイル確認してみるか。

あった。これをコピペする。
JSの方だけ2つあってどうしようって感じだなー。とりあえずdashboard.jsのほうだけコピー＋import "@hotwired/turbo-rails"にしておこう。

よし、これで一旦dartsassの設定やっちゃおう。

だぶんOK。もうとにかく細かいこととかわからないことは後回しでクリア目指してガンガン進める。
アセットを読み込むコードを書くレイアウトファイルに書く。

CSSはわかったけどJSはどこで読み込んでるんだ…？

あった、テンプレートの方だ。ログイン画面はひょっとして読み込んでない？

いいや、とりあえずこれでテストしてみよう。

だめだ〜相変わらずGETしてる…。
いっそのこと試しにapplication.js読み込ませてみるか？

あーadmin/ってつけちゃいかんかったみたい。ファイル構成的にそこはURLに自動的に含まれるんだな。

通常のHTMLタグ使った読み込みコードが問題っぽいなどうも。どう問題なのかは確認してる余裕ないからしない、今は。後で。
埋め込みルビー使って読み込もう。

一通りやってみたけどログアウトボタンが反応しないな。ルーティングエラーでない代わりに何もおこらない。

ヒントにアセット読み込みのこともあった！

ごちゃごちゃやってたらまたログアウトボタンでエラーが出るようになった。なにこれ？

ActionController::InvalidAuthenticityToken at /admin/logout
Can't verify CSRF token authenticity.

JSの読み込みをテンプレート内からレイアウトに移したらまたログアウトボタンが無反応になった。これ関係あるんだ…もとに戻しておく。

以下の記事を参考にprotect_from_forgery :except => [:destroy]をuser_sessionsコントローラに追記したら動くようになった。全く意味わかってないしこれ付けていいのかもわからないけどもうとりあえずいいや。とにかく課題クリアしてから色々確認することにする。

https://qiita.com/syoichi0425/items/fa2444c83795edc5330b

フラッシュメッセージを表示できるようにコードを追加した。

たぶんロジックはできたはず。あとは見た目。
ロケールの設定をする。

タイトル設定OK。
次、レイアウト。たぶんログアウトボタンだけかな。

レイアウトOK。次、コントローラ。フラッシュメッセージかな。

フラッシュメッセージもOK。最後にテンプレート。

よし！これでできたはず…！ローカルテスト行ってみる。

エラーが6つ。

1. 管理画面/ダッシュボード アドミン系画面 ログイン後画面 ダッシュボード 正しいタイトルが表示されていること
   Failure/Error: fill_in 'メールアドレス', with: user.email

   Capybara::ElementNotFound:
   Unable to find field "メールアドレス" that is not disabled

2. 管理画面/ダッシュボード 権限によるアクセス制御 一般ユーザーの場合 アクセスできないこと
   Failure/Error: fill_in 'メールアドレス', with: user.email

   Capybara::ElementNotFound:
   Unable to find field "メールアドレス" that is not disabled

3. 管理画面/ダッシュボード 権限によるアクセス制御 管理者の場合 アクセスできること
   Failure/Error: fill_in 'メールアドレス', with: user.email

   Capybara::ElementNotFound:
   Unable to find field "メールアドレス" that is not disabled

4. ログイン・ログアウト 管理画面 ログイン ログイン失敗 管理者以外の場合 トップページにリダイレクトされること
   Failure/Error: fill_in 'メールアドレス', with: general_user.email

   Capybara::ElementNotFound:
   Unable to find field "メールアドレス" that is not disabled

5. ログイン・ログアウト 管理画面 ログイン ログイン失敗 管理者の場合 PWに誤りがある場合 ログインできないこと
   Failure/Error: fill_in 'メールアドレス', with: admin_user.email

   Capybara::ElementNotFound:
   Unable to find field "メールアドレス" that is not disabled

6. ログイン・ログアウト 管理画面 ログイン ログイン失敗 管理者の場合 認証情報が正しい場合 ログインできること
   Failure/Error: fill_in 'メールアドレス', with: admin_user.email

   Capybara::ElementNotFound:
   Unable to find field "メールアドレス" that is not disabled

うん、全部原因同じだなこれ！
たぶんログインフォームでメルアドのラベルか何かが間違ってる。

パスワードもだけど、id指定してるのがまずいんじゃないかと思うんだよなあ。消してみるか。動きに問題が出たら他の方法探す。

お、メールの問題は解決したっぽい。その分他のエラーが出てきた。

1. 管理画面/ダッシュボード アドミン系画面 ログイン後画面 ダッシュボード 正しいタイトルが表示されていること
   Failure/Error: expect(page).to have_title('ダッシュボード'), '管理画面のダッシュボードのタイトルに「ダッシュボード」が含まれていません'
   管理画面のダッシュボードのタイトルに「ダッシュボード」が含まれていません

2. 管理画面/ダッシュボード 権限によるアクセス制御 一般ユーザーの場合 アクセスできないこと
   Failure/Error: expect(page).to have_content '権限がありません'
   expected to find text "権限がありません" in ".turbo-progress-bar { position: fixed; display: block; top: 0; left: 0; height: 3px; background: #0076ff; z-index: 9999; transition: width 300ms ease-out, opacity 150ms 150ms ease-in; transform: translate3d(0, 0, 0); } RUNTEQ BOARD APP 掲示板 掲示板一覧 掲示板作成 ブックマーク一覧 田村 優奈 プロフィール ログアウト RUNTEQ BOARD APP Copyright © 2019. RUNTEQ"

3. 管理画面/ダッシュボード 権限によるアクセス制御 管理者の場合 アクセスできること
   Failure/Error: expect(page).to have_content 'ダッシュボードです'
   expected to find text "ダッシュボードです" in ".turbo-progress-bar { position: fixed; display: block; top: 0; left: 0; height: 3px; background: #0076ff; z-index: 9999; transition: width 300ms ease-out, opacity 150ms 150ms ease-in; transform: translate3d(0, 0, 0); } RUNTEQ BOARD APP(管理画面) Dashboard Template · Bootstrap v5.2 RUNTEQ ログアウト Dashboard Orders Products Customers Reports Integrations Section title # Header Header Header Header 1,001 random data placeholder text 1,002 placeholder irrelevant visual layout 1,003 data rich dashboard tabular 1,003 information placeholder illustrative data 1,004 text random layout dashboard 1,005 dashboard irrelevant text placeholder 1,006 dashboard illustrative rich data 1,007 placeholder tabular information irrelevant 1,008 random data placeholder text 1,009 placeholder irrelevant visual layout 1,010 data rich dashboard tabular 1,011 information placeholder illustrative data 1,012 text placeholder layout dashboard 1,013 dashboard irrelevant text visual 1,014 dashboard illustrative rich data 1,015 random tabular information text"

4. ログイン・ログアウト 管理画面 ログイン ログイン失敗 管理者以外の場合 トップページにリダイレクトされること
   Failure/Error: expect(page).to have_content('権限がありません'), 'フラッシュメッセージ「権限がありません」が表示されていません'
   フラッシュメッセージ「権限がありません」が表示されていません

3はそりゃそうだって感じ。ダッシュボードの中身は全くいじってないからな。特に指定なかったけどあの通りにしなきゃいけなかったのか。
2、4もそりゃそうだ。これも特に指定がなかったからメッセージ出してない。
1は要確認だな。タイトル設定ちゃんとしたはずなんだけど。

2〜4の修正したので再度ローカルテスト。

無事1だけになったので、こいつの原因を探る。

シンプルにタイトル表示用のコードの入れ忘れだった。修正したのでたぶんこれでいけるはず！

ローカルテスト通過ーーーー！！
プルリクする！

git statusで確認したら'__MACOSX/'とかいう謎のファイルだかフォルダがある...これそのままで大丈夫なのかしら。

とりあえず消してからgit addしてみるか。specについてきたやつみたいだから、必要ならまた落とせばいいし。

消した状態でも問題なくrspecが走った。本来Macで圧縮したzipをWindowsで開くとできちゃうものらしいけど、なんでこの状況で出来たのかは謎。
ともあれ問題なしなので、いよいよプルリクする。

はいおなじみLintチェック失敗。
でもそれ以外はOKってことだから安心。直していく〜

ガード節の後ろ1行空けるの完全に忘れてたわ。
あと%i使うときは[]の内側スペース空けないのが正解なのか。確かに今まで空けてなくてそれで通ってたけど、必須だったとは。
で、逆にハッシュの{}は内側空けなきゃだめと。

直したので再チャレンジ。

余計なスペースが一個あった。これで今度こそ終わりかな？

LGTMでたーーーーーー😭
色々ゴリ押ししちゃったから復習ガッツリやらなきゃだけど、今日はここまでにする…後日ちゃんと分からなかったところとか調べる。