fix: test components

leaderboardsgg · Nov 13, 2024 · 35018ba · 35018ba
1 parent dff99c4
commit 35018ba
Show file tree

Hide file tree

Showing 4 changed files with 76 additions and 18 deletions.
diff --git a/components/blocks/Landing/LandingLeaderboards.test.ts b/components/blocks/Landing/LandingLeaderboards.test.ts
@@ -7,7 +7,7 @@ const games: LeaderboardViewModel[] = [
     id: 1,
     name: 'Getting Over It With Bennet Foddy',
     slug: 'slug-2',
-    info: null,
+    info: '',
     createdAt: '2024-11-02T22:11:08+0000',
     updatedAt: '2024-11-02T22:11:08+0000',
     deletedAt: null,
@@ -17,7 +17,7 @@ const games: LeaderboardViewModel[] = [
     id: 2,
     name: 'Getting Over It With Bennet Foddy',
     slug: 'slug-2',
-    info: null,
+    info: '',
     createdAt: '2024-11-02T22:11:08+0000',
     updatedAt: '2024-11-02T22:11:08+0000',
     deletedAt: null,
@@ -27,7 +27,7 @@ const games: LeaderboardViewModel[] = [
     id: 3,
     name: 'Getting Over It With Bennet Foddy',
     slug: 'slug-3',
-    info: null,
+    info: '',
     createdAt: '2024-11-02T22:11:08+0000',
     updatedAt: '2024-11-02T22:11:08+0000',
     deletedAt: null,

diff --git a/components/blocks/LeaderboardInfo/LeaderboardInfo.test.ts b/components/blocks/LeaderboardInfo/LeaderboardInfo.test.ts
@@ -0,0 +1,30 @@
+import { mountSuspended } from '@nuxt/test-utils/runtime'
+import LeaderboardInfo from './LeaderboardInfo.vue'
+import type { LeaderboardViewModel } from '~/lib/api/data-contracts'
+
+const game: LeaderboardViewModel = {
+  id: 1,
+  name: 'Getting Over It With Bennet Foddy',
+  slug: 'slug-2',
+  info: 'Something special',
+  createdAt: '2024-11-02T22:11:08+0000',
+  updatedAt: '2024-11-02T22:11:08+0000',
+  deletedAt: null,
+  categories: [],
+}
+
+describe('LeaderboardInfo Component', () => {
+  it('should render without crashing', async () => {
+    const wrapper = await mountSuspended(LeaderboardInfo, {
+      props: {
+        leaderboard: game,
+      },
+    })
+
+    expect(wrapper.isVisible()).toBe(true)
+
+    const header = wrapper.get('div#leaderboard-show-header h1')
+
+    expect(header.text()).toContain(game.name)
+  })
+})
diff --git a/components/blocks/LeaderboardInfo/LeaderboardInfoAccordion.test.ts b/components/blocks/LeaderboardInfo/LeaderboardInfoAccordion.test.ts
@@ -0,0 +1,25 @@
+import { mountSuspended } from '@nuxt/test-utils/runtime'
+import LeaderboardInfoAccordion from './LeaderboardInfoAccordion.vue'
+
+const info = 'Some Special Info'
+
+describe('LeaderboardInfoAccordion Component', () => {
+  it('should render without crashing', async () => {
+    const wrapper = await mountSuspended(LeaderboardInfoAccordion, {
+      props: {
+        info: info,
+      },
+    })
+
+    expect(wrapper.isVisible()).toBe(true)
+
+    // click the info button to open the info pane
+    const button = wrapper.get('button#leaderboard-info-button')
+    button.trigger('click')
+    await wrapper.vm.$nextTick()
+
+    const infoText = wrapper.get('p#leaderboard-info-text')
+
+    expect(infoText.text()).toContain(info)
+  })
+})
diff --git a/components/blocks/LeaderboardInfo/LeaderboardInfoAccordion.vue b/components/blocks/LeaderboardInfo/LeaderboardInfoAccordion.vue
@@ -1,5 +1,6 @@
 <script lang="ts" setup>
 import { ref } from 'vue'
+
 interface LeaderboardInfoAccordionProps {
   info: string
 }
@@ -12,19 +13,21 @@ defineProps<LeaderboardInfoAccordionProps>()
 </script>
 
 <template>
-  <button
-    id="leaderboard-info"
-    class="hover:cursor-pointer"
-    @click="toggle"
-    @keypress="toggle"
-  >
-    <span v-if="enabled" class="mr-2">▼</span>
-    <span v-else class="mr-2">▶</span>
-    <span class="text-blue-500 underline">
-      {{ $t('info') }}
-    </span>
-  </button>
-  <p v-if="enabled" class="mt-2 bg-white p-4">
-    {{ info }}
-  </p>
+  <div>
+    <button
+      id="leaderboard-info-button"
+      class="hover:cursor-pointer"
+      @click="toggle"
+      @keypress="toggle"
+    >
+      <span v-if="enabled" class="mr-2">▼</span>
+      <span v-else class="mr-2">▶</span>
+      <span class="text-blue-500 underline">
+        {{ $t('info') }}
+      </span>
+    </button>
+    <p v-if="enabled" id="leaderboard-info-text" class="mt-2 bg-white p-4">
+      {{ info }}
+    </p>
+  </div>
 </template>