Skip to content

Commit ecbdbea

Browse files
SiddharthJiyaniSiddharthJiyani
authored
feat: rename RepositoriesCard to RepositoryCard and add cursor pointer (#2447) (#2490)
1 parent f8985c6 commit ecbdbea

File tree

5 files changed

+50
-30
lines changed

5 files changed

+50
-30
lines changed

‎frontend/__tests__/unit/components/CardDetailsPage.test.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -252,7 +252,7 @@ jest.mock('components/RecentReleases', () => ({
252252
),
253253
}))
254254

255-
jest.mock('components/RepositoriesCard', () => ({
255+
jest.mock('components/RepositoryCard', () => ({
256256
__esModule: true,
257257
default: ({
258258
repositories,

‎frontend/__tests__/unit/components/RepositoriesCard.test.tsx‎ renamed to ‎frontend/__tests__/unit/components/RepositoryCard.test.tsx‎

Lines changed: 42 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ import React from 'react'
44
import { render } from 'wrappers/testUtil'
55
import type { Organization } from 'types/organization'
66
import type { RepositoryCardProps } from 'types/project'
7-
import RepositoriesCard from 'components/RepositoriesCard'
7+
import RepositoryCard from 'components/RepositoryCard'
88

99
jest.mock('next/navigation', () => ({
1010
useRouter: jest.fn(),
@@ -40,7 +40,7 @@ jest.mock('components/InfoItem', () => {
4040
const mockPush = jest.fn()
4141
const mockUseRouter = useRouter as jest.Mock
4242

43-
describe('RepositoriesCard', () => {
43+
describe('RepositoryCard', () => {
4444
beforeEach(() => {
4545
jest.clearAllMocks()
4646
mockUseRouter.mockReturnValue({
@@ -74,14 +74,14 @@ describe('RepositoriesCard', () => {
7474
})
7575

7676
it('renders without crashing with empty repositories', () => {
77-
render(<RepositoriesCard repositories={[]} />)
77+
render(<RepositoryCard repositories={[]} />)
7878
expect(screen.queryByTestId('show-more-button')).not.toBeInTheDocument()
7979
})
8080

8181
it('shows first 4 repositories initially when there are more than 4', () => {
8282
const repositories = Array.from({ length: 6 }, (_, i) => createMockRepository(i))
8383

84-
render(<RepositoriesCard repositories={repositories} />)
84+
render(<RepositoryCard repositories={repositories} />)
8585

8686
expect(screen.getByText('Repository 0')).toBeInTheDocument()
8787
expect(screen.getByText('Repository 3')).toBeInTheDocument()
@@ -92,7 +92,7 @@ describe('RepositoriesCard', () => {
9292
it('shows all repositories when there are 4 or fewer', () => {
9393
const repositories = Array.from({ length: 3 }, (_, i) => createMockRepository(i))
9494

95-
render(<RepositoriesCard repositories={repositories} />)
95+
render(<RepositoryCard repositories={repositories} />)
9696

9797
expect(screen.getByText('Repository 0')).toBeInTheDocument()
9898
expect(screen.getByText('Repository 1')).toBeInTheDocument()
@@ -102,23 +102,23 @@ describe('RepositoriesCard', () => {
102102
it('displays ShowMoreButton when there are more than 4 repositories', () => {
103103
const repositories = Array.from({ length: 6 }, (_, i) => createMockRepository(i))
104104

105-
render(<RepositoriesCard repositories={repositories} />)
105+
render(<RepositoryCard repositories={repositories} />)
106106

107107
expect(screen.getByTestId('show-more-button')).toBeInTheDocument()
108108
})
109109

110110
it('does not display ShowMoreButton when there are 4 or fewer repositories', () => {
111111
const repositories = Array.from({ length: 4 }, (_, i) => createMockRepository(i))
112112

113-
render(<RepositoriesCard repositories={repositories} />)
113+
render(<RepositoryCard repositories={repositories} />)
114114

115115
expect(screen.queryByTestId('show-more-button')).not.toBeInTheDocument()
116116
})
117117

118118
it('toggles between showing 4 and all repositories when clicked', () => {
119119
const repositories = Array.from({ length: 6 }, (_, i) => createMockRepository(i))
120120

121-
render(<RepositoriesCard repositories={repositories} />)
121+
render(<RepositoryCard repositories={repositories} />)
122122

123123
// Initially shows first 4
124124
expect(screen.getByText('Repository 0')).toBeInTheDocument()
@@ -142,7 +142,7 @@ describe('RepositoriesCard', () => {
142142
it('renders repository items with correct information', () => {
143143
const repositories = [createMockRepository(0)]
144144

145-
render(<RepositoriesCard repositories={repositories} />)
145+
render(<RepositoryCard repositories={repositories} />)
146146

147147
expect(screen.getByText('Repository 0')).toBeInTheDocument()
148148
expect(screen.getByTestId('info-item-Star')).toBeInTheDocument()
@@ -154,7 +154,7 @@ describe('RepositoriesCard', () => {
154154
it('navigates to correct URL when repository item is clicked', () => {
155155
const repositories = [createMockRepository(0)]
156156

157-
render(<RepositoriesCard repositories={repositories} />)
157+
render(<RepositoryCard repositories={repositories} />)
158158

159159
const repositoryButton = screen.getByText('Repository 0')
160160
fireEvent.click(repositoryButton)
@@ -174,7 +174,27 @@ describe('RepositoriesCard', () => {
174174
url: 'https://github.com/test/repo',
175175
}
176176

177-
expect(() => render(<RepositoriesCard repositories={[repository]} />)).not.toThrow()
177+
expect(() => render(<RepositoryCard repositories={[repository]} />)).not.toThrow()
178+
})
179+
180+
it('repository title button has cursor-pointer class', () => {
181+
const repositories = [createMockRepository(0)]
182+
183+
const { container } = render(<RepositoryCard repositories={repositories} />)
184+
185+
const button = container.querySelector('button.cursor-pointer')
186+
expect(button).toBeInTheDocument()
187+
expect(button).toHaveClass('cursor-pointer')
188+
})
189+
190+
it('repository title is rendered as a button element', () => {
191+
const repositories = [createMockRepository(0)]
192+
193+
render(<RepositoryCard repositories={repositories} />)
194+
195+
const repositoryButton = screen.getByText('Repository 0').closest('button')
196+
expect(repositoryButton).toBeInTheDocument()
197+
expect(repositoryButton?.tagName).toBe('BUTTON')
178198
})
179199

180200
describe('Archived Badge on Repository Cards', () => {
@@ -184,7 +204,7 @@ describe('RepositoriesCard', () => {
184204
isArchived: true,
185205
}
186206

187-
render(<RepositoriesCard repositories={[archivedRepo]} />)
207+
render(<RepositoryCard repositories={[archivedRepo]} />)
188208

189209
expect(screen.getByText('Archived')).toBeInTheDocument()
190210
})
@@ -195,7 +215,7 @@ describe('RepositoriesCard', () => {
195215
isArchived: false,
196216
}
197217

198-
render(<RepositoriesCard repositories={[activeRepo]} />)
218+
render(<RepositoryCard repositories={[activeRepo]} />)
199219

200220
expect(screen.queryByText('Archived')).not.toBeInTheDocument()
201221
})
@@ -205,7 +225,7 @@ describe('RepositoriesCard', () => {
205225
...createMockRepository(0),
206226
}
207227

208-
render(<RepositoriesCard repositories={[repo]} />)
228+
render(<RepositoryCard repositories={[repo]} />)
209229

210230
expect(screen.queryByText('Archived')).not.toBeInTheDocument()
211231
})
@@ -218,7 +238,7 @@ describe('RepositoriesCard', () => {
218238
{ ...createMockRepository(3) },
219239
]
220240

221-
render(<RepositoriesCard repositories={repositories} />)
241+
render(<RepositoryCard repositories={repositories} />)
222242

223243
const badges = screen.getAllByText('Archived')
224244
expect(badges).toHaveLength(2)
@@ -230,7 +250,7 @@ describe('RepositoriesCard', () => {
230250
isArchived: true,
231251
}
232252

233-
render(<RepositoriesCard repositories={[archivedRepo]} />)
253+
render(<RepositoryCard repositories={[archivedRepo]} />)
234254

235255
const badge = screen.getByText('Archived')
236256
expect(badge).toHaveClass('px-2', 'py-1', 'text-xs')
@@ -242,7 +262,7 @@ describe('RepositoriesCard', () => {
242262
isArchived: true,
243263
}
244264

245-
render(<RepositoriesCard repositories={[archivedRepo]} />)
265+
render(<RepositoryCard repositories={[archivedRepo]} />)
246266

247267
const badge = screen.getByText('Archived')
248268
const icon = badge.querySelector('svg')
@@ -255,7 +275,7 @@ describe('RepositoriesCard', () => {
255275
isArchived: true,
256276
}
257277

258-
render(<RepositoriesCard repositories={[archivedRepo]} />)
278+
render(<RepositoryCard repositories={[archivedRepo]} />)
259279

260280
expect(screen.getByText('Repository 0')).toBeInTheDocument()
261281
expect(screen.getByTestId('info-item-Star')).toBeInTheDocument()
@@ -269,7 +289,7 @@ describe('RepositoriesCard', () => {
269289
isArchived: true,
270290
}
271291

272-
const { container } = render(<RepositoriesCard repositories={[archivedRepo]} />)
292+
const { container } = render(<RepositoryCard repositories={[archivedRepo]} />)
273293

274294
const headerContainer = container.querySelector('.flex.items-start.justify-between')
275295
expect(headerContainer).toBeInTheDocument()
@@ -281,7 +301,7 @@ describe('RepositoriesCard', () => {
281301
isArchived: null,
282302
}
283303

284-
render(<RepositoriesCard repositories={[repo]} />)
304+
render(<RepositoryCard repositories={[repo]} />)
285305

286306
expect(screen.queryByText('Archived')).not.toBeInTheDocument()
287307
})
@@ -292,7 +312,7 @@ describe('RepositoriesCard', () => {
292312
isArchived: i % 2 === 0,
293313
}))
294314

295-
render(<RepositoriesCard repositories={repositories} />)
315+
render(<RepositoryCard repositories={repositories} />)
296316

297317
expect(screen.getAllByText('Archived')).toHaveLength(2)
298318

@@ -311,7 +331,7 @@ describe('RepositoriesCard', () => {
311331
isArchived: true,
312332
}
313333

314-
render(<RepositoriesCard repositories={[archivedRepo]} />)
334+
render(<RepositoryCard repositories={[archivedRepo]} />)
315335

316336
const repositoryButton = screen.getByText('Repository 0')
317337
fireEvent.click(repositoryButton)

‎frontend/src/components/CardDetailsPage.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -29,7 +29,7 @@ import ProgramActions from 'components/ProgramActions'
2929
import RecentIssues from 'components/RecentIssues'
3030
import RecentPullRequests from 'components/RecentPullRequests'
3131
import RecentReleases from 'components/RecentReleases'
32-
import RepositoriesCard from 'components/RepositoriesCard'
32+
import RepositoryCard from 'components/RepositoryCard'
3333
import SecondaryCard from 'components/SecondaryCard'
3434
import SponsorCard from 'components/SponsorCard'
3535
import StatusBadge from 'components/StatusBadge'
@@ -279,7 +279,7 @@ const DetailsCard = ({
279279
{(type === 'project' || type === 'user' || type === 'organization') &&
280280
repositories.length > 0 && (
281281
<SecondaryCard icon={faFolderOpen} title={<AnchorTitle title="Repositories" />}>
282-
<RepositoriesCard maxInitialDisplay={4} repositories={repositories} />
282+
<RepositoryCard maxInitialDisplay={4} repositories={repositories} />
283283
</SecondaryCard>
284284
)}
285285
{type === 'program' && modules.length > 0 && (

‎frontend/src/components/RepositoriesCard.tsx‎ renamed to ‎frontend/src/components/RepositoryCard.tsx‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -2,13 +2,13 @@ import { faCodeFork, faStar, faUsers, faExclamationCircle } from '@fortawesome/f
22
import { useRouter } from 'next/navigation'
33
import type React from 'react'
44
import { useState } from 'react'
5-
import type { RepositoriesCardProps, RepositoryCardProps } from 'types/project'
5+
import type { RepositoryCardListProps, RepositoryCardProps } from 'types/project'
66
import InfoItem from 'components/InfoItem'
77
import ShowMoreButton from 'components/ShowMoreButton'
88
import StatusBadge from 'components/StatusBadge'
99
import { TruncatedText } from 'components/TruncatedText'
1010

11-
const RepositoriesCard: React.FC<RepositoriesCardProps> = ({
11+
const RepositoryCard: React.FC<RepositoryCardListProps> = ({
1212
maxInitialDisplay = 4,
1313
repositories,
1414
}) => {
@@ -42,7 +42,7 @@ const RepositoryItem = ({ details }: { details: RepositoryCardProps }) => {
4242
<div className="flex items-start justify-between gap-2">
4343
<button
4444
onClick={handleClick}
45-
className="min-w-0 flex-1 text-start font-semibold text-blue-400 hover:underline"
45+
className="min-w-0 flex-1 cursor-pointer text-start font-semibold text-blue-400 hover:underline"
4646
>
4747
<TruncatedText text={details?.name} />
4848
</button>
@@ -73,4 +73,4 @@ const RepositoryItem = ({ details }: { details: RepositoryCardProps }) => {
7373
)
7474
}
7575

76-
export default RepositoriesCard
76+
export default RepositoryCard

‎frontend/src/types/project.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -46,7 +46,7 @@ export type Project = {
4646
recentMilestones?: Milestone[]
4747
}
4848

49-
export type RepositoriesCardProps = {
49+
export type RepositoryCardListProps = {
5050
maxInitialDisplay?: number
5151
repositories?: RepositoryCardProps[]
5252
}

0 commit comments

Comments
 (0)