Skip to content

Commit

Permalink
Add unit tests for new download functionality in UploadsCard component
Browse files Browse the repository at this point in the history
  • Loading branch information
sentry-autofix[bot] authored Dec 11, 2024
1 parent 0899f21 commit 69c4400
Showing 1 changed file with 111 additions and 0 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -1004,4 +1004,115 @@ describe('UploadsCard', () => {
expect(travisUploadCheckboxTwo).not.toBeChecked()
})
})

describe('Download functionality', () => {
beforeEach(() => {
setup({
uploadsProviderList: ['travis'],
uploadsOverview: 'uploads overview',
groupedUploads: {
travis: [
{
id: 1,
name: 'travis-upload-1',
state: 'PROCESSED',
provider: 'travis',
createdAt: '2020-08-25T16:36:19.559474+00:00',
updatedAt: '2020-08-25T16:36:19.679868+00:00',
flags: [],
downloadUrl: '/download/travis1',
ciUrl: 'https://travis-ci.com/job/1',
uploadType: 'UPLOADED',
jobCode: 'job1',
buildCode: 'build1',
errors: [],
},
{
id: 2,
name: 'travis-upload-2',
state: 'PROCESSED',
provider: 'travis',
createdAt: '2020-08-26T16:36:19.559474+00:00',
updatedAt: '2020-08-26T16:36:19.679868+00:00',
flags: [],
downloadUrl: '/download/travis2',
ciUrl: 'https://travis-ci.com/job/2',
uploadType: 'UPLOADED',
jobCode: 'job2',
buildCode: 'build2',
errors: [],
},
],
},
erroredUploads: {},
flagErrorUploads: {},
searchResults: [],
hasNoUploads: false,
})

global.fetch = vi.fn()
global.URL.createObjectURL = vi.fn()
global.URL.revokeObjectURL = vi.fn()
})

afterEach(() => {
vi.restoreAllMocks()
})

it('renders the Download button', async () => {
render(<UploadsCard />, { wrapper })
const downloadButton = screen.getByText('Download')

Check failure on line 1064 in src/pages/CommitDetailPage/CommitCoverage/UploadsCard/UploadsCard.test.tsx

View workflow job for this annotation

GitHub Actions / Test Runner #1 - Vitest

src/pages/CommitDetailPage/CommitCoverage/UploadsCard/UploadsCard.test.tsx > UploadsCard > Download functionality > renders the Download button

TestingLibraryElementError: Found multiple elements with the text: Download Here are the matching elements: Ignored nodes: comments, script, style <button class="text-ds-blue-default hover:underline" > Download </button> Ignored nodes: comments, script, style <a class=" font-sans cursor-pointer hover:underline focus:ring-2 text-ds-blue-default inline-flex items-center gap-1" data-cy="download report" data-marketing="download report" data-testid="download report" download="" href="/download/travis1" target="blank" > Download <span class="text-ds-gray-quinary" > <svg class="w-4 h-4" data-icon="" data-testid="" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" > <path d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" /> </svg> </span> </a> Ignored nodes: comments, script, style <a class=" font-sans cursor-pointer hover:underline focus:ring-2 text-ds-blue-default inline-flex items-center gap-1" data-cy="download report" data-marketing="download report" data-testid="download report" download="" href="/download/travis2" target="blank" > Download <span class="text-ds-gray-quinary" > <svg class="w-4 h-4" data-icon="" data-testid="" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" > <path d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" /> </svg> </span> </a> (If this is intentional, then use the `*AllBy*` variant of the query (like `queryAllByText`, `getAllByText`, or `findAllByText`)). Ignored nodes: comments, script, style <body class="" > <div> <div class="border border-ds-gray-secondary bg-ds-container overflow-x-hidden" > <div class="border-b border-ds-gray-secondary p-4" > <div class="flex justify-between" > <h3 class="font-semibold text-base" > Coverage reports history </h3> <a class=" font-sans cursor-pointer hover:underline focus:ring-2 text-ds-blue-default inline-flex items-center gap-1" data-cy="open yaml modal" data-marketing="open yaml modal" data-testid="open yaml modal" > <span class="text-xs" > view YAML file </span> </a> </div> <p class="text-ds-gray-quinary" > uploads overview </p> </div> <div class="border-b border-ds-gray-secondary p-4" > <div class="flex flex-col" > <div class="flex items-start justify-between" > <div class="flex flex-col" /> </div> <div> <label class="mb-2 block font-semibold sr-only" for="text-input55" > Search by upload or flag name </label> <div class="relative" > <div class="absolute left-2 flex h-full items-center text-ds-gray-quaternary" > <svg class="w-4 h-4" data-icon="search" data-testid="search" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" > <path d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" stroke-linecap="round" stroke-linejoin="round"
expect(downloadButton).toBeInTheDocument()
})

it('initiates download for all uploads when Download button is clicked', async () => {
const user = userEvent.setup()
const mockBlob = new Blob(['mock content'], { type: 'text/plain' })
global.fetch.mockResolvedValue({ blob: () => Promise.resolve(mockBlob) })

Check failure on line 1071 in src/pages/CommitDetailPage/CommitCoverage/UploadsCard/UploadsCard.test.tsx

View workflow job for this annotation

GitHub Actions / Run Type Checker

Property 'mockResolvedValue' does not exist on type '{ (input: URL | RequestInfo, init?: RequestInit | undefined): Promise<Response>; (input: string | URL | Request, init?: RequestInit | undefined): Promise<...>; }'.

Check failure on line 1071 in src/pages/CommitDetailPage/CommitCoverage/UploadsCard/UploadsCard.test.tsx

View workflow job for this annotation

GitHub Actions / Upload Bundle Stats - Production

Property 'mockResolvedValue' does not exist on type '{ (input: URL | RequestInfo, init?: RequestInit | undefined): Promise<Response>; (input: string | URL | Request, init?: RequestInit | undefined): Promise<...>; }'.

Check failure on line 1071 in src/pages/CommitDetailPage/CommitCoverage/UploadsCard/UploadsCard.test.tsx

View workflow job for this annotation

GitHub Actions / Upload Bundle Stats - Staging

Property 'mockResolvedValue' does not exist on type '{ (input: URL | RequestInfo, init?: RequestInit | undefined): Promise<Response>; (input: string | URL | Request, init?: RequestInit | undefined): Promise<...>; }'.
global.URL.createObjectURL.mockReturnValue('mock-blob-url')

Check failure on line 1072 in src/pages/CommitDetailPage/CommitCoverage/UploadsCard/UploadsCard.test.tsx

View workflow job for this annotation

GitHub Actions / Run Type Checker

Property 'mockReturnValue' does not exist on type '(obj: Blob | MediaSource) => string'.

Check failure on line 1072 in src/pages/CommitDetailPage/CommitCoverage/UploadsCard/UploadsCard.test.tsx

View workflow job for this annotation

GitHub Actions / Upload Bundle Stats - Production

Property 'mockReturnValue' does not exist on type '(obj: Blob | MediaSource) => string'.

Check failure on line 1072 in src/pages/CommitDetailPage/CommitCoverage/UploadsCard/UploadsCard.test.tsx

View workflow job for this annotation

GitHub Actions / Upload Bundle Stats - Staging

Property 'mockReturnValue' does not exist on type '(obj: Blob | MediaSource) => string'.

render(<UploadsCard />, { wrapper })
const downloadButton = screen.getByText('Download')

Check failure on line 1075 in src/pages/CommitDetailPage/CommitCoverage/UploadsCard/UploadsCard.test.tsx

View workflow job for this annotation

GitHub Actions / Test Runner #1 - Vitest

src/pages/CommitDetailPage/CommitCoverage/UploadsCard/UploadsCard.test.tsx > UploadsCard > Download functionality > initiates download for all uploads when Download button is clicked

TestingLibraryElementError: Found multiple elements with the text: Download Here are the matching elements: Ignored nodes: comments, script, style <button class="text-ds-blue-default hover:underline" > Download </button> Ignored nodes: comments, script, style <a class=" font-sans cursor-pointer hover:underline focus:ring-2 text-ds-blue-default inline-flex items-center gap-1" data-cy="download report" data-marketing="download report" data-testid="download report" download="" href="/download/travis1" target="blank" > Download <span class="text-ds-gray-quinary" > <svg class="w-4 h-4" data-icon="" data-testid="" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" > <path d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" /> </svg> </span> </a> Ignored nodes: comments, script, style <a class=" font-sans cursor-pointer hover:underline focus:ring-2 text-ds-blue-default inline-flex items-center gap-1" data-cy="download report" data-marketing="download report" data-testid="download report" download="" href="/download/travis2" target="blank" > Download <span class="text-ds-gray-quinary" > <svg class="w-4 h-4" data-icon="" data-testid="" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" > <path d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" /> </svg> </span> </a> (If this is intentional, then use the `*AllBy*` variant of the query (like `queryAllByText`, `getAllByText`, or `findAllByText`)). Ignored nodes: comments, script, style <body class="" > <div> <div class="border border-ds-gray-secondary bg-ds-container overflow-x-hidden" > <div class="border-b border-ds-gray-secondary p-4" > <div class="flex justify-between" > <h3 class="font-semibold text-base" > Coverage reports history </h3> <a class=" font-sans cursor-pointer hover:underline focus:ring-2 text-ds-blue-default inline-flex items-center gap-1" data-cy="open yaml modal" data-marketing="open yaml modal" data-testid="open yaml modal" > <span class="text-xs" > view YAML file </span> </a> </div> <p class="text-ds-gray-quinary" > uploads overview </p> </div> <div class="border-b border-ds-gray-secondary p-4" > <div class="flex flex-col" > <div class="flex items-start justify-between" > <div class="flex flex-col" /> </div> <div> <label class="mb-2 block font-semibold sr-only" for="text-input56" > Search by upload or flag name </label> <div class="relative" > <div class="absolute left-2 flex h-full items-center text-ds-gray-quaternary" > <svg class="w-4 h-4" data-icon="search" data-testid="search" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" > <path d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" stroke-linecap="round" stroke-linejoin="round"
await user.click(downloadButton)

expect(global.fetch).toHaveBeenCalledTimes(2)
expect(global.fetch).toHaveBeenCalledWith('/download/travis1', {
headers: { 'Content-Type': 'text/plain' },
})
expect(global.fetch).toHaveBeenCalledWith('/download/travis2', {
headers: { 'Content-Type': 'text/plain' },
})

expect(global.URL.createObjectURL).toHaveBeenCalledTimes(2)
expect(global.URL.createObjectURL).toHaveBeenCalledWith(mockBlob)

expect(global.URL.revokeObjectURL).toHaveBeenCalledTimes(2)
expect(global.URL.revokeObjectURL).toHaveBeenCalledWith('mock-blob-url')
})

it('handles download errors gracefully', async () => {
const user = userEvent.setup()
global.fetch.mockRejectedValue(new Error('Download failed'))

Check failure on line 1095 in src/pages/CommitDetailPage/CommitCoverage/UploadsCard/UploadsCard.test.tsx

View workflow job for this annotation

GitHub Actions / Run Type Checker

Property 'mockRejectedValue' does not exist on type '{ (input: URL | RequestInfo, init?: RequestInit | undefined): Promise<Response>; (input: string | URL | Request, init?: RequestInit | undefined): Promise<...>; }'.

Check failure on line 1095 in src/pages/CommitDetailPage/CommitCoverage/UploadsCard/UploadsCard.test.tsx

View workflow job for this annotation

GitHub Actions / Upload Bundle Stats - Production

Property 'mockRejectedValue' does not exist on type '{ (input: URL | RequestInfo, init?: RequestInit | undefined): Promise<Response>; (input: string | URL | Request, init?: RequestInit | undefined): Promise<...>; }'.

Check failure on line 1095 in src/pages/CommitDetailPage/CommitCoverage/UploadsCard/UploadsCard.test.tsx

View workflow job for this annotation

GitHub Actions / Upload Bundle Stats - Staging

Property 'mockRejectedValue' does not exist on type '{ (input: URL | RequestInfo, init?: RequestInit | undefined): Promise<Response>; (input: string | URL | Request, init?: RequestInit | undefined): Promise<...>; }'.
const consoleSpy = vi.spyOn(console, 'error').mockImplementation(() => {})

render(<UploadsCard />, { wrapper })
const downloadButton = screen.getByText('Download')

Check failure on line 1099 in src/pages/CommitDetailPage/CommitCoverage/UploadsCard/UploadsCard.test.tsx

View workflow job for this annotation

GitHub Actions / Test Runner #1 - Vitest

src/pages/CommitDetailPage/CommitCoverage/UploadsCard/UploadsCard.test.tsx > UploadsCard > Download functionality > handles download errors gracefully

TestingLibraryElementError: Found multiple elements with the text: Download Here are the matching elements: Ignored nodes: comments, script, style <button class="text-ds-blue-default hover:underline" > Download </button> Ignored nodes: comments, script, style <a class=" font-sans cursor-pointer hover:underline focus:ring-2 text-ds-blue-default inline-flex items-center gap-1" data-cy="download report" data-marketing="download report" data-testid="download report" download="" href="/download/travis1" target="blank" > Download <span class="text-ds-gray-quinary" > <svg class="w-4 h-4" data-icon="" data-testid="" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" > <path d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" /> </svg> </span> </a> Ignored nodes: comments, script, style <a class=" font-sans cursor-pointer hover:underline focus:ring-2 text-ds-blue-default inline-flex items-center gap-1" data-cy="download report" data-marketing="download report" data-testid="download report" download="" href="/download/travis2" target="blank" > Download <span class="text-ds-gray-quinary" > <svg class="w-4 h-4" data-icon="" data-testid="" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" > <path d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" /> </svg> </span> </a> (If this is intentional, then use the `*AllBy*` variant of the query (like `queryAllByText`, `getAllByText`, or `findAllByText`)). Ignored nodes: comments, script, style <body class="" > <div> <div class="border border-ds-gray-secondary bg-ds-container overflow-x-hidden" > <div class="border-b border-ds-gray-secondary p-4" > <div class="flex justify-between" > <h3 class="font-semibold text-base" > Coverage reports history </h3> <a class=" font-sans cursor-pointer hover:underline focus:ring-2 text-ds-blue-default inline-flex items-center gap-1" data-cy="open yaml modal" data-marketing="open yaml modal" data-testid="open yaml modal" > <span class="text-xs" > view YAML file </span> </a> </div> <p class="text-ds-gray-quinary" > uploads overview </p> </div> <div class="border-b border-ds-gray-secondary p-4" > <div class="flex flex-col" > <div class="flex items-start justify-between" > <div class="flex flex-col" /> </div> <div> <label class="mb-2 block font-semibold sr-only" for="text-input57" > Search by upload or flag name </label> <div class="relative" > <div class="absolute left-2 flex h-full items-center text-ds-gray-quaternary" > <svg class="w-4 h-4" data-icon="search" data-testid="search" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" > <path d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" stroke-linecap="round" stroke-linejoin="round"
await user.click(downloadButton)

expect(global.fetch).toHaveBeenCalledTimes(2)
expect(consoleSpy).toHaveBeenCalledTimes(2)
expect(consoleSpy).toHaveBeenCalledWith('Download failed:', expect.any(Error))

consoleSpy.mockRestore()
})

it('does not attempt to download when there are no uploads', async () => {
setup({ ...mocks.useUploads.mockReturnValue, groupedUploads: { travis: [] } })

Check failure on line 1110 in src/pages/CommitDetailPage/CommitCoverage/UploadsCard/UploadsCard.test.tsx

View workflow job for this annotation

GitHub Actions / Run Type Checker

Argument of type '{ groupedUploads: { travis: never[]; }; }' is not assignable to parameter of type '{ uploadsOverview: string; groupedUploads: Record<string, Upload[]>; uploadsProviderList: string[] | never[]; hasNoUploads: boolean; erroredUploads: Record<string, Upload[]>; flagErrorUploads: Record<...>; searchResults: Upload[] | undefined; }'.

Check failure on line 1110 in src/pages/CommitDetailPage/CommitCoverage/UploadsCard/UploadsCard.test.tsx

View workflow job for this annotation

GitHub Actions / Upload Bundle Stats - Production

Argument of type '{ groupedUploads: { travis: never[]; }; }' is not assignable to parameter of type '{ uploadsOverview: string; groupedUploads: Record<string, Upload[]>; uploadsProviderList: string[] | never[]; hasNoUploads: boolean; erroredUploads: Record<string, Upload[]>; flagErrorUploads: Record<...>; searchResults: Upload[] | undefined; }'.

Check failure on line 1110 in src/pages/CommitDetailPage/CommitCoverage/UploadsCard/UploadsCard.test.tsx

View workflow job for this annotation

GitHub Actions / Upload Bundle Stats - Staging

Argument of type '{ groupedUploads: { travis: never[]; }; }' is not assignable to parameter of type '{ uploadsOverview: string; groupedUploads: Record<string, Upload[]>; uploadsProviderList: string[] | never[]; hasNoUploads: boolean; erroredUploads: Record<string, Upload[]>; flagErrorUploads: Record<...>; searchResults: Upload[] | undefined; }'.
const user = userEvent.setup()
render(<UploadsCard />, { wrapper })
const downloadButton = screen.getByText('Download')
await user.click(downloadButton)
expect(global.fetch).not.toHaveBeenCalled()
})
})
})

0 comments on commit 69c4400

Please sign in to comment.