diff --git a/src/pages/RepoPage/CoverageTab/OverviewTab/OverviewTab.test.tsx b/src/pages/RepoPage/CoverageTab/OverviewTab/OverviewTab.test.tsx
index f04a5dca97..c2a2463d21 100644
--- a/src/pages/RepoPage/CoverageTab/OverviewTab/OverviewTab.test.tsx
+++ b/src/pages/RepoPage/CoverageTab/OverviewTab/OverviewTab.test.tsx
@@ -3,11 +3,31 @@ import { render, screen } from '@testing-library/react'
import { graphql, http, HttpResponse } from 'msw'
import { setupServer } from 'msw/node'
import { MemoryRouter, Route } from 'react-router-dom'
+import { type Mock } from 'vitest'
import { TierNames, TTierNames } from 'services/tier'
import CoverageOverviewTab from './OverviewTab'
+declare global {
+ interface Window {
+ ResizeObserver: unknown
+ }
+}
+
+vi.mock('recharts', async () => {
+ const OriginalModule = await vi.importActual('recharts')
+ return {
+ ...OriginalModule,
+ ResponsiveContainer: ({ children }: { children: React.ReactNode }) => (
+ // @ts-expect-error - something is off with the import actual but this does exist, and this mock does work
+
+ {children}
+
+ ),
+ }
+})
+
vi.mock('./Summary', () => ({ default: () => 'Summary' }))
vi.mock('./SummaryTeamPlan', () => ({ default: () => 'SummaryTeamPlan' }))
vi.mock('./subroute/Sunburst', () => ({ default: () => 'Sunburst' }))
@@ -104,30 +124,9 @@ const branchesMock = {
__typename: 'Repository',
branches: {
edges: [
- {
- node: {
- name: 'main',
- head: {
- commitid: '1',
- },
- },
- },
- {
- node: {
- name: 'dummy',
- head: {
- commitid: '2',
- },
- },
- },
- {
- node: {
- name: 'dummy2',
- head: {
- commitid: '3',
- },
- },
- },
+ { node: { name: 'main', head: { commitid: '1' } } },
+ { node: { name: 'dummy', head: { commitid: '2' } } },
+ { node: { name: 'dummy2', head: { commitid: '3' } } },
],
pageInfo: {
hasNextPage: false,
@@ -188,22 +187,10 @@ const mockBranchMeasurements = {
__typename: 'Repository',
coverageAnalytics: {
measurements: [
- {
- timestamp: '2023-01-01T00:00:00+00:00',
- max: 85,
- },
- {
- timestamp: '2023-01-02T00:00:00+00:00',
- max: 80,
- },
- {
- timestamp: '2023-01-03T00:00:00+00:00',
- max: 90,
- },
- {
- timestamp: '2023-01-04T00:00:00+00:00',
- max: 100,
- },
+ { timestamp: '2023-01-01T00:00:00+00:00', max: 85 },
+ { timestamp: '2023-01-02T00:00:00+00:00', max: 80 },
+ { timestamp: '2023-01-03T00:00:00+00:00', max: 90 },
+ { timestamp: '2023-01-04T00:00:00+00:00', max: 100 },
],
},
},
@@ -230,15 +217,7 @@ const mockCoverageTabData = (fileCount = 10) => ({
owner: {
repository: {
__typename: 'Repository',
- branch: {
- head: {
- coverageAnalytics: {
- totals: {
- fileCount,
- },
- },
- },
- },
+ branch: { head: { coverageAnalytics: { totals: { fileCount } } } },
},
},
})
@@ -253,14 +232,8 @@ const mockBranchComponents = {
commitid: 'commit-123',
coverageAnalytics: {
components: [
- {
- id: 'compOneId',
- name: 'compOneName',
- },
- {
- id: 'compTwoId',
- name: 'compTwoName',
- },
+ { id: 'compOneId', name: 'compOneName' },
+ { id: 'compTwoId', name: 'compTwoName' },
],
},
},
@@ -274,17 +247,8 @@ const mockFlagSelect = {
repository: {
__typename: 'Repository',
flags: {
- edges: [
- {
- node: {
- name: 'flag-1',
- },
- },
- ],
- pageInfo: {
- hasNextPage: true,
- endCursor: '1-flag-1',
- },
+ edges: [{ node: { name: 'flag-1' } }],
+ pageInfo: { hasNextPage: true, endCursor: '1-flag-1' },
},
},
},
@@ -331,6 +295,30 @@ beforeAll(() => {
server.listen({ onUnhandledRequest: 'warn' })
})
+beforeEach(() => {
+ let resizeObserverMock: Mock
+ /**
+ * ResizeObserver is not available, so we have to create a mock to avoid error coming
+ * from `react-resize-detector`.
+ * @see https://github.com/maslianok/react-resize-detector/issues/145
+ *
+ * This mock also allow us to use {@link notifyResizeObserverChange} to fire changes
+ * from inside our test.
+ */
+ resizeObserverMock = vi.fn().mockImplementation((callback) => {
+ return {
+ observe: vi.fn(),
+ unobserve: vi.fn(),
+ disconnect: vi.fn(),
+ }
+ })
+
+ // @ts-ignore
+ delete window.ResizeObserver
+
+ window.ResizeObserver = resizeObserverMock
+})
+
afterEach(() => {
queryClient.clear()
server.resetHandlers()
@@ -467,7 +455,7 @@ describe('Coverage overview tab', () => {
wrapper: wrapper(['/gh/test-org/repoName']),
})
- const coverageAreaChart = await screen.findByTestId('coverage-area-chart')
+ const coverageAreaChart = await screen.findByTestId('chart-container')
expect(coverageAreaChart).toBeInTheDocument()
})
@@ -490,7 +478,7 @@ describe('Coverage overview tab', () => {
wrapper: wrapper(['/gh/test-org/repoName']),
})
- const coverageChart = screen.queryByTestId('coverage-area-chart')
+ const coverageChart = screen.queryByTestId('chart-container')
expect(coverageChart).not.toBeInTheDocument()
})
})
diff --git a/src/pages/RepoPage/CoverageTab/OverviewTab/OverviewTab.tsx b/src/pages/RepoPage/CoverageTab/OverviewTab/OverviewTab.tsx
index 8967f9d6e1..31cf5fb15a 100644
--- a/src/pages/RepoPage/CoverageTab/OverviewTab/OverviewTab.tsx
+++ b/src/pages/RepoPage/CoverageTab/OverviewTab/OverviewTab.tsx
@@ -90,11 +90,11 @@ function CoverageOverviewTab() {
-
+
{displaySunburst ? (
diff --git a/src/pages/RepoPage/CoverageTab/OverviewTab/subroute/CoverageChart/hooks/index.js b/src/pages/RepoPage/CoverageTab/OverviewTab/subroute/CoverageChart/hooks/index.js
deleted file mode 100644
index 121fb6db17..0000000000
--- a/src/pages/RepoPage/CoverageTab/OverviewTab/subroute/CoverageChart/hooks/index.js
+++ /dev/null
@@ -1,2 +0,0 @@
-export * from './useChartDesc'
-export * from './useCoverageChart'
diff --git a/src/pages/RepoPage/CoverageTab/OverviewTab/subroute/CoverageChart/index.js b/src/pages/RepoPage/CoverageTab/OverviewTab/subroute/CoverageChart/index.ts
similarity index 100%
rename from src/pages/RepoPage/CoverageTab/OverviewTab/subroute/CoverageChart/index.js
rename to src/pages/RepoPage/CoverageTab/OverviewTab/subroute/CoverageChart/index.ts
diff --git a/src/shared/utils/timeseriesCharts.ts b/src/shared/utils/timeseriesCharts.ts
index 61eeeacd41..2b9708c60f 100644
--- a/src/shared/utils/timeseriesCharts.ts
+++ b/src/shared/utils/timeseriesCharts.ts
@@ -15,7 +15,7 @@ export const TimeseriesInterval = {
} as const
type TrendKeys = keyof typeof Trend
-type Trends = (typeof Trend)[TrendKeys]
+export type Trends = (typeof Trend)[TrendKeys]
export const Trend = {
SEVEN_DAYS: '7 days',
THIRTY_DAYS: '30 days',