From 496b8ec133f3157e851d967f35251427be364acc Mon Sep 17 00:00:00 2001
From: hagiya0121 <koazu0121@gmail.com>
Date: Wed, 6 Nov 2024 14:29:35 +0900
Subject: [PATCH 1/5] =?UTF-8?q?=E5=8D=92=E6=A5=AD=E8=A8=BC=E6=9B=B8?=
 =?UTF-8?q?=E3=81=AE=E3=82=A2=E3=83=83=E3=83=97=E3=83=AD=E3=83=BC=E3=83=89?=
 =?UTF-8?q?=E6=A9=9F=E8=83=BD=E3=82=92=E8=BF=BD=E5=8A=A0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 app/controllers/admin/users_controller.rb |  3 ++-
 app/javascript/fileinput.js               | 14 ++++++++++++++
 app/models/user.rb                        |  3 +++
 app/views/users/_form.html.slim           |  9 +++++++++
 config/locales/ja.yml                     |  1 +
 5 files changed, 29 insertions(+), 1 deletion(-)

diff --git a/app/controllers/admin/users_controller.rb b/app/controllers/admin/users_controller.rb
index 5ed182c3f88..7a7f421c172 100644
--- a/app/controllers/admin/users_controller.rb
+++ b/app/controllers/admin/users_controller.rb
@@ -28,6 +28,7 @@ def show
   def edit; end
 
   def update
+    @user.diploma_file = nil if params[:user][:remove_diploma] == '1'
     if @user.update(user_params)
       destroy_subscription(@user)
       Newspaper.publish(:retirement_create, { user: @user }) if @user.saved_change_to_retired_on?
@@ -67,7 +68,7 @@ def user_params
       :job_seeker, :github_collaborator,
       :officekey_permission, :tag_list, :training_ends_on,
       :auto_retire, :invoice_payment, :hide_mentor_profile,
-      :profile_image, :profile_name, :profile_job, :mentor,
+      :profile_image, :profile_name, :profile_job, :mentor, :diploma_file,
       :profile_text, { authored_books_attributes: %i[id title url cover _destroy] },
       :country_code, :subdivision_code, discord_profile_attributes: %i[account_name times_url times_id]
     )
diff --git a/app/javascript/fileinput.js b/app/javascript/fileinput.js
index f0fa239e8a1..550d6e25c1b 100644
--- a/app/javascript/fileinput.js
+++ b/app/javascript/fileinput.js
@@ -85,3 +85,17 @@ document.addEventListener('DOMContentLoaded', () => {
   }
   initializeFileInput(document)
 })
+
+document.addEventListener('DOMContentLoaded', () => {
+  const removeDiplomaButton = document.getElementById('remove-diploma-button')
+  const diplomaUploadField = document.getElementById('diploma-upload-field')
+  const diplomaFileLink = document.getElementById('diploma-file-link')
+  const removeDiplomaFlag = document.getElementById('remove-diploma-flag')
+
+  removeDiplomaButton.addEventListener('click', () => {
+    diplomaFileLink && (diplomaFileLink.style.display = 'none')
+    diplomaUploadField.style.display = 'block'
+    diplomaUploadField.value = ''
+    removeDiplomaFlag.value = '1'
+  })
+})
diff --git a/app/models/user.rb b/app/models/user.rb
index 8235cc34ace..73ec752bca7 100644
--- a/app/models/user.rb
+++ b/app/models/user.rb
@@ -173,6 +173,7 @@ class User < ApplicationRecord
 
   has_one_attached :avatar
   has_one_attached :profile_image
+  has_one_attached :diploma_file
 
   after_create UserCallbacks.new
 
@@ -207,6 +208,8 @@ class User < ApplicationRecord
                        message: 'はPNG, JPG, GIF, HEIC, HEIF形式にしてください'
                      }
 
+  validates :diploma_file, content_type: { in: ['application/pdf'], message: 'はPDF形式にしてください' }
+
   validates :country_code, inclusion: { in: ISO3166::Country.codes }, allow_blank: true
 
   validates :subdivision_code, inclusion: { in: ->(user) { user.subdivision_codes } }, allow_blank: true, if: -> { country_code.present? }
diff --git a/app/views/users/_form.html.slim b/app/views/users/_form.html.slim
index 813d9405d1b..88304e6968e 100644
--- a/app/views/users/_form.html.slim
+++ b/app/views/users/_form.html.slim
@@ -104,6 +104,15 @@
             .form-item-block__item
               = render 'users/form/graduate', f: f
 
+      .form-item
+        = f.hidden_field :remove_diploma, value: '0', id: 'remove-diploma-flag'
+        = f.label :diploma_file, class: 'a-form-label'
+        - if @user.diploma_file.attached?
+          = link_to @user.diploma_file.filename, url_for(@user.diploma_file), class: 'a-text-input', id: 'diploma-file-link'
+        - display = @user.diploma_file.attached? ? 'display: none' : 'display: block'
+        = f.file_field :diploma_file, class: 'a-text-input', id: 'diploma-upload-field', style: display
+        button type='button' id='remove-diploma-button' class='a-button is-md is-secondary' 削除
+
       .form-item-block
         .form-item-block__inner
           header.form-item-block__header
diff --git a/config/locales/ja.yml b/config/locales/ja.yml
index 28a465d09de..cc311c72e8b 100644
--- a/config/locales/ja.yml
+++ b/config/locales/ja.yml
@@ -111,6 +111,7 @@ ja:
         other_editor: その他のエディタ
         hide_mentor_profile: プロフィール非公開
         invoice_payment: 「請求書払い」
+        diploma_file: 卒業証書のアップロード
       discord_profile:
         account_name: Discord アカウント
         times_url: 分報URL

From 8385b8a53939b34041b39aa03601113e3ca0a7fc Mon Sep 17 00:00:00 2001
From: hagiya0121 <koazu0121@gmail.com>
Date: Wed, 13 Nov 2024 17:56:07 +0900
Subject: [PATCH 2/5] =?UTF-8?q?=E3=83=86=E3=82=B9=E3=83=88=E3=82=92?=
 =?UTF-8?q?=E8=BF=BD=E5=8A=A0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../files/users/diplomas/diploma.html         |  11 ++++++
 .../fixtures/files/users/diplomas/diploma.pdf | Bin 0 -> 6176 bytes
 test/system/admin/users_test.rb               |  33 ++++++++++++++++++
 3 files changed, 44 insertions(+)
 create mode 100644 test/fixtures/files/users/diplomas/diploma.html
 create mode 100644 test/fixtures/files/users/diplomas/diploma.pdf

diff --git a/test/fixtures/files/users/diplomas/diploma.html b/test/fixtures/files/users/diplomas/diploma.html
new file mode 100644
index 00000000000..065683a07d8
--- /dev/null
+++ b/test/fixtures/files/users/diplomas/diploma.html
@@ -0,0 +1,11 @@
+<!DOCTYPE html>
+<html lang="ja">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>卒業証書</title>
+  </head>
+  <body>
+    <h1>卒業証書</h1>
+  </body>
+</html>
diff --git a/test/fixtures/files/users/diplomas/diploma.pdf b/test/fixtures/files/users/diplomas/diploma.pdf
new file mode 100644
index 0000000000000000000000000000000000000000..c29503ce3fcbd18bdde6e82eebdf6267589b77ea
GIT binary patch
literal 6176
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

literal 0
HcmV?d00001

diff --git a/test/system/admin/users_test.rb b/test/system/admin/users_test.rb
index e7846dcb505..dceb7ee7c41 100644
--- a/test/system/admin/users_test.rb
+++ b/test/system/admin/users_test.rb
@@ -352,4 +352,37 @@ class Admin::UsersTest < ApplicationSystemTestCase
     visit_with_auth "/admin/users/#{user.id}/edit", 'komagata'
     assert has_checked_field?('user_hide_mentor_profile', visible: false)
   end
+
+  test 'shows diploma link on edit page after upload' do
+    user = users(:kimura)
+    visit_with_auth edit_admin_user_path(user), 'komagata'
+    attach_file 'user[diploma_file]', Rails.root.join('test/fixtures/files/users/diplomas/diploma.pdf')
+    click_on '更新する'
+    assert_text 'ユーザー情報を更新しました'
+    assert user.reload.diploma_file.attached?
+    visit edit_admin_user_path(user)
+    assert_selector 'a', text: 'diploma.pdf'
+  end
+
+  test 'admin can delete diploma file' do
+    user = users(:kimura)
+    visit_with_auth edit_admin_user_path(user), 'komagata'
+    attach_file 'user[diploma_file]', Rails.root.join('test/fixtures/files/users/diplomas/diploma.pdf')
+    click_button '更新する'
+    assert_text 'ユーザー情報を更新しました'
+    assert user.reload.diploma_file.attached?
+    visit edit_admin_user_path(user)
+    click_on '削除'
+    click_button '更新する'
+    visit edit_admin_user_path(user)
+    assert_no_selector 'a', text: 'diploma.pdf'
+  end
+
+  test 'rejects diploma upload if not PDF format' do
+    user = users(:kimura)
+    visit_with_auth edit_admin_user_path(user), 'komagata'
+    attach_file 'user[diploma_file]', Rails.root.join('test/fixtures/files/users/diplomas/diploma.html')
+    click_on '更新する'
+    assert_text '卒業証書のアップロードはPDF形式にしてください'
+  end
 end

From 3d8dc4ede23c47e045be418c14ab2e02b8526752 Mon Sep 17 00:00:00 2001
From: machida <machida@fjord.jp>
Date: Mon, 18 Nov 2024 19:10:22 +0900
Subject: [PATCH 3/5] =?UTF-8?q?pdf=E3=82=A2=E3=83=83=E3=83=97=E3=83=AD?=
 =?UTF-8?q?=E3=83=BC=E3=83=89=E3=81=AE=E3=83=87=E3=82=B6=E3=82=A4=E3=83=B3?=
 =?UTF-8?q?=E3=82=92=E4=BD=9C=E6=88=90?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 app/javascript/fileinput.js                   | 45 +++++++++++++----
 .../stylesheets/atoms/_a-file-input.sass      | 49 +++++++++++++++++++
 .../stylesheets/config/mixins/_button.sass    |  2 +
 app/views/users/_form.html.slim               | 25 +++++++---
 config/locales/ja.yml                         |  2 +-
 5 files changed, 106 insertions(+), 17 deletions(-)

diff --git a/app/javascript/fileinput.js b/app/javascript/fileinput.js
index 550d6e25c1b..0a412458eb1 100644
--- a/app/javascript/fileinput.js
+++ b/app/javascript/fileinput.js
@@ -87,15 +87,40 @@ document.addEventListener('DOMContentLoaded', () => {
 })
 
 document.addEventListener('DOMContentLoaded', () => {
-  const removeDiplomaButton = document.getElementById('remove-diploma-button')
-  const diplomaUploadField = document.getElementById('diploma-upload-field')
-  const diplomaFileLink = document.getElementById('diploma-file-link')
-  const removeDiplomaFlag = document.getElementById('remove-diploma-flag')
-
-  removeDiplomaButton.addEventListener('click', () => {
-    diplomaFileLink && (diplomaFileLink.style.display = 'none')
-    diplomaUploadField.style.display = 'block'
-    diplomaUploadField.value = ''
-    removeDiplomaFlag.value = '1'
+  const removePdfButton = document.getElementById('js-remove-pdf-button')
+  const pdfUploadField = document.getElementById('js-pdf-upload-field')
+  const pdfFileLink = document.getElementById('js-pdf-file-link')
+  const removePdfFlag = document.getElementById('js-remove-pdf-flag')
+  const pdfFileNameDisplay = document.getElementById('js-pdf-name')
+
+  removePdfButton.addEventListener('click', () => {
+    if (pdfFileLink) pdfFileLink.style.display = 'none'
+    pdfUploadField.style.display = 'flex'
+    pdfUploadField.querySelector('input[type="file"]').value = ''
+    removePdfFlag.value = '1'
+
+    if (pdfFileNameDisplay) {
+      pdfFileNameDisplay.textContent = ''
+      pdfFileNameDisplay.style.display = 'none'
+    }
+  })
+
+  const fileInput = pdfUploadField.querySelector('input[type="file"]')
+  fileInput.addEventListener('change', () => {
+    if (fileInput.files && fileInput.files[0]) {
+      const fileName = fileInput.files[0].name
+
+      if (pdfFileNameDisplay) {
+        pdfFileNameDisplay.textContent = fileName
+        pdfFileNameDisplay.style.display = 'block'
+      }
+
+      removePdfFlag.value = '0'
+    } else {
+      if (pdfFileNameDisplay) {
+        pdfFileNameDisplay.textContent = ''
+        pdfFileNameDisplay.style.display = 'none'
+      }
+    }
   })
 })
diff --git a/app/javascript/stylesheets/atoms/_a-file-input.sass b/app/javascript/stylesheets/atoms/_a-file-input.sass
index 1430aeaba02..2496fe28a1e 100644
--- a/app/javascript/stylesheets/atoms/_a-file-input.sass
+++ b/app/javascript/stylesheets/atoms/_a-file-input.sass
@@ -45,3 +45,52 @@
     transition: all .2s ease-out
     &:hover
       background-color: #e8e8e8
+
+.a-pdf-input
+  display: flex
+  gap: .75rem
+  +media-breakpoint-down(sm)
+    flex-direction: column
+
+.a-pdf-input__inner
+  flex: 1
+  background-color: var(--base)
+  display: flex
+  align-items: center
+  justify-content: center
+  +position(relative)
+  overflow: hidden
+  cursor: pointer
+  border-radius: .25rem
+  height: 2.25rem
+  input
+    overflow: hidden
+    +size(0)
+    +position(absolute, left 0, top 0)
+    opacity: 0
+
+a.a-pdf-input__inner
+  text-decoration: none
+  color: var(--default-text)
+
+.a-pdf-input__file
+  padding: .5rem
+  flex: 1
+  border-radius: .25rem 0 0 .25rem
+  border: solid 1px var(--input-border)
+  border-right: none
+  height: 2.25rem
+
+.a-pdf-input__file-name
+  font-size: .875rem
+  white-space: nowrap
+  overflow: hidden
+  text-overflow: ellipsis
+  display: block
+  +media-breakpoint-up(md)
+    max-width: 18rem
+  +media-breakpoint-down(sm)
+    max-width: 8rem
+
+.a-pdf-input__upload.a-button
+  border-radius: 0 .25rem .25rem 0
diff --git a/app/javascript/stylesheets/config/mixins/_button.sass b/app/javascript/stylesheets/config/mixins/_button.sass
index df4095a397c..1f5983c55fd 100644
--- a/app/javascript/stylesheets/config/mixins/_button.sass
+++ b/app/javascript/stylesheets/config/mixins/_button.sass
@@ -80,6 +80,8 @@
   background-color: $color
   color: $text-color
   border-color: $border-color
+  &.is-secondary
+    border-color: var(--input-border)
   &:focus,
   &:active
     box-shadow: 0 0 0 .1875rem rgba($color, .25)
diff --git a/app/views/users/_form.html.slim b/app/views/users/_form.html.slim
index 88304e6968e..8e42fa9bc67 100644
--- a/app/views/users/_form.html.slim
+++ b/app/views/users/_form.html.slim
@@ -105,13 +105,26 @@
               = render 'users/form/graduate', f: f
 
       .form-item
-        = f.hidden_field :remove_diploma, value: '0', id: 'remove-diploma-flag'
+        // 卒業証書
+        = f.hidden_field :remove_diploma, value: '0', id: 'js-remove-pdf-flag'
         = f.label :diploma_file, class: 'a-form-label'
-        - if @user.diploma_file.attached?
-          = link_to @user.diploma_file.filename, url_for(@user.diploma_file), class: 'a-text-input', id: 'diploma-file-link'
-        - display = @user.diploma_file.attached? ? 'display: none' : 'display: block'
-        = f.file_field :diploma_file, class: 'a-text-input', id: 'diploma-upload-field', style: display
-        button type='button' id='remove-diploma-button' class='a-button is-md is-secondary' 削除
+        .a-pdf-input
+          - if @user.diploma_file.attached?
+            = link_to url_for(@user.diploma_file), class: 'a-pdf-input__inner', id: 'js-pdf-file-link', target: '_blank', rel: 'noopener' do
+              .a-pdf-input__file
+                span.a-pdf-input__file-name
+                  = @user.diploma_file.filename
+              .a-pdf-input__upload.a-button.is-md.is-secondary
+                | PDFを確認
+          - display = @user.diploma_file.attached? ? 'display: none' : 'display: flex'
+          label.a-pdf-input__inner#js-pdf-upload-field(style="#{display}")
+            = f.file_field :diploma_file
+            .a-pdf-input__file
+              span.a-pdf-input__file-name#js-pdf-name
+            .a-pdf-input__upload.a-button.is-md.is-secondary
+              | PDFを選択
+          button.a-button.is-md.is-secondary(type='button' id='js-remove-pdf-button')
+            | 削除
 
       .form-item-block
         .form-item-block__inner
diff --git a/config/locales/ja.yml b/config/locales/ja.yml
index cc311c72e8b..c1ab8b1262b 100644
--- a/config/locales/ja.yml
+++ b/config/locales/ja.yml
@@ -111,7 +111,7 @@ ja:
         other_editor: その他のエディタ
         hide_mentor_profile: プロフィール非公開
         invoice_payment: 「請求書払い」
-        diploma_file: 卒業証書のアップロード
+        diploma_file: 卒業証書PDF
       discord_profile:
         account_name: Discord アカウント
         times_url: 分報URL

From f3bc5ccd3101d848016bb091c4dc8e2bfc96a0d8 Mon Sep 17 00:00:00 2001
From: machida <machida@fjord.jp>
Date: Mon, 18 Nov 2024 19:11:57 +0900
Subject: [PATCH 4/5] =?UTF-8?q?pdf=20input=20=E3=81=AEsass=E3=83=95?=
 =?UTF-8?q?=E3=82=A1=E3=82=A4=E3=83=AB=E3=82=92=E5=88=86=E3=81=91=E3=81=9F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../stylesheets/_common-imports.sass          |  1 +
 .../stylesheets/atoms/_a-file-input.sass      | 48 -------------------
 .../stylesheets/atoms/_a-pdf-input.sass       | 48 +++++++++++++++++++
 3 files changed, 49 insertions(+), 48 deletions(-)
 create mode 100644 app/javascript/stylesheets/atoms/_a-pdf-input.sass

diff --git a/app/javascript/stylesheets/_common-imports.sass b/app/javascript/stylesheets/_common-imports.sass
index d3dc822c4f5..c610799f93b 100644
--- a/app/javascript/stylesheets/_common-imports.sass
+++ b/app/javascript/stylesheets/_common-imports.sass
@@ -88,6 +88,7 @@
 @import "atoms/a-elapsed-days"
 @import "atoms/a-empty-message"
 @import "atoms/a-file-input"
+@import "atoms/a-pdf-input"
 @import "atoms/a-form-frame"
 @import "atoms/a-form-help"
 @import "atoms/a-form-label"
diff --git a/app/javascript/stylesheets/atoms/_a-file-input.sass b/app/javascript/stylesheets/atoms/_a-file-input.sass
index 2496fe28a1e..ef68141d9e7 100644
--- a/app/javascript/stylesheets/atoms/_a-file-input.sass
+++ b/app/javascript/stylesheets/atoms/_a-file-input.sass
@@ -1,51 +1,3 @@
-.a-file-input
-  label
-    height: 10rem
-    max-width: 100%
-    margin-inline: auto
-    border: solid 1px var(--input-border)
-    background-color: var(--base)
-    display: flex
-    align-items: center
-    justify-content: center
-    +position(relative)
-    overflow: hidden
-    cursor: pointer
-    border-radius: .25rem
-    padding: .5rem .5rem 2.75rem .5rem
-  &.is-thumbnail
-    label
-      height: 15rem
-  img
-    max-height: 100%
-    transition: all .2s ease-out
-    &:hover
-      opacity: .6
-  &.is-square img
-    +size(7rem)
-    object-fit: cover
-  &.is-book img
-    max-height: 100%
-    max-width: 100%
-    object-fit: contain
-    border: solid 1px var(--border-tint)
-  input
-    overflow: hidden
-    +size(0)
-    +position(absolute, left 0, top 0)
-    opacity: 0
-  p
-    +size(100% 2.25rem)
-    background-color: var(--base)
-    +position(absolute, left 0, bottom 0, right 0)
-    +text-block(.8125rem 1, flex 600)
-    justify-content: center
-    align-items: center
-    border-top: solid 1px var(--input-border)
-    transition: all .2s ease-out
-    &:hover
-      background-color: #e8e8e8
-
 .a-pdf-input
   display: flex
   gap: .75rem
diff --git a/app/javascript/stylesheets/atoms/_a-pdf-input.sass b/app/javascript/stylesheets/atoms/_a-pdf-input.sass
new file mode 100644
index 00000000000..ef68141d9e7
--- /dev/null
+++ b/app/javascript/stylesheets/atoms/_a-pdf-input.sass
@@ -0,0 +1,48 @@
+.a-pdf-input
+  display: flex
+  gap: .75rem
+  +media-breakpoint-down(sm)
+    flex-direction: column
+
+.a-pdf-input__inner
+  flex: 1
+  background-color: var(--base)
+  display: flex
+  align-items: center
+  justify-content: center
+  +position(relative)
+  overflow: hidden
+  cursor: pointer
+  border-radius: .25rem
+  height: 2.25rem
+  input
+    overflow: hidden
+    +size(0)
+    +position(absolute, left 0, top 0)
+    opacity: 0
+
+a.a-pdf-input__inner
+  text-decoration: none
+  color: var(--default-text)
+
+.a-pdf-input__file
+  padding: .5rem
+  flex: 1
+  border-radius: .25rem 0 0 .25rem
+  border: solid 1px var(--input-border)
+  border-right: none
+  height: 2.25rem
+
+.a-pdf-input__file-name
+  font-size: .875rem
+  white-space: nowrap
+  overflow: hidden
+  text-overflow: ellipsis
+  display: block
+  +media-breakpoint-up(md)
+    max-width: 18rem
+  +media-breakpoint-down(sm)
+    max-width: 8rem
+
+.a-pdf-input__upload.a-button
+  border-radius: 0 .25rem .25rem 0

From d16a6614f84b6ac6a14577fb81259e9ee54026b7 Mon Sep 17 00:00:00 2001
From: hagiya0121 <koazu0121@gmail.com>
Date: Sat, 23 Nov 2024 18:37:08 +0900
Subject: [PATCH 5/5] =?UTF-8?q?UI=E3=81=AE=E5=A4=89=E6=9B=B4=E3=81=AB?=
 =?UTF-8?q?=E5=90=88=E3=82=8F=E3=81=9B=E3=81=A6=E3=83=86=E3=82=B9=E3=83=88?=
 =?UTF-8?q?=E3=82=92=E4=BF=AE=E6=AD=A3?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 test/system/admin/users_test.rb | 16 +++++++++-------
 1 file changed, 9 insertions(+), 7 deletions(-)

diff --git a/test/system/admin/users_test.rb b/test/system/admin/users_test.rb
index dceb7ee7c41..17d0716b4b4 100644
--- a/test/system/admin/users_test.rb
+++ b/test/system/admin/users_test.rb
@@ -356,33 +356,35 @@ class Admin::UsersTest < ApplicationSystemTestCase
   test 'shows diploma link on edit page after upload' do
     user = users(:kimura)
     visit_with_auth edit_admin_user_path(user), 'komagata'
-    attach_file 'user[diploma_file]', Rails.root.join('test/fixtures/files/users/diplomas/diploma.pdf')
+    attach_file 'user[diploma_file]', file_fixture('users/diplomas/diploma.pdf'), visible: false
     click_on '更新する'
     assert_text 'ユーザー情報を更新しました'
     assert user.reload.diploma_file.attached?
     visit edit_admin_user_path(user)
-    assert_selector 'a', text: 'diploma.pdf'
+    assert_link 'diploma.pdf'
   end
 
   test 'admin can delete diploma file' do
     user = users(:kimura)
     visit_with_auth edit_admin_user_path(user), 'komagata'
-    attach_file 'user[diploma_file]', Rails.root.join('test/fixtures/files/users/diplomas/diploma.pdf')
+    attach_file 'user[diploma_file]', file_fixture('users/diplomas/diploma.pdf'), visible: false
     click_button '更新する'
     assert_text 'ユーザー情報を更新しました'
     assert user.reload.diploma_file.attached?
     visit edit_admin_user_path(user)
     click_on '削除'
-    click_button '更新する'
+    click_on '更新する'
+    assert_text 'ユーザー情報を更新しました'
+    assert_not user.reload.diploma_file.attached?
     visit edit_admin_user_path(user)
-    assert_no_selector 'a', text: 'diploma.pdf'
+    assert_no_link 'diploma.pdf'
   end
 
   test 'rejects diploma upload if not PDF format' do
     user = users(:kimura)
     visit_with_auth edit_admin_user_path(user), 'komagata'
-    attach_file 'user[diploma_file]', Rails.root.join('test/fixtures/files/users/diplomas/diploma.html')
+    attach_file 'user[diploma_file]', file_fixture('users/diplomas/diploma.html'), visible: false
     click_on '更新する'
-    assert_text '卒業証書のアップロードはPDF形式にしてください'
+    assert_text '卒業証書PDFはPDF形式にしてください'
   end
 end