environmentSelector.spec.tsx 9.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312
  1. import {render, screen, userEvent} from 'sentry-test/reactTestingLibrary';
  2. import EnvironmentSelector from 'sentry/components/organizations/environmentSelector';
  3. import {ALL_ACCESS_PROJECTS} from 'sentry/constants/pageFilters';
  4. import ConfigStore from 'sentry/stores/configStore';
  5. describe('EnvironmentSelector', function () {
  6. const onUpdate = jest.fn();
  7. const projects = [
  8. TestStubs.Project({
  9. id: '1',
  10. slug: 'first',
  11. environments: ['production', 'staging'],
  12. }),
  13. TestStubs.Project({
  14. id: '2',
  15. slug: 'second',
  16. environments: ['dev'],
  17. }),
  18. TestStubs.Project({
  19. id: '3',
  20. slug: 'no member',
  21. environments: ['no-env'],
  22. isMember: false,
  23. }),
  24. ];
  25. const organization = TestStubs.Organization({projects});
  26. const selectedProjects = [1, 2];
  27. const routerContext = TestStubs.routerContext([
  28. {
  29. organization,
  30. },
  31. ]);
  32. beforeEach(function () {
  33. ConfigStore.init();
  34. ConfigStore.loadInitialData(TestStubs.Config());
  35. onUpdate.mockReset();
  36. });
  37. const customDropdownButton = ({value}) => {
  38. const summary = value.length ? value.join(', ') : 'All Environments';
  39. return <div>{summary}</div>;
  40. };
  41. const selectorProps = {
  42. organization,
  43. projects,
  44. value: [],
  45. loadingProjects: false,
  46. selectedProjects,
  47. onUpdate,
  48. customDropdownButton,
  49. customLoadingIndicator: () => 'Loading...',
  50. };
  51. function renderSelector(
  52. props?: Partial<React.ComponentProps<typeof EnvironmentSelector>>
  53. ) {
  54. return render(<EnvironmentSelector {...selectorProps} {...props} />, {
  55. context: routerContext,
  56. });
  57. }
  58. async function clickMenu() {
  59. const button = await screen.findByRole('button', {name: 'All Environments'});
  60. userEvent.click(button);
  61. }
  62. it('can select and change environments', async function () {
  63. renderSelector();
  64. await clickMenu();
  65. screen.queryAllByRole('checkbox').forEach(box => userEvent.click(box));
  66. userEvent.click(await screen.findByLabelText('Apply'));
  67. expect(onUpdate).toHaveBeenCalledWith(['dev', 'production', 'staging']);
  68. });
  69. it('selects multiple environments and uses button to update', async function () {
  70. renderSelector();
  71. await clickMenu();
  72. userEvent.click(screen.queryAllByRole('checkbox')[0]);
  73. expect(onUpdate).not.toHaveBeenCalled();
  74. await clickMenu();
  75. expect(onUpdate).toHaveBeenCalledWith(['dev']);
  76. });
  77. it('does not update when there are no changes', async function () {
  78. renderSelector();
  79. await clickMenu();
  80. // Click and unclick boxes
  81. screen.queryAllByRole('checkbox').forEach(box => userEvent.click(box));
  82. screen.queryAllByRole('checkbox').forEach(box => userEvent.click(box));
  83. await clickMenu();
  84. expect(onUpdate).not.toHaveBeenCalled();
  85. });
  86. it('updates environment options when projects selection changes', async function () {
  87. const {rerender} = renderSelector();
  88. await clickMenu();
  89. screen.queryAllByRole('checkbox').forEach(box => userEvent.click(box));
  90. await clickMenu();
  91. // Changing projects will unselect environments. Project 2 has 1 environment
  92. rerender(<EnvironmentSelector {...selectorProps} selectedProjects={[2]} />);
  93. // There should just be 1 environment now
  94. await clickMenu();
  95. expect(screen.getByLabelText('dev')).toBeInTheDocument();
  96. expect(screen.queryByLabelText('production')).not.toBeInTheDocument();
  97. });
  98. it('shows non-member project environments when selected', async function () {
  99. renderSelector({selectedProjects: [3]});
  100. await clickMenu();
  101. expect(screen.getByRole('checkbox')).toBeInTheDocument();
  102. expect(screen.getByLabelText('no-env')).toBeInTheDocument();
  103. });
  104. it('shows member project environments when there are no projects selected', async function () {
  105. renderSelector({selectedProjects: []});
  106. await clickMenu();
  107. expect(screen.queryAllByRole('checkbox')).toHaveLength(3);
  108. expect(screen.getByLabelText('production')).toBeInTheDocument();
  109. expect(screen.getByLabelText('staging')).toBeInTheDocument();
  110. expect(screen.getByLabelText('dev')).toBeInTheDocument();
  111. });
  112. it('does not open selector menu when disabled', async function () {
  113. renderSelector({disabled: true});
  114. await clickMenu();
  115. // Dropdown not open
  116. expect(screen.queryByRole('checkbox')).not.toBeInTheDocument();
  117. });
  118. describe('Superuser My Projects / all environments', function () {
  119. it('shows env when no team belonging', async function () {
  120. ConfigStore.set('user', {...ConfigStore.get('user'), isSuperuser: true});
  121. renderSelector({
  122. selectedProjects: [],
  123. projects: [
  124. TestStubs.Project({
  125. id: '1',
  126. slug: 'first',
  127. environments: ['production', 'staging'],
  128. isMember: false,
  129. }),
  130. TestStubs.Project({
  131. id: '2',
  132. slug: 'second',
  133. environments: ['dev'],
  134. isMember: false,
  135. }),
  136. ],
  137. });
  138. await clickMenu();
  139. expect(screen.queryAllByRole('checkbox')).toHaveLength(3);
  140. expect(screen.getByLabelText('production')).toBeInTheDocument();
  141. expect(screen.getByLabelText('staging')).toBeInTheDocument();
  142. expect(screen.getByLabelText('dev')).toBeInTheDocument();
  143. });
  144. it('shows env when belongs one team', async function () {
  145. // XXX: Ideally, "My Projects" and "All Projects" should be different if a
  146. // superuser was to belong to at least one project
  147. ConfigStore.set('user', {...ConfigStore.get('user'), isSuperuser: true});
  148. // This user is member of one project
  149. renderSelector({
  150. selectedProjects: [],
  151. projects: [
  152. TestStubs.Project({
  153. id: '1',
  154. slug: 'first',
  155. environments: ['production', 'staging'],
  156. }),
  157. TestStubs.Project({
  158. id: '2',
  159. slug: 'second',
  160. environments: ['dev'],
  161. isMember: false,
  162. }),
  163. ],
  164. });
  165. await clickMenu();
  166. expect(screen.queryAllByRole('checkbox')).toHaveLength(3);
  167. expect(screen.getByLabelText('production')).toBeInTheDocument();
  168. expect(screen.getByLabelText('staging')).toBeInTheDocument();
  169. expect(screen.getByLabelText('dev')).toBeInTheDocument();
  170. });
  171. });
  172. describe('Superuser All Projects / all environments', function () {
  173. it('shows env when no team belonging', async function () {
  174. ConfigStore.set('user', {...ConfigStore.get('user'), isSuperuser: true});
  175. renderSelector({
  176. selectedProjects: [ALL_ACCESS_PROJECTS],
  177. projects: [
  178. TestStubs.Project({
  179. id: '1',
  180. slug: 'first',
  181. environments: ['production', 'staging'],
  182. isMember: false,
  183. }),
  184. TestStubs.Project({
  185. id: '2',
  186. slug: 'second',
  187. environments: ['dev'],
  188. isMember: false,
  189. }),
  190. ],
  191. });
  192. await clickMenu();
  193. expect(screen.queryAllByRole('checkbox')).toHaveLength(3);
  194. expect(screen.getByLabelText('production')).toBeInTheDocument();
  195. expect(screen.getByLabelText('staging')).toBeInTheDocument();
  196. expect(screen.getByLabelText('dev')).toBeInTheDocument();
  197. });
  198. it('shows env when belongs one team', async function () {
  199. // XXX: Ideally, "My Projects" and "All Projects" should be different if a
  200. // superuser was to belong to at least one project
  201. ConfigStore.set('user', {...ConfigStore.get('user'), isSuperuser: true});
  202. renderSelector({
  203. selectedProjects: [ALL_ACCESS_PROJECTS],
  204. projects: [
  205. TestStubs.Project({
  206. id: '1',
  207. slug: 'first',
  208. environments: ['production', 'staging'],
  209. }),
  210. TestStubs.Project({
  211. id: '2',
  212. slug: 'second',
  213. environments: ['dev'],
  214. isMember: false,
  215. }),
  216. ],
  217. });
  218. await clickMenu();
  219. expect(screen.queryAllByRole('checkbox')).toHaveLength(3);
  220. expect(screen.getByLabelText('production')).toBeInTheDocument();
  221. expect(screen.getByLabelText('staging')).toBeInTheDocument();
  222. expect(screen.getByLabelText('dev')).toBeInTheDocument();
  223. });
  224. });
  225. it('shows all project environments when "all projects" is selected', async function () {
  226. renderSelector({selectedProjects: [ALL_ACCESS_PROJECTS]});
  227. await clickMenu();
  228. expect(screen.queryAllByRole('checkbox')).toHaveLength(4);
  229. expect(screen.getByLabelText('production')).toBeInTheDocument();
  230. expect(screen.getByLabelText('staging')).toBeInTheDocument();
  231. expect(screen.getByLabelText('dev')).toBeInTheDocument();
  232. expect(screen.getByLabelText('no-env')).toBeInTheDocument();
  233. });
  234. it('shows the distinct union of environments across all projects', async function () {
  235. renderSelector({selectedProjects: [1, 2]});
  236. await clickMenu();
  237. expect(screen.queryAllByRole('checkbox')).toHaveLength(3);
  238. expect(screen.getByLabelText('production')).toBeInTheDocument();
  239. expect(screen.getByLabelText('staging')).toBeInTheDocument();
  240. expect(screen.getByLabelText('dev')).toBeInTheDocument();
  241. });
  242. it('can quick select an environment', async function () {
  243. renderSelector();
  244. await clickMenu();
  245. // Select something first, we want to make sure that having a changed
  246. // selection doesn't effect the quick select
  247. userEvent.click(screen.getByRole('checkbox', {name: 'dev'}));
  248. // Now 'quick select' the production environment
  249. userEvent.click(screen.getByText('production'));
  250. expect(onUpdate).toHaveBeenCalledTimes(1);
  251. expect(onUpdate).toHaveBeenCalledWith(['production']);
  252. });
  253. });