search

meg-06 / yubimoji

0 stars 1 forks source link

RSpecでログインができない問題を解決する #252

Closed meg-06 closed 5 days ago

meg-06 commented 5 days ago

お疲れ様です、下記の内容が分からないので質問したいです。 RSpecで「ユーザーが日本語を正しく登録できるかどうか」システムスペックを行いたいです。そのために、ユーザーログインをしないといけないですが、ここの処理で落ちてしまいます。仮説を立ててみて試してみたのですがどうしても分からないので、お答えいただけると幸いです。 Factorybotは使用していません。ログインにはsorceryを使用しています。

質問したい内容

・なぜ、ログインの処理は落ちてしまいますか？

エラーに関係がありそうなログ

TRANSACTION (0.9ms)  ROLLBACK
[dotenv] Set GOOGLE_CLIENT_ID
[dotenv] Loaded .env
  ActiveRecord::InternalMetadata Load (1.3ms)  SELECT * FROM "ar_internal_metadata" WHERE "ar_internal_metadata"."key" = $1 ORDER BY "ar_internal_metadata"."key" ASC LIMIT 1  [[nil, "schema_sha1"]]
  ActiveRecord::SchemaMigration Load (1.1ms)  SELECT "schema_migrations"."version" FROM "schema_migrations" ORDER BY "schema_migrations"."version" ASC
[dotenv] Saved a snapshot of ENV
  TRANSACTION (0.1ms)  BEGIN
Started GET "/users/new" for 127.0.0.1 at 2024-09-16 22:00:26 +0900
Processing by UsersController#new as HTML
  Rendering layout layouts/application.html.erb
  Rendering users/new.html.erb within layouts/application
  Rendered shared/_error_messages.html.erb (Duration: 0.1ms | Allocations: 208)
  Rendered users/new.html.erb within layouts/application (Duration: 3.9ms | Allocations: 2904)
  Rendered shared/_before_login_header.erb (Duration: 0.3ms | Allocations: 493)
  Rendered shared/_flash_message.html.erb (Duration: 0.1ms | Allocations: 193)
  Rendered shared/_footer.html.erb (Duration: 0.2ms | Allocations: 358)
  Rendered layout layouts/application.html.erb (Duration: 8.6ms | Allocations: 9651)
Completed 200 OK in 116ms (Views: 10.9ms | ActiveRecord: 7.1ms | Allocations: 58166)
  TRANSACTION (0.2ms)  ROLLBACK

日本語登録機能
Email: test@example.com
Password:
<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>Yubimoji</title>
  <meta name="viewport" content="width=device-width,initial-scale=1">

  <link rel="stylesheet" href="/assets/tailwind-9f877e59eabfda90e764d31ca13ad694115206e757b8e62a029db5da8e1d28b0.css" data-turbo-track="reload" />
<link rel="stylesheet" href="/assets/inter-font-8c3e82affb176f4bca9616b838d906343d1251adc8408efe02cf2b1e4fcf2bc4.css" data-turbo-track="reload" />
  <link rel="stylesheet" href="/assets/application-685092d10c92994a34fc60428078996cbea6cd50ec884c88ffb727d467004471.css" data-turbo-track="reload" />
  <script type="importmap" data-turbo-track="reload">{
  "imports": {
    "application": "/assets/application-37f365cbecf1fa2810a8303f4b6571676fa1f9c56c248528bc14ddb857531b95.js",
    "@hotwired/turbo-rails": "/assets/turbo.min-918a6cf2f2be8ed9555c9a11eee69c7dc2f01770802815576efc931876b327fb.js",
    "@hotwired/stimulus": "/assets/stimulus.min-dd364f16ec9504dfb72672295637a1c8838773b01c0b441bd41008124c407894.js",
    "@hotwired/stimulus-loading": "/assets/stimulus-loading-3576ce92b149ad5d6959438c6f291e2426c86df3b874c525b30faad51b0d96b3.js",
    "controllers/application": "/assets/controllers/application-368d98631bccbf2349e0d4f8269afb3fe9625118341966de054759d96ea86c7e.js",
    "controllers/hello_controller": "/assets/controllers/hello_controller-549135e8e7c683a538c3d6d517339ba470fcfb79d62f738a0a089ba41851a554.js",
    "controllers": "/assets/controllers/index-2db729dddcc5b979110e98de4b6720f83f91a123172e87281d5a58410fc43806.js"
  }
}</script>
<link rel="modulepreload" href="/assets/application-37f365cbecf1fa2810a8303f4b6571676fa1f9c56c248528bc14ddb857531b95.js">
<link rel="modulepreload" href="/assets/turbo.min-918a6cf2f2be8ed9555c9a11eee69c7dc2f01770802815576efc931876b327fb.js">
<link rel="modulepreload" href="/assets/stimulus.min-dd364f16ec9504dfb72672295637a1c8838773b01c0b441bd41008124c407894.js">
<link rel="modulepreload" href="/assets/stimulus-loading-3576ce92b149ad5d6959438c6f291e2426c86df3b874c525b30faad51b0d96b3.js">
<link rel="modulepreload" href="/assets/controllers/application-368d98631bccbf2349e0d4f8269afb3fe9625118341966de054759d96ea86c7e.js">
<link rel="modulepreload" href="/assets/controllers/hello_controller-549135e8e7c683a538c3d6d517339ba470fcfb79d62f738a0a089ba41851a554.js">
<link rel="modulepreload" href="/assets/controllers/index-2db729dddcc5b979110e98de4b6720f83f91a123172e87281d5a58410fc43806.js">
<script type="module">import "application"</script>
  <meta charset="utf-8">
<title>ゆびもじ学習アプリ | Yubimoji</title>
<meta name="description" content="ゆびもじアプリなら、好きな言葉を指文字に変換しながら学べます。あなたもこの新しい学び方を試してみませんか？">
<meta name="keywords" content="手話,手話学習,指文字,ゆびもじ,コミュニケーション">
<link rel="canonical" href="http://www.example.com/login">
<meta property="og:site_name" content="Yubimoji">
<meta property="og:title" content="ゆびもじ学習アプリ">
<meta property="og:description" content="ゆびもじアプリなら、好きな言葉を指文字に変換しながら学べます。あなたもこの新しい学び方を試してみませんか？">
<meta property="og:type" content="website">
<meta property="og:url" content="http://www.example.com/login">
<meta property="og:image" content="http://www.example.com/assets/ogp-02ace7fde11a14f92f65f6c6893aaba44af48d6d1dd820e39ff681d0f139c324.png">
<meta property="og:locale" content="ja-JP">
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:site" content="#">
<meta name="twitter:image" content="http://www.example.com/assets/ogp-02ace7fde11a14f92f65f6c6893aaba44af48d6d1dd820e39ff681d0f139c324.png">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@8/swiper-bundle.min.css"/>
  <script src="https://cdn.jsdelivr.net/npm/swiper@8/swiper-bundle.min.js"></script>
  <link rel="icon" type="image/x-icon" href="/assets/favicon-d43e7c2a918fc28ae196cbb8f02491e2ad18bd9dc297574d64b15e9e3aef4b9b.ico" />
  <!-- Google tag (gtag.js) -->
  <script async src="https://www.googletagmanager.com/gtag/js?id=G-ZD18XJDJYM"></script>
  <script>
    window.dataLayer = window.dataLayer || [];
    function gtag(){dataLayer.push(arguments);}
    gtag('js', new Date());
    gtag('config', 'G-ZD18XJDJYM');
  </script>
</head>
  <body class="flex flex-col min-h-screen bg-gray-100 overflow-auto">
    <header>
        <nav class="sticky top-0 border-solid border-gray-200 w-full border-b py-3 bg-white z-50  bg-inherit">
  <div class="mx-auto ">
    <div class="w-full flex  flex-col lg:flex-row">
      <div class="flex ml-0 mr-auto lg:flex-row">
          <a class="flex items-center" href="/">
              <img alt="Logo" class="h-20 w-60" src="/assets/logo-59e7376cc377e9ab94fffa90b2c50c413df4683c9f13137ccb89e27bd8d07f94.png" />
</a>      </div>
      <div class="hidden w-full lg:flex lg:pl-11 " id="navbar-default-example">
        <ul class="flex items-center flex-col mt-4 lg:mt-0 lg:ml-auto lg:flex-row gap-4">
          <li>
              <a class="flex items-center justify-between text-gray-500 text-sm lg:text-base font-medium hover:text-indigo-700 transition-all duration-500 mb-2 lg:mr-6 md:mb-0 md:mr-3" href="/">トップ</a>
          </li>
          <li>
              <a class="flex items-center justify-between text-gray-500 text-sm lg:text-base font-medium hover:text-indigo-700 transition-all duration-500 mb-2 lg:mr-6 md:mb-0 md:mr-3" rel="nofollow" data-method="delete" href="/login">ログイン</a>
          </li>
          <li>
              <a class="flex items-center justify-between text-gray-500 text-sm lg:text-base font-medium hover:text-indigo-700 transition-all duration-500 mb-2 lg:mr-6 md:mb-0 md:mr-3" href="/users/new">会員登録</a>
          </li>
        </ul>
      </div>
    </div>
  </div>
</nav>
 <div class="alert alert-error px-8 py-6 text-white rounded-none">
    ログインに失敗しました
  </div>
</header>
<main class="flex-grow flex items-center justify-center px-5">
      <div class="w-full max-w-3xl">
        <body class="bg-gray-100 flex items-center justify-center min-h-screen">
  <div class="container">
    <div class="row flex justify-center">
      <div class="col-md-10 col-lg-8 mx-auto bg-white p-6 rounded-lg shadow-lg">
        <h1 class="large-text text-center mb-6">ログイン</h1>
        <form action="/login" accept-charset="UTF-8" method="post">
          <div class="mb-3">
            <label class="block mb-2 text-gray-600 text-sm font-medium" for="email">メールアドレス</label>
            <input id="Medium-input" class="block w-full px-4 py-2.5 text-base font-normal shadow-xs text-gray-900 bg-transparent border border-gray-300 rounded-full placeholder-gray-400 focus:outline-none leading-relaxed" placeholder="メールアドレス" required="required" type="email" name="email" />
          </div>
          <div class="mb-3">
            <label class="block mb-2 text-gray-600 text-sm font-medium" for="password">パスワード</label>
            <input id="Medium-input" class="block w-full px-4 py-2.5 text-base font-normal shadow-xs text-gray-900 bg-transparent border border-gray-300 rounded-full placeholder-gray-400 focus:outline-none leading-relaxed" placeholder="パスワード" required="required" type="password" name="password" />
          </div>
          <input type="submit" name="commit" value="ログイン" class="btn btn-primary w-full py-2.5 mt-4" data-disable-with="ログイン" />
</form></div>
    </div>
  </div>
</body>
      </div>
    </main>
    <footer>
      <footer class="w-full bg-white border-t border-gray-200 mt-auto">
  <div class="mx-auto max-w-7xl">
    <!--Grid-->
    <div class="block py-5">
      <div class="flex items-center justify-center flex-row flex-wrap lg:justify-between lg:flex-row">
        <span class="text-sm text-gray-500">© yubimoji 2024, All rights reserved.</span>
        <ul class="text-sm flex items-center justify-center flex-row flex-wrap gap-4 md:gap-6 transition-all duration-500">
          <li>
            <a class="text-gray-600 hover:text-gray-900" href="/pages/terms">利用規約</a>
          </li>
          <li>
            <a class="text-gray-600 hover:text-gray-900" href="/pages/privacy">プライバシーポリシー</a>
          </li>
          <li>
            <a class="text-gray-600 hover:text-gray-900" href="https://forms.gle/1prsYFcaZVG3GAQ97">お問い合わせ</a>
          </li>
        </ul>
      </div>
    </div>
  </div>
</footer>
</footer>
  </body>
</html>
  ユーザーが日本語を正しく登録できる (FAILED - 1)

Failures:

1) 日本語登録機能 ユーザーが日本語を正しく登録できる Failure/Error: expect(page).to have_content 'ログアウト' expected to find text "ログアウト" in "トップ ログイン 会員登録\nログインに失敗しました\nログイン\nメールアドレス\nパスワード\n© yubimoji 2024, All rights reserved.\n利用規約 プライバシーポリシー お問い合わせ" ./spec/system/hiragana_spec.rb:15:in `block (2 levels) in

'

関係のありそうなコード

spec/system/hiragana_spec.rb
require 'rails_helper'

RSpec.describe '日本語登録機能', type: :system do
  let(:user) { User.create!(name: 'Test User', email: 'test@example.com', password: 'password', password_confirmation: 'password') }
  before do
    puts "Email: #{user.email}"  
    puts "Password: #{user.password}"  
    visit login_path
    fill_in 'email', with: user.email
    fill_in 'password', with: user.password
    click_button 'ログイン'
    puts page.html  
    expect(page).to have_content 'ログアウト'
  end
  it 'ユーザーが日本語を正しく登録できる' do
    visit hiraganas_path
    puts page.html  
    fill_in 'hiragana_character', with: 'こんにちは'
    click_button '登録'
    expect(page).to have_content 'こんにちは'  
  end
end

仮説

フォームに入力がうまく行われていないことが原因かもしれないと思い調査を進めました。

結果

仮説を元に探っていった結果Completed 422 Unprocessable Contentというエラーが発生しており、パスワード承認がうまくいっていないのではないかなと考えています。

試したこと

Capybaraの設定を忘れている

./spec/system/hiragana_spec.rb:15:in `block (2 levels) in <main>'があるので、処理自体は進んでいることから capybaraの設定忘れの可能性は低いと考えました。

fill_in のラベル名が間違えている

<div class="mb-3">
            <label class="block mb-2 text-gray-600 text-sm font-medium" for="email">メールアドレス</label>
            <input id="Medium-input" class="block w-full px-4 py-2.5 text-base font-normal shadow-xs text-gray-900 bg-transparent border border-gray-300 rounded-full placeholder-gray-400 focus:outline-none leading-relaxed" placeholder="メールアドレス" required="required" type="email" name="email" />
          </div>
          <div class="mb-3">
            <label class="block mb-2 text-gray-600 text-sm font-medium" for="password">パスワード</label>
            <input id="Medium-input" class="block w-full px-4 py-2.5 text-base font-normal shadow-xs text-gray-900 bg-transparent border border-gray-300 rounded-full placeholder-gray-400 focus:outline-none leading-relaxed" placeholder="パスワード" required="required" type="password" name="password" />
          </div>

ラベル名をHTMLで確認しましたがemailとpasswordで問題なさそうです。

ユーザーが作成されていない

#<User id: 21, email: "test@example.com", crypted_password: "$2a$04$6FIfrEZ8ch2zch/bj45Gn.ZFC7fygBzyQpPSaiaR9HI...", salt: "BuZwzA3JsyLye2jEPh6b", name: "Test User", created_at: "2024-09-16 15:21:01.957155000 +0000", updated_at: "2024-09-16 15:21:01.957155000 +0000">こち らがあるので問題なく作成されていると思います。

 Parameters: {"email"=>"test@example.com", "password"=>"[FILTERED]", "commit"=>"ログイン"}
  User Load (0.2ms)  SELECT "users".* FROM "users" WHERE "users"."email" = 'test@example.com' ORDER BY "users"."id" ASC LIMIT $1  [["LIMIT", 1]]

また、上記のログにもユーザーテーブルに問い合わせができている形跡があるので問題なく作成されていると思います。

フォームが送信されていない

Parameters: {"email"=>"test@example.com", "password"=>"[FILTERED]", "commit"=>"ログイン"}があるので問題なく送信されていると考えます。

sorceryがそもそも動いていない

ローカル環境で、私自身がログインフォームにメールアドレスとパスワードを入力してログインを試みたところ正常にログインが成功しました。したがって、Sorceryの設定に問題はないと考えています。

お手数をおかけしますが、ご教示いただきますようお願いします。

kenchasonakai commented 5 days ago 
fill_in 'password', with: user.password

ここですが、通常user.passwordで値は取得できないので直接文字列で'password'と打つのが良いかなと思います

meg-06 commented 5 days ago

fill_in 'password', with: 'password'としたら、無事にテストを通すことできました。 対処いただきありがとうございました。