groupDetails.spec.jsx 7.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261
  1. import {browserHistory} from 'react-router';
  2. import {initializeOrg} from 'sentry-test/initializeOrg';
  3. import {act, render, screen, waitFor} from 'sentry-test/reactTestingLibrary';
  4. import GroupStore from 'sentry/stores/groupStore';
  5. import PageFiltersStore from 'sentry/stores/pageFiltersStore';
  6. import ProjectsStore from 'sentry/stores/projectsStore';
  7. import {IssueCategory} from 'sentry/types';
  8. import GroupDetails from 'sentry/views/organizationGroupDetails';
  9. jest.unmock('sentry/utils/recreateRoute');
  10. const SAMPLE_EVENT_ALERT_TEXT =
  11. 'You are viewing a sample error. Configure Sentry to start viewing real errors.';
  12. describe('groupDetails', () => {
  13. const group = TestStubs.Group({issueCategory: IssueCategory.ERROR});
  14. const event = TestStubs.Event();
  15. const project = TestStubs.Project({teams: [TestStubs.Team()]});
  16. const selection = {environments: []};
  17. const routes = [
  18. {path: '/', childRoutes: [], component: null},
  19. {childRoutes: [], component: null},
  20. {
  21. path: '/organizations/:orgId/issues/:groupId/',
  22. indexRoute: null,
  23. childRoutes: [],
  24. componentPromise: () => {},
  25. component: null,
  26. },
  27. {
  28. componentPromise: null,
  29. component: null,
  30. },
  31. ];
  32. const {organization, router, routerContext} = initializeOrg({
  33. project,
  34. router: {
  35. location: {
  36. pathname: `/organizations/org-slug/issues/${group.id}/`,
  37. query: {},
  38. search: '?foo=bar',
  39. hash: '#hash',
  40. },
  41. params: {
  42. groupId: group.id,
  43. },
  44. routes,
  45. },
  46. });
  47. function MockComponent({group: groupProp, environments, eventError}) {
  48. return (
  49. <div>
  50. Group Details Mock
  51. <div>title: {groupProp.title}</div>
  52. <div>environment: {environments.join(' ')}</div>
  53. {eventError && <div>eventError</div>}
  54. </div>
  55. );
  56. }
  57. const createWrapper = (props = {selection}) => {
  58. return render(
  59. <GroupDetails {...router} router={router} selection={props.selection}>
  60. <MockComponent />
  61. </GroupDetails>,
  62. {context: routerContext}
  63. );
  64. };
  65. beforeEach(() => {
  66. act(() => ProjectsStore.loadInitialData(organization.projects));
  67. MockApiClient.addMockResponse({
  68. url: `/issues/${group.id}/`,
  69. body: {...group},
  70. });
  71. MockApiClient.addMockResponse({
  72. url: `/issues/${group.id}/events/latest/`,
  73. statusCode: 200,
  74. body: {
  75. ...event,
  76. },
  77. });
  78. MockApiClient.addMockResponse({
  79. url: `/projects/org-slug/${project.slug}/issues/`,
  80. method: 'PUT',
  81. body: {
  82. hasSeen: false,
  83. },
  84. });
  85. MockApiClient.addMockResponse({
  86. url: '/organizations/org-slug/projects/',
  87. body: [project],
  88. });
  89. MockApiClient.addMockResponse({
  90. url: '/organizations/org-slug/users/',
  91. body: [],
  92. });
  93. MockApiClient.addMockResponse({
  94. url: `/issues/${group.id}/first-last-release/`,
  95. body: {firstRelease: group.firstRelease, lastRelease: group.lastRelease},
  96. });
  97. MockApiClient.addMockResponse({
  98. url: `/organizations/${organization.slug}/events/`,
  99. statusCode: 200,
  100. body: {
  101. data: [
  102. {
  103. 'count()': 1,
  104. },
  105. ],
  106. },
  107. });
  108. MockApiClient.addMockResponse({
  109. url: `/organizations/${organization.slug}/environments/`,
  110. body: TestStubs.Environments(),
  111. });
  112. });
  113. afterEach(() => {
  114. act(() => ProjectsStore.reset());
  115. GroupStore.reset();
  116. PageFiltersStore.reset();
  117. MockApiClient.clearMockResponses();
  118. });
  119. it('renders', async function () {
  120. act(() => ProjectsStore.reset());
  121. createWrapper();
  122. expect(screen.queryByText(group.title)).not.toBeInTheDocument();
  123. act(() => ProjectsStore.loadInitialData(organization.projects));
  124. expect(await screen.findByText(group.title, {exact: false})).toBeInTheDocument();
  125. // Sample event alert should not show up
  126. expect(screen.queryByText(SAMPLE_EVENT_ALERT_TEXT)).not.toBeInTheDocument();
  127. });
  128. it('renders error when issue is not found', async function () {
  129. MockApiClient.addMockResponse({
  130. url: `/issues/${group.id}/`,
  131. statusCode: 404,
  132. });
  133. MockApiClient.addMockResponse({
  134. url: `/issues/${group.id}/events/latest/`,
  135. statusCode: 404,
  136. });
  137. createWrapper();
  138. await waitFor(() =>
  139. expect(screen.queryByTestId('loading-indicator')).not.toBeInTheDocument()
  140. );
  141. expect(
  142. await screen.findByText('The issue you were looking for was not found.')
  143. ).toBeInTheDocument();
  144. });
  145. it('renders MissingProjectMembership when trying to access issue in project the user does not belong to', async function () {
  146. MockApiClient.addMockResponse({
  147. url: `/issues/${group.id}/`,
  148. statusCode: 403,
  149. });
  150. MockApiClient.addMockResponse({
  151. url: `/issues/${group.id}/events/latest/`,
  152. statusCode: 403,
  153. });
  154. createWrapper();
  155. await waitFor(() =>
  156. expect(screen.queryByTestId('loading-indicator')).not.toBeInTheDocument()
  157. );
  158. expect(
  159. await screen.findByText(
  160. 'No teams have access to this project yet. Ask an admin to add your team to this project.'
  161. )
  162. ).toBeInTheDocument();
  163. });
  164. it('fetches issue details for a given environment', async function () {
  165. createWrapper({
  166. selection: {environments: ['staging']},
  167. });
  168. await waitFor(() =>
  169. expect(screen.queryByTestId('loading-indicator')).not.toBeInTheDocument()
  170. );
  171. expect(await screen.findByText('environment: staging')).toBeInTheDocument();
  172. });
  173. /**
  174. * This is legacy code that I'm not even sure still happens
  175. */
  176. it('redirects to new issue if params id !== id returned from API request', async function () {
  177. MockApiClient.addMockResponse({
  178. url: `/issues/${group.id}/`,
  179. body: {...group, id: 'new-id'},
  180. });
  181. createWrapper();
  182. expect(screen.queryByText('Group Details Mock')).not.toBeInTheDocument();
  183. await waitFor(() => {
  184. expect(browserHistory.push).toHaveBeenCalledTimes(1);
  185. });
  186. expect(browserHistory.push).toHaveBeenCalledWith(
  187. '/organizations/org-slug/issues/new-id/?foo=bar#hash'
  188. );
  189. });
  190. it('renders issue event error', async function () {
  191. MockApiClient.addMockResponse({
  192. url: `/issues/${group.id}/events/latest/`,
  193. statusCode: 404,
  194. });
  195. createWrapper();
  196. expect(await screen.findByText('eventError')).toBeInTheDocument();
  197. });
  198. it('renders for review reason', async function () {
  199. MockApiClient.addMockResponse({
  200. url: `/issues/${group.id}/`,
  201. body: {
  202. ...group,
  203. inbox: {
  204. date_added: '2020-11-24T13:17:42.248751Z',
  205. reason: 0,
  206. reason_details: null,
  207. },
  208. },
  209. });
  210. act(() => ProjectsStore.reset());
  211. createWrapper();
  212. act(() => ProjectsStore.loadInitialData(organization.projects));
  213. expect(await screen.findByText('New Issue')).toBeInTheDocument();
  214. });
  215. it('renders alert for sample event', async function () {
  216. const sampleGroup = TestStubs.Group({issueCategory: IssueCategory.ERROR});
  217. sampleGroup.tags.push({key: 'sample_event'});
  218. MockApiClient.addMockResponse({
  219. url: `/issues/${group.id}/`,
  220. body: {...sampleGroup},
  221. });
  222. createWrapper();
  223. expect(await screen.findByText(SAMPLE_EVENT_ALERT_TEXT)).toBeInTheDocument();
  224. });
  225. });