loaderSettings.spec.tsx 7.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303
  1. import selectEvent from 'react-select-event';
  2. import {initializeOrg} from 'sentry-test/initializeOrg';
  3. import {render, screen, userEvent, waitFor} from 'sentry-test/reactTestingLibrary';
  4. import {t} from 'sentry/locale';
  5. import {Organization, Project} from 'sentry/types';
  6. import {ProjectKey} from 'sentry/views/settings/project/projectKeys/types';
  7. import {KeySettings} from './keySettings';
  8. import {LoaderSettings} from './loaderSettings';
  9. const dynamicSdkLoaderOptions = {
  10. hasPerformance: false,
  11. hasReplay: true,
  12. hasDebug: false,
  13. };
  14. const fullDynamicSdkLoaderOptions = {
  15. hasPerformance: true,
  16. hasReplay: true,
  17. hasDebug: true,
  18. };
  19. function renderMockRequests(
  20. organizationSlug: Organization['slug'],
  21. projectSlug: Project['slug'],
  22. keyId: ProjectKey['id']
  23. ) {
  24. const projectKeys = MockApiClient.addMockResponse({
  25. url: `/projects/${organizationSlug}/${projectSlug}/keys/${keyId}/`,
  26. method: 'PUT',
  27. body: TestStubs.ProjectKeys()[0],
  28. });
  29. return {projectKeys};
  30. }
  31. describe('Loader Script Settings', function () {
  32. it('renders Loader Script Settings', function () {
  33. const params = {
  34. projectId: '1',
  35. keyId: '1',
  36. };
  37. const {organization, project} = initializeOrg({
  38. router: {
  39. params,
  40. },
  41. });
  42. const data = {
  43. ...(TestStubs.ProjectKeys()[0] as ProjectKey),
  44. dynamicSdkLoaderOptions,
  45. } as ProjectKey;
  46. const updateData = jest.fn();
  47. render(
  48. <KeySettings
  49. data={data}
  50. updateData={updateData}
  51. onRemove={jest.fn()}
  52. organization={organization}
  53. project={project}
  54. params={params}
  55. />
  56. );
  57. // Panel title
  58. expect(screen.getByText('JavaScript Loader Script')).toBeInTheDocument();
  59. expect(screen.getByText(t('Enable Performance Monitoring'))).toBeInTheDocument();
  60. expect(screen.getByText(t('Enable Session Replay'))).toBeInTheDocument();
  61. expect(screen.getByText(t('Enable Debug Bundles & Logging'))).toBeInTheDocument();
  62. const performanceCheckbox = screen.getByRole('checkbox', {
  63. name: t('Enable Performance Monitoring'),
  64. });
  65. expect(performanceCheckbox).toBeEnabled();
  66. expect(performanceCheckbox).not.toBeChecked();
  67. const replayCheckbox = screen.getByRole('checkbox', {
  68. name: t('Enable Session Replay'),
  69. });
  70. expect(replayCheckbox).toBeEnabled();
  71. expect(replayCheckbox).toBeChecked();
  72. const debugCheckbox = screen.getByRole('checkbox', {
  73. name: t('Enable Debug Bundles & Logging'),
  74. });
  75. expect(debugCheckbox).toBeEnabled();
  76. expect(debugCheckbox).not.toBeChecked();
  77. });
  78. it('allows to toggle options', async function () {
  79. const {organization, project} = initializeOrg();
  80. const params = {
  81. projectSlug: project.slug,
  82. keyId: '1',
  83. };
  84. const data = {
  85. ...(TestStubs.ProjectKeys()[0] as ProjectKey),
  86. dynamicSdkLoaderOptions,
  87. } as ProjectKey;
  88. const mockRequests = renderMockRequests(
  89. organization.slug,
  90. params.projectSlug,
  91. params.keyId
  92. );
  93. const updateData = jest.fn();
  94. render(
  95. <LoaderSettings
  96. orgSlug={organization.slug}
  97. keyId={params.keyId}
  98. project={project}
  99. data={data}
  100. updateData={updateData}
  101. />
  102. );
  103. // Toggle performance option
  104. userEvent.click(
  105. screen.getByRole('checkbox', {
  106. name: t('Enable Performance Monitoring'),
  107. })
  108. );
  109. await waitFor(() => {
  110. expect(mockRequests.projectKeys).toHaveBeenCalledWith(
  111. `/projects/${organization.slug}/${params.projectSlug}/keys/${params.keyId}/`,
  112. expect.objectContaining({
  113. data: expect.objectContaining({
  114. dynamicSdkLoaderOptions: {
  115. ...dynamicSdkLoaderOptions,
  116. hasPerformance: true,
  117. },
  118. }),
  119. })
  120. );
  121. });
  122. // Update SDK version
  123. await selectEvent.select(screen.getByText('latest'), '7.x');
  124. await waitFor(() => {
  125. expect(mockRequests.projectKeys).toHaveBeenCalledWith(
  126. `/projects/${organization.slug}/${params.projectSlug}/keys/${params.keyId}/`,
  127. expect.objectContaining({
  128. data: expect.objectContaining({
  129. browserSdkVersion: '7.x',
  130. }),
  131. })
  132. );
  133. });
  134. });
  135. it('resets performance & replay when selecting SDK version <7', async function () {
  136. const {organization, project} = initializeOrg();
  137. const params = {
  138. projectSlug: project.slug,
  139. keyId: '1',
  140. };
  141. const data = {
  142. ...(TestStubs.ProjectKeys()[0] as ProjectKey),
  143. dynamicSdkLoaderOptions: fullDynamicSdkLoaderOptions,
  144. } as ProjectKey;
  145. const mockRequests = renderMockRequests(
  146. organization.slug,
  147. params.projectSlug,
  148. params.keyId
  149. );
  150. render(
  151. <LoaderSettings
  152. updateData={jest.fn()}
  153. orgSlug={organization.slug}
  154. keyId={params.keyId}
  155. project={project}
  156. data={data}
  157. />
  158. );
  159. // Update SDK version - should reset performance & replay
  160. await selectEvent.select(screen.getByText('latest'), '6.x');
  161. await waitFor(() => {
  162. expect(mockRequests.projectKeys).toHaveBeenCalledWith(
  163. `/projects/${organization.slug}/${params.projectSlug}/keys/${params.keyId}/`,
  164. expect.objectContaining({
  165. data: {
  166. browserSdkVersion: '6.x',
  167. dynamicSdkLoaderOptions: {
  168. hasPerformance: false,
  169. hasReplay: false,
  170. hasDebug: true,
  171. },
  172. },
  173. })
  174. );
  175. });
  176. });
  177. it('disabled performance & replay when SDK version <7 is selected', function () {
  178. const {organization, project} = initializeOrg();
  179. const params = {
  180. projectSlug: project.slug,
  181. keyId: '1',
  182. };
  183. const data = {
  184. ...(TestStubs.ProjectKeys()[0] as ProjectKey),
  185. dynamicSdkLoaderOptions: {
  186. hasPerformance: false,
  187. hasReplay: false,
  188. hasDebug: true,
  189. },
  190. browserSdkVersion: '6.x',
  191. } as ProjectKey;
  192. render(
  193. <LoaderSettings
  194. updateData={jest.fn()}
  195. orgSlug={organization.slug}
  196. keyId={params.keyId}
  197. project={project}
  198. data={data}
  199. />
  200. );
  201. const performanceCheckbox = screen.getByRole('checkbox', {
  202. name: t('Enable Performance Monitoring'),
  203. });
  204. expect(performanceCheckbox).not.toBeChecked();
  205. const replayCheckbox = screen.getByRole('checkbox', {
  206. name: t('Enable Session Replay'),
  207. });
  208. expect(replayCheckbox).not.toBeChecked();
  209. const debugCheckbox = screen.getByRole('checkbox', {
  210. name: t('Enable Debug Bundles & Logging'),
  211. });
  212. expect(debugCheckbox).toBeChecked();
  213. expect(
  214. screen.getAllByText('Only available in SDK version 7.x and above')
  215. ).toHaveLength(2);
  216. });
  217. it('shows replay message when it is enabled', function () {
  218. const {organization, project} = initializeOrg();
  219. const params = {
  220. projectSlug: project.slug,
  221. keyId: '1',
  222. };
  223. const data = {
  224. ...(TestStubs.ProjectKeys()[0] as ProjectKey),
  225. dynamicSdkLoaderOptions: fullDynamicSdkLoaderOptions,
  226. } as ProjectKey;
  227. const {rerender} = render(
  228. <LoaderSettings
  229. updateData={jest.fn()}
  230. orgSlug={organization.slug}
  231. keyId={params.keyId}
  232. project={project}
  233. data={data}
  234. />
  235. );
  236. expect(
  237. screen.getByText(
  238. 'When using Replay, the loader will load the ES6 bundle instead of the ES5 bundle.'
  239. )
  240. ).toBeInTheDocument();
  241. data.dynamicSdkLoaderOptions.hasReplay = false;
  242. rerender(
  243. <LoaderSettings
  244. updateData={jest.fn()}
  245. orgSlug={organization.slug}
  246. keyId={params.keyId}
  247. project={project}
  248. data={data}
  249. />
  250. );
  251. expect(
  252. screen.queryByText(
  253. 'When using Replay, the loader will load the ES6 bundle instead of the ES5 bundle.'
  254. )
  255. ).not.toBeInTheDocument();
  256. });
  257. });