commandPalette.spec.tsx 3.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125
  1. import {MembersFixture} from 'sentry-fixture/members';
  2. import {OrganizationFixture} from 'sentry-fixture/organization';
  3. import {ProjectFixture} from 'sentry-fixture/project';
  4. import {RouterContextFixture} from 'sentry-fixture/routerContextFixture';
  5. import {RouterFixture} from 'sentry-fixture/routerFixture';
  6. import {TeamFixture} from 'sentry-fixture/team';
  7. import {render, screen, userEvent} from 'sentry-test/reactTestingLibrary';
  8. import {navigateTo} from 'sentry/actionCreators/navigation';
  9. import {
  10. makeClosableHeader,
  11. makeCloseButton,
  12. ModalBody,
  13. ModalFooter,
  14. } from 'sentry/components/globalModal/components';
  15. import CommandPaletteModal from 'sentry/components/modals/commandPalette';
  16. import FormSearchStore from 'sentry/stores/formSearchStore';
  17. jest.mock('sentry/actionCreators/formSearch');
  18. jest.mock('sentry/actionCreators/navigation');
  19. function renderMockRequests() {
  20. FormSearchStore.loadSearchMap([]);
  21. const organization = MockApiClient.addMockResponse({
  22. url: '/organizations/',
  23. body: [OrganizationFixture({slug: 'billy-org', name: 'billy org'})],
  24. });
  25. MockApiClient.addMockResponse({
  26. url: '/organizations/org-slug/projects/',
  27. body: [ProjectFixture({slug: 'foo-project'})],
  28. });
  29. MockApiClient.addMockResponse({
  30. url: '/organizations/org-slug/teams/',
  31. body: [TeamFixture({slug: 'foo-team'})],
  32. });
  33. MockApiClient.addMockResponse({
  34. url: '/organizations/org-slug/members/',
  35. body: MembersFixture(),
  36. });
  37. MockApiClient.addMockResponse({
  38. url: '/organizations/org-slug/plugins/?plugins=_all',
  39. body: [],
  40. });
  41. MockApiClient.addMockResponse({
  42. url: '/organizations/org-slug/config/integrations/',
  43. body: [],
  44. });
  45. MockApiClient.addMockResponse({
  46. url: '/organizations/org-slug/plugins/configs/',
  47. body: [],
  48. });
  49. MockApiClient.addMockResponse({
  50. url: '/sentry-apps/?status=published',
  51. body: [],
  52. });
  53. MockApiClient.addMockResponse({
  54. url: '/doc-integrations/',
  55. body: [],
  56. });
  57. MockApiClient.addMockResponse({
  58. url: '/assistant/',
  59. body: [],
  60. });
  61. return {organization};
  62. }
  63. describe('Command Palette Modal', function () {
  64. it('can open command palette modal and search', async function () {
  65. const mockRequests = renderMockRequests();
  66. render(
  67. <CommandPaletteModal
  68. Body={ModalBody}
  69. closeModal={jest.fn()}
  70. CloseButton={makeCloseButton(jest.fn())}
  71. Header={makeClosableHeader(jest.fn())}
  72. Footer={ModalFooter}
  73. />,
  74. {
  75. context: RouterContextFixture([
  76. {
  77. router: RouterFixture({
  78. params: {orgId: 'org-slug'},
  79. }),
  80. },
  81. ]),
  82. }
  83. );
  84. // NOTE: The `debounce` in `ApiSource` surprisingly only fires for the
  85. // first two typed characters of a sequence in most cases. This test only
  86. // types two characters to match in-app behaviour even though it's unclear
  87. // why it works that way
  88. await userEvent.type(screen.getByRole('textbox'), 'bi');
  89. expect(mockRequests.organization).toHaveBeenLastCalledWith(
  90. expect.anything(),
  91. expect.objectContaining({
  92. // This nested 'query' is correct
  93. query: {query: 'bi'},
  94. })
  95. );
  96. const badges = await screen.findAllByTestId('badge-display-name');
  97. expect(badges[0]).toHaveTextContent('billy-org Dashboard');
  98. expect(badges[1]).toHaveTextContent('billy-org Settings');
  99. await userEvent.click(badges[0]);
  100. expect(navigateTo).toHaveBeenCalledWith('/billy-org/', expect.anything(), undefined);
  101. });
  102. });