sadがついた日報にコメントを書いて『確認OKにする』ボタンを押した際に『今日の気分は「sad」ですが、コメント無しで確認しますか？』が表示されないようにした

app/javascript/check.vue

@@ -33,11 +33,13 @@
 <script>
 import 'whatwg-fetch'
 import ProductChecker from './product_checker'
+import checkable from './checkable.js'
 
 export default {
   components: {
     'product-checker': ProductChecker
   },
+  mixins: [checkable],
   props: {
     checkableId: { type: Number, required: true },
     checkableType: { type: String, required: true },
@@ -76,44 +78,29 @@ export default {
       const meta = document.querySelector('meta[name="csrf-token"]')
       return meta ? meta.getAttribute('content') : ''
     },
-    check() {
-      const params = {
-        checkable_type: this.checkableType,
-        checkable_id: this.checkableId
-      }
-
-      fetch(this.url, {
-        method: this.method,
-        headers: {
-          'Content-Type': 'application/json; charset=utf-8',
-          'X-Requested-With': 'XMLHttpRequest',
-          'X-CSRF-Token': this.token()
-        },
-        credentials: 'same-origin',
-        redirect: 'manual',
-        body: JSON.stringify(params)
-      })
-        .then(() => {
-          this.$store.dispatch('setCheckable', {
-            checkableId: this.checkableId,
-            checkableType: this.checkableType
-          })
-        })
-        .catch((error) => {
-          console.warn(error)
-        })
-    },
     checkSad() {
       if (this.checkHasSadEmotion && !this.checkHasComment && !this.checkId) {
         if (
           window.confirm(
             '今日の気分は「sad」ですが、コメント無しで確認しますか？'
           )
         ) {
-          this.check()
+          this.check(
+            this.checkableType,
+            this.checkableId,
+            this.url,
+            this.method,
+            this.token()
+          )
         }
       } else {
-        this.check()
+        this.check(
+          this.checkableType,
+          this.checkableId,
+          this.url,
+          this.method,
+          this.token()
+        )
       }
     }
   }

app/javascript/checkable.js

@@ -0,0 +1,31 @@
+export default {
+  methods: {
+    check(checkableType, checkableId, url, method, token) {
+      const params = {
+        checkable_type: checkableType,
+        checkable_id: checkableId
+      }
+
+      fetch(url, {
+        method: method,
+        headers: {
+          'Content-Type': 'application/json; charset=utf-8',
+          'X-Requested-With': 'XMLHttpRequest',
+          'X-CSRF-Token': token
+        },
+        credentials: 'same-origin',
+        redirect: 'manual',
+        body: JSON.stringify(params)
+      })
+        .then(() => {
+          this.$store.dispatch('setCheckable', {
+            checkableId: checkableId,
+            checkableType: checkableType
+          })
+        })
+        .catch((error) => {
+          console.warn(error)
+        })
+    }
+  }
+}

app/javascript/comments.vue

@@ -75,13 +75,14 @@ import CommentPlaceholder from './comment-placeholder'
 import confirmUnload from './confirm-unload'
 import toast from './toast'
 import role from './role'
+import checkable from './checkable.js'
 
 export default {
   components: {
     comment: Comment,
     commentPlaceholder: CommentPlaceholder
   },
-  mixins: [toast, confirmUnload, role],
+  mixins: [toast, confirmUnload, role, checkable],
   props: {
     commentableId: { type: String, required: true },
     commentableType: { type: String, required: true },
@@ -257,10 +258,16 @@ export default {
         !window.confirm('提出物を確認済にしてよろしいですか？')
       ) {
         return null
+      } else {
+        this.createComment()
+        this.check(
+          this.commentableType,
+          this.commentableId,
+          '/api/checks',
+          'POST',
+          this.token()
+        )
       }
-      const check = document.getElementById('js-shortcut-check')
-      this.createComment()
-      check.click()
     },
     async fetchUncheckedProducts(page) {
       return fetch(`/api/products/unchecked?page=${page}`, {

test/system/api/check/reports_test.rb

@@ -41,10 +41,7 @@ class Check::ReportsTest < ApplicationSystemTestCase
   test 'comment and check report' do
     visit_with_auth "/reports/#{reports(:report20).id}", 'komagata'
     fill_in 'new_comment[description]', with: '日報でcomment+確認OKにするtest'
-    accept_alert do
-      wait_for_vuejs
-      click_button '確認OKにする'
-    end
+    click_button '確認OKにする'
     assert_text '確認済'
     assert_text '日報でcomment+確認OKにするtest'
   end