Skip to content

Commit dba2d79

Browse files
scttcperscttcper
committed
test(logs): Remove useLocation mocks, custom contexts
instead of mocking useLocation directly, use our test helpers that setup a test router. This will help with our continued transition from react router 3 to 6. Also noticed some other duplicate contexts being setup. part of getsentry/frontend-tsc#78
1 parent f24dfd5 commit dba2d79

File tree

5 files changed

+82
-142
lines changed

5 files changed

+82
-142
lines changed

‎static/app/views/explore/logs/index.spec.tsx

Lines changed: 12 additions & 35 deletions
Original file line numberDiff line numberDiff line change
@@ -2,24 +2,9 @@ import {initializeOrg} from 'sentry-test/initializeOrg';
22
import {render, screen, userEvent, waitFor} from 'sentry-test/reactTestingLibrary';
33

44
import PageFiltersStore from 'sentry/stores/pageFiltersStore';
5-
import {OrganizationContext} from 'sentry/views/organizationContext';
65

76
import LogsPage from './index';
87

9-
function ProviderWrapper({
10-
children,
11-
organization,
12-
}: {
13-
children: React.ReactNode;
14-
organization: any;
15-
}) {
16-
return (
17-
<OrganizationContext.Provider value={organization}>
18-
{children}
19-
</OrganizationContext.Provider>
20-
);
21-
}
22-
238
const BASE_FEATURES = ['ourlogs-enabled'];
249

2510
describe('LogsPage', function () {
@@ -118,16 +103,12 @@ describe('LogsPage', function () {
118103
});
119104

120105
it('should call APIs as expected', async function () {
121-
render(
122-
<ProviderWrapper organization={organization}>
123-
<LogsPage />
124-
</ProviderWrapper>,
125-
{
126-
initialRouterConfig: {
127-
location: `/organizations/${organization.slug}/explore/logs/`,
128-
},
129-
}
130-
);
106+
render(<LogsPage />, {
107+
organization,
108+
initialRouterConfig: {
109+
location: `/organizations/${organization.slug}/explore/logs/`,
110+
},
111+
});
131112

132113
await waitFor(() => {
133114
expect(eventTableMock).toHaveBeenCalled();
@@ -171,16 +152,12 @@ describe('LogsPage', function () {
171152
},
172153
});
173154

174-
render(
175-
<ProviderWrapper organization={newOrganization}>
176-
<LogsPage />
177-
</ProviderWrapper>,
178-
{
179-
initialRouterConfig: {
180-
location: `/organizations/${newOrganization.slug}/explore/logs/`,
181-
},
182-
}
183-
);
155+
render(<LogsPage />, {
156+
organization: newOrganization,
157+
initialRouterConfig: {
158+
location: `/organizations/${newOrganization.slug}/explore/logs/`,
159+
},
160+
});
184161

185162
await waitFor(() => {
186163
expect(screen.getByTestId('logs-table')).toBeInTheDocument();

‎static/app/views/explore/logs/logsAutoRefresh.spec.tsx

Lines changed: 22 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,4 @@
11
import React from 'react';
2-
import {LocationFixture} from 'sentry-fixture/locationFixture';
32
import {LogFixture} from 'sentry-fixture/log';
43
import {OrganizationFixture} from 'sentry-fixture/organization';
54
import {ProjectFixture} from 'sentry-fixture/project';
@@ -14,16 +13,11 @@ import {
1413

1514
import PageFiltersStore from 'sentry/stores/pageFiltersStore';
1615
import {LogsAnalyticsPageSource} from 'sentry/utils/analytics/logsAnalyticsEvent';
17-
import {useLocation} from 'sentry/utils/useLocation';
1816
import {LogsPageDataProvider} from 'sentry/views/explore/contexts/logs/logsPageData';
1917
import * as logsPageParams from 'sentry/views/explore/contexts/logs/logsPageParams';
2018
import {LogsPageParamsProvider} from 'sentry/views/explore/contexts/logs/logsPageParams';
2119
import {AutorefreshToggle} from 'sentry/views/explore/logs/logsAutoRefresh';
2220
import {OurLogKnownFieldKey} from 'sentry/views/explore/logs/types';
23-
import {OrganizationContext} from 'sentry/views/organizationContext';
24-
25-
jest.mock('sentry/utils/useLocation');
26-
const mockedUsedLocation = jest.mocked(useLocation);
2721

2822
describe('LogsAutoRefresh', () => {
2923
const setAutoRefresh = jest.fn();
@@ -33,6 +27,17 @@ describe('LogsAutoRefresh', () => {
3327

3428
const projects = [ProjectFixture()];
3529

30+
const initialRouterConfig = {
31+
location: {
32+
pathname: `/organizations/${organization.slug}/explore/logs/`,
33+
query: {
34+
// Toggle is disabled if sort is not a timestamp.
35+
'logs.sort_bys': '-timestamp',
36+
},
37+
},
38+
route: '/organizations/:orgId/explore/logs/',
39+
};
40+
3641
const mockLogsData = [
3742
LogFixture({
3843
[OurLogKnownFieldKey.ORGANIZATION_ID]: Number(organization.id),
@@ -45,15 +50,6 @@ describe('LogsAutoRefresh', () => {
4550
MockApiClient.clearMockResponses();
4651
cleanup();
4752

48-
// Toggle is disabled if sort is not a timestamp.
49-
mockedUsedLocation.mockReturnValue(
50-
LocationFixture({
51-
query: {
52-
'logs.sort_bys': '-timestamp',
53-
},
54-
})
55-
);
56-
5753
// Init PageFiltersStore to make pageFiltersReady true (otherwise logs query won't fire)
5854
PageFiltersStore.init();
5955
PageFiltersStore.onInitializeUrlState(
@@ -82,15 +78,15 @@ describe('LogsAutoRefresh', () => {
8278
cleanup();
8379
});
8480

85-
const renderWithProviders = (children: React.ReactNode) => {
81+
const renderWithProviders = (
82+
children: React.ReactNode,
83+
options: Parameters<typeof render>[1]
84+
) => {
8685
return render(
87-
<OrganizationContext.Provider value={organization}>
88-
<LogsPageParamsProvider
89-
analyticsPageSource={LogsAnalyticsPageSource.EXPLORE_LOGS}
90-
>
91-
<LogsPageDataProvider>{children}</LogsPageDataProvider>
92-
</LogsPageParamsProvider>
93-
</OrganizationContext.Provider>
86+
<LogsPageParamsProvider analyticsPageSource={LogsAnalyticsPageSource.EXPLORE_LOGS}>
87+
<LogsPageDataProvider>{children}</LogsPageDataProvider>
88+
</LogsPageParamsProvider>,
89+
options
9490
);
9591
};
9692

@@ -103,7 +99,7 @@ describe('LogsAutoRefresh', () => {
10399

104100
it('renders correctly with time-based sort', () => {
105101
const mockApi = mockApiCall();
106-
renderWithProviders(<AutorefreshToggle />);
102+
renderWithProviders(<AutorefreshToggle />, {initialRouterConfig, organization});
107103

108104
const toggleLabel = screen.getByText('Auto-refresh');
109105
expect(toggleLabel).toBeInTheDocument();
@@ -116,7 +112,7 @@ describe('LogsAutoRefresh', () => {
116112

117113
it('calls setAutoRefresh when toggled', async () => {
118114
const mockApi = mockApiCall();
119-
renderWithProviders(<AutorefreshToggle />);
115+
renderWithProviders(<AutorefreshToggle />, {initialRouterConfig, organization});
120116

121117
const toggleSwitch = screen.getByRole('checkbox', {name: 'Auto-refresh'});
122118

@@ -130,7 +126,7 @@ describe('LogsAutoRefresh', () => {
130126
const mockApi = mockApiCall();
131127
jest.spyOn(logsPageParams, 'useLogsAutoRefresh').mockReturnValue(true);
132128

133-
renderWithProviders(<AutorefreshToggle />);
129+
renderWithProviders(<AutorefreshToggle />, {initialRouterConfig, organization});
134130

135131
const toggleSwitch = screen.getByRole('checkbox', {name: 'Auto-refresh'});
136132
expect(toggleSwitch).toBeChecked();

‎static/app/views/explore/logs/logsTab.spec.tsx

Lines changed: 22 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,9 @@
1-
import {LocationFixture} from 'sentry-fixture/locationFixture';
2-
31
import {initializeOrg} from 'sentry-test/initializeOrg';
42
import {render, screen} from 'sentry-test/reactTestingLibrary';
53

64
import PageFiltersStore from 'sentry/stores/pageFiltersStore';
75
import ProjectsStore from 'sentry/stores/projectsStore';
86
import {LogsAnalyticsPageSource} from 'sentry/utils/analytics/logsAnalyticsEvent';
9-
import {useLocation} from 'sentry/utils/useLocation';
107
import {LogsPageDataProvider} from 'sentry/views/explore/contexts/logs/logsPageData';
118
import {
129
LOGS_FIELDS_KEY,
@@ -19,10 +16,6 @@ import {AlwaysPresentLogFields} from 'sentry/views/explore/logs/constants';
1916
import {LogsTabContent} from 'sentry/views/explore/logs/logsTab';
2017
import {TraceItemDataset} from 'sentry/views/explore/types';
2118
import type {PickableDays} from 'sentry/views/explore/utils';
22-
import {OrganizationContext} from 'sentry/views/organizationContext';
23-
24-
jest.mock('sentry/utils/useLocation');
25-
const mockUseLocation = jest.mocked(useLocation);
2619

2720
const datePageFilterProps: PickableDays = {
2821
defaultPeriod: '7d' as const,
@@ -47,18 +40,29 @@ describe('LogsTabContent', function () {
4740

4841
function ProviderWrapper({children}: {children: React.ReactNode}) {
4942
return (
50-
<OrganizationContext.Provider value={organization}>
51-
<LogsPageParamsProvider
52-
analyticsPageSource={LogsAnalyticsPageSource.EXPLORE_LOGS}
53-
>
54-
<TraceItemAttributeProvider traceItemType={TraceItemDataset.LOGS} enabled>
55-
<LogsPageDataProvider>{children}</LogsPageDataProvider>
56-
</TraceItemAttributeProvider>
57-
</LogsPageParamsProvider>
58-
</OrganizationContext.Provider>
43+
<LogsPageParamsProvider analyticsPageSource={LogsAnalyticsPageSource.EXPLORE_LOGS}>
44+
<TraceItemAttributeProvider traceItemType={TraceItemDataset.LOGS} enabled>
45+
<LogsPageDataProvider>{children}</LogsPageDataProvider>
46+
</TraceItemAttributeProvider>
47+
</LogsPageParamsProvider>
5948
);
6049
}
6150

51+
const initialRouterConfig = {
52+
location: {
53+
pathname: `/organizations/${organization.slug}/explore/logs/`,
54+
query: {
55+
start: '2025-04-10T14%3A37%3A55',
56+
end: '2025-04-10T20%3A04%3A51',
57+
project: project.id,
58+
[LOGS_FIELDS_KEY]: ['message', 'sentry.message.parameters.0'],
59+
[LOGS_SORT_BYS_KEY]: ['sentry.message.parameters.0'],
60+
[LOGS_QUERY_KEY]: 'severity:error',
61+
},
62+
},
63+
route: '/organizations/:orgId/explore/logs/',
64+
};
65+
6266
beforeEach(function () {
6367
MockApiClient.clearMockResponses();
6468

@@ -79,16 +83,6 @@ describe('LogsTabContent', function () {
7983
new Set()
8084
);
8185

82-
mockUseLocation.mockReturnValue(
83-
LocationFixture({
84-
pathname: `/organizations/${organization.slug}/explore/logs/?end=2025-04-10T20%3A04%3A51&project=${project.id}&start=2025-04-10T14%3A37%3A55`,
85-
query: {
86-
[LOGS_FIELDS_KEY]: ['message', 'sentry.message.parameters.0'],
87-
[LOGS_SORT_BYS_KEY]: ['sentry.message.parameters.0'],
88-
[LOGS_QUERY_KEY]: 'severity:error',
89-
},
90-
})
91-
);
9286
eventTableMock = MockApiClient.addMockResponse({
9387
url: `/organizations/${organization.slug}/events/`,
9488
method: 'GET',
@@ -185,7 +179,8 @@ describe('LogsTabContent', function () {
185179
render(
186180
<ProviderWrapper>
187181
<LogsTabContent {...datePageFilterProps} />
188-
</ProviderWrapper>
182+
</ProviderWrapper>,
183+
{initialRouterConfig, organization}
189184
);
190185

191186
expect(eventTableMock).toHaveBeenCalledWith(

‎static/app/views/explore/logs/tables/logsAggregateTable.spec.tsx

Lines changed: 26 additions & 45 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,9 @@
1-
import React from 'react';
2-
import {ThemeProvider} from '@emotion/react';
3-
import {LocationFixture} from 'sentry-fixture/locationFixture';
4-
51
import {initializeOrg} from 'sentry-test/initializeOrg';
6-
import {makeTestQueryClient} from 'sentry-test/queryClient';
72
import {render, screen, within} from 'sentry-test/reactTestingLibrary';
83

94
import PageFiltersStore from 'sentry/stores/pageFiltersStore';
105
import ProjectsStore from 'sentry/stores/projectsStore';
116
import {LogsAnalyticsPageSource} from 'sentry/utils/analytics/logsAnalyticsEvent';
12-
import {QueryClientProvider} from 'sentry/utils/queryClient';
13-
import {useLocation} from 'sentry/utils/useLocation';
147
import {
158
LOGS_AGGREGATE_FN_KEY,
169
LOGS_AGGREGATE_PARAM_KEY,
@@ -21,39 +14,23 @@ import {
2114
} from 'sentry/views/explore/contexts/logs/logsPageParams';
2215
import {LOGS_AGGREGATE_SORT_BYS_KEY} from 'sentry/views/explore/contexts/logs/sortBys';
2316
import * as useLogsQueryModule from 'sentry/views/explore/logs/useLogsQuery';
24-
import {OrganizationContext} from 'sentry/views/organizationContext';
2517

2618
import {LogsAggregateTable} from './logsAggregateTable';
2719

2820
jest.mock('sentry/views/explore/logs/useLogsQuery');
2921

30-
jest.mock('sentry/utils/useLocation');
31-
const mockUseLocation = jest.mocked(useLocation);
32-
33-
const queryClient = makeTestQueryClient();
34-
3522
describe('LogsAggregateTable', () => {
3623
const {organization, project} = initializeOrg({
3724
organization: {
3825
features: ['ourlogs-enabled'],
3926
},
4027
});
41-
function createWrapper() {
42-
return function Wrapper({children}: {children?: React.ReactNode}) {
43-
return (
44-
<QueryClientProvider client={queryClient}>
45-
<OrganizationContext.Provider value={organization}>
46-
<ThemeProvider theme={{}}>
47-
<LogsPageParamsProvider
48-
analyticsPageSource={LogsAnalyticsPageSource.EXPLORE_LOGS}
49-
>
50-
{children}
51-
</LogsPageParamsProvider>
52-
</ThemeProvider>
53-
</OrganizationContext.Provider>
54-
</QueryClientProvider>
55-
);
56-
};
28+
function LogsAggregateTableWithParamsProvider() {
29+
return (
30+
<LogsPageParamsProvider analyticsPageSource={LogsAnalyticsPageSource.EXPLORE_LOGS}>
31+
<LogsAggregateTable />
32+
</LogsPageParamsProvider>
33+
);
5734
}
5835

5936
ProjectsStore.loadInitialData([project]);
@@ -72,22 +49,26 @@ describe('LogsAggregateTable', () => {
7249
},
7350
new Set()
7451
);
52+
const initialRouterConfig = {
53+
location: {
54+
pathname: `/organizations/${organization.slug}/explore/logs/`,
55+
query: {
56+
project: project.id,
57+
start: '2025-04-10T14%3A37%3A55',
58+
end: '2025-04-10T20%3A04%3A51',
59+
[LOGS_AGGREGATE_SORT_BYS_KEY]: '-p99(severity_number)',
60+
[LOGS_QUERY_KEY]: 'test',
61+
[LOGS_GROUP_BY_KEY]: 'message.template',
62+
[LOGS_AGGREGATE_FN_KEY]: 'p99',
63+
[LOGS_AGGREGATE_PARAM_KEY]: 'severity_number',
64+
[LOGS_FIELDS_KEY]: ['timestamp', 'message'],
65+
},
66+
},
67+
route: '/organizations/:orgId/explore/logs/',
68+
};
7569

7670
beforeEach(function () {
7771
MockApiClient.clearMockResponses();
78-
mockUseLocation.mockReturnValue(
79-
LocationFixture({
80-
pathname: `/organizations/${organization.slug}/explore/logs/?end=2025-04-10T20%3A04%3A51&project=${project.id}&start=2025-04-10T14%3A37%3A55`,
81-
query: {
82-
[LOGS_AGGREGATE_SORT_BYS_KEY]: '-p99(severity_number)',
83-
[LOGS_QUERY_KEY]: 'test',
84-
[LOGS_GROUP_BY_KEY]: 'message.template',
85-
[LOGS_AGGREGATE_FN_KEY]: 'p99',
86-
[LOGS_AGGREGATE_PARAM_KEY]: 'severity_number',
87-
[LOGS_FIELDS_KEY]: ['timestamp', 'message'],
88-
},
89-
})
90-
);
9172
});
9273

9374
it('renders loading state', () => {
@@ -97,7 +78,7 @@ describe('LogsAggregateTable', () => {
9778
data: null,
9879
pageLinks: undefined,
9980
});
100-
render(<LogsAggregateTable />, {wrapper: createWrapper()});
81+
render(<LogsAggregateTableWithParamsProvider />, {initialRouterConfig});
10182
expect(screen.getByLabelText('Aggregates')).toBeInTheDocument();
10283
});
10384

@@ -108,7 +89,7 @@ describe('LogsAggregateTable', () => {
10889
data: null,
10990
pageLinks: undefined,
11091
});
111-
render(<LogsAggregateTable />, {wrapper: createWrapper()});
92+
render(<LogsAggregateTableWithParamsProvider />, {initialRouterConfig});
11293
expect(screen.getByTestId('error-indicator')).toBeInTheDocument();
11394
});
11495

@@ -136,7 +117,7 @@ describe('LogsAggregateTable', () => {
136117
},
137118
pageLinks: undefined,
138119
});
139-
render(<LogsAggregateTable />, {wrapper: createWrapper()});
120+
render(<LogsAggregateTableWithParamsProvider />, {initialRouterConfig});
140121
const rows = screen.getAllByTestId('grid-body-row');
141122
expect(rows).toHaveLength(3);
142123
const expected = [

0 commit comments

Comments
 (0)