Skip to content

Commit

Permalink
ref(issue-stream): Remove HoCs from overviewFc.tsx (#83141)
Browse files Browse the repository at this point in the history 
Replaces the HoCs around the default export and replaces with hooks.
Straightforward change, but required a lot of test changes because types
started to be enforced better and we can't override using props any
longer.
  • Loading branch information
@malwilley
malwilley authored Jan 9, 2025
1 parent 6259fc7 commit e2c93e8
Show file tree
Hide file tree
Showing 2 changed files with 154 additions and 134 deletions.
214 changes: 118 additions & 96 deletions static/app/views/issueList/overviewFc.spec.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -22,9 +22,11 @@ import {textWithMarkupMatcher} from 'sentry-test/utils';

import StreamGroup from 'sentry/components/stream/group';
import {DEFAULT_QUERY} from 'sentry/constants';
import PageFiltersStore from 'sentry/stores/pageFiltersStore';
import ProjectsStore from 'sentry/stores/projectsStore';
import TagStore from 'sentry/stores/tagStore';
import {SavedSearchVisibility} from 'sentry/types/group';
import type {RouteComponentProps} from 'sentry/types/legacyReactRouter';
import localStorageWrapper from 'sentry/utils/localStorage';
import * as parseLinkHeader from 'sentry/utils/parseLinkHeader';
import IssueListWithStores, {
Expand Down Expand Up @@ -63,7 +65,7 @@ const {organization, projects, router} = initializeOrg({
const routerProps = {
params: router.params,
location: router.location,
};
} as RouteComponentProps<{}, {searchId?: string}>;

function getSearchInput() {
const input = screen.getAllByRole('combobox', {name: 'Add a search term'}).at(-1);
Expand Down Expand Up @@ -157,26 +159,21 @@ describe('IssueList', function () {
body: [project],
});

PageFiltersStore.onInitializeUrlState(
{
projects: [parseInt(projects[0]!.id, 10)],
environments: [],
datetime: {period: '14d', start: null, end: null, utc: null},
},
new Set()
);

TagStore.init?.();

props = {
api,
savedSearchLoading: false,
savedSearches: [savedSearch],
useOrgSavedSearches: true,
selection: {
projects: [parseInt(projects[0]!.id, 10)],
environments: [],
datetime: {period: '14d'},
},
location: {query: {query: DEFAULT_QUERY}, search: `query=${DEFAULT_QUERY}`},
params: {},
organization,
tags: tags.reduce<Record<string, (typeof tags)[number]>>((acc, tag) => {
acc[tag.key] = tag;

return acc;
}, {}),
};
});

Expand Down Expand Up @@ -393,22 +390,22 @@ describe('IssueList', function () {
},
});

const defaultProps = {
...props,
...routerProps,
useOrgSavedSearches: true,
selection: {
PageFiltersStore.onInitializeUrlState(
{
projects: [],
environments: [],
datetime: {period: '14d'},
datetime: {period: '14d', start: null, end: null, utc: null},
},
organization: OrganizationFixture({
features: ['issue-stream-performance'],
}),
new Set()
);

const defaultProps = {
...props,
...routerProps,
};
const {unmount} = render(<IssueListWithStores {...defaultProps} />, {
router,
organization: defaultProps.organization,
organization,
});

expect(
Expand All @@ -420,7 +417,7 @@ describe('IssueList', function () {
// Mount component again, getting from cache
render(<IssueListWithStores {...defaultProps} />, {
router,
organization: defaultProps.organization,
organization,
});

expect(
Expand Down Expand Up @@ -481,7 +478,7 @@ describe('IssueList', function () {
pathname: '/organizations/org-slug/issues/',
query: {
environment: [],
project: [],
project: [3559],
referrer: 'issue-list',
sort: '',
query: 'dogs',
Expand Down Expand Up @@ -671,23 +668,25 @@ describe('IssueList', function () {
},
});

render(
<IssueListWithStores
{...newRouter}
selection={{
projects: [123],
environments: ['prod'],
datetime: {
end: null,
period: null,
start: null,
utc: null,
},
}}
/>,
{router: newRouter, organization}
PageFiltersStore.onInitializeUrlState(
{
projects: [123],
environments: ['prod'],
datetime: {
period: null,
start: null,
end: null,
utc: null,
},
},
new Set()
);

render(<IssueListWithStores {...(newRouter as any)} />, {
router: newRouter,
organization,
});

const createPin = MockApiClient.addMockResponse({
url: '/organizations/org-slug/pinned-searches/',
method: 'PUT',
Expand Down Expand Up @@ -750,22 +749,26 @@ describe('IssueList', function () {
})
);

PageFiltersStore.onInitializeUrlState(
{
projects: [123],
environments: ['prod'],
datetime: {
period: null,
start: null,
end: null,
utc: null,
},
},
new Set()
);

render(
<IssueListWithStores
{...newRouter}
selection={{
projects: [123],
environments: ['prod'],
datetime: {
end: null,
period: null,
start: null,
utc: null,
},
}}
savedSearch={localSavedSearch}
/>,
{router: newRouter, organization}
<IssueListWithStores {...(newRouter as any)} savedSearch={localSavedSearch} />,
{
router: newRouter,
organization,
}
);

await userEvent.click(await screen.findByLabelText(/Remove Default/i));
Expand Down Expand Up @@ -810,7 +813,7 @@ describe('IssueList', function () {
cursor: '1443575000:0:0',
page: 1,
environment: [],
project: [],
project: [3559],
query: DEFAULT_QUERY,
statsPeriod: '14d',
referrer: 'issue-list',
Expand All @@ -836,7 +839,7 @@ describe('IssueList', function () {
cursor: '1443574000:0:0',
page: 2,
environment: [],
project: [],
project: [3559],
query: DEFAULT_QUERY,
statsPeriod: '14d',
referrer: 'issue-list',
Expand All @@ -858,7 +861,7 @@ describe('IssueList', function () {
cursor: '1443575000:0:1',
page: 1,
environment: [],
project: [],
project: [3559],
query: DEFAULT_QUERY,
statsPeriod: '14d',
referrer: 'issue-list',
Expand All @@ -882,7 +885,7 @@ describe('IssueList', function () {
cursor: undefined,
environment: [],
page: undefined,
project: [],
project: [3559],
query: DEFAULT_QUERY,
statsPeriod: '14d',
referrer: 'issue-list',
Expand Down Expand Up @@ -953,14 +956,17 @@ describe('IssueList', function () {
router,
});

rerender(
<IssueListOverview
{...routerProps}
{...props}
selection={{projects: [99], environments: [], datetime: {period: '24h'}}}
/>
PageFiltersStore.onInitializeUrlState(
{
projects: [99],
environments: [],
datetime: {period: '24h', start: null, end: null, utc: null},
},
new Set()
);

rerender(<IssueListOverview {...routerProps} {...props} />);

await waitFor(() => {
expect(fetchDataMock).toHaveBeenCalled();
});
Expand Down Expand Up @@ -988,14 +994,21 @@ describe('IssueList', function () {
const {rerender} = render(<IssueListOverview {...routerProps} {...props} />, {
router,
});
const selection = {projects: [99], environments: [], datetime: {}};
rerender(<IssueListOverview {...routerProps} {...props} selection={selection} />);
PageFiltersStore.onInitializeUrlState(
{
projects: [99],
environments: [],
datetime: {period: '14d', start: null, end: null, utc: null},
},
new Set()
);
rerender(<IssueListOverview {...routerProps} {...props} />);

await waitFor(() => {
expect(fetchDataMock).toHaveBeenLastCalledWith(
'/organizations/org-slug/issues/',
expect.objectContaining({
data: 'collapse=stats&collapse=unhandled&expand=owners&expand=inbox&limit=25&project=99&query=is%3Aunresolved%20issue.priority%3A%5Bhigh%2C%20medium%5D&savedSearch=1&shortIdLookup=1&statsPeriod=14d',
data: 'collapse=stats&collapse=unhandled&expand=owners&expand=inbox&limit=25&project=99&query=is%3Aunresolved%20issue.priority%3A%5Bhigh%2C%20medium%5D&savedSearch=0&shortIdLookup=1&statsPeriod=14d',
})
);
});
Expand All @@ -1012,19 +1025,22 @@ describe('IssueList', function () {
expect(fetchMembersRequest).toHaveBeenCalled();
});

const selection = {
projects: [99],
environments: [],
datetime: {period: '24h'},
};
rerender(<IssueListOverview {...routerProps} {...props} selection={selection} />);
PageFiltersStore.onInitializeUrlState(
{
projects: [99],
environments: [],
datetime: {period: '24h', start: null, end: null, utc: null},
},
new Set()
);
rerender(<IssueListOverview {...routerProps} {...props} />);

await waitFor(() => {
expect(fetchMembersRequest).toHaveBeenCalledWith(
expect.anything(),
expect.objectContaining({
query: {
project: selection.projects.map(p => p.toString()),
project: ['99'],
},
})
);
Expand Down Expand Up @@ -1102,6 +1118,17 @@ describe('IssueList', function () {
});

describe('Error Robot', function () {
beforeEach(() => {
PageFiltersStore.onInitializeUrlState(
{
projects: [],
environments: [],
datetime: {period: '14d', start: null, end: null, utc: null},
},
new Set()
);
});

const createWrapper = async (moreProps: any) => {
MockApiClient.addMockResponse({
url: '/organizations/org-slug/issues/',
Expand All @@ -1113,20 +1140,13 @@ describe('IssueList', function () {

const defaultProps = {
...props,
useOrgSavedSearches: true,
selection: {
projects: [],
environments: [],
datetime: {period: '14d'},
},
...merge({}, routerProps, {
params: {},
location: {query: {query: DEFAULT_QUERY}, search: 'query=is:unresolved'},
}),
organization: OrganizationFixture(),
...moreProps,
};
render(<IssueListOverview {...defaultProps} />, {router});
render(<IssueListOverview {...defaultProps} />, {router, organization});

await waitForElementToBeRemoved(() => screen.queryByTestId('loading-indicator'));
};
Expand Down Expand Up @@ -1345,6 +1365,7 @@ describe('IssueList', function () {
const {router: newRouter} = initializeOrg();
const {rerender} = render(<IssueListOverview {...props} />, {
router: newRouter,
organization,
});

await waitFor(() => {
Expand Down Expand Up @@ -1397,7 +1418,7 @@ describe('IssueList', function () {
])
);

render(<IssueListOverview {...props} />, {router});
render(<IssueListOverview {...props} />, {router, organization});

await waitFor(() => {
expect(
Expand Down Expand Up @@ -1428,19 +1449,20 @@ describe('IssueList', function () {
])
);

render(
<IssueListOverview
{...props}
selection={{
...props.selection,
projects: [Number(project.id), Number(projectBar.id)],
}}
/>,
PageFiltersStore.onInitializeUrlState(
{
router: newRouter,
}
projects: [Number(project.id), Number(projectBar.id)],
environments: [],
datetime: {period: '14d', start: null, end: null, utc: null},
},
new Set()
);

render(<IssueListOverview {...props} />, {
router: newRouter,
organization,
});

await waitFor(() => {
expect(
screen.getByText(
Expand Down
Loading

0 comments on commit e2c93e8

Please sign in to comment.