dashboard.spec.tsx 11 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360
  1. import {mountWithTheme} from 'sentry-test/enzyme';
  2. import {initializeOrg} from 'sentry-test/initializeOrg';
  3. import {act, render, screen, userEvent} from 'sentry-test/reactTestingLibrary';
  4. import MemberListStore from 'sentry/stores/memberListStore';
  5. import {MEPSettingProvider} from 'sentry/utils/performance/contexts/metricsEnhancedSetting';
  6. import Dashboard from 'sentry/views/dashboardsV2/dashboard';
  7. import {DisplayType, Widget, WidgetType} from 'sentry/views/dashboardsV2/types';
  8. import {OrganizationContext} from '../organizationContext';
  9. describe('Dashboards > Dashboard', () => {
  10. const organization = TestStubs.Organization({
  11. features: ['dashboards-basic', 'dashboards-edit', 'dashboard-grid-layout'],
  12. });
  13. const organizationWithFlag = TestStubs.Organization({
  14. features: ['dashboards-basic', 'dashboards-edit', 'dashboard-grid-layout'],
  15. });
  16. const mockDashboard = {
  17. dateCreated: '2021-08-10T21:20:46.798237Z',
  18. id: '1',
  19. title: 'Test Dashboard',
  20. widgets: [],
  21. projects: [],
  22. filters: {},
  23. };
  24. const newWidget: Widget = {
  25. id: '1',
  26. title: 'Test Discover Widget',
  27. displayType: DisplayType.LINE,
  28. widgetType: WidgetType.DISCOVER,
  29. interval: '5m',
  30. queries: [
  31. {
  32. name: '',
  33. conditions: '',
  34. fields: ['count()'],
  35. aggregates: ['count()'],
  36. columns: [],
  37. orderby: '',
  38. },
  39. ],
  40. };
  41. const issueWidget: Widget = {
  42. id: '2',
  43. title: 'Test Issue Widget',
  44. displayType: DisplayType.TABLE,
  45. widgetType: WidgetType.ISSUE,
  46. interval: '5m',
  47. queries: [
  48. {
  49. name: '',
  50. conditions: '',
  51. fields: ['title', 'assignee'],
  52. aggregates: [],
  53. columns: ['title', 'assignee'],
  54. orderby: '',
  55. },
  56. ],
  57. };
  58. let initialData, tagsMock;
  59. beforeEach(() => {
  60. initialData = initializeOrg({organization, router: {}, project: 1, projects: []});
  61. MockApiClient.addMockResponse({
  62. url: `/organizations/org-slug/dashboards/widgets/`,
  63. method: 'POST',
  64. body: [],
  65. });
  66. MockApiClient.addMockResponse({
  67. url: '/organizations/org-slug/events-stats/',
  68. method: 'GET',
  69. body: [],
  70. });
  71. MockApiClient.addMockResponse({
  72. url: '/organizations/org-slug/issues/',
  73. method: 'GET',
  74. body: [
  75. {
  76. annotations: [],
  77. id: '1',
  78. title: 'Error: Failed',
  79. project: {
  80. id: '3',
  81. },
  82. owners: [
  83. {
  84. type: 'ownershipRule',
  85. owner: 'user:2',
  86. },
  87. ],
  88. },
  89. ],
  90. });
  91. MockApiClient.addMockResponse({
  92. url: '/organizations/org-slug/users/',
  93. method: 'GET',
  94. body: [
  95. {
  96. user: {
  97. id: '2',
  98. name: 'test@sentry.io',
  99. email: 'test@sentry.io',
  100. avatar: {
  101. avatarType: 'letter_avatar',
  102. avatarUuid: null,
  103. },
  104. },
  105. },
  106. ],
  107. });
  108. tagsMock = MockApiClient.addMockResponse({
  109. url: '/organizations/org-slug/tags/',
  110. method: 'GET',
  111. body: TestStubs.Tags(),
  112. });
  113. });
  114. it('fetches tags', () => {
  115. mountWithTheme(
  116. <Dashboard
  117. paramDashboardId="1"
  118. dashboard={mockDashboard}
  119. organization={initialData.organization}
  120. onUpdate={() => undefined}
  121. handleUpdateWidgetList={() => undefined}
  122. handleAddCustomWidget={() => undefined}
  123. router={initialData.router}
  124. location={initialData.router.location}
  125. widgetLimitReached={false}
  126. isEditing={false}
  127. />,
  128. initialData.routerContext
  129. );
  130. expect(tagsMock).toHaveBeenCalled();
  131. });
  132. it('dashboard adds new widget if component is mounted with newWidget prop', async () => {
  133. const mockHandleAddCustomWidget = jest.fn();
  134. const mockCallbackToUnsetNewWidget = jest.fn();
  135. const wrapper = mountWithTheme(
  136. <Dashboard
  137. paramDashboardId="1"
  138. dashboard={mockDashboard}
  139. organization={initialData.organization}
  140. isEditing={false}
  141. onUpdate={() => undefined}
  142. handleUpdateWidgetList={() => undefined}
  143. handleAddCustomWidget={mockHandleAddCustomWidget}
  144. router={initialData.router}
  145. location={initialData.router.location}
  146. newWidget={newWidget}
  147. widgetLimitReached={false}
  148. onSetNewWidget={mockCallbackToUnsetNewWidget}
  149. />,
  150. initialData.routerContext
  151. );
  152. await tick();
  153. wrapper.update();
  154. expect(mockHandleAddCustomWidget).toHaveBeenCalled();
  155. expect(mockCallbackToUnsetNewWidget).toHaveBeenCalled();
  156. });
  157. it('dashboard adds new widget if component updated with newWidget prop', async () => {
  158. const mockHandleAddCustomWidget = jest.fn();
  159. const mockCallbackToUnsetNewWidget = jest.fn();
  160. const wrapper = mountWithTheme(
  161. <Dashboard
  162. paramDashboardId="1"
  163. dashboard={mockDashboard}
  164. organization={initialData.organization}
  165. isEditing={false}
  166. onUpdate={() => undefined}
  167. handleUpdateWidgetList={() => undefined}
  168. handleAddCustomWidget={mockHandleAddCustomWidget}
  169. router={initialData.router}
  170. location={initialData.router.location}
  171. widgetLimitReached={false}
  172. onSetNewWidget={mockCallbackToUnsetNewWidget}
  173. />,
  174. initialData.routerContext
  175. );
  176. expect(mockHandleAddCustomWidget).not.toHaveBeenCalled();
  177. expect(mockCallbackToUnsetNewWidget).not.toHaveBeenCalled();
  178. wrapper.setProps({newWidget});
  179. await tick();
  180. wrapper.update();
  181. expect(mockHandleAddCustomWidget).toHaveBeenCalled();
  182. expect(mockCallbackToUnsetNewWidget).toHaveBeenCalled();
  183. });
  184. it('dashboard does not try to add new widget if no newWidget', async () => {
  185. const mockHandleAddCustomWidget = jest.fn();
  186. const mockCallbackToUnsetNewWidget = jest.fn();
  187. const wrapper = mountWithTheme(
  188. <Dashboard
  189. paramDashboardId="1"
  190. dashboard={mockDashboard}
  191. organization={initialData.organization}
  192. isEditing={false}
  193. onUpdate={() => undefined}
  194. handleUpdateWidgetList={() => undefined}
  195. handleAddCustomWidget={mockHandleAddCustomWidget}
  196. router={initialData.router}
  197. location={initialData.router.location}
  198. widgetLimitReached={false}
  199. onSetNewWidget={mockCallbackToUnsetNewWidget}
  200. />,
  201. initialData.routerContext
  202. );
  203. await tick();
  204. wrapper.update();
  205. expect(mockHandleAddCustomWidget).not.toHaveBeenCalled();
  206. expect(mockCallbackToUnsetNewWidget).not.toHaveBeenCalled();
  207. });
  208. describe('Issue Widgets', () => {
  209. beforeEach(() => {
  210. MemberListStore.init();
  211. });
  212. const mount = (dashboard, mockedOrg = initialData.organization) => {
  213. render(
  214. <OrganizationContext.Provider value={initialData.organization}>
  215. <MEPSettingProvider forceTransactions={false}>
  216. <Dashboard
  217. paramDashboardId="1"
  218. dashboard={dashboard}
  219. organization={mockedOrg}
  220. isEditing={false}
  221. onUpdate={() => undefined}
  222. handleUpdateWidgetList={() => undefined}
  223. handleAddCustomWidget={() => undefined}
  224. router={initialData.router}
  225. location={initialData.router.location}
  226. widgetLimitReached={false}
  227. />
  228. </MEPSettingProvider>
  229. </OrganizationContext.Provider>
  230. );
  231. };
  232. it('dashboard displays issue widgets if the user has issue widgets feature flag', async () => {
  233. const mockDashboardWithIssueWidget = {
  234. ...mockDashboard,
  235. widgets: [newWidget, issueWidget],
  236. };
  237. await act(async () => {
  238. mount(mockDashboardWithIssueWidget, organizationWithFlag);
  239. await tick();
  240. });
  241. expect(screen.getByText('Test Discover Widget')).toBeInTheDocument();
  242. expect(screen.getByText('Test Issue Widget')).toBeInTheDocument();
  243. });
  244. it('renders suggested assignees', async () => {
  245. const mockDashboardWithIssueWidget = {
  246. ...mockDashboard,
  247. widgets: [{...issueWidget}],
  248. };
  249. mount(mockDashboardWithIssueWidget, organizationWithFlag);
  250. expect(await screen.findByText('T')).toBeInTheDocument();
  251. userEvent.hover(screen.getByText('T'));
  252. expect(await screen.findByText('Suggestion:')).toBeInTheDocument();
  253. expect(screen.getByText('test@sentry.io')).toBeInTheDocument();
  254. expect(screen.getByText('Matching Issue Owners Rule')).toBeInTheDocument();
  255. });
  256. });
  257. describe('Edit mode', () => {
  258. let widgets: Widget[];
  259. const mount = (
  260. dashboard,
  261. mockedOrg = initialData.organization,
  262. mockedRouter = initialData.router,
  263. mockedLocation = initialData.router.location
  264. ) => {
  265. const getDashboardComponent = () => (
  266. <OrganizationContext.Provider value={initialData.organization}>
  267. <MEPSettingProvider forceTransactions={false}>
  268. <Dashboard
  269. paramDashboardId="1"
  270. dashboard={dashboard}
  271. organization={mockedOrg}
  272. isEditing
  273. onUpdate={newWidgets => {
  274. widgets.splice(0, widgets.length, ...newWidgets);
  275. }}
  276. handleUpdateWidgetList={() => undefined}
  277. handleAddCustomWidget={() => undefined}
  278. router={mockedRouter}
  279. location={mockedLocation}
  280. widgetLimitReached={false}
  281. />
  282. </MEPSettingProvider>
  283. </OrganizationContext.Provider>
  284. );
  285. const {rerender} = render(getDashboardComponent());
  286. return {rerender: () => rerender(getDashboardComponent())};
  287. };
  288. beforeEach(() => {
  289. widgets = [newWidget];
  290. });
  291. it('displays the copy widget button in edit mode', async () => {
  292. const dashboardWithOneWidget = {...mockDashboard, widgets};
  293. await act(async () => {
  294. mount(dashboardWithOneWidget);
  295. await tick();
  296. });
  297. expect(screen.getByLabelText('Duplicate Widget')).toBeInTheDocument();
  298. });
  299. it('duplicates the widget', async () => {
  300. const dashboardWithOneWidget = {...mockDashboard, widgets};
  301. await act(async () => {
  302. const {rerender} = mount(dashboardWithOneWidget);
  303. userEvent.click(screen.getByLabelText('Duplicate Widget'));
  304. rerender();
  305. await tick();
  306. });
  307. expect(screen.getAllByText('Test Discover Widget')).toHaveLength(2);
  308. });
  309. it('opens the widget builder when editing with the modal access flag', async function () {
  310. const testData = initializeOrg({
  311. ...initializeOrg(),
  312. organization: {
  313. features: ['dashboards-basic', 'dashboards-edit', 'dashboard-grid-layout'],
  314. },
  315. });
  316. const dashboardWithOneWidget = {
  317. ...mockDashboard,
  318. widgets: [newWidget],
  319. };
  320. await act(async () => {
  321. mount(
  322. dashboardWithOneWidget,
  323. testData.organization,
  324. testData.router,
  325. testData.router.location
  326. );
  327. await tick();
  328. userEvent.click(screen.getByLabelText('Edit Widget'));
  329. });
  330. expect(testData.router.push).toHaveBeenCalledWith(
  331. expect.objectContaining({
  332. pathname: '/organizations/org-slug/dashboard/1/widget/0/edit/',
  333. })
  334. );
  335. });
  336. });
  337. });