From 87bbfc75f3ed0e105ae8fe77d82909e9d77789b2 Mon Sep 17 00:00:00 2001
From: kentah <158997636+KentaHizume@users.noreply.github.com>
Date: Tue, 7 Jan 2025 14:47:52 +0900
Subject: [PATCH 1/9] =?UTF-8?q?=E4=B8=8B=E8=A8=98=E3=81=AE3=E7=AE=87?=
 =?UTF-8?q?=E6=89=80=E3=81=AB=E3=81=A4=E3=81=84=E3=81=A6=E3=80=81=E7=AE=A1?=
 =?UTF-8?q?=E7=90=86=E8=80=85=E3=81=A7=E3=81=AA=E3=81=91=E3=82=8C=E3=81=B0?=
 =?UTF-8?q?=E3=83=9C=E3=82=BF=E3=83=B3=E3=82=92=E9=9D=9E=E6=B4=BB=E6=80=A7?=
 =?UTF-8?q?=E3=81=AB=E3=81=99=E3=82=8B=E3=82=88=E3=81=86=E5=A4=89=E6=9B=B4?=
 =?UTF-8?q?=20=E3=82=A2=E3=82=A4=E3=83=86=E3=83=A0=E8=BF=BD=E5=8A=A0?=
 =?UTF-8?q?=E7=94=BB=E9=9D=A2=E3=81=AE=E8=BF=BD=E5=8A=A0=E3=83=9C=E3=82=BF?=
 =?UTF-8?q?=E3=83=B3=20=E3=82=A2=E3=82=A4=E3=83=86=E3=83=A0=E7=B7=A8?=
 =?UTF-8?q?=E9=9B=86=E7=94=BB=E9=9D=A2=E3=81=AE=E6=9B=B4=E6=96=B0=E3=83=9C?=
 =?UTF-8?q?=E3=82=BF=E3=83=B3=E3=80=81=E5=89=8A=E9=99=A4=E3=83=9C=E3=82=BF?=
 =?UTF-8?q?=E3=83=B3?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../admin/src/stores/authentication/authentication.ts | 10 ++++++++++
 .../admin/src/views/catalog/ItemsAddView.vue          |  4 +++-
 .../admin/src/views/catalog/ItemsEditView.vue         | 11 +++++++++--
 3 files changed, 22 insertions(+), 3 deletions(-)

diff --git a/samples/web-csr/dressca-frontend/admin/src/stores/authentication/authentication.ts b/samples/web-csr/dressca-frontend/admin/src/stores/authentication/authentication.ts
index 2d504d4e2..84c623197 100644
--- a/samples/web-csr/dressca-frontend/admin/src/stores/authentication/authentication.ts
+++ b/samples/web-csr/dressca-frontend/admin/src/stores/authentication/authentication.ts
@@ -53,5 +53,15 @@ export const useAuthenticationStore = defineStore({
     isAuthenticated(state) {
       return state.authenticationState;
     },
+    /**
+     * ユーザーが特定のロールに属するかどうかを判定する関数を取得します。
+     * ストアのゲッターには直接パラメーターを渡すことができないので、
+     * 関数を経由してパラメーターを受け取る必要があります。
+     * @param state 状態。
+     * @returns ユーザーが特定のロールに属するかどうかを判定する関数。
+     */
+    isInRole(state) {
+      return (role: string) => state.userRoles.includes(role);
+    },
   },
 });
diff --git a/samples/web-csr/dressca-frontend/admin/src/views/catalog/ItemsAddView.vue b/samples/web-csr/dressca-frontend/admin/src/views/catalog/ItemsAddView.vue
index 617d58444..2f737fd34 100644
--- a/samples/web-csr/dressca-frontend/admin/src/views/catalog/ItemsAddView.vue
+++ b/samples/web-csr/dressca-frontend/admin/src/views/catalog/ItemsAddView.vue
@@ -14,9 +14,11 @@ import type {
   GetCatalogBrandsResponse,
   GetCatalogCategoriesResponse,
 } from '@/generated/api-client';
+import { useAuthenticationStore } from '@/stores/authentication/authentication';
 
 const router = useRouter();
 const customErrorHandler = useCustomErrorHandler();
+const authenticationStore = useAuthenticationStore();
 
 const { errors, values, meta, defineField } = useForm({
   validationSchema: catalogItemSchema,
@@ -211,7 +213,7 @@ onMounted(async () => {
       <button
         type="button"
         class="rounded bg-blue-600 px-4 py-2 font-bold text-white hover:bg-blue-800 disabled:bg-blue-500 disabled:opacity-50"
-        :disabled="isInvalid()"
+        :disabled="isInvalid() || !authenticationStore.isInRole('Admin')"
         @click="AddItem()"
       >
         追加
diff --git a/samples/web-csr/dressca-frontend/admin/src/views/catalog/ItemsEditView.vue b/samples/web-csr/dressca-frontend/admin/src/views/catalog/ItemsEditView.vue
index dbaa93e41..96089c0e2 100644
--- a/samples/web-csr/dressca-frontend/admin/src/views/catalog/ItemsEditView.vue
+++ b/samples/web-csr/dressca-frontend/admin/src/views/catalog/ItemsEditView.vue
@@ -23,8 +23,10 @@ import type {
   GetCatalogItemResponse,
 } from '@/generated/api-client';
 import { useCustomErrorHandler } from '@/shared/error-handler/use-custom-error-handler';
+import { useAuthenticationStore } from '@/stores/authentication/authentication';
 
 const customErrorHandler = useCustomErrorHandler();
+const authenticationStore = useAuthenticationStore();
 const router = useRouter();
 const route = useRoute();
 const id = Number(route.params.itemId);
@@ -59,6 +61,10 @@ const isInvalid = () => {
   return !meta.value.valid;
 };
 
+const hasAdminRole = () => {
+  return authenticationStore.isInRole('Admin');
+};
+
 /**
  * 編集中のアイテムの状態です。
  */
@@ -556,7 +562,8 @@ const updateItemAsync = async () => {
           <div class="flex justify-end">
             <button
               type="button"
-              class="rounded bg-red-800 px-4 py-2 font-bold text-white hover:bg-red-900"
+              class="rounded bg-red-800 px-4 py-2 font-bold text-white hover:bg-red-900 disabled:bg-red-500 disabled:opacity-50"
+              :disabled="!hasAdminRole()"
               @click="showDeleteConfirm = true"
             >
               削除
@@ -565,7 +572,7 @@ const updateItemAsync = async () => {
             <button
               type="button"
               class="rounded bg-blue-600 px-4 py-2 font-bold text-white hover:bg-blue-800 disabled:bg-blue-500 disabled:opacity-50"
-              :disabled="isInvalid()"
+              :disabled="isInvalid() || !hasAdminRole()"
               @click="showUpdateConfirm = true"
             >
               更新

From 1f8409b5459a6a74140ce704ddf382db92be7234 Mon Sep 17 00:00:00 2001
From: kentah <158997636+KentaHizume@users.noreply.github.com>
Date: Tue, 7 Jan 2025 15:19:05 +0900
Subject: [PATCH 2/9] =?UTF-8?q?createTestingPinia=E3=82=92=E4=BD=BF?=
 =?UTF-8?q?=E7=94=A8=E3=81=97=E3=81=A6=E3=82=B9=E3=83=88=E3=82=A2=E3=81=AB?=
 =?UTF-8?q?=E5=88=9D=E6=9C=9F=E5=80=A4=E3=82=92=E8=A8=AD=E5=AE=9A=E3=81=99?=
 =?UTF-8?q?=E3=82=8B=E3=82=88=E3=81=86=E3=81=AB=E4=BF=AE=E6=AD=A3?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../dressca-frontend/admin/package.json       |   3 +-
 .../src/views/__tests__/ItemsAddView.spec.ts  |  15 ++-
 .../src/views/__tests__/ItemsEditView.spec.ts |  15 ++-
 .../dressca-frontend/package-lock.json        | 108 ++++++++++--------
 4 files changed, 87 insertions(+), 54 deletions(-)

diff --git a/samples/web-csr/dressca-frontend/admin/package.json b/samples/web-csr/dressca-frontend/admin/package.json
index 46c0ec47c..d0841a025 100644
--- a/samples/web-csr/dressca-frontend/admin/package.json
+++ b/samples/web-csr/dressca-frontend/admin/package.json
@@ -23,9 +23,9 @@
   },
   "dependencies": {
     "@heroicons/vue": "^2.1.5",
+    "@vee-validate/yup": "^4.13.2",
     "axios": "^1.7.7",
     "msw": "2.7.0",
-    "@vee-validate/yup": "^4.13.2",
     "pinia": "^2.2.5",
     "vee-validate": "^4.14.4",
     "vitest": "^2.1.4",
@@ -40,6 +40,7 @@
   },
   "devDependencies": {
     "@openapitools/openapi-generator-cli": "^2.15.0",
+    "@pinia/testing": "^0.1.7",
     "@rushstack/eslint-patch": "^1.10.4",
     "@tsconfig/node20": "^20.1.4",
     "@types/jsdom": "^21.1.7",
diff --git a/samples/web-csr/dressca-frontend/admin/src/views/__tests__/ItemsAddView.spec.ts b/samples/web-csr/dressca-frontend/admin/src/views/__tests__/ItemsAddView.spec.ts
index 826bf6e50..4b0369476 100644
--- a/samples/web-csr/dressca-frontend/admin/src/views/__tests__/ItemsAddView.spec.ts
+++ b/samples/web-csr/dressca-frontend/admin/src/views/__tests__/ItemsAddView.spec.ts
@@ -1,13 +1,22 @@
 import { describe, it, expect, vi, beforeAll } from 'vitest';
 import { flushPromises, mount, VueWrapper } from '@vue/test-utils';
 import { router } from '@/router';
-import { createPinia, setActivePinia } from 'pinia';
+import { createTestingPinia } from '@pinia/testing';
 import { createCustomErrorHandler } from '@/shared/error-handler/custom-error-handler';
 import ItemsAddView from '@/views/catalog/ItemsAddView.vue';
 
 async function getWrapper() {
-  const pinia = createPinia();
-  setActivePinia(pinia);
+  const pinia = createTestingPinia({
+    initialState: {
+      authentication: {
+        authenticationState: true,
+        userName: 'admin@example.com',
+        userRoles: ['Admin'],
+      },
+    },
+    createSpy: vi.fn, // 明示的に設定する必要があります。
+    stubActions: false, // 結合テストなので、アクションはモック化しないように設定します。
+  });
   const customErrorHandler = createCustomErrorHandler();
   return mount(ItemsAddView, {
     global: { plugins: [pinia, router, customErrorHandler] },
diff --git a/samples/web-csr/dressca-frontend/admin/src/views/__tests__/ItemsEditView.spec.ts b/samples/web-csr/dressca-frontend/admin/src/views/__tests__/ItemsEditView.spec.ts
index 62d8ff1f5..40a9a7033 100644
--- a/samples/web-csr/dressca-frontend/admin/src/views/__tests__/ItemsEditView.spec.ts
+++ b/samples/web-csr/dressca-frontend/admin/src/views/__tests__/ItemsEditView.spec.ts
@@ -1,13 +1,22 @@
 import { describe, it, expect, vi, beforeAll } from 'vitest';
 import { flushPromises, mount, VueWrapper } from '@vue/test-utils';
-import { createPinia, setActivePinia } from 'pinia';
+import { createTestingPinia } from '@pinia/testing';
 import { createCustomErrorHandler } from '@/shared/error-handler/custom-error-handler';
 import ItemsEditView from '@/views/catalog/ItemsEditView.vue';
 import { router } from '@/router';
 
 async function getWrapper() {
-  const pinia = createPinia();
-  setActivePinia(pinia);
+  const pinia = createTestingPinia({
+    initialState: {
+      authentication: {
+        authenticationState: true,
+        userName: 'admin@example.com',
+        userRoles: ['Admin'],
+      },
+    },
+    createSpy: vi.fn, // 明示的に設定する必要があります。
+    stubActions: false, // 結合テストなので、アクションはモック化しないように設定します。
+  });
   const customErrorHandler = createCustomErrorHandler();
   router.push({ name: 'catalog/items/edit', params: { itemId: 1 } });
   await router.isReady();
diff --git a/samples/web-csr/dressca-frontend/package-lock.json b/samples/web-csr/dressca-frontend/package-lock.json
index 6d99f53f0..5f483b8bd 100644
--- a/samples/web-csr/dressca-frontend/package-lock.json
+++ b/samples/web-csr/dressca-frontend/package-lock.json
@@ -15,49 +15,50 @@
     "admin": {
       "version": "0.0.0",
       "dependencies": {
-        "@heroicons/vue": "2.1.5",
-        "@vee-validate/yup": "4.13.2",
-        "axios": "1.7.7",
+        "@heroicons/vue": "^2.1.5",
+        "@vee-validate/yup": "^4.13.2",
+        "axios": "^1.7.7",
         "msw": "2.7.0",
-        "pinia": "2.2.5",
-        "vee-validate": "4.14.4",
-        "vitest": "2.1.4",
-        "vue": "3.5.12",
-        "vue-router": "4.4.5",
-        "yup": "1.4.0"
+        "pinia": "^2.2.5",
+        "vee-validate": "^4.14.4",
+        "vitest": "^2.1.4",
+        "vue": "^3.5.12",
+        "vue-router": "^4.4.5",
+        "yup": "^1.4.0"
       },
       "devDependencies": {
-        "@openapitools/openapi-generator-cli": "2.15.0",
-        "@rushstack/eslint-patch": "1.10.4",
-        "@tsconfig/node20": "20.1.4",
-        "@types/jsdom": "21.1.7",
-        "@types/node": "22.8.5",
-        "@vitejs/plugin-vue": "5.1.4",
-        "@vitejs/plugin-vue-jsx": "4.0.0",
-        "@vue/eslint-config-airbnb-with-typescript": "8.0.0",
-        "@vue/eslint-config-prettier": "9.0.0",
-        "@vue/eslint-config-typescript": "13.0.0",
-        "@vue/test-utils": "2.4.6",
-        "@vue/tsconfig": "0.5.1",
-        "autoprefixer": "10.4.20",
-        "cypress": "13.15.1",
-        "eslint": "8.57.0",
-        "eslint-plugin-cypress": "3.4.0",
-        "eslint-plugin-vue": "9.30.0",
-        "jsdom": "25.0.1",
-        "npm-run-all2": "7.0.1",
-        "postcss": "8.4.47",
-        "postcss-nesting": "13.0.1",
-        "prettier": "3.3.3",
-        "start-server-and-test": "2.0.8",
-        "stylelint": "16.9.0",
-        "stylelint-config-recommended-vue": "1.5.0",
-        "stylelint-config-standard": "36.0.1",
-        "stylelint-prettier": "5.0.2",
-        "tailwindcss": "3.4.14",
+        "@openapitools/openapi-generator-cli": "^2.15.0",
+        "@pinia/testing": "^0.1.7",
+        "@rushstack/eslint-patch": "^1.10.4",
+        "@tsconfig/node20": "^20.1.4",
+        "@types/jsdom": "^21.1.7",
+        "@types/node": "^22.8.5",
+        "@vitejs/plugin-vue": "^5.1.4",
+        "@vitejs/plugin-vue-jsx": "^4.0.0",
+        "@vue/eslint-config-airbnb-with-typescript": "^8.0.0",
+        "@vue/eslint-config-prettier": "^9.0.0",
+        "@vue/eslint-config-typescript": "^13.0.0",
+        "@vue/test-utils": "^2.4.6",
+        "@vue/tsconfig": "^0.5.1",
+        "autoprefixer": "^10.4.20",
+        "cypress": "^13.15.1",
+        "eslint": "^8.57.0",
+        "eslint-plugin-cypress": "^3.4.0",
+        "eslint-plugin-vue": "^9.30.0",
+        "jsdom": "^25.0.1",
+        "npm-run-all2": "^7.0.1",
+        "postcss": "^8.4.47",
+        "postcss-nesting": "^13.0.1",
+        "prettier": "^3.3.3",
+        "start-server-and-test": "^2.0.8",
+        "stylelint": "^16.9.0",
+        "stylelint-config-recommended-vue": "^1.5.0",
+        "stylelint-config-standard": "^36.0.1",
+        "stylelint-prettier": "^5.0.2",
+        "tailwindcss": "^3.4.14",
         "typescript": "5.3.3",
-        "vite": "5.4.8",
-        "vue-tsc": "2.1.10"
+        "vite": "^5.4.8",
+        "vue-tsc": "^2.1.10"
       }
     },
     "admin/node_modules/@vitejs/plugin-vue-jsx": {
@@ -1718,6 +1719,22 @@
         "node": ">=8"
       }
     },
+    "node_modules/@pinia/testing": {
+      "version": "0.1.7",
+      "resolved": "https://registry.npmjs.org/@pinia/testing/-/testing-0.1.7.tgz",
+      "integrity": "sha512-xcDq6Ry/kNhZ5bsUMl7DeoFXwdume1NYzDggCiDUDKoPQ6Mo0eH9VU7bJvBtlurqe6byAntWoX5IhVFqWzRz/Q==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "vue-demi": "^0.14.10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/posva"
+      },
+      "peerDependencies": {
+        "pinia": ">=2.2.6"
+      }
+    },
     "node_modules/@pkgjs/parseargs": {
       "version": "0.11.0",
       "dev": true,
@@ -8972,9 +8989,10 @@
       }
     },
     "node_modules/pinia": {
-      "version": "2.2.5",
-      "resolved": "https://registry.npmjs.org/pinia/-/pinia-2.2.5.tgz",
-      "integrity": "sha512-T4PEQ4uFv2KIRC8A1Y3k1ceQGTDtxtd7nngYGu1IJUUSpuQoYfGq7w7rOc+f5YN1vx3mEs2NjjtN2IFbNS7jqA==",
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/pinia/-/pinia-2.3.0.tgz",
+      "integrity": "sha512-ohZj3jla0LL0OH5PlLTDMzqKiVw2XARmC1XYLdLWIPBMdhDW/123ZWr4zVAhtJm+aoSkFa13pYXskAvAscIkhQ==",
+      "license": "MIT",
       "dependencies": {
         "@vue/devtools-api": "^6.6.3",
         "vue-demi": "^0.14.10"
@@ -8983,14 +9001,10 @@
         "url": "https://github.com/sponsors/posva"
       },
       "peerDependencies": {
-        "@vue/composition-api": "^1.4.0",
         "typescript": ">=4.4.4",
-        "vue": "^2.6.14 || ^3.5.11"
+        "vue": "^2.7.0 || ^3.5.11"
       },
       "peerDependenciesMeta": {
-        "@vue/composition-api": {
-          "optional": true
-        },
         "typescript": {
           "optional": true
         }

From 116974dbc0235ffa0d055ab91717d56a09b4bcd0 Mon Sep 17 00:00:00 2001
From: kentah <158997636+KentaHizume@users.noreply.github.com>
Date: Tue, 7 Jan 2025 15:27:10 +0900
Subject: [PATCH 3/9] =?UTF-8?q?=E5=BF=85=E3=81=9AAdmin=E3=83=AD=E3=83=BC?=
 =?UTF-8?q?=E3=83=AB=E3=82=92=E6=8C=81=E3=81=A4=E3=83=A6=E3=83=BC=E3=82=B6?=
 =?UTF-8?q?=E3=83=BC=E3=81=A8=E3=81=97=E3=81=A6=E3=83=AD=E3=82=B0=E3=82=A4?=
 =?UTF-8?q?=E3=83=B3=E3=81=99=E3=82=8B=E4=BB=95=E6=A7=98=E3=81=AB=E3=81=AA?=
 =?UTF-8?q?=E3=81=A3=E3=81=A6=E3=81=84=E3=82=8B=E6=97=A8=E3=82=92=E3=82=B3?=
 =?UTF-8?q?=E3=83=A1=E3=83=B3=E3=83=88?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../admin/src/stores/authentication/authentication.ts            | 1 +
 .../dressca-frontend/admin/src/views/catalog/ItemsEditView.vue   | 1 +
 2 files changed, 2 insertions(+)

diff --git a/samples/web-csr/dressca-frontend/admin/src/stores/authentication/authentication.ts b/samples/web-csr/dressca-frontend/admin/src/stores/authentication/authentication.ts
index 84c623197..9afa5a607 100644
--- a/samples/web-csr/dressca-frontend/admin/src/stores/authentication/authentication.ts
+++ b/samples/web-csr/dressca-frontend/admin/src/stores/authentication/authentication.ts
@@ -57,6 +57,7 @@ export const useAuthenticationStore = defineStore({
      * ユーザーが特定のロールに属するかどうかを判定する関数を取得します。
      * ストアのゲッターには直接パラメーターを渡すことができないので、
      * 関数を経由してパラメーターを受け取る必要があります。
+     * サンプルアプリでは、必ず Admin ロールを持つユーザーとしてログインするようになっています。
      * @param state 状態。
      * @returns ユーザーが特定のロールに属するかどうかを判定する関数。
      */
diff --git a/samples/web-csr/dressca-frontend/admin/src/views/catalog/ItemsEditView.vue b/samples/web-csr/dressca-frontend/admin/src/views/catalog/ItemsEditView.vue
index 96089c0e2..aeaa3b215 100644
--- a/samples/web-csr/dressca-frontend/admin/src/views/catalog/ItemsEditView.vue
+++ b/samples/web-csr/dressca-frontend/admin/src/views/catalog/ItemsEditView.vue
@@ -560,6 +560,7 @@ const updateItemAsync = async () => {
             />
           </div>
           <div class="flex justify-end">
+            <!-- サンプルアプリは必ず Admin ロールを持つユーザーとしてログインするようになっているので、削除ボタンが disable になることはありません。-->
             <button
               type="button"
               class="rounded bg-red-800 px-4 py-2 font-bold text-white hover:bg-red-900 disabled:bg-red-500 disabled:opacity-50"

From 0dac26131a8a2c6d6b39f59c7c9c36020db18ad6 Mon Sep 17 00:00:00 2001
From: kentah <158997636+KentaHizume@users.noreply.github.com>
Date: Tue, 7 Jan 2025 16:17:50 +0900
Subject: [PATCH 4/9] =?UTF-8?q?Enum=E3=82=92=E4=BD=BF=E7=94=A8=E3=81=97?=
 =?UTF-8?q?=E3=81=A6=E3=83=AD=E3=83=BC=E3=83=AB=E3=82=92=E5=8F=82=E7=85=A7?=
 =?UTF-8?q?=E3=81=99=E3=82=8B=E3=82=88=E3=81=86=E3=81=AB=E4=BF=AE=E6=AD=A3?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../dressca-frontend/admin/src/shared/constants/roles.ts    | 6 ++++++
 .../admin/src/views/catalog/ItemsAddView.vue                | 3 ++-
 .../admin/src/views/catalog/ItemsEditView.vue               | 3 ++-
 3 files changed, 10 insertions(+), 2 deletions(-)
 create mode 100644 samples/web-csr/dressca-frontend/admin/src/shared/constants/roles.ts

diff --git a/samples/web-csr/dressca-frontend/admin/src/shared/constants/roles.ts b/samples/web-csr/dressca-frontend/admin/src/shared/constants/roles.ts
new file mode 100644
index 000000000..da4ca61d1
--- /dev/null
+++ b/samples/web-csr/dressca-frontend/admin/src/shared/constants/roles.ts
@@ -0,0 +1,6 @@
+/**
+ * ユーザーのロールを表す文字列列挙型です。
+ */
+export enum Roles {
+  ADMIN = 'Admin',
+}
diff --git a/samples/web-csr/dressca-frontend/admin/src/views/catalog/ItemsAddView.vue b/samples/web-csr/dressca-frontend/admin/src/views/catalog/ItemsAddView.vue
index 2f737fd34..5fe8c0759 100644
--- a/samples/web-csr/dressca-frontend/admin/src/views/catalog/ItemsAddView.vue
+++ b/samples/web-csr/dressca-frontend/admin/src/views/catalog/ItemsAddView.vue
@@ -15,6 +15,7 @@ import type {
   GetCatalogCategoriesResponse,
 } from '@/generated/api-client';
 import { useAuthenticationStore } from '@/stores/authentication/authentication';
+import { Roles } from '@/shared/constants/roles';
 
 const router = useRouter();
 const customErrorHandler = useCustomErrorHandler();
@@ -213,7 +214,7 @@ onMounted(async () => {
       <button
         type="button"
         class="rounded bg-blue-600 px-4 py-2 font-bold text-white hover:bg-blue-800 disabled:bg-blue-500 disabled:opacity-50"
-        :disabled="isInvalid() || !authenticationStore.isInRole('Admin')"
+        :disabled="isInvalid() || !authenticationStore.isInRole(Roles.ADMIN)"
         @click="AddItem()"
       >
         追加
diff --git a/samples/web-csr/dressca-frontend/admin/src/views/catalog/ItemsEditView.vue b/samples/web-csr/dressca-frontend/admin/src/views/catalog/ItemsEditView.vue
index aeaa3b215..d86a1bb0f 100644
--- a/samples/web-csr/dressca-frontend/admin/src/views/catalog/ItemsEditView.vue
+++ b/samples/web-csr/dressca-frontend/admin/src/views/catalog/ItemsEditView.vue
@@ -24,6 +24,7 @@ import type {
 } from '@/generated/api-client';
 import { useCustomErrorHandler } from '@/shared/error-handler/use-custom-error-handler';
 import { useAuthenticationStore } from '@/stores/authentication/authentication';
+import { Roles } from '@/shared/constants/roles';
 
 const customErrorHandler = useCustomErrorHandler();
 const authenticationStore = useAuthenticationStore();
@@ -62,7 +63,7 @@ const isInvalid = () => {
 };
 
 const hasAdminRole = () => {
-  return authenticationStore.isInRole('Admin');
+  return authenticationStore.isInRole(Roles.ADMIN);
 };
 
 /**

From 1aa5fbce091badacdaf43bd265b5c69b995b268d Mon Sep 17 00:00:00 2001
From: kentah <158997636+KentaHizume@users.noreply.github.com>
Date: Wed, 8 Jan 2025 13:56:01 +0900
Subject: [PATCH 5/9] =?UTF-8?q?storeToRefs=E3=82=92=E4=BD=BF=E7=94=A8?=
 =?UTF-8?q?=E3=81=97=E3=81=A6getter=E3=82=92=E6=98=8E=E7=A4=BA=E7=9A=84?=
 =?UTF-8?q?=E3=81=AB=E3=83=AA=E3=82=A2=E3=82=AF=E3=83=86=E3=82=A3=E3=83=96?=
 =?UTF-8?q?=E5=8C=96=E3=81=99=E3=82=8B=E3=82=88=E3=81=86=E3=81=AB=E4=BF=AE?=
 =?UTF-8?q?=E6=AD=A3?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../admin/src/views/catalog/ItemsAddView.vue           |  4 +++-
 .../admin/src/views/catalog/ItemsEditView.vue          | 10 ++++------
 2 files changed, 7 insertions(+), 7 deletions(-)

diff --git a/samples/web-csr/dressca-frontend/admin/src/views/catalog/ItemsAddView.vue b/samples/web-csr/dressca-frontend/admin/src/views/catalog/ItemsAddView.vue
index 5fe8c0759..8fa7e1ea6 100644
--- a/samples/web-csr/dressca-frontend/admin/src/views/catalog/ItemsAddView.vue
+++ b/samples/web-csr/dressca-frontend/admin/src/views/catalog/ItemsAddView.vue
@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import { onMounted, ref } from 'vue';
+import { storeToRefs } from 'pinia';
 import {
   fetchCategoriesAndBrands,
   postCatalogItem,
@@ -20,6 +21,7 @@ import { Roles } from '@/shared/constants/roles';
 const router = useRouter();
 const customErrorHandler = useCustomErrorHandler();
 const authenticationStore = useAuthenticationStore();
+const { isInRole } = storeToRefs(authenticationStore);
 
 const { errors, values, meta, defineField } = useForm({
   validationSchema: catalogItemSchema,
@@ -214,7 +216,7 @@ onMounted(async () => {
       <button
         type="button"
         class="rounded bg-blue-600 px-4 py-2 font-bold text-white hover:bg-blue-800 disabled:bg-blue-500 disabled:opacity-50"
-        :disabled="isInvalid() || !authenticationStore.isInRole(Roles.ADMIN)"
+        :disabled="isInvalid() || !isInRole(Roles.ADMIN)"
         @click="AddItem()"
       >
         追加
diff --git a/samples/web-csr/dressca-frontend/admin/src/views/catalog/ItemsEditView.vue b/samples/web-csr/dressca-frontend/admin/src/views/catalog/ItemsEditView.vue
index d86a1bb0f..5a84a0150 100644
--- a/samples/web-csr/dressca-frontend/admin/src/views/catalog/ItemsEditView.vue
+++ b/samples/web-csr/dressca-frontend/admin/src/views/catalog/ItemsEditView.vue
@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import { onMounted, ref } from 'vue';
+import { storeToRefs } from 'pinia';
 import {
   fetchItem,
   updateCatalogItem,
@@ -28,6 +29,7 @@ import { Roles } from '@/shared/constants/roles';
 
 const customErrorHandler = useCustomErrorHandler();
 const authenticationStore = useAuthenticationStore();
+const { isInRole } = storeToRefs(authenticationStore);
 const router = useRouter();
 const route = useRoute();
 const id = Number(route.params.itemId);
@@ -62,10 +64,6 @@ const isInvalid = () => {
   return !meta.value.valid;
 };
 
-const hasAdminRole = () => {
-  return authenticationStore.isInRole(Roles.ADMIN);
-};
-
 /**
  * 編集中のアイテムの状態です。
  */
@@ -565,7 +563,7 @@ const updateItemAsync = async () => {
             <button
               type="button"
               class="rounded bg-red-800 px-4 py-2 font-bold text-white hover:bg-red-900 disabled:bg-red-500 disabled:opacity-50"
-              :disabled="!hasAdminRole()"
+              :disabled="!isInRole(Roles.ADMIN)"
               @click="showDeleteConfirm = true"
             >
               削除
@@ -574,7 +572,7 @@ const updateItemAsync = async () => {
             <button
               type="button"
               class="rounded bg-blue-600 px-4 py-2 font-bold text-white hover:bg-blue-800 disabled:bg-blue-500 disabled:opacity-50"
-              :disabled="isInvalid() || !hasAdminRole()"
+              :disabled="isInvalid() || !isInRole(Roles.ADMIN)"
               @click="showUpdateConfirm = true"
             >
               更新

From d2c7c51405c940b1631f9a309ca668f5739e818b Mon Sep 17 00:00:00 2001
From: kentah <158997636+KentaHizume@users.noreply.github.com>
Date: Wed, 8 Jan 2025 14:12:55 +0900
Subject: [PATCH 6/9] =?UTF-8?q?=E3=83=AD=E3=82=B0=E3=82=A4=E3=83=B3?=
 =?UTF-8?q?=E7=8A=B6=E6=85=8B=E3=81=AE=E4=BD=9C=E6=88=90=E3=82=92=E5=A4=96?=
 =?UTF-8?q?=E3=81=AB=E5=88=87=E3=82=8A=E5=87=BA=E3=81=97?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/views/__tests__/ItemsAddView.spec.ts  | 23 +++++++++++-----
 .../src/views/__tests__/ItemsEditView.spec.ts | 27 +++++++++++++------
 2 files changed, 35 insertions(+), 15 deletions(-)

diff --git a/samples/web-csr/dressca-frontend/admin/src/views/__tests__/ItemsAddView.spec.ts b/samples/web-csr/dressca-frontend/admin/src/views/__tests__/ItemsAddView.spec.ts
index 4b0369476..0c3c1dad7 100644
--- a/samples/web-csr/dressca-frontend/admin/src/views/__tests__/ItemsAddView.spec.ts
+++ b/samples/web-csr/dressca-frontend/admin/src/views/__tests__/ItemsAddView.spec.ts
@@ -1,22 +1,29 @@
 import { describe, it, expect, vi, beforeAll } from 'vitest';
 import { flushPromises, mount, VueWrapper } from '@vue/test-utils';
 import { router } from '@/router';
-import { createTestingPinia } from '@pinia/testing';
+import { createTestingPinia, type TestingPinia } from '@pinia/testing';
 import { createCustomErrorHandler } from '@/shared/error-handler/custom-error-handler';
 import ItemsAddView from '@/views/catalog/ItemsAddView.vue';
 
-async function getWrapper() {
-  const pinia = createTestingPinia({
+function CreateLoginState(
+  authenticationState: boolean = true,
+  userName: string = 'admin@example.com',
+  userRoles: string[] = ['Admin'],
+) {
+  return createTestingPinia({
     initialState: {
       authentication: {
-        authenticationState: true,
-        userName: 'admin@example.com',
-        userRoles: ['Admin'],
+        authenticationState,
+        userName,
+        userRoles,
       },
     },
     createSpy: vi.fn, // 明示的に設定する必要があります。
     stubActions: false, // 結合テストなので、アクションはモック化しないように設定します。
   });
+}
+
+async function getWrapper(pinia: TestingPinia) {
   const customErrorHandler = createCustomErrorHandler();
   return mount(ItemsAddView, {
     global: { plugins: [pinia, router, customErrorHandler] },
@@ -24,10 +31,12 @@ async function getWrapper() {
 }
 
 describe('アイテムを追加できる', () => {
+  let loginState: TestingPinia;
   let wrapper: VueWrapper;
 
   beforeAll(async () => {
-    wrapper = await getWrapper();
+    loginState = CreateLoginState();
+    wrapper = await getWrapper(loginState);
   });
 
   it('追加画面に遷移できる', async () => {
diff --git a/samples/web-csr/dressca-frontend/admin/src/views/__tests__/ItemsEditView.spec.ts b/samples/web-csr/dressca-frontend/admin/src/views/__tests__/ItemsEditView.spec.ts
index 40a9a7033..99bb47ea1 100644
--- a/samples/web-csr/dressca-frontend/admin/src/views/__tests__/ItemsEditView.spec.ts
+++ b/samples/web-csr/dressca-frontend/admin/src/views/__tests__/ItemsEditView.spec.ts
@@ -1,22 +1,29 @@
 import { describe, it, expect, vi, beforeAll } from 'vitest';
 import { flushPromises, mount, VueWrapper } from '@vue/test-utils';
-import { createTestingPinia } from '@pinia/testing';
+import { createTestingPinia, type TestingPinia } from '@pinia/testing';
 import { createCustomErrorHandler } from '@/shared/error-handler/custom-error-handler';
 import ItemsEditView from '@/views/catalog/ItemsEditView.vue';
 import { router } from '@/router';
 
-async function getWrapper() {
-  const pinia = createTestingPinia({
+function CreateLoginState(
+  authenticationState: boolean = true,
+  userName: string = 'admin@example.com',
+  userRoles: string[] = ['Admin'],
+) {
+  return createTestingPinia({
     initialState: {
       authentication: {
-        authenticationState: true,
-        userName: 'admin@example.com',
-        userRoles: ['Admin'],
+        authenticationState,
+        userName,
+        userRoles,
       },
     },
     createSpy: vi.fn, // 明示的に設定する必要があります。
     stubActions: false, // 結合テストなので、アクションはモック化しないように設定します。
   });
+}
+
+async function getWrapper(pinia: TestingPinia) {
   const customErrorHandler = createCustomErrorHandler();
   router.push({ name: 'catalog/items/edit', params: { itemId: 1 } });
   await router.isReady();
@@ -26,10 +33,12 @@ async function getWrapper() {
 }
 
 describe('アイテムが削除できる', () => {
+  let loginState: TestingPinia;
   let wrapper: VueWrapper;
 
   beforeAll(async () => {
-    wrapper = await getWrapper();
+    loginState = CreateLoginState();
+    wrapper = await getWrapper(loginState);
   });
 
   it('編集画面に遷移できる', async () => {
@@ -86,10 +95,12 @@ describe('アイテムが削除できる', () => {
 });
 
 describe('アイテムが更新できる', () => {
+  let loginState: TestingPinia;
   let wrapper: VueWrapper;
 
   beforeAll(async () => {
-    wrapper = await getWrapper();
+    loginState = CreateLoginState();
+    wrapper = await getWrapper(loginState);
   });
 
   it('編集画面に遷移できる', async () => {

From 42157ea7c56b0e275ec1b34d0d71e1031ee07854 Mon Sep 17 00:00:00 2001
From: kentah <158997636+KentaHizume@users.noreply.github.com>
Date: Wed, 8 Jan 2025 14:34:14 +0900
Subject: [PATCH 7/9] =?UTF-8?q?=E3=83=9C=E3=82=BF=E3=83=B3=E3=81=8C?=
 =?UTF-8?q?=E9=9D=9E=E6=B4=BB=E6=80=A7=E3=81=A7=E3=81=82=E3=82=8B=E3=81=93?=
 =?UTF-8?q?=E3=81=A8=E3=82=92=E7=A2=BA=E8=AA=8D=E3=81=99=E3=82=8B=E3=83=86?=
 =?UTF-8?q?=E3=82=B9=E3=83=88=E3=82=92=E8=BF=BD=E5=8A=A0=20=E7=8F=BE?=
 =?UTF-8?q?=E5=9C=A8=E3=83=86=E3=82=B9=E3=83=88=E3=81=A7=E4=BD=BF=E3=81=A3?=
 =?UTF-8?q?=E3=81=A6=E3=81=84=E3=81=AA=E3=81=84=E5=BC=95=E6=95=B0=E3=82=92?=
 =?UTF-8?q?=E5=89=8A=E9=99=A4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/views/__tests__/ItemsAddView.spec.ts  | 39 ++++++++---
 .../src/views/__tests__/ItemsEditView.spec.ts | 69 ++++++++++++++++---
 2 files changed, 88 insertions(+), 20 deletions(-)

diff --git a/samples/web-csr/dressca-frontend/admin/src/views/__tests__/ItemsAddView.spec.ts b/samples/web-csr/dressca-frontend/admin/src/views/__tests__/ItemsAddView.spec.ts
index 0c3c1dad7..8c11e3eac 100644
--- a/samples/web-csr/dressca-frontend/admin/src/views/__tests__/ItemsAddView.spec.ts
+++ b/samples/web-csr/dressca-frontend/admin/src/views/__tests__/ItemsAddView.spec.ts
@@ -4,17 +4,12 @@ import { router } from '@/router';
 import { createTestingPinia, type TestingPinia } from '@pinia/testing';
 import { createCustomErrorHandler } from '@/shared/error-handler/custom-error-handler';
 import ItemsAddView from '@/views/catalog/ItemsAddView.vue';
+import { Roles } from '@/shared/constants/roles';
 
-function CreateLoginState(
-  authenticationState: boolean = true,
-  userName: string = 'admin@example.com',
-  userRoles: string[] = ['Admin'],
-) {
+function CreateLoginState(userRoles: string[]) {
   return createTestingPinia({
     initialState: {
       authentication: {
-        authenticationState,
-        userName,
         userRoles,
       },
     },
@@ -30,12 +25,12 @@ async function getWrapper(pinia: TestingPinia) {
   });
 }
 
-describe('アイテムを追加できる', () => {
+describe('管理者ロール_アイテムを追加できる', () => {
   let loginState: TestingPinia;
   let wrapper: VueWrapper;
 
   beforeAll(async () => {
-    loginState = CreateLoginState();
+    loginState = CreateLoginState([Roles.ADMIN]);
     wrapper = await getWrapper(loginState);
   });
 
@@ -59,3 +54,29 @@ describe('アイテムを追加できる', () => {
     expect(wrapper.html()).toContain('カタログアイテムを追加しました。');
   });
 });
+
+describe('ゲストロール_アイテム追加ボタンが非活性', () => {
+  let loginState: TestingPinia;
+  let wrapper: VueWrapper;
+
+  beforeAll(async () => {
+    loginState = CreateLoginState(['Guest']);
+    wrapper = await getWrapper(loginState);
+  });
+
+  it('追加画面に遷移できる', async () => {
+    // Arrange
+    // Act
+    await flushPromises();
+    // Assert
+    expect(wrapper.html()).toContain('カタログアイテム追加');
+  });
+
+  it('追加ボタンが非活性', async () => {
+    // Arrange
+    // Act
+    const button = wrapper.find('button');
+    // Assert
+    expect(button.attributes('disabled')).toBeDefined();
+  });
+});
diff --git a/samples/web-csr/dressca-frontend/admin/src/views/__tests__/ItemsEditView.spec.ts b/samples/web-csr/dressca-frontend/admin/src/views/__tests__/ItemsEditView.spec.ts
index 99bb47ea1..4901151c0 100644
--- a/samples/web-csr/dressca-frontend/admin/src/views/__tests__/ItemsEditView.spec.ts
+++ b/samples/web-csr/dressca-frontend/admin/src/views/__tests__/ItemsEditView.spec.ts
@@ -4,17 +4,12 @@ import { createTestingPinia, type TestingPinia } from '@pinia/testing';
 import { createCustomErrorHandler } from '@/shared/error-handler/custom-error-handler';
 import ItemsEditView from '@/views/catalog/ItemsEditView.vue';
 import { router } from '@/router';
+import { Roles } from '@/shared/constants/roles';
 
-function CreateLoginState(
-  authenticationState: boolean = true,
-  userName: string = 'admin@example.com',
-  userRoles: string[] = ['Admin'],
-) {
+function CreateLoginState(userRoles: string[]) {
   return createTestingPinia({
     initialState: {
       authentication: {
-        authenticationState,
-        userName,
         userRoles,
       },
     },
@@ -32,12 +27,12 @@ async function getWrapper(pinia: TestingPinia) {
   });
 }
 
-describe('アイテムが削除できる', () => {
+describe('管理者ロール_アイテムが削除できる', () => {
   let loginState: TestingPinia;
   let wrapper: VueWrapper;
 
   beforeAll(async () => {
-    loginState = CreateLoginState();
+    loginState = CreateLoginState([Roles.ADMIN]);
     wrapper = await getWrapper(loginState);
   });
 
@@ -94,12 +89,38 @@ describe('アイテムが削除できる', () => {
   });
 });
 
-describe('アイテムが更新できる', () => {
+describe('ゲストロール_アイテム削除ボタンが非活性', () => {
   let loginState: TestingPinia;
   let wrapper: VueWrapper;
 
   beforeAll(async () => {
-    loginState = CreateLoginState();
+    loginState = CreateLoginState(['Guest']);
+    wrapper = await getWrapper(loginState);
+  });
+
+  it('編集画面に遷移できる', async () => {
+    // Arrange
+    // Act
+    await flushPromises();
+    // Assert
+    expect(wrapper.html()).toContain('カタログアイテム編集');
+  });
+
+  it('削除ボタンが非活性', async () => {
+    // Arrange
+    // Act
+    const deleteButton = wrapper.findAll('button')[0];
+    // Assert
+    expect(deleteButton.attributes('disabled')).toBeDefined();
+  });
+});
+
+describe('管理者ロール_アイテムが更新できる', () => {
+  let loginState: TestingPinia;
+  let wrapper: VueWrapper;
+
+  beforeAll(async () => {
+    loginState = CreateLoginState([Roles.ADMIN]);
     wrapper = await getWrapper(loginState);
   });
 
@@ -150,3 +171,29 @@ describe('アイテムが更新できる', () => {
     ).toBeFalsy();
   });
 });
+
+describe('ゲストロール_アイテム更新ボタンが非活性', () => {
+  let loginState: TestingPinia;
+  let wrapper: VueWrapper;
+
+  beforeAll(async () => {
+    loginState = CreateLoginState(['Guest']);
+    wrapper = await getWrapper(loginState);
+  });
+
+  it('編集画面に遷移できる', async () => {
+    // Arrange
+    // Act
+    await flushPromises();
+    // Assert
+    expect(wrapper.html()).toContain('カタログアイテム編集');
+  });
+
+  it('更新ボタンが非活性', async () => {
+    // Arrange
+    // Act
+    const editButton = wrapper.findAll('button')[1];
+    // Assert
+    expect(editButton.attributes('disabled')).toBeDefined();
+  });
+});

From 7e9d7de30328ea8b96630b92ea1e559ce0b717b4 Mon Sep 17 00:00:00 2001
From: kentah <158997636+KentaHizume@users.noreply.github.com>
Date: Wed, 8 Jan 2025 15:30:51 +0900
Subject: [PATCH 8/9] =?UTF-8?q?=E3=83=AD=E3=83=BC=E3=83=AB=E3=81=AE?=
 =?UTF-8?q?=E6=96=87=E5=AD=97=E5=88=97=E3=81=AB=E3=81=A4=E3=81=84=E3=81=A6?=
 =?UTF-8?q?=E3=83=90=E3=83=83=E3=82=AF=E3=82=A8=E3=83=B3=E3=83=89=E3=81=A8?=
 =?UTF-8?q?=E5=90=8C=E6=9C=9F=E3=82=92=E5=8F=96=E3=82=8B?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../dressca-frontend/admin/src/shared/constants/roles.ts        | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/samples/web-csr/dressca-frontend/admin/src/shared/constants/roles.ts b/samples/web-csr/dressca-frontend/admin/src/shared/constants/roles.ts
index da4ca61d1..91714ab9e 100644
--- a/samples/web-csr/dressca-frontend/admin/src/shared/constants/roles.ts
+++ b/samples/web-csr/dressca-frontend/admin/src/shared/constants/roles.ts
@@ -2,5 +2,5 @@
  * ユーザーのロールを表す文字列列挙型です。
  */
 export enum Roles {
-  ADMIN = 'Admin',
+  ADMIN = 'ROLE_ADMIN',
 }

From 76ac1d9a9d0f1409ac86e8b6bdd5833719afc004 Mon Sep 17 00:00:00 2001
From: kentah <158997636+KentaHizume@users.noreply.github.com>
Date: Wed, 8 Jan 2025 18:23:52 +0900
Subject: [PATCH 9/9] =?UTF-8?q?=E3=83=86=E3=82=B9=E3=83=88=E3=82=B9?=
 =?UTF-8?q?=E3=82=A4=E3=83=BC=E3=83=88=E3=81=AB=E3=81=A4=E3=81=84=E3=81=A6?=
 =?UTF-8?q?=E3=82=82=E3=83=AD=E3=83=BC=E3=83=AB=E3=81=AE=E5=91=BD=E5=90=8D?=
 =?UTF-8?q?=E3=83=AB=E3=83=BC=E3=83=AB=E3=81=AE=E5=B9=B3=E4=BB=84=E3=82=92?=
 =?UTF-8?q?=E3=81=9D=E3=82=8D=E3=81=88=E3=82=8B=E3=82=88=E3=81=86=E3=81=AB?=
 =?UTF-8?q?=E4=BF=AE=E6=AD=A3?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../admin/src/views/__tests__/ItemsAddView.spec.ts            | 2 +-
 .../admin/src/views/__tests__/ItemsEditView.spec.ts           | 4 ++--
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/samples/web-csr/dressca-frontend/admin/src/views/__tests__/ItemsAddView.spec.ts b/samples/web-csr/dressca-frontend/admin/src/views/__tests__/ItemsAddView.spec.ts
index 8c11e3eac..cf0d7c58e 100644
--- a/samples/web-csr/dressca-frontend/admin/src/views/__tests__/ItemsAddView.spec.ts
+++ b/samples/web-csr/dressca-frontend/admin/src/views/__tests__/ItemsAddView.spec.ts
@@ -60,7 +60,7 @@ describe('ゲストロール_アイテム追加ボタンが非活性', () => {
   let wrapper: VueWrapper;
 
   beforeAll(async () => {
-    loginState = CreateLoginState(['Guest']);
+    loginState = CreateLoginState(['ROLE_GUEST']);
     wrapper = await getWrapper(loginState);
   });
 
diff --git a/samples/web-csr/dressca-frontend/admin/src/views/__tests__/ItemsEditView.spec.ts b/samples/web-csr/dressca-frontend/admin/src/views/__tests__/ItemsEditView.spec.ts
index 4901151c0..e37ccf4b0 100644
--- a/samples/web-csr/dressca-frontend/admin/src/views/__tests__/ItemsEditView.spec.ts
+++ b/samples/web-csr/dressca-frontend/admin/src/views/__tests__/ItemsEditView.spec.ts
@@ -94,7 +94,7 @@ describe('ゲストロール_アイテム削除ボタンが非活性', () => {
   let wrapper: VueWrapper;
 
   beforeAll(async () => {
-    loginState = CreateLoginState(['Guest']);
+    loginState = CreateLoginState(['ROLE_GUEST']);
     wrapper = await getWrapper(loginState);
   });
 
@@ -177,7 +177,7 @@ describe('ゲストロール_アイテム更新ボタンが非活性', () => {
   let wrapper: VueWrapper;
 
   beforeAll(async () => {
-    loginState = CreateLoginState(['Guest']);
+    loginState = CreateLoginState(['ROLE_GUEST']);
     wrapper = await getWrapper(loginState);
   });