test: add component tests for OgImagePackage

Author: serhalp

app/components/OgImage/Package.vue

@@ -147,7 +147,7 @@ try {
         </span>
 
         <!-- License (if any) -->
-        <span v-if="pkg?.license" class="flex items-center gap-2">
+        <span v-if="pkg?.license" class="flex items-center gap-2" data-testid="license">
           <svg
             viewBox="0 0 32 32"
             :fill="primaryColor"
@@ -172,7 +172,7 @@ try {
         </span>
 
         <!-- Stars (if any) -->
-        <span v-if="formattedStars" class="flex items-center gap-2">
+        <span v-if="formattedStars" class="flex items-center gap-2" data-testid="stars">
           <svg
             xmlns="http://www.w3.org/2000/svg"
             viewBox="0 0 32 32"
@@ -191,7 +191,7 @@ try {
         </span>
 
         <!-- Likes (if any) -->
-        <span v-if="likes.totalLikes > 0" class="flex items-center gap-2">
+        <span v-if="likes.totalLikes > 0" class="flex items-center gap-2" data-testid="likes">
           <svg
             width="32"
             height="32"

test/nuxt/components/OgImagePackage.spec.ts

@@ -0,0 +1,160 @@
+import { mockNuxtImport, mountSuspended, registerEndpoint } from '@nuxt/test-utils/runtime'
+import { describe, expect, it, vi, beforeEach } from 'vitest'
+
+const { mockUseResolvedVersion, mockUsePackageDownloads, mockUsePackage, mockUseRepoMeta } =
+  vi.hoisted(() => ({
+    mockUseResolvedVersion: vi.fn(),
+    mockUsePackageDownloads: vi.fn(),
+    mockUsePackage: vi.fn(),
+    mockUseRepoMeta: vi.fn(),
+  }))
+
+mockNuxtImport('useResolvedVersion', () => mockUseResolvedVersion)
+mockNuxtImport('usePackageDownloads', () => mockUsePackageDownloads)
+mockNuxtImport('usePackage', () => mockUsePackage)
+mockNuxtImport('useRepoMeta', () => mockUseRepoMeta)
+mockNuxtImport('normalizeGitUrl', () => () => 'https://github.com/test/repo')
+
+import OgImagePackage from '~/components/OgImage/Package.vue'
+
+describe('OgImagePackage', () => {
+  const baseProps = {
+    name: 'test-package',
+    version: '1.0.0',
+  }
+
+  function setupMocks(
+    overrides: {
+      stars?: number
+      totalLikes?: number
+      downloads?: number | null
+      license?: string | null
+      packageName?: string
+    } = {},
+  ) {
+    const {
+      stars = 0,
+      totalLikes = 0,
+      downloads = 1000,
+      license = 'MIT',
+      packageName = 'test-package',
+    } = overrides
+
+    mockUseResolvedVersion.mockReturnValue({
+      data: ref('1.0.0'),
+      status: ref('success'),
+      error: ref(null),
+    })
+
+    mockUsePackageDownloads.mockReturnValue({
+      data: downloads != null ? ref({ downloads }) : ref(null),
+      refresh: vi.fn().mockResolvedValue(undefined),
+    })
+
+    mockUsePackage.mockReturnValue({
+      data: ref({
+        name: packageName,
+        license,
+        requestedVersion: {
+          repository: { url: 'git+https://github.com/test/repo.git' },
+        },
+      }),
+      refresh: vi.fn().mockResolvedValue(undefined),
+    })
+
+    mockUseRepoMeta.mockReturnValue({
+      stars: computed(() => stars),
+      refresh: vi.fn().mockResolvedValue(undefined),
+    })
+
+    // Mock the likes API endpoint used by useFetch
+    registerEndpoint(`/api/social/likes/${packageName}`, () => ({
+      totalLikes,
+      userHasLiked: false,
+    }))
+  }
+
+  beforeEach(() => {
+    mockUseResolvedVersion.mockReset()
+    mockUsePackageDownloads.mockReset()
+    mockUsePackage.mockReset()
+    mockUseRepoMeta.mockReset()
+  })
+
+  it('renders the package name and version', async () => {
+    setupMocks({ packageName: 'vue' })
+
+    const component = await mountSuspended(OgImagePackage, {
+      props: { ...baseProps, name: 'vue' },
+    })
+
+    expect(component.text()).toContain('vue')
+    expect(component.text()).toContain('1.0.0')
+  })
+
+  describe('license', () => {
+    it('renders the license when present', async () => {
+      setupMocks({ license: 'MIT' })
+
+      const component = await mountSuspended(OgImagePackage, {
+        props: baseProps,
+      })
+
+      expect(component.text()).toContain('MIT')
+    })
+
+    it('hides the license section when license is missing', async () => {
+      setupMocks({ license: null })
+
+      const component = await mountSuspended(OgImagePackage, {
+        props: baseProps,
+      })
+
+      expect(component.find('[data-testid="license"]').exists()).toBe(false)
+    })
+  })
+
+  describe('stars', () => {
+    it('hides stars section when count is 0', async () => {
+      setupMocks({ stars: 0 })
+
+      const component = await mountSuspended(OgImagePackage, {
+        props: baseProps,
+      })
+
+      expect(component.find('[data-testid="stars"]').exists()).toBe(false)
+    })
+
+    it('shows formatted stars when count is positive', async () => {
+      setupMocks({ stars: 45200 })
+
+      const component = await mountSuspended(OgImagePackage, {
+        props: baseProps,
+      })
+
+      expect(component.text()).toContain('45.2K')
+    })
+  })
+
+  describe('likes', () => {
+    it('hides likes section when totalLikes is 0', async () => {
+      setupMocks({ totalLikes: 0 })
+
+      const component = await mountSuspended(OgImagePackage, {
+        props: baseProps,
+      })
+
+      expect(component.find('[data-testid="likes"]').exists()).toBe(false)
+    })
+
+    it('shows likes section when totalLikes is positive', async () => {
+      setupMocks({ totalLikes: 42 })
+
+      const component = await mountSuspended(OgImagePackage, {
+        props: baseProps,
+      })
+
+      expect(component.text()).toContain('42')
+    })
+  })
+})