onboarding.spec.tsx 11 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431
  1. import {initializeOrg} from 'sentry-test/initializeOrg';
  2. import {
  3. render,
  4. renderGlobalModal,
  5. screen,
  6. userEvent,
  7. } from 'sentry-test/reactTestingLibrary';
  8. import {OnboardingContextProvider} from 'sentry/components/onboarding/onboardingContext';
  9. import {PlatformKey} from 'sentry/data/platformCategories';
  10. import ProjectsStore from 'sentry/stores/projectsStore';
  11. import {OnboardingProjectStatus, Project} from 'sentry/types';
  12. import Onboarding from 'sentry/views/onboarding/onboarding';
  13. describe('Onboarding', function () {
  14. afterEach(function () {
  15. MockApiClient.clearMockResponses();
  16. });
  17. it('renders the welcome page', function () {
  18. const routeParams = {
  19. step: 'welcome',
  20. };
  21. const {router, route, routerContext, organization} = initializeOrg({
  22. ...initializeOrg(),
  23. router: {
  24. params: routeParams,
  25. },
  26. });
  27. render(
  28. <OnboardingContextProvider>
  29. <Onboarding
  30. router={router}
  31. location={router.location}
  32. params={routeParams}
  33. routes={router.routes}
  34. routeParams={router.params}
  35. route={route}
  36. />
  37. </OnboardingContextProvider>,
  38. {
  39. context: routerContext,
  40. organization,
  41. }
  42. );
  43. expect(screen.getByLabelText('Start')).toBeInTheDocument();
  44. expect(screen.getByLabelText('Invite Team')).toBeInTheDocument();
  45. });
  46. it('renders the select platform step', async function () {
  47. const routeParams = {
  48. step: 'select-platform',
  49. };
  50. const {router, route, routerContext, organization} = initializeOrg({
  51. ...initializeOrg(),
  52. router: {
  53. params: routeParams,
  54. },
  55. });
  56. render(
  57. <OnboardingContextProvider>
  58. <Onboarding
  59. router={router}
  60. location={router.location}
  61. params={routeParams}
  62. routes={router.routes}
  63. routeParams={router.params}
  64. route={route}
  65. />
  66. </OnboardingContextProvider>,
  67. {
  68. context: routerContext,
  69. organization,
  70. }
  71. );
  72. expect(
  73. await screen.findByText('Select the platform you want to monitor')
  74. ).toBeInTheDocument();
  75. });
  76. it('renders the setup docs step', async function () {
  77. const nextJsProject: Project = TestStubs.Project({
  78. platform: 'javascript-nextjs',
  79. id: '2',
  80. slug: 'javascript-nextjs-slug',
  81. });
  82. const routeParams = {
  83. step: 'setup-docs',
  84. };
  85. const {router, route, routerContext, organization} = initializeOrg({
  86. ...initializeOrg(),
  87. router: {
  88. params: routeParams,
  89. },
  90. });
  91. MockApiClient.addMockResponse({
  92. url: `/projects/${organization.slug}/${nextJsProject.slug}/docs/javascript-nextjs-with-error-monitoring/`,
  93. body: null,
  94. });
  95. MockApiClient.addMockResponse({
  96. url: `/projects/org-slug/${nextJsProject.slug}/`,
  97. body: [nextJsProject],
  98. });
  99. MockApiClient.addMockResponse({
  100. url: `/projects/${organization.slug}/${nextJsProject.slug}/issues/`,
  101. body: [],
  102. });
  103. ProjectsStore.loadInitialData([nextJsProject]);
  104. render(
  105. <OnboardingContextProvider
  106. value={{
  107. selectedSDK: {
  108. key: nextJsProject.slug as PlatformKey,
  109. type: 'framework',
  110. language: 'javascript',
  111. category: 'browser',
  112. },
  113. projects: {
  114. [nextJsProject.id]: {
  115. slug: nextJsProject.slug,
  116. status: OnboardingProjectStatus.WAITING,
  117. firstIssueId: undefined,
  118. },
  119. },
  120. }}
  121. >
  122. <Onboarding
  123. router={router}
  124. location={router.location}
  125. params={routeParams}
  126. routes={router.routes}
  127. routeParams={router.params}
  128. route={route}
  129. />
  130. </OnboardingContextProvider>,
  131. {
  132. context: routerContext,
  133. organization,
  134. }
  135. );
  136. expect(await screen.findByText('Configure Next.js SDK')).toBeInTheDocument();
  137. });
  138. it('renders SDK data removal modal when going back', async function () {
  139. const reactProject: Project = TestStubs.Project({
  140. platform: 'javascript-react',
  141. id: '2',
  142. slug: 'javascript-react-slug',
  143. firstTransactionEvent: false,
  144. firstEvent: false,
  145. hasReplays: false,
  146. hasSessions: false,
  147. });
  148. const routeParams = {
  149. step: 'setup-docs',
  150. };
  151. const {router, route, routerContext, organization} = initializeOrg({
  152. ...initializeOrg(),
  153. organization: {
  154. ...initializeOrg().organization,
  155. features: ['onboarding-project-deletion-on-back-click'],
  156. },
  157. router: {
  158. params: routeParams,
  159. },
  160. });
  161. MockApiClient.addMockResponse({
  162. url: `/projects/${organization.slug}/${reactProject.slug}/docs/javascript-react-with-error-monitoring/`,
  163. body: null,
  164. });
  165. MockApiClient.addMockResponse({
  166. url: `/projects/org-slug/${reactProject.slug}/`,
  167. body: [reactProject],
  168. });
  169. MockApiClient.addMockResponse({
  170. url: `/projects/${organization.slug}/${reactProject.slug}/issues/`,
  171. body: [],
  172. });
  173. ProjectsStore.loadInitialData([reactProject]);
  174. render(
  175. <OnboardingContextProvider
  176. value={{
  177. selectedSDK: {
  178. key: reactProject.slug as PlatformKey,
  179. type: 'framework',
  180. language: 'javascript',
  181. category: 'browser',
  182. },
  183. projects: {
  184. [reactProject.id]: {
  185. slug: reactProject.slug,
  186. status: OnboardingProjectStatus.WAITING,
  187. firstIssueId: undefined,
  188. },
  189. },
  190. }}
  191. >
  192. <Onboarding
  193. router={router}
  194. location={router.location}
  195. params={routeParams}
  196. routes={router.routes}
  197. routeParams={router.params}
  198. route={route}
  199. />
  200. </OnboardingContextProvider>,
  201. {
  202. context: routerContext,
  203. organization,
  204. }
  205. );
  206. // Await for the docs to be loaded
  207. await screen.findByText('Configure React SDK');
  208. renderGlobalModal();
  209. // Click on back button
  210. await userEvent.click(screen.getByRole('button', {name: 'Back'}));
  211. // Await for the modal to be open
  212. expect(
  213. await screen.findByText(/Are you sure you want to head back?/)
  214. ).toBeInTheDocument();
  215. // Close modal
  216. await userEvent.click(screen.getByRole('button', {name: 'Cancel'}));
  217. });
  218. it('does not render SDK data removal modal when going back', async function () {
  219. const reactProject: Project = TestStubs.Project({
  220. platform: 'javascript-react',
  221. id: '2',
  222. slug: 'javascript-react-slug',
  223. firstTransactionEvent: false,
  224. firstEvent: false,
  225. hasReplays: false,
  226. hasSessions: true,
  227. });
  228. const routeParams = {
  229. step: 'setup-docs',
  230. };
  231. const {router, route, routerContext, organization} = initializeOrg({
  232. ...initializeOrg(),
  233. organization: {
  234. ...initializeOrg().organization,
  235. features: ['onboarding-project-deletion-on-back-click'],
  236. },
  237. router: {
  238. params: routeParams,
  239. },
  240. });
  241. MockApiClient.addMockResponse({
  242. url: `/projects/${organization.slug}/${reactProject.slug}/docs/javascript-react-with-error-monitoring/`,
  243. body: null,
  244. });
  245. MockApiClient.addMockResponse({
  246. url: `/projects/org-slug/${reactProject.slug}/`,
  247. body: [reactProject],
  248. });
  249. MockApiClient.addMockResponse({
  250. url: `/projects/${organization.slug}/${reactProject.slug}/issues/`,
  251. body: [],
  252. });
  253. ProjectsStore.loadInitialData([reactProject]);
  254. render(
  255. <OnboardingContextProvider
  256. value={{
  257. selectedSDK: {
  258. key: reactProject.slug as PlatformKey,
  259. type: 'framework',
  260. language: 'javascript',
  261. category: 'browser',
  262. },
  263. projects: {
  264. [reactProject.id]: {
  265. slug: reactProject.slug,
  266. status: OnboardingProjectStatus.WAITING,
  267. firstIssueId: undefined,
  268. },
  269. },
  270. }}
  271. >
  272. <Onboarding
  273. router={router}
  274. location={router.location}
  275. params={routeParams}
  276. routes={router.routes}
  277. routeParams={router.params}
  278. route={route}
  279. />
  280. </OnboardingContextProvider>,
  281. {
  282. context: routerContext,
  283. organization,
  284. }
  285. );
  286. // Await for the docs to be loaded
  287. await screen.findByText('Configure React SDK');
  288. renderGlobalModal();
  289. // Click on back button
  290. await userEvent.click(screen.getByRole('button', {name: 'Back'}));
  291. // Await for the modal to be open
  292. expect(
  293. screen.queryByText(/Are you sure you want to head back?/)
  294. ).not.toBeInTheDocument();
  295. });
  296. it('renders framework selection modal if vanilla js is selected', async function () {
  297. const routeParams = {
  298. step: 'select-platform',
  299. };
  300. const {router, route, routerContext, organization} = initializeOrg({
  301. ...initializeOrg(),
  302. organization: {
  303. ...initializeOrg().organization,
  304. features: ['onboarding-sdk-selection'],
  305. },
  306. router: {
  307. params: routeParams,
  308. },
  309. });
  310. render(
  311. <OnboardingContextProvider>
  312. <Onboarding
  313. router={router}
  314. location={router.location}
  315. params={routeParams}
  316. routes={router.routes}
  317. routeParams={router.params}
  318. route={route}
  319. />
  320. </OnboardingContextProvider>,
  321. {
  322. context: routerContext,
  323. organization,
  324. }
  325. );
  326. renderGlobalModal();
  327. // Select the JavaScript platform
  328. await userEvent.click(screen.getByTestId('platform-javascript'));
  329. // Click on 'configure SDK' button
  330. await userEvent.click(screen.getByRole('button', {name: 'Configure SDK'}));
  331. // Modal is open
  332. await screen.findByText('Do you use a framework?');
  333. // Close modal
  334. await userEvent.click(screen.getByRole('button', {name: 'Skip'}));
  335. });
  336. it('does not render framework selection modal if vanilla js is NOT selected', async function () {
  337. const routeParams = {
  338. step: 'select-platform',
  339. };
  340. const {router, route, routerContext, organization} = initializeOrg({
  341. ...initializeOrg(),
  342. organization: {
  343. ...initializeOrg().organization,
  344. features: ['onboarding-sdk-selection'],
  345. },
  346. router: {
  347. params: routeParams,
  348. },
  349. });
  350. render(
  351. <OnboardingContextProvider>
  352. <Onboarding
  353. router={router}
  354. location={router.location}
  355. params={routeParams}
  356. routes={router.routes}
  357. routeParams={router.params}
  358. route={route}
  359. />
  360. </OnboardingContextProvider>,
  361. {
  362. context: routerContext,
  363. organization,
  364. }
  365. );
  366. // Select the React platform
  367. await userEvent.click(screen.getByTestId('platform-javascript-react'));
  368. // Click on 'configure SDK' button
  369. await userEvent.click(screen.getByRole('button', {name: 'Configure SDK'}));
  370. // Modal shall not be open
  371. expect(screen.queryByText('Do you use a framework?')).not.toBeInTheDocument();
  372. });
  373. });