chartFooter.spec.tsx 3.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130
  1. import {initializeOrg} from 'sentry-test/initializeOrg';
  2. import {render, screen, userEvent} from 'sentry-test/reactTestingLibrary';
  3. import EventView from 'sentry/utils/discover/eventView';
  4. import {DisplayModes} from 'sentry/utils/discover/types';
  5. import ChartFooter from 'sentry/views/discover/chartFooter';
  6. describe('Discover > ChartFooter', function () {
  7. const features = ['discover-basic'];
  8. const yAxisValue = ['count()', 'failure_count()'];
  9. const yAxisOptions = [
  10. {label: 'count()', value: 'count()'},
  11. {label: 'failure_count()', value: 'failure_count()'},
  12. ];
  13. const project = TestStubs.Project();
  14. const eventView = EventView.fromSavedQuery({
  15. id: '',
  16. name: 'test query',
  17. version: 2,
  18. fields: ['transaction', 'count()'],
  19. projects: [project.id],
  20. });
  21. afterEach(function () {});
  22. it('renders yAxis option using OptionCheckboxSelector using entire yAxisValue', function () {
  23. const organization = TestStubs.Organization({
  24. features: [...features],
  25. });
  26. // Start off with an invalid view (empty is invalid)
  27. const initialData = initializeOrg({
  28. organization,
  29. router: {
  30. location: {query: {query: 'tag:value'}},
  31. },
  32. project: 1,
  33. projects: [],
  34. });
  35. const chartFooter = (
  36. <ChartFooter
  37. total={100}
  38. yAxisValue={yAxisValue}
  39. yAxisOptions={yAxisOptions}
  40. onAxisChange={() => undefined}
  41. displayMode={DisplayModes.DEFAULT}
  42. displayOptions={[{label: DisplayModes.DEFAULT, value: DisplayModes.DEFAULT}]}
  43. onDisplayChange={() => undefined}
  44. onTopEventsChange={() => undefined}
  45. onIntervalChange={() => undefined}
  46. topEvents="5"
  47. eventView={eventView}
  48. />
  49. );
  50. render(chartFooter, {context: initialData.routerContext});
  51. expect(
  52. screen.getByRole('button', {
  53. name: `Y-Axis ${yAxisValue[0]} +${
  54. yAxisValue.filter(v => v !== yAxisValue[0]).length
  55. }`,
  56. })
  57. ).toBeInTheDocument();
  58. });
  59. it('renders display limits with default limit when top 5 mode is selected', function () {
  60. const organization = TestStubs.Organization({
  61. features,
  62. });
  63. // Start off with an invalid view (empty is invalid)
  64. const initialData = initializeOrg({
  65. organization,
  66. router: {
  67. location: {query: {query: 'tag:value'}},
  68. },
  69. project: 1,
  70. projects: [],
  71. });
  72. const limit = '5';
  73. const chartFooter = (
  74. <ChartFooter
  75. total={100}
  76. yAxisValue={yAxisValue}
  77. yAxisOptions={yAxisOptions}
  78. onAxisChange={() => undefined}
  79. displayMode={DisplayModes.TOP5}
  80. displayOptions={[{label: DisplayModes.DEFAULT, value: DisplayModes.DEFAULT}]}
  81. onDisplayChange={() => undefined}
  82. onTopEventsChange={() => undefined}
  83. onIntervalChange={() => undefined}
  84. topEvents={limit}
  85. eventView={eventView}
  86. />
  87. );
  88. render(chartFooter, {context: initialData.routerContext});
  89. expect(screen.getByRole('button', {name: `Limit ${limit}`})).toBeInTheDocument();
  90. });
  91. it('renders multi value y-axis dropdown selector on a non-Top display', function () {
  92. let yAxis = ['count()'];
  93. const chartFooter = (
  94. <ChartFooter
  95. total={100}
  96. yAxisValue={yAxis}
  97. yAxisOptions={yAxisOptions}
  98. onAxisChange={newYAxis => (yAxis = newYAxis)}
  99. displayMode={DisplayModes.DEFAULT}
  100. displayOptions={[{label: DisplayModes.DEFAULT, value: DisplayModes.DEFAULT}]}
  101. onDisplayChange={() => undefined}
  102. onTopEventsChange={() => undefined}
  103. onIntervalChange={() => undefined}
  104. topEvents="5"
  105. eventView={eventView}
  106. />
  107. );
  108. render(chartFooter);
  109. userEvent.click(screen.getByText('count()'));
  110. userEvent.click(screen.getByText('failure_count()'));
  111. expect(yAxis).toEqual(['count()', 'failure_count()']);
  112. });
  113. });