WIP: add pr changes to view leaderboards

- update getLeaderboards -> listLeaderboards
- make default leaderboard returns use info: ''
- use correct components in some tests

components/blocks/Landing/Landing.test.ts

@@ -6,7 +6,7 @@ import LandingLeaderboards from './LandingLeaderboards.vue'
 const mockSuccessGetLeaderboards = vi.fn(() => Promise.resolve({ ok: true }))
 vi.mock('lib/api/Leaderboards', () => ({
   Leaderboards: function Leaderboards() {
-    this.getLeaderboards = mockSuccessGetLeaderboards
+    this.listLeaderboards = mockSuccessGetLeaderboards
   },
 }))
 

components/blocks/Landing/LandingLeaderboards.test.ts

@@ -1,5 +1,5 @@
 import { mountSuspended } from '@nuxt/test-utils/runtime'
-import Landing from './LandingLeaderboards.vue'
+import LandingLeaderboards from './LandingLeaderboards.vue'
 import type { LeaderboardViewModel } from '~/lib/api/data-contracts'
 
 const games: LeaderboardViewModel[] = [
@@ -36,12 +36,8 @@ const games: LeaderboardViewModel[] = [
 ]
 
 describe('LandingLeaderboards Component', () => {
-  afterEach(() => {
-    vi.restoreAllMocks()
-  })
-
   it('should render without crashing', async () => {
-    const wrapper = await mountSuspended(Landing, {
+    const wrapper = await mountSuspended(LandingLeaderboards, {
       props: {
         leaderboards: games,
       },

composables/api/useGetLeaderboardBySlug/index.ts

@@ -18,7 +18,7 @@ export default async function useGetLeaderboardBySlug(
     id: -1,
     name: '',
     slug: '',
-    info: null,
+    info: '',
     createdAt: '',
     updatedAt: null,
     deletedAt: null,

composables/api/useGetLeaderboards/index.ts

@@ -18,7 +18,7 @@ export default async function useGetLeaderboards(
       id: -1,
       name: '',
       slug: '',
-      info: null,
+      info: '',
       createdAt: '',
       updatedAt: null,
       deletedAt: null,
@@ -30,7 +30,7 @@ export default async function useGetLeaderboards(
   })
 
   return await useApi<LeaderboardViewModel[]>(
-    async () => await leaderboardClient.getLeaderboards({}),
+    async () => await leaderboardClient.listLeaderboards({}),
     {
       onError,
       onOkay,

composables/api/useGetLeaderboards/useGetLeaderboards.test.ts

@@ -8,7 +8,7 @@ describe('useGetLeaderboard', () => {
     it('creates a GET request to fetch the a list of leaderboards', async () => {
       vi.mock('lib/api/Leaderboards', () => ({
         Leaderboards: function Leaderboards() {
-          this.getLeaderboards = mockSuccessGetLeaderboards
+          this.listLeaderboards = mockSuccessGetLeaderboards
         },
       }))
 

pages/game/[slug].test.ts

@@ -0,0 +1,51 @@
+import { mountSuspended } from '@nuxt/test-utils/runtime'
+import useGetLeaderboardBySlug from '~/composables/api/useGetLeaderboardBySlug/index'
+import gamePage from 'pages/game/[slug].vue'
+
+import type { LeaderboardViewModel } from '~/lib/api/data-contracts'
+
+const leaderboard: LeaderboardViewModel = {
+  id: 1,
+  name: 'Getting Over It With Bennet Foddy',
+  slug: 'slug-2',
+  info: '',
+  createdAt: '2024-11-02T22:11:08+0000',
+  updatedAt: '2024-11-02T22:11:08+0000',
+  deletedAt: null,
+  categories: [],
+}
+
+vi.mock('composables/api/useGetLeaderboardBySlug')
+
+describe('/game/:slug', () => {
+  it('should render without crashing with a valid leaderboard', async () => {
+    vi.mocked(useGetLeaderboardBySlug).mockResolvedValue({
+      error: null,
+      loading: false,
+      data: leaderboard,
+      errors: null,
+    })
+    const wrapper = await mountSuspended(gamePage, {
+      route: '/game/validslug',
+    })
+
+    expect(wrapper.text()).toContain(leaderboard.name)
+    expect(wrapper.isVisible()).toBe(true)
+  })
+
+  it('should render 404 if leaderboard status is 404', async () => {
+    vi.mocked(useGetLeaderboardBySlug).mockResolvedValue({
+      error: { status: 404 },
+      loading: false,
+      data: leaderboard,
+      errors: null,
+    })
+
+    // this correctly does not render the component when error status is 404
+    const wrapper = await mountSuspended(gamePage, {
+      route: '/game/invalidslug',
+    })
+    expect(wrapper.text()).not.toContain(leaderboard.name)
+    // Ideally we'd check for the error
+  })
+})

pages/game/[slug].vue

@@ -5,9 +5,10 @@ import { useGetLeaderboardBySlug } from '~/composables/api'
 import LeaderboardInfo from '~/components/blocks/LeaderboardInfo/LeaderboardInfo.vue'
 const route = useRoute()
 const leaderboardSlug = route.params.slug as string
+
 const leaderboardDetail = await useGetLeaderboardBySlug(leaderboardSlug)
 
-if (leaderboardDetail?.error?.status == 404) {
+if (leaderboardDetail?.error?.status === 404) {
   throw createError({
     statusCode: 404,
     statusMessage: 'Page Not Found',
@@ -18,7 +19,7 @@ if (leaderboardDetail?.error?.status == 404) {
 
 <template>
   <div>
-    <Loader v-if="leaderboardDetail.loading"></Loader>
+    <Loader v-if="leaderboardDetail?.loading"></Loader>
     <LeaderboardInfo v-else :leaderboard="leaderboardDetail?.data!" />
   </div>
 </template>