assigneeSelector.spec.jsx 12 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369
  1. import {mountWithTheme} from 'sentry-test/enzyme';
  2. import {openInviteMembersModal} from 'sentry/actionCreators/modal';
  3. import {Client} from 'sentry/api';
  4. import AssigneeSelectorComponent, {
  5. putSessionUserFirst,
  6. } from 'sentry/components/assigneeSelector';
  7. import ConfigStore from 'sentry/stores/configStore';
  8. import GroupStore from 'sentry/stores/groupStore';
  9. import MemberListStore from 'sentry/stores/memberListStore';
  10. import ProjectsStore from 'sentry/stores/projectsStore';
  11. import TeamStore from 'sentry/stores/teamStore';
  12. jest.mock('sentry/actionCreators/modal', () => ({
  13. openInviteMembersModal: jest.fn(),
  14. }));
  15. describe('AssigneeSelector', function () {
  16. let assigneeSelector;
  17. let assignMock;
  18. let assignGroup2Mock;
  19. let openMenu;
  20. let USER_1, USER_2, USER_3;
  21. let TEAM_1;
  22. let PROJECT_1;
  23. let GROUP_1;
  24. let GROUP_2;
  25. beforeEach(function () {
  26. USER_1 = TestStubs.User({
  27. id: '1',
  28. name: 'Jane Bloggs',
  29. email: 'janebloggs@example.com',
  30. });
  31. USER_2 = TestStubs.User({
  32. id: '2',
  33. name: 'John Smith',
  34. email: 'johnsmith@example.com',
  35. });
  36. USER_3 = TestStubs.User({
  37. id: '3',
  38. name: 'J J',
  39. email: 'jj@example.com',
  40. });
  41. TEAM_1 = TestStubs.Team({
  42. id: '3',
  43. name: 'COOL TEAM',
  44. slug: 'cool-team',
  45. });
  46. PROJECT_1 = TestStubs.Project({
  47. teams: [TEAM_1],
  48. });
  49. GROUP_1 = TestStubs.Group({
  50. id: '1337',
  51. project: {
  52. id: PROJECT_1.id,
  53. slug: PROJECT_1.slug,
  54. },
  55. });
  56. GROUP_2 = TestStubs.Group({
  57. id: '1338',
  58. project: {
  59. id: PROJECT_1.id,
  60. slug: PROJECT_1.slug,
  61. },
  62. owners: [
  63. {
  64. type: 'suspectCommit',
  65. owner: 'user:1',
  66. date_added: '',
  67. },
  68. ],
  69. });
  70. jest.spyOn(MemberListStore, 'getAll').mockImplementation(() => null);
  71. jest.spyOn(TeamStore, 'getAll').mockImplementation(() => [TEAM_1]);
  72. jest.spyOn(ProjectsStore, 'getAll').mockImplementation(() => [PROJECT_1]);
  73. jest.spyOn(GroupStore, 'get').mockImplementation(() => GROUP_1);
  74. assignMock = Client.addMockResponse({
  75. method: 'PUT',
  76. url: `/issues/${GROUP_1.id}/`,
  77. body: {
  78. ...GROUP_1,
  79. assignedTo: USER_1,
  80. },
  81. });
  82. assignGroup2Mock = Client.addMockResponse({
  83. method: 'PUT',
  84. url: `/issues/${GROUP_2.id}/`,
  85. body: {
  86. ...GROUP_2,
  87. assignedTo: USER_1,
  88. },
  89. });
  90. MemberListStore.state = [];
  91. MemberListStore.loaded = false;
  92. assigneeSelector = mountWithTheme(<AssigneeSelectorComponent id={GROUP_1.id} />);
  93. openMenu = () => assigneeSelector.find('DropdownButton').simulate('click');
  94. });
  95. afterEach(function () {
  96. Client.clearMockResponses();
  97. });
  98. describe('render with props', function () {
  99. it('renders members from the prop when present', async function () {
  100. assigneeSelector = mountWithTheme(
  101. <AssigneeSelectorComponent id={GROUP_1.id} memberList={[USER_2, USER_3]} />
  102. );
  103. MemberListStore.loadInitialData([USER_1]);
  104. openMenu();
  105. assigneeSelector.update();
  106. expect(assigneeSelector.find('LoadingIndicator')).toHaveLength(0);
  107. expect(assigneeSelector.find('UserAvatar')).toHaveLength(2);
  108. expect(assigneeSelector.find('TeamAvatar')).toHaveLength(1);
  109. const names = assigneeSelector
  110. .find('MenuItemWrapper Label Highlight')
  111. .map(el => el.text());
  112. expect(names).toEqual([`#${TEAM_1.slug}`, USER_2.name, USER_3.name]);
  113. });
  114. });
  115. describe('putSessionUserFirst()', function () {
  116. it('should place the session user at the top of the member list if present', function () {
  117. jest.spyOn(ConfigStore, 'get').mockImplementation(() => ({
  118. id: '2',
  119. name: 'John Smith',
  120. email: 'johnsmith@example.com',
  121. }));
  122. expect(putSessionUserFirst([USER_1, USER_2])).toEqual([USER_2, USER_1]);
  123. ConfigStore.get.mockRestore();
  124. });
  125. it("should return the same member list if the session user isn't present", function () {
  126. jest.spyOn(ConfigStore, 'get').mockImplementation(() => ({
  127. id: '555',
  128. name: 'Here Comes a New Challenger',
  129. email: 'guile@mail.us.af.mil',
  130. }));
  131. expect(putSessionUserFirst([USER_1, USER_2])).toEqual([USER_1, USER_2]);
  132. ConfigStore.get.mockRestore();
  133. });
  134. });
  135. it('should initially have loading state', function () {
  136. openMenu();
  137. expect(assigneeSelector.find('LoadingIndicator')).toHaveLength(1);
  138. });
  139. it('does not have loading state and shows member list after calling MemberListStore.loadInitialData', async function () {
  140. openMenu();
  141. MemberListStore.loadInitialData([USER_1, USER_2]);
  142. assigneeSelector.update();
  143. expect(assigneeSelector.instance().assignableTeams()).toHaveLength(1);
  144. expect(assigneeSelector.find('LoadingIndicator')).toHaveLength(0);
  145. expect(assigneeSelector.find('UserAvatar')).toHaveLength(2);
  146. expect(assigneeSelector.find('TeamAvatar')).toHaveLength(1);
  147. });
  148. it('does NOT update member list after initial load', function () {
  149. openMenu();
  150. MemberListStore.loadInitialData([USER_1, USER_2]);
  151. assigneeSelector.update();
  152. expect(assigneeSelector.find('UserAvatar')).toHaveLength(2);
  153. expect(assigneeSelector.find('LoadingIndicator').exists()).toBe(false);
  154. MemberListStore.loadInitialData([USER_1, USER_2, USER_3]);
  155. assigneeSelector.update();
  156. expect(assigneeSelector.find('UserAvatar')).toHaveLength(2);
  157. expect(assigneeSelector.find('LoadingIndicator').exists()).toBe(false);
  158. });
  159. it('successfully assigns users', async function () {
  160. openMenu();
  161. MemberListStore.loadInitialData([USER_1, USER_2]);
  162. assigneeSelector.update();
  163. expect(assigneeSelector.find('LoadingIndicator').exists()).toBe(false);
  164. assigneeSelector.find('UserAvatar').first().simulate('click');
  165. expect(assignMock).toHaveBeenLastCalledWith(
  166. '/issues/1337/',
  167. expect.objectContaining({
  168. data: {assignedTo: 'user:1', assignedBy: 'assignee_selector'},
  169. })
  170. );
  171. assigneeSelector.update();
  172. expect(assigneeSelector.find('LoadingIndicator')).toHaveLength(1);
  173. // Flakey with 1 tick
  174. await tick();
  175. await tick();
  176. assigneeSelector.update();
  177. expect(assigneeSelector.find('LoadingIndicator')).toHaveLength(0);
  178. expect(assigneeSelector.find('ActorAvatar')).toHaveLength(1);
  179. });
  180. it('successfully assigns teams', async function () {
  181. openMenu();
  182. MemberListStore.loadInitialData([USER_1, USER_2]);
  183. assigneeSelector.update();
  184. expect(assigneeSelector.find('LoadingIndicator').exists()).toBe(false);
  185. assigneeSelector.find('TeamAvatar').first().simulate('click');
  186. assigneeSelector.update();
  187. expect(assigneeSelector.find('LoadingIndicator').exists()).toBe(true);
  188. expect(assignMock).toHaveBeenCalledWith(
  189. '/issues/1337/',
  190. expect.objectContaining({
  191. data: {assignedTo: 'team:3', assignedBy: 'assignee_selector'},
  192. })
  193. );
  194. // Flakey with 1 tick
  195. await tick();
  196. await tick();
  197. assigneeSelector.update();
  198. expect(assigneeSelector.find('LoadingIndicator').exists()).toBe(false);
  199. expect(assigneeSelector.find('ActorAvatar')).toHaveLength(1);
  200. });
  201. it('successfully clears assignment', async function () {
  202. openMenu();
  203. MemberListStore.loadInitialData([USER_1, USER_2]);
  204. // Assign first item in list, which is TEAM_1
  205. assigneeSelector.update();
  206. assigneeSelector.find('TeamAvatar').first().simulate('click');
  207. assigneeSelector.update();
  208. expect(assigneeSelector.find('LoadingIndicator').exists()).toBe(true);
  209. expect(assignMock).toHaveBeenCalledWith(
  210. '/issues/1337/',
  211. expect.objectContaining({
  212. data: {assignedTo: 'team:3', assignedBy: 'assignee_selector'},
  213. })
  214. );
  215. // Waiting for assignment to finish updating
  216. // Flakey with 1 tick
  217. await tick();
  218. await tick();
  219. assigneeSelector.update();
  220. openMenu();
  221. assigneeSelector
  222. .find('MenuItemWrapper[data-test-id="clear-assignee"]')
  223. .simulate('click');
  224. // api was called with empty string, clearing assignment
  225. expect(assignMock).toHaveBeenLastCalledWith(
  226. '/issues/1337/',
  227. expect.objectContaining({
  228. data: {assignedTo: '', assignedBy: 'assignee_selector'},
  229. })
  230. );
  231. });
  232. it('shows invite member button', async function () {
  233. jest.spyOn(ConfigStore, 'get').mockImplementation(() => true);
  234. openMenu();
  235. MemberListStore.loadInitialData([USER_1, USER_2]);
  236. assigneeSelector.update();
  237. expect(assigneeSelector.find('LoadingIndicator').exists()).toBe(false);
  238. assigneeSelector
  239. .find('InviteMemberLink[data-test-id="invite-member"]')
  240. .simulate('click');
  241. expect(openInviteMembersModal).toHaveBeenCalled();
  242. ConfigStore.get.mockRestore();
  243. });
  244. it('filters user by email and selects with keyboard', async function () {
  245. openMenu();
  246. MemberListStore.loadInitialData([USER_1, USER_2]);
  247. assigneeSelector.update();
  248. expect(assigneeSelector.find('LoadingIndicator').exists()).toBe(false);
  249. assigneeSelector
  250. .find('StyledInput')
  251. .simulate('change', {target: {value: 'JohnSmith@example.com'}});
  252. expect(assigneeSelector.find('UserAvatar')).toHaveLength(1);
  253. expect(assigneeSelector.find('UserAvatar').prop('user')).toEqual(USER_2);
  254. assigneeSelector.find('StyledInput').simulate('keyDown', {key: 'Enter'});
  255. assigneeSelector.update();
  256. expect(assignMock).toHaveBeenLastCalledWith(
  257. '/issues/1337/',
  258. expect.objectContaining({
  259. data: {assignedTo: 'user:2', assignedBy: 'assignee_selector'},
  260. })
  261. );
  262. expect(assigneeSelector.find('LoadingIndicator')).toHaveLength(1);
  263. await tick();
  264. await tick();
  265. assigneeSelector.update();
  266. expect(assigneeSelector.find('LoadingIndicator')).toHaveLength(0);
  267. expect(assigneeSelector.find('ActorAvatar')).toHaveLength(1);
  268. });
  269. it('successfully shows suggested assignees', async function () {
  270. jest.spyOn(GroupStore, 'get').mockImplementation(() => GROUP_2);
  271. const onAssign = jest.fn();
  272. assigneeSelector = mountWithTheme(
  273. <AssigneeSelectorComponent id={GROUP_2.id} onAssign={onAssign} />
  274. );
  275. MemberListStore.loadInitialData([USER_1, USER_2, USER_3]);
  276. await tick();
  277. assigneeSelector.update();
  278. const avatarTooltip = mountWithTheme(assigneeSelector.find('Tooltip').prop('title'));
  279. expect(avatarTooltip.text()).toContain('Suggestion: Jane Bloggs');
  280. expect(avatarTooltip.text()).toContain('Based on commit data');
  281. openMenu();
  282. expect(assigneeSelector.find('LoadingIndicator').exists()).toBe(false);
  283. expect(assigneeSelector.find('SuggestedAvatarStack').exists()).toBe(true);
  284. expect(assigneeSelector.find('GroupHeader').first().text()).toEqual('Suggested');
  285. assigneeSelector.find('UserAvatar').at(1).simulate('click');
  286. assigneeSelector.update();
  287. expect(assignGroup2Mock).toHaveBeenCalledWith(
  288. '/issues/1338/',
  289. expect.objectContaining({
  290. data: {assignedTo: 'user:1', assignedBy: 'assignee_selector'},
  291. })
  292. );
  293. // Suggested assignees shouldn't show anymore because we assigned to the suggested actor
  294. assigneeSelector.update();
  295. expect(assigneeSelector.find('SuggestedAvatarStack').exists()).toBe(false);
  296. expect(onAssign).toHaveBeenCalledWith(
  297. 'member',
  298. expect.objectContaining({id: '1'}),
  299. expect.objectContaining({id: '1'})
  300. );
  301. });
  302. it('renders unassigned', async function () {
  303. jest.spyOn(GroupStore, 'get').mockImplementation(() => GROUP_2);
  304. assigneeSelector = mountWithTheme(<AssigneeSelectorComponent id={GROUP_2.id} />);
  305. const avatarTooltip = mountWithTheme(assigneeSelector.find('Tooltip').prop('title'));
  306. expect(avatarTooltip.text()).toContain('Unassigned');
  307. });
  308. });