--snapshot-update

test/e2e/single_api/setting/__snapshots__/test_setting_api.ambr

@@ -106,7 +106,7 @@
               download="VOICEVOXユーザー辞書.json"
               class="btn btn-primary mb-3"
               href="/user_dict"
-              @click="showToastWithMessage('辞書をエクスポートしました。');"
+              @click="showToastWithMessage('辞書をエクスポートしました。', 'success');"
               target="_blank"
               rel="noopener noreferrer"
             >
@@ -169,7 +169,8 @@
         <!-- トースト -->
         <div class="position-fixed bottom-0 end-0 p-3" style="z-index: 5">
           <div
-            class="toast align-items-center autohide text-white bg-success"
+            class="toast align-items-center autohide text-white"
+            :class="'bg-' + toastType"
             role="alert"
             aria-live="assertive"
             aria-atomic="true"
@@ -190,7 +191,7 @@
             setup() {
               // 設定値周り
               const corsPolicyMode = ref(
-                "localapps"
+                "localapps",
               );
               const allowOrigin = ref("");
 
@@ -206,9 +207,9 @@
                   body: formData,
                 }).then((res) => {
                   if (res.ok) {
-                    showToastWithMessage("設定を保存しました。");
+                    showToastWithMessage("設定を保存しました。", "success");
                   } else {
-                    showToastWithMessage("設定の保存に失敗しました。");
+                    showToastWithMessage("設定の保存に失敗しました。", "danger");
                   }
                 });
               });
@@ -226,14 +227,20 @@
                   const params = new URLSearchParams({
                     override: true, // 重複するエントリを上書きする
                   });
-                  await fetch(`/import_user_dict?${params}`, {
+                  const response = await fetch(`/import_user_dict?${params}`, {
                     method: "POST",
                     mode: "same-origin",
                     headers: { "Content-Type": "application/json" },
                     body: reader.result,
                   });
-
-                  showToastWithMessage("辞書をインポートしました。");
+                  if (response.ok) {
+                    showToastWithMessage("辞書をインポートしました。", "success");
+                  } else {
+                    showToastWithMessage(
+                      "辞書のインポートに失敗しました。",
+                      "danger",
+                    );
+                  }
                 });
 
                 reader.readAsText(userDictFileForImport.value);
@@ -243,16 +250,20 @@
               const toastElem = ref(undefined);
               const bootstrapToast = ref(undefined);
               const toastMessage = ref("");
+              const toastType = ref("success");
               onMounted(() => {
                 if (toastElem.value == undefined) {
                   throw new Error("toastElemが見つかりません。");
                 }
                 bootstrapToast.value = new bootstrap.Toast(toastElem.value);
               });
-              const showToastWithMessage = (message) => {
-                console.log(`showToastWithMessage: ${message}`);
+
+              // メッセージを表示する。typeはsuccess・info・warning・dangerなど。
+              const showToastWithMessage = (message, type) => {
+                console.log(`showToastWithMessage: ${message}, ${type}`);
                 bootstrapToast.value.show();
                 toastMessage.value = message;
+                toastType.value = type;
               };
 
               // 表示用の情報
@@ -271,6 +282,7 @@
                 importUserDict,
                 toastElem,
                 toastMessage,
+                toastType,
                 showToastWithMessage,
                 brandName,
               };
@@ -309,7 +321,7 @@
               elem.onload = resolve;
               elem.onerror = () => {
                 console.warn(
-                  `CDNの読み込みに失敗しました。 ${candidateUrlList[current]}`
+                  `CDNの読み込みに失敗しました。 ${candidateUrlList[current]}`,
                 );
                 document.head.removeChild(elem);
                 current++;
@@ -334,7 +346,7 @@
               "https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css",
               "https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.0.2/css/bootstrap.min.css",
             ],
-            "sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC"
+            "sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC",
           );
           libraryLoadingPromises.push(bootstrapCssPromise);
 
@@ -345,7 +357,7 @@
               "https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js",
               "https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.0.2/js/bootstrap.bundle.min.js",
             ],
-            "sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
+            "sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM",
           );
           libraryLoadingPromises.push(bootstrapScriptPromise);
 
@@ -357,7 +369,7 @@
               "https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.global.js",
               "https://cdnjs.cloudflare.com/ajax/libs/vue/3.3.10/vue.global.js",
             ],
-            "sha384-ttfhgYK68lNlS8ak6Z//mvUbpRbRCh43MYGuqEtK8mj/yzlKqY8GA8o3BPMi23cE"
+            "sha384-ttfhgYK68lNlS8ak6Z//mvUbpRbRCh43MYGuqEtK8mj/yzlKqY8GA8o3BPMi23cE",
           );
           libraryLoadingPromises.push(vuePromise);