commandPaletteModal.spec.jsx 2.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117
  1. import React from 'react';
  2. import {mount} from 'enzyme';
  3. import {openCommandPalette} from 'app/actionCreators/modal';
  4. import App from 'app/views/app';
  5. import FormSearchStore from 'app/stores/formSearchStore';
  6. import {navigateTo} from 'app/actionCreators/navigation';
  7. jest.mock('jquery');
  8. jest.mock('app/actionCreators/formSearch');
  9. jest.mock('app/actionCreators/navigation');
  10. describe('Command Palette Modal', function() {
  11. let orgsMock;
  12. beforeEach(function() {
  13. FormSearchStore.onLoadSearchMap([]);
  14. MockApiClient.clearMockResponses();
  15. orgsMock = MockApiClient.addMockResponse({
  16. url: '/organizations/',
  17. body: [TestStubs.Organization({slug: 'billy-org', name: 'billy org'})],
  18. });
  19. MockApiClient.addMockResponse({
  20. url: '/organizations/org-slug/projects/',
  21. query: 'foo',
  22. body: [TestStubs.Project({slug: 'foo-project'})],
  23. });
  24. MockApiClient.addMockResponse({
  25. url: '/organizations/org-slug/teams/',
  26. query: 'foo',
  27. body: [TestStubs.Team({slug: 'foo-team'})],
  28. });
  29. MockApiClient.addMockResponse({
  30. url: '/organizations/org-slug/members/',
  31. query: 'foo',
  32. body: TestStubs.Members(),
  33. });
  34. MockApiClient.addMockResponse({
  35. url: '/internal/health/',
  36. body: {
  37. problems: [],
  38. },
  39. });
  40. MockApiClient.addMockResponse({
  41. url: '/assistant/',
  42. body: [],
  43. });
  44. });
  45. it('can open command palette modal and search', async function() {
  46. const wrapper = mount(
  47. <App params={{orgId: 'org-slug'}}>{<div>placeholder content</div>}</App>,
  48. TestStubs.routerContext([
  49. {
  50. router: TestStubs.router({
  51. params: {orgId: 'org-slug'},
  52. }),
  53. },
  54. ])
  55. );
  56. // No Modal
  57. expect(wrapper.find('ModalDialog')).toHaveLength(0);
  58. openCommandPalette({params: {orgId: 'org-slug'}});
  59. await tick();
  60. await tick();
  61. wrapper.update();
  62. // Should have Modal + input
  63. expect(wrapper.find('ModalDialog')).toHaveLength(1);
  64. wrapper.find('ModalDialog input').simulate('change', {target: {value: 'bil'}});
  65. await tick();
  66. wrapper.update();
  67. expect(orgsMock).toHaveBeenCalledWith(
  68. expect.anything(),
  69. expect.objectContaining({
  70. // This nested 'query' is correct
  71. query: {query: 'bil'},
  72. })
  73. );
  74. expect(
  75. wrapper
  76. .find('SearchResult [data-test-id="badge-display-name"]')
  77. .first()
  78. .text()
  79. ).toBe('billy-org Dashboard');
  80. expect(
  81. wrapper
  82. .find('ModalDialog SearchResultWrapper')
  83. .first()
  84. .prop('highlighted')
  85. ).toBe(true);
  86. expect(
  87. wrapper
  88. .find('ModalDialog SearchResultWrapper')
  89. .at(1)
  90. .prop('highlighted')
  91. ).toBe(false);
  92. wrapper
  93. .find('SearchResult [data-test-id="badge-display-name"]')
  94. .first()
  95. .simulate('click');
  96. expect(navigateTo).toHaveBeenCalledWith('/billy-org/', expect.anything());
  97. });
  98. });