✅ test가 통과되도록 수정

- router name 렌더링
padosum · Feb 25, 2023 · b4ca1f5 · b4ca1f5
1 parent 6ef2d57
commit b4ca1f5
Show file tree

Hide file tree

Showing 4 changed files with 30 additions and 19 deletions.
diff --git a/src/App.vue b/src/App.vue
@@ -1,16 +1,16 @@
-<script setup lang="ts">
-import { ref } from 'vue';
-
-const drawer = ref(false);
-</script>
-
 <template>
   <v-app id="inspire">
-    <v-navigation-drawer v-model="drawer"> </v-navigation-drawer>
+    <v-navigation-drawer v-model="drawer">
+      <div class="text-h4 font-weight-black text-center py-3">FlashMD</div>
+      <v-divider></v-divider>
+      <v-list>
+        <v-list-item title="Navigation drawer"></v-list-item>
+      </v-list>
+    </v-navigation-drawer>
 
     <v-app-bar>
       <v-app-bar-nav-icon @click="drawer = !drawer"></v-app-bar-nav-icon>
-      <v-toolbar-title>Application</v-toolbar-title>
+      <v-toolbar-title>{{ pageTitle }}</v-toolbar-title>
     </v-app-bar>
 
     <v-main>
@@ -19,4 +19,13 @@ const drawer = ref(false);
   </v-app>
 </template>
 
+<script setup lang="ts">
+import { ref, computed } from 'vue';
+import { useRoute } from 'vue-router';
+const route = useRoute();
+
+const drawer = ref(true);
+const pageTitle = computed(() => route.name);
+</script>
+
 <style scoped></style>
diff --git a/src/router/index.ts b/src/router/index.ts
@@ -3,7 +3,7 @@ import { createRouter, createWebHistory } from 'vue-router';
 
 const router = createRouter({
   history: createWebHistory(),
-  routes: [{ path: '/', component: DashboardView }],
+  routes: [{ path: '/', component: DashboardView, name: 'Dashboard' }],
 });
 
 export default router;
diff --git a/src/views/DashboardView.vue b/src/views/DashboardView.vue
@@ -1,12 +1,13 @@
 <template>
-  <span data-testid="location-display">Dashboard</span>
-  <div class="d-flex flex-column">
-    <BaseButton text="카드 뭉치 추가하기" @click="importLearnset" />
-    <AddLearnsetModal
-      :learnset-title="mdFile.name"
-      title="카드 뭉치 추가하기"
-      ref="modal"
-    />
+  <div class="d-flex">
+    <div class="pa-10">
+      <BaseButton text="카드 뭉치 추가하기" @click="importLearnset" />
+      <AddLearnsetModal
+        :learnset-title="mdFile.name"
+        title="카드 뭉치 추가하기"
+        ref="modal"
+      />
+    </div>
   </div>
 </template>
 

diff --git a/tests/unit/router.spec.ts b/tests/unit/router.spec.ts
@@ -6,9 +6,10 @@ import vuetify from '@/utils/setupVuetify';
 
 describe('routing', () => {
   it('처음 url에 접속했을 때 dashboard page가 렌더링된다.', async () => {
+    const name = 'Dashboard';
     const router = createRouter({
       history: createWebHistory(),
-      routes: [{ path: '/', component: DashboardView }],
+      routes: [{ path: '/', component: DashboardView, name }],
     });
 
     const { findByText } = render(App, {
@@ -17,6 +18,6 @@ describe('routing', () => {
       },
     });
 
-    expect(await findByText('Dashboard')).toBeInTheDocument();
+    expect(await findByText(name)).toBeInTheDocument();
   });
 });