loaderScript.spec.tsx 10 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343
  1. import {ProjectKeys} from 'sentry-fixture/projectKeys';
  2. import {initializeOrg} from 'sentry-test/initializeOrg';
  3. import {
  4. render,
  5. screen,
  6. userEvent,
  7. waitForElementToBeRemoved,
  8. } from 'sentry-test/reactTestingLibrary';
  9. import {t} from 'sentry/locale';
  10. import {Organization, Project, ProjectKey} from 'sentry/types';
  11. import LoaderScript from 'sentry/views/settings/project/loaderScript';
  12. function mockApi({
  13. organization,
  14. project,
  15. projectKeys,
  16. }: {
  17. organization: Organization;
  18. project: Project;
  19. projectKeys: ProjectKey[];
  20. }) {
  21. MockApiClient.clearMockResponses();
  22. MockApiClient.addMockResponse({
  23. url: `/projects/${organization.slug}/${project.slug}/keys/`,
  24. method: 'GET',
  25. body: projectKeys,
  26. });
  27. }
  28. describe('LoaderScript', function () {
  29. it('renders error', async function () {
  30. const {organization, project} = initializeOrg();
  31. MockApiClient.clearMockResponses();
  32. MockApiClient.addMockResponse({
  33. url: `/projects/${organization.slug}/${project.slug}/keys/`,
  34. method: 'GET',
  35. statusCode: 400,
  36. });
  37. render(<LoaderScript project={project} />);
  38. await waitForElementToBeRemoved(() => screen.queryByTestId('loading-indicator'));
  39. expect(screen.getByTestId('loading-error')).toHaveTextContent(
  40. 'Failed to load project keys.'
  41. );
  42. });
  43. it('renders empty', async function () {
  44. const {organization, project} = initializeOrg();
  45. mockApi({organization, project, projectKeys: []});
  46. render(<LoaderScript project={project} />);
  47. await waitForElementToBeRemoved(() => screen.queryByTestId('loading-indicator'));
  48. expect(
  49. screen.getByText('There are no keys active for this project.')
  50. ).toBeInTheDocument();
  51. });
  52. it('renders for single project', async function () {
  53. const {organization, project} = initializeOrg();
  54. const projectKey = ProjectKeys()[0];
  55. const projectKeys = [projectKey];
  56. mockApi({organization, project, projectKeys});
  57. render(<LoaderScript project={project} />);
  58. await waitForElementToBeRemoved(() => screen.queryByTestId('loading-indicator'));
  59. // Loader Script is rendered
  60. expect(screen.getByText(`Client Key: ${projectKey.name}`)).toBeInTheDocument();
  61. const loaderScript = screen.getByRole('textbox', {
  62. name: 'Loader Script',
  63. }) as HTMLInputElement;
  64. const loaderScriptValue = loaderScript.value;
  65. expect(loaderScriptValue).toEqual(expect.stringContaining(projectKeys[0].dsn.cdn));
  66. });
  67. it('renders multiple keys', async function () {
  68. const {organization, project} = initializeOrg();
  69. const projectKeys = TestStubs.ProjectKeys([
  70. {
  71. dsn: {
  72. secret:
  73. 'http://188ee45a58094d939428d8585aa6f662:a33bf9aba64c4bbdaf873bb9023b6d2c@dev.getsentry.net:8000/1',
  74. minidump:
  75. 'http://dev.getsentry.net:8000/api/1/minidump?sentry_key=188ee45a58094d939428d8585aa6f662',
  76. public: 'http://188ee45a58094d939428d8585aa6f662@dev.getsentry.net:8000/1',
  77. csp: 'http://dev.getsentry.net:8000/api/1/csp-report/?sentry_key=188ee45a58094d939428d8585aa6f662',
  78. security:
  79. 'http://dev.getsentry.net:8000/api/1/security-report/?sentry_key=188ee45a58094d939428d8585aa6f662',
  80. },
  81. public: '188ee45a58094d939428d8585aa6f662',
  82. secret: 'a33bf9aba64c4bbdaf873bb9023b6d2c',
  83. name: 'Key 2',
  84. rateLimit: null,
  85. projectId: 1,
  86. dateCreated: '2018-02-28T07:13:51.087Z',
  87. id: '188ee45a58094d939428d8585aa6f662',
  88. isActive: true,
  89. label: 'Key 2',
  90. browserSdkVersion: 'latest',
  91. browserSdk: {
  92. choices: [
  93. ['latest', 'latest'],
  94. ['7.x', '7.x'],
  95. ['6.x', '6.x'],
  96. ['5.x', '5.x'],
  97. ['4.x', '4.x'],
  98. ],
  99. },
  100. dynamicSdkLoaderOptions: {
  101. hasPerformance: false,
  102. hasReplay: false,
  103. hasDebug: false,
  104. },
  105. },
  106. ]);
  107. mockApi({organization, project, projectKeys});
  108. render(<LoaderScript project={project} />);
  109. await waitForElementToBeRemoved(() => screen.queryByTestId('loading-indicator'));
  110. expect(screen.getByText(`Client Key: ${projectKeys[0].name}`)).toBeInTheDocument();
  111. expect(screen.getByText(`Client Key: ${projectKeys[1].name}`)).toBeInTheDocument();
  112. const allLoaderScripts = screen.getAllByRole('textbox', {
  113. name: 'Loader Script',
  114. }) as HTMLInputElement[];
  115. expect(allLoaderScripts).toHaveLength(2);
  116. });
  117. it('allows to update key settings', async function () {
  118. const {organization, project} = initializeOrg();
  119. const baseKey = ProjectKeys()[0];
  120. const projectKey = {
  121. ...baseKey,
  122. dynamicSdkLoaderOptions: {
  123. ...baseKey.dynamicSdkLoaderOptions,
  124. hasReplay: true,
  125. },
  126. };
  127. mockApi({organization, project, projectKeys: [projectKey]});
  128. const mockPut = MockApiClient.addMockResponse({
  129. url: `/projects/${organization.slug}/${project.slug}/keys/${projectKey.id}/`,
  130. method: 'PUT',
  131. body: {
  132. ...projectKey,
  133. dynamicSdkLoaderOptions: {
  134. ...projectKey.dynamicSdkLoaderOptions,
  135. hasPerformance: true,
  136. },
  137. },
  138. });
  139. render(<LoaderScript project={project} />);
  140. await waitForElementToBeRemoved(() => screen.queryByTestId('loading-indicator'));
  141. expect(screen.getByText(t('Enable Performance Monitoring'))).toBeInTheDocument();
  142. expect(screen.getByText(t('Enable Session Replay'))).toBeInTheDocument();
  143. expect(screen.getByText(t('Enable Debug Bundles & Logging'))).toBeInTheDocument();
  144. let performanceCheckbox = screen.getByRole('checkbox', {
  145. name: t('Enable Performance Monitoring'),
  146. });
  147. expect(performanceCheckbox).toBeEnabled();
  148. expect(performanceCheckbox).not.toBeChecked();
  149. const replayCheckbox = screen.getByRole('checkbox', {
  150. name: t('Enable Session Replay'),
  151. });
  152. expect(replayCheckbox).toBeEnabled();
  153. expect(replayCheckbox).toBeChecked();
  154. const debugCheckbox = screen.getByRole('checkbox', {
  155. name: t('Enable Debug Bundles & Logging'),
  156. });
  157. expect(debugCheckbox).toBeEnabled();
  158. expect(debugCheckbox).not.toBeChecked();
  159. // Toggle performance option
  160. await userEvent.click(
  161. screen.getByRole('checkbox', {
  162. name: t('Enable Performance Monitoring'),
  163. })
  164. );
  165. performanceCheckbox = await screen.findByRole('checkbox', {
  166. name: t('Enable Performance Monitoring'),
  167. checked: true,
  168. });
  169. expect(performanceCheckbox).toBeEnabled();
  170. expect(performanceCheckbox).toBeChecked();
  171. expect(mockPut).toHaveBeenCalledWith(
  172. `/projects/${organization.slug}/${project.slug}/keys/${projectKey.id}/`,
  173. expect.objectContaining({
  174. data: expect.objectContaining({
  175. dynamicSdkLoaderOptions: {
  176. ...projectKey.dynamicSdkLoaderOptions,
  177. hasPerformance: true,
  178. },
  179. }),
  180. })
  181. );
  182. });
  183. it('allows to update one of multiple keys', async function () {
  184. const {organization, project} = initializeOrg();
  185. const projectKeys = TestStubs.ProjectKeys([
  186. {
  187. dsn: {
  188. secret:
  189. 'http://188ee45a58094d939428d8585aa6f662:a33bf9aba64c4bbdaf873bb9023b6d2c@dev.getsentry.net:8000/1',
  190. minidump:
  191. 'http://dev.getsentry.net:8000/api/1/minidump?sentry_key=188ee45a58094d939428d8585aa6f662',
  192. public: 'http://188ee45a58094d939428d8585aa6f662@dev.getsentry.net:8000/1',
  193. csp: 'http://dev.getsentry.net:8000/api/1/csp-report/?sentry_key=188ee45a58094d939428d8585aa6f662',
  194. security:
  195. 'http://dev.getsentry.net:8000/api/1/security-report/?sentry_key=188ee45a58094d939428d8585aa6f662',
  196. },
  197. public: '188ee45a58094d939428d8585aa6f662',
  198. secret: 'a33bf9aba64c4bbdaf873bb9023b6d2c',
  199. name: 'Key 2',
  200. rateLimit: null,
  201. projectId: 1,
  202. dateCreated: '2018-02-28T07:13:51.087Z',
  203. id: '188ee45a58094d939428d8585aa6f662',
  204. isActive: true,
  205. label: 'Key 2',
  206. browserSdkVersion: 'latest',
  207. browserSdk: {
  208. choices: [
  209. ['latest', 'latest'],
  210. ['7.x', '7.x'],
  211. ['6.x', '6.x'],
  212. ['5.x', '5.x'],
  213. ['4.x', '4.x'],
  214. ],
  215. },
  216. dynamicSdkLoaderOptions: {
  217. hasPerformance: false,
  218. hasReplay: false,
  219. hasDebug: false,
  220. },
  221. },
  222. ]);
  223. const projectKey = projectKeys[1];
  224. mockApi({organization, project, projectKeys});
  225. const mockPut = MockApiClient.addMockResponse({
  226. url: `/projects/${organization.slug}/${project.slug}/keys/${projectKey.id}/`,
  227. method: 'PUT',
  228. body: {
  229. ...projectKey,
  230. dynamicSdkLoaderOptions: {
  231. ...projectKey.dynamicSdkLoaderOptions,
  232. hasPerformance: true,
  233. },
  234. },
  235. });
  236. render(<LoaderScript project={project} />);
  237. await waitForElementToBeRemoved(() => screen.queryByTestId('loading-indicator'));
  238. expect(
  239. screen.getAllByRole('checkbox', {
  240. name: t('Enable Performance Monitoring'),
  241. checked: false,
  242. })
  243. ).toHaveLength(2);
  244. expect(
  245. screen.getAllByRole('checkbox', {
  246. name: t('Enable Session Replay'),
  247. checked: false,
  248. })
  249. ).toHaveLength(2);
  250. expect(
  251. screen.getAllByRole('checkbox', {
  252. name: t('Enable Debug Bundles & Logging'),
  253. checked: false,
  254. })
  255. ).toHaveLength(2);
  256. // Toggle performance option
  257. await userEvent.click(
  258. screen.getAllByRole('checkbox', {
  259. name: t('Enable Performance Monitoring'),
  260. })[1]
  261. );
  262. expect(
  263. await screen.findByRole('checkbox', {
  264. name: t('Enable Performance Monitoring'),
  265. checked: true,
  266. })
  267. ).toBeInTheDocument();
  268. expect(
  269. screen.getByRole('checkbox', {
  270. name: t('Enable Performance Monitoring'),
  271. checked: false,
  272. })
  273. ).toBeInTheDocument();
  274. expect(
  275. screen.getAllByRole('checkbox', {
  276. name: t('Enable Session Replay'),
  277. checked: false,
  278. })
  279. ).toHaveLength(2);
  280. expect(
  281. screen.getAllByRole('checkbox', {
  282. name: t('Enable Debug Bundles & Logging'),
  283. checked: false,
  284. })
  285. ).toHaveLength(2);
  286. expect(mockPut).toHaveBeenCalledWith(
  287. `/projects/${organization.slug}/${project.slug}/keys/${projectKey.id}/`,
  288. expect.objectContaining({
  289. data: expect.objectContaining({
  290. dynamicSdkLoaderOptions: {
  291. ...projectKey.dynamicSdkLoaderOptions,
  292. hasPerformance: true,
  293. },
  294. }),
  295. })
  296. );
  297. });
  298. });