use async to detect sveltekit and add tests

Author: Lms24

packages/svelte/src/sdk.ts

@@ -1,5 +1,5 @@
 import { addGlobalEventProcessor, BrowserOptions, init as browserInit, SDK_VERSION } from '@sentry/browser';
-import { getDomElement } from '@sentry/utils';
+import { getDomElement, SyncPromise } from '@sentry/utils';
 /**
  * Inits the Svelte SDK
  */
@@ -18,15 +18,18 @@ export function init(options: BrowserOptions): void {
 
   browserInit(options);
 
-  detectSvelteKit();
+  void detectAndReportSvelteKit();
 }
 
 /**
  * Detects if the SDK is initialized in a SvelteKit frontend, in which case
- * we add a global event processor to add it as a module to outgoing events.
+ * we add a global event processor to add it as an event.module entry to
+ * outgoing events.
  */
-function detectSvelteKit(): void {
-  setTimeout(() => {
+export function detectAndReportSvelteKit(): PromiseLike<void> {
+  // We have to run this async because only after the SDK is initialized,
+  // the HTML element is available
+  return new SyncPromise(resolve => {
     if (isSvelteKitApp()) {
       addGlobalEventProcessor(event => {
         event.modules = {
@@ -36,7 +39,8 @@ function detectSvelteKit(): void {
         return event;
       });
     }
-  }, 0);
+    resolve();
+  });
 }
 
 /**

packages/svelte/test/sdk.test.ts

@@ -1,12 +1,14 @@
-import { init as browserInitRaw, SDK_VERSION } from '@sentry/browser';
+import { addGlobalEventProcessor, init as browserInitRaw, SDK_VERSION } from '@sentry/browser';
 
-import { init as svelteInit } from '../src/sdk';
+import { detectAndReportSvelteKit, init as svelteInit } from '../src/sdk';
 
 const browserInit = browserInitRaw as jest.Mock;
+const addGlobalEventProcessorFunction = addGlobalEventProcessor as jest.Mock;
+
 jest.mock('@sentry/browser');
 
 describe('Initialize Svelte SDk', () => {
-  afterAll(() => {
+  afterEach(() => {
     jest.clearAllMocks();
   });
 
@@ -29,3 +31,25 @@ describe('Initialize Svelte SDk', () => {
     expect(browserInit).toHaveBeenCalledWith(expect.objectContaining(expectedMetadata));
   });
 });
+
+describe('detectAndReportSvelteKit()', () => {
+  afterEach(() => {
+    jest.clearAllMocks();
+  });
+
+  it('detects SvelteKit correctly and adds a global event processor', async () => {
+    document.body.innerHTML += '<div id="svelte-announcer">Navigated to Home</div>';
+
+    await detectAndReportSvelteKit();
+
+    expect(addGlobalEventProcessorFunction).toHaveBeenCalledTimes(1);
+  });
+
+  it("doesn't add global event processor, if SvelteKit was not detected", async () => {
+    document.body.innerHTML = '';
+
+    await detectAndReportSvelteKit();
+
+    expect(addGlobalEventProcessorFunction).not.toHaveBeenCalled();
+  });
+});