forked from
npmx.dev/npmx.dev
[READ-ONLY]
a fast, modern browser for the npm registry
1import { mockNuxtImport, mountSuspended, registerEndpoint } from '@nuxt/test-utils/runtime'
2import { describe, expect, it, vi, beforeEach } from 'vitest'
3
4const { mockUseResolvedVersion, mockUsePackageDownloads, mockUsePackage, mockUseRepoMeta } =
5 vi.hoisted(() => ({
6 mockUseResolvedVersion: vi.fn(),
7 mockUsePackageDownloads: vi.fn(),
8 mockUsePackage: vi.fn(),
9 mockUseRepoMeta: vi.fn(),
10 }))
11
12mockNuxtImport('useResolvedVersion', () => mockUseResolvedVersion)
13mockNuxtImport('usePackageDownloads', () => mockUsePackageDownloads)
14mockNuxtImport('usePackage', () => mockUsePackage)
15mockNuxtImport('useRepoMeta', () => mockUseRepoMeta)
16mockNuxtImport('normalizeGitUrl', () => () => 'https://github.com/test/repo')
17
18import OgImagePackage from '~/components/OgImage/Package.vue'
19
20describe('OgImagePackage', () => {
21 const baseProps = {
22 name: 'test-package',
23 version: '1.0.0',
24 }
25
26 function setupMocks(
27 overrides: {
28 stars?: number
29 totalLikes?: number
30 downloads?: number | null
31 license?: string | null
32 packageName?: string
33 } = {},
34 ) {
35 const {
36 stars = 0,
37 totalLikes = 0,
38 downloads = 1000,
39 license = 'MIT',
40 packageName = 'test-package',
41 } = overrides
42
43 mockUseResolvedVersion.mockReturnValue({
44 data: ref('1.0.0'),
45 status: ref('success'),
46 error: ref(null),
47 })
48
49 mockUsePackageDownloads.mockReturnValue({
50 data: downloads != null ? ref({ downloads }) : ref(null),
51 refresh: vi.fn().mockResolvedValue(undefined),
52 })
53
54 mockUsePackage.mockReturnValue({
55 data: ref({
56 name: packageName,
57 license,
58 requestedVersion: {
59 repository: { url: 'git+https://github.com/test/repo.git' },
60 },
61 }),
62 refresh: vi.fn().mockResolvedValue(undefined),
63 })
64
65 mockUseRepoMeta.mockReturnValue({
66 stars: computed(() => stars),
67 refresh: vi.fn().mockResolvedValue(undefined),
68 })
69
70 // Mock the likes API endpoint used by useFetch
71 registerEndpoint(`/api/social/likes/${packageName}`, () => ({
72 totalLikes,
73 userHasLiked: false,
74 }))
75 }
76
77 beforeEach(() => {
78 mockUseResolvedVersion.mockReset()
79 mockUsePackageDownloads.mockReset()
80 mockUsePackage.mockReset()
81 mockUseRepoMeta.mockReset()
82 })
83
84 it('renders the package name and version', async () => {
85 setupMocks({ packageName: 'vue' })
86
87 const component = await mountSuspended(OgImagePackage, {
88 props: { ...baseProps, name: 'vue' },
89 })
90
91 expect(component.text()).toContain('vue')
92 expect(component.text()).toContain('1.0.0')
93 })
94
95 describe('license', () => {
96 it('renders the license when present', async () => {
97 setupMocks({ license: 'MIT' })
98
99 const component = await mountSuspended(OgImagePackage, {
100 props: baseProps,
101 })
102
103 expect(component.text()).toContain('MIT')
104 })
105
106 it('hides the license section when license is missing', async () => {
107 setupMocks({ license: null })
108
109 const component = await mountSuspended(OgImagePackage, {
110 props: baseProps,
111 })
112
113 expect(component.find('[data-testid="license"]').exists()).toBe(false)
114 })
115 })
116
117 describe('stars', () => {
118 it('hides stars section when count is 0', async () => {
119 setupMocks({ stars: 0 })
120
121 const component = await mountSuspended(OgImagePackage, {
122 props: baseProps,
123 })
124
125 expect(component.find('[data-testid="stars"]').exists()).toBe(false)
126 })
127
128 it('shows formatted stars when count is positive', async () => {
129 setupMocks({ stars: 45200 })
130
131 const component = await mountSuspended(OgImagePackage, {
132 props: baseProps,
133 })
134
135 expect(component.text()).toContain('45.2K')
136 })
137 })
138
139 describe('likes', () => {
140 it('hides likes section when totalLikes is 0', async () => {
141 setupMocks({ totalLikes: 0 })
142
143 const component = await mountSuspended(OgImagePackage, {
144 props: baseProps,
145 })
146
147 expect(component.find('[data-testid="likes"]').exists()).toBe(false)
148 })
149
150 it('shows likes section when totalLikes is positive', async () => {
151 setupMocks({ totalLikes: 42 })
152
153 const component = await mountSuspended(OgImagePackage, {
154 props: baseProps,
155 })
156
157 expect(component.text()).toContain('42')
158 })
159 })
160})