From a01fee379549cd628bfb0d05887c156d15135ca1 Mon Sep 17 00:00:00 2001 From: nicholas-codecov Date: Tue, 3 Dec 2024 13:17:42 -0400 Subject: [PATCH 1/4] migrate useIgnoredIds to TS Query V5 --- .../hooks/useIgnoredIds.test.tsx | 31 -------------- .../CommitDetailPage/hooks/useIgnoredIds.ts | 10 ----- .../queries/IgnoredIdsQueryOptions.test.tsx | 42 +++++++++++++++++++ .../queries/IgnoredIdsQueryOptions.ts | 9 ++++ 4 files changed, 51 insertions(+), 41 deletions(-) delete mode 100644 src/pages/CommitDetailPage/hooks/useIgnoredIds.test.tsx delete mode 100644 src/pages/CommitDetailPage/hooks/useIgnoredIds.ts create mode 100644 src/pages/CommitDetailPage/queries/IgnoredIdsQueryOptions.test.tsx create mode 100644 src/pages/CommitDetailPage/queries/IgnoredIdsQueryOptions.ts diff --git a/src/pages/CommitDetailPage/hooks/useIgnoredIds.test.tsx b/src/pages/CommitDetailPage/hooks/useIgnoredIds.test.tsx deleted file mode 100644 index 6b60be8066..0000000000 --- a/src/pages/CommitDetailPage/hooks/useIgnoredIds.test.tsx +++ /dev/null @@ -1,31 +0,0 @@ -import { QueryClient, QueryClientProvider } from '@tanstack/react-query' -import { renderHook, waitFor } from '@testing-library/react' - -import { useIgnoredIds } from './useIgnoredIds' - -const queryClient = new QueryClient() - -const wrapper: React.FC = ({ children }) => ( - {children} -) - -afterEach(() => { - queryClient.clear() -}) - -describe('useIgnoredIds', () => { - it('sets the initial data to an empty array', async () => { - const { result } = renderHook(() => useIgnoredIds(), { wrapper }) - - await waitFor(() => expect(result.current.data).toStrictEqual([])) - }) - it('returns an empty array when called a second time', async () => { - const { result } = renderHook(() => useIgnoredIds(), { wrapper }) - - await waitFor(() => expect(result.current.data).toStrictEqual([])) - - result.current.refetch() - - await waitFor(() => expect(result.current.data).toStrictEqual([])) - }) -}) diff --git a/src/pages/CommitDetailPage/hooks/useIgnoredIds.ts b/src/pages/CommitDetailPage/hooks/useIgnoredIds.ts deleted file mode 100644 index 3139d399d5..0000000000 --- a/src/pages/CommitDetailPage/hooks/useIgnoredIds.ts +++ /dev/null @@ -1,10 +0,0 @@ -import { useQuery } from '@tanstack/react-query' - -export const useIgnoredIds = () => - useQuery({ - queryKey: ['IgnoredUploadIds'], - queryFn: () => Promise.resolve([]), - suspense: false, - staleTime: Infinity, - initialData: [], - }) diff --git a/src/pages/CommitDetailPage/queries/IgnoredIdsQueryOptions.test.tsx b/src/pages/CommitDetailPage/queries/IgnoredIdsQueryOptions.test.tsx new file mode 100644 index 0000000000..4ffdcd6f19 --- /dev/null +++ b/src/pages/CommitDetailPage/queries/IgnoredIdsQueryOptions.test.tsx @@ -0,0 +1,42 @@ +import { + QueryClientProvider as QueryClientProviderV5, + QueryClient as QueryClientV5, + useQuery as useQueryV5, +} from '@tanstack/react-queryV5' +import { renderHook, waitFor } from '@testing-library/react' + +import { IgnoredIdsQueryOptions } from './IgnoredIdsQueryOptions' + +const queryClientV5 = new QueryClientV5() + +const wrapper: React.FC = ({ children }) => ( + + {children} + +) + +afterEach(() => { + queryClientV5.clear() +}) + +describe('IgnoredIdsQueryOptions', () => { + it('sets the initial data to an empty array', async () => { + const { result } = renderHook(() => useQueryV5(IgnoredIdsQueryOptions()), { + wrapper, + }) + + await waitFor(() => expect(result.current.data).toStrictEqual([])) + }) + + it('returns an empty array when called a second time', async () => { + const { result } = renderHook(() => useQueryV5(IgnoredIdsQueryOptions()), { + wrapper, + }) + + await waitFor(() => expect(result.current.data).toStrictEqual([])) + + result.current.refetch() + + await waitFor(() => expect(result.current.data).toStrictEqual([])) + }) +}) diff --git a/src/pages/CommitDetailPage/queries/IgnoredIdsQueryOptions.ts b/src/pages/CommitDetailPage/queries/IgnoredIdsQueryOptions.ts new file mode 100644 index 0000000000..7b988a9b61 --- /dev/null +++ b/src/pages/CommitDetailPage/queries/IgnoredIdsQueryOptions.ts @@ -0,0 +1,9 @@ +import { queryOptions as queryOptionsV5 } from '@tanstack/react-queryV5' + +export const IgnoredIdsQueryOptions = () => + queryOptionsV5({ + queryKey: ['IgnoredUploadIds'], + queryFn: () => Promise.resolve([]), + staleTime: Infinity, + initialData: [], + }) From 06d29e584cab35b16570c829dd9a40c1704bdb59 Mon Sep 17 00:00:00 2001 From: nicholas-codecov Date: Tue, 3 Dec 2024 13:18:12 -0400 Subject: [PATCH 2/4] update components and their tests using this migrated hook --- .../CommitFileDiff/CommitFileDiff.test.tsx | 32 +++++++++++------- .../shared/CommitFileDiff/CommitFileDiff.tsx | 5 +-- .../CommitFileDiff/CommitFileDiff.test.tsx | 33 ++++++++++++------- .../CommitFileDiff/CommitFileDiff.tsx | 5 +-- 4 files changed, 49 insertions(+), 26 deletions(-) diff --git a/src/pages/CommitDetailPage/CommitCoverage/routes/FilesChangedTab/shared/CommitFileDiff/CommitFileDiff.test.tsx b/src/pages/CommitDetailPage/CommitCoverage/routes/FilesChangedTab/shared/CommitFileDiff/CommitFileDiff.test.tsx index e51d88b8d5..353118a29d 100644 --- a/src/pages/CommitDetailPage/CommitCoverage/routes/FilesChangedTab/shared/CommitFileDiff/CommitFileDiff.test.tsx +++ b/src/pages/CommitDetailPage/CommitCoverage/routes/FilesChangedTab/shared/CommitFileDiff/CommitFileDiff.test.tsx @@ -1,4 +1,8 @@ import { QueryClient, QueryClientProvider } from '@tanstack/react-query' +import { + QueryClientProvider as QueryClientProviderV5, + QueryClient as QueryClientV5, +} from '@tanstack/react-queryV5' import { render, screen, waitFor, within } from '@testing-library/react' import { graphql, HttpResponse } from 'msw' import { setupServer } from 'msw/node' @@ -187,19 +191,24 @@ const server = setupServer() const queryClient = new QueryClient({ defaultOptions: { queries: { retry: false, suspense: true } }, }) +const queryClientV5 = new QueryClientV5({ + defaultOptions: { queries: { retry: false } }, +}) const wrapper: React.FC = ({ children }) => ( - - - - Loading}>{children} - - - + + + + + Loading}>{children} + + + + ) beforeAll(() => { @@ -208,6 +217,7 @@ beforeAll(() => { afterEach(() => { queryClient.clear() + queryClientV5.clear() server.resetHandlers() }) diff --git a/src/pages/CommitDetailPage/CommitCoverage/routes/FilesChangedTab/shared/CommitFileDiff/CommitFileDiff.tsx b/src/pages/CommitDetailPage/CommitCoverage/routes/FilesChangedTab/shared/CommitFileDiff/CommitFileDiff.tsx index 5d3c57a5be..62c3a75c71 100644 --- a/src/pages/CommitDetailPage/CommitCoverage/routes/FilesChangedTab/shared/CommitFileDiff/CommitFileDiff.tsx +++ b/src/pages/CommitDetailPage/CommitCoverage/routes/FilesChangedTab/shared/CommitFileDiff/CommitFileDiff.tsx @@ -1,7 +1,8 @@ +import { useQuery as useQueryV5 } from '@tanstack/react-queryV5' import { Fragment, useMemo } from 'react' import { useParams } from 'react-router-dom' -import { useIgnoredIds } from 'pages/CommitDetailPage/hooks/useIgnoredIds' +import { IgnoredIdsQueryOptions } from 'pages/CommitDetailPage/queries/IgnoredIdsQueryOptions' import { ImpactedFileType, useComparisonForCommitAndParent, @@ -68,7 +69,7 @@ function DiffRenderer({ const { commitFileDiff } = useNavLinks() const { provider, owner, repo, commit } = useParams() const { data: overview } = useRepoOverview({ provider, owner, repo }) - const { data: ignoredUploadIds } = useIgnoredIds() + const { data: ignoredUploadIds } = useQueryV5(IgnoredIdsQueryOptions()) const fileDiff = useMemo(() => { const transformedData = transformImpactedFileToDiff(impactedFile) diff --git a/src/pages/CommitDetailPage/CommitCoverage/routes/IndirectChangesTab/IndirectChangesTable/CommitFileDiff/CommitFileDiff.test.tsx b/src/pages/CommitDetailPage/CommitCoverage/routes/IndirectChangesTab/IndirectChangesTable/CommitFileDiff/CommitFileDiff.test.tsx index 2d208900f4..ab3bbbf603 100644 --- a/src/pages/CommitDetailPage/CommitCoverage/routes/IndirectChangesTab/IndirectChangesTable/CommitFileDiff/CommitFileDiff.test.tsx +++ b/src/pages/CommitDetailPage/CommitCoverage/routes/IndirectChangesTab/IndirectChangesTable/CommitFileDiff/CommitFileDiff.test.tsx @@ -1,4 +1,8 @@ import { QueryClient, QueryClientProvider } from '@tanstack/react-query' +import { + QueryClientProvider as QueryClientProviderV5, + QueryClient as QueryClientV5, +} from '@tanstack/react-queryV5' import { render, screen, waitFor, within } from '@testing-library/react' import { graphql, HttpResponse } from 'msw' import { setupServer } from 'msw/node' @@ -176,19 +180,24 @@ const server = setupServer() const queryClient = new QueryClient({ defaultOptions: { queries: { retry: false, suspense: true } }, }) +const queryClientV5 = new QueryClientV5({ + defaultOptions: { queries: { retry: false } }, +}) const wrapper: React.FC = ({ children }) => ( - - - - Loading}>{children} - - - + + + + + Loading}>{children} + + + + ) beforeAll(() => { @@ -197,6 +206,7 @@ beforeAll(() => { afterEach(() => { queryClient.clear() + queryClientV5.clear() server.resetHandlers() }) @@ -422,6 +432,7 @@ describe('CommitFileDiff', () => { describe('there are ignored ids', () => { beforeEach(() => { queryClient.setQueryData(['IgnoredUploadIds'], [0]) + queryClientV5.setQueryData(['IgnoredUploadIds'], [0]) }) it('renders hit count icon', async () => { diff --git a/src/pages/CommitDetailPage/CommitCoverage/routes/IndirectChangesTab/IndirectChangesTable/CommitFileDiff/CommitFileDiff.tsx b/src/pages/CommitDetailPage/CommitCoverage/routes/IndirectChangesTab/IndirectChangesTable/CommitFileDiff/CommitFileDiff.tsx index 13a7252740..01e0368658 100644 --- a/src/pages/CommitDetailPage/CommitCoverage/routes/IndirectChangesTab/IndirectChangesTable/CommitFileDiff/CommitFileDiff.tsx +++ b/src/pages/CommitDetailPage/CommitCoverage/routes/IndirectChangesTab/IndirectChangesTable/CommitFileDiff/CommitFileDiff.tsx @@ -1,8 +1,9 @@ +import { useQuery as useQueryV5 } from '@tanstack/react-queryV5' import PropTypes from 'prop-types' import { Fragment, useMemo } from 'react' import { useParams } from 'react-router-dom' -import { useIgnoredIds } from 'pages/CommitDetailPage/hooks/useIgnoredIds' +import { IgnoredIdsQueryOptions } from 'pages/CommitDetailPage/queries/IgnoredIdsQueryOptions' import { type ImpactedFileType, useComparisonForCommitAndParent, @@ -69,7 +70,7 @@ function DiffRenderer({ const { commitFileDiff } = useNavLinks() const { owner, repo, provider, commit } = useParams() const { data: overview } = useRepoOverview({ provider, owner, repo }) - const { data: ignoredUploadIds } = useIgnoredIds() + const { data: ignoredUploadIds } = useQueryV5(IgnoredIdsQueryOptions()) const fileDiff = useMemo(() => { const transformedData = transformImpactedFileToDiff(impactedFile) From 49a08d5467fa44a398a2a161686ea96bd37ad326 Mon Sep 17 00:00:00 2001 From: nicholas-codecov Date: Fri, 6 Dec 2024 14:20:34 -0400 Subject: [PATCH 3/4] resolve issue where click checkboxes doesn't update the query cache --- .../UploadsCard/UploadItem.test.tsx | 41 ++++++++++++------- .../CommitCoverage/UploadsCard/UploadItem.tsx | 13 +++--- .../UploadsCard/UploadsCard.test.tsx | 34 ++++++++------- .../CommitFileDiff/CommitFileDiff.test.tsx | 5 ++- .../CommitDetailPage/CommitDetailPage.tsx | 3 +- 5 files changed, 58 insertions(+), 38 deletions(-) diff --git a/src/pages/CommitDetailPage/CommitCoverage/UploadsCard/UploadItem.test.tsx b/src/pages/CommitDetailPage/CommitCoverage/UploadsCard/UploadItem.test.tsx index 91d555a92c..2d483d9f09 100644 --- a/src/pages/CommitDetailPage/CommitCoverage/UploadsCard/UploadItem.test.tsx +++ b/src/pages/CommitDetailPage/CommitCoverage/UploadsCard/UploadItem.test.tsx @@ -1,8 +1,13 @@ import { QueryClient, QueryClientProvider } from '@tanstack/react-query' +import { + QueryClientProvider as QueryClientProviderV5, + QueryClient as QueryClientV5, +} from '@tanstack/react-queryV5' import { render, screen, waitFor } from '@testing-library/react' import userEvent from '@testing-library/user-event' import { MemoryRouter, Route } from 'react-router-dom' +import { IgnoredIdsQueryOptions } from 'pages/CommitDetailPage/queries/IgnoredIdsQueryOptions' import { formatTimeToNow } from 'shared/utils/dates' import { Upload } from 'shared/utils/extractUploads' @@ -26,21 +31,25 @@ const mockUpload: Upload = { } const queryClient = new QueryClient() +const queryClientV5 = new QueryClientV5() const wrapper: React.FC = ({ children }) => ( - - - {children} - - + + + + {children} + + + ) afterEach(() => { queryClient.clear() + queryClientV5.clear() }) describe('UploadsCard', () => { @@ -497,9 +506,9 @@ describe('UploadsCard', () => { await user.click(checkbox) await waitFor(() => - expect(queryClient.getQueryData(['IgnoredUploadIds'])).toStrictEqual([ - 0, - ]) + expect( + queryClientV5.getQueryData(IgnoredIdsQueryOptions().queryKey) + ).toStrictEqual([0]) ) }) @@ -511,11 +520,15 @@ describe('UploadsCard', () => { const checkbox = screen.getByRole('checkbox') await user.click(checkbox) - expect(queryClient.getQueryData(['IgnoredUploadIds'])).toStrictEqual([0]) + expect( + queryClientV5.getQueryData(IgnoredIdsQueryOptions().queryKey) + ).toStrictEqual([0]) await user.click(checkbox) - expect(queryClient.getQueryData(['IgnoredUploadIds'])).toStrictEqual([]) + expect( + queryClientV5.getQueryData(IgnoredIdsQueryOptions().queryKey) + ).toStrictEqual([]) }) it('handles null id gracefully', async () => { diff --git a/src/pages/CommitDetailPage/CommitCoverage/UploadsCard/UploadItem.tsx b/src/pages/CommitDetailPage/CommitCoverage/UploadsCard/UploadItem.tsx index eb1816d1db..d5600d5cf1 100644 --- a/src/pages/CommitDetailPage/CommitCoverage/UploadsCard/UploadItem.tsx +++ b/src/pages/CommitDetailPage/CommitCoverage/UploadsCard/UploadItem.tsx @@ -1,7 +1,8 @@ -import { useQueryClient } from '@tanstack/react-query' +import { useQueryClient as useQueryClientV5 } from '@tanstack/react-queryV5' import without from 'lodash/without' import { useEffect, useState } from 'react' +import { IgnoredIdsQueryOptions } from 'pages/CommitDetailPage/queries/IgnoredIdsQueryOptions' import { UploadTypeEnum } from 'shared/utils/commit' import { formatTimeToNow } from 'shared/utils/dates' import { Upload } from 'shared/utils/extractUploads' @@ -35,7 +36,7 @@ const UploadItem = ({ onSelectChange = () => {}, }: UploadProps) => { const [checked, setChecked] = useState(true) - const queryClient = useQueryClient() + const queryClientV5 = useQueryClientV5() const isCarriedForward = uploadType === UploadTypeEnum.CARRIED_FORWARD useEffect(() => setChecked(isSelected ?? true), [isSelected]) @@ -53,13 +54,13 @@ const UploadItem = ({ if (checked && id != null) { // User is unchecking - queryClient.setQueryData( - ['IgnoredUploadIds'], + queryClientV5.setQueryData( + IgnoredIdsQueryOptions().queryKey, (oldData?: number[]) => [...(oldData ?? []), id] ) } else if (id != null) { - queryClient.setQueryData( - ['IgnoredUploadIds'], + queryClientV5.setQueryData( + IgnoredIdsQueryOptions().queryKey, (oldData?: number[]) => without(oldData, id) ) } diff --git a/src/pages/CommitDetailPage/CommitCoverage/UploadsCard/UploadsCard.test.tsx b/src/pages/CommitDetailPage/CommitCoverage/UploadsCard/UploadsCard.test.tsx index b3820447e1..5fca4adf39 100644 --- a/src/pages/CommitDetailPage/CommitCoverage/UploadsCard/UploadsCard.test.tsx +++ b/src/pages/CommitDetailPage/CommitCoverage/UploadsCard/UploadsCard.test.tsx @@ -1,11 +1,14 @@ +import { QueryClient, QueryClientProvider } from '@tanstack/react-query' +import { + QueryClientProvider as QueryClientProviderV5, + QueryClient as QueryClientV5, +} from '@tanstack/react-queryV5' import { render, screen, waitFor, waitForElementToBeRemoved, -} from 'custom-testing-library' - -import { QueryClient, QueryClientProvider } from '@tanstack/react-query' +} from '@testing-library/react' import userEvent from '@testing-library/user-event' import { graphql, HttpResponse } from 'msw' import { setupServer } from 'msw/node' @@ -22,22 +25,22 @@ const mocks = vi.hoisted(() => ({ vi.mock('./useUploads', async () => mocks) vi.mock('services/commitErrors', async () => mocks) +const server = setupServer() const queryClient = new QueryClient({ - defaultOptions: { - queries: { - suspense: true, - retry: false, - }, - }, + defaultOptions: { queries: { suspense: true, retry: false } }, +}) +const queryClientV5 = new QueryClientV5({ + defaultOptions: { queries: { retry: false } }, }) -const server = setupServer() const wrapper: React.FC = ({ children }) => ( - - - {children} - - + + + + {children} + + + ) beforeAll(() => { @@ -46,6 +49,7 @@ beforeAll(() => { }) afterEach(() => { queryClient.clear() + queryClientV5.clear() server.resetHandlers() vi.clearAllMocks() }) diff --git a/src/pages/CommitDetailPage/CommitCoverage/routes/IndirectChangesTab/IndirectChangesTable/CommitFileDiff/CommitFileDiff.test.tsx b/src/pages/CommitDetailPage/CommitCoverage/routes/IndirectChangesTab/IndirectChangesTable/CommitFileDiff/CommitFileDiff.test.tsx index ab3bbbf603..c72e6c68c3 100644 --- a/src/pages/CommitDetailPage/CommitCoverage/routes/IndirectChangesTab/IndirectChangesTable/CommitFileDiff/CommitFileDiff.test.tsx +++ b/src/pages/CommitDetailPage/CommitCoverage/routes/IndirectChangesTab/IndirectChangesTable/CommitFileDiff/CommitFileDiff.test.tsx @@ -10,6 +10,7 @@ import { Suspense } from 'react' import { MemoryRouter, Route } from 'react-router-dom' import { type MockInstance } from 'vitest' +import { IgnoredIdsQueryOptions } from 'pages/CommitDetailPage/queries/IgnoredIdsQueryOptions' import { ImpactedFileType } from 'services/commit' import CommitFileDiff from './CommitFileDiff' @@ -431,8 +432,8 @@ describe('CommitFileDiff', () => { describe('there are ignored ids', () => { beforeEach(() => { - queryClient.setQueryData(['IgnoredUploadIds'], [0]) - queryClientV5.setQueryData(['IgnoredUploadIds'], [0]) + queryClient.setQueryData(IgnoredIdsQueryOptions().queryKey, [0]) + queryClientV5.setQueryData(IgnoredIdsQueryOptions().queryKey, [0]) }) it('renders hit count icon', async () => { diff --git a/src/pages/CommitDetailPage/CommitDetailPage.tsx b/src/pages/CommitDetailPage/CommitDetailPage.tsx index a77063414d..fdd7b53e02 100644 --- a/src/pages/CommitDetailPage/CommitDetailPage.tsx +++ b/src/pages/CommitDetailPage/CommitDetailPage.tsx @@ -16,6 +16,7 @@ import CommitBundleDropdown from './Dropdowns/CommitBundleDropdown' import CommitCoverageDropdown from './Dropdowns/CommitCoverageDropdown' import Header from './Header' import { CommitPageDataQueryOpts } from './queries/CommitPageDataQueryOpts' +import { IgnoredIdsQueryOptions } from './queries/IgnoredIdsQueryOptions' const CommitCoverage = lazy(() => import('./CommitCoverage')) const CommitBundleAnalysis = lazy(() => import('./CommitBundleAnalysis')) @@ -48,7 +49,7 @@ const CommitDetailPage: React.FC = () => { // reset cache when user navigates to the commit detail page const queryClientV5 = useQueryClientV5() - queryClientV5.setQueryData(['IgnoredUploadIds'], []) + queryClientV5.setQueryData(IgnoredIdsQueryOptions().queryKey, []) const { data: commitPageData, isLoading } = useSuspenseQueryV5( CommitPageDataQueryOpts({ From c64ce66b14f2f7e36afb5be2772b4dff7ee58b5f Mon Sep 17 00:00:00 2001 From: nicholas-codecov Date: Fri, 6 Dec 2024 14:43:27 -0400 Subject: [PATCH 4/4] get all selector working as well --- .../UploadsCard/UploadsCard.test.tsx | 73 +++++++++++++------ .../UploadsCard/UploadsCard.tsx | 48 +++++++++--- 2 files changed, 87 insertions(+), 34 deletions(-) diff --git a/src/pages/CommitDetailPage/CommitCoverage/UploadsCard/UploadsCard.test.tsx b/src/pages/CommitDetailPage/CommitCoverage/UploadsCard/UploadsCard.test.tsx index 5fca4adf39..4e3918aaa7 100644 --- a/src/pages/CommitDetailPage/CommitCoverage/UploadsCard/UploadsCard.test.tsx +++ b/src/pages/CommitDetailPage/CommitCoverage/UploadsCard/UploadsCard.test.tsx @@ -14,6 +14,8 @@ import { graphql, HttpResponse } from 'msw' import { setupServer } from 'msw/node' import { MemoryRouter, Route } from 'react-router-dom' +import { IgnoredIdsQueryOptions } from 'pages/CommitDetailPage/queries/IgnoredIdsQueryOptions' + import UploadsCard from './UploadsCard' import { useUploads } from './useUploads' @@ -47,13 +49,17 @@ beforeAll(() => { console.error = () => {} server.listen() }) + afterEach(() => { queryClient.clear() queryClientV5.clear() server.resetHandlers() vi.clearAllMocks() }) -afterAll(() => server.close()) + +afterAll(() => { + server.close() +}) interface MockCommitErrors { data: { @@ -197,6 +203,7 @@ describe('UploadsCard', () => { const covReportHistory = screen.getByText(/Coverage reports history/) expect(covReportHistory).toBeInTheDocument() }) + it('renders different cis', () => { render(, { wrapper }) @@ -205,6 +212,7 @@ describe('UploadsCard', () => { const travis = screen.getByText(/travis/) expect(travis).toBeInTheDocument() }) + it('renders build ids', () => { render(, { wrapper }) @@ -219,6 +227,7 @@ describe('UploadsCard', () => { const id5 = screen.getByText(/837462/) expect(id5).toBeInTheDocument() }) + it('renders flags', () => { render(, { wrapper }) @@ -259,6 +268,7 @@ describe('UploadsCard', () => { expect(currentlyNoUploads).toBeInTheDocument() }) }) + describe('renders empty Uploads', () => { // ?? beforeEach(() => { @@ -280,6 +290,7 @@ describe('UploadsCard', () => { expect(uploads).toBeInTheDocument() }) }) + describe('The yaml viewer', () => { beforeEach(() => { setup({ @@ -819,6 +830,7 @@ describe('UploadsCard', () => { }) }) }) + describe('select all interactor', () => { beforeEach(() => { setup({ @@ -912,32 +924,47 @@ describe('UploadsCard', () => { }) }) - it('unselects all when clicked', async () => { - const user = userEvent.setup() - render(, { wrapper }) + describe('unselects all when clicked', () => { + it('unselects all when clicked', async () => { + const user = userEvent.setup() + render(, { wrapper }) - const checkboxes = screen.getAllByRole('checkbox') - const travisCheckbox = checkboxes[0] - const travisUploadCheckbox1 = checkboxes[1] - const travisUploadCheckbox2 = checkboxes[2] + const checkboxes = screen.getAllByRole('checkbox') + const travisCheckbox = checkboxes[0] + const travisUploadCheckbox1 = checkboxes[1] + const travisUploadCheckbox2 = checkboxes[2] - expect(travisCheckbox).toBeChecked() - expect(travisUploadCheckbox1).toBeChecked() - expect(travisUploadCheckbox2).toBeChecked() + expect(travisCheckbox).toBeChecked() + expect(travisUploadCheckbox1).toBeChecked() + expect(travisUploadCheckbox2).toBeChecked() - await user.click(travisCheckbox!) + await user.click(travisCheckbox!) - expect(travisCheckbox).not.toBeChecked() - expect(travisUploadCheckbox1).not.toBeChecked() - expect(travisUploadCheckbox2).not.toBeChecked() - - // 'circleci' uploads remain checked - const circleciCheckbox = checkboxes[3] - const circleciUploadCheckbox1 = checkboxes[4] - const circleciUploadCheckbox2 = checkboxes[5] - expect(circleciCheckbox).toBeChecked() - expect(circleciUploadCheckbox1).toBeChecked() - expect(circleciUploadCheckbox2).toBeChecked() + expect(travisCheckbox).not.toBeChecked() + expect(travisUploadCheckbox1).not.toBeChecked() + expect(travisUploadCheckbox2).not.toBeChecked() + + // 'circleci' uploads remain checked + const circleciCheckbox = checkboxes[3] + const circleciUploadCheckbox1 = checkboxes[4] + const circleciUploadCheckbox2 = checkboxes[5] + expect(circleciCheckbox).toBeChecked() + expect(circleciUploadCheckbox1).toBeChecked() + expect(circleciUploadCheckbox2).toBeChecked() + }) + + it('adds ids to ignored ids query', async () => { + const user = userEvent.setup() + render(, { wrapper }) + + const checkboxes = screen.getAllByRole('checkbox') + const travisCheckbox = checkboxes[0] + await user.click(travisCheckbox!) + + expect( + queryClientV5.getQueryData(IgnoredIdsQueryOptions().queryKey) + ).toEqual([0, 1]) + }) }) it('shows an intermediate state', async () => { diff --git a/src/pages/CommitDetailPage/CommitCoverage/UploadsCard/UploadsCard.tsx b/src/pages/CommitDetailPage/CommitCoverage/UploadsCard/UploadsCard.tsx index 37c267b19e..62ab691bb2 100644 --- a/src/pages/CommitDetailPage/CommitCoverage/UploadsCard/UploadsCard.tsx +++ b/src/pages/CommitDetailPage/CommitCoverage/UploadsCard/UploadsCard.tsx @@ -1,6 +1,8 @@ +import { useQueryClient as useQueryClientV5 } from '@tanstack/react-queryV5' import flatMap from 'lodash/flatMap' import { Fragment, useState } from 'react' +import { IgnoredIdsQueryOptions } from 'pages/CommitDetailPage/queries/IgnoredIdsQueryOptions' import { useCommitErrors } from 'services/commitErrors' import { cn } from 'shared/utils/cn' import { NONE } from 'shared/utils/extractUploads' @@ -28,6 +30,7 @@ export const SelectState = { } as const function UploadsCard() { + const queryClientV5 = useQueryClientV5() const [showYAMLModal, setShowYAMLModal] = useState(false) const [uploadFilters, setUploadFilters] = useState({ flagErrors: false, @@ -52,10 +55,22 @@ function UploadsCard() { const providerUploads = groupedUploads[provider] const providerUploadsIndex = providerUploads?.map((_, i) => i) const providerList = new Set(providerUploadsIndex) - setSelectedProviderSelectedUploads((prevState) => ({ - ...prevState, - [provider]: new Set(providerUploadsIndex), - })) + setSelectedProviderSelectedUploads((prevState) => { + const updatedIds = { + ...prevState, + [provider]: new Set(providerUploadsIndex), + } + + // Ids added are ignored, so we need to use the previous state to remove them, we also use a Set to remove duplicates + queryClientV5.setQueryData( + IgnoredIdsQueryOptions().queryKey, + Array.from( + new Set(Object.values(prevState).flatMap((ids) => Array.from(ids))) + ) + ) + + return updatedIds + }) return providerList } @@ -75,13 +90,24 @@ function UploadsCard() { } const handleSelectAllForProviderGroup = (provider: string) => { - setSelectedProviderSelectedUploads((prevState) => ({ - ...prevState, - [provider]: - determineCheckboxState(provider) === SelectState.NONE_SELECTED - ? fillSelectedUploads(provider) - : new Set(), - })) + setSelectedProviderSelectedUploads((prevState) => { + const updatedIds = { + ...prevState, + [provider]: + determineCheckboxState(provider) === SelectState.NONE_SELECTED + ? fillSelectedUploads(provider) + : new Set(), + } + + // Ids added are ignored, so we need to use the previous state to remove them, we also use a Set to remove duplicates + queryClientV5.setQueryData( + IgnoredIdsQueryOptions().queryKey, + Array.from( + new Set(Object.values(prevState).flatMap((ids) => Array.from(ids))) + ) + ) + return updatedIds + }) } const determineCheckboxIcon = (title: string) => {