groupSidebar.spec.tsx 8.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322
  1. import {Tags} from 'sentry-fixture/tags';
  2. import {initializeOrg} from 'sentry-test/initializeOrg';
  3. import {
  4. render,
  5. screen,
  6. userEvent,
  7. waitFor,
  8. within,
  9. } from 'sentry-test/reactTestingLibrary';
  10. import MemberListStore from 'sentry/stores/memberListStore';
  11. import GroupSidebar from './groupSidebar';
  12. describe('GroupSidebar', function () {
  13. let group = TestStubs.Group({tags: Tags()});
  14. const {organization, project} = initializeOrg();
  15. const environment = 'production';
  16. let tagsMock: jest.Mock;
  17. beforeEach(function () {
  18. MemberListStore.loadInitialData([]);
  19. MockApiClient.addMockResponse({
  20. url: '/projects/org-slug/project-slug/events/1/committers/',
  21. body: {committers: []},
  22. });
  23. MockApiClient.addMockResponse({
  24. url: '/projects/org-slug/project-slug/events/1/owners/',
  25. body: {
  26. owners: [],
  27. rules: [],
  28. },
  29. });
  30. MockApiClient.addMockResponse({
  31. url: `/organizations/${organization.slug}/issues/1/integrations/`,
  32. body: [],
  33. });
  34. MockApiClient.addMockResponse({
  35. url: `/organizations/${organization.slug}/issues/1/`,
  36. body: group,
  37. });
  38. MockApiClient.addMockResponse({
  39. url: `/organizations/${organization.slug}/issues/1/current-release/`,
  40. body: {},
  41. });
  42. MockApiClient.addMockResponse({
  43. url: `/organizations/${organization.slug}/issues/1/external-issues/`,
  44. body: [],
  45. });
  46. MockApiClient.addMockResponse({
  47. url: `/projects/${organization.slug}/${project.slug}/codeowners/`,
  48. body: [],
  49. });
  50. MockApiClient.addMockResponse({
  51. url: `/prompts-activity/`,
  52. body: {},
  53. });
  54. MockApiClient.addMockResponse({
  55. url: `/organizations/${organization.slug}/code-mappings/?project=-1`,
  56. method: 'GET',
  57. body: [],
  58. });
  59. tagsMock = MockApiClient.addMockResponse({
  60. url: `/organizations/${organization.slug}/issues/1/tags/`,
  61. body: Tags(),
  62. });
  63. MockApiClient.addMockResponse({
  64. url: `/organizations/${organization.slug}/users/`,
  65. body: [],
  66. });
  67. MockApiClient.addMockResponse({
  68. url: `/organizations/${organization.slug}/issues/${group.id}/first-last-release/`,
  69. method: 'GET',
  70. });
  71. });
  72. afterEach(function () {
  73. MockApiClient.clearMockResponses();
  74. });
  75. describe('sidebar', () => {
  76. it('should make a request to the /tags/ endpoint to get top values', async () => {
  77. render(
  78. <GroupSidebar
  79. group={group}
  80. project={project}
  81. organization={organization}
  82. event={TestStubs.Event()}
  83. environments={[environment]}
  84. />
  85. );
  86. expect(await screen.findByText('browser')).toBeInTheDocument();
  87. expect(tagsMock).toHaveBeenCalled();
  88. });
  89. });
  90. describe('renders with tags', function () {
  91. it('renders', async function () {
  92. render(
  93. <GroupSidebar
  94. group={group}
  95. project={project}
  96. organization={organization}
  97. event={TestStubs.Event()}
  98. environments={[environment]}
  99. />
  100. );
  101. expect(await screen.findByText('browser')).toBeInTheDocument();
  102. expect(screen.getByText('device')).toBeInTheDocument();
  103. expect(screen.getByText('url')).toBeInTheDocument();
  104. expect(screen.getByText('environment')).toBeInTheDocument();
  105. expect(screen.getByText('user')).toBeInTheDocument();
  106. });
  107. });
  108. describe('environment toggle', function () {
  109. it('re-requests tags with correct environment', async function () {
  110. const stagingEnv = 'staging';
  111. const {rerender} = render(
  112. <GroupSidebar
  113. group={group}
  114. project={project}
  115. organization={organization}
  116. event={TestStubs.Event()}
  117. environments={[environment]}
  118. />
  119. );
  120. expect(await screen.findByText('browser')).toBeInTheDocument();
  121. expect(tagsMock).toHaveBeenCalledTimes(1);
  122. rerender(
  123. <GroupSidebar
  124. group={group}
  125. project={project}
  126. organization={organization}
  127. event={TestStubs.Event()}
  128. environments={[stagingEnv]}
  129. />
  130. );
  131. expect(await screen.findByText('browser')).toBeInTheDocument();
  132. expect(tagsMock).toHaveBeenCalledTimes(2);
  133. expect(tagsMock).toHaveBeenCalledWith(
  134. '/organizations/org-slug/issues/1/tags/',
  135. expect.objectContaining({
  136. query: expect.objectContaining({
  137. environment: ['staging'],
  138. }),
  139. })
  140. );
  141. });
  142. });
  143. describe('renders without tags', function () {
  144. beforeEach(function () {
  145. group = TestStubs.Group();
  146. MockApiClient.addMockResponse({
  147. url: '/organization/org-slug/issues/1/',
  148. body: group,
  149. });
  150. MockApiClient.addMockResponse({
  151. url: '/organizations/org-slug/issues/1/tags/',
  152. body: [],
  153. });
  154. });
  155. it('renders empty text', async function () {
  156. render(
  157. <GroupSidebar
  158. group={group}
  159. project={project}
  160. organization={organization}
  161. event={TestStubs.Event()}
  162. environments={[environment]}
  163. />
  164. );
  165. expect(
  166. await screen.findByText('No tags found in the selected environments')
  167. ).toBeInTheDocument();
  168. });
  169. });
  170. it('renders participants and viewers', async () => {
  171. const users = [
  172. TestStubs.User({
  173. id: '2',
  174. name: 'John Smith',
  175. email: 'johnsmith@example.com',
  176. }),
  177. TestStubs.User({
  178. id: '3',
  179. name: 'Sohn Jmith',
  180. email: 'sohnjmith@example.com',
  181. }),
  182. ];
  183. render(
  184. <GroupSidebar
  185. group={{
  186. ...group,
  187. participants: users,
  188. seenBy: users,
  189. }}
  190. project={project}
  191. organization={organization}
  192. event={TestStubs.Event()}
  193. environments={[]}
  194. />
  195. );
  196. expect(
  197. await screen.findByRole('heading', {name: 'Participants (2)'})
  198. ).toBeInTheDocument();
  199. expect(screen.getByRole('heading', {name: 'Viewers (2)'})).toBeInTheDocument();
  200. });
  201. it('expands participants and viewers', async () => {
  202. const org = {
  203. ...organization,
  204. features: ['participants-purge'],
  205. };
  206. const teams = [{...TestStubs.Team(), type: 'team'}];
  207. const users = [
  208. TestStubs.User({
  209. id: '2',
  210. name: 'John Smith',
  211. email: 'johnsmith@example.com',
  212. type: 'user',
  213. }),
  214. TestStubs.User({
  215. id: '3',
  216. name: 'Sohn Jmith',
  217. email: 'sohnjmith@example.com',
  218. type: 'user',
  219. }),
  220. ];
  221. render(
  222. <GroupSidebar
  223. group={{
  224. ...group,
  225. participants: [...teams, ...users],
  226. seenBy: users,
  227. }}
  228. project={project}
  229. organization={org}
  230. event={TestStubs.Event()}
  231. environments={[]}
  232. />,
  233. {
  234. organization: org,
  235. }
  236. );
  237. expect(
  238. await screen.findByRole('heading', {name: 'Participants (1 Team, 2 Individuals)'})
  239. ).toBeInTheDocument();
  240. expect(screen.queryByText('#team-slug')).not.toBeInTheDocument();
  241. await userEvent.click(
  242. screen.getAllByRole('button', {name: 'Expand Participants'})[0]
  243. );
  244. await waitFor(() => expect(screen.getByText('#team-slug')).toBeVisible());
  245. });
  246. describe('displays mobile tags when issue platform is mobile', function () {
  247. beforeEach(function () {
  248. group = TestStubs.Group();
  249. MockApiClient.addMockResponse({
  250. url: '/issues/1/',
  251. body: group,
  252. });
  253. });
  254. it('renders mobile tags on top of tag summary for mobile platforms', async function () {
  255. render(
  256. <GroupSidebar
  257. group={group}
  258. project={{...project, platform: 'react-native'}}
  259. organization={{
  260. ...organization,
  261. features: [...organization.features, 'issue-details-tag-improvements'],
  262. }}
  263. event={TestStubs.Event()}
  264. environments={[environment]}
  265. />
  266. );
  267. await waitFor(() => expect(tagsMock).toHaveBeenCalled());
  268. expect(
  269. within(await screen.findByTestId('top-distribution-wrapper')).getByText('device')
  270. ).toBeInTheDocument();
  271. });
  272. it('does not render mobile tags on top of tag summary for non mobile platforms', async function () {
  273. render(
  274. <GroupSidebar
  275. group={group}
  276. project={project}
  277. organization={{
  278. ...organization,
  279. features: [...organization.features, 'issue-details-tag-improvements'],
  280. }}
  281. event={TestStubs.Event()}
  282. environments={[environment]}
  283. />
  284. );
  285. await waitFor(() => expect(tagsMock).toHaveBeenCalled());
  286. expect(
  287. within(await screen.findByTestId('top-distribution-wrapper')).queryByText(
  288. 'device'
  289. )
  290. ).not.toBeInTheDocument();
  291. });
  292. });
  293. });