refactor: change e2e implementation for workers

Author: mormubis

test/e2e/lib/framework/createTest.ts

@@ -13,18 +13,13 @@ import { IntakeRegistry } from './intakeRegistry'
 import { flushEvents } from './flushEvents'
 import type { Servers } from './httpServers'
 import { getTestServers, waitForServersIdle } from './httpServers'
-import type { SetupFactory, SetupOptions } from './pageSetups'
-import { html, DEFAULT_SETUPS, npmSetup, reactSetup } from './pageSetups'
+import type { SetupFactory, SetupOptions, WorkerImplementationFactory } from './pageSetups'
+import { workerSetup, html, DEFAULT_SETUPS, npmSetup, reactSetup } from './pageSetups'
 import { createIntakeServerApp } from './serverApps/intake'
 import { createMockServerApp } from './serverApps/mock'
 import type { Extension } from './createExtension'
 import { isBrowserStack } from './environment'
 
-interface LogsWorkerOptions {
-  importScript?: boolean
-  nativeLog?: boolean
-}
-
 export function createTest(title: string) {
   return new TestBuilder(title)
 }
@@ -62,8 +57,8 @@ class TestBuilder {
     rumConfiguration?: RumInitConfiguration
     logsConfiguration?: LogsInitConfiguration
   } = {}
-  private useServiceWorker: boolean = false
   private hostName?: string
+  private workerImplementationFactory?: (setup: string) => string
 
   constructor(private title: string) {}
 
@@ -135,37 +130,23 @@ class TestBuilder {
     return this
   }
 
-  withWorker({ importScript = false, nativeLog = false }: LogsWorkerOptions = {}) {
-    if (!this.useServiceWorker) {
-      this.useServiceWorker = true
+  withWorker(implementation: WorkerImplementationFactory, isModule = false) {
+    implementation.isModule = isModule
+    this.workerImplementationFactory = implementation
 
-      const isModule = !importScript
-
-      const params = []
-      if (importScript) {
-        params.push('importScripts=true')
-      }
-      if (nativeLog) {
-        params.push('nativeLog=true')
-      }
+    const options = isModule ? '{ type: "module" }' : '{}'
 
-      const query = params.length > 0 ? `?${params.join('&')}` : ''
-      const url = `/sw.js${query}`
-
-      const options = isModule ? '{ type: "module" }' : '{}'
-
-      // Service workers require HTTPS or localhost due to browser security restrictions
-      this.hostName = 'localhost'
-      this.withBody(html`
-        <script>
-          if (!window.myServiceWorker && 'serviceWorker' in navigator) {
-            navigator.serviceWorker.register('${url}', ${options}).then((registration) => {
-              window.myServiceWorker = registration
-            })
-          }
-        </script>
-      `)
-    }
+    // Service workers require HTTPS or localhost due to browser security restrictions
+    this.withHostName('localhost')
+    this.withBody(html`
+      <script>
+        if (!window.myServiceWorker && 'serviceWorker' in navigator) {
+          navigator.serviceWorker.register('/sw.js', ${options}).then((registration) => {
+            window.myServiceWorker = registration
+          })
+        }
+      </script>
+    `)
 
     return this
   }
@@ -194,6 +175,7 @@ class TestBuilder {
       testFixture: this.testFixture,
       extension: this.extension,
       hostName: this.hostName,
+      workerImplementation: this.workerImplementationFactory,
     }
 
     if (this.alsoRunWithRumSlim) {
@@ -270,7 +252,12 @@ function declareTest(title: string, setupOptions: SetupOptions, factory: SetupFa
     servers.intake.bindServerApp(createIntakeServerApp(testContext.intakeRegistry))
 
     const setup = factory(setupOptions, servers)
-    servers.base.bindServerApp(createMockServerApp(servers, setup, setupOptions.remoteConfiguration))
+    servers.base.bindServerApp(
+      createMockServerApp(servers, setup, {
+        remoteConfiguration: setupOptions.remoteConfiguration,
+        workerImplementation: setupOptions.workerImplementation && workerSetup(setupOptions, servers),
+      })
+    )
     servers.crossOrigin.bindServerApp(createMockServerApp(servers, setup))
 
     await setUpTest(browserLogs, testContext)

test/e2e/lib/framework/index.ts

@@ -1,7 +1,15 @@
 export { createTest } from './createTest'
 export { DEFAULT_RUM_CONFIGURATION, DEFAULT_LOGS_CONFIGURATION } from '../helpers/configuration'
 export { createExtension } from './createExtension'
-export { bundleSetup, html, npmSetup, reactSetup, formatConfiguration, createCrossOriginScriptUrls } from './pageSetups'
+export {
+  bundleSetup,
+  html,
+  js,
+  npmSetup,
+  reactSetup,
+  formatConfiguration,
+  createCrossOriginScriptUrls,
+} from './pageSetups'
 export { IntakeRegistry } from './intakeRegistry'
 export { getTestServers, waitForServersIdle } from './httpServers'
 export { flushEvents } from './flushEvents'

test/e2e/lib/framework/pageSetups.ts

@@ -6,6 +6,10 @@ import { DEFAULT_LOGS_CONFIGURATION } from '../helpers/configuration'
 import { isBrowserStack, isContinuousIntegration } from './environment'
 import type { Servers } from './httpServers'
 
+export interface WorkerImplementationFactory {
+  (setup: string): string
+  isModule?: boolean
+}
 export interface SetupOptions {
   rum?: RumInitConfiguration
   useRumSlim: boolean
@@ -27,6 +31,7 @@ export interface SetupOptions {
     logsConfiguration?: LogsInitConfiguration
   }
   hostName?: string
+  workerImplementation?: WorkerImplementationFactory
 }
 
 export interface WorkerOptions {
@@ -209,20 +214,23 @@ export function reactSetup(options: SetupOptions, servers: Servers, appName: str
   })
 }
 
-export function workerSetup(options: WorkerOptions, servers: Servers) {
-  return js`
-      ${options.importScripts ? js`importScripts('/datadog-logs.js');` : js`import '/datadog-logs.js';`}
+export function workerSetup(options: SetupOptions, servers: Servers) {
+  let script = ''
+
+  if (!options.workerImplementation) {
+    return script
+  }
+
+  if (options.logs) {
+    script += js`
+      ${options.workerImplementation.isModule ? js`import '/datadog-logs.js';` : js`importScripts('/datadog-logs.js');`}
       
       // Initialize DD_LOGS in service worker
-      DD_LOGS.init(${formatConfiguration({ ...DEFAULT_LOGS_CONFIGURATION, forwardConsoleLogs: 'all', forwardErrorsToLogs: true }, servers)})
-
-      // Handle messages from main thread
-      self.addEventListener('message', (event) => {
-        const message = event.data;
-        
-        ${options.nativeLog ? js`console.log(message);` : js`DD_LOGS.logger.log(message);`}
-      });
+      DD_LOGS.init(${formatConfiguration({ ...DEFAULT_LOGS_CONFIGURATION, ...options.logs }, servers)})
     `
+  }
+
+  return options.workerImplementation(script)
 }
 
 export function basePage({ header, body }: { header?: string; body?: string }) {
@@ -244,7 +252,7 @@ export function html(parts: readonly string[], ...vars: string[]) {
   return parts.reduce((full, part, index) => full + vars[index - 1] + part)
 }
 
-function js(parts: readonly string[], ...vars: string[]) {
+export function js(parts: readonly string[], ...vars: string[]) {
   return parts.reduce((full, part, index) => full + vars[index - 1] + part)
 }
 

test/e2e/lib/framework/serverApps/mock.ts

@@ -6,14 +6,19 @@ import type { RemoteConfiguration } from '@datadog/browser-rum-core'
 import { getSdkBundlePath, getTestAppBundlePath } from '../sdkBuilds'
 import type { MockServerApp, Servers } from '../httpServers'
 import { DEV_SERVER_BASE_URL } from '../../helpers/playwright'
-import { workerSetup } from '../pageSetups'
 
 export const LARGE_RESPONSE_MIN_BYTE_SIZE = 100_000
 
 export function createMockServerApp(
   servers: Servers,
   setup: string,
-  remoteConfiguration?: RemoteConfiguration
+  {
+    remoteConfiguration,
+    workerImplementation,
+  }: {
+    remoteConfiguration?: RemoteConfiguration
+    workerImplementation?: string
+  } = {}
 ): MockServerApp {
   const app = express()
   let largeResponseBytesWritten = 0
@@ -46,11 +51,7 @@ export function createMockServerApp(
   })
 
   app.get('/sw.js', (_req, res) => {
-    const query = _req.query
-
-    res
-      .contentType('application/javascript')
-      .send(workerSetup({ importScripts: Boolean(query.importScripts), nativeLog: Boolean(query.nativeLog) }, servers))
+    res.contentType('application/javascript').send(workerImplementation)
   })
 
   function generateLargeResponse(res: ServerResponse, chunkText: string) {

test/e2e/scenario/logs.scenario.ts

@@ -1,6 +1,6 @@
 import { DEFAULT_REQUEST_ERROR_RESPONSE_LENGTH_LIMIT } from '@datadog/browser-logs/cjs/domain/configuration'
 import { test, expect } from '@playwright/test'
-import { createTest } from '../lib/framework'
+import { createTest, js } from '../lib/framework'
 import { APPLICATION_ID } from '../lib/helpers/configuration'
 
 const UNREACHABLE_URL = 'http://localhost:9999/unreachable'
@@ -13,7 +13,21 @@ declare global {
 
 test.describe('logs', () => {
   createTest('service worker with worker logs - esm')
-    .withWorker()
+    .withLogs()
+    .withWorker(
+      (setup) => js`
+        // Initialize DD_LOGS in service worker
+        ${setup}
+
+        // Handle messages from main thread
+        self.addEventListener('message', (event) => {
+          const message = event.data;
+
+          DD_LOGS.logger.log(message);
+        });
+      `,
+      true
+    )
     .run(async ({ flushEvents, intakeRegistry, browserName, interactWithWorker }) => {
       test.skip(browserName !== 'chromium', 'Non-Chromium browsers do not support ES modules in Service Workers')
 
@@ -28,7 +42,20 @@ test.describe('logs', () => {
     })
 
   createTest('service worker with worker logs - importScripts')
-    .withWorker({ importScript: true })
+    .withLogs()
+    .withWorker(
+      (setup) => js`
+        // Initialize DD_LOGS in service worker
+        ${setup}
+
+        // Handle messages from main thread
+        self.addEventListener('message', (event) => {
+          const message = event.data;
+
+          DD_LOGS.logger.log(message);
+        });
+      `
+    )
     .run(async ({ flushEvents, intakeRegistry, browserName, interactWithWorker }) => {
       test.skip(
         browserName === 'webkit',
@@ -46,7 +73,20 @@ test.describe('logs', () => {
     })
 
   createTest('service worker console forwarding')
-    .withWorker({ importScript: true, nativeLog: true })
+    .withLogs({ forwardConsoleLogs: 'all', forwardErrorsToLogs: true })
+    .withWorker(
+      (setup) => js`
+        // Initialize DD_LOGS in service worker
+        ${setup}
+  
+        // Handle messages from main thread
+        self.addEventListener('message', (event) => {
+          const message = event.data;
+  
+          console.log(message);
+        });
+      `
+    )
     .run(async ({ flushEvents, intakeRegistry, interactWithWorker, browserName }) => {
       test.skip(
         browserName === 'webkit',