From 40ad766d6261cbd7781e29813e4a80a782ff2e09 Mon Sep 17 00:00:00 2001
From: kjh2064 <kjh2064@gmail.com>
Date: Sat, 25 Jul 2026 11:30:59 +0900
Subject: [PATCH] test(wbs-ux): add Vitest unit test suite for Vue templates
 rendering validation

---
 src/frontend/package.json                     |  7 ++++-
 .../__tests__/TemplateRender.spec.ts          | 31 +++++++++++++++++++
 src/frontend/vite.config.ts                   |  5 +++
 3 files changed, 42 insertions(+), 1 deletion(-)
 create mode 100644 src/frontend/src/views/templates/__tests__/TemplateRender.spec.ts

diff --git a/src/frontend/package.json b/src/frontend/package.json
index d96b8eca..698feff8 100644
--- a/src/frontend/package.json
+++ b/src/frontend/package.json
@@ -6,7 +6,8 @@
   "scripts": {
     "dev": "vite",
     "build": "vue-tsc -b && vite build",
-    "preview": "vite preview"
+    "preview": "vite preview",
+    "test": "vitest run"
   },
   "dependencies": {
     "@primevue/themes": "^4.3.1",
@@ -21,9 +22,13 @@
   "devDependencies": {
     "@types/node": "^24.13.2",
     "@vitejs/plugin-vue": "^6.0.7",
+    "@vue/test-utils": "^2.4.6",
     "@vue/tsconfig": "^0.9.1",
+    "jsdom": "^26.0.0",
     "typescript": "~6.0.2",
     "vite": "^8.1.1",
+    "vitest": "^3.0.4",
     "vue-tsc": "^3.3.5"
   }
 }
+
diff --git a/src/frontend/src/views/templates/__tests__/TemplateRender.spec.ts b/src/frontend/src/views/templates/__tests__/TemplateRender.spec.ts
new file mode 100644
index 00000000..8ba057f6
--- /dev/null
+++ b/src/frontend/src/views/templates/__tests__/TemplateRender.spec.ts
@@ -0,0 +1,31 @@
+import { describe, it, expect } from 'vitest';
+import { mount } from '@vue/test-utils';
+import TemplateGalleryView from '../TemplateGalleryView.vue';
+import RealOlapExportLayout from '../RealOlapExportLayout.vue';
+
+describe('Prototype Template UI Rendering Tests', () => {
+  it('TemplateGalleryView should render all 9 template options', () => {
+    const wrapper = mount(TemplateGalleryView, {
+      global: {
+        stubs: {
+          'router-link': true
+        }
+      }
+    });
+
+    // 갤러리 타이틀 렌더링 검증
+    expect(wrapper.text()).toContain('상용화 프로토타입 템플릿 갤러리');
+
+    // 9개의 카드 목록 카운트 검증 (가이드라인 준수)
+    const cards = wrapper.findAll('router-link-stub');
+    expect(cards.length).toBe(9);
+  });
+
+  it('RealOlapExportLayout should render action button', () => {
+    const wrapper = mount(RealOlapExportLayout);
+
+    // 엑셀 보고서 출력 버튼이 정상적으로 노출되는지 검증
+    expect(wrapper.find('button').text()).toContain('엑셀 보고서 출력');
+    expect(wrapper.text()).toContain('다차원 팩터 출력 리포트');
+  });
+});
diff --git a/src/frontend/vite.config.ts b/src/frontend/vite.config.ts
index 80fbb3b9..fa2b040c 100644
--- a/src/frontend/vite.config.ts
+++ b/src/frontend/vite.config.ts
@@ -4,6 +4,10 @@ import vue from '@vitejs/plugin-vue'
 // https://vite.dev/config/
 export default defineConfig({
   plugins: [vue()],
+  test: {
+    environment: 'jsdom',
+    globals: true
+  },
   server: {
     port: 5173,
     proxy: {
@@ -15,3 +19,4 @@ export default defineConfig({
     }
   }
 })
+