[chain-pr 12/12] Migrate e2e and performance test apps and scenarios to v7 APIs

packages/rum-react/src/domain/reactRouter/createRouter.spec.ts

@@ -15,10 +15,6 @@ describe('createRouter', () => {
       let router: ReturnType<typeof createMemoryRouter>
 
       beforeEach(() => {
-        if (!window.AbortController) {
-          pending('createMemoryRouter relies on AbortController')
-        }
-
         startViewSpy = jasmine.createSpy()
         initializeReactPlugin({
           configuration: {

packages/worker/src/domain/deflate.d.ts

@@ -11,5 +11,3 @@ export class Deflate {
 export const constants: {
   [name: string]: number
 }
-
-export function string2buf(input: string): Uint8ArrayBuffer

test/apps/base-extension/src/cdn.ts

@@ -23,6 +23,7 @@ function load<T extends 'DD_RUM' | 'DD_LOGS'>(
 ) {
   const script = document.createElement('script')
   script.src = url
+  script.crossOrigin = ''
   script.onload = () => {
     if (!window[sdk]) {
       console.error(`${sdk} is not loaded`)

test/apps/microfrontend/common.ts

@@ -57,8 +57,8 @@ export function createApp(id: string, title: string, borderColor: string) {
   })
 
   createButton(container, 'vital', () => {
-    const ref = window.DD_RUM.startDurationVital(`${id}-vital`)
-    window.DD_RUM.stopDurationVital(ref)
+    window.DD_RUM.startDurationVital(`${id}-vital`)
+    window.DD_RUM.stopDurationVital(`${id}-vital`)
   })
 
   createButton(container, 'feature-operation', () => {

test/apps/microfrontend/types.d.ts

@@ -2,8 +2,8 @@ interface Window {
   DD_RUM: {
     addError: (error: Error) => void
     addAction: (name: string, context?: any) => void
-    startDurationVital: (name: string) => any
-    stopDurationVital: (ref: any) => void
+    startDurationVital: (name: string, options?: { vitalKey?: string }) => void
+    stopDurationVital: (name: string, options?: { vitalKey?: string }) => void
     startFeatureOperation: (name: string) => void
     startView: (options: { name: string }) => void
   }

test/e2e/lib/framework/createTest.ts

@@ -55,6 +55,7 @@ class TestBuilder {
   private eventBridge: EventBridgeOptions | undefined
   private setups: Array<{ factory: SetupFactory; name?: string }> = DEFAULT_SETUPS
   private testFixture: typeof test = test
+  private mockClock = false
   private extension: {
     rumConfiguration?: RumInitConfiguration
     logsConfiguration?: LogsInitConfiguration
@@ -111,6 +112,11 @@ class TestBuilder {
     return this
   }
 
+  withMockClock() {
+    this.mockClock = true
+    return this
+  }
+
   withVueApp() {
     this.baseUrlHooks.push((baseUrl, servers, { rum, context }) => {
       baseUrl.port = VUE_ROUTER_APP_PORT
@@ -232,6 +238,7 @@ class TestBuilder {
       extension: this.extension,
       worker: this.worker,
       callerLocation: this.callerLocation,
+      mockClock: this.mockClock,
     }
 
     if (this.alsoRunWithRumSlim) {
@@ -360,7 +367,7 @@ function declareTest(title: string, setupOptions: SetupOptions, factory: SetupFa
     servers.base.bindServerApp(createMockServerApp(servers, setup, setupOptions))
     servers.crossOrigin.bindServerApp(createMockServerApp(servers, setup))
 
-    await setUpTest(browserLogs, testContext)
+    await setUpTest(browserLogs, setupOptions, testContext)
 
     try {
       await runner(testContext)
@@ -426,7 +433,11 @@ function createTestContext(
   }
 }
 
-async function setUpTest(browserLogsManager: BrowserLogsManager, { baseUrl, page, browserContext }: TestContext) {
+async function setUpTest(
+  browserLogsManager: BrowserLogsManager,
+  { mockClock }: SetupOptions,
+  { baseUrl, page, browserContext }: TestContext
+) {
   browserContext.on('console', (msg) => {
     browserLogsManager.add({
       level: msg.type() as BrowserLog['level'],
@@ -445,6 +456,13 @@ async function setUpTest(browserLogsManager: BrowserLogsManager, { baseUrl, page
     })
   })
 
+  if (mockClock) {
+    try {
+      await page.clock.install()
+    } catch (e) {
+      test.skip(true, `Mock clock is not supported in this browser: ${String(e)}`)
+    }
+  }
   await page.goto(baseUrl)
   await waitForServersIdle()
 }

test/e2e/lib/framework/intakeProxyMiddleware.ts

@@ -12,6 +12,7 @@ interface BaseIntakeRequest {
   isBridge: boolean
   encoding: string | null
   transport: string | null
+  batchTime: number | null
 }
 
 export type LogsIntakeRequest = {
@@ -58,6 +59,7 @@ interface IntakeRequestInfos {
   intakeType: IntakeRequest['intakeType']
   encoding: string | null
   transport: string | null
+  batchTime: number | null
 }
 
 interface IntakeProxyOptions {
@@ -90,13 +92,16 @@ function computeIntakeRequestInfos(req: express.Request): IntakeRequestInfos {
 
   const encoding = req.headers['content-encoding'] || searchParams.get('dd-evp-encoding')
   const transport = searchParams.get('_dd.api')
+  const batchTimeRaw = searchParams.get('batch_time')
+  const batchTime = batchTimeRaw ? Number(batchTimeRaw) : null
 
   if (req.query.bridge === 'true') {
     const eventType = req.query.event_type
     return {
       isBridge: true,
       encoding,
       transport,
+      batchTime,
       intakeType: eventType === 'log' ? 'logs' : eventType === 'record' ? 'replay' : 'rum',
     }
   }
@@ -113,6 +118,7 @@ function computeIntakeRequestInfos(req: express.Request): IntakeRequestInfos {
     isBridge: false,
     encoding,
     transport,
+    batchTime,
     intakeType,
   }
 }

test/e2e/lib/framework/pageSetups.ts

@@ -27,6 +27,7 @@ export interface SetupOptions {
   }
   worker?: WorkerOptions
   callerLocation?: CallerLocation
+  mockClock: boolean
 }
 
 export interface CallerLocation {
@@ -74,7 +75,7 @@ export function asyncSetup(options: SetupOptions, servers: Servers) {
   function formatSnippet(url: string, globalName: string) {
     return `(function(h,o,u,n,d) {
 h=h[d]=h[d]||{q:[],onReady:function(c){h.q.push(c)}}
-d=o.createElement(u);d.async=1;d.src=n
+d=o.createElement(u);d.async=1;d.src=n;d.crossOrigin=''
 n=o.getElementsByTagName(u)[0];n.parentNode.insertBefore(d,n)
 })(window,document,'script','${url}','${globalName}')`
   }
@@ -122,15 +123,15 @@ export function bundleSetup(options: SetupOptions, servers: Servers) {
   const { logsScriptUrl, rumScriptUrl } = createCrossOriginScriptUrls(servers, options)
 
   if (options.logs) {
-    header += html`<script type="text/javascript" src="${logsScriptUrl}"></script>`
+    header += html`<script type="text/javascript" src="${logsScriptUrl}" crossorigin></script>`
     header += html`<script type="text/javascript">
       DD_LOGS.setGlobalContext(${JSON.stringify(options.context)})
       ;(${options.logsInit.toString()})(${formatConfiguration(options.logs, servers)})
     </script>`
   }
 
   if (options.rum) {
-    header += html`<script type="text/javascript" src="${rumScriptUrl}"></script>`
+    header += html`<script type="text/javascript" src="${rumScriptUrl}" crossorigin></script>`
     header += html`<script type="text/javascript">
       DD_RUM.setGlobalContext(${JSON.stringify(options.context)})
       ;(${options.rumInit.toString()})(${formatConfiguration(options.rum, servers)})
@@ -252,7 +253,7 @@ export function microfrontendSetup(options: SetupOptions, servers: Servers) {
   const { rumScriptUrl } = createCrossOriginScriptUrls(servers, options)
 
   if (options.rum) {
-    header += html`<script type="text/javascript" src="${rumScriptUrl}"></script>`
+    header += html`<script type="text/javascript" src="${rumScriptUrl}" crossorigin></script>`
     header += html`<script type="text/javascript">
       DD_RUM.setGlobalContext(${JSON.stringify(options.context)})
       ;(${options.rumInit.toString()})(${formatConfiguration(options.rum, servers)})

test/e2e/scenario/browser-extensions/browserExtensions.scenario.ts

@@ -97,8 +97,8 @@ test.describe('browser extensions', () => {
     .withSetup((options, servers) => {
       const { rumScriptUrl, logsScriptUrl } = createCrossOriginScriptUrls(servers, options)
       return `
-          <script src="${rumScriptUrl}"></script>
-          <script src="${logsScriptUrl}"></script>
+          <script src="${rumScriptUrl}" crossorigin></script>
+          <script src="${logsScriptUrl}" crossorigin></script>
           <script>
             const script = document.createElement('script')
             script.innerHTML = 'window.DD_RUM.init(${formatConfiguration(options.rum!, servers)}); window.DD_LOGS.init(${formatConfiguration(options.logs!, servers)})'

test/e2e/scenario/logs.scenario.ts

@@ -29,6 +29,7 @@ test.describe('logs', () => {
 
         expect(intakeRegistry.logsRequests).toHaveLength(1)
         expect(intakeRegistry.logsEvents[0].message).toBe('Some message')
+        expect(intakeRegistry.logsEvents[0].session_id).toBeDefined()
       })
 
     createTest('service worker with worker logs - importScripts')
@@ -47,6 +48,7 @@ test.describe('logs', () => {
 
         expect(intakeRegistry.logsRequests).toHaveLength(1)
         expect(intakeRegistry.logsEvents[0].message).toBe('Other message')
+        expect(intakeRegistry.logsEvents[0].session_id).toBeDefined()
       })
 
     createTest('service worker console forwarding')
@@ -66,6 +68,7 @@ test.describe('logs', () => {
         // Expect logs for console, error, and report events from service worker
         expect(intakeRegistry.logsRequests).toHaveLength(1)
         expect(intakeRegistry.logsEvents[0].message).toBe('SW console log test')
+        expect(intakeRegistry.logsEvents[0].session_id).toBeDefined()
       })
   })
 
@@ -98,8 +101,8 @@ test.describe('logs', () => {
       })
     })
 
-  createTest('send console errors')
-    .withLogs({ forwardErrorsToLogs: true })
+  createTest('send console errors with forwardConsoleLogs set to ["error"]')
+    .withLogs({ forwardConsoleLogs: ['error'] })
     .run(async ({ intakeRegistry, flushEvents, page, withBrowserLogs }) => {
       await page.evaluate(() => {
         console.error('oh snap')
@@ -157,6 +160,38 @@ test.describe('logs', () => {
       })
     })
 
+  createTest('do not send XHR network errors for aborted requests')
+    .withLogs({ forwardErrorsToLogs: true })
+    .run(async ({ intakeRegistry, flushEvents, page }) => {
+      await page.evaluate(
+        () =>
+          new Promise<void>((resolve) => {
+            const xhr = new XMLHttpRequest()
+            xhr.addEventListener('loadend', () => resolve())
+            xhr.open('GET', '/')
+            xhr.send()
+            xhr.abort()
+          })
+      )
+
+      await flushEvents()
+      expect(intakeRegistry.logsEvents).toHaveLength(0)
+    })
+
+  createTest('do not send fetch network errors for aborted requests')
+    .withLogs({ forwardErrorsToLogs: true })
+    .run(async ({ intakeRegistry, flushEvents, page }) => {
+      await page.evaluate(() => {
+        const controller = new AbortController()
+        const p = fetch('/', { signal: controller.signal }).catch(() => undefined)
+        controller.abort()
+        return p
+      })
+
+      await flushEvents()
+      expect(intakeRegistry.logsEvents).toHaveLength(0)
+    })
+
   createTest('keep only the first bytes of the response')
     .withLogs({ forwardErrorsToLogs: true })
     .run(async ({ intakeRegistry, baseUrl, servers, flushEvents, page, withBrowserLogs, browserName }) => {

test/e2e/scenario/microfrontend.scenario.ts

@@ -167,8 +167,8 @@ test.describe('microfrontend', () => {
           window.DD_RUM!.init(configuration)
 
           function testHandlingStack() {
-            const ref = window.DD_RUM!.startDurationVital('test-vital')
-            window.DD_RUM!.stopDurationVital(ref)
+            window.DD_RUM!.startDurationVital('test-vital')
+            window.DD_RUM!.stopDurationVital('test-vital')
           }
 
           testHandlingStack()