projectPageFilter.spec.tsx 4.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158
  1. import {initializeOrg} from 'sentry-test/initializeOrg';
  2. import {act, render, screen, userEvent, waitFor} from 'sentry-test/reactTestingLibrary';
  3. import ProjectPageFilter from 'sentry/components/projectPageFilter';
  4. import OrganizationStore from 'sentry/stores/organizationStore';
  5. import PageFiltersStore from 'sentry/stores/pageFiltersStore';
  6. import ProjectsStore from 'sentry/stores/projectsStore';
  7. const {organization, router, routerContext} = initializeOrg({
  8. organization: {features: ['global-views']},
  9. project: undefined,
  10. projects: [
  11. {
  12. id: 2,
  13. slug: 'project-2',
  14. },
  15. ],
  16. router: {
  17. location: {
  18. pathname: '/organizations/org-slug/issues/',
  19. query: {},
  20. },
  21. params: {orgId: 'org-slug'},
  22. },
  23. });
  24. describe('ProjectPageFilter', function () {
  25. beforeEach(() => {
  26. OrganizationStore.init();
  27. PageFiltersStore.init();
  28. PageFiltersStore.onInitializeUrlState(
  29. {
  30. projects: [],
  31. environments: [],
  32. datetime: {start: null, end: null, period: '14d', utc: null},
  33. },
  34. new Set()
  35. );
  36. OrganizationStore.onUpdate(organization, {replace: true});
  37. ProjectsStore.loadInitialData(organization.projects);
  38. });
  39. afterEach(() => {
  40. OrganizationStore.teardown();
  41. PageFiltersStore.teardown();
  42. PageFiltersStore.reset();
  43. });
  44. it('can pick project', function () {
  45. render(<ProjectPageFilter />, {
  46. context: routerContext,
  47. organization,
  48. });
  49. // Open the project dropdown
  50. expect(screen.getByText('My Projects')).toBeInTheDocument();
  51. userEvent.click(screen.getByText('My Projects'));
  52. // Click the first project's checkbox
  53. const projectOptions = screen.getAllByTestId('checkbox-fancy');
  54. userEvent.click(projectOptions[0]);
  55. // Confirm the selection changed the visible text
  56. expect(screen.queryByText('My Projects')).not.toBeInTheDocument();
  57. // Close the dropdown
  58. userEvent.click(screen.getAllByText('project-2')[0]);
  59. // Verify we were redirected
  60. expect(router.push).toHaveBeenCalledWith(
  61. expect.objectContaining({query: {environment: [], project: ['2']}})
  62. );
  63. });
  64. it('can pin selection', async function () {
  65. render(<ProjectPageFilter />, {
  66. context: routerContext,
  67. organization,
  68. });
  69. // Open the project dropdown
  70. expect(screen.getByText('My Projects')).toBeInTheDocument();
  71. userEvent.click(screen.getByText('My Projects'));
  72. // Click the pin button
  73. const pinButton = screen.getByRole('button', {name: 'Lock filter'});
  74. userEvent.click(pinButton, undefined, {skipHover: true});
  75. await screen.findByRole('button', {name: 'Lock filter', pressed: true});
  76. // Check if the pin indicator has been added
  77. expect(screen.getByLabelText('Filter applied across pages')).toBeInTheDocument();
  78. expect(PageFiltersStore.getState()).toEqual(
  79. expect.objectContaining({
  80. pinnedFilters: new Set(['projects']),
  81. })
  82. );
  83. });
  84. it('can quick select', async function () {
  85. render(<ProjectPageFilter />, {
  86. context: routerContext,
  87. organization,
  88. });
  89. // Open the project dropdown
  90. expect(screen.getByText('My Projects')).toBeInTheDocument();
  91. userEvent.click(screen.getByText('My Projects'));
  92. // Click the first project's checkbox
  93. userEvent.click(screen.getByText('project-2'));
  94. expect(router.push).toHaveBeenCalledWith(
  95. expect.objectContaining({query: {environment: [], project: ['2']}})
  96. );
  97. await screen.findByText('project-2');
  98. await waitFor(() =>
  99. expect(PageFiltersStore.getState()).toEqual(
  100. expect.objectContaining({
  101. isReady: true,
  102. selection: {
  103. datetime: {
  104. end: null,
  105. period: '14d',
  106. start: null,
  107. utc: null,
  108. },
  109. environments: [],
  110. projects: [2],
  111. },
  112. })
  113. )
  114. );
  115. });
  116. it('will change projects when page filter selection changes, e.g. from back button nav', async function () {
  117. render(<ProjectPageFilter />, {
  118. context: routerContext,
  119. organization,
  120. });
  121. // Confirm initial selection
  122. expect(screen.getByText('My Projects')).toBeInTheDocument();
  123. // Edit page filter project selection
  124. act(() => {
  125. PageFiltersStore.updateProjects([2], []);
  126. });
  127. // Page filter selection change should affect project page filter
  128. expect(await screen.findByText('project-2')).toBeInTheDocument();
  129. });
  130. });