✅ [RUM-10146] mock global performance buffer when mocking PerformanceObserver (#3752)

Author: BenoitZugmeyer

packages/rum-core/src/browser/performanceObservable.spec.ts

@@ -1,13 +1,7 @@
 import type { Duration, Subscription } from '@datadog/browser-core'
 import type { Clock } from '@datadog/browser-core/test'
 import { mockClock } from '@datadog/browser-core/test'
-import type { GlobalPerformanceBufferMock } from '../../test'
-import {
-  createPerformanceEntry,
-  mockGlobalPerformanceBuffer,
-  mockPerformanceObserver,
-  mockRumConfiguration,
-} from '../../test'
+import { createPerformanceEntry, mockPerformanceObserver, mockRumConfiguration } from '../../test'
 import { RumPerformanceEntryType, createPerformanceObservable } from './performanceObservable'
 
 describe('performanceObservable', () => {
@@ -66,7 +60,6 @@ describe('performanceObservable', () => {
 
     it('should notify buffered performance resources asynchronously', () => {
       const { notifyPerformanceEntries } = mockPerformanceObserver()
-      // add the performance entry to the buffer
       notifyPerformanceEntries([createPerformanceEntry(RumPerformanceEntryType.RESOURCE, { name: allowedUrl })])
 
       const performanceResourceObservable = createPerformanceObservable(configuration, {
@@ -81,12 +74,6 @@ describe('performanceObservable', () => {
   })
 
   describe('fallback strategy when type not supported', () => {
-    let globalPerformanceBufferMock: GlobalPerformanceBufferMock
-
-    beforeEach(() => {
-      globalPerformanceBufferMock = mockGlobalPerformanceBuffer()
-    })
-
     it('should notify performance resources when type not supported', () => {
       const { notifyPerformanceEntries } = mockPerformanceObserver({ typeSupported: false })
       const performanceResourceObservable = createPerformanceObservable(configuration, {
@@ -99,11 +86,9 @@ describe('performanceObservable', () => {
     })
 
     it('should notify buffered performance resources when type not supported', () => {
-      mockPerformanceObserver({ typeSupported: false })
+      const { notifyPerformanceEntries } = mockPerformanceObserver({ typeSupported: false })
       // add the performance entry to the buffer
-      globalPerformanceBufferMock.addPerformanceEntry(
-        createPerformanceEntry(RumPerformanceEntryType.RESOURCE, { name: allowedUrl })
-      )
+      notifyPerformanceEntries([createPerformanceEntry(RumPerformanceEntryType.RESOURCE, { name: allowedUrl })])
 
       const performanceResourceObservable = createPerformanceObservable(configuration, {
         type: RumPerformanceEntryType.RESOURCE,

packages/rum-core/src/domain/contexts/pageStateHistory.spec.ts

@@ -2,7 +2,7 @@ import type { ServerDuration, Duration, RelativeTime } from '@datadog/browser-co
 import { HookNames } from '@datadog/browser-core'
 import type { Clock } from '../../../../core/test'
 import { mockClock, registerCleanupTask } from '../../../../core/test'
-import { mockRumConfiguration, mockPerformanceObserver } from '../../../test'
+import { createPerformanceEntry, mockPerformanceObserver, mockRumConfiguration } from '../../../test'
 import { RumEventType } from '../../rawRumEvent.types'
 import * as performanceObservable from '../../browser/performanceObservable'
 import type { Hooks } from '../hooks'
@@ -14,18 +14,17 @@ describe('pageStateHistory', () => {
   let clock: Clock
   let hooks: Hooks
   const configuration = mockRumConfiguration()
-  let getEntriesByTypeSpy: jasmine.Spy<Performance['getEntriesByType']>
 
   beforeEach(() => {
     clock = mockClock()
     hooks = createHooks()
-    getEntriesByTypeSpy = spyOn(performance, 'getEntriesByType').and.returnValue([])
   })
 
   describe('wasInPageStateDuringPeriod', () => {
     let pageStateHistory: PageStateHistory
 
     beforeEach(() => {
+      mockPerformanceObserver()
       pageStateHistory = startPageStateHistory(hooks, configuration)
       registerCleanupTask(pageStateHistory.stop)
     })
@@ -70,6 +69,7 @@ describe('pageStateHistory', () => {
       let pageStateHistory: PageStateHistory
 
       beforeEach(() => {
+        mockPerformanceObserver()
         pageStateHistory = startPageStateHistory(hooks, configuration)
         registerCleanupTask(pageStateHistory.stop)
       })
@@ -180,6 +180,7 @@ describe('pageStateHistory', () => {
       let pageStateHistory: PageStateHistory
 
       beforeEach(() => {
+        mockPerformanceObserver()
         pageStateHistory = startPageStateHistory(hooks, configuration)
         registerCleanupTask(pageStateHistory.stop)
       })
@@ -226,22 +227,20 @@ describe('pageStateHistory', () => {
     })
 
     it('should backfill history if visibility-state is supported and entries exist', () => {
-      mockPerformanceObserver({
-        supportedEntryTypes: [
-          ...Object.values(performanceObservable.RumPerformanceEntryType).filter(
-            (type) => type !== performanceObservable.RumPerformanceEntryType.VISIBILITY_STATE
-          ),
-          performanceObservable.RumPerformanceEntryType.VISIBILITY_STATE,
-        ],
+      const { notifyPerformanceEntries } = mockPerformanceObserver({
+        supportedEntryTypes: [performanceObservable.RumPerformanceEntryType.VISIBILITY_STATE],
       })
 
-      const mockEntries = [
-        { entryType: 'visibility-state', name: 'visible', startTime: 5 },
-        { entryType: 'visibility-state', name: 'hidden', startTime: 15 },
-      ] as PerformanceEntry[]
-      getEntriesByTypeSpy
-        .withArgs(performanceObservable.RumPerformanceEntryType.VISIBILITY_STATE)
-        .and.returnValue(mockEntries)
+      notifyPerformanceEntries([
+        createPerformanceEntry(performanceObservable.RumPerformanceEntryType.VISIBILITY_STATE, {
+          name: 'visible',
+          startTime: 5 as RelativeTime,
+        }),
+        createPerformanceEntry(performanceObservable.RumPerformanceEntryType.VISIBILITY_STATE, {
+          name: 'hidden',
+          startTime: 15 as RelativeTime,
+        }),
+      ])
 
       pageStateHistory = startPageStateHistory(hooks, configuration)
       registerCleanupTask(pageStateHistory.stop)
@@ -254,19 +253,15 @@ describe('pageStateHistory', () => {
 
     it('should not backfill if visibility-state is not supported', () => {
       mockPerformanceObserver({
-        supportedEntryTypes: Object.values(performanceObservable.RumPerformanceEntryType).filter(
-          (type) => type !== performanceObservable.RumPerformanceEntryType.VISIBILITY_STATE
-        ),
+        supportedEntryTypes: [],
       })
 
-      getEntriesByTypeSpy.calls.reset()
-
       pageStateHistory = startPageStateHistory(hooks, configuration)
       registerCleanupTask(pageStateHistory.stop)
 
-      expect(getEntriesByTypeSpy).not.toHaveBeenCalledWith(
-        performanceObservable.RumPerformanceEntryType.VISIBILITY_STATE
-      )
+      expect(
+        pageStateHistory.wasInPageStateDuringPeriod(PageState.ACTIVE, 5 as RelativeTime, 5 as Duration)
+      ).toBeFalse()
     })
   })
 })

packages/rum-core/test/emulate/mockPerformanceObserver.ts

@@ -1,6 +1,7 @@
 import { registerCleanupTask } from '@datadog/browser-core/test'
 import { objectValues } from '@datadog/browser-core'
 import { RumPerformanceEntryType, type RumPerformanceEntry } from '../../src/browser/performanceObservable'
+import { mockGlobalPerformanceBuffer } from './mockGlobalPerformanceBuffer'
 
 export function mockPerformanceObserver({
   typeSupported = true,
@@ -9,7 +10,8 @@ export function mockPerformanceObserver({
 } = {}) {
   const originalPerformanceObserver = window.PerformanceObserver
   const instances = new Set<MockPerformanceObserver>()
-  let bufferedEntries: RumPerformanceEntry[] = []
+
+  const { addPerformanceEntry } = mockGlobalPerformanceBuffer([])
 
   class MockPerformanceObserver {
     static supportedEntryTypes = supportedEntryTypes
@@ -32,7 +34,9 @@ export function mockPerformanceObserver({
       this.entryTypes = entryTypes || (type ? [type] : [])
       instances.add(this)
       if (buffered) {
-        notify(this, bufferedEntries)
+        for (const entryType of this.entryTypes) {
+          notify(this, performance.getEntriesByType(entryType) as RumPerformanceEntry[])
+        }
       }
     }
 
@@ -46,7 +50,6 @@ export function mockPerformanceObserver({
   registerCleanupTask(() => {
     window.PerformanceObserver = originalPerformanceObserver
     instances.clear()
-    bufferedEntries = []
   })
 
   function notify(observer: MockPerformanceObserver, entries: RumPerformanceEntry[]) {
@@ -66,7 +69,9 @@ export function mockPerformanceObserver({
 
   return {
     notifyPerformanceEntries: (entries: RumPerformanceEntry[]) => {
-      bufferedEntries.push(...entries)
+      for (const entry of entries) {
+        addPerformanceEntry(entry as PerformanceEntry)
+      }
       instances.forEach((instance) => notify(instance, entries))
     },
   }

packages/rum-core/test/fixtures.ts

@@ -267,6 +267,14 @@ export function createPerformanceEntry<T extends RumPerformanceEntryType>(
       }
       break
 
+    case RumPerformanceEntryType.VISIBILITY_STATE:
+      entry = {
+        entryType: RumPerformanceEntryType.VISIBILITY_STATE,
+        name: 'visible',
+        startTime: 0 as RelativeTime,
+      }
+      break
+
     default:
       throw new Error(`Unsupported entryType fixture: ${entryType}`)
   }