chartFooter.spec.tsx 4.0 KB

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