From 2b5e4a789f1aa044dd0317c13649237559cebdd6 Mon Sep 17 00:00:00 2001 From: nicholas-codecov Date: Tue, 1 Oct 2024 08:52:55 -0400 Subject: [PATCH] chore: Update services/charts tests to Vitest (#3299) --- codecov.yml | 2 ++ src/services/charts/{index.js => index.ts} | 0 src/services/charts/{mocks.js => mocks.ts} | 18 +++++----- ...=> useBranchCoverageMeasurements.test.tsx} | 35 ++++++++++--------- ...spec.js => useLegacyRepoCoverage.test.jsx} | 12 +++++-- ... => useReposCoverageMeasurements.test.tsx} | 10 +++--- ....spec.tsx => useSunburstCoverage.test.tsx} | 35 ++++++++++--------- vitest.config.mjs | 1 + 8 files changed, 63 insertions(+), 50 deletions(-) rename src/services/charts/{index.js => index.ts} (100%) rename src/services/charts/{mocks.js => mocks.ts} (78%) rename src/services/charts/{useBranchCoverageMeasurements.spec.tsx => useBranchCoverageMeasurements.test.tsx} (87%) rename src/services/charts/{useLegacyRepoCoverage.spec.js => useLegacyRepoCoverage.test.jsx} (92%) rename src/services/charts/{useReposCoverageMeasurements.spec.tsx => useReposCoverageMeasurements.test.tsx} (91%) rename src/services/charts/{useSunburtsCoverage.spec.tsx => useSunburstCoverage.test.tsx} (87%) diff --git a/codecov.yml b/codecov.yml index 48617e04e2..e78ce70e70 100644 --- a/codecov.yml +++ b/codecov.yml @@ -49,6 +49,8 @@ ignore: - './src/**/*.svg' - './src/**/*.png' - './src/**/*.jpg' + - ./src/**/*.mocks.js + - ./src/**/*.mocks.ts component_management: default_rules: diff --git a/src/services/charts/index.js b/src/services/charts/index.ts similarity index 100% rename from src/services/charts/index.js rename to src/services/charts/index.ts diff --git a/src/services/charts/mocks.js b/src/services/charts/mocks.ts similarity index 78% rename from src/services/charts/mocks.js rename to src/services/charts/mocks.ts index 53d90646e4..82046461eb 100644 --- a/src/services/charts/mocks.js +++ b/src/services/charts/mocks.ts @@ -1,25 +1,25 @@ /* eslint-disable camelcase */ -import { rest } from 'msw' +import { http, HttpResponse } from 'msw2' const repoUri = '/internal/charts/:provider/:owner/coverage/repository' -export const repoCoverageHandler = rest.post(repoUri, (req, res, ctx) => { - return res(ctx.status(200), ctx.json(exampleYearlyRes)) +export const repoCoverageHandler = http.post(repoUri, (info) => { + return HttpResponse.json(exampleYearlyRes) }) -export const repoCoverageHandler404 = rest.post(repoUri, (req, res, ctx) => { - return res(ctx.status(404), ctx.json({})) +export const repoCoverageHandler404 = http.post(repoUri, (info) => { + return HttpResponse.json({}, { status: 404 }) }) const orgUri = '/internal/charts/:provider/:owner/coverage/organization' -export const orgCoverageHandler = rest.get(orgUri, (req, res, ctx) => { +export const orgCoverageHandler = http.get(orgUri, (info) => { // This is maybe a bit redundant atm but I would like to test some data mutation utils later - const query = req.url.searchParams + const query = new URL(info.request.url).searchParams if (query.get('grouping_unit') === 'yearly') { - return res(ctx.status(200), ctx.json(exampleYearlyRes)) + return HttpResponse.json(exampleYearlyRes) } else if (query.get('grouping_unit') === 'quarterly') { - return res(ctx.status(200), ctx.json(exampleQuarterRes)) + return HttpResponse.json(exampleQuarterRes) } }) diff --git a/src/services/charts/useBranchCoverageMeasurements.spec.tsx b/src/services/charts/useBranchCoverageMeasurements.test.tsx similarity index 87% rename from src/services/charts/useBranchCoverageMeasurements.spec.tsx rename to src/services/charts/useBranchCoverageMeasurements.test.tsx index e56e03efb2..4b39b60a6d 100644 --- a/src/services/charts/useBranchCoverageMeasurements.spec.tsx +++ b/src/services/charts/useBranchCoverageMeasurements.test.tsx @@ -1,7 +1,8 @@ import { QueryClient, QueryClientProvider } from '@tanstack/react-query' import { renderHook, waitFor } from '@testing-library/react' -import { graphql } from 'msw' -import { setupServer } from 'msw/node' +import { graphql, HttpResponse } from 'msw2' +import { setupServer } from 'msw2/node' +import { type MockInstance } from 'vitest' import { useBranchCoverageMeasurements } from './useBranchCoverageMeasurements' @@ -96,17 +97,17 @@ describe('useBranchCoverageMeasurements', () => { isNullOwner = false, }: SetupArgs) { server.use( - graphql.query('GetBranchCoverageMeasurements', (req, res, ctx) => { + graphql.query('GetBranchCoverageMeasurements', (info) => { if (isNotFoundError) { - return res(ctx.status(200), ctx.data(mockNotFoundError)) + return HttpResponse.json({ data: mockNotFoundError }) } else if (isOwnerNotActivatedError) { - return res(ctx.status(200), ctx.data(mockOwnerNotActivatedError)) + return HttpResponse.json({ data: mockOwnerNotActivatedError }) } else if (isUnsuccessfulParseError) { - return res(ctx.status(200), ctx.data(mockUnsuccessfulParseError)) + return HttpResponse.json({ data: mockUnsuccessfulParseError }) } else if (isNullOwner) { - return res(ctx.status(200), ctx.data(mockNullOwner)) + return HttpResponse.json({ data: mockNullOwner }) } else { - return res(ctx.status(200), ctx.data(mockBranchMeasurements)) + return HttpResponse.json({ data: mockBranchMeasurements }) } }) ) @@ -184,14 +185,14 @@ describe('useBranchCoverageMeasurements', () => { }) describe('returns NotFoundError __typename', () => { - let oldConsoleError = console.error + let consoleSpy: MockInstance beforeEach(() => { - console.error = () => null + consoleSpy = vi.spyOn(console, 'error').mockImplementation(() => null) }) afterEach(() => { - console.error = oldConsoleError + consoleSpy.mockRestore() }) it('throws a 404', async () => { @@ -222,14 +223,14 @@ describe('useBranchCoverageMeasurements', () => { }) describe('returns OwnerNotActivatedError __typename', () => { - let oldConsoleError = console.error + let consoleSpy: MockInstance beforeEach(() => { - console.error = () => null + consoleSpy = vi.spyOn(console, 'error').mockImplementation(() => null) }) afterEach(() => { - console.error = oldConsoleError + consoleSpy.mockRestore() }) it('throws a 403', async () => { @@ -260,14 +261,14 @@ describe('useBranchCoverageMeasurements', () => { }) describe('unsuccessful parse of zod schema', () => { - let oldConsoleError = console.error + let consoleSpy: MockInstance beforeEach(() => { - console.error = () => null + consoleSpy = vi.spyOn(console, 'error').mockImplementation(() => null) }) afterEach(() => { - console.error = oldConsoleError + consoleSpy.mockRestore() }) it('throws a 404', async () => { diff --git a/src/services/charts/useLegacyRepoCoverage.spec.js b/src/services/charts/useLegacyRepoCoverage.test.jsx similarity index 92% rename from src/services/charts/useLegacyRepoCoverage.spec.js rename to src/services/charts/useLegacyRepoCoverage.test.jsx index e391ee2bd8..5dd88d9869 100644 --- a/src/services/charts/useLegacyRepoCoverage.spec.js +++ b/src/services/charts/useLegacyRepoCoverage.test.jsx @@ -1,6 +1,6 @@ import { QueryClient, QueryClientProvider } from '@tanstack/react-query' import { renderHook, waitFor } from '@testing-library/react' -import { setupServer } from 'msw/node' +import { setupServer } from 'msw2/node' import { repoCoverageHandler } from './mocks' @@ -16,12 +16,18 @@ const wrapper = ({ children }) => ( const server = setupServer() -beforeAll(() => server.listen()) +beforeAll(() => { + server.listen() +}) + afterEach(() => { server.resetHandlers() queryClient.clear() }) -afterAll(() => server.close()) + +afterAll(() => { + server.close() +}) const exampleYearlyHookData = { coverage: [ diff --git a/src/services/charts/useReposCoverageMeasurements.spec.tsx b/src/services/charts/useReposCoverageMeasurements.test.tsx similarity index 91% rename from src/services/charts/useReposCoverageMeasurements.spec.tsx rename to src/services/charts/useReposCoverageMeasurements.test.tsx index 0f36895138..1d82254bdb 100644 --- a/src/services/charts/useReposCoverageMeasurements.spec.tsx +++ b/src/services/charts/useReposCoverageMeasurements.test.tsx @@ -1,7 +1,7 @@ import { QueryClient, QueryClientProvider } from '@tanstack/react-query' import { renderHook, waitFor } from '@testing-library/react' -import { graphql } from 'msw' -import { setupServer } from 'msw/node' +import { graphql, HttpResponse } from 'msw2' +import { setupServer } from 'msw2/node' import { useReposCoverageMeasurements } from './useReposCoverageMeasurements' @@ -51,12 +51,12 @@ afterAll(() => { describe('useReposCoverageMeasurements', () => { function setup({ hasNoData = false }: { hasNoData: boolean }) { server.use( - graphql.query('GetReposCoverageMeasurements', (req, res, ctx) => { + graphql.query('GetReposCoverageMeasurements', (info) => { if (hasNoData) { - return res(ctx.status(200), ctx.data({})) + return HttpResponse.json({ data: {} }) } - return res(ctx.status(200), ctx.data(mockReposMeasurements)) + return HttpResponse.json({ data: mockReposMeasurements }) }) ) } diff --git a/src/services/charts/useSunburtsCoverage.spec.tsx b/src/services/charts/useSunburstCoverage.test.tsx similarity index 87% rename from src/services/charts/useSunburtsCoverage.spec.tsx rename to src/services/charts/useSunburstCoverage.test.tsx index d532b4e91d..589656a016 100644 --- a/src/services/charts/useSunburtsCoverage.spec.tsx +++ b/src/services/charts/useSunburstCoverage.test.tsx @@ -1,7 +1,7 @@ import { QueryClient, QueryClientProvider } from '@tanstack/react-query' import { renderHook, waitFor } from '@testing-library/react' -import { rest } from 'msw' -import { setupServer } from 'msw/node' +import { http, HttpResponse } from 'msw2' +import { setupServer } from 'msw2/node' import { MemoryRouter, Route } from 'react-router-dom' import { useSunburstCoverage } from './index' @@ -21,13 +21,18 @@ const wrapper = ) const server = setupServer() +beforeAll(() => { + server.listen() +}) -beforeAll(() => server.listen()) afterEach(() => { server.resetHandlers() queryClient.clear() }) -afterAll(() => server.close()) + +afterAll(() => { + server.close() +}) const exampleResponse = [ { @@ -87,19 +92,17 @@ const filteredResponse = [ describe('useSunburstCoverage', () => { beforeEach(() => { server.use( - rest.get( - '/internal/:provider/:owner/:repo/coverage/tree', - (req, res, ctx) => { - const flags = req.url.searchParams.getAll('flags') - const components = req.url.searchParams.getAll('components') - - if (flags.length > 0 || components.length > 0) { - return res(ctx.status(200), ctx.json(filteredResponse)) - } else { - return res(ctx.status(200), ctx.json(exampleResponse)) - } + http.get('/internal/:provider/:owner/:repo/coverage/tree', (info) => { + const searchParams = new URL(info.request.url).searchParams + const flags = searchParams.getAll('flags') + const components = searchParams.getAll('components') + + if (flags.length > 0 || components.length > 0) { + return HttpResponse.json(filteredResponse) + } else { + return HttpResponse.json(exampleResponse) } - ) + }) ) }) diff --git a/vitest.config.mjs b/vitest.config.mjs index 35e591886f..9ed0d9abc3 100644 --- a/vitest.config.mjs +++ b/vitest.config.mjs @@ -14,6 +14,7 @@ const EXCLUDE_FROM_TESTING = [ // Custom exclude patterns 'src/**/*.spec.*', 'src/**/*.stories.*', + 'src/**/*.mocks.*', ] const EXCLUDE_FROM_COVERAGE = [